diff --git a/404.html b/404.html
index 8859c0a5f..25aed8c8d 100644
--- a/404.html
+++ b/404.html
@@ -12,9 +12,9 @@
-
-
-
+
+
+
diff --git a/assets/css/styles.46010832.css b/assets/css/styles.46010832.css
deleted file mode 100644
index ff5a729c3..000000000
--- a/assets/css/styles.46010832.css
+++ /dev/null
@@ -1 +0,0 @@
-.col,.container{padding:0 var(--ifm-spacing-horizontal);width:100%}.markdown>h2,.markdown>h3,.markdown>h4,.markdown>h5,.markdown>h6{margin-bottom:calc(var(--ifm-heading-vertical-rhythm-bottom)*var(--ifm-leading))}.markdown li,body{word-wrap:break-word}body,ol ol,ol ul,ul ol,ul ul{margin:0}pre,table{overflow:auto}blockquote,pre{margin:0 0 var(--ifm-spacing-vertical)}.breadcrumbs__link,.button{transition-timing-function:var(--ifm-transition-timing-default)}.button,.hash-link{-webkit-user-select:none}.button,code{vertical-align:middle}.button--outline.button--active,.button--outline:active,.button--outline:hover,:root{--ifm-button-color:var(--ifm-font-color-base-inverse)}.menu__link:hover,a{transition:color var(--ifm-transition-fast) var(--ifm-transition-timing-default)}.navbar--dark,:root{--ifm-navbar-link-hover-color:var(--ifm-color-primary)}.menu,.navbar-sidebar{overflow-x:hidden}:root,html[data-theme=dark]{--ifm-color-emphasis-500:var(--ifm-color-gray-500)}.toggleButton_gllP,html{-webkit-tap-highlight-color:transparent}*,.DocSearch-Container,.DocSearch-Container *{box-sizing:border-box}:root{--ifm-color-scheme:light;--ifm-dark-value:10%;--ifm-darker-value:15%;--ifm-darkest-value:30%;--ifm-light-value:15%;--ifm-lighter-value:30%;--ifm-lightest-value:50%;--ifm-contrast-background-value:90%;--ifm-contrast-foreground-value:70%;--ifm-contrast-background-dark-value:70%;--ifm-contrast-foreground-dark-value:90%;--ifm-color-primary:#3578e5;--ifm-color-secondary:#ebedf0;--ifm-color-success:#00a400;--ifm-color-info:#54c7ec;--ifm-color-warning:#ffba00;--ifm-color-danger:#fa383e;--ifm-color-primary-dark:#306cce;--ifm-color-primary-darker:#2d66c3;--ifm-color-primary-darkest:#2554a0;--ifm-color-primary-light:#538ce9;--ifm-color-primary-lighter:#72a1ed;--ifm-color-primary-lightest:#9abcf2;--ifm-color-primary-contrast-background:#ebf2fc;--ifm-color-primary-contrast-foreground:#102445;--ifm-color-secondary-dark:#d4d5d8;--ifm-color-secondary-darker:#c8c9cc;--ifm-color-secondary-darkest:#a4a6a8;--ifm-color-secondary-light:#eef0f2;--ifm-color-secondary-lighter:#f1f2f5;--ifm-color-secondary-lightest:#f5f6f8;--ifm-color-secondary-contrast-background:#fdfdfe;--ifm-color-secondary-contrast-foreground:#474748;--ifm-color-success-dark:#009400;--ifm-color-success-darker:#008b00;--ifm-color-success-darkest:#007300;--ifm-color-success-light:#26b226;--ifm-color-success-lighter:#4dbf4d;--ifm-color-success-lightest:#80d280;--ifm-color-success-contrast-background:#e6f6e6;--ifm-color-success-contrast-foreground:#003100;--ifm-color-info-dark:#4cb3d4;--ifm-color-info-darker:#47a9c9;--ifm-color-info-darkest:#3b8ba5;--ifm-color-info-light:#6ecfef;--ifm-color-info-lighter:#87d8f2;--ifm-color-info-lightest:#aae3f6;--ifm-color-info-contrast-background:#eef9fd;--ifm-color-info-contrast-foreground:#193c47;--ifm-color-warning-dark:#e6a700;--ifm-color-warning-darker:#d99e00;--ifm-color-warning-darkest:#b38200;--ifm-color-warning-light:#ffc426;--ifm-color-warning-lighter:#ffcf4d;--ifm-color-warning-lightest:#ffdd80;--ifm-color-warning-contrast-background:#fff8e6;--ifm-color-warning-contrast-foreground:#4d3800;--ifm-color-danger-dark:#e13238;--ifm-color-danger-darker:#d53035;--ifm-color-danger-darkest:#af272b;--ifm-color-danger-light:#fb565b;--ifm-color-danger-lighter:#fb7478;--ifm-color-danger-lightest:#fd9c9f;--ifm-color-danger-contrast-background:#ffebec;--ifm-color-danger-contrast-foreground:#4b1113;--ifm-color-white:#fff;--ifm-color-black:#000;--ifm-color-gray-0:var(--ifm-color-white);--ifm-color-gray-100:#f5f6f7;--ifm-color-gray-200:#ebedf0;--ifm-color-gray-300:#dadde1;--ifm-color-gray-400:#ccd0d5;--ifm-color-gray-500:#bec3c9;--ifm-color-gray-600:#8d949e;--ifm-color-gray-700:#606770;--ifm-color-gray-800:#444950;--ifm-color-gray-900:#1c1e21;--ifm-color-gray-1000:var(--ifm-color-black);--ifm-color-emphasis-0:var(--ifm-color-gray-0);--ifm-color-emphasis-100:var(--ifm-color-gray-100);--ifm-color-emphasis-200:var(--ifm-color-gray-200);--ifm-color-emphasis-300:var(--ifm-color-gray-300);--ifm-color-emphasis-400:var(--ifm-color-gray-400);--ifm-color-emphasis-600:var(--ifm-color-gray-600);--ifm-color-emphasis-700:var(--ifm-color-gray-700);--ifm-color-emphasis-800:var(--ifm-color-gray-800);--ifm-color-emphasis-900:var(--ifm-color-gray-900);--ifm-color-emphasis-1000:var(--ifm-color-gray-1000);--ifm-color-content:var(--ifm-color-emphasis-900);--ifm-color-content-inverse:var(--ifm-color-emphasis-0);--ifm-color-content-secondary:#525860;--ifm-background-color:#0000;--ifm-background-surface-color:var(--ifm-color-content-inverse);--ifm-global-border-width:1px;--ifm-global-radius:0.4rem;--ifm-hover-overlay:#0000000d;--ifm-font-color-base:var(--ifm-color-content);--ifm-font-color-base-inverse:var(--ifm-color-content-inverse);--ifm-font-color-secondary:var(--ifm-color-content-secondary);--ifm-font-family-base:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--ifm-font-family-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--ifm-font-size-base:100%;--ifm-font-weight-light:300;--ifm-font-weight-normal:400;--ifm-font-weight-semibold:500;--ifm-font-weight-bold:700;--ifm-font-weight-base:var(--ifm-font-weight-normal);--ifm-line-height-base:1.65;--ifm-global-spacing:1rem;--ifm-spacing-vertical:var(--ifm-global-spacing);--ifm-spacing-horizontal:var(--ifm-global-spacing);--ifm-transition-fast:200ms;--ifm-transition-slow:400ms;--ifm-transition-timing-default:cubic-bezier(0.08,0.52,0.52,1);--ifm-global-shadow-lw:0 1px 2px 0 #0000001a;--ifm-global-shadow-md:0 5px 40px #0003;--ifm-global-shadow-tl:0 12px 28px 0 #0003,0 2px 4px 0 #0000001a;--ifm-z-index-dropdown:100;--ifm-z-index-fixed:200;--ifm-z-index-overlay:400;--ifm-container-width:1140px;--ifm-container-width-xl:1320px;--ifm-code-background:#f6f7f8;--ifm-code-border-radius:var(--ifm-global-radius);--ifm-code-font-size:90%;--ifm-code-padding-horizontal:0.1rem;--ifm-code-padding-vertical:0.1rem;--ifm-pre-background:var(--ifm-code-background);--ifm-pre-border-radius:var(--ifm-code-border-radius);--ifm-pre-color:inherit;--ifm-pre-line-height:1.45;--ifm-pre-padding:1rem;--ifm-heading-color:inherit;--ifm-heading-margin-top:0;--ifm-heading-margin-bottom:var(--ifm-spacing-vertical);--ifm-heading-font-family:var(--ifm-font-family-base);--ifm-heading-font-weight:var(--ifm-font-weight-bold);--ifm-heading-line-height:1.25;--ifm-h1-font-size:2rem;--ifm-h2-font-size:1.5rem;--ifm-h3-font-size:1.25rem;--ifm-h4-font-size:1rem;--ifm-h5-font-size:0.875rem;--ifm-h6-font-size:0.85rem;--ifm-image-alignment-padding:1.25rem;--ifm-leading-desktop:1.25;--ifm-leading:calc(var(--ifm-leading-desktop)*1rem);--ifm-list-left-padding:2rem;--ifm-list-margin:1rem;--ifm-list-item-margin:0.25rem;--ifm-list-paragraph-margin:1rem;--ifm-table-cell-padding:0.75rem;--ifm-table-background:#0000;--ifm-table-stripe-background:#00000008;--ifm-table-border-width:1px;--ifm-table-border-color:var(--ifm-color-emphasis-300);--ifm-table-head-background:inherit;--ifm-table-head-color:inherit;--ifm-table-head-font-weight:var(--ifm-font-weight-bold);--ifm-table-cell-color:inherit;--ifm-link-color:var(--ifm-color-primary);--ifm-link-decoration:none;--ifm-link-hover-color:var(--ifm-link-color);--ifm-link-hover-decoration:underline;--ifm-paragraph-margin-bottom:var(--ifm-leading);--ifm-blockquote-font-size:var(--ifm-font-size-base);--ifm-blockquote-border-left-width:2px;--ifm-blockquote-padding-horizontal:var(--ifm-spacing-horizontal);--ifm-blockquote-padding-vertical:0;--ifm-blockquote-shadow:none;--ifm-blockquote-color:var(--ifm-color-emphasis-800);--ifm-blockquote-border-color:var(--ifm-color-emphasis-300);--ifm-hr-background-color:var(--ifm-color-emphasis-500);--ifm-hr-height:1px;--ifm-hr-margin-vertical:1.5rem;--ifm-scrollbar-size:7px;--ifm-scrollbar-track-background-color:#f1f1f1;--ifm-scrollbar-thumb-background-color:silver;--ifm-scrollbar-thumb-hover-background-color:#a7a7a7;--ifm-alert-background-color:inherit;--ifm-alert-border-color:inherit;--ifm-alert-border-radius:var(--ifm-global-radius);--ifm-alert-border-width:0px;--ifm-alert-border-left-width:5px;--ifm-alert-color:var(--ifm-font-color-base);--ifm-alert-padding-horizontal:var(--ifm-spacing-horizontal);--ifm-alert-padding-vertical:var(--ifm-spacing-vertical);--ifm-alert-shadow:var(--ifm-global-shadow-lw);--ifm-avatar-intro-margin:1rem;--ifm-avatar-intro-alignment:inherit;--ifm-avatar-photo-size:3rem;--ifm-badge-background-color:inherit;--ifm-badge-border-color:inherit;--ifm-badge-border-radius:var(--ifm-global-radius);--ifm-badge-border-width:var(--ifm-global-border-width);--ifm-badge-color:var(--ifm-color-white);--ifm-badge-padding-horizontal:calc(var(--ifm-spacing-horizontal)*0.5);--ifm-badge-padding-vertical:calc(var(--ifm-spacing-vertical)*0.25);--ifm-breadcrumb-border-radius:1.5rem;--ifm-breadcrumb-spacing:0.5rem;--ifm-breadcrumb-color-active:var(--ifm-color-primary);--ifm-breadcrumb-item-background-active:var(--ifm-hover-overlay);--ifm-breadcrumb-padding-horizontal:0.8rem;--ifm-breadcrumb-padding-vertical:0.4rem;--ifm-breadcrumb-size-multiplier:1;--ifm-breadcrumb-separator:url('data:image/svg+xml;utf8,');--ifm-breadcrumb-separator-filter:none;--ifm-breadcrumb-separator-size:0.5rem;--ifm-breadcrumb-separator-size-multiplier:1.25;--ifm-button-background-color:inherit;--ifm-button-border-color:var(--ifm-button-background-color);--ifm-button-border-width:var(--ifm-global-border-width);--ifm-button-font-weight:var(--ifm-font-weight-bold);--ifm-button-padding-horizontal:1.5rem;--ifm-button-padding-vertical:0.375rem;--ifm-button-size-multiplier:1;--ifm-button-transition-duration:var(--ifm-transition-fast);--ifm-button-border-radius:calc(var(--ifm-global-radius)*var(--ifm-button-size-multiplier));--ifm-button-group-spacing:2px;--ifm-card-background-color:var(--ifm-background-surface-color);--ifm-card-border-radius:calc(var(--ifm-global-radius)*2);--ifm-card-horizontal-spacing:var(--ifm-global-spacing);--ifm-card-vertical-spacing:var(--ifm-global-spacing);--ifm-toc-border-color:var(--ifm-color-emphasis-300);--ifm-toc-link-color:var(--ifm-color-content-secondary);--ifm-toc-padding-vertical:0.5rem;--ifm-toc-padding-horizontal:0.5rem;--ifm-dropdown-background-color:var(--ifm-background-surface-color);--ifm-dropdown-font-weight:var(--ifm-font-weight-semibold);--ifm-dropdown-link-color:var(--ifm-font-color-base);--ifm-dropdown-hover-background-color:var(--ifm-hover-overlay);--ifm-footer-background-color:var(--ifm-color-emphasis-100);--ifm-footer-color:inherit;--ifm-footer-link-color:var(--ifm-color-emphasis-700);--ifm-footer-link-hover-color:var(--ifm-color-primary);--ifm-footer-link-horizontal-spacing:0.5rem;--ifm-footer-padding-horizontal:calc(var(--ifm-spacing-horizontal)*2);--ifm-footer-padding-vertical:calc(var(--ifm-spacing-vertical)*2);--ifm-footer-title-color:inherit;--ifm-footer-logo-max-width:min(30rem,90vw);--ifm-hero-background-color:var(--ifm-background-surface-color);--ifm-hero-text-color:var(--ifm-color-emphasis-800);--ifm-menu-color:var(--ifm-color-emphasis-700);--ifm-menu-color-active:var(--ifm-color-primary);--ifm-menu-color-background-active:var(--ifm-hover-overlay);--ifm-menu-color-background-hover:var(--ifm-hover-overlay);--ifm-menu-link-padding-horizontal:0.75rem;--ifm-menu-link-padding-vertical:0.375rem;--ifm-menu-link-sublist-icon:url('data:image/svg+xml;utf8,');--ifm-menu-link-sublist-icon-filter:none;--ifm-navbar-background-color:var(--ifm-background-surface-color);--ifm-navbar-height:3.75rem;--ifm-navbar-item-padding-horizontal:0.75rem;--ifm-navbar-item-padding-vertical:0.25rem;--ifm-navbar-link-color:var(--ifm-font-color-base);--ifm-navbar-link-active-color:var(--ifm-link-color);--ifm-navbar-padding-horizontal:var(--ifm-spacing-horizontal);--ifm-navbar-padding-vertical:calc(var(--ifm-spacing-vertical)*0.5);--ifm-navbar-shadow:var(--ifm-global-shadow-lw);--ifm-navbar-search-input-background-color:var(--ifm-color-emphasis-200);--ifm-navbar-search-input-color:var(--ifm-color-emphasis-800);--ifm-navbar-search-input-placeholder-color:var(--ifm-color-emphasis-500);--ifm-navbar-search-input-icon:url('data:image/svg+xml;utf8,');--ifm-navbar-sidebar-width:83vw;--ifm-pagination-border-radius:var(--ifm-global-radius);--ifm-pagination-color-active:var(--ifm-color-primary);--ifm-pagination-font-size:1rem;--ifm-pagination-item-active-background:var(--ifm-hover-overlay);--ifm-pagination-page-spacing:0.2em;--ifm-pagination-padding-horizontal:calc(var(--ifm-spacing-horizontal)*1);--ifm-pagination-padding-vertical:calc(var(--ifm-spacing-vertical)*0.25);--ifm-pagination-nav-border-radius:var(--ifm-global-radius);--ifm-pagination-nav-color-hover:var(--ifm-color-primary);--ifm-pills-color-active:var(--ifm-color-primary);--ifm-pills-color-background-active:var(--ifm-hover-overlay);--ifm-pills-spacing:0.125rem;--ifm-tabs-color:var(--ifm-font-color-secondary);--ifm-tabs-color-active:var(--ifm-color-primary);--ifm-tabs-color-active-border:var(--ifm-tabs-color-active);--ifm-tabs-padding-horizontal:1rem;--ifm-tabs-padding-vertical:1rem;--docusaurus-progress-bar-color:var(--ifm-color-primary);--ifm-color-primary:#0063cc;--ifm-color-primary-dark:#0059b8;--ifm-color-primary-darker:#0054ad;--ifm-color-primary-darkest:#00458f;--ifm-color-primary-light:#006de0;--ifm-color-primary-lighter:#0072eb;--ifm-color-primary-lightest:#1f8bff;--docusaurus-highlighted-code-line-bg:#dddfe1;--code-display-color:#f8fafc;--inversion-percentage:0%;--ifm-container-width-xl:calc(25% + 860px);--chip-background:#e2e2e2;--chip-background-hover:#cfcfcf;--chip-text:#5f6163;--chip-icon-color:#616161;--docusaurus-announcement-bar-height:auto;--docusaurus-tag-list-border:var(--ifm-color-emphasis-300);--docusaurus-collapse-button-bg:#0000;--docusaurus-collapse-button-bg-hover:#0000001a;--doc-sidebar-width:300px;--doc-sidebar-hidden-width:30px;--docsearch-primary-color:#5468ff;--docsearch-text-color:#1c1e21;--docsearch-spacing:12px;--docsearch-icon-stroke-width:1.4;--docsearch-highlight-color:var(--docsearch-primary-color);--docsearch-muted-color:#969faf;--docsearch-container-background:#656c85cc;--docsearch-logo-color:#5468ff;--docsearch-modal-width:560px;--docsearch-modal-height:600px;--docsearch-modal-background:#f5f6f7;--docsearch-modal-shadow:inset 1px 1px 0 0 #ffffff80,0 3px 8px 0 #555a64;--docsearch-searchbox-height:56px;--docsearch-searchbox-background:#ebedf0;--docsearch-searchbox-focus-background:#fff;--docsearch-searchbox-shadow:inset 0 0 0 2px var(--docsearch-primary-color);--docsearch-hit-height:56px;--docsearch-hit-color:#444950;--docsearch-hit-active-color:#fff;--docsearch-hit-background:#fff;--docsearch-hit-shadow:0 1px 3px 0 #d4d9e1;--docsearch-key-gradient:linear-gradient(-225deg,#d5dbe4,#f8f8f8);--docsearch-key-shadow:inset 0 -2px 0 0 #cdcde6,inset 0 0 1px 1px #fff,0 1px 2px 1px #1e235a66;--docsearch-footer-height:44px;--docsearch-footer-background:#fff;--docsearch-footer-shadow:0 -1px 0 0 #e0e3e8,0 -3px 6px 0 #45629b1f;--docsearch-primary-color:var(--ifm-color-primary);--docsearch-text-color:var(--ifm-font-color-base)}.badge--danger,.badge--info,.badge--primary,.badge--secondary,.badge--success,.badge--warning{--ifm-badge-border-color:var(--ifm-badge-background-color)}.button--link,.button--outline{--ifm-button-background-color:#0000}html{-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;text-size-adjust:100%;background-color:var(--ifm-background-color);color:var(--ifm-font-color-base);color-scheme:var(--ifm-color-scheme);font:var(--ifm-font-size-base)/var(--ifm-line-height-base) var(--ifm-font-family-base);text-rendering:optimizelegibility}iframe{border:0;color-scheme:auto}.container{margin:0 auto;max-width:var(--ifm-container-width)}.container--fluid{max-width:inherit}.row{display:flex;flex-wrap:wrap;margin:0 calc(var(--ifm-spacing-horizontal)*-1)}.list_eTzJ article:last-child,.margin-bottom--none,.margin-vert--none,.markdown>:last-child{margin-bottom:0!important}.margin-top--none,.margin-vert--none,.tabItem_LNqP{margin-top:0!important}.row--no-gutters{margin-left:0;margin-right:0}.margin-horiz--none,.margin-right--none{margin-right:0!important}.row--no-gutters>.col{padding-left:0;padding-right:0}.row--align-top{align-items:flex-start}.row--align-bottom{align-items:flex-end}.menuExternalLink_NmtK,.row--align-center{align-items:center}.row--align-stretch{align-items:stretch}.row--align-baseline{align-items:baseline}.col{--ifm-col-width:100%;flex:1 0;margin-left:0;max-width:var(--ifm-col-width)}.padding-bottom--none,.padding-vert--none{padding-bottom:0!important}.padding-top--none,.padding-vert--none{padding-top:0!important}.padding-horiz--none,.padding-left--none{padding-left:0!important}.padding-horiz--none,.padding-right--none{padding-right:0!important}.col[class*=col--]{flex:0 0 var(--ifm-col-width)}.col--1{--ifm-col-width:8.33333%}.col--offset-1{margin-left:8.33333%}.col--2{--ifm-col-width:16.66667%}.col--offset-2{margin-left:16.66667%}.col--3{--ifm-col-width:25%}.col--offset-3{margin-left:25%}.col--4{--ifm-col-width:33.33333%}.col--offset-4{margin-left:33.33333%}.col--5{--ifm-col-width:41.66667%}.col--offset-5{margin-left:41.66667%}.col--6{--ifm-col-width:50%}.col--offset-6{margin-left:50%}.col--7{--ifm-col-width:58.33333%}.col--offset-7{margin-left:58.33333%}.col--8{--ifm-col-width:66.66667%}.col--offset-8{margin-left:66.66667%}.col--9{--ifm-col-width:75%}.col--offset-9{margin-left:75%}.col--10{--ifm-col-width:83.33333%}.col--offset-10{margin-left:83.33333%}.col--11{--ifm-col-width:91.66667%}.col--offset-11{margin-left:91.66667%}.col--12{--ifm-col-width:100%}.col--offset-12{margin-left:100%}.margin-horiz--none,.margin-left--none{margin-left:0!important}.margin--none{margin:0!important}.margin-bottom--xs,.margin-vert--xs{margin-bottom:.25rem!important}.margin-top--xs,.margin-vert--xs{margin-top:.25rem!important}.margin-horiz--xs,.margin-left--xs{margin-left:.25rem!important}.margin-horiz--xs,.margin-right--xs{margin-right:.25rem!important}.margin--xs{margin:.25rem!important}.margin-bottom--sm,.margin-vert--sm{margin-bottom:.5rem!important}.margin-top--sm,.margin-vert--sm{margin-top:.5rem!important}.margin-horiz--sm,.margin-left--sm{margin-left:.5rem!important}.margin-horiz--sm,.margin-right--sm{margin-right:.5rem!important}.margin--sm{margin:.5rem!important}.margin-bottom--md,.margin-vert--md{margin-bottom:1rem!important}.margin-top--md,.margin-vert--md{margin-top:1rem!important}.margin-horiz--md,.margin-left--md{margin-left:1rem!important}.margin-horiz--md,.margin-right--md{margin-right:1rem!important}.margin--md{margin:1rem!important}.margin-bottom--lg,.margin-vert--lg{margin-bottom:2rem!important}.margin-top--lg,.margin-vert--lg{margin-top:2rem!important}.margin-horiz--lg,.margin-left--lg{margin-left:2rem!important}.margin-horiz--lg,.margin-right--lg{margin-right:2rem!important}.margin--lg{margin:2rem!important}.margin-bottom--xl,.margin-vert--xl{margin-bottom:5rem!important}.margin-top--xl,.margin-vert--xl{margin-top:5rem!important}.margin-horiz--xl,.margin-left--xl{margin-left:5rem!important}.margin-horiz--xl,.margin-right--xl{margin-right:5rem!important}.margin--xl{margin:5rem!important}.padding--none{padding:0!important}.padding-bottom--xs,.padding-vert--xs{padding-bottom:.25rem!important}.padding-top--xs,.padding-vert--xs{padding-top:.25rem!important}.padding-horiz--xs,.padding-left--xs{padding-left:.25rem!important}.padding-horiz--xs,.padding-right--xs{padding-right:.25rem!important}.padding--xs{padding:.25rem!important}.padding-bottom--sm,.padding-vert--sm{padding-bottom:.5rem!important}.padding-top--sm,.padding-vert--sm{padding-top:.5rem!important}.padding-horiz--sm,.padding-left--sm{padding-left:.5rem!important}.padding-horiz--sm,.padding-right--sm{padding-right:.5rem!important}.padding--sm{padding:.5rem!important}.padding-bottom--md,.padding-vert--md{padding-bottom:1rem!important}.padding-top--md,.padding-vert--md{padding-top:1rem!important}.padding-horiz--md,.padding-left--md{padding-left:1rem!important}.padding-horiz--md,.padding-right--md{padding-right:1rem!important}.padding--md{padding:1rem!important}.padding-bottom--lg,.padding-vert--lg{padding-bottom:2rem!important}.padding-top--lg,.padding-vert--lg{padding-top:2rem!important}.padding-horiz--lg,.padding-left--lg{padding-left:2rem!important}.padding-horiz--lg,.padding-right--lg{padding-right:2rem!important}.padding--lg{padding:2rem!important}.padding-bottom--xl,.padding-vert--xl{padding-bottom:5rem!important}.padding-top--xl,.padding-vert--xl{padding-top:5rem!important}.padding-horiz--xl,.padding-left--xl{padding-left:5rem!important}.padding-horiz--xl,.padding-right--xl{padding-right:5rem!important}.padding--xl{padding:5rem!important}code{background-color:var(--ifm-code-background);border:.1rem solid #0000001a;border-radius:var(--ifm-code-border-radius);font-family:var(--ifm-font-family-monospace);font-size:var(--ifm-code-font-size);padding:var(--ifm-code-padding-vertical) var(--ifm-code-padding-horizontal)}a code{color:inherit}pre{background-color:var(--ifm-pre-background);border-radius:var(--ifm-pre-border-radius);color:var(--ifm-pre-color);font:var(--ifm-code-font-size)/var(--ifm-pre-line-height) var(--ifm-font-family-monospace);padding:var(--ifm-pre-padding)}pre code{background-color:initial;border:none;font-size:100%;line-height:inherit;padding:0}kbd{background-color:var(--ifm-color-emphasis-0);border:1px solid var(--ifm-color-emphasis-400);border-radius:.2rem;box-shadow:inset 0 -1px 0 var(--ifm-color-emphasis-400);color:var(--ifm-color-emphasis-800);font:80% var(--ifm-font-family-monospace);padding:.15rem .3rem}h1,h2,h3,h4,h5,h6{color:var(--ifm-heading-color);font-family:var(--ifm-heading-font-family);font-weight:var(--ifm-heading-font-weight);line-height:var(--ifm-heading-line-height);margin:var(--ifm-heading-margin-top) 0 var(--ifm-heading-margin-bottom) 0}h1{font-size:var(--ifm-h1-font-size)}h2{font-size:var(--ifm-h2-font-size)}h3{font-size:var(--ifm-h3-font-size)}h4{font-size:var(--ifm-h4-font-size)}h5{font-size:var(--ifm-h5-font-size)}h6{font-size:var(--ifm-h6-font-size)}img{max-width:100%}img[align=right]{padding-left:var(--image-alignment-padding)}img[align=left]{padding-right:var(--image-alignment-padding)}.markdown{--ifm-h1-vertical-rhythm-top:3;--ifm-h2-vertical-rhythm-top:2;--ifm-h3-vertical-rhythm-top:1.5;--ifm-heading-vertical-rhythm-top:1.25;--ifm-h1-vertical-rhythm-bottom:1.25;--ifm-heading-vertical-rhythm-bottom:1}.markdown:after,.markdown:before{content:"";display:table}.markdown:after{clear:both}.markdown h1:first-child{--ifm-h1-font-size:3rem;margin-bottom:calc(var(--ifm-h1-vertical-rhythm-bottom)*var(--ifm-leading))}.markdown>h2{--ifm-h2-font-size:2rem;margin-top:calc(var(--ifm-h2-vertical-rhythm-top)*var(--ifm-leading))}.markdown>h3{--ifm-h3-font-size:1.5rem;margin-top:calc(var(--ifm-h3-vertical-rhythm-top)*var(--ifm-leading))}.markdown>h4,.markdown>h5,.markdown>h6{margin-top:calc(var(--ifm-heading-vertical-rhythm-top)*var(--ifm-leading))}.markdown>p,.markdown>pre,.markdown>ul,.tabList__CuJ{margin-bottom:var(--ifm-leading)}.markdown li>p{margin-top:var(--ifm-list-paragraph-margin)}.markdown li+li{margin-top:var(--ifm-list-item-margin)}ol,ul{margin:0 0 var(--ifm-list-margin);padding-left:var(--ifm-list-left-padding)}ol ol,ul ol{list-style-type:lower-roman}ol ol ol,ol ul ol,ul ol ol,ul ul ol{list-style-type:lower-alpha}table{border-collapse:collapse;display:block;margin-bottom:var(--ifm-spacing-vertical)}table thead tr{border-bottom:2px solid var(--ifm-table-border-color)}table thead,table tr:nth-child(2n){background-color:var(--ifm-table-stripe-background)}table tr{background-color:var(--ifm-table-background);border-top:var(--ifm-table-border-width) solid var(--ifm-table-border-color)}table td,table th{border:var(--ifm-table-border-width) solid var(--ifm-table-border-color);padding:var(--ifm-table-cell-padding)}table th{background-color:var(--ifm-table-head-background);color:var(--ifm-table-head-color);font-weight:var(--ifm-table-head-font-weight)}table td{color:var(--ifm-table-cell-color)}strong{font-weight:var(--ifm-font-weight-bold)}a{color:var(--ifm-link-color);text-decoration:var(--ifm-link-decoration)}a:hover{color:var(--ifm-link-hover-color);text-decoration:var(--ifm-link-hover-decoration)}.button:hover,.text--no-decoration,.text--no-decoration:hover,a:not([href]){text-decoration:none}p{margin:0 0 var(--ifm-paragraph-margin-bottom)}blockquote{border-left:var(--ifm-blockquote-border-left-width) solid var(--ifm-blockquote-border-color);box-shadow:var(--ifm-blockquote-shadow);color:var(--ifm-blockquote-color);font-size:var(--ifm-blockquote-font-size);padding:var(--ifm-blockquote-padding-vertical) var(--ifm-blockquote-padding-horizontal)}blockquote>:first-child{margin-top:0}blockquote>:last-child{margin-bottom:0}hr{background-color:var(--ifm-hr-background-color);border:0;height:var(--ifm-hr-height);margin:var(--ifm-hr-margin-vertical) 0}.shadow--lw{box-shadow:var(--ifm-global-shadow-lw)!important}.shadow--md{box-shadow:var(--ifm-global-shadow-md)!important}.shadow--tl{box-shadow:var(--ifm-global-shadow-tl)!important}.text--primary,.wordWrapButtonEnabled_EoeP .wordWrapButtonIcon_Bwma{color:var(--ifm-color-primary)}.text--secondary{color:var(--ifm-color-secondary)}.text--success{color:var(--ifm-color-success)}.text--info{color:var(--ifm-color-info)}.text--warning{color:var(--ifm-color-warning)}.text--danger{color:var(--ifm-color-danger)}.text--center{text-align:center}.text--left{text-align:left}.text--justify{text-align:justify}.text--right{text-align:right}.text--capitalize{text-transform:capitalize}.text--lowercase{text-transform:lowercase}.admonitionHeading_Gvgb,.alert__heading,.text--uppercase{text-transform:uppercase}.text--light{font-weight:var(--ifm-font-weight-light)}.text--normal{font-weight:var(--ifm-font-weight-normal)}.text--semibold{font-weight:var(--ifm-font-weight-semibold)}.text--bold{font-weight:var(--ifm-font-weight-bold)}.text--italic{font-style:italic}.text--truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text--break{word-wrap:break-word!important;word-break:break-word!important}.clean-btn{background:none;border:none;color:inherit;cursor:pointer;font-family:inherit;padding:0}.alert,.alert .close{color:var(--ifm-alert-foreground-color)}.clean-list{list-style:none;padding-left:0}.alert--primary{--ifm-alert-background-color:var(--ifm-color-primary-contrast-background);--ifm-alert-background-color-highlight:#3578e526;--ifm-alert-foreground-color:var(--ifm-color-primary-contrast-foreground);--ifm-alert-border-color:var(--ifm-color-primary-dark)}.alert--secondary{--ifm-alert-background-color:var(--ifm-color-secondary-contrast-background);--ifm-alert-background-color-highlight:#ebedf026;--ifm-alert-foreground-color:var(--ifm-color-secondary-contrast-foreground);--ifm-alert-border-color:var(--ifm-color-secondary-dark)}.alert--success{--ifm-alert-background-color:var(--ifm-color-success-contrast-background);--ifm-alert-background-color-highlight:#00a40026;--ifm-alert-foreground-color:var(--ifm-color-success-contrast-foreground);--ifm-alert-border-color:var(--ifm-color-success-dark)}.alert--info{--ifm-alert-background-color:var(--ifm-color-info-contrast-background);--ifm-alert-background-color-highlight:#54c7ec26;--ifm-alert-foreground-color:var(--ifm-color-info-contrast-foreground);--ifm-alert-border-color:var(--ifm-color-info-dark)}.alert--warning{--ifm-alert-background-color:var(--ifm-color-warning-contrast-background);--ifm-alert-background-color-highlight:#ffba0026;--ifm-alert-foreground-color:var(--ifm-color-warning-contrast-foreground);--ifm-alert-border-color:var(--ifm-color-warning-dark)}.alert--danger{--ifm-alert-background-color:var(--ifm-color-danger-contrast-background);--ifm-alert-background-color-highlight:#fa383e26;--ifm-alert-foreground-color:var(--ifm-color-danger-contrast-foreground);--ifm-alert-border-color:var(--ifm-color-danger-dark)}.alert{--ifm-code-background:var(--ifm-alert-background-color-highlight);--ifm-link-color:var(--ifm-alert-foreground-color);--ifm-link-hover-color:var(--ifm-alert-foreground-color);--ifm-link-decoration:underline;--ifm-tabs-color:var(--ifm-alert-foreground-color);--ifm-tabs-color-active:var(--ifm-alert-foreground-color);--ifm-tabs-color-active-border:var(--ifm-alert-border-color);background-color:var(--ifm-alert-background-color);border:var(--ifm-alert-border-width) solid var(--ifm-alert-border-color);border-left-width:var(--ifm-alert-border-left-width);border-radius:var(--ifm-alert-border-radius);box-shadow:var(--ifm-alert-shadow);padding:var(--ifm-alert-padding-vertical) var(--ifm-alert-padding-horizontal)}.alert__heading{align-items:center;display:flex;font:700 var(--ifm-h5-font-size)/var(--ifm-heading-line-height) var(--ifm-heading-font-family);margin-bottom:.5rem}.alert__icon{display:inline-flex;margin-right:.4em}.alert__icon svg{fill:var(--ifm-alert-foreground-color);stroke:var(--ifm-alert-foreground-color);stroke-width:0}.alert .close{margin:calc(var(--ifm-alert-padding-vertical)*-1) calc(var(--ifm-alert-padding-horizontal)*-1) 0 0;opacity:.75}.alert .close:focus,.alert .close:hover{opacity:1}.alert a{text-decoration-color:var(--ifm-alert-border-color)}.alert a:hover{text-decoration-thickness:2px}.avatar{column-gap:var(--ifm-avatar-intro-margin);display:flex}.avatar__photo{border-radius:50%;display:block;height:var(--ifm-avatar-photo-size);overflow:hidden;width:var(--ifm-avatar-photo-size)}.card--full-height,.navbar__logo img,body,html{height:100%}.avatar__photo--sm{--ifm-avatar-photo-size:2rem}.avatar__photo--lg{--ifm-avatar-photo-size:4rem}.avatar__photo--xl{--ifm-avatar-photo-size:6rem}.avatar__intro{display:flex;flex:1 1;flex-direction:column;justify-content:center;text-align:var(--ifm-avatar-intro-alignment)}.badge,.breadcrumbs__item,.breadcrumbs__link,.button,.dropdown>.navbar__link:after{display:inline-block}.avatar__name{font:700 var(--ifm-h4-font-size)/var(--ifm-heading-line-height) var(--ifm-font-family-base)}.avatar__subtitle{margin-top:.25rem}.avatar--vertical{--ifm-avatar-intro-alignment:center;--ifm-avatar-intro-margin:0.5rem;align-items:center;flex-direction:column}.badge{background-color:var(--ifm-badge-background-color);border:var(--ifm-badge-border-width) solid var(--ifm-badge-border-color);border-radius:var(--ifm-badge-border-radius);color:var(--ifm-badge-color);font-size:75%;font-weight:var(--ifm-font-weight-bold);line-height:1;padding:var(--ifm-badge-padding-vertical) var(--ifm-badge-padding-horizontal)}.badge--primary{--ifm-badge-background-color:var(--ifm-color-primary)}.badge--secondary{--ifm-badge-background-color:var(--ifm-color-secondary);color:var(--ifm-color-black)}.breadcrumbs__link,.button.button--secondary.button--outline:not(.button--active):not(:hover){color:var(--ifm-font-color-base)}.badge--success{--ifm-badge-background-color:var(--ifm-color-success)}.badge--info{--ifm-badge-background-color:var(--ifm-color-info)}.badge--warning{--ifm-badge-background-color:var(--ifm-color-warning)}.badge--danger{--ifm-badge-background-color:var(--ifm-color-danger)}.breadcrumbs{margin-bottom:0;padding-left:0}.breadcrumbs__item:not(:last-child):after{background:var(--ifm-breadcrumb-separator) center;content:" ";display:inline-block;filter:var(--ifm-breadcrumb-separator-filter);height:calc(var(--ifm-breadcrumb-separator-size)*var(--ifm-breadcrumb-size-multiplier)*var(--ifm-breadcrumb-separator-size-multiplier));margin:0 var(--ifm-breadcrumb-spacing);opacity:.5;width:calc(var(--ifm-breadcrumb-separator-size)*var(--ifm-breadcrumb-size-multiplier)*var(--ifm-breadcrumb-separator-size-multiplier))}.breadcrumbs__item--active .breadcrumbs__link{background:var(--ifm-breadcrumb-item-background-active);color:var(--ifm-breadcrumb-color-active)}.breadcrumbs__link{border-radius:var(--ifm-breadcrumb-border-radius);font-size:calc(1rem*var(--ifm-breadcrumb-size-multiplier));padding:calc(var(--ifm-breadcrumb-padding-vertical)*var(--ifm-breadcrumb-size-multiplier)) calc(var(--ifm-breadcrumb-padding-horizontal)*var(--ifm-breadcrumb-size-multiplier));transition-duration:var(--ifm-transition-fast);transition-property:background,color}.breadcrumbs__link:any-link:hover,.breadcrumbs__link:link:hover,.breadcrumbs__link:visited:hover,area[href].breadcrumbs__link:hover{background:var(--ifm-breadcrumb-item-background-active);text-decoration:none}.breadcrumbs--sm{--ifm-breadcrumb-size-multiplier:0.8}.breadcrumbs--lg{--ifm-breadcrumb-size-multiplier:1.2}.button{background-color:var(--ifm-button-background-color);border:var(--ifm-button-border-width) solid var(--ifm-button-border-color);border-radius:var(--ifm-button-border-radius);cursor:pointer;font-size:calc(.875rem*var(--ifm-button-size-multiplier));font-weight:var(--ifm-button-font-weight);line-height:1.5;padding:calc(var(--ifm-button-padding-vertical)*var(--ifm-button-size-multiplier)) calc(var(--ifm-button-padding-horizontal)*var(--ifm-button-size-multiplier));text-align:center;transition-duration:var(--ifm-button-transition-duration);transition-property:color,background,border-color;user-select:none;white-space:nowrap}.button,.button:hover{color:var(--ifm-button-color)}.button--outline{--ifm-button-color:var(--ifm-button-border-color)}.button--outline:hover{--ifm-button-background-color:var(--ifm-button-border-color)}.button--link{--ifm-button-border-color:#0000;color:var(--ifm-link-color);text-decoration:var(--ifm-link-decoration)}.button--link.button--active,.button--link:active,.button--link:hover{color:var(--ifm-link-hover-color);text-decoration:var(--ifm-link-hover-decoration)}.button.disabled,.button:disabled,.button[disabled]{opacity:.65;pointer-events:none}.button--sm{--ifm-button-size-multiplier:0.8}.button--lg{--ifm-button-size-multiplier:1.35}.button--block{display:block;width:100%}.button.button--secondary{color:var(--ifm-color-gray-900)}:where(.button--primary){--ifm-button-background-color:var(--ifm-color-primary);--ifm-button-border-color:var(--ifm-color-primary)}:where(.button--primary):not(.button--outline):hover{--ifm-button-background-color:var(--ifm-color-primary-dark);--ifm-button-border-color:var(--ifm-color-primary-dark)}.button--primary.button--active,.button--primary:active{--ifm-button-background-color:var(--ifm-color-primary-darker);--ifm-button-border-color:var(--ifm-color-primary-darker)}:where(.button--secondary){--ifm-button-background-color:var(--ifm-color-secondary);--ifm-button-border-color:var(--ifm-color-secondary)}:where(.button--secondary):not(.button--outline):hover{--ifm-button-background-color:var(--ifm-color-secondary-dark);--ifm-button-border-color:var(--ifm-color-secondary-dark)}.button--secondary.button--active,.button--secondary:active{--ifm-button-background-color:var(--ifm-color-secondary-darker);--ifm-button-border-color:var(--ifm-color-secondary-darker)}:where(.button--success){--ifm-button-background-color:var(--ifm-color-success);--ifm-button-border-color:var(--ifm-color-success)}:where(.button--success):not(.button--outline):hover{--ifm-button-background-color:var(--ifm-color-success-dark);--ifm-button-border-color:var(--ifm-color-success-dark)}.button--success.button--active,.button--success:active{--ifm-button-background-color:var(--ifm-color-success-darker);--ifm-button-border-color:var(--ifm-color-success-darker)}:where(.button--info){--ifm-button-background-color:var(--ifm-color-info);--ifm-button-border-color:var(--ifm-color-info)}:where(.button--info):not(.button--outline):hover{--ifm-button-background-color:var(--ifm-color-info-dark);--ifm-button-border-color:var(--ifm-color-info-dark)}.button--info.button--active,.button--info:active{--ifm-button-background-color:var(--ifm-color-info-darker);--ifm-button-border-color:var(--ifm-color-info-darker)}:where(.button--warning){--ifm-button-background-color:var(--ifm-color-warning);--ifm-button-border-color:var(--ifm-color-warning)}:where(.button--warning):not(.button--outline):hover{--ifm-button-background-color:var(--ifm-color-warning-dark);--ifm-button-border-color:var(--ifm-color-warning-dark)}.button--warning.button--active,.button--warning:active{--ifm-button-background-color:var(--ifm-color-warning-darker);--ifm-button-border-color:var(--ifm-color-warning-darker)}:where(.button--danger){--ifm-button-background-color:var(--ifm-color-danger);--ifm-button-border-color:var(--ifm-color-danger)}:where(.button--danger):not(.button--outline):hover{--ifm-button-background-color:var(--ifm-color-danger-dark);--ifm-button-border-color:var(--ifm-color-danger-dark)}.button--danger.button--active,.button--danger:active{--ifm-button-background-color:var(--ifm-color-danger-darker);--ifm-button-border-color:var(--ifm-color-danger-darker)}.button-group{display:inline-flex;gap:var(--ifm-button-group-spacing)}.button-group>.button:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.button-group>.button:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.button-group--block{display:flex;justify-content:stretch}.button-group--block>.button{flex-grow:1}.card{background-color:var(--ifm-card-background-color);border-radius:var(--ifm-card-border-radius);box-shadow:var(--ifm-global-shadow-lw);display:flex;flex-direction:column;overflow:hidden}.card__image{padding-top:var(--ifm-card-vertical-spacing)}.card__image:first-child{padding-top:0}.card__body,.card__footer,.card__header{padding:var(--ifm-card-vertical-spacing) var(--ifm-card-horizontal-spacing)}.card__body:not(:last-child),.card__footer:not(:last-child),.card__header:not(:last-child){padding-bottom:0}.card__body>:last-child,.card__footer>:last-child,.card__header>:last-child{margin-bottom:0}.card__footer{margin-top:auto}.table-of-contents{font-size:.8rem;margin-bottom:0;padding:var(--ifm-toc-padding-vertical) 0}.table-of-contents,.table-of-contents ul{list-style:none;padding-left:var(--ifm-toc-padding-horizontal)}.table-of-contents li{margin:var(--ifm-toc-padding-vertical) var(--ifm-toc-padding-horizontal)}.table-of-contents__left-border{border-left:1px solid var(--ifm-toc-border-color)}.table-of-contents__link{color:var(--ifm-toc-link-color);display:block}.table-of-contents__link--active,.table-of-contents__link--active code,.table-of-contents__link:hover,.table-of-contents__link:hover code{color:var(--ifm-color-primary);text-decoration:none}.close{color:var(--ifm-color-black);float:right;font-size:1.5rem;font-weight:var(--ifm-font-weight-bold);line-height:1;opacity:.5;padding:1rem;transition:opacity var(--ifm-transition-fast) var(--ifm-transition-timing-default)}.close:hover{opacity:.7}.close:focus,.theme-code-block-highlighted-line .codeLineNumber_Tfdd:before{opacity:.8}.dropdown{display:inline-flex;font-weight:var(--ifm-dropdown-font-weight);position:relative;vertical-align:top}.dropdown--hoverable:hover .dropdown__menu,.dropdown--show .dropdown__menu{opacity:1;pointer-events:all;transform:translateY(-1px);visibility:visible}#nprogress,.dropdown__menu,.navbar__item.dropdown .navbar__link:not([href]){pointer-events:none}.dropdown--right .dropdown__menu{left:inherit;right:0}.dropdown--nocaret .navbar__link:after{content:none!important}.dropdown__menu{background-color:var(--ifm-dropdown-background-color);border-radius:var(--ifm-global-radius);box-shadow:var(--ifm-global-shadow-md);left:0;list-style:none;max-height:80vh;min-width:10rem;opacity:0;overflow-y:auto;padding:.5rem;position:absolute;top:calc(100% - var(--ifm-navbar-item-padding-vertical) + .3rem);transform:translateY(-.625rem);transition-duration:var(--ifm-transition-fast);transition-property:opacity,transform,visibility;transition-timing-function:var(--ifm-transition-timing-default);visibility:hidden;z-index:var(--ifm-z-index-dropdown)}.menu__caret,.menu__link,.menu__list-item-collapsible{border-radius:.25rem;transition:background var(--ifm-transition-fast) var(--ifm-transition-timing-default)}.dropdown__link{border-radius:.25rem;color:var(--ifm-dropdown-link-color);display:block;font-size:.875rem;margin-top:.2rem;padding:.25rem .5rem;white-space:nowrap}.dropdown__link--active,.dropdown__link:hover{background-color:var(--ifm-dropdown-hover-background-color);color:var(--ifm-dropdown-link-color);text-decoration:none}.dropdown__link--active,.dropdown__link--active:hover{--ifm-dropdown-link-color:var(--ifm-link-color)}.dropdown>.navbar__link:after{border-color:currentcolor #0000;border-style:solid;border-width:.4em .4em 0;content:"";margin-left:.3em;position:relative;top:2px;transform:translateY(-50%)}.footer{background-color:var(--ifm-footer-background-color);color:var(--ifm-footer-color);padding:var(--ifm-footer-padding-vertical) var(--ifm-footer-padding-horizontal)}.footer--dark{--ifm-footer-background-color:#303846;--ifm-footer-color:var(--ifm-footer-link-color);--ifm-footer-link-color:var(--ifm-color-secondary);--ifm-footer-title-color:var(--ifm-color-white)}.footer__links{margin-bottom:1rem}.footer__link-item{color:var(--ifm-footer-link-color);line-height:2}.footer__link-item:hover{color:var(--ifm-footer-link-hover-color)}.footer__link-separator{margin:0 var(--ifm-footer-link-horizontal-spacing)}.footer__logo{margin-top:1rem;max-width:var(--ifm-footer-logo-max-width)}.footer__title{color:var(--ifm-footer-title-color);font:700 var(--ifm-h4-font-size)/var(--ifm-heading-line-height) var(--ifm-font-family-base);margin-bottom:var(--ifm-heading-margin-bottom)}.menu,.navbar__link{font-weight:var(--ifm-font-weight-semibold)}.docItemContainer_Djhp article>:first-child,.docItemContainer_Djhp header+*,.footer__item{margin-top:0}.admonitionContent_BuS1>:last-child,.cardContainer_fWXF :last-child,.collapsibleContent_i85q p:last-child,.details_lb9f>summary>p:last-child,.footer__items,.tabItem_Ymn6>:last-child{margin-bottom:0}.codeBlockStandalone_MEMb,[type=checkbox]{padding:0}.hero{align-items:center;background-color:var(--ifm-hero-background-color);color:var(--ifm-hero-text-color);display:flex;padding:4rem 2rem}.hero--primary{--ifm-hero-background-color:var(--ifm-color-primary);--ifm-hero-text-color:var(--ifm-font-color-base-inverse)}.hero--dark{--ifm-hero-background-color:#303846;--ifm-hero-text-color:var(--ifm-color-white)}.hero__title{font-size:3rem}.hero__subtitle{font-size:1.5rem}.menu__list{list-style:none;margin:0;padding-left:0}.menu__caret,.menu__link{padding:var(--ifm-menu-link-padding-vertical) var(--ifm-menu-link-padding-horizontal)}.menu__list .menu__list{flex:0 0 100%;margin-top:.25rem;padding-left:var(--ifm-menu-link-padding-horizontal)}.menu__list-item:not(:first-child){margin-top:.25rem}.menu__list-item--collapsed .menu__list{height:0;overflow:hidden}.details_lb9f[data-collapsed=false].isBrowser_bmU9>summary:before,.details_lb9f[open]:not(.isBrowser_bmU9)>summary:before,.menu__list-item--collapsed .menu__caret:before,.menu__list-item--collapsed .menu__link--sublist:after{transform:rotate(90deg)}.menu__list-item-collapsible{display:flex;flex-wrap:wrap;position:relative}.menu__caret:hover,.menu__link:hover,.menu__list-item-collapsible--active,.menu__list-item-collapsible:hover{background:var(--ifm-menu-color-background-hover)}.menu__list-item-collapsible .menu__link--active,.menu__list-item-collapsible .menu__link:hover{background:none!important}.menu__caret,.menu__link{align-items:center;display:flex}.menu__link{color:var(--ifm-menu-color);flex:1;line-height:1.25}.menu__link:hover{color:var(--ifm-menu-color);text-decoration:none}.menu__caret:before,.menu__link--sublist-caret:after{content:"";height:1.25rem;transform:rotate(180deg);transition:transform var(--ifm-transition-fast) linear;width:1.25rem;filter:var(--ifm-menu-link-sublist-icon-filter)}.menu__link--sublist-caret:after{background:var(--ifm-menu-link-sublist-icon) 50%/2rem 2rem;margin-left:auto;min-width:1.25rem}.menu__link--active,.menu__link--active:hover{color:var(--ifm-menu-color-active)}.navbar__brand,.navbar__link{color:var(--ifm-navbar-link-color)}.menu__link--active:not(.menu__link--sublist){background-color:var(--ifm-menu-color-background-active)}.menu__caret:before{background:var(--ifm-menu-link-sublist-icon) 50%/2rem 2rem}.navbar--dark,html[data-theme=dark]{--ifm-menu-link-sublist-icon-filter:invert(100%) sepia(94%) saturate(17%) hue-rotate(223deg) brightness(104%) contrast(98%)}.navbar{background-color:var(--ifm-navbar-background-color);box-shadow:var(--ifm-navbar-shadow);height:var(--ifm-navbar-height);padding:var(--ifm-navbar-padding-vertical) var(--ifm-navbar-padding-horizontal)}.navbar,.navbar>.container,.navbar>.container-fluid{display:flex}.navbar--fixed-top{position:sticky;top:0;z-index:var(--ifm-z-index-fixed)}.navbar-sidebar,.navbar-sidebar__backdrop{bottom:0;opacity:0;position:fixed;transition-duration:var(--ifm-transition-fast);transition-timing-function:ease-in-out;left:0;top:0;visibility:hidden}.navbar__inner{display:flex;flex-wrap:wrap;justify-content:space-between;width:100%}.navbar__brand{align-items:center;display:flex;min-width:0}.navbar__brand:hover{color:var(--ifm-navbar-link-hover-color);text-decoration:none}.announcementBarContent_xLdY,.navbar__title{flex:1 1 auto}.navbar__toggle{display:none;margin-right:.5rem}.navbar__logo{flex:0 0 auto;height:2rem;margin-right:.5rem}.navbar__items{align-items:center;display:flex;flex:1;min-width:0}.navbar__items--center{flex:0 0 auto}.navbar__items--center .navbar__brand{margin:0}.navbar__items--center+.navbar__items--right{flex:1}.navbar__items--right{flex:0 0 auto;justify-content:flex-end}.navbar__items--right>:last-child{padding-right:0}.navbar__item{display:inline-block;padding:var(--ifm-navbar-item-padding-vertical) var(--ifm-navbar-item-padding-horizontal)}.navbar__link--active,.navbar__link:hover{color:var(--ifm-navbar-link-hover-color);text-decoration:none}.navbar--dark,.navbar--primary{--ifm-menu-color:var(--ifm-color-gray-300);--ifm-navbar-link-color:var(--ifm-color-gray-100);--ifm-navbar-search-input-background-color:#ffffff1a;--ifm-navbar-search-input-placeholder-color:#ffffff80;color:var(--ifm-color-white)}.navbar--dark{--ifm-navbar-background-color:#242526;--ifm-menu-color-background-active:#ffffff0d;--ifm-navbar-search-input-color:var(--ifm-color-white)}.navbar--primary{--ifm-navbar-background-color:var(--ifm-color-primary);--ifm-navbar-link-hover-color:var(--ifm-color-white);--ifm-menu-color-active:var(--ifm-color-white);--ifm-navbar-search-input-color:var(--ifm-color-emphasis-500)}.navbar__search-input{-webkit-appearance:none;appearance:none;background:var(--ifm-navbar-search-input-background-color) var(--ifm-navbar-search-input-icon) no-repeat .75rem center/1rem 1rem;border:none;border-radius:2rem;color:var(--ifm-navbar-search-input-color);cursor:text;display:inline-block;font-size:.9rem;height:2rem;padding:0 .5rem 0 2.25rem;width:12.5rem}.navbar__search-input::placeholder{color:var(--ifm-navbar-search-input-placeholder-color)}.navbar-sidebar{background-color:var(--ifm-navbar-background-color);box-shadow:var(--ifm-global-shadow-md);transform:translate3d(-100%,0,0);transition-property:opacity,visibility,transform;width:var(--ifm-navbar-sidebar-width)}.navbar-sidebar--show .navbar-sidebar,.navbar-sidebar__items{transform:translateZ(0)}.navbar-sidebar--show .navbar-sidebar,.navbar-sidebar--show .navbar-sidebar__backdrop{opacity:1;visibility:visible}.navbar-sidebar__backdrop{background-color:#0009;right:0;transition-property:opacity,visibility}.navbar-sidebar__brand{align-items:center;box-shadow:var(--ifm-navbar-shadow);display:flex;flex:1;height:var(--ifm-navbar-height);padding:var(--ifm-navbar-padding-vertical) var(--ifm-navbar-padding-horizontal)}.navbar-sidebar__items{display:flex;height:calc(100% - var(--ifm-navbar-height));transition:transform var(--ifm-transition-fast) ease-in-out}.navbar-sidebar__items--show-secondary{transform:translate3d(calc((var(--ifm-navbar-sidebar-width))*-1),0,0)}.navbar-sidebar__item{flex-shrink:0;padding:.5rem;width:calc(var(--ifm-navbar-sidebar-width))}.navbar-sidebar__back{background:var(--ifm-menu-color-background-active);font-size:15px;font-weight:var(--ifm-button-font-weight);margin:0 0 .2rem -.5rem;padding:.6rem 1.5rem;position:relative;text-align:left;top:-.5rem;width:calc(100% + 1rem)}.navbar-sidebar__close{display:flex;margin-left:auto}.pagination{column-gap:var(--ifm-pagination-page-spacing);display:flex;font-size:var(--ifm-pagination-font-size);padding-left:0}.pagination--sm{--ifm-pagination-font-size:0.8rem;--ifm-pagination-padding-horizontal:0.8rem;--ifm-pagination-padding-vertical:0.2rem}.pagination--lg{--ifm-pagination-font-size:1.2rem;--ifm-pagination-padding-horizontal:1.2rem;--ifm-pagination-padding-vertical:0.3rem}.pagination__item{display:inline-flex}.pagination__item>span{padding:var(--ifm-pagination-padding-vertical)}.pagination__item--active .pagination__link{color:var(--ifm-pagination-color-active)}.pagination__item--active .pagination__link,.pagination__item:not(.pagination__item--active):hover .pagination__link{background:var(--ifm-pagination-item-active-background)}.pagination__item--disabled,.pagination__item[disabled]{opacity:.25;pointer-events:none}.pagination__link{border-radius:var(--ifm-pagination-border-radius);color:var(--ifm-font-color-base);display:inline-block;padding:var(--ifm-pagination-padding-vertical) var(--ifm-pagination-padding-horizontal);transition:background var(--ifm-transition-fast) var(--ifm-transition-timing-default)}.pagination__link:hover{text-decoration:none}.pagination-nav{grid-gap:var(--ifm-spacing-horizontal);display:grid;gap:var(--ifm-spacing-horizontal);grid-template-columns:repeat(2,1fr)}.pagination-nav__link{border:1px solid var(--ifm-color-emphasis-300);border-radius:var(--ifm-pagination-nav-border-radius);display:block;height:100%;line-height:var(--ifm-heading-line-height);padding:var(--ifm-global-spacing);transition:border-color var(--ifm-transition-fast) var(--ifm-transition-timing-default)}.pagination-nav__link:hover{border-color:var(--ifm-pagination-nav-color-hover);text-decoration:none}.pagination-nav__link--next{grid-column:2/3;text-align:right}.pagination-nav__label{font-size:var(--ifm-h4-font-size);font-weight:var(--ifm-heading-font-weight);word-break:break-word}.pagination-nav__link--prev .pagination-nav__label:before{content:"« "}.pagination-nav__link--next .pagination-nav__label:after{content:" »"}.pagination-nav__sublabel{color:var(--ifm-color-content-secondary);font-size:var(--ifm-h5-font-size);font-weight:var(--ifm-font-weight-semibold);margin-bottom:.25rem}.pills__item,.tabs{font-weight:var(--ifm-font-weight-bold)}.pills{display:flex;gap:var(--ifm-pills-spacing);padding-left:0}.pills__item{border-radius:.5rem;cursor:pointer;display:inline-block;padding:.25rem 1rem;transition:background var(--ifm-transition-fast) var(--ifm-transition-timing-default)}.tabs,:not(.containsTaskList_mC6p>li)>.containsTaskList_mC6p{padding-left:0}.pills__item--active{color:var(--ifm-pills-color-active)}.pills__item--active,.pills__item:not(.pills__item--active):hover{background:var(--ifm-pills-color-background-active)}.pills--block{justify-content:stretch}.pills--block .pills__item{flex-grow:1;text-align:center}.tabs{color:var(--ifm-tabs-color);display:flex;margin-bottom:0;overflow-x:auto}.tabs__item{border-bottom:3px solid #0000;border-radius:var(--ifm-global-radius);cursor:pointer;display:inline-flex;padding:var(--ifm-tabs-padding-vertical) var(--ifm-tabs-padding-horizontal);transition:background-color var(--ifm-transition-fast) var(--ifm-transition-timing-default)}.tabs__item--active{border-bottom-color:var(--ifm-tabs-color-active-border);border-bottom-left-radius:0;border-bottom-right-radius:0;color:var(--ifm-tabs-color-active)}.tabs__item:hover{background-color:var(--ifm-hover-overlay)}.tabs--block{justify-content:stretch}.tabs--block .tabs__item{flex-grow:1;justify-content:center}html[data-theme=dark]{--ifm-color-scheme:dark;--ifm-color-emphasis-0:var(--ifm-color-gray-1000);--ifm-color-emphasis-100:var(--ifm-color-gray-900);--ifm-color-emphasis-200:var(--ifm-color-gray-800);--ifm-color-emphasis-300:var(--ifm-color-gray-700);--ifm-color-emphasis-400:var(--ifm-color-gray-600);--ifm-color-emphasis-600:var(--ifm-color-gray-400);--ifm-color-emphasis-700:var(--ifm-color-gray-300);--ifm-color-emphasis-800:var(--ifm-color-gray-200);--ifm-color-emphasis-900:var(--ifm-color-gray-100);--ifm-color-emphasis-1000:var(--ifm-color-gray-0);--ifm-background-color:#1b1b1d;--ifm-background-surface-color:#242526;--ifm-hover-overlay:#ffffff0d;--ifm-color-content:#e3e3e3;--ifm-color-content-secondary:#fff;--ifm-breadcrumb-separator-filter:invert(64%) sepia(11%) saturate(0%) hue-rotate(149deg) brightness(99%) contrast(95%);--ifm-code-background:#ffffff1a;--ifm-scrollbar-track-background-color:#444;--ifm-scrollbar-thumb-background-color:#686868;--ifm-scrollbar-thumb-hover-background-color:#7a7a7a;--ifm-table-stripe-background:#ffffff12;--ifm-toc-border-color:var(--ifm-color-emphasis-200);--ifm-color-primary-contrast-background:#102445;--ifm-color-primary-contrast-foreground:#ebf2fc;--ifm-color-secondary-contrast-background:#474748;--ifm-color-secondary-contrast-foreground:#fdfdfe;--ifm-color-success-contrast-background:#003100;--ifm-color-success-contrast-foreground:#e6f6e6;--ifm-color-info-contrast-background:#193c47;--ifm-color-info-contrast-foreground:#eef9fd;--ifm-color-warning-contrast-background:#4d3800;--ifm-color-warning-contrast-foreground:#fff8e6;--ifm-color-danger-contrast-background:#4b1113;--ifm-color-danger-contrast-foreground:#ffebec;--docsearch-text-color:#f5f6f7;--docsearch-container-background:#090a11cc;--docsearch-modal-background:#15172a;--docsearch-modal-shadow:inset 1px 1px 0 0 #2c2e40,0 3px 8px 0 #000309;--docsearch-searchbox-background:#090a11;--docsearch-searchbox-focus-background:#000;--docsearch-hit-color:#bec3c9;--docsearch-hit-shadow:none;--docsearch-hit-background:#090a11;--docsearch-key-gradient:linear-gradient(-26.5deg,#565872,#31355b);--docsearch-key-shadow:inset 0 -2px 0 0 #282d55,inset 0 0 1px 1px #51577d,0 2px 2px 0 #0304094d;--docsearch-footer-background:#1e2136;--docsearch-footer-shadow:inset 0 1px 0 0 #494c6a80,0 -4px 8px 0 #0003;--docsearch-logo-color:#fff;--docsearch-muted-color:#7f8497}#nprogress .bar{background:var(--docusaurus-progress-bar-color);height:2px;left:0;position:fixed;top:0;width:100%;z-index:1031}#nprogress .peg{box-shadow:0 0 10px var(--docusaurus-progress-bar-color),0 0 5px var(--docusaurus-progress-bar-color);height:100%;opacity:1;position:absolute;right:0;transform:rotate(3deg) translateY(-4px);width:100px}[data-theme=dark]{--ifm-color-primary:#4299f5;--ifm-color-primary-dark:#2489f3;--ifm-color-primary-darker:#1681f3;--ifm-color-primary-darkest:#0b6acf;--ifm-color-primary-light:#60a9f7;--ifm-color-primary-lighter:#6eb1f7;--ifm-color-primary-lightest:#9bc9fa;--docusaurus-highlighted-code-line-bg:#414458!important;--code-display-color:#21222c;--inversion-percentage:100%;--chip-background:#494c4f;--chip-background-hover:#424242;--chip-text:#e0e0e0;--chip-icon-color:#e0e0e0;--ifm-navbar-background-color:#181e25!important;--ifm-background-color:#101418!important}.homepage{width:100%}.navbar__brand{margin-left:30px;margin-right:30px}.custom--table{display:inline-table;width:100%!important}#__docusaurus-base-url-issue-banner-container,.docSidebarContainer_YfHR,.navbarSearchContainer_Bca1:not(:has(>*)),.sidebar--item__hidden,.sidebarLogo_isFc,.themedComponent_mlkZ,[data-theme=dark] .lightToggleIcon_pyhR,[data-theme=light] .darkToggleIcon_wfgR,html[data-announcement-bar-initially-dismissed=true] .announcementBar_mb4j{display:none}.custom--table td{padding:5px 7px 5px 8px}.MuiChip-root{text-decoration:none!important}.clean-btn:hover{color:var(--clean-hover);transition:color var(--ifm-transition-fast)}#script-container{margin:0 10% 5%;max-width:90%}body:not(.navigation-with-keyboard) :not(input):focus{outline:0}.skipToContent_fXgn{background-color:var(--ifm-background-surface-color);color:var(--ifm-color-emphasis-900);left:100%;padding:calc(var(--ifm-global-spacing)/2) var(--ifm-global-spacing);position:fixed;top:1rem;z-index:calc(var(--ifm-z-index-fixed) + 1)}.skipToContent_fXgn:focus{box-shadow:var(--ifm-global-shadow-md);left:1rem}.closeButton_CVFx{line-height:0;padding:0}.content_knG7{font-size:85%;padding:5px 0;text-align:center}.content_knG7 a{color:inherit;text-decoration:underline}.DocSearch-Container a,.tag_zVej:hover{text-decoration:none}.announcementBar_mb4j{align-items:center;background-color:var(--ifm-color-white);border-bottom:1px solid var(--ifm-color-emphasis-100);color:var(--ifm-color-black);display:flex;height:var(--docusaurus-announcement-bar-height)}.announcementBarPlaceholder_vyr4{flex:0 0 10px}.announcementBarClose_gvF7{align-self:stretch;flex:0 0 30px}.toggle_vylO{height:2rem;width:2rem}.toggleButton_gllP{align-items:center;border-radius:50%;display:flex;height:100%;justify-content:center;transition:background var(--ifm-transition-fast);width:100%}.toggleButton_gllP:hover{background:var(--ifm-color-emphasis-200)}.toggleButtonDisabled_aARS{cursor:not-allowed}.darkNavbarColorModeToggle_X3D1:hover{background:var(--ifm-color-gray-800)}[data-theme=dark] .themedComponent--dark_xIcU,[data-theme=light] .themedComponent--light_NVdE,html:not([data-theme]) .themedComponent--light_NVdE{display:initial}.iconExternalLink_nPIU{margin-left:.3rem}.iconLanguage_nlXk{margin-right:5px;vertical-align:text-bottom}.navbarHideable_m1mJ{transition:transform var(--ifm-transition-fast) ease}.navbarHidden_jGov{transform:translate3d(0,calc(-100% - 2px),0)}.errorBoundaryError_a6uf{color:red;white-space:pre-wrap}.errorBoundaryFallback_VBag{color:red;padding:.55rem}.footerLogoLink_BH7S{opacity:.5;transition:opacity var(--ifm-transition-fast) var(--ifm-transition-timing-default)}.footerLogoLink_BH7S:hover,.hash-link:focus,:hover>.hash-link{opacity:1}.anchorWithStickyNavbar_LWe7{scroll-margin-top:calc(var(--ifm-navbar-height) + .5rem)}.anchorWithHideOnScrollNavbar_WYt5{scroll-margin-top:.5rem}.hash-link{opacity:0;padding-left:.5rem;transition:opacity var(--ifm-transition-fast);user-select:none}.hash-link:before{content:"#"}.mainWrapper_z2l0{display:flex;flex:1 0 auto;flex-direction:column}.docusaurus-mt-lg{margin-top:3rem}#__docusaurus{display:flex;flex-direction:column;min-height:100%}.cardContainer_fWXF{--ifm-link-color:var(--ifm-color-emphasis-800);--ifm-link-hover-color:var(--ifm-color-emphasis-700);--ifm-link-hover-decoration:none;border:1px solid var(--ifm-color-emphasis-200);box-shadow:0 1.5px 3px 0 #00000026;transition:all var(--ifm-transition-fast) ease;transition-property:border,box-shadow}.cardContainer_fWXF:hover{border-color:var(--ifm-color-primary);box-shadow:0 3px 6px 0 #0003}.cardTitle_rnsV{font-size:1.2rem}.cardDescription_PWke{font-size:.8rem}.iconEdit_Z9Sw{margin-right:.3em;vertical-align:sub}.tag_zVej{border:1px solid var(--docusaurus-tag-list-border);transition:border var(--ifm-transition-fast)}.tag_zVej:hover{--docusaurus-tag-list-border:var(--ifm-link-color)}.tagRegular_sFm0{border-radius:var(--ifm-global-radius);font-size:90%;padding:.2rem .5rem .3rem}.tagWithCount_h2kH{align-items:center;border-left:0;display:flex;padding:0 .5rem 0 1rem;position:relative}.tagWithCount_h2kH:after,.tagWithCount_h2kH:before{border:1px solid var(--docusaurus-tag-list-border);content:"";position:absolute;top:50%;transition:inherit}.tagWithCount_h2kH:before{border-bottom:0;border-right:0;height:1.18rem;right:100%;transform:translate(50%,-50%) rotate(-45deg);width:1.18rem}.tagWithCount_h2kH:after{border-radius:50%;height:.5rem;left:0;transform:translateY(-50%);width:.5rem}.tagWithCount_h2kH span{background:var(--ifm-color-secondary);border-radius:var(--ifm-global-radius);color:var(--ifm-color-black);font-size:.7rem;line-height:1.2;margin-left:.3rem;padding:.1rem .4rem}.tags_jXut{display:inline}.tag_QGVx{display:inline-block;margin:0 .4rem .5rem 0}.lastUpdated_vwxv{font-size:smaller;font-style:italic;margin-top:.2rem}.tocCollapsibleButton_TO0P{align-items:center;display:flex;font-size:inherit;justify-content:space-between;padding:.4rem .8rem;width:100%}.tocCollapsibleButton_TO0P:after{background:var(--ifm-menu-link-sublist-icon) 50% 50%/2rem 2rem no-repeat;content:"";filter:var(--ifm-menu-link-sublist-icon-filter);height:1.25rem;transform:rotate(180deg);transition:transform var(--ifm-transition-fast);width:1.25rem}.tocCollapsibleButtonExpanded_MG3E:after,.tocCollapsibleExpanded_sAul{transform:none}.tocCollapsible_ETCw{background-color:var(--ifm-menu-color-background-active);border-radius:var(--ifm-global-radius);margin:1rem 0}.tocCollapsibleContent_vkbj>ul{border-left:none;border-top:1px solid var(--ifm-color-emphasis-300);font-size:15px;padding:.2rem 0}.tocCollapsibleContent_vkbj ul li{margin:.4rem .8rem}.tocCollapsibleContent_vkbj a{display:block}.searchQueryInput_u2C7,.searchVersionInput_m0Ui{background:var(--docsearch-searchbox-focus-background);border:2px solid var(--ifm-toc-border-color);border-radius:var(--ifm-global-radius);color:var(--docsearch-text-color);font:var(--ifm-font-size-base) var(--ifm-font-family-base);margin-bottom:.5rem;padding:.8rem;transition:border var(--ifm-transition-fast) ease;width:100%}.searchQueryInput_u2C7:focus,.searchVersionInput_m0Ui:focus{border-color:var(--docsearch-primary-color);outline:0}.searchQueryInput_u2C7::placeholder{color:var(--docsearch-muted-color)}.searchResultsColumn_JPFH{font-size:.9rem;font-weight:700}.algoliaLogo_rT1R{max-width:150px}.algoliaLogoPathFill_WdUC{fill:var(--ifm-font-color-base)}.searchResultItem_Tv2o{border-bottom:1px solid var(--ifm-toc-border-color);padding:1rem 0}.searchResultItemHeading_KbCB{font-weight:400;margin-bottom:0}.searchResultItemPath_lhe1{--ifm-breadcrumb-separator-size-multiplier:1;color:var(--ifm-color-content-secondary);font-size:.8rem}.searchResultItemSummary_AEaO{font-style:italic;margin:.5rem 0 0}.loadingSpinner_XVxU{animation:1s linear infinite a;border:.4em solid #eee;border-radius:50%;border-top:.4em solid var(--ifm-color-primary);height:3rem;margin:0 auto;width:3rem}@keyframes a{to{transform:rotate(1turn)}}.loader_vvXV{margin-top:2rem}.search-result-match{background:#ffd78e40;color:var(--docsearch-hit-color);padding:.09em 0}.backToTopButton_sjWU{background-color:var(--ifm-color-emphasis-200);border-radius:50%;bottom:1.3rem;box-shadow:var(--ifm-global-shadow-lw);height:3rem;opacity:0;position:fixed;right:1.3rem;transform:scale(0);transition:all var(--ifm-transition-fast) var(--ifm-transition-timing-default);visibility:hidden;width:3rem;z-index:calc(var(--ifm-z-index-fixed) - 1)}.backToTopButton_sjWU:after{background-color:var(--ifm-color-emphasis-1000);content:" ";display:inline-block;height:100%;-webkit-mask:var(--ifm-menu-link-sublist-icon) 50%/2rem 2rem no-repeat;mask:var(--ifm-menu-link-sublist-icon) 50%/2rem 2rem no-repeat;width:100%}.backToTopButtonShow_xfvO{opacity:1;transform:scale(1);visibility:visible}[data-theme=dark]:root{--docusaurus-collapse-button-bg:#ffffff0d;--docusaurus-collapse-button-bg-hover:#ffffff1a}.collapseSidebarButton_PEFL{display:none;margin:0}.docMainContainer_TBSr,.docRoot_UBD9{display:flex;width:100%}.docsWrapper_hBAB{display:flex;flex:1 0 auto}.buttons_AeoN,.features_t9lD{align-items:center;display:flex}.features_t9lD{padding:2rem 0;width:100%}.featureSvg_GfXr{height:200px;width:200px}.heroBanner_qdFl{display:flex;overflow:hidden;padding:4rem 0;position:relative}.test_C9V2{display:grid;grid-template-columns:1fr 3fr}.buttons_AeoN{justify-content:center}.DocSearch-Button,.DocSearch-Button-Container{align-items:center;display:flex}.DocSearch-Button{background:var(--docsearch-searchbox-background);border:0;border-radius:40px;color:var(--docsearch-muted-color);cursor:pointer;font-weight:500;height:36px;justify-content:space-between;padding:0 8px;-webkit-user-select:none;user-select:none}.DocSearch-Button:active,.DocSearch-Button:focus,.DocSearch-Button:hover{background:var(--docsearch-searchbox-focus-background);box-shadow:var(--docsearch-searchbox-shadow);color:var(--docsearch-text-color);outline:0}.DocSearch-Search-Icon{stroke-width:1.6}.DocSearch-Hit-Tree,.DocSearch-Hit-action,.DocSearch-Hit-icon,.DocSearch-Reset{stroke-width:var(--docsearch-icon-stroke-width)}.DocSearch-Button .DocSearch-Search-Icon{color:var(--docsearch-text-color)}.DocSearch-Button-Placeholder{font-size:1rem;padding:0 12px 0 6px}.DocSearch-Input,.DocSearch-Link{-webkit-appearance:none;font:inherit}.DocSearch-Button-Keys{display:flex;min-width:calc(40px + .8em)}.DocSearch-Button-Key{align-items:center;background:var(--docsearch-key-gradient);border:0;border-radius:3px;box-shadow:var(--docsearch-key-shadow);color:var(--docsearch-muted-color);display:flex;height:18px;justify-content:center;margin-right:.4em;padding:0 0 2px;position:relative;top:-1px;width:20px}.DocSearch--active{overflow:hidden!important}.DocSearch-Container{background-color:var(--docsearch-container-background);height:100vh;left:0;position:fixed;top:0;width:100vw;z-index:200}.DocSearch-Link{appearance:none;background:none;border:0;color:var(--docsearch-highlight-color);cursor:pointer;margin:0;padding:0}.DocSearch-Modal{background:var(--docsearch-modal-background);border-radius:6px;box-shadow:var(--docsearch-modal-shadow);flex-direction:column;margin:60px auto auto;max-width:var(--docsearch-modal-width);position:relative}.DocSearch-SearchBar{display:flex;padding:var(--docsearch-spacing) var(--docsearch-spacing) 0}.DocSearch-Form{align-items:center;background:var(--docsearch-searchbox-focus-background);border-radius:4px;box-shadow:var(--docsearch-searchbox-shadow);display:flex;height:var(--docsearch-searchbox-height);margin:0;padding:0 var(--docsearch-spacing);position:relative;width:100%}.DocSearch-Input{appearance:none;background:#0000;border:0;color:var(--docsearch-text-color);flex:1;font-size:1.2em;height:100%;outline:0;padding:0 0 0 8px;width:80%}.DocSearch-Hit-action-button,.DocSearch-Reset{-webkit-appearance:none;border:0;cursor:pointer}.DocSearch-Input::placeholder{color:var(--docsearch-muted-color);opacity:1}.DocSearch-Input::-webkit-search-cancel-button,.DocSearch-Input::-webkit-search-decoration,.DocSearch-Input::-webkit-search-results-button,.DocSearch-Input::-webkit-search-results-decoration{display:none}.DocSearch-LoadingIndicator,.DocSearch-MagnifierLabel,.DocSearch-Reset{margin:0;padding:0}.DocSearch-Container--Stalled .DocSearch-LoadingIndicator,.DocSearch-MagnifierLabel,.DocSearch-Reset{align-items:center;color:var(--docsearch-highlight-color);display:flex;justify-content:center}.DocSearch-Cancel,.DocSearch-Container--Stalled .DocSearch-MagnifierLabel,.DocSearch-LoadingIndicator,.DocSearch-Reset[hidden]{display:none}.DocSearch-Reset{animation:.1s ease-in forwards b;appearance:none;background:none;border-radius:50%;color:var(--docsearch-icon-color);padding:2px;right:0}.DocSearch-Help,.DocSearch-HitsFooter,.DocSearch-Label{color:var(--docsearch-muted-color)}.DocSearch-Reset:hover{color:var(--docsearch-highlight-color)}.DocSearch-LoadingIndicator svg,.DocSearch-MagnifierLabel svg{height:24px;width:24px}.DocSearch-Dropdown{max-height:calc(var(--docsearch-modal-height) - var(--docsearch-searchbox-height) - var(--docsearch-spacing) - var(--docsearch-footer-height));min-height:var(--docsearch-spacing);overflow-y:auto;overflow-y:overlay;padding:0 var(--docsearch-spacing);scrollbar-color:var(--docsearch-muted-color) var(--docsearch-modal-background);scrollbar-width:thin}.DocSearch-Dropdown::-webkit-scrollbar{width:12px}.DocSearch-Dropdown::-webkit-scrollbar-track{background:#0000}.DocSearch-Dropdown::-webkit-scrollbar-thumb{background-color:var(--docsearch-muted-color);border:3px solid var(--docsearch-modal-background);border-radius:20px}.DocSearch-Dropdown ul{list-style:none;margin:0;padding:0}.DocSearch-Label{font-size:.75em;line-height:1.6em}.DocSearch-Help{font-size:.9em;margin:0;-webkit-user-select:none;user-select:none}.DocSearch-Title{font-size:1.2em}.DocSearch-Logo a{display:flex}.DocSearch-Logo svg{color:var(--docsearch-logo-color);margin-left:8px}.DocSearch-Hits:last-of-type{margin-bottom:24px}.DocSearch-Hits mark{background:none;color:var(--docsearch-highlight-color)}.DocSearch-HitsFooter{display:flex;font-size:.85em;justify-content:center;margin-bottom:var(--docsearch-spacing);padding:var(--docsearch-spacing)}.DocSearch-HitsFooter a{border-bottom:1px solid;color:inherit}.DocSearch-Hit{border-radius:4px;display:flex;padding-bottom:4px;position:relative}.DocSearch-Hit--deleting{opacity:0;transition:.25s linear}.DocSearch-Hit--favoriting{transform:scale(0);transform-origin:top center;transition:.25s linear .25s}.DocSearch-Hit a{background:var(--docsearch-hit-background);border-radius:4px;box-shadow:var(--docsearch-hit-shadow);display:block;padding-left:var(--docsearch-spacing);width:100%}.DocSearch-Hit-source{background:var(--docsearch-modal-background);color:var(--docsearch-highlight-color);font-size:.85em;font-weight:600;line-height:32px;margin:0 -4px;padding:8px 4px 0;position:sticky;top:0;z-index:10}.DocSearch-Hit-Tree{color:var(--docsearch-muted-color);height:var(--docsearch-hit-height);opacity:.5;width:24px}.DocSearch-Hit[aria-selected=true] a{background-color:var(--docsearch-highlight-color)}.DocSearch-Hit[aria-selected=true] mark{text-decoration:underline}.DocSearch-Hit-Container{align-items:center;color:var(--docsearch-hit-color);display:flex;flex-direction:row;height:var(--docsearch-hit-height);padding:0 var(--docsearch-spacing) 0 0}.DocSearch-Hit-icon{height:20px;width:20px}.DocSearch-Hit-action,.DocSearch-Hit-icon{color:var(--docsearch-muted-color)}.DocSearch-Hit-action{align-items:center;display:flex;height:22px;width:22px}.DocSearch-Hit-action svg{display:block;height:18px;width:18px}.DocSearch-Hit-action+.DocSearch-Hit-action{margin-left:6px}.DocSearch-Hit-action-button{appearance:none;background:none;border-radius:50%;color:inherit;padding:2px}svg.DocSearch-Hit-Select-Icon{display:none}.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-Select-Icon{display:block}.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{background:#0003;transition:background-color .1s ease-in}.DocSearch-Hit-action-button:focus path,.DocSearch-Hit-action-button:hover path{fill:#fff}.DocSearch-Hit-content-wrapper{display:flex;flex:1 1 auto;flex-direction:column;font-weight:500;justify-content:center;line-height:1.2em;margin:0 8px;overflow-x:hidden;position:relative;text-overflow:ellipsis;white-space:nowrap;width:80%}.DocSearch-Hit-title{font-size:.9em}.DocSearch-Hit-path{color:var(--docsearch-muted-color);font-size:.75em}.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-Tree,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-action,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-icon,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-path,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-text,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-title,.DocSearch-Hit[aria-selected=true] mark{color:var(--docsearch-hit-active-color)!important}.DocSearch-ErrorScreen,.DocSearch-NoResults,.DocSearch-StartScreen{font-size:.9em;margin:0 auto;padding:36px 0;text-align:center;width:80%}.DocSearch-Screen-Icon{color:var(--docsearch-muted-color);padding-bottom:12px}.DocSearch-NoResults-Prefill-List{display:inline-block;padding-bottom:24px;text-align:left}.DocSearch-NoResults-Prefill-List ul{display:inline-block;padding:8px 0 0}.DocSearch-NoResults-Prefill-List li{list-style-position:inside;list-style-type:"» "}.DocSearch-Prefill{-webkit-appearance:none;appearance:none;background:none;border:0;border-radius:1em;color:var(--docsearch-highlight-color);cursor:pointer;display:inline-block;font-size:1em;font-weight:700;padding:0}.DocSearch-Prefill:focus,.DocSearch-Prefill:hover{outline:0;text-decoration:underline}.DocSearch-Footer{align-items:center;background:var(--docsearch-footer-background);border-radius:0 0 8px 8px;box-shadow:var(--docsearch-footer-shadow);display:flex;flex-direction:row-reverse;flex-shrink:0;height:var(--docsearch-footer-height);justify-content:space-between;padding:0 var(--docsearch-spacing);position:relative;-webkit-user-select:none;user-select:none;width:100%;z-index:300}.DocSearch-Commands li,.DocSearch-Commands-Key{align-items:center;display:flex}.DocSearch-Commands{color:var(--docsearch-muted-color);display:flex;list-style:none;margin:0;padding:0}.DocSearch-Commands li:not(:last-of-type){margin-right:.8em}.DocSearch-Commands-Key{background:var(--docsearch-key-gradient);border:0;border-radius:2px;box-shadow:var(--docsearch-key-shadow);color:var(--docsearch-muted-color);height:18px;justify-content:center;margin-right:.4em;padding:0 0 1px;width:20px}.buttonGroup__atx button,.codeBlockContainer_Ckt0{background:var(--prism-background-color);color:var(--prism-color)}@keyframes b{0%{opacity:0}to{opacity:1}}.DocSearch-Button{margin:0;transition:all var(--ifm-transition-fast) var(--ifm-transition-timing-default)}.DocSearch-Container{z-index:calc(var(--ifm-z-index-fixed) + 1)}.codeBlockContainer_Ckt0{border-radius:var(--ifm-code-border-radius);box-shadow:var(--ifm-global-shadow-lw);margin-bottom:var(--ifm-leading)}.codeBlockContent_biex{border-radius:inherit;direction:ltr;position:relative}.codeBlockTitle_Ktv7{border-bottom:1px solid var(--ifm-color-emphasis-300);border-top-left-radius:inherit;border-top-right-radius:inherit;font-size:var(--ifm-code-font-size);font-weight:500;padding:.75rem var(--ifm-pre-padding)}.codeBlock_bY9V{--ifm-pre-background:var(--prism-background-color);margin:0;padding:0}.codeBlockTitle_Ktv7+.codeBlockContent_biex .codeBlock_bY9V{border-top-left-radius:0;border-top-right-radius:0}.codeBlockLines_e6Vv{float:left;font:inherit;min-width:100%;padding:var(--ifm-pre-padding)}.codeBlockLinesWithNumbering_o6Pm{display:table;padding:var(--ifm-pre-padding) 0}.buttonGroup__atx{column-gap:.2rem;display:flex;position:absolute;right:calc(var(--ifm-pre-padding)/2);top:calc(var(--ifm-pre-padding)/2)}.buttonGroup__atx button{align-items:center;border:1px solid var(--ifm-color-emphasis-300);border-radius:var(--ifm-global-radius);display:flex;line-height:0;opacity:0;padding:.4rem;transition:opacity var(--ifm-transition-fast) ease-in-out}.buttonGroup__atx button:focus-visible,.buttonGroup__atx button:hover{opacity:1!important}.theme-code-block:hover .buttonGroup__atx button{opacity:.4}:where(:root){--docusaurus-highlighted-code-line-bg:#484d5b}:where([data-theme=dark]){--docusaurus-highlighted-code-line-bg:#646464}.theme-code-block-highlighted-line{background-color:var(--docusaurus-highlighted-code-line-bg);display:block;margin:0 calc(var(--ifm-pre-padding)*-1);padding:0 var(--ifm-pre-padding)}.codeLine_lJS_{counter-increment:a;display:table-row}.codeLineNumber_Tfdd{background:var(--ifm-pre-background);display:table-cell;left:0;overflow-wrap:normal;padding:0 var(--ifm-pre-padding);position:sticky;text-align:right;width:1%}.codeLineNumber_Tfdd:before{content:counter(a);opacity:.4}.codeLineContent_feaV{padding-right:var(--ifm-pre-padding)}.details_lb9f{--docusaurus-details-summary-arrow-size:0.38rem;--docusaurus-details-transition:transform 200ms ease;--docusaurus-details-decoration-color:grey}.details_lb9f>summary{cursor:pointer;list-style:none;padding-left:1rem;position:relative}.details_lb9f>summary::-webkit-details-marker{display:none}.details_lb9f>summary:before{border-color:#0000 #0000 #0000 var(--docusaurus-details-decoration-color);border-style:solid;border-width:var(--docusaurus-details-summary-arrow-size);content:"";left:0;position:absolute;top:.45rem;transform:rotate(0);transform-origin:calc(var(--docusaurus-details-summary-arrow-size)/2) 50%;transition:var(--docusaurus-details-transition)}.collapsibleContent_i85q{border-top:1px solid var(--docusaurus-details-decoration-color);margin-top:1rem;padding-top:1rem}.theme-code-block:hover .copyButtonCopied_obH4{opacity:1!important}.copyButtonIcons_eSgA{height:1.125rem;position:relative;width:1.125rem}.copyButtonIcon_y97N,.copyButtonSuccessIcon_LjdS{fill:currentColor;height:inherit;left:0;opacity:inherit;position:absolute;top:0;transition:all var(--ifm-transition-fast) ease;width:inherit}.copyButtonSuccessIcon_LjdS{color:#00d600;left:50%;opacity:0;top:50%;transform:translate(-50%,-50%) scale(.33)}.copyButtonCopied_obH4 .copyButtonIcon_y97N{opacity:0;transform:scale(.33)}.copyButtonCopied_obH4 .copyButtonSuccessIcon_LjdS{opacity:1;transform:translate(-50%,-50%) scale(1);transition-delay:75ms}.details_b_Ee{--docusaurus-details-decoration-color:var(--ifm-alert-border-color);--docusaurus-details-transition:transform var(--ifm-transition-fast) ease;border:1px solid var(--ifm-alert-border-color);margin:0 0 var(--ifm-spacing-vertical)}.wordWrapButtonIcon_Bwma{height:1.2rem;width:1.2rem}.containsTaskList_mC6p{list-style:none}.img_ev3q{height:auto}.tableOfContents_bqdL{max-height:calc(100vh - var(--ifm-navbar-height) - 2rem);overflow-y:auto;position:sticky;top:calc(var(--ifm-navbar-height) + 1rem)}.admonition_xJq3{margin-bottom:1em}.admonitionHeading_Gvgb{font:var(--ifm-heading-font-weight) var(--ifm-h5-font-size)/var(--ifm-heading-line-height) var(--ifm-heading-font-family)}.admonitionHeading_Gvgb:not(:last-child){margin-bottom:.3rem}.admonitionHeading_Gvgb code{text-transform:none}.admonitionIcon_Rf37{display:inline-block;margin-right:.4em;vertical-align:middle}.admonitionIcon_Rf37 svg{fill:var(--ifm-alert-foreground-color);display:inline-block;height:1.6em;width:1.6em}.breadcrumbHomeIcon_YNFT{height:1.1rem;position:relative;top:1px;vertical-align:top;width:1.1rem}.breadcrumbsContainer_Z_bl{--ifm-breadcrumb-size-multiplier:0.8;margin-bottom:.8rem}.title_kItE{--ifm-h1-font-size:3rem;margin-bottom:calc(var(--ifm-leading)*1.25)}.mdxPageWrapper_j9I6{justify-content:center}@media (min-width:997px){.collapseSidebarButton_PEFL,.expandButton_TmdG{background-color:var(--docusaurus-collapse-button-bg)}:root{--docusaurus-announcement-bar-height:30px}.announcementBarClose_gvF7,.announcementBarPlaceholder_vyr4{flex-basis:50px}.navbarSearchContainer_Bca1{padding:var(--ifm-navbar-item-padding-vertical) var(--ifm-navbar-item-padding-horizontal)}.lastUpdated_vwxv{text-align:right}.tocMobile_ITEo{display:none}.collapseSidebarButton_PEFL{border:1px solid var(--ifm-toc-border-color);border-radius:0;bottom:0;display:block!important;height:40px;position:sticky}.collapseSidebarButtonIcon_kv0_{margin-top:4px;transform:rotate(180deg)}.expandButtonIcon_i1dp,[dir=rtl] .collapseSidebarButtonIcon_kv0_{transform:rotate(0)}.collapseSidebarButton_PEFL:focus,.collapseSidebarButton_PEFL:hover,.expandButton_TmdG:focus,.expandButton_TmdG:hover{background-color:var(--docusaurus-collapse-button-bg-hover)}.menuHtmlItem_M9Kj{padding:var(--ifm-menu-link-padding-vertical) var(--ifm-menu-link-padding-horizontal)}.menu_SIkG{flex-grow:1;padding:.5rem}@supports (scrollbar-gutter:stable){.menu_SIkG{padding:.5rem 0 .5rem .5rem;scrollbar-gutter:stable}}.menuWithAnnouncementBar_GW3s{margin-bottom:var(--docusaurus-announcement-bar-height)}.sidebar_njMd{display:flex;flex-direction:column;height:100%;padding-top:var(--ifm-navbar-height);width:var(--doc-sidebar-width)}.sidebarWithHideableNavbar_wUlq{padding-top:0}.sidebarHidden_VK0M{opacity:0;visibility:hidden}.sidebarLogo_isFc{align-items:center;color:inherit!important;display:flex!important;margin:0 var(--ifm-navbar-padding-horizontal);max-height:var(--ifm-navbar-height);min-height:var(--ifm-navbar-height);text-decoration:none!important}.sidebarLogo_isFc img{height:2rem;margin-right:.5rem}.expandButton_TmdG{align-items:center;display:flex;height:100%;justify-content:center;position:absolute;right:0;top:0;transition:background-color var(--ifm-transition-fast) ease;width:100%}[dir=rtl] .expandButtonIcon_i1dp{transform:rotate(180deg)}.docSidebarContainer_YfHR{border-right:1px solid var(--ifm-toc-border-color);-webkit-clip-path:inset(0);clip-path:inset(0);display:block;margin-top:calc(var(--ifm-navbar-height)*-1);transition:width var(--ifm-transition-fast) ease;width:var(--doc-sidebar-width);will-change:width}.docSidebarContainerHidden_DPk8{cursor:pointer;width:var(--doc-sidebar-hidden-width)}.sidebarViewport_aRkj{height:100%;max-height:100vh;position:sticky;top:0}.docMainContainer_TBSr{flex-grow:1;max-width:calc(100% - var(--doc-sidebar-width))}.docMainContainerEnhanced_lQrH{max-width:calc(100% - var(--doc-sidebar-hidden-width))}.docItemWrapperEnhanced_JWYK{max-width:calc(var(--ifm-container-width) + var(--doc-sidebar-width))!important}.docItemCol_VOVn,.generatedIndexPage_vN6x{max-width:75%!important}.list_eTzJ article:nth-last-child(-n+2){margin-bottom:0!important}}@media (min-width:1440px){.container{max-width:var(--ifm-container-width-xl)}}@media (max-width:996px){.col{--ifm-col-width:100%;flex-basis:var(--ifm-col-width);margin-left:0}.footer{--ifm-footer-padding-horizontal:0}.colorModeToggle_DEke,.footer__link-separator,.navbar__item,.tableOfContents_bqdL{display:none}.footer__col{margin-bottom:calc(var(--ifm-spacing-vertical)*3)}.footer__link-item{display:block}.hero{padding-left:0;padding-right:0}.navbar>.container,.navbar>.container-fluid{padding:0}.navbar__toggle{display:inherit}.navbar__search-input{width:9rem}.pills--block,.tabs--block{flex-direction:column}.navbarSearchContainer_Bca1{position:absolute;right:var(--ifm-navbar-padding-horizontal)}.docItemContainer_F8PC{padding:0 .3rem}}@media only screen and (max-width:996px){.searchQueryColumn_RTkw,.searchResultsColumn_JPFH{max-width:60%!important}.searchLogoColumn_rJIA,.searchVersionColumn_ypXd{max-width:40%!important}.searchLogoColumn_rJIA{padding-left:0!important}}@media screen and (max-width:996px){.heroBanner_qdFl{padding:2rem}}@media (max-width:768px){.DocSearch-Button-Keys,.DocSearch-Button-Placeholder,.DocSearch-Commands,.DocSearch-Hit-Tree{display:none}:root{--docsearch-spacing:10px;--docsearch-footer-height:40px}.DocSearch-Dropdown{height:100%;max-height:calc(var(--docsearch-vh,1vh)*100 - var(--docsearch-searchbox-height) - var(--docsearch-spacing) - var(--docsearch-footer-height))}.DocSearch-Container{height:100vh;height:-webkit-fill-available;height:calc(var(--docsearch-vh,1vh)*100);position:absolute}.DocSearch-Footer{border-radius:0;bottom:0;position:absolute}.DocSearch-Hit-content-wrapper{display:flex;position:relative;width:80%}.DocSearch-Modal{border-radius:0;box-shadow:none;height:100vh;height:-webkit-fill-available;height:calc(var(--docsearch-vh,1vh)*100);margin:0;max-width:100%;width:100%}.DocSearch-Cancel{-webkit-appearance:none;appearance:none;background:none;border:0;color:var(--docsearch-highlight-color);cursor:pointer;display:inline-block;flex:none;font:inherit;font-size:1em;font-weight:500;margin-left:var(--docsearch-spacing);outline:0;overflow:hidden;padding:0;-webkit-user-select:none;user-select:none;white-space:nowrap}}@media (max-width:576px){.markdown h1:first-child{--ifm-h1-font-size:2rem}.markdown>h2{--ifm-h2-font-size:1.5rem}.markdown>h3{--ifm-h3-font-size:1.25rem}}@media screen and (max-width:576px){.searchQueryColumn_RTkw{max-width:100%!important}.searchVersionColumn_ypXd{max-width:100%!important;padding-left:var(--ifm-spacing-horizontal)!important}}@media (hover:hover){.backToTopButton_sjWU:hover{background-color:var(--ifm-color-emphasis-300)}}@media (pointer:fine){.thin-scrollbar{scrollbar-width:thin}.thin-scrollbar::-webkit-scrollbar{height:var(--ifm-scrollbar-size);width:var(--ifm-scrollbar-size)}.thin-scrollbar::-webkit-scrollbar-track{background:var(--ifm-scrollbar-track-background-color);border-radius:10px}.thin-scrollbar::-webkit-scrollbar-thumb{background:var(--ifm-scrollbar-thumb-background-color);border-radius:10px}.thin-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--ifm-scrollbar-thumb-hover-background-color)}}@media (prefers-reduced-motion:reduce){:root{--ifm-transition-fast:0ms;--ifm-transition-slow:0ms}}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Reset{stroke-width:var(--docsearch-icon-stroke-width);animation:none;-webkit-appearance:none;appearance:none;background:none;border:0;border-radius:50%;color:var(--docsearch-icon-color);cursor:pointer;right:0}.DocSearch-Hit--deleting,.DocSearch-Hit--favoriting{transition:none}.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{background:#0003;transition:none}}@media print{.announcementBar_mb4j,.footer,.menu,.navbar,.pagination-nav,.table-of-contents,.tocMobile_ITEo{display:none}.tabs{page-break-inside:avoid}.codeBlockLines_e6Vv{white-space:pre-wrap}}
\ No newline at end of file
diff --git a/assets/css/styles.b9a9561b.css b/assets/css/styles.b9a9561b.css
new file mode 100644
index 000000000..c718c8aa4
--- /dev/null
+++ b/assets/css/styles.b9a9561b.css
@@ -0,0 +1 @@
+.col,.container{padding:0 var(--ifm-spacing-horizontal);width:100%}.markdown>h2,.markdown>h3,.markdown>h4,.markdown>h5,.markdown>h6{margin-bottom:calc(var(--ifm-heading-vertical-rhythm-bottom)*var(--ifm-leading))}.markdown li,body{word-wrap:break-word}body,ol ol,ol ul,ul ol,ul ul{margin:0}pre,table{overflow:auto}blockquote,pre{margin:0 0 var(--ifm-spacing-vertical)}.breadcrumbs__link,.button{transition-timing-function:var(--ifm-transition-timing-default)}.button,.hash-link{-webkit-user-select:none}.button,code{vertical-align:middle}.button--outline.button--active,.button--outline:active,.button--outline:hover,:root{--ifm-button-color:var(--ifm-font-color-base-inverse)}.menu__link:hover,a{transition:color var(--ifm-transition-fast) var(--ifm-transition-timing-default)}.navbar--dark,:root{--ifm-navbar-link-hover-color:var(--ifm-color-primary)}.menu,.navbar-sidebar{overflow-x:hidden}:root,html[data-theme=dark]{--ifm-color-emphasis-500:var(--ifm-color-gray-500)}.toggleButton_gllP,html{-webkit-tap-highlight-color:transparent}*,.DocSearch-Container,.DocSearch-Container *{box-sizing:border-box}:root{--ifm-color-scheme:light;--ifm-dark-value:10%;--ifm-darker-value:15%;--ifm-darkest-value:30%;--ifm-light-value:15%;--ifm-lighter-value:30%;--ifm-lightest-value:50%;--ifm-contrast-background-value:90%;--ifm-contrast-foreground-value:70%;--ifm-contrast-background-dark-value:70%;--ifm-contrast-foreground-dark-value:90%;--ifm-color-primary:#3578e5;--ifm-color-secondary:#ebedf0;--ifm-color-success:#00a400;--ifm-color-info:#54c7ec;--ifm-color-warning:#ffba00;--ifm-color-danger:#fa383e;--ifm-color-primary-dark:#306cce;--ifm-color-primary-darker:#2d66c3;--ifm-color-primary-darkest:#2554a0;--ifm-color-primary-light:#538ce9;--ifm-color-primary-lighter:#72a1ed;--ifm-color-primary-lightest:#9abcf2;--ifm-color-primary-contrast-background:#ebf2fc;--ifm-color-primary-contrast-foreground:#102445;--ifm-color-secondary-dark:#d4d5d8;--ifm-color-secondary-darker:#c8c9cc;--ifm-color-secondary-darkest:#a4a6a8;--ifm-color-secondary-light:#eef0f2;--ifm-color-secondary-lighter:#f1f2f5;--ifm-color-secondary-lightest:#f5f6f8;--ifm-color-secondary-contrast-background:#fdfdfe;--ifm-color-secondary-contrast-foreground:#474748;--ifm-color-success-dark:#009400;--ifm-color-success-darker:#008b00;--ifm-color-success-darkest:#007300;--ifm-color-success-light:#26b226;--ifm-color-success-lighter:#4dbf4d;--ifm-color-success-lightest:#80d280;--ifm-color-success-contrast-background:#e6f6e6;--ifm-color-success-contrast-foreground:#003100;--ifm-color-info-dark:#4cb3d4;--ifm-color-info-darker:#47a9c9;--ifm-color-info-darkest:#3b8ba5;--ifm-color-info-light:#6ecfef;--ifm-color-info-lighter:#87d8f2;--ifm-color-info-lightest:#aae3f6;--ifm-color-info-contrast-background:#eef9fd;--ifm-color-info-contrast-foreground:#193c47;--ifm-color-warning-dark:#e6a700;--ifm-color-warning-darker:#d99e00;--ifm-color-warning-darkest:#b38200;--ifm-color-warning-light:#ffc426;--ifm-color-warning-lighter:#ffcf4d;--ifm-color-warning-lightest:#ffdd80;--ifm-color-warning-contrast-background:#fff8e6;--ifm-color-warning-contrast-foreground:#4d3800;--ifm-color-danger-dark:#e13238;--ifm-color-danger-darker:#d53035;--ifm-color-danger-darkest:#af272b;--ifm-color-danger-light:#fb565b;--ifm-color-danger-lighter:#fb7478;--ifm-color-danger-lightest:#fd9c9f;--ifm-color-danger-contrast-background:#ffebec;--ifm-color-danger-contrast-foreground:#4b1113;--ifm-color-white:#fff;--ifm-color-black:#000;--ifm-color-gray-0:var(--ifm-color-white);--ifm-color-gray-100:#f5f6f7;--ifm-color-gray-200:#ebedf0;--ifm-color-gray-300:#dadde1;--ifm-color-gray-400:#ccd0d5;--ifm-color-gray-500:#bec3c9;--ifm-color-gray-600:#8d949e;--ifm-color-gray-700:#606770;--ifm-color-gray-800:#444950;--ifm-color-gray-900:#1c1e21;--ifm-color-gray-1000:var(--ifm-color-black);--ifm-color-emphasis-0:var(--ifm-color-gray-0);--ifm-color-emphasis-100:var(--ifm-color-gray-100);--ifm-color-emphasis-200:var(--ifm-color-gray-200);--ifm-color-emphasis-300:var(--ifm-color-gray-300);--ifm-color-emphasis-400:var(--ifm-color-gray-400);--ifm-color-emphasis-600:var(--ifm-color-gray-600);--ifm-color-emphasis-700:var(--ifm-color-gray-700);--ifm-color-emphasis-800:var(--ifm-color-gray-800);--ifm-color-emphasis-900:var(--ifm-color-gray-900);--ifm-color-emphasis-1000:var(--ifm-color-gray-1000);--ifm-color-content:var(--ifm-color-emphasis-900);--ifm-color-content-inverse:var(--ifm-color-emphasis-0);--ifm-color-content-secondary:#525860;--ifm-background-color:#0000;--ifm-background-surface-color:var(--ifm-color-content-inverse);--ifm-global-border-width:1px;--ifm-global-radius:0.4rem;--ifm-hover-overlay:#0000000d;--ifm-font-color-base:var(--ifm-color-content);--ifm-font-color-base-inverse:var(--ifm-color-content-inverse);--ifm-font-color-secondary:var(--ifm-color-content-secondary);--ifm-font-family-base:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--ifm-font-family-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--ifm-font-size-base:100%;--ifm-font-weight-light:300;--ifm-font-weight-normal:400;--ifm-font-weight-semibold:500;--ifm-font-weight-bold:700;--ifm-font-weight-base:var(--ifm-font-weight-normal);--ifm-line-height-base:1.65;--ifm-global-spacing:1rem;--ifm-spacing-vertical:var(--ifm-global-spacing);--ifm-spacing-horizontal:var(--ifm-global-spacing);--ifm-transition-fast:200ms;--ifm-transition-slow:400ms;--ifm-transition-timing-default:cubic-bezier(0.08,0.52,0.52,1);--ifm-global-shadow-lw:0 1px 2px 0 #0000001a;--ifm-global-shadow-md:0 5px 40px #0003;--ifm-global-shadow-tl:0 12px 28px 0 #0003,0 2px 4px 0 #0000001a;--ifm-z-index-dropdown:100;--ifm-z-index-fixed:200;--ifm-z-index-overlay:400;--ifm-container-width:1140px;--ifm-container-width-xl:1320px;--ifm-code-background:#f6f7f8;--ifm-code-border-radius:var(--ifm-global-radius);--ifm-code-font-size:90%;--ifm-code-padding-horizontal:0.1rem;--ifm-code-padding-vertical:0.1rem;--ifm-pre-background:var(--ifm-code-background);--ifm-pre-border-radius:var(--ifm-code-border-radius);--ifm-pre-color:inherit;--ifm-pre-line-height:1.45;--ifm-pre-padding:1rem;--ifm-heading-color:inherit;--ifm-heading-margin-top:0;--ifm-heading-margin-bottom:var(--ifm-spacing-vertical);--ifm-heading-font-family:var(--ifm-font-family-base);--ifm-heading-font-weight:var(--ifm-font-weight-bold);--ifm-heading-line-height:1.25;--ifm-h1-font-size:2rem;--ifm-h2-font-size:1.5rem;--ifm-h3-font-size:1.25rem;--ifm-h4-font-size:1rem;--ifm-h5-font-size:0.875rem;--ifm-h6-font-size:0.85rem;--ifm-image-alignment-padding:1.25rem;--ifm-leading-desktop:1.25;--ifm-leading:calc(var(--ifm-leading-desktop)*1rem);--ifm-list-left-padding:2rem;--ifm-list-margin:1rem;--ifm-list-item-margin:0.25rem;--ifm-list-paragraph-margin:1rem;--ifm-table-cell-padding:0.75rem;--ifm-table-background:#0000;--ifm-table-stripe-background:#00000008;--ifm-table-border-width:1px;--ifm-table-border-color:var(--ifm-color-emphasis-300);--ifm-table-head-background:inherit;--ifm-table-head-color:inherit;--ifm-table-head-font-weight:var(--ifm-font-weight-bold);--ifm-table-cell-color:inherit;--ifm-link-color:var(--ifm-color-primary);--ifm-link-decoration:none;--ifm-link-hover-color:var(--ifm-link-color);--ifm-link-hover-decoration:underline;--ifm-paragraph-margin-bottom:var(--ifm-leading);--ifm-blockquote-font-size:var(--ifm-font-size-base);--ifm-blockquote-border-left-width:2px;--ifm-blockquote-padding-horizontal:var(--ifm-spacing-horizontal);--ifm-blockquote-padding-vertical:0;--ifm-blockquote-shadow:none;--ifm-blockquote-color:var(--ifm-color-emphasis-800);--ifm-blockquote-border-color:var(--ifm-color-emphasis-300);--ifm-hr-background-color:var(--ifm-color-emphasis-500);--ifm-hr-height:1px;--ifm-hr-margin-vertical:1.5rem;--ifm-scrollbar-size:7px;--ifm-scrollbar-track-background-color:#f1f1f1;--ifm-scrollbar-thumb-background-color:silver;--ifm-scrollbar-thumb-hover-background-color:#a7a7a7;--ifm-alert-background-color:inherit;--ifm-alert-border-color:inherit;--ifm-alert-border-radius:var(--ifm-global-radius);--ifm-alert-border-width:0px;--ifm-alert-border-left-width:5px;--ifm-alert-color:var(--ifm-font-color-base);--ifm-alert-padding-horizontal:var(--ifm-spacing-horizontal);--ifm-alert-padding-vertical:var(--ifm-spacing-vertical);--ifm-alert-shadow:var(--ifm-global-shadow-lw);--ifm-avatar-intro-margin:1rem;--ifm-avatar-intro-alignment:inherit;--ifm-avatar-photo-size:3rem;--ifm-badge-background-color:inherit;--ifm-badge-border-color:inherit;--ifm-badge-border-radius:var(--ifm-global-radius);--ifm-badge-border-width:var(--ifm-global-border-width);--ifm-badge-color:var(--ifm-color-white);--ifm-badge-padding-horizontal:calc(var(--ifm-spacing-horizontal)*0.5);--ifm-badge-padding-vertical:calc(var(--ifm-spacing-vertical)*0.25);--ifm-breadcrumb-border-radius:1.5rem;--ifm-breadcrumb-spacing:0.5rem;--ifm-breadcrumb-color-active:var(--ifm-color-primary);--ifm-breadcrumb-item-background-active:var(--ifm-hover-overlay);--ifm-breadcrumb-padding-horizontal:0.8rem;--ifm-breadcrumb-padding-vertical:0.4rem;--ifm-breadcrumb-size-multiplier:1;--ifm-breadcrumb-separator:url('data:image/svg+xml;utf8,');--ifm-breadcrumb-separator-filter:none;--ifm-breadcrumb-separator-size:0.5rem;--ifm-breadcrumb-separator-size-multiplier:1.25;--ifm-button-background-color:inherit;--ifm-button-border-color:var(--ifm-button-background-color);--ifm-button-border-width:var(--ifm-global-border-width);--ifm-button-font-weight:var(--ifm-font-weight-bold);--ifm-button-padding-horizontal:1.5rem;--ifm-button-padding-vertical:0.375rem;--ifm-button-size-multiplier:1;--ifm-button-transition-duration:var(--ifm-transition-fast);--ifm-button-border-radius:calc(var(--ifm-global-radius)*var(--ifm-button-size-multiplier));--ifm-button-group-spacing:2px;--ifm-card-background-color:var(--ifm-background-surface-color);--ifm-card-border-radius:calc(var(--ifm-global-radius)*2);--ifm-card-horizontal-spacing:var(--ifm-global-spacing);--ifm-card-vertical-spacing:var(--ifm-global-spacing);--ifm-toc-border-color:var(--ifm-color-emphasis-300);--ifm-toc-link-color:var(--ifm-color-content-secondary);--ifm-toc-padding-vertical:0.5rem;--ifm-toc-padding-horizontal:0.5rem;--ifm-dropdown-background-color:var(--ifm-background-surface-color);--ifm-dropdown-font-weight:var(--ifm-font-weight-semibold);--ifm-dropdown-link-color:var(--ifm-font-color-base);--ifm-dropdown-hover-background-color:var(--ifm-hover-overlay);--ifm-footer-background-color:var(--ifm-color-emphasis-100);--ifm-footer-color:inherit;--ifm-footer-link-color:var(--ifm-color-emphasis-700);--ifm-footer-link-hover-color:var(--ifm-color-primary);--ifm-footer-link-horizontal-spacing:0.5rem;--ifm-footer-padding-horizontal:calc(var(--ifm-spacing-horizontal)*2);--ifm-footer-padding-vertical:calc(var(--ifm-spacing-vertical)*2);--ifm-footer-title-color:inherit;--ifm-footer-logo-max-width:min(30rem,90vw);--ifm-hero-background-color:var(--ifm-background-surface-color);--ifm-hero-text-color:var(--ifm-color-emphasis-800);--ifm-menu-color:var(--ifm-color-emphasis-700);--ifm-menu-color-active:var(--ifm-color-primary);--ifm-menu-color-background-active:var(--ifm-hover-overlay);--ifm-menu-color-background-hover:var(--ifm-hover-overlay);--ifm-menu-link-padding-horizontal:0.75rem;--ifm-menu-link-padding-vertical:0.375rem;--ifm-menu-link-sublist-icon:url('data:image/svg+xml;utf8,');--ifm-menu-link-sublist-icon-filter:none;--ifm-navbar-background-color:var(--ifm-background-surface-color);--ifm-navbar-height:3.75rem;--ifm-navbar-item-padding-horizontal:0.75rem;--ifm-navbar-item-padding-vertical:0.25rem;--ifm-navbar-link-color:var(--ifm-font-color-base);--ifm-navbar-link-active-color:var(--ifm-link-color);--ifm-navbar-padding-horizontal:var(--ifm-spacing-horizontal);--ifm-navbar-padding-vertical:calc(var(--ifm-spacing-vertical)*0.5);--ifm-navbar-shadow:var(--ifm-global-shadow-lw);--ifm-navbar-search-input-background-color:var(--ifm-color-emphasis-200);--ifm-navbar-search-input-color:var(--ifm-color-emphasis-800);--ifm-navbar-search-input-placeholder-color:var(--ifm-color-emphasis-500);--ifm-navbar-search-input-icon:url('data:image/svg+xml;utf8,');--ifm-navbar-sidebar-width:83vw;--ifm-pagination-border-radius:var(--ifm-global-radius);--ifm-pagination-color-active:var(--ifm-color-primary);--ifm-pagination-font-size:1rem;--ifm-pagination-item-active-background:var(--ifm-hover-overlay);--ifm-pagination-page-spacing:0.2em;--ifm-pagination-padding-horizontal:calc(var(--ifm-spacing-horizontal)*1);--ifm-pagination-padding-vertical:calc(var(--ifm-spacing-vertical)*0.25);--ifm-pagination-nav-border-radius:var(--ifm-global-radius);--ifm-pagination-nav-color-hover:var(--ifm-color-primary);--ifm-pills-color-active:var(--ifm-color-primary);--ifm-pills-color-background-active:var(--ifm-hover-overlay);--ifm-pills-spacing:0.125rem;--ifm-tabs-color:var(--ifm-font-color-secondary);--ifm-tabs-color-active:var(--ifm-color-primary);--ifm-tabs-color-active-border:var(--ifm-tabs-color-active);--ifm-tabs-padding-horizontal:1rem;--ifm-tabs-padding-vertical:1rem;--docusaurus-progress-bar-color:var(--ifm-color-primary);--ifm-color-primary:#0063cc;--ifm-color-primary-dark:#0059b8;--ifm-color-primary-darker:#0054ad;--ifm-color-primary-darkest:#00458f;--ifm-color-primary-light:#006de0;--ifm-color-primary-lighter:#0072eb;--ifm-color-primary-lightest:#1f8bff;--docusaurus-highlighted-code-line-bg:#dddfe1;--code-display-color:#f8fafc;--code-display-color-background:#e1e3e6;--inversion-percentage:0%;--ifm-container-width-xl:calc(25% + 860px);--chip-background:#e2e2e2;--chip-background-hover:#cfcfcf;--chip-text:#5f6163;--chip-icon-color:#616161;--ifm-background-color:#fff!important;--docusaurus-announcement-bar-height:auto;--docusaurus-tag-list-border:var(--ifm-color-emphasis-300);--docusaurus-collapse-button-bg:#0000;--docusaurus-collapse-button-bg-hover:#0000001a;--doc-sidebar-width:300px;--doc-sidebar-hidden-width:30px;--docsearch-primary-color:#5468ff;--docsearch-text-color:#1c1e21;--docsearch-spacing:12px;--docsearch-icon-stroke-width:1.4;--docsearch-highlight-color:var(--docsearch-primary-color);--docsearch-muted-color:#969faf;--docsearch-container-background:#656c85cc;--docsearch-logo-color:#5468ff;--docsearch-modal-width:560px;--docsearch-modal-height:600px;--docsearch-modal-background:#f5f6f7;--docsearch-modal-shadow:inset 1px 1px 0 0 #ffffff80,0 3px 8px 0 #555a64;--docsearch-searchbox-height:56px;--docsearch-searchbox-background:#ebedf0;--docsearch-searchbox-focus-background:#fff;--docsearch-searchbox-shadow:inset 0 0 0 2px var(--docsearch-primary-color);--docsearch-hit-height:56px;--docsearch-hit-color:#444950;--docsearch-hit-active-color:#fff;--docsearch-hit-background:#fff;--docsearch-hit-shadow:0 1px 3px 0 #d4d9e1;--docsearch-key-gradient:linear-gradient(-225deg,#d5dbe4,#f8f8f8);--docsearch-key-shadow:inset 0 -2px 0 0 #cdcde6,inset 0 0 1px 1px #fff,0 1px 2px 1px #1e235a66;--docsearch-footer-height:44px;--docsearch-footer-background:#fff;--docsearch-footer-shadow:0 -1px 0 0 #e0e3e8,0 -3px 6px 0 #45629b1f;--docsearch-primary-color:var(--ifm-color-primary);--docsearch-text-color:var(--ifm-font-color-base)}.badge--danger,.badge--info,.badge--primary,.badge--secondary,.badge--success,.badge--warning{--ifm-badge-border-color:var(--ifm-badge-background-color)}.button--link,.button--outline{--ifm-button-background-color:#0000}html{-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;text-size-adjust:100%;background-color:var(--ifm-background-color);color:var(--ifm-font-color-base);color-scheme:var(--ifm-color-scheme);font:var(--ifm-font-size-base)/var(--ifm-line-height-base) var(--ifm-font-family-base);text-rendering:optimizelegibility}iframe{border:0;color-scheme:auto}.container{margin:0 auto;max-width:var(--ifm-container-width)}.container--fluid{max-width:inherit}.row{display:flex;flex-wrap:wrap;margin:0 calc(var(--ifm-spacing-horizontal)*-1)}.list_eTzJ article:last-child,.margin-bottom--none,.margin-vert--none,.markdown>:last-child{margin-bottom:0!important}.margin-top--none,.margin-vert--none,.tabItem_LNqP{margin-top:0!important}.row--no-gutters{margin-left:0;margin-right:0}.margin-horiz--none,.margin-right--none{margin-right:0!important}.row--no-gutters>.col{padding-left:0;padding-right:0}.row--align-top{align-items:flex-start}.row--align-bottom{align-items:flex-end}.menuExternalLink_NmtK,.row--align-center{align-items:center}.row--align-stretch{align-items:stretch}.row--align-baseline{align-items:baseline}.col{--ifm-col-width:100%;flex:1 0;margin-left:0;max-width:var(--ifm-col-width)}.padding-bottom--none,.padding-vert--none{padding-bottom:0!important}.padding-top--none,.padding-vert--none{padding-top:0!important}.padding-horiz--none,.padding-left--none{padding-left:0!important}.padding-horiz--none,.padding-right--none{padding-right:0!important}.col[class*=col--]{flex:0 0 var(--ifm-col-width)}.col--1{--ifm-col-width:8.33333%}.col--offset-1{margin-left:8.33333%}.col--2{--ifm-col-width:16.66667%}.col--offset-2{margin-left:16.66667%}.col--3{--ifm-col-width:25%}.col--offset-3{margin-left:25%}.col--4{--ifm-col-width:33.33333%}.col--offset-4{margin-left:33.33333%}.col--5{--ifm-col-width:41.66667%}.col--offset-5{margin-left:41.66667%}.col--6{--ifm-col-width:50%}.col--offset-6{margin-left:50%}.col--7{--ifm-col-width:58.33333%}.col--offset-7{margin-left:58.33333%}.col--8{--ifm-col-width:66.66667%}.col--offset-8{margin-left:66.66667%}.col--9{--ifm-col-width:75%}.col--offset-9{margin-left:75%}.col--10{--ifm-col-width:83.33333%}.col--offset-10{margin-left:83.33333%}.col--11{--ifm-col-width:91.66667%}.col--offset-11{margin-left:91.66667%}.col--12{--ifm-col-width:100%}.col--offset-12{margin-left:100%}.margin-horiz--none,.margin-left--none{margin-left:0!important}.margin--none{margin:0!important}.margin-bottom--xs,.margin-vert--xs{margin-bottom:.25rem!important}.margin-top--xs,.margin-vert--xs{margin-top:.25rem!important}.margin-horiz--xs,.margin-left--xs{margin-left:.25rem!important}.margin-horiz--xs,.margin-right--xs{margin-right:.25rem!important}.margin--xs{margin:.25rem!important}.margin-bottom--sm,.margin-vert--sm{margin-bottom:.5rem!important}.margin-top--sm,.margin-vert--sm{margin-top:.5rem!important}.margin-horiz--sm,.margin-left--sm{margin-left:.5rem!important}.margin-horiz--sm,.margin-right--sm{margin-right:.5rem!important}.margin--sm{margin:.5rem!important}.margin-bottom--md,.margin-vert--md{margin-bottom:1rem!important}.margin-top--md,.margin-vert--md{margin-top:1rem!important}.margin-horiz--md,.margin-left--md{margin-left:1rem!important}.margin-horiz--md,.margin-right--md{margin-right:1rem!important}.margin--md{margin:1rem!important}.margin-bottom--lg,.margin-vert--lg{margin-bottom:2rem!important}.margin-top--lg,.margin-vert--lg{margin-top:2rem!important}.margin-horiz--lg,.margin-left--lg{margin-left:2rem!important}.margin-horiz--lg,.margin-right--lg{margin-right:2rem!important}.margin--lg{margin:2rem!important}.margin-bottom--xl,.margin-vert--xl{margin-bottom:5rem!important}.margin-top--xl,.margin-vert--xl{margin-top:5rem!important}.margin-horiz--xl,.margin-left--xl{margin-left:5rem!important}.margin-horiz--xl,.margin-right--xl{margin-right:5rem!important}.margin--xl{margin:5rem!important}.padding--none{padding:0!important}.padding-bottom--xs,.padding-vert--xs{padding-bottom:.25rem!important}.padding-top--xs,.padding-vert--xs{padding-top:.25rem!important}.padding-horiz--xs,.padding-left--xs{padding-left:.25rem!important}.padding-horiz--xs,.padding-right--xs{padding-right:.25rem!important}.padding--xs{padding:.25rem!important}.padding-bottom--sm,.padding-vert--sm{padding-bottom:.5rem!important}.padding-top--sm,.padding-vert--sm{padding-top:.5rem!important}.padding-horiz--sm,.padding-left--sm{padding-left:.5rem!important}.padding-horiz--sm,.padding-right--sm{padding-right:.5rem!important}.padding--sm{padding:.5rem!important}.padding-bottom--md,.padding-vert--md{padding-bottom:1rem!important}.padding-top--md,.padding-vert--md{padding-top:1rem!important}.padding-horiz--md,.padding-left--md{padding-left:1rem!important}.padding-horiz--md,.padding-right--md{padding-right:1rem!important}.padding--md{padding:1rem!important}.padding-bottom--lg,.padding-vert--lg{padding-bottom:2rem!important}.padding-top--lg,.padding-vert--lg{padding-top:2rem!important}.padding-horiz--lg,.padding-left--lg{padding-left:2rem!important}.padding-horiz--lg,.padding-right--lg{padding-right:2rem!important}.padding--lg{padding:2rem!important}.padding-bottom--xl,.padding-vert--xl{padding-bottom:5rem!important}.padding-top--xl,.padding-vert--xl{padding-top:5rem!important}.padding-horiz--xl,.padding-left--xl{padding-left:5rem!important}.padding-horiz--xl,.padding-right--xl{padding-right:5rem!important}.padding--xl{padding:5rem!important}code{background-color:var(--ifm-code-background);border:.1rem solid #0000001a;border-radius:var(--ifm-code-border-radius);font-family:var(--ifm-font-family-monospace);font-size:var(--ifm-code-font-size);padding:var(--ifm-code-padding-vertical) var(--ifm-code-padding-horizontal)}a code{color:inherit}pre{background-color:var(--ifm-pre-background);border-radius:var(--ifm-pre-border-radius);color:var(--ifm-pre-color);font:var(--ifm-code-font-size)/var(--ifm-pre-line-height) var(--ifm-font-family-monospace);padding:var(--ifm-pre-padding)}pre code{background-color:initial;border:none;font-size:100%;line-height:inherit;padding:0}kbd{background-color:var(--ifm-color-emphasis-0);border:1px solid var(--ifm-color-emphasis-400);border-radius:.2rem;box-shadow:inset 0 -1px 0 var(--ifm-color-emphasis-400);color:var(--ifm-color-emphasis-800);font:80% var(--ifm-font-family-monospace);padding:.15rem .3rem}h1,h2,h3,h4,h5,h6{color:var(--ifm-heading-color);font-family:var(--ifm-heading-font-family);font-weight:var(--ifm-heading-font-weight);line-height:var(--ifm-heading-line-height);margin:var(--ifm-heading-margin-top) 0 var(--ifm-heading-margin-bottom) 0}h1{font-size:var(--ifm-h1-font-size)}h2{font-size:var(--ifm-h2-font-size)}h3{font-size:var(--ifm-h3-font-size)}h4{font-size:var(--ifm-h4-font-size)}h5{font-size:var(--ifm-h5-font-size)}h6{font-size:var(--ifm-h6-font-size)}img{max-width:100%}img[align=right]{padding-left:var(--image-alignment-padding)}img[align=left]{padding-right:var(--image-alignment-padding)}.markdown{--ifm-h1-vertical-rhythm-top:3;--ifm-h2-vertical-rhythm-top:2;--ifm-h3-vertical-rhythm-top:1.5;--ifm-heading-vertical-rhythm-top:1.25;--ifm-h1-vertical-rhythm-bottom:1.25;--ifm-heading-vertical-rhythm-bottom:1}.markdown:after,.markdown:before{content:"";display:table}.markdown:after{clear:both}.markdown h1:first-child{--ifm-h1-font-size:3rem;margin-bottom:calc(var(--ifm-h1-vertical-rhythm-bottom)*var(--ifm-leading))}.markdown>h2{--ifm-h2-font-size:2rem;margin-top:calc(var(--ifm-h2-vertical-rhythm-top)*var(--ifm-leading))}.markdown>h3{--ifm-h3-font-size:1.5rem;margin-top:calc(var(--ifm-h3-vertical-rhythm-top)*var(--ifm-leading))}.markdown>h4,.markdown>h5,.markdown>h6{margin-top:calc(var(--ifm-heading-vertical-rhythm-top)*var(--ifm-leading))}.markdown>p,.markdown>pre,.markdown>ul,.tabList__CuJ{margin-bottom:var(--ifm-leading)}.markdown li>p{margin-top:var(--ifm-list-paragraph-margin)}.markdown li+li{margin-top:var(--ifm-list-item-margin)}ol,ul{margin:0 0 var(--ifm-list-margin);padding-left:var(--ifm-list-left-padding)}ol ol,ul ol{list-style-type:lower-roman}ol ol ol,ol ul ol,ul ol ol,ul ul ol{list-style-type:lower-alpha}table{border-collapse:collapse;display:block;margin-bottom:var(--ifm-spacing-vertical)}table thead tr{border-bottom:2px solid var(--ifm-table-border-color)}table thead,table tr:nth-child(2n){background-color:var(--ifm-table-stripe-background)}table tr{background-color:var(--ifm-table-background);border-top:var(--ifm-table-border-width) solid var(--ifm-table-border-color)}table td,table th{border:var(--ifm-table-border-width) solid var(--ifm-table-border-color);padding:var(--ifm-table-cell-padding)}table th{background-color:var(--ifm-table-head-background);color:var(--ifm-table-head-color);font-weight:var(--ifm-table-head-font-weight)}table td{color:var(--ifm-table-cell-color)}strong{font-weight:var(--ifm-font-weight-bold)}a{color:var(--ifm-link-color);text-decoration:var(--ifm-link-decoration)}a:hover{color:var(--ifm-link-hover-color);text-decoration:var(--ifm-link-hover-decoration)}.button:hover,.text--no-decoration,.text--no-decoration:hover,a:not([href]){text-decoration:none}p{margin:0 0 var(--ifm-paragraph-margin-bottom)}blockquote{border-left:var(--ifm-blockquote-border-left-width) solid var(--ifm-blockquote-border-color);box-shadow:var(--ifm-blockquote-shadow);color:var(--ifm-blockquote-color);font-size:var(--ifm-blockquote-font-size);padding:var(--ifm-blockquote-padding-vertical) var(--ifm-blockquote-padding-horizontal)}blockquote>:first-child{margin-top:0}blockquote>:last-child{margin-bottom:0}hr{background-color:var(--ifm-hr-background-color);border:0;height:var(--ifm-hr-height);margin:var(--ifm-hr-margin-vertical) 0}.shadow--lw{box-shadow:var(--ifm-global-shadow-lw)!important}.shadow--md{box-shadow:var(--ifm-global-shadow-md)!important}.shadow--tl{box-shadow:var(--ifm-global-shadow-tl)!important}.text--primary,.wordWrapButtonEnabled_EoeP .wordWrapButtonIcon_Bwma{color:var(--ifm-color-primary)}.text--secondary{color:var(--ifm-color-secondary)}.text--success{color:var(--ifm-color-success)}.text--info{color:var(--ifm-color-info)}.text--warning{color:var(--ifm-color-warning)}.text--danger{color:var(--ifm-color-danger)}.text--center{text-align:center}.text--left{text-align:left}.text--justify{text-align:justify}.text--right{text-align:right}.text--capitalize{text-transform:capitalize}.text--lowercase{text-transform:lowercase}.admonitionHeading_Gvgb,.alert__heading,.text--uppercase{text-transform:uppercase}.text--light{font-weight:var(--ifm-font-weight-light)}.text--normal{font-weight:var(--ifm-font-weight-normal)}.text--semibold{font-weight:var(--ifm-font-weight-semibold)}.text--bold{font-weight:var(--ifm-font-weight-bold)}.text--italic{font-style:italic}.text--truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text--break{word-wrap:break-word!important;word-break:break-word!important}.clean-btn{background:none;border:none;color:inherit;cursor:pointer;font-family:inherit;padding:0}.alert,.alert .close{color:var(--ifm-alert-foreground-color)}.clean-list{list-style:none;padding-left:0}.alert--primary{--ifm-alert-background-color:var(--ifm-color-primary-contrast-background);--ifm-alert-background-color-highlight:#3578e526;--ifm-alert-foreground-color:var(--ifm-color-primary-contrast-foreground);--ifm-alert-border-color:var(--ifm-color-primary-dark)}.alert--secondary{--ifm-alert-background-color:var(--ifm-color-secondary-contrast-background);--ifm-alert-background-color-highlight:#ebedf026;--ifm-alert-foreground-color:var(--ifm-color-secondary-contrast-foreground);--ifm-alert-border-color:var(--ifm-color-secondary-dark)}.alert--success{--ifm-alert-background-color:var(--ifm-color-success-contrast-background);--ifm-alert-background-color-highlight:#00a40026;--ifm-alert-foreground-color:var(--ifm-color-success-contrast-foreground);--ifm-alert-border-color:var(--ifm-color-success-dark)}.alert--info{--ifm-alert-background-color:var(--ifm-color-info-contrast-background);--ifm-alert-background-color-highlight:#54c7ec26;--ifm-alert-foreground-color:var(--ifm-color-info-contrast-foreground);--ifm-alert-border-color:var(--ifm-color-info-dark)}.alert--warning{--ifm-alert-background-color:var(--ifm-color-warning-contrast-background);--ifm-alert-background-color-highlight:#ffba0026;--ifm-alert-foreground-color:var(--ifm-color-warning-contrast-foreground);--ifm-alert-border-color:var(--ifm-color-warning-dark)}.alert--danger{--ifm-alert-background-color:var(--ifm-color-danger-contrast-background);--ifm-alert-background-color-highlight:#fa383e26;--ifm-alert-foreground-color:var(--ifm-color-danger-contrast-foreground);--ifm-alert-border-color:var(--ifm-color-danger-dark)}.alert{--ifm-code-background:var(--ifm-alert-background-color-highlight);--ifm-link-color:var(--ifm-alert-foreground-color);--ifm-link-hover-color:var(--ifm-alert-foreground-color);--ifm-link-decoration:underline;--ifm-tabs-color:var(--ifm-alert-foreground-color);--ifm-tabs-color-active:var(--ifm-alert-foreground-color);--ifm-tabs-color-active-border:var(--ifm-alert-border-color);background-color:var(--ifm-alert-background-color);border:var(--ifm-alert-border-width) solid var(--ifm-alert-border-color);border-left-width:var(--ifm-alert-border-left-width);border-radius:var(--ifm-alert-border-radius);box-shadow:var(--ifm-alert-shadow);padding:var(--ifm-alert-padding-vertical) var(--ifm-alert-padding-horizontal)}.alert__heading{align-items:center;display:flex;font:700 var(--ifm-h5-font-size)/var(--ifm-heading-line-height) var(--ifm-heading-font-family);margin-bottom:.5rem}.alert__icon{display:inline-flex;margin-right:.4em}.alert__icon svg{fill:var(--ifm-alert-foreground-color);stroke:var(--ifm-alert-foreground-color);stroke-width:0}.alert .close{margin:calc(var(--ifm-alert-padding-vertical)*-1) calc(var(--ifm-alert-padding-horizontal)*-1) 0 0;opacity:.75}.alert .close:focus,.alert .close:hover{opacity:1}.alert a{text-decoration-color:var(--ifm-alert-border-color)}.alert a:hover{text-decoration-thickness:2px}.avatar{column-gap:var(--ifm-avatar-intro-margin);display:flex}.avatar__photo{border-radius:50%;display:block;height:var(--ifm-avatar-photo-size);overflow:hidden;width:var(--ifm-avatar-photo-size)}.card--full-height,.navbar__logo img,body,html{height:100%}.avatar__photo--sm{--ifm-avatar-photo-size:2rem}.avatar__photo--lg{--ifm-avatar-photo-size:4rem}.avatar__photo--xl{--ifm-avatar-photo-size:6rem}.avatar__intro{display:flex;flex:1 1;flex-direction:column;justify-content:center;text-align:var(--ifm-avatar-intro-alignment)}.badge,.breadcrumbs__item,.breadcrumbs__link,.button,.dropdown>.navbar__link:after{display:inline-block}.avatar__name{font:700 var(--ifm-h4-font-size)/var(--ifm-heading-line-height) var(--ifm-font-family-base)}.avatar__subtitle{margin-top:.25rem}.avatar--vertical{--ifm-avatar-intro-alignment:center;--ifm-avatar-intro-margin:0.5rem;align-items:center;flex-direction:column}.badge{background-color:var(--ifm-badge-background-color);border:var(--ifm-badge-border-width) solid var(--ifm-badge-border-color);border-radius:var(--ifm-badge-border-radius);color:var(--ifm-badge-color);font-size:75%;font-weight:var(--ifm-font-weight-bold);line-height:1;padding:var(--ifm-badge-padding-vertical) var(--ifm-badge-padding-horizontal)}.badge--primary{--ifm-badge-background-color:var(--ifm-color-primary)}.badge--secondary{--ifm-badge-background-color:var(--ifm-color-secondary);color:var(--ifm-color-black)}.breadcrumbs__link,.button.button--secondary.button--outline:not(.button--active):not(:hover){color:var(--ifm-font-color-base)}.badge--success{--ifm-badge-background-color:var(--ifm-color-success)}.badge--info{--ifm-badge-background-color:var(--ifm-color-info)}.badge--warning{--ifm-badge-background-color:var(--ifm-color-warning)}.badge--danger{--ifm-badge-background-color:var(--ifm-color-danger)}.breadcrumbs{margin-bottom:0;padding-left:0}.breadcrumbs__item:not(:last-child):after{background:var(--ifm-breadcrumb-separator) center;content:" ";display:inline-block;filter:var(--ifm-breadcrumb-separator-filter);height:calc(var(--ifm-breadcrumb-separator-size)*var(--ifm-breadcrumb-size-multiplier)*var(--ifm-breadcrumb-separator-size-multiplier));margin:0 var(--ifm-breadcrumb-spacing);opacity:.5;width:calc(var(--ifm-breadcrumb-separator-size)*var(--ifm-breadcrumb-size-multiplier)*var(--ifm-breadcrumb-separator-size-multiplier))}.breadcrumbs__item--active .breadcrumbs__link{background:var(--ifm-breadcrumb-item-background-active);color:var(--ifm-breadcrumb-color-active)}.breadcrumbs__link{border-radius:var(--ifm-breadcrumb-border-radius);font-size:calc(1rem*var(--ifm-breadcrumb-size-multiplier));padding:calc(var(--ifm-breadcrumb-padding-vertical)*var(--ifm-breadcrumb-size-multiplier)) calc(var(--ifm-breadcrumb-padding-horizontal)*var(--ifm-breadcrumb-size-multiplier));transition-duration:var(--ifm-transition-fast);transition-property:background,color}.breadcrumbs__link:any-link:hover,.breadcrumbs__link:link:hover,.breadcrumbs__link:visited:hover,area[href].breadcrumbs__link:hover{background:var(--ifm-breadcrumb-item-background-active);text-decoration:none}.breadcrumbs--sm{--ifm-breadcrumb-size-multiplier:0.8}.breadcrumbs--lg{--ifm-breadcrumb-size-multiplier:1.2}.button{background-color:var(--ifm-button-background-color);border:var(--ifm-button-border-width) solid var(--ifm-button-border-color);border-radius:var(--ifm-button-border-radius);cursor:pointer;font-size:calc(.875rem*var(--ifm-button-size-multiplier));font-weight:var(--ifm-button-font-weight);line-height:1.5;padding:calc(var(--ifm-button-padding-vertical)*var(--ifm-button-size-multiplier)) calc(var(--ifm-button-padding-horizontal)*var(--ifm-button-size-multiplier));text-align:center;transition-duration:var(--ifm-button-transition-duration);transition-property:color,background,border-color;user-select:none;white-space:nowrap}.button,.button:hover{color:var(--ifm-button-color)}.button--outline{--ifm-button-color:var(--ifm-button-border-color)}.button--outline:hover{--ifm-button-background-color:var(--ifm-button-border-color)}.button--link{--ifm-button-border-color:#0000;color:var(--ifm-link-color);text-decoration:var(--ifm-link-decoration)}.button--link.button--active,.button--link:active,.button--link:hover{color:var(--ifm-link-hover-color);text-decoration:var(--ifm-link-hover-decoration)}.button.disabled,.button:disabled,.button[disabled]{opacity:.65;pointer-events:none}.button--sm{--ifm-button-size-multiplier:0.8}.button--lg{--ifm-button-size-multiplier:1.35}.button--block{display:block;width:100%}.button.button--secondary{color:var(--ifm-color-gray-900)}:where(.button--primary){--ifm-button-background-color:var(--ifm-color-primary);--ifm-button-border-color:var(--ifm-color-primary)}:where(.button--primary):not(.button--outline):hover{--ifm-button-background-color:var(--ifm-color-primary-dark);--ifm-button-border-color:var(--ifm-color-primary-dark)}.button--primary.button--active,.button--primary:active{--ifm-button-background-color:var(--ifm-color-primary-darker);--ifm-button-border-color:var(--ifm-color-primary-darker)}:where(.button--secondary){--ifm-button-background-color:var(--ifm-color-secondary);--ifm-button-border-color:var(--ifm-color-secondary)}:where(.button--secondary):not(.button--outline):hover{--ifm-button-background-color:var(--ifm-color-secondary-dark);--ifm-button-border-color:var(--ifm-color-secondary-dark)}.button--secondary.button--active,.button--secondary:active{--ifm-button-background-color:var(--ifm-color-secondary-darker);--ifm-button-border-color:var(--ifm-color-secondary-darker)}:where(.button--success){--ifm-button-background-color:var(--ifm-color-success);--ifm-button-border-color:var(--ifm-color-success)}:where(.button--success):not(.button--outline):hover{--ifm-button-background-color:var(--ifm-color-success-dark);--ifm-button-border-color:var(--ifm-color-success-dark)}.button--success.button--active,.button--success:active{--ifm-button-background-color:var(--ifm-color-success-darker);--ifm-button-border-color:var(--ifm-color-success-darker)}:where(.button--info){--ifm-button-background-color:var(--ifm-color-info);--ifm-button-border-color:var(--ifm-color-info)}:where(.button--info):not(.button--outline):hover{--ifm-button-background-color:var(--ifm-color-info-dark);--ifm-button-border-color:var(--ifm-color-info-dark)}.button--info.button--active,.button--info:active{--ifm-button-background-color:var(--ifm-color-info-darker);--ifm-button-border-color:var(--ifm-color-info-darker)}:where(.button--warning){--ifm-button-background-color:var(--ifm-color-warning);--ifm-button-border-color:var(--ifm-color-warning)}:where(.button--warning):not(.button--outline):hover{--ifm-button-background-color:var(--ifm-color-warning-dark);--ifm-button-border-color:var(--ifm-color-warning-dark)}.button--warning.button--active,.button--warning:active{--ifm-button-background-color:var(--ifm-color-warning-darker);--ifm-button-border-color:var(--ifm-color-warning-darker)}:where(.button--danger){--ifm-button-background-color:var(--ifm-color-danger);--ifm-button-border-color:var(--ifm-color-danger)}:where(.button--danger):not(.button--outline):hover{--ifm-button-background-color:var(--ifm-color-danger-dark);--ifm-button-border-color:var(--ifm-color-danger-dark)}.button--danger.button--active,.button--danger:active{--ifm-button-background-color:var(--ifm-color-danger-darker);--ifm-button-border-color:var(--ifm-color-danger-darker)}.button-group{display:inline-flex;gap:var(--ifm-button-group-spacing)}.button-group>.button:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.button-group>.button:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.button-group--block{display:flex;justify-content:stretch}.button-group--block>.button{flex-grow:1}.card{background-color:var(--ifm-card-background-color);border-radius:var(--ifm-card-border-radius);box-shadow:var(--ifm-global-shadow-lw);display:flex;flex-direction:column;overflow:hidden}.card__image{padding-top:var(--ifm-card-vertical-spacing)}.card__image:first-child{padding-top:0}.card__body,.card__footer,.card__header{padding:var(--ifm-card-vertical-spacing) var(--ifm-card-horizontal-spacing)}.card__body:not(:last-child),.card__footer:not(:last-child),.card__header:not(:last-child){padding-bottom:0}.card__body>:last-child,.card__footer>:last-child,.card__header>:last-child{margin-bottom:0}.card__footer{margin-top:auto}.table-of-contents{font-size:.8rem;margin-bottom:0;padding:var(--ifm-toc-padding-vertical) 0}.table-of-contents,.table-of-contents ul{list-style:none;padding-left:var(--ifm-toc-padding-horizontal)}.table-of-contents li{margin:var(--ifm-toc-padding-vertical) var(--ifm-toc-padding-horizontal)}.table-of-contents__left-border{border-left:1px solid var(--ifm-toc-border-color)}.table-of-contents__link{color:var(--ifm-toc-link-color);display:block}.table-of-contents__link--active,.table-of-contents__link--active code,.table-of-contents__link:hover,.table-of-contents__link:hover code{color:var(--ifm-color-primary);text-decoration:none}.close{color:var(--ifm-color-black);float:right;font-size:1.5rem;font-weight:var(--ifm-font-weight-bold);line-height:1;opacity:.5;padding:1rem;transition:opacity var(--ifm-transition-fast) var(--ifm-transition-timing-default)}.close:hover{opacity:.7}.close:focus,.theme-code-block-highlighted-line .codeLineNumber_Tfdd:before{opacity:.8}.dropdown{display:inline-flex;font-weight:var(--ifm-dropdown-font-weight);position:relative;vertical-align:top}.dropdown--hoverable:hover .dropdown__menu,.dropdown--show .dropdown__menu{opacity:1;pointer-events:all;transform:translateY(-1px);visibility:visible}#nprogress,.dropdown__menu,.navbar__item.dropdown .navbar__link:not([href]){pointer-events:none}.dropdown--right .dropdown__menu{left:inherit;right:0}.dropdown--nocaret .navbar__link:after{content:none!important}.dropdown__menu{background-color:var(--ifm-dropdown-background-color);border-radius:var(--ifm-global-radius);box-shadow:var(--ifm-global-shadow-md);left:0;list-style:none;max-height:80vh;min-width:10rem;opacity:0;overflow-y:auto;padding:.5rem;position:absolute;top:calc(100% - var(--ifm-navbar-item-padding-vertical) + .3rem);transform:translateY(-.625rem);transition-duration:var(--ifm-transition-fast);transition-property:opacity,transform,visibility;transition-timing-function:var(--ifm-transition-timing-default);visibility:hidden;z-index:var(--ifm-z-index-dropdown)}.menu__caret,.menu__link,.menu__list-item-collapsible{border-radius:.25rem;transition:background var(--ifm-transition-fast) var(--ifm-transition-timing-default)}.dropdown__link{border-radius:.25rem;color:var(--ifm-dropdown-link-color);display:block;font-size:.875rem;margin-top:.2rem;padding:.25rem .5rem;white-space:nowrap}.dropdown__link--active,.dropdown__link:hover{background-color:var(--ifm-dropdown-hover-background-color);color:var(--ifm-dropdown-link-color);text-decoration:none}.dropdown__link--active,.dropdown__link--active:hover{--ifm-dropdown-link-color:var(--ifm-link-color)}.dropdown>.navbar__link:after{border-color:currentcolor #0000;border-style:solid;border-width:.4em .4em 0;content:"";margin-left:.3em;position:relative;top:2px;transform:translateY(-50%)}.footer{background-color:var(--ifm-footer-background-color);color:var(--ifm-footer-color);padding:var(--ifm-footer-padding-vertical) var(--ifm-footer-padding-horizontal)}.footer--dark{--ifm-footer-background-color:#303846;--ifm-footer-color:var(--ifm-footer-link-color);--ifm-footer-link-color:var(--ifm-color-secondary);--ifm-footer-title-color:var(--ifm-color-white)}.footer__links{margin-bottom:1rem}.footer__link-item{color:var(--ifm-footer-link-color);line-height:2}.footer__link-item:hover{color:var(--ifm-footer-link-hover-color)}.footer__link-separator{margin:0 var(--ifm-footer-link-horizontal-spacing)}.footer__logo{margin-top:1rem;max-width:var(--ifm-footer-logo-max-width)}.footer__title{color:var(--ifm-footer-title-color);font:700 var(--ifm-h4-font-size)/var(--ifm-heading-line-height) var(--ifm-font-family-base);margin-bottom:var(--ifm-heading-margin-bottom)}.menu,.navbar__link{font-weight:var(--ifm-font-weight-semibold)}.docItemContainer_Djhp article>:first-child,.docItemContainer_Djhp header+*,.footer__item{margin-top:0}.admonitionContent_BuS1>:last-child,.cardContainer_fWXF :last-child,.collapsibleContent_i85q p:last-child,.details_lb9f>summary>p:last-child,.footer__items,.tabItem_Ymn6>:last-child{margin-bottom:0}.codeBlockStandalone_MEMb,[type=checkbox]{padding:0}.hero{align-items:center;background-color:var(--ifm-hero-background-color);color:var(--ifm-hero-text-color);display:flex;padding:4rem 2rem}.hero--primary{--ifm-hero-background-color:var(--ifm-color-primary);--ifm-hero-text-color:var(--ifm-font-color-base-inverse)}.hero--dark{--ifm-hero-background-color:#303846;--ifm-hero-text-color:var(--ifm-color-white)}.hero__title{font-size:3rem}.hero__subtitle{font-size:1.5rem}.menu__list{list-style:none;margin:0;padding-left:0}.menu__caret,.menu__link{padding:var(--ifm-menu-link-padding-vertical) var(--ifm-menu-link-padding-horizontal)}.menu__list .menu__list{flex:0 0 100%;margin-top:.25rem;padding-left:var(--ifm-menu-link-padding-horizontal)}.menu__list-item:not(:first-child){margin-top:.25rem}.menu__list-item--collapsed .menu__list{height:0;overflow:hidden}.details_lb9f[data-collapsed=false].isBrowser_bmU9>summary:before,.details_lb9f[open]:not(.isBrowser_bmU9)>summary:before,.menu__list-item--collapsed .menu__caret:before,.menu__list-item--collapsed .menu__link--sublist:after{transform:rotate(90deg)}.menu__list-item-collapsible{display:flex;flex-wrap:wrap;position:relative}.menu__caret:hover,.menu__link:hover,.menu__list-item-collapsible--active,.menu__list-item-collapsible:hover{background:var(--ifm-menu-color-background-hover)}.menu__list-item-collapsible .menu__link--active,.menu__list-item-collapsible .menu__link:hover{background:none!important}.menu__caret,.menu__link{align-items:center;display:flex}.menu__link{color:var(--ifm-menu-color);flex:1;line-height:1.25}.menu__link:hover{color:var(--ifm-menu-color);text-decoration:none}.menu__caret:before,.menu__link--sublist-caret:after{content:"";height:1.25rem;transform:rotate(180deg);transition:transform var(--ifm-transition-fast) linear;width:1.25rem;filter:var(--ifm-menu-link-sublist-icon-filter)}.menu__link--sublist-caret:after{background:var(--ifm-menu-link-sublist-icon) 50%/2rem 2rem;margin-left:auto;min-width:1.25rem}.menu__link--active,.menu__link--active:hover{color:var(--ifm-menu-color-active)}.navbar__brand,.navbar__link{color:var(--ifm-navbar-link-color)}.menu__link--active:not(.menu__link--sublist){background-color:var(--ifm-menu-color-background-active)}.menu__caret:before{background:var(--ifm-menu-link-sublist-icon) 50%/2rem 2rem}.navbar--dark,html[data-theme=dark]{--ifm-menu-link-sublist-icon-filter:invert(100%) sepia(94%) saturate(17%) hue-rotate(223deg) brightness(104%) contrast(98%)}.navbar{background-color:var(--ifm-navbar-background-color);box-shadow:var(--ifm-navbar-shadow);height:var(--ifm-navbar-height);padding:var(--ifm-navbar-padding-vertical) var(--ifm-navbar-padding-horizontal)}.navbar,.navbar>.container,.navbar>.container-fluid{display:flex}.navbar--fixed-top{position:sticky;top:0;z-index:var(--ifm-z-index-fixed)}.navbar-sidebar,.navbar-sidebar__backdrop{bottom:0;opacity:0;position:fixed;transition-duration:var(--ifm-transition-fast);transition-timing-function:ease-in-out;left:0;top:0;visibility:hidden}.navbar__inner{display:flex;flex-wrap:wrap;justify-content:space-between;width:100%}.navbar__brand{align-items:center;display:flex;min-width:0}.navbar__brand:hover{color:var(--ifm-navbar-link-hover-color);text-decoration:none}.announcementBarContent_xLdY,.navbar__title{flex:1 1 auto}.navbar__toggle{display:none;margin-right:.5rem}.navbar__logo{flex:0 0 auto;height:2rem;margin-right:.5rem}.navbar__items{align-items:center;display:flex;flex:1;min-width:0}.navbar__items--center{flex:0 0 auto}.navbar__items--center .navbar__brand{margin:0}.navbar__items--center+.navbar__items--right{flex:1}.navbar__items--right{flex:0 0 auto;justify-content:flex-end}.navbar__items--right>:last-child{padding-right:0}.navbar__item{display:inline-block;padding:var(--ifm-navbar-item-padding-vertical) var(--ifm-navbar-item-padding-horizontal)}.navbar__link--active,.navbar__link:hover{color:var(--ifm-navbar-link-hover-color);text-decoration:none}.navbar--dark,.navbar--primary{--ifm-menu-color:var(--ifm-color-gray-300);--ifm-navbar-link-color:var(--ifm-color-gray-100);--ifm-navbar-search-input-background-color:#ffffff1a;--ifm-navbar-search-input-placeholder-color:#ffffff80;color:var(--ifm-color-white)}.navbar--dark{--ifm-navbar-background-color:#242526;--ifm-menu-color-background-active:#ffffff0d;--ifm-navbar-search-input-color:var(--ifm-color-white)}.navbar--primary{--ifm-navbar-background-color:var(--ifm-color-primary);--ifm-navbar-link-hover-color:var(--ifm-color-white);--ifm-menu-color-active:var(--ifm-color-white);--ifm-navbar-search-input-color:var(--ifm-color-emphasis-500)}.navbar__search-input{-webkit-appearance:none;appearance:none;background:var(--ifm-navbar-search-input-background-color) var(--ifm-navbar-search-input-icon) no-repeat .75rem center/1rem 1rem;border:none;border-radius:2rem;color:var(--ifm-navbar-search-input-color);cursor:text;display:inline-block;font-size:.9rem;height:2rem;padding:0 .5rem 0 2.25rem;width:12.5rem}.navbar__search-input::placeholder{color:var(--ifm-navbar-search-input-placeholder-color)}.navbar-sidebar{background-color:var(--ifm-navbar-background-color);box-shadow:var(--ifm-global-shadow-md);transform:translate3d(-100%,0,0);transition-property:opacity,visibility,transform;width:var(--ifm-navbar-sidebar-width)}.navbar-sidebar--show .navbar-sidebar,.navbar-sidebar__items{transform:translateZ(0)}.navbar-sidebar--show .navbar-sidebar,.navbar-sidebar--show .navbar-sidebar__backdrop{opacity:1;visibility:visible}.navbar-sidebar__backdrop{background-color:#0009;right:0;transition-property:opacity,visibility}.navbar-sidebar__brand{align-items:center;box-shadow:var(--ifm-navbar-shadow);display:flex;flex:1;height:var(--ifm-navbar-height);padding:var(--ifm-navbar-padding-vertical) var(--ifm-navbar-padding-horizontal)}.navbar-sidebar__items{display:flex;height:calc(100% - var(--ifm-navbar-height));transition:transform var(--ifm-transition-fast) ease-in-out}.navbar-sidebar__items--show-secondary{transform:translate3d(calc((var(--ifm-navbar-sidebar-width))*-1),0,0)}.navbar-sidebar__item{flex-shrink:0;padding:.5rem;width:calc(var(--ifm-navbar-sidebar-width))}.navbar-sidebar__back{background:var(--ifm-menu-color-background-active);font-size:15px;font-weight:var(--ifm-button-font-weight);margin:0 0 .2rem -.5rem;padding:.6rem 1.5rem;position:relative;text-align:left;top:-.5rem;width:calc(100% + 1rem)}.navbar-sidebar__close{display:flex;margin-left:auto}.pagination{column-gap:var(--ifm-pagination-page-spacing);display:flex;font-size:var(--ifm-pagination-font-size);padding-left:0}.pagination--sm{--ifm-pagination-font-size:0.8rem;--ifm-pagination-padding-horizontal:0.8rem;--ifm-pagination-padding-vertical:0.2rem}.pagination--lg{--ifm-pagination-font-size:1.2rem;--ifm-pagination-padding-horizontal:1.2rem;--ifm-pagination-padding-vertical:0.3rem}.pagination__item{display:inline-flex}.pagination__item>span{padding:var(--ifm-pagination-padding-vertical)}.pagination__item--active .pagination__link{color:var(--ifm-pagination-color-active)}.pagination__item--active .pagination__link,.pagination__item:not(.pagination__item--active):hover .pagination__link{background:var(--ifm-pagination-item-active-background)}.pagination__item--disabled,.pagination__item[disabled]{opacity:.25;pointer-events:none}.pagination__link{border-radius:var(--ifm-pagination-border-radius);color:var(--ifm-font-color-base);display:inline-block;padding:var(--ifm-pagination-padding-vertical) var(--ifm-pagination-padding-horizontal);transition:background var(--ifm-transition-fast) var(--ifm-transition-timing-default)}.pagination__link:hover{text-decoration:none}.pagination-nav{grid-gap:var(--ifm-spacing-horizontal);display:grid;gap:var(--ifm-spacing-horizontal);grid-template-columns:repeat(2,1fr)}.pagination-nav__link{border:1px solid var(--ifm-color-emphasis-300);border-radius:var(--ifm-pagination-nav-border-radius);display:block;height:100%;line-height:var(--ifm-heading-line-height);padding:var(--ifm-global-spacing);transition:border-color var(--ifm-transition-fast) var(--ifm-transition-timing-default)}.pagination-nav__link:hover{border-color:var(--ifm-pagination-nav-color-hover);text-decoration:none}.pagination-nav__link--next{grid-column:2/3;text-align:right}.pagination-nav__label{font-size:var(--ifm-h4-font-size);font-weight:var(--ifm-heading-font-weight);word-break:break-word}.pagination-nav__link--prev .pagination-nav__label:before{content:"« "}.pagination-nav__link--next .pagination-nav__label:after{content:" »"}.pagination-nav__sublabel{color:var(--ifm-color-content-secondary);font-size:var(--ifm-h5-font-size);font-weight:var(--ifm-font-weight-semibold);margin-bottom:.25rem}.pills__item,.tabs{font-weight:var(--ifm-font-weight-bold)}.pills{display:flex;gap:var(--ifm-pills-spacing);padding-left:0}.pills__item{border-radius:.5rem;cursor:pointer;display:inline-block;padding:.25rem 1rem;transition:background var(--ifm-transition-fast) var(--ifm-transition-timing-default)}.tabs,:not(.containsTaskList_mC6p>li)>.containsTaskList_mC6p{padding-left:0}.pills__item--active{color:var(--ifm-pills-color-active)}.pills__item--active,.pills__item:not(.pills__item--active):hover{background:var(--ifm-pills-color-background-active)}.pills--block{justify-content:stretch}.pills--block .pills__item{flex-grow:1;text-align:center}.tabs{color:var(--ifm-tabs-color);display:flex;margin-bottom:0;overflow-x:auto}.tabs__item{border-bottom:3px solid #0000;border-radius:var(--ifm-global-radius);cursor:pointer;display:inline-flex;padding:var(--ifm-tabs-padding-vertical) var(--ifm-tabs-padding-horizontal);transition:background-color var(--ifm-transition-fast) var(--ifm-transition-timing-default)}.tabs__item--active{border-bottom-color:var(--ifm-tabs-color-active-border);border-bottom-left-radius:0;border-bottom-right-radius:0;color:var(--ifm-tabs-color-active)}.tabs__item:hover{background-color:var(--ifm-hover-overlay)}.tabs--block{justify-content:stretch}.tabs--block .tabs__item{flex-grow:1;justify-content:center}html[data-theme=dark]{--ifm-color-scheme:dark;--ifm-color-emphasis-0:var(--ifm-color-gray-1000);--ifm-color-emphasis-100:var(--ifm-color-gray-900);--ifm-color-emphasis-200:var(--ifm-color-gray-800);--ifm-color-emphasis-300:var(--ifm-color-gray-700);--ifm-color-emphasis-400:var(--ifm-color-gray-600);--ifm-color-emphasis-600:var(--ifm-color-gray-400);--ifm-color-emphasis-700:var(--ifm-color-gray-300);--ifm-color-emphasis-800:var(--ifm-color-gray-200);--ifm-color-emphasis-900:var(--ifm-color-gray-100);--ifm-color-emphasis-1000:var(--ifm-color-gray-0);--ifm-background-color:#1b1b1d;--ifm-background-surface-color:#242526;--ifm-hover-overlay:#ffffff0d;--ifm-color-content:#e3e3e3;--ifm-color-content-secondary:#fff;--ifm-breadcrumb-separator-filter:invert(64%) sepia(11%) saturate(0%) hue-rotate(149deg) brightness(99%) contrast(95%);--ifm-code-background:#ffffff1a;--ifm-scrollbar-track-background-color:#444;--ifm-scrollbar-thumb-background-color:#686868;--ifm-scrollbar-thumb-hover-background-color:#7a7a7a;--ifm-table-stripe-background:#ffffff12;--ifm-toc-border-color:var(--ifm-color-emphasis-200);--ifm-color-primary-contrast-background:#102445;--ifm-color-primary-contrast-foreground:#ebf2fc;--ifm-color-secondary-contrast-background:#474748;--ifm-color-secondary-contrast-foreground:#fdfdfe;--ifm-color-success-contrast-background:#003100;--ifm-color-success-contrast-foreground:#e6f6e6;--ifm-color-info-contrast-background:#193c47;--ifm-color-info-contrast-foreground:#eef9fd;--ifm-color-warning-contrast-background:#4d3800;--ifm-color-warning-contrast-foreground:#fff8e6;--ifm-color-danger-contrast-background:#4b1113;--ifm-color-danger-contrast-foreground:#ffebec;--docsearch-text-color:#f5f6f7;--docsearch-container-background:#090a11cc;--docsearch-modal-background:#15172a;--docsearch-modal-shadow:inset 1px 1px 0 0 #2c2e40,0 3px 8px 0 #000309;--docsearch-searchbox-background:#090a11;--docsearch-searchbox-focus-background:#000;--docsearch-hit-color:#bec3c9;--docsearch-hit-shadow:none;--docsearch-hit-background:#090a11;--docsearch-key-gradient:linear-gradient(-26.5deg,#565872,#31355b);--docsearch-key-shadow:inset 0 -2px 0 0 #282d55,inset 0 0 1px 1px #51577d,0 2px 2px 0 #0304094d;--docsearch-footer-background:#1e2136;--docsearch-footer-shadow:inset 0 1px 0 0 #494c6a80,0 -4px 8px 0 #0003;--docsearch-logo-color:#fff;--docsearch-muted-color:#7f8497}#nprogress .bar{background:var(--docusaurus-progress-bar-color);height:2px;left:0;position:fixed;top:0;width:100%;z-index:1031}#nprogress .peg{box-shadow:0 0 10px var(--docusaurus-progress-bar-color),0 0 5px var(--docusaurus-progress-bar-color);height:100%;opacity:1;position:absolute;right:0;transform:rotate(3deg) translateY(-4px);width:100px}[data-theme=dark]{--ifm-color-primary:#4299f5;--ifm-color-primary-dark:#2489f3;--ifm-color-primary-darker:#1681f3;--ifm-color-primary-darkest:#0b6acf;--ifm-color-primary-light:#60a9f7;--ifm-color-primary-lighter:#6eb1f7;--ifm-color-primary-lightest:#9bc9fa;--docusaurus-highlighted-code-line-bg:#414458!important;--code-display-color:#21222c;--code-display-color-background:#242530;--inversion-percentage:100%;--chip-background:#494c4f;--chip-background-hover:#424242;--chip-text:#e0e0e0;--chip-icon-color:#e0e0e0;--ifm-navbar-background-color:#181e25!important;--ifm-background-color:#101418!important}.homepage{width:100%}.navbar__brand{margin-left:30px;margin-right:30px}.custom--table{display:inline-table;width:100%!important}#__docusaurus-base-url-issue-banner-container,.docSidebarContainer_YfHR,.navbarSearchContainer_Bca1:not(:has(>*)),.sidebar--item__hidden,.sidebarLogo_isFc,.themedComponent_mlkZ,[data-theme=dark] .lightToggleIcon_pyhR,[data-theme=light] .darkToggleIcon_wfgR,html[data-announcement-bar-initially-dismissed=true] .announcementBar_mb4j{display:none}.custom--table td{padding:5px 7px 5px 8px}.MuiChip-root{text-decoration:none!important}.clean-btn:hover{color:var(--clean-hover);transition:color var(--ifm-transition-fast)}#script-container{margin:0 10% 5%;max-width:90%}body:not(.navigation-with-keyboard) :not(input):focus{outline:0}.skipToContent_fXgn{background-color:var(--ifm-background-surface-color);color:var(--ifm-color-emphasis-900);left:100%;padding:calc(var(--ifm-global-spacing)/2) var(--ifm-global-spacing);position:fixed;top:1rem;z-index:calc(var(--ifm-z-index-fixed) + 1)}.skipToContent_fXgn:focus{box-shadow:var(--ifm-global-shadow-md);left:1rem}.closeButton_CVFx{line-height:0;padding:0}.content_knG7{font-size:85%;padding:5px 0;text-align:center}.content_knG7 a{color:inherit;text-decoration:underline}.DocSearch-Container a,.tag_zVej:hover{text-decoration:none}.announcementBar_mb4j{align-items:center;background-color:var(--ifm-color-white);border-bottom:1px solid var(--ifm-color-emphasis-100);color:var(--ifm-color-black);display:flex;height:var(--docusaurus-announcement-bar-height)}.announcementBarPlaceholder_vyr4{flex:0 0 10px}.announcementBarClose_gvF7{align-self:stretch;flex:0 0 30px}.toggle_vylO{height:2rem;width:2rem}.toggleButton_gllP{align-items:center;border-radius:50%;display:flex;height:100%;justify-content:center;transition:background var(--ifm-transition-fast);width:100%}.toggleButton_gllP:hover{background:var(--ifm-color-emphasis-200)}.toggleButtonDisabled_aARS{cursor:not-allowed}.darkNavbarColorModeToggle_X3D1:hover{background:var(--ifm-color-gray-800)}[data-theme=dark] .themedComponent--dark_xIcU,[data-theme=light] .themedComponent--light_NVdE,html:not([data-theme]) .themedComponent--light_NVdE{display:initial}.iconExternalLink_nPIU{margin-left:.3rem}.iconLanguage_nlXk{margin-right:5px;vertical-align:text-bottom}.navbarHideable_m1mJ{transition:transform var(--ifm-transition-fast) ease}.navbarHidden_jGov{transform:translate3d(0,calc(-100% - 2px),0)}.errorBoundaryError_a6uf{color:red;white-space:pre-wrap}.errorBoundaryFallback_VBag{color:red;padding:.55rem}.footerLogoLink_BH7S{opacity:.5;transition:opacity var(--ifm-transition-fast) var(--ifm-transition-timing-default)}.footerLogoLink_BH7S:hover,.hash-link:focus,:hover>.hash-link{opacity:1}.anchorWithStickyNavbar_LWe7{scroll-margin-top:calc(var(--ifm-navbar-height) + .5rem)}.anchorWithHideOnScrollNavbar_WYt5{scroll-margin-top:.5rem}.hash-link{opacity:0;padding-left:.5rem;transition:opacity var(--ifm-transition-fast);user-select:none}.hash-link:before{content:"#"}.mainWrapper_z2l0{display:flex;flex:1 0 auto;flex-direction:column}.docusaurus-mt-lg{margin-top:3rem}#__docusaurus{display:flex;flex-direction:column;min-height:100%}.cardContainer_fWXF{--ifm-link-color:var(--ifm-color-emphasis-800);--ifm-link-hover-color:var(--ifm-color-emphasis-700);--ifm-link-hover-decoration:none;border:1px solid var(--ifm-color-emphasis-200);box-shadow:0 1.5px 3px 0 #00000026;transition:all var(--ifm-transition-fast) ease;transition-property:border,box-shadow}.cardContainer_fWXF:hover{border-color:var(--ifm-color-primary);box-shadow:0 3px 6px 0 #0003}.cardTitle_rnsV{font-size:1.2rem}.cardDescription_PWke{font-size:.8rem}.iconEdit_Z9Sw{margin-right:.3em;vertical-align:sub}.tag_zVej{border:1px solid var(--docusaurus-tag-list-border);transition:border var(--ifm-transition-fast)}.tag_zVej:hover{--docusaurus-tag-list-border:var(--ifm-link-color)}.tagRegular_sFm0{border-radius:var(--ifm-global-radius);font-size:90%;padding:.2rem .5rem .3rem}.tagWithCount_h2kH{align-items:center;border-left:0;display:flex;padding:0 .5rem 0 1rem;position:relative}.tagWithCount_h2kH:after,.tagWithCount_h2kH:before{border:1px solid var(--docusaurus-tag-list-border);content:"";position:absolute;top:50%;transition:inherit}.tagWithCount_h2kH:before{border-bottom:0;border-right:0;height:1.18rem;right:100%;transform:translate(50%,-50%) rotate(-45deg);width:1.18rem}.tagWithCount_h2kH:after{border-radius:50%;height:.5rem;left:0;transform:translateY(-50%);width:.5rem}.tagWithCount_h2kH span{background:var(--ifm-color-secondary);border-radius:var(--ifm-global-radius);color:var(--ifm-color-black);font-size:.7rem;line-height:1.2;margin-left:.3rem;padding:.1rem .4rem}.tags_jXut{display:inline}.tag_QGVx{display:inline-block;margin:0 .4rem .5rem 0}.lastUpdated_vwxv{font-size:smaller;font-style:italic;margin-top:.2rem}.tocCollapsibleButton_TO0P{align-items:center;display:flex;font-size:inherit;justify-content:space-between;padding:.4rem .8rem;width:100%}.tocCollapsibleButton_TO0P:after{background:var(--ifm-menu-link-sublist-icon) 50% 50%/2rem 2rem no-repeat;content:"";filter:var(--ifm-menu-link-sublist-icon-filter);height:1.25rem;transform:rotate(180deg);transition:transform var(--ifm-transition-fast);width:1.25rem}.tocCollapsibleButtonExpanded_MG3E:after,.tocCollapsibleExpanded_sAul{transform:none}.tocCollapsible_ETCw{background-color:var(--ifm-menu-color-background-active);border-radius:var(--ifm-global-radius);margin:1rem 0}.tocCollapsibleContent_vkbj>ul{border-left:none;border-top:1px solid var(--ifm-color-emphasis-300);font-size:15px;padding:.2rem 0}.tocCollapsibleContent_vkbj ul li{margin:.4rem .8rem}.tocCollapsibleContent_vkbj a{display:block}.searchQueryInput_u2C7,.searchVersionInput_m0Ui{background:var(--docsearch-searchbox-focus-background);border:2px solid var(--ifm-toc-border-color);border-radius:var(--ifm-global-radius);color:var(--docsearch-text-color);font:var(--ifm-font-size-base) var(--ifm-font-family-base);margin-bottom:.5rem;padding:.8rem;transition:border var(--ifm-transition-fast) ease;width:100%}.searchQueryInput_u2C7:focus,.searchVersionInput_m0Ui:focus{border-color:var(--docsearch-primary-color);outline:0}.searchQueryInput_u2C7::placeholder{color:var(--docsearch-muted-color)}.searchResultsColumn_JPFH{font-size:.9rem;font-weight:700}.algoliaLogo_rT1R{max-width:150px}.algoliaLogoPathFill_WdUC{fill:var(--ifm-font-color-base)}.searchResultItem_Tv2o{border-bottom:1px solid var(--ifm-toc-border-color);padding:1rem 0}.searchResultItemHeading_KbCB{font-weight:400;margin-bottom:0}.searchResultItemPath_lhe1{--ifm-breadcrumb-separator-size-multiplier:1;color:var(--ifm-color-content-secondary);font-size:.8rem}.searchResultItemSummary_AEaO{font-style:italic;margin:.5rem 0 0}.loadingSpinner_XVxU{animation:1s linear infinite a;border:.4em solid #eee;border-radius:50%;border-top:.4em solid var(--ifm-color-primary);height:3rem;margin:0 auto;width:3rem}@keyframes a{to{transform:rotate(1turn)}}.loader_vvXV{margin-top:2rem}.search-result-match{background:#ffd78e40;color:var(--docsearch-hit-color);padding:.09em 0}.backToTopButton_sjWU{background-color:var(--ifm-color-emphasis-200);border-radius:50%;bottom:1.3rem;box-shadow:var(--ifm-global-shadow-lw);height:3rem;opacity:0;position:fixed;right:1.3rem;transform:scale(0);transition:all var(--ifm-transition-fast) var(--ifm-transition-timing-default);visibility:hidden;width:3rem;z-index:calc(var(--ifm-z-index-fixed) - 1)}.backToTopButton_sjWU:after{background-color:var(--ifm-color-emphasis-1000);content:" ";display:inline-block;height:100%;-webkit-mask:var(--ifm-menu-link-sublist-icon) 50%/2rem 2rem no-repeat;mask:var(--ifm-menu-link-sublist-icon) 50%/2rem 2rem no-repeat;width:100%}.backToTopButtonShow_xfvO{opacity:1;transform:scale(1);visibility:visible}[data-theme=dark]:root{--docusaurus-collapse-button-bg:#ffffff0d;--docusaurus-collapse-button-bg-hover:#ffffff1a}.collapseSidebarButton_PEFL{display:none;margin:0}.docMainContainer_TBSr,.docRoot_UBD9{display:flex;width:100%}.docsWrapper_hBAB{display:flex;flex:1 0 auto}.buttons_AeoN,.features_t9lD{align-items:center;display:flex}.features_t9lD{padding:2rem 0;width:100%}.featureSvg_GfXr{height:200px;width:200px}.heroBanner_qdFl{display:flex;overflow:hidden;padding:4rem 0;position:relative}.test_C9V2{display:grid;grid-template-columns:1fr 3fr}.buttons_AeoN{justify-content:center}.DocSearch-Button,.DocSearch-Button-Container{align-items:center;display:flex}.DocSearch-Button{background:var(--docsearch-searchbox-background);border:0;border-radius:40px;color:var(--docsearch-muted-color);cursor:pointer;font-weight:500;height:36px;justify-content:space-between;padding:0 8px;-webkit-user-select:none;user-select:none}.DocSearch-Button:active,.DocSearch-Button:focus,.DocSearch-Button:hover{background:var(--docsearch-searchbox-focus-background);box-shadow:var(--docsearch-searchbox-shadow);color:var(--docsearch-text-color);outline:0}.DocSearch-Search-Icon{stroke-width:1.6}.DocSearch-Hit-Tree,.DocSearch-Hit-action,.DocSearch-Hit-icon,.DocSearch-Reset{stroke-width:var(--docsearch-icon-stroke-width)}.DocSearch-Button .DocSearch-Search-Icon{color:var(--docsearch-text-color)}.DocSearch-Button-Placeholder{font-size:1rem;padding:0 12px 0 6px}.DocSearch-Input,.DocSearch-Link{-webkit-appearance:none;font:inherit}.DocSearch-Button-Keys{display:flex;min-width:calc(40px + .8em)}.DocSearch-Button-Key{align-items:center;background:var(--docsearch-key-gradient);border:0;border-radius:3px;box-shadow:var(--docsearch-key-shadow);color:var(--docsearch-muted-color);display:flex;height:18px;justify-content:center;margin-right:.4em;padding:0 0 2px;position:relative;top:-1px;width:20px}.DocSearch--active{overflow:hidden!important}.DocSearch-Container{background-color:var(--docsearch-container-background);height:100vh;left:0;position:fixed;top:0;width:100vw;z-index:200}.DocSearch-Link{appearance:none;background:none;border:0;color:var(--docsearch-highlight-color);cursor:pointer;margin:0;padding:0}.DocSearch-Modal{background:var(--docsearch-modal-background);border-radius:6px;box-shadow:var(--docsearch-modal-shadow);flex-direction:column;margin:60px auto auto;max-width:var(--docsearch-modal-width);position:relative}.DocSearch-SearchBar{display:flex;padding:var(--docsearch-spacing) var(--docsearch-spacing) 0}.DocSearch-Form{align-items:center;background:var(--docsearch-searchbox-focus-background);border-radius:4px;box-shadow:var(--docsearch-searchbox-shadow);display:flex;height:var(--docsearch-searchbox-height);margin:0;padding:0 var(--docsearch-spacing);position:relative;width:100%}.DocSearch-Input{appearance:none;background:#0000;border:0;color:var(--docsearch-text-color);flex:1;font-size:1.2em;height:100%;outline:0;padding:0 0 0 8px;width:80%}.DocSearch-Hit-action-button,.DocSearch-Reset{-webkit-appearance:none;border:0;cursor:pointer}.DocSearch-Input::placeholder{color:var(--docsearch-muted-color);opacity:1}.DocSearch-Input::-webkit-search-cancel-button,.DocSearch-Input::-webkit-search-decoration,.DocSearch-Input::-webkit-search-results-button,.DocSearch-Input::-webkit-search-results-decoration{display:none}.DocSearch-LoadingIndicator,.DocSearch-MagnifierLabel,.DocSearch-Reset{margin:0;padding:0}.DocSearch-Container--Stalled .DocSearch-LoadingIndicator,.DocSearch-MagnifierLabel,.DocSearch-Reset{align-items:center;color:var(--docsearch-highlight-color);display:flex;justify-content:center}.DocSearch-Cancel,.DocSearch-Container--Stalled .DocSearch-MagnifierLabel,.DocSearch-LoadingIndicator,.DocSearch-Reset[hidden]{display:none}.DocSearch-Reset{animation:.1s ease-in forwards b;appearance:none;background:none;border-radius:50%;color:var(--docsearch-icon-color);padding:2px;right:0}.DocSearch-Help,.DocSearch-HitsFooter,.DocSearch-Label{color:var(--docsearch-muted-color)}.DocSearch-Reset:hover{color:var(--docsearch-highlight-color)}.DocSearch-LoadingIndicator svg,.DocSearch-MagnifierLabel svg{height:24px;width:24px}.DocSearch-Dropdown{max-height:calc(var(--docsearch-modal-height) - var(--docsearch-searchbox-height) - var(--docsearch-spacing) - var(--docsearch-footer-height));min-height:var(--docsearch-spacing);overflow-y:auto;overflow-y:overlay;padding:0 var(--docsearch-spacing);scrollbar-color:var(--docsearch-muted-color) var(--docsearch-modal-background);scrollbar-width:thin}.DocSearch-Dropdown::-webkit-scrollbar{width:12px}.DocSearch-Dropdown::-webkit-scrollbar-track{background:#0000}.DocSearch-Dropdown::-webkit-scrollbar-thumb{background-color:var(--docsearch-muted-color);border:3px solid var(--docsearch-modal-background);border-radius:20px}.DocSearch-Dropdown ul{list-style:none;margin:0;padding:0}.DocSearch-Label{font-size:.75em;line-height:1.6em}.DocSearch-Help{font-size:.9em;margin:0;-webkit-user-select:none;user-select:none}.DocSearch-Title{font-size:1.2em}.DocSearch-Logo a{display:flex}.DocSearch-Logo svg{color:var(--docsearch-logo-color);margin-left:8px}.DocSearch-Hits:last-of-type{margin-bottom:24px}.DocSearch-Hits mark{background:none;color:var(--docsearch-highlight-color)}.DocSearch-HitsFooter{display:flex;font-size:.85em;justify-content:center;margin-bottom:var(--docsearch-spacing);padding:var(--docsearch-spacing)}.DocSearch-HitsFooter a{border-bottom:1px solid;color:inherit}.DocSearch-Hit{border-radius:4px;display:flex;padding-bottom:4px;position:relative}.DocSearch-Hit--deleting{opacity:0;transition:.25s linear}.DocSearch-Hit--favoriting{transform:scale(0);transform-origin:top center;transition:.25s linear .25s}.DocSearch-Hit a{background:var(--docsearch-hit-background);border-radius:4px;box-shadow:var(--docsearch-hit-shadow);display:block;padding-left:var(--docsearch-spacing);width:100%}.DocSearch-Hit-source{background:var(--docsearch-modal-background);color:var(--docsearch-highlight-color);font-size:.85em;font-weight:600;line-height:32px;margin:0 -4px;padding:8px 4px 0;position:sticky;top:0;z-index:10}.DocSearch-Hit-Tree{color:var(--docsearch-muted-color);height:var(--docsearch-hit-height);opacity:.5;width:24px}.DocSearch-Hit[aria-selected=true] a{background-color:var(--docsearch-highlight-color)}.DocSearch-Hit[aria-selected=true] mark{text-decoration:underline}.DocSearch-Hit-Container{align-items:center;color:var(--docsearch-hit-color);display:flex;flex-direction:row;height:var(--docsearch-hit-height);padding:0 var(--docsearch-spacing) 0 0}.DocSearch-Hit-icon{height:20px;width:20px}.DocSearch-Hit-action,.DocSearch-Hit-icon{color:var(--docsearch-muted-color)}.DocSearch-Hit-action{align-items:center;display:flex;height:22px;width:22px}.DocSearch-Hit-action svg{display:block;height:18px;width:18px}.DocSearch-Hit-action+.DocSearch-Hit-action{margin-left:6px}.DocSearch-Hit-action-button{appearance:none;background:none;border-radius:50%;color:inherit;padding:2px}svg.DocSearch-Hit-Select-Icon{display:none}.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-Select-Icon{display:block}.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{background:#0003;transition:background-color .1s ease-in}.DocSearch-Hit-action-button:focus path,.DocSearch-Hit-action-button:hover path{fill:#fff}.DocSearch-Hit-content-wrapper{display:flex;flex:1 1 auto;flex-direction:column;font-weight:500;justify-content:center;line-height:1.2em;margin:0 8px;overflow-x:hidden;position:relative;text-overflow:ellipsis;white-space:nowrap;width:80%}.DocSearch-Hit-title{font-size:.9em}.DocSearch-Hit-path{color:var(--docsearch-muted-color);font-size:.75em}.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-Tree,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-action,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-icon,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-path,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-text,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-title,.DocSearch-Hit[aria-selected=true] mark{color:var(--docsearch-hit-active-color)!important}.DocSearch-ErrorScreen,.DocSearch-NoResults,.DocSearch-StartScreen{font-size:.9em;margin:0 auto;padding:36px 0;text-align:center;width:80%}.DocSearch-Screen-Icon{color:var(--docsearch-muted-color);padding-bottom:12px}.DocSearch-NoResults-Prefill-List{display:inline-block;padding-bottom:24px;text-align:left}.DocSearch-NoResults-Prefill-List ul{display:inline-block;padding:8px 0 0}.DocSearch-NoResults-Prefill-List li{list-style-position:inside;list-style-type:"» "}.DocSearch-Prefill{-webkit-appearance:none;appearance:none;background:none;border:0;border-radius:1em;color:var(--docsearch-highlight-color);cursor:pointer;display:inline-block;font-size:1em;font-weight:700;padding:0}.DocSearch-Prefill:focus,.DocSearch-Prefill:hover{outline:0;text-decoration:underline}.DocSearch-Footer{align-items:center;background:var(--docsearch-footer-background);border-radius:0 0 8px 8px;box-shadow:var(--docsearch-footer-shadow);display:flex;flex-direction:row-reverse;flex-shrink:0;height:var(--docsearch-footer-height);justify-content:space-between;padding:0 var(--docsearch-spacing);position:relative;-webkit-user-select:none;user-select:none;width:100%;z-index:300}.DocSearch-Commands li,.DocSearch-Commands-Key{align-items:center;display:flex}.DocSearch-Commands{color:var(--docsearch-muted-color);display:flex;list-style:none;margin:0;padding:0}.DocSearch-Commands li:not(:last-of-type){margin-right:.8em}.DocSearch-Commands-Key{background:var(--docsearch-key-gradient);border:0;border-radius:2px;box-shadow:var(--docsearch-key-shadow);color:var(--docsearch-muted-color);height:18px;justify-content:center;margin-right:.4em;padding:0 0 1px;width:20px}.buttonGroup__atx button,.codeBlockContainer_Ckt0{background:var(--prism-background-color);color:var(--prism-color)}@keyframes b{0%{opacity:0}to{opacity:1}}.DocSearch-Button{margin:0;transition:all var(--ifm-transition-fast) var(--ifm-transition-timing-default)}.DocSearch-Container{z-index:calc(var(--ifm-z-index-fixed) + 1)}.codeBlockContainer_Ckt0{border-radius:var(--ifm-code-border-radius);box-shadow:var(--ifm-global-shadow-lw);margin-bottom:var(--ifm-leading)}.codeBlockContent_biex{border-radius:inherit;direction:ltr;position:relative}.codeBlockTitle_Ktv7{border-bottom:1px solid var(--ifm-color-emphasis-300);border-top-left-radius:inherit;border-top-right-radius:inherit;font-size:var(--ifm-code-font-size);font-weight:500;padding:.75rem var(--ifm-pre-padding)}.codeBlock_bY9V{--ifm-pre-background:var(--prism-background-color);margin:0;padding:0}.codeBlockTitle_Ktv7+.codeBlockContent_biex .codeBlock_bY9V{border-top-left-radius:0;border-top-right-radius:0}.codeBlockLines_e6Vv{float:left;font:inherit;min-width:100%;padding:var(--ifm-pre-padding)}.codeBlockLinesWithNumbering_o6Pm{display:table;padding:var(--ifm-pre-padding) 0}.buttonGroup__atx{column-gap:.2rem;display:flex;position:absolute;right:calc(var(--ifm-pre-padding)/2);top:calc(var(--ifm-pre-padding)/2)}.buttonGroup__atx button{align-items:center;border:1px solid var(--ifm-color-emphasis-300);border-radius:var(--ifm-global-radius);display:flex;line-height:0;opacity:0;padding:.4rem;transition:opacity var(--ifm-transition-fast) ease-in-out}.buttonGroup__atx button:focus-visible,.buttonGroup__atx button:hover{opacity:1!important}.theme-code-block:hover .buttonGroup__atx button{opacity:.4}:where(:root){--docusaurus-highlighted-code-line-bg:#484d5b}:where([data-theme=dark]){--docusaurus-highlighted-code-line-bg:#646464}.theme-code-block-highlighted-line{background-color:var(--docusaurus-highlighted-code-line-bg);display:block;margin:0 calc(var(--ifm-pre-padding)*-1);padding:0 var(--ifm-pre-padding)}.codeLine_lJS_{counter-increment:a;display:table-row}.codeLineNumber_Tfdd{background:var(--ifm-pre-background);display:table-cell;left:0;overflow-wrap:normal;padding:0 var(--ifm-pre-padding);position:sticky;text-align:right;width:1%}.codeLineNumber_Tfdd:before{content:counter(a);opacity:.4}.codeLineContent_feaV{padding-right:var(--ifm-pre-padding)}.details_lb9f{--docusaurus-details-summary-arrow-size:0.38rem;--docusaurus-details-transition:transform 200ms ease;--docusaurus-details-decoration-color:grey}.details_lb9f>summary{cursor:pointer;list-style:none;padding-left:1rem;position:relative}.details_lb9f>summary::-webkit-details-marker{display:none}.details_lb9f>summary:before{border-color:#0000 #0000 #0000 var(--docusaurus-details-decoration-color);border-style:solid;border-width:var(--docusaurus-details-summary-arrow-size);content:"";left:0;position:absolute;top:.45rem;transform:rotate(0);transform-origin:calc(var(--docusaurus-details-summary-arrow-size)/2) 50%;transition:var(--docusaurus-details-transition)}.collapsibleContent_i85q{border-top:1px solid var(--docusaurus-details-decoration-color);margin-top:1rem;padding-top:1rem}.theme-code-block:hover .copyButtonCopied_obH4{opacity:1!important}.copyButtonIcons_eSgA{height:1.125rem;position:relative;width:1.125rem}.copyButtonIcon_y97N,.copyButtonSuccessIcon_LjdS{fill:currentColor;height:inherit;left:0;opacity:inherit;position:absolute;top:0;transition:all var(--ifm-transition-fast) ease;width:inherit}.copyButtonSuccessIcon_LjdS{color:#00d600;left:50%;opacity:0;top:50%;transform:translate(-50%,-50%) scale(.33)}.copyButtonCopied_obH4 .copyButtonIcon_y97N{opacity:0;transform:scale(.33)}.copyButtonCopied_obH4 .copyButtonSuccessIcon_LjdS{opacity:1;transform:translate(-50%,-50%) scale(1);transition-delay:75ms}.details_b_Ee{--docusaurus-details-decoration-color:var(--ifm-alert-border-color);--docusaurus-details-transition:transform var(--ifm-transition-fast) ease;border:1px solid var(--ifm-alert-border-color);margin:0 0 var(--ifm-spacing-vertical)}.wordWrapButtonIcon_Bwma{height:1.2rem;width:1.2rem}.containsTaskList_mC6p{list-style:none}.img_ev3q{height:auto}.tableOfContents_bqdL{max-height:calc(100vh - var(--ifm-navbar-height) - 2rem);overflow-y:auto;position:sticky;top:calc(var(--ifm-navbar-height) + 1rem)}.admonition_xJq3{margin-bottom:1em}.admonitionHeading_Gvgb{font:var(--ifm-heading-font-weight) var(--ifm-h5-font-size)/var(--ifm-heading-line-height) var(--ifm-heading-font-family)}.admonitionHeading_Gvgb:not(:last-child){margin-bottom:.3rem}.admonitionHeading_Gvgb code{text-transform:none}.admonitionIcon_Rf37{display:inline-block;margin-right:.4em;vertical-align:middle}.admonitionIcon_Rf37 svg{fill:var(--ifm-alert-foreground-color);display:inline-block;height:1.6em;width:1.6em}.breadcrumbHomeIcon_YNFT{height:1.1rem;position:relative;top:1px;vertical-align:top;width:1.1rem}.breadcrumbsContainer_Z_bl{--ifm-breadcrumb-size-multiplier:0.8;margin-bottom:.8rem}.title_kItE{--ifm-h1-font-size:3rem;margin-bottom:calc(var(--ifm-leading)*1.25)}.mdxPageWrapper_j9I6{justify-content:center}@media (min-width:997px){.collapseSidebarButton_PEFL,.expandButton_TmdG{background-color:var(--docusaurus-collapse-button-bg)}:root{--docusaurus-announcement-bar-height:30px}.announcementBarClose_gvF7,.announcementBarPlaceholder_vyr4{flex-basis:50px}.navbarSearchContainer_Bca1{padding:var(--ifm-navbar-item-padding-vertical) var(--ifm-navbar-item-padding-horizontal)}.lastUpdated_vwxv{text-align:right}.tocMobile_ITEo{display:none}.collapseSidebarButton_PEFL{border:1px solid var(--ifm-toc-border-color);border-radius:0;bottom:0;display:block!important;height:40px;position:sticky}.collapseSidebarButtonIcon_kv0_{margin-top:4px;transform:rotate(180deg)}.expandButtonIcon_i1dp,[dir=rtl] .collapseSidebarButtonIcon_kv0_{transform:rotate(0)}.collapseSidebarButton_PEFL:focus,.collapseSidebarButton_PEFL:hover,.expandButton_TmdG:focus,.expandButton_TmdG:hover{background-color:var(--docusaurus-collapse-button-bg-hover)}.menuHtmlItem_M9Kj{padding:var(--ifm-menu-link-padding-vertical) var(--ifm-menu-link-padding-horizontal)}.menu_SIkG{flex-grow:1;padding:.5rem}@supports (scrollbar-gutter:stable){.menu_SIkG{padding:.5rem 0 .5rem .5rem;scrollbar-gutter:stable}}.menuWithAnnouncementBar_GW3s{margin-bottom:var(--docusaurus-announcement-bar-height)}.sidebar_njMd{display:flex;flex-direction:column;height:100%;padding-top:var(--ifm-navbar-height);width:var(--doc-sidebar-width)}.sidebarWithHideableNavbar_wUlq{padding-top:0}.sidebarHidden_VK0M{opacity:0;visibility:hidden}.sidebarLogo_isFc{align-items:center;color:inherit!important;display:flex!important;margin:0 var(--ifm-navbar-padding-horizontal);max-height:var(--ifm-navbar-height);min-height:var(--ifm-navbar-height);text-decoration:none!important}.sidebarLogo_isFc img{height:2rem;margin-right:.5rem}.expandButton_TmdG{align-items:center;display:flex;height:100%;justify-content:center;position:absolute;right:0;top:0;transition:background-color var(--ifm-transition-fast) ease;width:100%}[dir=rtl] .expandButtonIcon_i1dp{transform:rotate(180deg)}.docSidebarContainer_YfHR{border-right:1px solid var(--ifm-toc-border-color);-webkit-clip-path:inset(0);clip-path:inset(0);display:block;margin-top:calc(var(--ifm-navbar-height)*-1);transition:width var(--ifm-transition-fast) ease;width:var(--doc-sidebar-width);will-change:width}.docSidebarContainerHidden_DPk8{cursor:pointer;width:var(--doc-sidebar-hidden-width)}.sidebarViewport_aRkj{height:100%;max-height:100vh;position:sticky;top:0}.docMainContainer_TBSr{flex-grow:1;max-width:calc(100% - var(--doc-sidebar-width))}.docMainContainerEnhanced_lQrH{max-width:calc(100% - var(--doc-sidebar-hidden-width))}.docItemWrapperEnhanced_JWYK{max-width:calc(var(--ifm-container-width) + var(--doc-sidebar-width))!important}.docItemCol_VOVn,.generatedIndexPage_vN6x{max-width:75%!important}.list_eTzJ article:nth-last-child(-n+2){margin-bottom:0!important}}@media (min-width:1440px){.container{max-width:var(--ifm-container-width-xl)}}@media (max-width:996px){.col{--ifm-col-width:100%;flex-basis:var(--ifm-col-width);margin-left:0}.footer{--ifm-footer-padding-horizontal:0}.colorModeToggle_DEke,.footer__link-separator,.navbar__item,.tableOfContents_bqdL{display:none}.footer__col{margin-bottom:calc(var(--ifm-spacing-vertical)*3)}.footer__link-item{display:block}.hero{padding-left:0;padding-right:0}.navbar>.container,.navbar>.container-fluid{padding:0}.navbar__toggle{display:inherit}.navbar__search-input{width:9rem}.pills--block,.tabs--block{flex-direction:column}.navbarSearchContainer_Bca1{position:absolute;right:var(--ifm-navbar-padding-horizontal)}.docItemContainer_F8PC{padding:0 .3rem}}@media only screen and (max-width:996px){.searchQueryColumn_RTkw,.searchResultsColumn_JPFH{max-width:60%!important}.searchLogoColumn_rJIA,.searchVersionColumn_ypXd{max-width:40%!important}.searchLogoColumn_rJIA{padding-left:0!important}}@media screen and (max-width:996px){.heroBanner_qdFl{padding:2rem}}@media (max-width:768px){.DocSearch-Button-Keys,.DocSearch-Button-Placeholder,.DocSearch-Commands,.DocSearch-Hit-Tree{display:none}:root{--docsearch-spacing:10px;--docsearch-footer-height:40px}.DocSearch-Dropdown{height:100%;max-height:calc(var(--docsearch-vh,1vh)*100 - var(--docsearch-searchbox-height) - var(--docsearch-spacing) - var(--docsearch-footer-height))}.DocSearch-Container{height:100vh;height:-webkit-fill-available;height:calc(var(--docsearch-vh,1vh)*100);position:absolute}.DocSearch-Footer{border-radius:0;bottom:0;position:absolute}.DocSearch-Hit-content-wrapper{display:flex;position:relative;width:80%}.DocSearch-Modal{border-radius:0;box-shadow:none;height:100vh;height:-webkit-fill-available;height:calc(var(--docsearch-vh,1vh)*100);margin:0;max-width:100%;width:100%}.DocSearch-Cancel{-webkit-appearance:none;appearance:none;background:none;border:0;color:var(--docsearch-highlight-color);cursor:pointer;display:inline-block;flex:none;font:inherit;font-size:1em;font-weight:500;margin-left:var(--docsearch-spacing);outline:0;overflow:hidden;padding:0;-webkit-user-select:none;user-select:none;white-space:nowrap}}@media (max-width:576px){.markdown h1:first-child{--ifm-h1-font-size:2rem}.markdown>h2{--ifm-h2-font-size:1.5rem}.markdown>h3{--ifm-h3-font-size:1.25rem}}@media screen and (max-width:576px){.searchQueryColumn_RTkw{max-width:100%!important}.searchVersionColumn_ypXd{max-width:100%!important;padding-left:var(--ifm-spacing-horizontal)!important}}@media (hover:hover){.backToTopButton_sjWU:hover{background-color:var(--ifm-color-emphasis-300)}}@media (pointer:fine){.thin-scrollbar{scrollbar-width:thin}.thin-scrollbar::-webkit-scrollbar{height:var(--ifm-scrollbar-size);width:var(--ifm-scrollbar-size)}.thin-scrollbar::-webkit-scrollbar-track{background:var(--ifm-scrollbar-track-background-color);border-radius:10px}.thin-scrollbar::-webkit-scrollbar-thumb{background:var(--ifm-scrollbar-thumb-background-color);border-radius:10px}.thin-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--ifm-scrollbar-thumb-hover-background-color)}}@media (prefers-reduced-motion:reduce){:root{--ifm-transition-fast:0ms;--ifm-transition-slow:0ms}}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Reset{stroke-width:var(--docsearch-icon-stroke-width);animation:none;-webkit-appearance:none;appearance:none;background:none;border:0;border-radius:50%;color:var(--docsearch-icon-color);cursor:pointer;right:0}.DocSearch-Hit--deleting,.DocSearch-Hit--favoriting{transition:none}.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{background:#0003;transition:none}}@media print{.announcementBar_mb4j,.footer,.menu,.navbar,.pagination-nav,.table-of-contents,.tocMobile_ITEo{display:none}.tabs{page-break-inside:avoid}.codeBlockLines_e6Vv{white-space:pre-wrap}}
\ No newline at end of file
diff --git a/assets/js/017e1775.e8e2bf1f.js b/assets/js/017e1775.de79e0e8.js
similarity index 75%
rename from assets/js/017e1775.e8e2bf1f.js
rename to assets/js/017e1775.de79e0e8.js
index 4468707b0..76632d6ab 100644
--- a/assets/js/017e1775.e8e2bf1f.js
+++ b/assets/js/017e1775.de79e0e8.js
@@ -1,4 +1,4 @@
-"use strict";(self.webpackChunkdwcj_documentation=self.webpackChunkdwcj_documentation||[]).push([[6929],{4826:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>p,contentTitle:()=>d,default:()=>w,frontMatter:()=>c,metadata:()=>h,toc:()=>u});var r=n(5893),a=n(1151),i=n(6957),s=n(7796),o=n(6521),l=n(3273);const c={sidebar_position:26,title:"Drawer"},d=void 0,h={id:"components/drawer",title:"Drawer",description:"The drawer is a container that slides into the viewport to expose additional options and information. Multiple drawers can be created in an application, and they will be stacked above each other.",source:"@site/docs/components/drawer.md",sourceDirName:"components",slug:"/components/drawer",permalink:"/docs/components/drawer",draft:!1,unlisted:!1,editUrl:"https://github.com/DwcJava/dwcjava.github.io/tree/website/docs/components/drawer.md",tags:[],version:"current",sidebarPosition:26,frontMatter:{sidebar_position:26,title:"Drawer"},sidebar:"documentationSidebar",previous:{title:"Dialog",permalink:"/docs/components/dialog"},next:{title:"Field",permalink:"/docs/components/fields/"}},p={},u=[{value:"Usages",id:"usages",level:2},{value:"Constructors",id:"constructors",level:2},{value:"Autofocus",id:"autofocus",level:2},{value:"Label",id:"label",level:2},{value:"Size",id:"size",level:2},{value:"Max Size",id:"max-size",level:3},{value:"Placement",id:"placement",level:2},{value:"Events",id:"events",level:2},{value:"Drawer Open",id:"drawer-open",level:3},{value:"Drawer Close",id:"drawer-close",level:3},{value:"Toggling a Drawer Open or Closed",id:"toggling-a-drawer-open-or-closed",level:3},{value:"Removing an Event",id:"removing-an-event",level:3},{value:"Styling",id:"styling",level:2},{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",code:"code",h2:"h2",h3:"h3",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,a.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(l.Z,{type:"engine",location:"org/dwcj/component/drawer/Drawer",top:"true"}),"\n",(0,r.jsx)(t.p,{children:"The drawer is a container that slides into the viewport to expose additional options and information. Multiple drawers can be created in an application, and they will be stacked above each other."}),"\n",(0,r.jsx)(t.p,{children:'The Drawer component can be used in many different situations, such as by providing a navigation menu that can be toggled, a panel that displays supplementary or contextual information, or to optimize usage on a mobile device. The following example will show a mobile application that uses the DWCJ\'s AppLayout component, and displays a "Welcome Popup" drawer at the bottom when first loaded. Additionally, a navigational Drawer component can be toggled in the application by clicking on the hamburger menu.'}),"\n",(0,r.jsx)(o.Z,{url:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.drawerdemos.DrawerWelcome",mobile:"true"}),"\n",(0,r.jsx)(i.Z,{frame:"hidden",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/drawerdemos/DrawerWelcome.java",cssURL:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/resources/css/drawerstyles/drawer_welcome.css"}),"\n",(0,r.jsx)(t.h2,{id:"usages",children:"Usages"}),"\n",(0,r.jsxs)(t.ol,{children:["\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.strong,{children:"Navigation Menu"}),": One common usage of a drawer component is as a navigation menu. It provides a space-efficient way to display links to various sections or pages of your application, especially in mobile or responsive layouts. Users can open and close the drawer to access navigation options without cluttering the main content area."]}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.strong,{children:"Filter and Sidebar"}),": A drawer can be used as a filter or sidebar in applications that display a list of items. Users can expand the drawer to reveal filter options, sort controls, or additional information related to the list items. This keeps the main content focused on the list while providing advanced features in an accessible way."]}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.strong,{children:"User Profile or Settings"}),": You can use a drawer to show user profile information or application settings. This keeps such information easily accessible but hidden when not needed, maintaining a clean and uncluttered interface. Users can open the drawer to update their profiles or adjust settings."]}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.strong,{children:"Notifications"}),": For applications with notifications or alerts, a drawer can slide in to display new messages or updates. Users can quickly check and dismiss notifications without leaving their current view."]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(t.h2,{id:"constructors",children:"Constructors"}),"\n",(0,r.jsx)(t.p,{children:"The Drawer component contains a single default constructor which will create a new instance of the Drawer class."}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-java",children:"Drawer newDrawer = new Drawer()\n"})}),"\n",(0,r.jsx)(i.Z,{path:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.drawerdemos.DrawerDemo",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/drawerdemos/DrawerDemo.java",height:"600px"}),"\n",(0,r.jsx)(t.p,{children:"Various properties exist that allow for the customization of various attributes of the Drawer component. Below are those properties with examples for their modification."}),"\n",(0,r.jsx)(t.h2,{id:"autofocus",children:"Autofocus"}),"\n",(0,r.jsx)(t.p,{children:"The Auto-Focus property is designed to enhance accessibility and usability by automatically focusing on the first item within a drawer when it is opened. This feature eliminates the need for users to manually navigate to the desired item, saving time and effort."}),"\n",(0,r.jsx)(t.p,{children:"When the drawer is triggered to open, either through an event, by default or any other interaction, the user's focus is directed to the first item within the drawer. This first item could be a button, a link, a menu option, or any other focusable element."}),"\n",(0,r.jsx)(t.admonition,{type:"tip",children:(0,r.jsx)(t.p,{children:"By automatically focusing on the first item, the developer ensures that users can immediately engage with the most relevant or frequently used option without having to tab or scroll through the entire drawer. This behavior streamlines the user experience and promotes efficient navigation within the UI."})}),"\n",(0,r.jsx)(t.p,{children:"This property can also be particularly beneficial for individuals who rely on keyboard navigation or assistive technologies such as screen readers. It provides a clear starting point within the drawer and allows users to access the desired functionality without unnecessary manual input."}),"\n",(0,r.jsx)(i.Z,{path:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.drawerdemos.DrawerAutoFocus",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/drawerdemos/DrawerAutoFocus.java",height:"600px"}),"\n",(0,r.jsx)(t.h2,{id:"label",children:"Label"}),"\n",(0,r.jsx)(t.p,{children:"The Drawer Label property is a feature designed to enhance accessibility and provide descriptive context for a drawer within a user interface. This property allows developers to assign a label to a drawer, primarily for accessibility purposes, ensuring that screen readers and other assistive technologies can accurately convey the drawer's purpose and content to users."}),"\n",(0,r.jsx)(t.p,{children:"When the Drawer Label property is utilized, the assigned label becomes an integral part of the drawer's accessibility infrastructure. It enables users who rely on assistive technologies to understand the drawer's function and navigate through the interface more effectively."}),"\n",(0,r.jsx)(t.p,{children:"By providing a label for the drawer, developers ensure that screen readers announce the purpose of the drawer to visually impaired users. This information empowers individuals to make informed decisions about interacting with the drawer, as they can understand its content and relevance within the broader user interface."}),"\n",(0,r.jsx)(t.p,{children:"The Label property can be customized to suit the specific context and design requirements of the application. Developers have the flexibility to provide concise and descriptive labels that accurately represent the drawer's content or functionality."}),"\n",(0,r.jsx)(t.h2,{id:"size",children:"Size"}),"\n",(0,r.jsxs)(t.p,{children:["The ",(0,r.jsx)(t.code,{children:"size"})," property of the Drawer component enables developers to control and specify the dimensions of the drawer within the user interface. This property allows for fine-tuning the size of the drawer, ensuring it aligns with the desired layout and design requirements."]}),"\n",(0,r.jsxs)(t.p,{children:["When utilizing the ",(0,r.jsx)(t.code,{children:"size"})," property, developers have the flexibility to define the width and height of the drawer based on their specific needs. Unlike the ",(0,r.jsx)(t.code,{children:"maxSize"})," property, which sets a maximum limit, the ",(0,r.jsx)(t.code,{children:"size"})," property provides explicit control over the actual size of the drawer."]}),"\n",(0,r.jsxs)(t.p,{children:["Developers can customize the ",(0,r.jsx)(t.code,{children:"size"})," property based on the available screen real estate, the amount of content to be displayed, and the overall design aesthetic. This level of control allows for creating visually balanced and functional interfaces."]}),"\n",(0,r.jsxs)(t.p,{children:["The ",(0,r.jsx)(t.code,{children:"size"})," property can be defined using various units such as pixels, percentages, or other appropriate CSS measurement values. This versatility ensures that the drawer's size can be adjusted precisely to fit different screen sizes, resolutions, and device types."]}),"\n",(0,r.jsxs)(t.p,{children:["By utilizing the ",(0,r.jsx)(t.code,{children:"size"})," property effectively, developers can create responsive interfaces that adapt to different viewports and screen orientations. For instance, a smaller size can be chosen for mobile devices to optimize space utilization, while larger sizes can be used for desktop displays to take advantage of the available screen area."]}),"\n",(0,r.jsx)(t.h3,{id:"max-size",children:"Max Size"}),"\n",(0,r.jsx)(t.p,{children:"The Drawer max size property is a versatile feature designed to control the maximum width or height of a drawer within a user interface, based on the specified placement. This property allows developers to define the maximum size of the drawer, ensuring optimal presentation and layout while accommodating varying screen sizes and device resolutions."}),"\n",(0,r.jsx)(t.admonition,{type:"info",children:(0,r.jsxs)(t.p,{children:["To set the size of the drawer, modify the ",(0,r.jsx)(t.code,{children:"size"})," property - ",(0,r.jsx)(t.code,{children:"maxSize"})," is used to ensure a drawer never grows larger than a certain value."]})}),"\n",(0,r.jsx)(t.p,{children:"When utilizing the Drawer max size property, developers can set a maximum size value expressed as pixels, percentages, or other appropriate CSS measurement values. This value represents the maximum width when the drawer is placed on the left or right side of the interface or the maximum height when placed on the top or bottom."}),"\n",(0,r.jsx)(t.p,{children:"By defining a maximum size for the drawer, developers maintain control over its dimensions and prevent it from becoming excessively wide or tall, which could hinder the overall user experience. The CSS measurement approach allows for responsiveness, adapting the size of the drawer dynamically in relation to the available screen space."}),"\n",(0,r.jsx)(t.p,{children:"The Drawer's max size property is particularly beneficial when dealing with responsive and adaptive designs. It ensures that the drawer remains visually pleasing and functional across different devices, screen orientations, and viewports."}),"\n",(0,r.jsx)(t.p,{children:"When the drawer's content exceeds the defined maximum size, developers can implement appropriate techniques to handle overflow, such as scrolling within the drawer or utilizing additional UI patterns like tabs or accordions. This helps maintain a clean and organized interface while accommodating larger amounts of content."}),"\n",(0,r.jsx)(i.Z,{path:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.drawerdemos.DrawerSize",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/drawerdemos/DrawerSize.java",height:"600px"}),"\n",(0,r.jsx)(t.h2,{id:"placement",children:"Placement"}),"\n",(0,r.jsx)(t.p,{children:"The placement property of the Drawer UI Component allows developers to specify the position and alignment of the drawer within the viewport. This property offers a range of enum values that provide flexibility in determining where the drawer appears in relation to the main content."}),"\n",(0,r.jsx)(t.p,{children:"The available enum values for the placement property are as follows:"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.strong,{children:"TOP"}),": This value places the drawer at the top of the viewport, allowing it to occupy the uppermost region."]}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.strong,{children:"TOP_CENTER"}),": With this value, the drawer is positioned at the center of the top portion of the viewport. It is aligned horizontally in the middle, creating a balanced layout."]}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.strong,{children:"BOTTOM"}),": When using this value, the drawer is situated at the bottom of the viewport, appearing below the main content."]}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.strong,{children:"BOTTOM_CENTER"}),": This value centers the drawer horizontally at the bottom of the viewport. It provides a visually balanced composition."]}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.strong,{children:"LEFT"}),": Selecting this value causes the drawer to be positioned on the left side of the viewport, adjacent to the main content."]}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.strong,{children:"RIGHT"}),": By using this value, the drawer is placed on the right side of the viewport, maintaining a close proximity to the main content"]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(t.p,{children:"The placement property allows developers to choose the most appropriate position for the drawer based on the specific design and user experience requirements. The enum values offer a variety of placement options to accommodate different interface layouts and visual hierarchies."}),"\n",(0,r.jsx)(t.p,{children:"By leveraging the placement property, developers can create intuitive and efficient user interfaces. For example, placing the drawer on the left or right side allows for quick access to additional functionalities or navigation options, while top or bottom placements are well-suited for contextual information or supplementary content."}),"\n",(0,r.jsx)(i.Z,{path:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.drawerdemos.DrawerPlacement",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/drawerdemos/DrawerPlacement.java",height:"600px"}),"\n",(0,r.jsx)(t.h2,{id:"events",children:"Events"}),"\n",(0,r.jsx)(t.p,{children:"There are two supported events that can be used with the Drawer component, open and close events. These events are essential components of the Drawer component, providing developers with the means to respond and react to the opening and closing actions of the drawer within the user interface."}),"\n",(0,r.jsx)(t.h3,{id:"drawer-open",children:"Drawer Open"}),"\n",(0,r.jsxs)(t.p,{children:["Use the ",(0,r.jsx)(t.code,{children:"addOpenListener()"})," method to add an open event to your Drawer component."]}),"\n",(0,r.jsx)(t.p,{children:"The Drawer Open Event is triggered when the drawer is initiated to open, either through user interaction or programmatically. This event allows developers to execute specific actions, animations, or updates that should occur when the drawer becomes visible and accessible to the user. To add an open event listener, use the appropriate method:"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-java",children:"myDrawer.addOpenListener( e -> {\r\n //Executed when the event fires\r\n});\n"})}),"\n",(0,r.jsx)(t.p,{children:"By leveraging the Drawer Open Event, developers can synchronize the opening of the drawer with other UI elements, trigger transitions or animations, and update the interface to reflect the change in state. This event can also be used to initiate fetching data, loading content, or any other necessary operations related to the appearance of the drawer."}),"\n",(0,r.jsx)(t.admonition,{type:"info",children:(0,r.jsxs)(t.p,{children:["The ",(0,r.jsx)(t.code,{children:"onOpen() method is similarly available for use, and simple calls the addOpenListener()"})," method."]})}),"\n",(0,r.jsx)(t.h3,{id:"drawer-close",children:"Drawer Close"}),"\n",(0,r.jsxs)(t.p,{children:["Use the ",(0,r.jsx)(t.code,{children:"addCloseListener()"})," method to add an open event to your Drawer component."]}),"\n",(0,r.jsx)(t.p,{children:"The Drawer Close Event is triggered when the drawer is initiated to close. This event provides developers with the opportunity to perform actions or updates that should take place when the drawer is no longer visible or accessible to the user. To add a close event listener, use the appropriate method:"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-java",children:"myDrawer.addCloseListener( e -> {\r\n //Executed when the event fires\r\n});\n"})}),"\n",(0,r.jsx)(t.p,{children:"With the Drawer Close Event, developers can synchronize the closing of the drawer with other UI elements, initiate animations or transitions, and update the interface to reflect the change in state. Additionally, this event can be utilized to save user preferences, persist data, or perform any cleanup operations associated with the closure of the drawer."}),"\n",(0,r.jsx)(t.admonition,{type:"info",children:(0,r.jsxs)(t.p,{children:["The ",(0,r.jsx)(t.code,{children:"onClose()"})," method is similarly available for use, and simple calls the ",(0,r.jsx)(t.code,{children:"addOpenListener()"})," method."]})}),"\n",(0,r.jsx)(t.h3,{id:"toggling-a-drawer-open-or-closed",children:"Toggling a Drawer Open or Closed"}),"\n",(0,r.jsxs)(t.p,{children:["The ",(0,r.jsx)(t.code,{children:"toggle()"})," method allows developers to control the opening and closing behavior of the drawer based on a boolean value. This function provides a programmatic way to toggle the visibility of the drawer. This can be shorthanded by using the ",(0,r.jsx)(t.code,{children:"open()"})," and ",(0,r.jsx)(t.code,{children:"close()"})," methods, which call the ",(0,r.jsx)(t.code,{children:"toggle()"})," method with the appropriate boolean argument."]}),"\n",(0,r.jsx)(t.h3,{id:"removing-an-event",children:"Removing an Event"}),"\n",(0,r.jsx)(t.p,{children:"To remove either an open or close event from the Drawer, simply use the appropriate remove event listener method."}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-java",children:"myDrawer.removeOpenListener(listener);\n"})}),"\n",(0,r.jsx)(t.h2,{id:"styling",children:"Styling"}),"\n",(0,r.jsx)(t.h3,{id:"shadow-parts",children:"Shadow Parts"}),"\n",(0,r.jsxs)(t.p,{children:["These are the various parts of the ",(0,r.jsx)(t.a,{href:"../glossary#shadow-dom",children:"shadow DOM"})," for the component, which will be required when styling via CSS is desired."]}),"\n",(0,r.jsx)(s.Z,{tag:n(5731).dy,table:"parts"}),"\n",(0,r.jsx)(t.h3,{id:"css-properties",children:"CSS Properties"}),"\n",(0,r.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,r.jsx)(s.Z,{tag:n(5731).dy,table:"properties"}),"\n",(0,r.jsx)(t.h3,{id:"reflected-attributes",children:"Reflected Attributes"}),"\n",(0,r.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,r.jsx)(s.Z,{tag:n(5731).dy,table:"reflects"}),"\n",(0,r.jsx)(t.h3,{id:"dependencies",children:"Dependencies"}),"\n",(0,r.jsx)(t.p,{children:"This component relies on the following components - see the related article for more detailed styling information:"}),"\n",(0,r.jsx)(s.Z,{tag:"bbj-drawer",table:"dependencies"}),"\n",(0,r.jsx)(t.h2,{id:"best-practices",children:"Best Practices"}),"\n",(0,r.jsxs)(t.p,{children:["To ensure an optimal user experience when using the ",(0,r.jsx)(t.code,{children:"Drawer"})," component, consider the following best practices:"]}),"\n",(0,r.jsxs)(t.ol,{children:["\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.strong,{children:"Placement"}),": Decide whether the drawer should slide in from the left, right, top, or bottom, based on your application's layout and user experience considerations. Consider user preferences and design conventions."]}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.strong,{children:"Accessibility"}),": Pay special attention to accessibility. Ensure that users can open and close the drawer using keyboard controls and that screen readers can announce its presence and state. Provide ARIA roles and labels as necessary."]}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.strong,{children:"Swipe Gestures"}),": On touch-enabled devices, support swipe gestures for opening and closing the drawer. This is an intuitive way for users to interact with it."]}),"\n"]}),"\n"]})]})}function w(e={}){const{wrapper:t}={...(0,a.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(m,{...e})}):m(e)}},5162:(e,t,n)=>{n.d(t,{Z:()=>s});n(7294);var r=n(6010);const a={tabItem:"tabItem_Ymn6"};var i=n(5893);function s(e){let{children:t,hidden:n,className:s}=e;return(0,i.jsx)("div",{role:"tabpanel",className:(0,r.Z)(a.tabItem,s),hidden:n,children:t})}},4866:(e,t,n)=>{n.d(t,{Z:()=>y});var r=n(7294),a=n(6010),i=n(2466),s=n(6550),o=n(469),l=n(1980),c=n(7392),d=n(12);function h(e){return r.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,r.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 p(e){const{values:t,children:n}=e;return(0,r.useMemo)((()=>{const e=t??function(e){return h(e).map((e=>{let{props:{value:t,label:n,attributes:r,default:a}}=e;return{value:t,label:n,attributes:r,default:a}}))}(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 u(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 a=(0,s.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,r.useCallback)((e=>{if(!i)return;const t=new URLSearchParams(a.location.search);t.set(i,e),a.replace({...a.location,search:t.toString()})}),[i,a])]}function w(e){const{defaultValue:t,queryString:n=!1,groupId:a}=e,i=p(e),[s,l]=(0,r.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(!u({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 r=n.find((e=>e.default))??n[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:t,tabValues:i}))),[c,h]=m({queryString:n,groupId:a}),[w,v]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[a,i]=(0,d.Nk)(n);return[a,(0,r.useCallback)((e=>{n&&i.set(e)}),[n,i])]}({groupId:a}),g=(()=>{const e=c??w;return u({value:e,tabValues:i})?e:null})();(0,o.Z)((()=>{g&&l(g)}),[g]);return{selectedValue:s,selectValue:(0,r.useCallback)((e=>{if(!u({value:e,tabValues:i}))throw new Error(`Can't select invalid tab value=${e}`);l(e),h(e),v(e)}),[h,v,i]),tabValues:i}}var v=n(2389);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=n(5893);function f(e){let{className:t,block:n,selectedValue:r,selectValue:s,tabValues:o}=e;const l=[],{blockElementScrollPositionUntilNextRender:c}=(0,i.o5)(),d=e=>{const t=e.currentTarget,n=l.indexOf(t),a=o[n].value;a!==r&&(c(t),s(a))},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,b.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,a.Z)("tabs",{"tabs--block":n},t),children:o.map((e=>{let{value:t,label:n,attributes:i}=e;return(0,b.jsx)("li",{role:"tab",tabIndex:r===t?0:-1,"aria-selected":r===t,ref:e=>l.push(e),onKeyDown:h,onClick:d,...i,className:(0,a.Z)("tabs__item",g.tabItem,i?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:a}=e;const i=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=i.find((e=>e.props.value===a));return e?(0,r.cloneElement)(e,{className:"margin-top--md"}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:i.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function A(e){const t=w(e);return(0,b.jsxs)("div",{className:(0,a.Z)("tabs-container",g.tabList),children:[(0,b.jsx)(f,{...e,...t}),(0,b.jsx)(x,{...e,...t})]})}function y(e){const t=(0,v.Z)();return(0,b.jsx)(A,{...e,children:h(e.children)},String(t))}},6521:(e,t,n)=>{n.d(t,{Z:()=>i});n(7294);var r=n(917),a=n(5944);function i(e){let{url:t,mobile:n}=e;const i=r.iv`
+"use strict";(self.webpackChunkdwcj_documentation=self.webpackChunkdwcj_documentation||[]).push([[6929],{4826:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>p,contentTitle:()=>d,default:()=>v,frontMatter:()=>c,metadata:()=>h,toc:()=>u});var r=n(5893),a=n(1151),i=n(6957),s=n(7796),o=n(6521),l=n(3273);const c={sidebar_position:26,title:"Drawer"},d=void 0,h={id:"components/drawer",title:"Drawer",description:"The drawer is a container that slides into the viewport to expose additional options and information. Multiple drawers can be created in an application, and they will be stacked above each other.",source:"@site/docs/components/drawer.md",sourceDirName:"components",slug:"/components/drawer",permalink:"/docs/components/drawer",draft:!1,unlisted:!1,editUrl:"https://github.com/DwcJava/dwcjava.github.io/tree/website/docs/components/drawer.md",tags:[],version:"current",sidebarPosition:26,frontMatter:{sidebar_position:26,title:"Drawer"},sidebar:"documentationSidebar",previous:{title:"Dialog",permalink:"/docs/components/dialog"},next:{title:"Field",permalink:"/docs/components/fields/"}},p={},u=[{value:"Usages",id:"usages",level:2},{value:"Constructors",id:"constructors",level:2},{value:"Autofocus",id:"autofocus",level:2},{value:"Label",id:"label",level:2},{value:"Size",id:"size",level:2},{value:"Max Size",id:"max-size",level:3},{value:"Placement",id:"placement",level:2},{value:"Events",id:"events",level:2},{value:"Drawer Open",id:"drawer-open",level:3},{value:"Drawer Close",id:"drawer-close",level:3},{value:"Toggling a Drawer Open or Closed",id:"toggling-a-drawer-open-or-closed",level:3},{value:"Removing an Event",id:"removing-an-event",level:3},{value:"Styling",id:"styling",level:2},{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",code:"code",h2:"h2",h3:"h3",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,a.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(l.Z,{type:"engine",location:"org/dwcj/component/drawer/Drawer",top:"true"}),"\n",(0,r.jsx)(t.p,{children:"The drawer is a container that slides into the viewport to expose additional options and information. Multiple drawers can be created in an application, and they will be stacked above each other."}),"\n",(0,r.jsx)(t.p,{children:'The Drawer component can be used in many different situations, such as by providing a navigation menu that can be toggled, a panel that displays supplementary or contextual information, or to optimize usage on a mobile device. The following example will show a mobile application that uses the DWCJ\'s AppLayout component, and displays a "Welcome Popup" drawer at the bottom when first loaded. Additionally, a navigational Drawer component can be toggled in the application by clicking on the hamburger menu.'}),"\n",(0,r.jsx)(o.Z,{url:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.drawerdemos.DrawerWelcome",mobile:"true"}),"\n",(0,r.jsx)(i.Z,{frame:"hidden",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/drawerdemos/DrawerWelcome.java",cssURL:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/resources/css/drawerstyles/drawer_welcome.css"}),"\n",(0,r.jsx)(t.h2,{id:"usages",children:"Usages"}),"\n",(0,r.jsxs)(t.ol,{children:["\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.strong,{children:"Navigation Menu"}),": One common usage of a drawer component is as a navigation menu. It provides a space-efficient way to display links to various sections or pages of your application, especially in mobile or responsive layouts. Users can open and close the drawer to access navigation options without cluttering the main content area."]}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.strong,{children:"Filter and Sidebar"}),": A drawer can be used as a filter or sidebar in applications that display a list of items. Users can expand the drawer to reveal filter options, sort controls, or additional information related to the list items. This keeps the main content focused on the list while providing advanced features in an accessible way."]}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.strong,{children:"User Profile or Settings"}),": You can use a drawer to show user profile information or application settings. This keeps such information easily accessible but hidden when not needed, maintaining a clean and uncluttered interface. Users can open the drawer to update their profiles or adjust settings."]}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.strong,{children:"Notifications"}),": For applications with notifications or alerts, a drawer can slide in to display new messages or updates. Users can quickly check and dismiss notifications without leaving their current view."]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(t.h2,{id:"constructors",children:"Constructors"}),"\n",(0,r.jsx)(t.p,{children:"The Drawer component contains a single default constructor which will create a new instance of the Drawer class."}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-java",children:"Drawer newDrawer = new Drawer()\n"})}),"\n",(0,r.jsx)(i.Z,{path:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.drawerdemos.DrawerDemo",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/drawerdemos/DrawerDemo.java",height:"600px"}),"\n",(0,r.jsx)(t.p,{children:"Various properties exist that allow for the customization of various attributes of the Drawer component. Below are those properties with examples for their modification."}),"\n",(0,r.jsx)(t.h2,{id:"autofocus",children:"Autofocus"}),"\n",(0,r.jsx)(t.p,{children:"The Auto-Focus property is designed to enhance accessibility and usability by automatically focusing on the first item within a drawer when it is opened. This feature eliminates the need for users to manually navigate to the desired item, saving time and effort."}),"\n",(0,r.jsx)(t.p,{children:"When the drawer is triggered to open, either through an event, by default or any other interaction, the user's focus is directed to the first item within the drawer. This first item could be a button, a link, a menu option, or any other focusable element."}),"\n",(0,r.jsx)(t.admonition,{type:"tip",children:(0,r.jsx)(t.p,{children:"By automatically focusing on the first item, the developer ensures that users can immediately engage with the most relevant or frequently used option without having to tab or scroll through the entire drawer. This behavior streamlines the user experience and promotes efficient navigation within the UI."})}),"\n",(0,r.jsx)(t.p,{children:"This property can also be particularly beneficial for individuals who rely on keyboard navigation or assistive technologies such as screen readers. It provides a clear starting point within the drawer and allows users to access the desired functionality without unnecessary manual input."}),"\n",(0,r.jsx)(i.Z,{path:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.drawerdemos.DrawerAutoFocus",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/drawerdemos/DrawerAutoFocus.java",height:"600px"}),"\n",(0,r.jsx)(t.h2,{id:"label",children:"Label"}),"\n",(0,r.jsx)(t.p,{children:"The Drawer Label property is a feature designed to enhance accessibility and provide descriptive context for a drawer within a user interface. This property allows developers to assign a label to a drawer, primarily for accessibility purposes, ensuring that screen readers and other assistive technologies can accurately convey the drawer's purpose and content to users."}),"\n",(0,r.jsx)(t.p,{children:"When the Drawer Label property is utilized, the assigned label becomes an integral part of the drawer's accessibility infrastructure. It enables users who rely on assistive technologies to understand the drawer's function and navigate through the interface more effectively."}),"\n",(0,r.jsx)(t.p,{children:"By providing a label for the drawer, developers ensure that screen readers announce the purpose of the drawer to visually impaired users. This information empowers individuals to make informed decisions about interacting with the drawer, as they can understand its content and relevance within the broader user interface."}),"\n",(0,r.jsx)(t.p,{children:"The Label property can be customized to suit the specific context and design requirements of the application. Developers have the flexibility to provide concise and descriptive labels that accurately represent the drawer's content or functionality."}),"\n",(0,r.jsx)(t.h2,{id:"size",children:"Size"}),"\n",(0,r.jsxs)(t.p,{children:["The ",(0,r.jsx)(t.code,{children:"size"})," property of the Drawer component enables developers to control and specify the dimensions of the drawer within the user interface. This property allows for fine-tuning the size of the drawer, ensuring it aligns with the desired layout and design requirements."]}),"\n",(0,r.jsxs)(t.p,{children:["When utilizing the ",(0,r.jsx)(t.code,{children:"size"})," property, developers have the flexibility to define the width and height of the drawer based on their specific needs. Unlike the ",(0,r.jsx)(t.code,{children:"maxSize"})," property, which sets a maximum limit, the ",(0,r.jsx)(t.code,{children:"size"})," property provides explicit control over the actual size of the drawer."]}),"\n",(0,r.jsxs)(t.p,{children:["Developers can customize the ",(0,r.jsx)(t.code,{children:"size"})," property based on the available screen real estate, the amount of content to be displayed, and the overall design aesthetic. This level of control allows for creating visually balanced and functional interfaces."]}),"\n",(0,r.jsxs)(t.p,{children:["The ",(0,r.jsx)(t.code,{children:"size"})," property can be defined using various units such as pixels, percentages, or other appropriate CSS measurement values. This versatility ensures that the drawer's size can be adjusted precisely to fit different screen sizes, resolutions, and device types."]}),"\n",(0,r.jsxs)(t.p,{children:["By utilizing the ",(0,r.jsx)(t.code,{children:"size"})," property effectively, developers can create responsive interfaces that adapt to different viewports and screen orientations. For instance, a smaller size can be chosen for mobile devices to optimize space utilization, while larger sizes can be used for desktop displays to take advantage of the available screen area."]}),"\n",(0,r.jsx)(t.h3,{id:"max-size",children:"Max Size"}),"\n",(0,r.jsx)(t.p,{children:"The Drawer max size property is a versatile feature designed to control the maximum width or height of a drawer within a user interface, based on the specified placement. This property allows developers to define the maximum size of the drawer, ensuring optimal presentation and layout while accommodating varying screen sizes and device resolutions."}),"\n",(0,r.jsx)(t.admonition,{type:"info",children:(0,r.jsxs)(t.p,{children:["To set the size of the drawer, modify the ",(0,r.jsx)(t.code,{children:"size"})," property - ",(0,r.jsx)(t.code,{children:"maxSize"})," is used to ensure a drawer never grows larger than a certain value."]})}),"\n",(0,r.jsx)(t.p,{children:"When utilizing the Drawer max size property, developers can set a maximum size value expressed as pixels, percentages, or other appropriate CSS measurement values. This value represents the maximum width when the drawer is placed on the left or right side of the interface or the maximum height when placed on the top or bottom."}),"\n",(0,r.jsx)(t.p,{children:"By defining a maximum size for the drawer, developers maintain control over its dimensions and prevent it from becoming excessively wide or tall, which could hinder the overall user experience. The CSS measurement approach allows for responsiveness, adapting the size of the drawer dynamically in relation to the available screen space."}),"\n",(0,r.jsx)(t.p,{children:"The Drawer's max size property is particularly beneficial when dealing with responsive and adaptive designs. It ensures that the drawer remains visually pleasing and functional across different devices, screen orientations, and viewports."}),"\n",(0,r.jsx)(t.p,{children:"When the drawer's content exceeds the defined maximum size, developers can implement appropriate techniques to handle overflow, such as scrolling within the drawer or utilizing additional UI patterns like tabs or accordions. This helps maintain a clean and organized interface while accommodating larger amounts of content."}),"\n",(0,r.jsx)(i.Z,{path:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.drawerdemos.DrawerSize",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/drawerdemos/DrawerSize.java",height:"600px"}),"\n",(0,r.jsx)(t.h2,{id:"placement",children:"Placement"}),"\n",(0,r.jsx)(t.p,{children:"The placement property of the Drawer UI Component allows developers to specify the position and alignment of the drawer within the viewport. This property offers a range of enum values that provide flexibility in determining where the drawer appears in relation to the main content."}),"\n",(0,r.jsx)(t.p,{children:"The available enum values for the placement property are as follows:"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.strong,{children:"TOP"}),": This value places the drawer at the top of the viewport, allowing it to occupy the uppermost region."]}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.strong,{children:"TOP_CENTER"}),": With this value, the drawer is positioned at the center of the top portion of the viewport. It is aligned horizontally in the middle, creating a balanced layout."]}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.strong,{children:"BOTTOM"}),": When using this value, the drawer is situated at the bottom of the viewport, appearing below the main content."]}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.strong,{children:"BOTTOM_CENTER"}),": This value centers the drawer horizontally at the bottom of the viewport. It provides a visually balanced composition."]}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.strong,{children:"LEFT"}),": Selecting this value causes the drawer to be positioned on the left side of the viewport, adjacent to the main content."]}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.strong,{children:"RIGHT"}),": By using this value, the drawer is placed on the right side of the viewport, maintaining a close proximity to the main content"]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(t.p,{children:"The placement property allows developers to choose the most appropriate position for the drawer based on the specific design and user experience requirements. The enum values offer a variety of placement options to accommodate different interface layouts and visual hierarchies."}),"\n",(0,r.jsx)(t.p,{children:"By leveraging the placement property, developers can create intuitive and efficient user interfaces. For example, placing the drawer on the left or right side allows for quick access to additional functionalities or navigation options, while top or bottom placements are well-suited for contextual information or supplementary content."}),"\n",(0,r.jsx)(i.Z,{path:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.drawerdemos.DrawerPlacement",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/drawerdemos/DrawerPlacement.java",height:"600px"}),"\n",(0,r.jsx)(t.h2,{id:"events",children:"Events"}),"\n",(0,r.jsx)(t.p,{children:"There are two supported events that can be used with the Drawer component, open and close events. These events are essential components of the Drawer component, providing developers with the means to respond and react to the opening and closing actions of the drawer within the user interface."}),"\n",(0,r.jsx)(t.h3,{id:"drawer-open",children:"Drawer Open"}),"\n",(0,r.jsxs)(t.p,{children:["Use the ",(0,r.jsx)(t.code,{children:"addOpenListener()"})," method to add an open event to your Drawer component."]}),"\n",(0,r.jsx)(t.p,{children:"The Drawer Open Event is triggered when the drawer is initiated to open, either through user interaction or programmatically. This event allows developers to execute specific actions, animations, or updates that should occur when the drawer becomes visible and accessible to the user. To add an open event listener, use the appropriate method:"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-java",children:"myDrawer.addOpenListener( e -> {\r\n //Executed when the event fires\r\n});\n"})}),"\n",(0,r.jsx)(t.p,{children:"By leveraging the Drawer Open Event, developers can synchronize the opening of the drawer with other UI elements, trigger transitions or animations, and update the interface to reflect the change in state. This event can also be used to initiate fetching data, loading content, or any other necessary operations related to the appearance of the drawer."}),"\n",(0,r.jsx)(t.admonition,{type:"info",children:(0,r.jsxs)(t.p,{children:["The ",(0,r.jsx)(t.code,{children:"onOpen() method is similarly available for use, and simple calls the addOpenListener()"})," method."]})}),"\n",(0,r.jsx)(t.h3,{id:"drawer-close",children:"Drawer Close"}),"\n",(0,r.jsxs)(t.p,{children:["Use the ",(0,r.jsx)(t.code,{children:"addCloseListener()"})," method to add an open event to your Drawer component."]}),"\n",(0,r.jsx)(t.p,{children:"The Drawer Close Event is triggered when the drawer is initiated to close. This event provides developers with the opportunity to perform actions or updates that should take place when the drawer is no longer visible or accessible to the user. To add a close event listener, use the appropriate method:"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-java",children:"myDrawer.addCloseListener( e -> {\r\n //Executed when the event fires\r\n});\n"})}),"\n",(0,r.jsx)(t.p,{children:"With the Drawer Close Event, developers can synchronize the closing of the drawer with other UI elements, initiate animations or transitions, and update the interface to reflect the change in state. Additionally, this event can be utilized to save user preferences, persist data, or perform any cleanup operations associated with the closure of the drawer."}),"\n",(0,r.jsx)(t.admonition,{type:"info",children:(0,r.jsxs)(t.p,{children:["The ",(0,r.jsx)(t.code,{children:"onClose()"})," method is similarly available for use, and simple calls the ",(0,r.jsx)(t.code,{children:"addOpenListener()"})," method."]})}),"\n",(0,r.jsx)(t.h3,{id:"toggling-a-drawer-open-or-closed",children:"Toggling a Drawer Open or Closed"}),"\n",(0,r.jsxs)(t.p,{children:["The ",(0,r.jsx)(t.code,{children:"toggle()"})," method allows developers to control the opening and closing behavior of the drawer based on a boolean value. This function provides a programmatic way to toggle the visibility of the drawer. This can be shorthanded by using the ",(0,r.jsx)(t.code,{children:"open()"})," and ",(0,r.jsx)(t.code,{children:"close()"})," methods, which call the ",(0,r.jsx)(t.code,{children:"toggle()"})," method with the appropriate boolean argument."]}),"\n",(0,r.jsx)(t.h3,{id:"removing-an-event",children:"Removing an Event"}),"\n",(0,r.jsx)(t.p,{children:"To remove either an open or close event from the Drawer, simply use the appropriate remove event listener method."}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-java",children:"myDrawer.removeOpenListener(listener);\n"})}),"\n",(0,r.jsx)(t.h2,{id:"styling",children:"Styling"}),"\n",(0,r.jsx)(t.h3,{id:"shadow-parts",children:"Shadow Parts"}),"\n",(0,r.jsxs)(t.p,{children:["These are the various parts of the ",(0,r.jsx)(t.a,{href:"../glossary#shadow-dom",children:"shadow DOM"})," for the component, which will be required when styling via CSS is desired."]}),"\n",(0,r.jsx)(s.Z,{tag:n(5731).dy,table:"parts"}),"\n",(0,r.jsx)(t.h3,{id:"css-properties",children:"CSS Properties"}),"\n",(0,r.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,r.jsx)(s.Z,{tag:n(5731).dy,table:"properties"}),"\n",(0,r.jsx)(t.h3,{id:"reflected-attributes",children:"Reflected Attributes"}),"\n",(0,r.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,r.jsx)(s.Z,{tag:n(5731).dy,table:"reflects"}),"\n",(0,r.jsx)(t.h3,{id:"dependencies",children:"Dependencies"}),"\n",(0,r.jsx)(t.p,{children:"This component relies on the following components - see the related article for more detailed styling information:"}),"\n",(0,r.jsx)(s.Z,{tag:"bbj-drawer",table:"dependencies"}),"\n",(0,r.jsx)(t.h2,{id:"best-practices",children:"Best Practices"}),"\n",(0,r.jsxs)(t.p,{children:["To ensure an optimal user experience when using the ",(0,r.jsx)(t.code,{children:"Drawer"})," component, consider the following best practices:"]}),"\n",(0,r.jsxs)(t.ol,{children:["\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.strong,{children:"Placement"}),": Decide whether the drawer should slide in from the left, right, top, or bottom, based on your application's layout and user experience considerations. Consider user preferences and design conventions."]}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.strong,{children:"Accessibility"}),": Pay special attention to accessibility. Ensure that users can open and close the drawer using keyboard controls and that screen readers can announce its presence and state. Provide ARIA roles and labels as necessary."]}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.strong,{children:"Swipe Gestures"}),": On touch-enabled devices, support swipe gestures for opening and closing the drawer. This is an intuitive way for users to interact with it."]}),"\n"]}),"\n"]})]})}function v(e={}){const{wrapper:t}={...(0,a.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(m,{...e})}):m(e)}},6031:(e,t,n)=>{var r=n(4836);t.Z=void 0;var a=r(n(4938)),i=n(5893),s=(0,a.default)((0,i.jsx)("path",{d:"m19 1-5 5v11l5-4.5V1zM1 6v14.65c0 .25.25.5.5.5.1 0 .15-.05.25-.05C3.1 20.45 5.05 20 6.5 20c1.95 0 4.05.4 5.5 1.5V6c-1.45-1.1-3.55-1.5-5.5-1.5S2.45 4.9 1 6zm22 13.5V6c-.6-.45-1.25-.75-2-1v13.5c-1.1-.35-2.3-.5-3.5-.5-1.7 0-4.15.65-5.5 1.5v2c1.35-.85 3.8-1.5 5.5-1.5 1.65 0 3.35.3 4.75 1.05.1.05.15.05.25.05.25 0 .5-.25.5-.5v-1.1z"}),"AutoStories");t.Z=s},2610:(e,t,n)=>{var r=n(4836);t.Z=void 0;var a=r(n(4938)),i=n(5893),s=(0,a.default)((0,i.jsx)("path",{d:"M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"}),"DragIndicator");t.Z=s},5162:(e,t,n)=>{n.d(t,{Z:()=>s});n(7294);var r=n(6010);const a={tabItem:"tabItem_Ymn6"};var i=n(5893);function s(e){let{children:t,hidden:n,className:s}=e;return(0,i.jsx)("div",{role:"tabpanel",className:(0,r.Z)(a.tabItem,s),hidden:n,children:t})}},4866:(e,t,n)=>{n.d(t,{Z:()=>y});var r=n(7294),a=n(6010),i=n(2466),s=n(6550),o=n(469),l=n(1980),c=n(7392),d=n(12);function h(e){return r.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,r.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 p(e){const{values:t,children:n}=e;return(0,r.useMemo)((()=>{const e=t??function(e){return h(e).map((e=>{let{props:{value:t,label:n,attributes:r,default:a}}=e;return{value:t,label:n,attributes:r,default:a}}))}(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 u(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 a=(0,s.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,r.useCallback)((e=>{if(!i)return;const t=new URLSearchParams(a.location.search);t.set(i,e),a.replace({...a.location,search:t.toString()})}),[i,a])]}function v(e){const{defaultValue:t,queryString:n=!1,groupId:a}=e,i=p(e),[s,l]=(0,r.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(!u({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 r=n.find((e=>e.default))??n[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:t,tabValues:i}))),[c,h]=m({queryString:n,groupId:a}),[v,w]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[a,i]=(0,d.Nk)(n);return[a,(0,r.useCallback)((e=>{n&&i.set(e)}),[n,i])]}({groupId:a}),g=(()=>{const e=c??v;return u({value:e,tabValues:i})?e:null})();(0,o.Z)((()=>{g&&l(g)}),[g]);return{selectedValue:s,selectValue:(0,r.useCallback)((e=>{if(!u({value:e,tabValues:i}))throw new Error(`Can't select invalid tab value=${e}`);l(e),h(e),w(e)}),[h,w,i]),tabValues:i}}var w=n(2389);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=n(5893);function f(e){let{className:t,block:n,selectedValue:r,selectValue:s,tabValues:o}=e;const l=[],{blockElementScrollPositionUntilNextRender:c}=(0,i.o5)(),d=e=>{const t=e.currentTarget,n=l.indexOf(t),a=o[n].value;a!==r&&(c(t),s(a))},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,b.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,a.Z)("tabs",{"tabs--block":n},t),children:o.map((e=>{let{value:t,label:n,attributes:i}=e;return(0,b.jsx)("li",{role:"tab",tabIndex:r===t?0:-1,"aria-selected":r===t,ref:e=>l.push(e),onKeyDown:h,onClick:d,...i,className:(0,a.Z)("tabs__item",g.tabItem,i?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:a}=e;const i=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=i.find((e=>e.props.value===a));return e?(0,r.cloneElement)(e,{className:"margin-top--md"}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:i.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function A(e){const t=v(e);return(0,b.jsxs)("div",{className:(0,a.Z)("tabs-container",g.tabList),children:[(0,b.jsx)(f,{...e,...t}),(0,b.jsx)(x,{...e,...t})]})}function y(e){const t=(0,w.Z)();return(0,b.jsx)(A,{...e,children:h(e.children)},String(t))}},6521:(e,t,n)=>{n.d(t,{Z:()=>i});n(7294);var r=n(917),a=n(5944);function i(e){let{url:t,mobile:n}=e;const i=r.iv`
display: flex;
flex-direction: column;
align-items: center;
@@ -18,13 +18,15 @@
width: 100%;
height: 100%;
background: var(--bbj-surface-3);
- `;return(0,a.tZ)("div",{css:i,children:(0,a.tZ)("div",{css:s,children:(0,a.tZ)("iframe",{src:t,css:o,loading:"lazy"})})})}},6957:(e,t,n)=>{n.d(t,{Z:()=>v});var r=n(7294),a=n(917),i=n(4866),s=n(5162),o=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 p=n(2949),u=n(5944);function m(e){let{collapse:t,setCollapse:n}=e;const r=a.iv`
+ `;return(0,a.tZ)("div",{css:i,children:(0,a.tZ)("div",{css:s,children:(0,a.tZ)("iframe",{src:t,css:o,loading:"lazy"})})})}},6957:(e,t,n)=>{n.d(t,{Z:()=>w});var r=n(7294),a=n(917),i=n(4866),s=n(5162),o=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 p=n(2610),u=n(5944);function m(e){let{collapse:t,setCollapse:n}=e;const r=a.iv`
display: flex;
justify-content: end;
- margin-bottom: -30px;
+ align-items: flex-end;
background-color: transparent;
+ margin-bottom: -10px;
`,i=a.iv`
- position: relative;
+ /* position: absolute;
+ right: 0; */
cursor: pointer;
z-index: 10;
height: 35px;
@@ -32,11 +34,12 @@
border: none;
background-color: none;
justify-self: flex-end;
- margin-right: 5px;
background-color: transparent;
+ margin-right: 5px;
+ margin-bottom: -50px !important;
`,s=a.iv`
filter: invert(var(--inversion-percentage));
- `;return(0,u.tZ)("div",{css:r,children:(0,u.tZ)("button",{css:i,onClick:()=>{n(!t)},children:t?(0,u.tZ)("img",{css:s,src:d,className:"icon-tabler-arrow-bar-up"}):(0,u.tZ)("img",{css:s,src:c,className:"icon-tabler-arrow-bar-down"})})})}function w(e){let{url:t}=e;const n=a.iv`
+ `;return(0,u.tZ)("div",{css:r,children:(0,u.tZ)("button",{css:i,onClick:()=>{n(!t)},children:t?(0,u.tZ)("img",{css:s,src:d,className:"icon-tabler-arrow-bar-up"}):(0,u.tZ)("img",{css:s,src:c,className:"icon-tabler-arrow-bar-down"})})})}function v(e){let{url:t}=e;const n=a.iv`
position: relative;
cursor: pointer;
z-index: 10;
@@ -45,7 +48,6 @@
border: none;
background-color: none;
justify-self: flex-end;
- /* margin-right: 5px; */
margin-top: -5px;
margin-bottom: -20px;
background-color: transparent;
@@ -57,52 +59,95 @@
mix-blend-mode: lighten; /* The blend mode determines how the overlay interacts with the image */
opacity: 0.5;
}
- `;return(0,u.tZ)("button",{css:n,onClick:()=>{window.open(t,"_blank")},children:(0,u.tZ)("img",{css:r,src:h})})}function v(e){let{path:t,javaC:n,javaE:c,cssURL:d,javaHighlight:h,height:v,frame:g,tabs:b}=e;const[f,x]=(0,r.useState)(""),[A,y]=(0,r.useState)(""),[j,D]=(0,r.useState)(""),[T,k]=(0,r.useState)(!(!n||!c)),[B,S]=(0,r.useState)(!1),[Z,z]=(0,r.useState)({});(0,r.useEffect)((()=>{c&&fetch(c).then((e=>e.text())).then((e=>{y(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=>{x(e)})),d&&fetch(d).then((e=>e.text())).then((e=>{D(e);const t=new URL(d).pathname.split("/"),n=t[t.length-1];z((e=>({...e,cssFile:n})))}))}),[]);const C=a.iv`
+ `;return(0,u.tZ)("button",{css:n,onClick:()=>{window.open(t,"_blank")},children:(0,u.tZ)("img",{css:r,src:h})})}function w(e){let{path:t,javaC:n,javaE:c,cssURL:d,javaHighlight:h,height:w,frame:g,tabs:b}=e;const[f,x]=(0,r.useState)(""),[A,y]=(0,r.useState)(""),[j,D]=(0,r.useState)(""),[S,k]=(0,r.useState)(!(!n||!c)),[Z,z]=(0,r.useState)(!1),[T,B]=(0,r.useState)({}),[C,E]=(0,r.useState)(!1),[L,O]=(0,r.useState)(0),[M,N]=(0,r.useState)(0),[F,V]=(0,r.useState)(25),[J,H]=(0,r.useState)(25),[X,P]=(0,r.useState)(0),[G,I]=(0,r.useState)(!1),W=(0,r.useRef)(null),Y=(0,r.useRef)(null);(0,r.useEffect)((()=>{c&&fetch(c).then((e=>e.text())).then((e=>{y(e);const t=new URL(c).pathname.split("/"),n=t[t.length-1];B((e=>({...e,javaFile:n})))})),n&&fetch(n).then((e=>e.text())).then((e=>{x(e)})),d&&fetch(d).then((e=>e.text())).then((e=>{D(e);const t=new URL(d).pathname.split("/"),n=t[t.length-1];B((e=>({...e,cssFile:n})))})),P(W.current.offsetWidth),console.log(X)}),[]);const U=()=>{E(!1),console.log("Stop Resizing")},R=e=>{if(C){const t=e.clientX-L;M+t>X/3&&(W.current.style.width=`${M+t}px`,Y.current.style.right=(F-t<25?25:F-t)+"px",H(F-t<25?25:F-t))}},q=a.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);
- `,E=a.iv`
+ /* padding: ${"hidden"==g?"0 15px 0 15px;":"7px 15px 0 15px;"}; */
+ /* box-shadow: var(--ifm-global-shadow-lw); */
+ background-color: var(--code-display-color-background);
+ `,K=a.iv`
+ width: 100%;
+ /* padding: 1em; */
+ border: 1px solid var(--ifm-toc-border-color);
+ border-right: none;
+ background-color: transparent;
+ display: flex;
+ position: relative;
+ `,Q=a.iv`
min-height: 100px;
height: 100%;
width: 100%;
- height: ${v};
- `,L=a.iv`
- border: none;
+ height: ${w||"100%"};
+ pointer-events: none;
+ `,_=a.iv`
+ display: flex;
+ justify-content: flex-end;
+ opacity: 0;
+ transition: opacity 0.3s ease-in-out;
+ ${Z&&"opacity: 1;"};
+ margin: 10px 0 0 0;
+ position: absolute;
+ right: 25px;
+ `,$=a.iv`
+ display: flex;
+ align-items: center;
+ cursor: ew-resize;
+ border-left: 1px solid var(--ifm-toc-border-color);
+ border-right: 1px solid var(--ifm-toc-border-color);
+ background-color: var(--ifm-background-color);
+ `,ee=a.iv`
box-shadow: none;
- background-color: var(--code-display-color);
- margin-bottom: 0px;
- padding: 10px;
+ background-color: var(--ifm-background-color);
+ margin: 0px;
+ padding: 0px;
+ border: 1px solid var(--ifm-toc-border-color);
+ border-top: none;
+ border-radius: 0px;
+ position: relative;
- .tabs{
- margin-top: 20px;
+ div{
+ /* border: none; */
+ border-color: var(--ifm-toc-border-color);
+ padding: 2px 0px 0px 0px;
+ margin: 0px
}
summary{
display: flex;
width: 100%;
justify-content: center;
- margin: 0;
+ margin: 10px 0;
font-weight: bold;
::before{
left: auto;
margin-left: -100px;
+ --docusaurus-details-decoration-color: var(--ifm-color-primary)
}
}
-
- `,O=a.iv`
- width: 100%;
- `,N=a.iv`
- display: flex;
- justify-content: flex-end;
- opacity: 0;
- transition: opacity 0.3s ease-in-out;
- ${B&&"opacity: 1;"};
+ .margin-top--md{
+ margin-top: 0px !important;
+ }
+ ul{
+ margin: -4px 0px!important;
+ }
+ `,te=a.iv`
+ /* :first-child{
+ margin-left: 1em;
+ } */
+ li[aria-selected="true"]{
+ border-color: var(--ifm-color-primary);
+ }
- `;return(0,u.BX)("div",{css:C,children:["hidden"!=g?(0,u.BX)("div",{onMouseEnter:()=>{S(!0)},onMouseLeave:()=>S(!1),css:O,children:[(0,u.tZ)("div",{css:N,children:(0,u.tZ)(w,{url:t})}),(0,u.tZ)("iframe",{loading:"lazy",src:t+"&theme="+("dark"===(0,p.I)().colorMode?"dark":"light"),css:E})]}):null,(0,u.BX)(o.Z,{css:L,summary:(0,u.tZ)("summary",{children:"Show Code"}),children:[n&&c?(0,u.tZ)(m,{collapse:T,setCollapse:k}):null,d?(0,u.BX)(i.Z,{children:[(0,u.tZ)(s.Z,{value:b?b[0]:"Java",label:b?b[0]:Z.javaFile,default:!0,children:(0,u.tZ)(l.Z,{className:"codeDemoBlock",language:"java",showLineNumbers:!0,metastring:h,children:T?f:A})}),(0,u.tZ)(s.Z,{value:b?b[1]:"CSS",label:b?b[1]:Z.cssFile,children:(0,u.tZ)(l.Z,{className:"codeDemoBlock",language:"css",showLineNumbers:!0,children:j})})]}):(0,u.tZ)(i.Z,{children:(0,u.tZ)(s.Z,{value:b?b[0]:"Java",label:b?b[0]:Z.javaFile,default:!0,children:(0,u.tZ)(l.Z,{className:"codeDemoBlock",language:"java",showLineNumbers:!0,metastring:h,children:T?f:A})})})]})]})}},3273:(e,t,n)=>{n.d(t,{Z:()=>c});var r=n(7294),a=n(917),i=n(8230),s=n(4387),o=n(6770);var l=n(5944);function c(e){let{type:t,location:n,top:c,children:d,code:h,suffix:p}=e;const[u,m]=(0,r.useState)("");(0,r.useEffect)((()=>{p||(p=""),m("https://javadoc.io/doc/org.dwcj/dwcj-"+t+"/latest/"+n+".html"+p)}),[]);const w=a.iv`
+ .tabs__item{
+ padding: 5px 20px -2px 20px;
+ border-radius: 0px;
+ }
+ `,ne=a.iv`
+ border-radius: 0px;
+ box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset;
+ `;return(0,u.BX)("div",{css:q,onMouseUp:U,onMouseLeave:U,onMouseMove:R,children:["hidden"!=g?(0,u.BX)("div",{onMouseEnter:()=>{z(!0)},onMouseLeave:()=>z(!1),css:K,children:[(0,u.tZ)("iframe",{onMouseUp:U,loading:"lazy",src:t,css:{...Q,pointerEvents:C?"none":"auto"},ref:W,onMouseMove:R}),(0,u.tZ)("div",{css:_,ref:Y,children:(0,u.tZ)(v,{url:t})}),(0,u.tZ)("div",{css:$,onMouseDown:e=>{e.preventDefault(),E(!0),O(e.clientX),N(W.current.offsetWidth),V(J),console.log(Y.current.right),console.log("Start Resizing")},children:(0,u.tZ)(p.Z,{})})]}):null,(0,u.BX)(o.Z,{css:ee,summary:(0,u.tZ)("summary",{onClick:()=>I(!G),children:G?"Hide Code":"Show Code"}),children:[n&&c?(0,u.tZ)(m,{collapse:S,setCollapse:k}):null,d?(0,u.BX)(i.Z,{css:te,children:[(0,u.tZ)(s.Z,{value:b?b[0]:"Java",label:b?b[0]:T.javaFile,default:!0,children:(0,u.tZ)(l.Z,{css:ne,className:"codeDemoBlock",language:"java",showLineNumbers:!0,metastring:h,children:S?f:A})}),(0,u.tZ)(s.Z,{value:b?b[1]:"CSS",label:b?b[1]:T.cssFile,children:(0,u.tZ)(l.Z,{css:ne,className:"codeDemoBlock",language:"css",showLineNumbers:!0,children:j})})]}):(0,u.tZ)(i.Z,{css:te,children:(0,u.tZ)(s.Z,{value:b?b[0]:"Java",label:b?b[0]:T.javaFile,default:!0,children:(0,u.tZ)(l.Z,{css:ne,className:"codeDemoBlock",language:"java",showLineNumbers:!0,metastring:h,children:S?f:A})})})]})]})}},3273:(e,t,n)=>{n.d(t,{Z:()=>c});var r=n(7294),a=n(917),i=n(8230),s=n(4387),o=n(6031);var l=n(5944);function c(e){let{type:t,location:n,top:c,children:d,code:h,suffix:p}=e;const[u,m]=(0,r.useState)("");(0,r.useEffect)((()=>{p||(p=""),m("https://javadoc.io/doc/org.dwcj/dwcj-"+t+"/latest/"+n+".html"+p)}),[]);const v=a.iv`
display: inline;
${c&&a.iv`
@@ -112,9 +157,10 @@
margin-top: -33px;
margin-bottom: 25px;
`}
- `,v=a.iv`
+ `,w=a.iv`
background-color: #0063CC;
+ padding: 0 0 0 5px;
:hover{
color: white;
}
- `;return(0,l.BX)(l.HY,{children:["true"===c&&(0,l.tZ)("div",{css:w,children:(0,l.tZ)(i.Z,{title:"JavaDoc",arrow:!0,children:(0,l.tZ)(s.Z,{css:v,label:"Java API",component:"a",href:u,icon:(0,l.tZ)(o.Z,{}),clickable:!0,color:"primary",target:"_blank"})})}),"true"!==c&&!h&&(0,l.tZ)("div",{css:w,children:(0,l.tZ)("a",{href:u,target:"_blank",children:d})}),"true"!==c&&h&&(0,l.tZ)("div",{css:w,children:(0,l.tZ)("code",{children:(0,l.tZ)("a",{href:u,target:"_blank",children:d})})})]})}},1415:(e,t,n)=>{n.d(t,{Z:()=>i});n(7294);var r=n(8397),a=n(5893);function i(e){return(0,a.jsx)(a.Fragment,{children:(0,a.jsx)(r.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
+ `;return(0,l.BX)(l.HY,{children:["true"===c&&(0,l.tZ)("div",{css:v,children:(0,l.tZ)(i.Z,{title:"JavaDoc",arrow:!0,children:(0,l.tZ)(s.Z,{css:w,label:"Java API",component:"a",href:u,icon:(0,l.tZ)(o.Z,{}),clickable:!0,color:"primary",target:"_blank"})})}),"true"!==c&&!h&&(0,l.tZ)("div",{css:v,children:(0,l.tZ)("a",{href:u,target:"_blank",children:d})}),"true"!==c&&h&&(0,l.tZ)("div",{css:v,children:(0,l.tZ)("code",{children:(0,l.tZ)("a",{href:u,target:"_blank",children:d})})})]})}},1415:(e,t,n)=>{n.d(t,{Z:()=>i});n(7294);var r=n(8397),a=n(5893);function i(e){return(0,a.jsx)(a.Fragment,{children:(0,a.jsx)(r.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/0577d7e9.f2b1fe1f.js b/assets/js/0577d7e9.103fe79a.js
similarity index 73%
rename from assets/js/0577d7e9.f2b1fe1f.js
rename to assets/js/0577d7e9.103fe79a.js
index 5740b0212..a031ef643 100644
--- a/assets/js/0577d7e9.f2b1fe1f.js
+++ b/assets/js/0577d7e9.103fe79a.js
@@ -1,4 +1,4 @@
-"use strict";(self.webpackChunkdwcj_documentation=self.webpackChunkdwcj_documentation||[]).push([[2084],{978:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>r,contentTitle:()=>o,default:()=>m,frontMatter:()=>c,metadata:()=>d,toc:()=>a});var s=n(5893),i=n(1151),l=n(3273);const c={sidebar_position:0,title:"ListClickEvent",sidebar_class_name:"sidebar--item__hidden",slug:"ListClickEvent"},o=void 0,d={id:"components/events/click-event",title:"ListClickEvent",description:"This event is triggered when the user clicks an item from a List-based component. It provides essential information about the selected item and allows developers to implement custom actions or responses when an item is chosen.",source:"@site/docs/components/events/click-event.md",sourceDirName:"components/events",slug:"/components/events/ListClickEvent",permalink:"/docs/components/events/ListClickEvent",draft:!1,unlisted:!1,editUrl:"https://github.com/DwcJava/dwcjava.github.io/tree/website/docs/components/events/click-event.md",tags:[],version:"current",sidebarPosition:0,frontMatter:{sidebar_position:0,title:"ListClickEvent",sidebar_class_name:"sidebar--item__hidden",slug:"ListClickEvent"},sidebar:"documentationSidebar",previous:{title:"CheckEvent",permalink:"/docs/components/events/CheckEvent"},next:{title:"FocusEvent",permalink:"/docs/components/events/FocusEvent"}},r={},a=[{value:"Event Payload",id:"event-payload",level:2},{value:"See Also",id:"see-also",level:2}];function h(e){const t={a:"a",code:"code",h2:"h2",li:"li",p:"p",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,i.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(l.Z,{type:"engine",location:"org/dwcj/component/event/ListClickEvent",top:"true"}),"\n",(0,s.jsx)(t.p,{children:"This event is triggered when the user clicks an item from a List-based component. It provides essential information about the selected item and allows developers to implement custom actions or responses when an item is chosen."}),"\n",(0,s.jsx)(t.h2,{id:"event-payload",children:"Event Payload"}),"\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:"Method"}),(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)(t.code,{children:"getSelectedIndex()"})}),(0,s.jsx)(t.td,{children:"Returns the selected index, or -1 if no item is selected."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"center"},children:(0,s.jsx)(t.code,{children:"getSelectedItem()"})}),(0,s.jsx)(t.td,{children:"Returns the selected item, or null if no item is selected."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"center"},children:(0,s.jsx)(t.code,{children:"getSelectedIndices()"})}),(0,s.jsx)(t.td,{children:"Returns a list of selected indices, or an empty list if no item is selected. If the list doesn't support multiple selection, the list will contain only one item."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"center"},children:(0,s.jsx)(t.code,{children:"getSelectedItems()"})}),(0,s.jsx)(t.td,{children:"Returns a list of selected items. If the list doesn't support multiple selection, the list will contain only one item."})]})]})]}),"\n",(0,s.jsx)(t.h2,{id:"see-also",children:"See Also"}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"./event",children:"Event"})}),"\n"]})]})}function m(e={}){const{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(h,{...e})}):h(e)}},3273:(e,t,n)=>{n.d(t,{Z:()=>r});var s=n(7294),i=n(917),l=n(8230),c=n(4387),o=n(6770);var d=n(5944);function r(e){let{type:t,location:n,top:r,children:a,code:h,suffix:m}=e;const[p,v]=(0,s.useState)("");(0,s.useEffect)((()=>{m||(m=""),v("https://javadoc.io/doc/org.dwcj/dwcj-"+t+"/latest/"+n+".html"+m)}),[]);const u=i.iv`
+"use strict";(self.webpackChunkdwcj_documentation=self.webpackChunkdwcj_documentation||[]).push([[2084],{978:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>r,contentTitle:()=>o,default:()=>v,frontMatter:()=>l,metadata:()=>d,toc:()=>a});var s=n(5893),i=n(1151),c=n(3273);const l={sidebar_position:0,title:"ListClickEvent",sidebar_class_name:"sidebar--item__hidden",slug:"ListClickEvent"},o=void 0,d={id:"components/events/click-event",title:"ListClickEvent",description:"This event is triggered when the user clicks an item from a List-based component. It provides essential information about the selected item and allows developers to implement custom actions or responses when an item is chosen.",source:"@site/docs/components/events/click-event.md",sourceDirName:"components/events",slug:"/components/events/ListClickEvent",permalink:"/docs/components/events/ListClickEvent",draft:!1,unlisted:!1,editUrl:"https://github.com/DwcJava/dwcjava.github.io/tree/website/docs/components/events/click-event.md",tags:[],version:"current",sidebarPosition:0,frontMatter:{sidebar_position:0,title:"ListClickEvent",sidebar_class_name:"sidebar--item__hidden",slug:"ListClickEvent"},sidebar:"documentationSidebar",previous:{title:"CheckEvent",permalink:"/docs/components/events/CheckEvent"},next:{title:"FocusEvent",permalink:"/docs/components/events/FocusEvent"}},r={},a=[{value:"Event Payload",id:"event-payload",level:2},{value:"See Also",id:"see-also",level:2}];function h(e){const t={a:"a",code:"code",h2:"h2",li:"li",p:"p",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,i.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(c.Z,{type:"engine",location:"org/dwcj/component/event/ListClickEvent",top:"true"}),"\n",(0,s.jsx)(t.p,{children:"This event is triggered when the user clicks an item from a List-based component. It provides essential information about the selected item and allows developers to implement custom actions or responses when an item is chosen."}),"\n",(0,s.jsx)(t.h2,{id:"event-payload",children:"Event Payload"}),"\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:"Method"}),(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)(t.code,{children:"getSelectedIndex()"})}),(0,s.jsx)(t.td,{children:"Returns the selected index, or -1 if no item is selected."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"center"},children:(0,s.jsx)(t.code,{children:"getSelectedItem()"})}),(0,s.jsx)(t.td,{children:"Returns the selected item, or null if no item is selected."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"center"},children:(0,s.jsx)(t.code,{children:"getSelectedIndices()"})}),(0,s.jsx)(t.td,{children:"Returns a list of selected indices, or an empty list if no item is selected. If the list doesn't support multiple selection, the list will contain only one item."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"center"},children:(0,s.jsx)(t.code,{children:"getSelectedItems()"})}),(0,s.jsx)(t.td,{children:"Returns a list of selected items. If the list doesn't support multiple selection, the list will contain only one item."})]})]})]}),"\n",(0,s.jsx)(t.h2,{id:"see-also",children:"See Also"}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"./event",children:"Event"})}),"\n"]})]})}function v(e={}){const{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(h,{...e})}):h(e)}},6031:(e,t,n)=>{var s=n(4836);t.Z=void 0;var i=s(n(4938)),c=n(5893),l=(0,i.default)((0,c.jsx)("path",{d:"m19 1-5 5v11l5-4.5V1zM1 6v14.65c0 .25.25.5.5.5.1 0 .15-.05.25-.05C3.1 20.45 5.05 20 6.5 20c1.95 0 4.05.4 5.5 1.5V6c-1.45-1.1-3.55-1.5-5.5-1.5S2.45 4.9 1 6zm22 13.5V6c-.6-.45-1.25-.75-2-1v13.5c-1.1-.35-2.3-.5-3.5-.5-1.7 0-4.15.65-5.5 1.5v2c1.35-.85 3.8-1.5 5.5-1.5 1.65 0 3.35.3 4.75 1.05.1.05.15.05.25.05.25 0 .5-.25.5-.5v-1.1z"}),"AutoStories");t.Z=l},3273:(e,t,n)=>{n.d(t,{Z:()=>r});var s=n(7294),i=n(917),c=n(8230),l=n(4387),o=n(6031);var d=n(5944);function r(e){let{type:t,location:n,top:r,children:a,code:h,suffix:v}=e;const[m,p]=(0,s.useState)("");(0,s.useEffect)((()=>{v||(v=""),p("https://javadoc.io/doc/org.dwcj/dwcj-"+t+"/latest/"+n+".html"+v)}),[]);const u=i.iv`
display: inline;
${r&&i.iv`
@@ -10,7 +10,8 @@
`}
`,x=i.iv`
background-color: #0063CC;
+ padding: 0 0 0 5px;
:hover{
color: white;
}
- `;return(0,d.BX)(d.HY,{children:["true"===r&&(0,d.tZ)("div",{css:u,children:(0,d.tZ)(l.Z,{title:"JavaDoc",arrow:!0,children:(0,d.tZ)(c.Z,{css:x,label:"Java API",component:"a",href:p,icon:(0,d.tZ)(o.Z,{}),clickable:!0,color:"primary",target:"_blank"})})}),"true"!==r&&!h&&(0,d.tZ)("div",{css:u,children:(0,d.tZ)("a",{href:p,target:"_blank",children:a})}),"true"!==r&&h&&(0,d.tZ)("div",{css:u,children:(0,d.tZ)("code",{children:(0,d.tZ)("a",{href:p,target:"_blank",children:a})})})]})}}}]);
\ No newline at end of file
+ `;return(0,d.BX)(d.HY,{children:["true"===r&&(0,d.tZ)("div",{css:u,children:(0,d.tZ)(c.Z,{title:"JavaDoc",arrow:!0,children:(0,d.tZ)(l.Z,{css:x,label:"Java API",component:"a",href:m,icon:(0,d.tZ)(o.Z,{}),clickable:!0,color:"primary",target:"_blank"})})}),"true"!==r&&!h&&(0,d.tZ)("div",{css:u,children:(0,d.tZ)("a",{href:m,target:"_blank",children:a})}),"true"!==r&&h&&(0,d.tZ)("div",{css:u,children:(0,d.tZ)("code",{children:(0,d.tZ)("a",{href:m,target:"_blank",children:a})})})]})}}}]);
\ No newline at end of file
diff --git a/assets/js/23e38187.b192406a.js b/assets/js/23e38187.3a95bb78.js
similarity index 73%
rename from assets/js/23e38187.b192406a.js
rename to assets/js/23e38187.3a95bb78.js
index a3bab8216..0c410549c 100644
--- a/assets/js/23e38187.b192406a.js
+++ b/assets/js/23e38187.3a95bb78.js
@@ -1,4 +1,4 @@
-"use strict";(self.webpackChunkdwcj_documentation=self.webpackChunkdwcj_documentation||[]).push([[4384],{3299:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>a,contentTitle:()=>d,default:()=>v,frontMatter:()=>c,metadata:()=>r,toc:()=>l});var s=n(5893),o=n(1151),i=n(3273);const c={sidebar_position:0,title:"Event",sidebar_class_name:"sidebar--item__hidden",slug:"event",pagination_prev:null},d=void 0,r={id:"components/events/event",title:"Event",description:"This class is the base class for all events fired by the components. It is extended by the other events implemented by various components, and can also be extended to create custom events.",source:"@site/docs/components/events/event.md",sourceDirName:"components/events",slug:"/components/events/event",permalink:"/docs/components/events/event",draft:!1,unlisted:!1,editUrl:"https://github.com/DwcJava/dwcjava.github.io/tree/website/docs/components/events/event.md",tags:[],version:"current",sidebarPosition:0,frontMatter:{sidebar_position:0,title:"Event",sidebar_class_name:"sidebar--item__hidden",slug:"event",pagination_prev:null},sidebar:"documentationSidebar",next:{title:"BlurEvent",permalink:"/docs/components/events/BlurEvent"}},a={},l=[{value:"Event Payload",id:"event-payload",level:2}];function h(e){const t={code:"code",h2:"h2",p:"p",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,o.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(i.Z,{type:"engine",location:"org/dwcj/component/event/Event",top:"true"}),"\n",(0,s.jsx)(t.p,{children:"This class is the base class for all events fired by the components. It is extended by the other events implemented by various components, and can also be extended to create custom events."}),"\n",(0,s.jsx)(t.h2,{id:"event-payload",children:"Event Payload"}),"\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:"Method"}),(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)(t.code,{children:"getData()"})}),(0,s.jsx)(t.td,{children:"Get the event map sent by the component."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"center"},children:(0,s.jsx)(t.code,{children:"getEventMap()"})}),(0,s.jsxs)(t.td,{children:["Alias for the ",(0,s.jsx)(t.code,{children:"getData()"})," method above."]})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"center"},children:(0,s.jsx)(t.code,{children:"getControl()"})}),(0,s.jsx)(t.td,{children:"Gets the control."})]})]})]})]})}function v(e={}){const{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(h,{...e})}):h(e)}},3273:(e,t,n)=>{n.d(t,{Z:()=>a});var s=n(7294),o=n(917),i=n(8230),c=n(4387),d=n(6770);var r=n(5944);function a(e){let{type:t,location:n,top:a,children:l,code:h,suffix:v}=e;const[p,m]=(0,s.useState)("");(0,s.useEffect)((()=>{v||(v=""),m("https://javadoc.io/doc/org.dwcj/dwcj-"+t+"/latest/"+n+".html"+v)}),[]);const u=o.iv`
+"use strict";(self.webpackChunkdwcj_documentation=self.webpackChunkdwcj_documentation||[]).push([[4384],{3299:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>a,contentTitle:()=>d,default:()=>v,frontMatter:()=>i,metadata:()=>r,toc:()=>l});var s=n(5893),o=n(1151),c=n(3273);const i={sidebar_position:0,title:"Event",sidebar_class_name:"sidebar--item__hidden",slug:"event",pagination_prev:null},d=void 0,r={id:"components/events/event",title:"Event",description:"This class is the base class for all events fired by the components. It is extended by the other events implemented by various components, and can also be extended to create custom events.",source:"@site/docs/components/events/event.md",sourceDirName:"components/events",slug:"/components/events/event",permalink:"/docs/components/events/event",draft:!1,unlisted:!1,editUrl:"https://github.com/DwcJava/dwcjava.github.io/tree/website/docs/components/events/event.md",tags:[],version:"current",sidebarPosition:0,frontMatter:{sidebar_position:0,title:"Event",sidebar_class_name:"sidebar--item__hidden",slug:"event",pagination_prev:null},sidebar:"documentationSidebar",next:{title:"BlurEvent",permalink:"/docs/components/events/BlurEvent"}},a={},l=[{value:"Event Payload",id:"event-payload",level:2}];function h(e){const t={code:"code",h2:"h2",p:"p",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,o.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(c.Z,{type:"engine",location:"org/dwcj/component/event/Event",top:"true"}),"\n",(0,s.jsx)(t.p,{children:"This class is the base class for all events fired by the components. It is extended by the other events implemented by various components, and can also be extended to create custom events."}),"\n",(0,s.jsx)(t.h2,{id:"event-payload",children:"Event Payload"}),"\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:"Method"}),(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)(t.code,{children:"getData()"})}),(0,s.jsx)(t.td,{children:"Get the event map sent by the component."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"center"},children:(0,s.jsx)(t.code,{children:"getEventMap()"})}),(0,s.jsxs)(t.td,{children:["Alias for the ",(0,s.jsx)(t.code,{children:"getData()"})," method above."]})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"center"},children:(0,s.jsx)(t.code,{children:"getControl()"})}),(0,s.jsx)(t.td,{children:"Gets the control."})]})]})]})]})}function v(e={}){const{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(h,{...e})}):h(e)}},6031:(e,t,n)=>{var s=n(4836);t.Z=void 0;var o=s(n(4938)),c=n(5893),i=(0,o.default)((0,c.jsx)("path",{d:"m19 1-5 5v11l5-4.5V1zM1 6v14.65c0 .25.25.5.5.5.1 0 .15-.05.25-.05C3.1 20.45 5.05 20 6.5 20c1.95 0 4.05.4 5.5 1.5V6c-1.45-1.1-3.55-1.5-5.5-1.5S2.45 4.9 1 6zm22 13.5V6c-.6-.45-1.25-.75-2-1v13.5c-1.1-.35-2.3-.5-3.5-.5-1.7 0-4.15.65-5.5 1.5v2c1.35-.85 3.8-1.5 5.5-1.5 1.65 0 3.35.3 4.75 1.05.1.05.15.05.25.05.25 0 .5-.25.5-.5v-1.1z"}),"AutoStories");t.Z=i},3273:(e,t,n)=>{n.d(t,{Z:()=>a});var s=n(7294),o=n(917),c=n(8230),i=n(4387),d=n(6031);var r=n(5944);function a(e){let{type:t,location:n,top:a,children:l,code:h,suffix:v}=e;const[p,m]=(0,s.useState)("");(0,s.useEffect)((()=>{v||(v=""),m("https://javadoc.io/doc/org.dwcj/dwcj-"+t+"/latest/"+n+".html"+v)}),[]);const u=o.iv`
display: inline;
${a&&o.iv`
@@ -8,9 +8,10 @@
margin-top: -33px;
margin-bottom: 25px;
`}
- `,b=o.iv`
+ `,x=o.iv`
background-color: #0063CC;
+ padding: 0 0 0 5px;
:hover{
color: white;
}
- `;return(0,r.BX)(r.HY,{children:["true"===a&&(0,r.tZ)("div",{css:u,children:(0,r.tZ)(i.Z,{title:"JavaDoc",arrow:!0,children:(0,r.tZ)(c.Z,{css:b,label:"Java API",component:"a",href:p,icon:(0,r.tZ)(d.Z,{}),clickable:!0,color:"primary",target:"_blank"})})}),"true"!==a&&!h&&(0,r.tZ)("div",{css:u,children:(0,r.tZ)("a",{href:p,target:"_blank",children:l})}),"true"!==a&&h&&(0,r.tZ)("div",{css:u,children:(0,r.tZ)("code",{children:(0,r.tZ)("a",{href:p,target:"_blank",children:l})})})]})}}}]);
\ No newline at end of file
+ `;return(0,r.BX)(r.HY,{children:["true"===a&&(0,r.tZ)("div",{css:u,children:(0,r.tZ)(c.Z,{title:"JavaDoc",arrow:!0,children:(0,r.tZ)(i.Z,{css:x,label:"Java API",component:"a",href:p,icon:(0,r.tZ)(d.Z,{}),clickable:!0,color:"primary",target:"_blank"})})}),"true"!==a&&!h&&(0,r.tZ)("div",{css:u,children:(0,r.tZ)("a",{href:p,target:"_blank",children:l})}),"true"!==a&&h&&(0,r.tZ)("div",{css:u,children:(0,r.tZ)("code",{children:(0,r.tZ)("a",{href:p,target:"_blank",children:l})})})]})}}}]);
\ No newline at end of file
diff --git a/assets/js/2abf1b13.04b81686.js b/assets/js/2abf1b13.04b81686.js
deleted file mode 100644
index f8f8a7abe..000000000
--- a/assets/js/2abf1b13.04b81686.js
+++ /dev/null
@@ -1,100 +0,0 @@
-"use strict";(self.webpackChunkdwcj_documentation=self.webpackChunkdwcj_documentation||[]).push([[4373],{6672:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>u,contentTitle:()=>d,default:()=>b,frontMatter:()=>c,metadata:()=>h,toc:()=>p});var n=s(5893),i=s(1151),o=s(6957),r=s(7796),a=s(3273),l=s(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:"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",strong:"strong",ul:"ul",...(0,i.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.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,n.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,n.jsx)(a.Z,{type:"engine",location:"org/dwcj/component/button/Button",top:"true"}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.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,n.jsx)(t.code,{children:"ListBox"})," with the arrow keys."]}),"\n",(0,n.jsx)(t.h2,{id:"usages",children:"Usages"}),"\n",(0,n.jsxs)(t.ol,{children:["\n",(0,n.jsxs)(t.li,{children:["\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.strong,{children:"User Role Assignment"}),": In applications with user access control, administrators can use a ",(0,n.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,n.jsxs)(t.li,{children:["\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.strong,{children:"Project Task Assignment"}),": In project management software, ",(0,n.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,n.jsxs)(t.li,{children:["\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.strong,{children:"Multi-Category Filtering"}),": In a search application, users often need to filter search results based on multiple criteria. A ",(0,n.jsx)(t.code,{children:"ListBox"})," can display various filter options, such as"]}),"\n"]}),"\n"]}),"\n",(0,n.jsxs)(t.blockquote,{children:["\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsx)(t.li,{children:"Product features"}),"\n",(0,n.jsx)(t.li,{children:"Price ranges"}),"\n",(0,n.jsx)(t.li,{children:"Brands."}),"\n"]}),"\n"]}),"\n",(0,n.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,n.jsxs)(t.ol,{start:"4",children:["\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.strong,{children:"Content Categorization"}),": In content management systems, ",(0,n.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,n.jsx)(t.h2,{id:"constructors",children:"Constructors"}),"\n",(0,n.jsxs)(t.ol,{children:["\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(a.Z,{type:"engine",location:"org/dwcj/component/list/ListBox",code:"true",suffix:"#()",children:"ListBox()"}),": Constructs a new ",(0,n.jsx)(t.code,{children:"ListBox"})," without a label."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(a.Z,{type:"engine",location:"org/dwcj/component/list/ListBox",code:"true",suffix:"#(java.lang.String)",children:"ListBox(String label)"}),": Constructs a new ",(0,n.jsx)(t.code,{children:"ListBox"})," with the specified label."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(a.Z,{type:"engine",location:"org/dwcj/component/list/ListBox",code:"true",suffix:"#(java.lang.String,org.dwcj.component.event.ComponentEventListener)",children:"ListBox(String label, ComponentEventListener< ListSelectEvent> selectListener)"}),": Constructs a new ",(0,n.jsx)(t.code,{children:"ListBox"})," with the given label and a listener to handle item selection events."]}),"\n"]}),"\n",(0,n.jsx)(t.h2,{id:"selection-options",children:"Selection Options"}),"\n",(0,n.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,n.jsx)(t.em,{children:(0,n.jsxs)(t.strong,{children:["using the ",(0,n.jsx)(t.code,{children:"Shift"})," key"]})})," for contiguous entry selection and ",(0,n.jsx)(t.em,{children:(0,n.jsxs)(t.strong,{children:[(0,n.jsx)(t.code,{children:"Control"})," (Windows) or ",(0,n.jsx)(t.code,{children:"Command"})," (Mac) key"]})})," for separate, multiple item selection. Use the ",(0,n.jsx)(a.Z,{type:"engine",location:"org/dwcj/component/list/ListBox",code:"true",suffix:"#setSelectionMode(org.dwcj.component.list.MultipleSelectableList.SelectionMode)",children:"setSelectionMode()"})," function to change this property. True will enable multiple selection, false disables it."]}),"\n",(0,n.jsxs)(t.p,{children:["Additionally, the arrow keys can be used to navigate the ",(0,n.jsx)(t.code,{children:"ListBox"}),", and typing a letter key while the ",(0,n.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,n.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,n.jsx)(t.h2,{id:"events",children:"Events"}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.code,{children:"ListBox"})," class provides methods to add and remove event listeners for the events common to all list components."]}),"\n",(0,n.jsx)(t.admonition,{type:"tip",children:(0,n.jsxs)(t.p,{children:["For a list of events supported by the ",(0,n.jsx)(t.code,{children:"ListBox"}),", see ",(0,n.jsx)(t.a,{href:"/docs/components/list-components/lists#shared-events",children:"this section"})," which outlines shared events amongst list components."]})}),"\n",(0,n.jsx)(t.h2,{id:"styling",children:"Styling"}),"\n",(0,n.jsx)(t.h3,{id:"expanses",children:"Expanses"}),"\n",(0,n.jsxs)(t.p,{children:["There are five ",(0,n.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,n.jsx)("br",{})]}),"\n",(0,n.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,n.jsx)(t.h3,{id:"shadow-parts",children:"Shadow Parts"}),"\n",(0,n.jsxs)(t.p,{children:["These are the various parts of the ",(0,n.jsx)(t.a,{href:"../../glossary#shadow-dom",children:"shadow DOM"})," for the ",(0,n.jsx)(t.code,{children:"ListBox"})," component, which will be required when styling via CSS is desired."]}),"\n",(0,n.jsx)(r.Z,{tag:s(5731).wb,table:"parts",exclusions:""}),"\n",(0,n.jsx)(t.h3,{id:"css-properties",children:"CSS Properties"}),"\n",(0,n.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,n.jsx)(r.Z,{tag:s(5731).wb,exclusions:"",table:"properties"}),"\n",(0,n.jsx)(t.h3,{id:"reflected-attributes",children:"Reflected Attributes"}),"\n",(0,n.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,n.jsx)(r.Z,{tag:s(5731).wb,table:"reflects",exclusions:""}),"\n",(0,n.jsx)(t.h3,{id:"dependencies",children:"Dependencies"}),"\n",(0,n.jsx)(t.p,{children:"This component relies on the following components - see the related article for more detailed styling information:"}),"\n",(0,n.jsx)(r.Z,{tag:"bbj-list",table:"dependencies"}),"\n",(0,n.jsx)(t.h2,{id:"best-practices",children:"Best Practices"}),"\n",(0,n.jsxs)(t.p,{children:["To ensure an optimal user experience when using the ",(0,n.jsx)(t.code,{children:"ChoiceBox"})," component, consider the following best practices:"]}),"\n",(0,n.jsxs)(t.ol,{children:["\n",(0,n.jsxs)(t.li,{children:["\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.strong,{children:"Prioritize Information Hierarchy"}),": When using a ",(0,n.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,n.jsxs)(t.li,{children:["\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.strong,{children:"Limit List Length"}),": Avoid overwhelming users with an excessively long ",(0,n.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,n.jsxs)(t.li,{children:["\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.strong,{children:"Clear and Descriptive Labels"}),": Provide clear and descriptive labels for each item in the ",(0,n.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,n.jsxs)(t.li,{children:["\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.strong,{children:"Multi-Selection Feedback"}),": If your ",(0,n.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,n.jsxs)(t.li,{children:["\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.strong,{children:"Default Selection"}),": Consider setting a default selection for the ",(0,n.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,n.jsx)(t,{...e,children:(0,n.jsx)(m,{...e})}):m(e)}},5162:(e,t,s)=>{s.d(t,{Z:()=>r});s(7294);var n=s(6010);const i={tabItem:"tabItem_Ymn6"};var o=s(5893);function r(e){let{children:t,hidden:s,className:r}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,n.Z)(i.tabItem,r),hidden:s,children:t})}},4866:(e,t,s)=>{s.d(t,{Z:()=>j});var n=s(7294),i=s(6010),o=s(2466),r=s(6550),a=s(469),l=s(1980),c=s(7392),d=s(12);function h(e){return n.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,n.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:s}=e;return(0,n.useMemo)((()=>{const e=t??function(e){return h(e).map((e=>{let{props:{value:t,label:s,attributes:n,default:i}}=e;return{value:t,label:s,attributes:n,default:i}}))}(s);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,s])}function p(e){let{value:t,tabValues:s}=e;return s.some((e=>e.value===t))}function m(e){let{queryString:t=!1,groupId:s}=e;const i=(0,r.k6)(),o=function(e){let{queryString:t=!1,groupId:s}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!s)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 s??null}({queryString:t,groupId:s});return[(0,l._X)(o),(0,n.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:s=!1,groupId:i}=e,o=u(e),[r,l]=(0,n.useState)((()=>function(e){let{defaultValue:t,tabValues:s}=e;if(0===s.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!p({value:t,tabValues:s}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${s.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const n=s.find((e=>e.default))??s[0];if(!n)throw new Error("Unexpected error: 0 tabValues");return n.value}({defaultValue:t,tabValues:o}))),[c,h]=m({queryString:s,groupId:i}),[b,x]=function(e){let{groupId:t}=e;const s=function(e){return e?`docusaurus.tab.${e}`:null}(t),[i,o]=(0,d.Nk)(s);return[i,(0,n.useCallback)((e=>{s&&o.set(e)}),[s,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,n.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=s(2389);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var A=s(5893);function v(e){let{className:t,block:s,selectedValue:n,selectValue:r,tabValues:a}=e;const l=[],{blockElementScrollPositionUntilNextRender:c}=(0,o.o5)(),d=e=>{const t=e.currentTarget,s=l.indexOf(t),i=a[s].value;i!==n&&(c(t),r(i))},h=e=>{let t=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":{const s=l.indexOf(e.currentTarget)+1;t=l[s]??l[0];break}case"ArrowLeft":{const s=l.indexOf(e.currentTarget)-1;t=l[s]??l[l.length-1];break}}t?.focus()};return(0,A.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,i.Z)("tabs",{"tabs--block":s},t),children:a.map((e=>{let{value:t,label:s,attributes:o}=e;return(0,A.jsx)("li",{role:"tab",tabIndex:n===t?0:-1,"aria-selected":n===t,ref:e=>l.push(e),onKeyDown:h,onClick:d,...o,className:(0,i.Z)("tabs__item",g.tabItem,o?.className,{"tabs__item--active":n===t}),children:s??t},t)}))})}function f(e){let{lazy:t,children:s,selectedValue:i}=e;const o=(Array.isArray(s)?s:[s]).filter(Boolean);if(t){const e=o.find((e=>e.props.value===i));return e?(0,n.cloneElement)(e,{className:"margin-top--md"}):null}return(0,A.jsx)("div",{className:"margin-top--md",children:o.map(((e,t)=>(0,n.cloneElement)(e,{key:t,hidden:e.props.value!==i})))})}function w(e){const t=b(e);return(0,A.jsxs)("div",{className:(0,i.Z)("tabs-container",g.tabList),children:[(0,A.jsx)(v,{...e,...t}),(0,A.jsx)(f,{...e,...t})]})}function j(e){const t=(0,x.Z)();return(0,A.jsx)(w,{...e,children:h(e.children)},String(t))}},6957:(e,t,s)=>{s.d(t,{Z:()=>x});var n=s(7294),i=s(917),o=s(4866),r=s(5162),a=s(4673),l=s(1750);const c="data:image/png;base64,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",d=s.p+"assets/images/expand-ba3f00f73da43d91e5b17663c4a7d108.png",h="data:image/png;base64,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";var u=s(2949),p=s(5944);function m(e){let{collapse:t,setCollapse:s}=e;const n=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:n,children:(0,p.tZ)("button",{css:o,onClick:()=>{s(!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 s=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;
-
-
- `,n=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:s,onClick:()=>{window.open(t,"_blank")},children:(0,p.tZ)("img",{css:n,src:h})})}function x(e){let{path:t,javaC:s,javaE:c,cssURL:d,javaHighlight:h,height:x,frame:g,tabs:A}=e;const[v,f]=(0,n.useState)(""),[w,j]=(0,n.useState)(""),[y,B]=(0,n.useState)(""),[L,k]=(0,n.useState)(!(!s||!c)),[S,D]=(0,n.useState)(!1),[Z,C]=(0,n.useState)({});(0,n.useEffect)((()=>{c&&fetch(c).then((e=>e.text())).then((e=>{j(e);const t=new URL(c).pathname.split("/"),s=t[t.length-1];C((e=>({...e,javaFile:s})))})),s&&fetch(s).then((e=>e.text())).then((e=>{f(e)})),d&&fetch(d).then((e=>e.text())).then((e=>{B(e);const t=new URL(d).pathname.split("/"),s=t[t.length-1];C((e=>({...e,cssFile:s})))}))}),[]);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);
- `,M=i.iv`
- min-height: 100px;
- height: 100%;
- width: 100%;
- height: ${x};
- `,T=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;
- }
- }
-
- `,N=i.iv`
- width: 100%;
- `,O=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:()=>{D(!0)},onMouseLeave:()=>D(!1),css:N,children:[(0,p.tZ)("div",{css:O,children:(0,p.tZ)(b,{url:t})}),(0,p.tZ)("iframe",{loading:"lazy",src:t+"&theme="+("dark"===(0,u.I)().colorMode?"dark":"light"),css:M})]}):null,(0,p.BX)(a.Z,{css:T,summary:(0,p.tZ)("summary",{children:"Show Code"}),children:[s&&c?(0,p.tZ)(m,{collapse:L,setCollapse:k}):null,d?(0,p.BX)(o.Z,{children:[(0,p.tZ)(r.Z,{value:A?A[0]:"Java",label:A?A[0]:Z.javaFile,default:!0,children:(0,p.tZ)(l.Z,{className:"codeDemoBlock",language:"java",showLineNumbers:!0,metastring:h,children:L?v:w})}),(0,p.tZ)(r.Z,{value:A?A[1]:"CSS",label:A?A[1]:Z.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:A?A[0]:"Java",label:A?A[0]:Z.javaFile,default:!0,children:(0,p.tZ)(l.Z,{className:"codeDemoBlock",language:"java",showLineNumbers:!0,metastring:h,children:L?v:w})})})]})]})}},3273:(e,t,s)=>{s.d(t,{Z:()=>c});var n=s(7294),i=s(917),o=s(8230),r=s(4387),a=s(6770);var l=s(5944);function c(e){let{type:t,location:s,top:c,children:d,code:h,suffix:u}=e;const[p,m]=(0,n.useState)("");(0,n.useEffect)((()=>{u||(u=""),m("https://javadoc.io/doc/org.dwcj/dwcj-"+t+"/latest/"+s+".html"+u)}),[]);const b=i.iv`
- display: inline;
-
- ${c&&i.iv`
- width: 100%;
- display: flex;
- justify-content: flex-end;
- margin-top: -33px;
- margin-bottom: 25px;
- `}
- `,x=i.iv`
- background-color: #0063CC;
- :hover{
- color: white;
- }
- `;return(0,l.BX)(l.HY,{children:["true"===c&&(0,l.tZ)("div",{css:b,children:(0,l.tZ)(o.Z,{title:"JavaDoc",arrow:!0,children:(0,l.tZ)(r.Z,{css:x,label:"Java API",component:"a",href:p,icon:(0,l.tZ)(a.Z,{}),clickable:!0,color:"primary",target:"_blank"})})}),"true"!==c&&!h&&(0,l.tZ)("div",{css:b,children:(0,l.tZ)("a",{href:p,target:"_blank",children:d})}),"true"!==c&&h&&(0,l.tZ)("div",{css:b,children:(0,l.tZ)("code",{children:(0,l.tZ)("a",{href:p,target:"_blank",children:d})})})]})}},1415:(e,t,s)=>{s.d(t,{Z:()=>o});s(7294);var n=s(8397),i=s(5893);function o(e){return(0,i.jsx)(i.Fragment,{children:(0,i.jsx)(n.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.a799f4af.js b/assets/js/2abf1b13.a799f4af.js
new file mode 100644
index 000000000..710672bde
--- /dev/null
+++ b/assets/js/2abf1b13.a799f4af.js
@@ -0,0 +1,146 @@
+"use strict";(self.webpackChunkdwcj_documentation=self.webpackChunkdwcj_documentation||[]).push([[4373],{6672:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>h,contentTitle:()=>d,default:()=>b,frontMatter:()=>c,metadata:()=>u,toc:()=>p});var s=n(5893),i=n(1151),o=n(6957),r=n(7796),l=n(3273),a=n(2665);const c={sidebar_position:3,title:"ListBox",slug:"listbox"},d=void 0,u={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"}},h={},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:"Styling",id:"styling",level:2},{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",strong:"strong",ul:"ul",...(0,i.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(a.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)(a.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)(l.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)(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)(l.Z,{type:"engine",location:"org/dwcj/component/list/ListBox",code:"true",suffix:"#()",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)(l.Z,{type:"engine",location:"org/dwcj/component/list/ListBox",code:"true",suffix:"#(java.lang.String)",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)(l.Z,{type:"engine",location:"org/dwcj/component/list/ListBox",code:"true",suffix:"#(java.lang.String,org.dwcj.component.event.ComponentEventListener)",children:"ListBox(String label, ComponentEventListener< ListSelectEvent> 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)(l.Z,{type:"engine",location:"org/dwcj/component/list/ListBox",code:"true",suffix:"#setSelectionMode(org.dwcj.component.list.MultipleSelectableList.SelectionMode)",children:"setSelectionMode()"})," 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",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.h2,{id:"styling",children:"Styling"}),"\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)}},6031:(e,t,n)=>{var s=n(4836);t.Z=void 0;var i=s(n(4938)),o=n(5893),r=(0,i.default)((0,o.jsx)("path",{d:"m19 1-5 5v11l5-4.5V1zM1 6v14.65c0 .25.25.5.5.5.1 0 .15-.05.25-.05C3.1 20.45 5.05 20 6.5 20c1.95 0 4.05.4 5.5 1.5V6c-1.45-1.1-3.55-1.5-5.5-1.5S2.45 4.9 1 6zm22 13.5V6c-.6-.45-1.25-.75-2-1v13.5c-1.1-.35-2.3-.5-3.5-.5-1.7 0-4.15.65-5.5 1.5v2c1.35-.85 3.8-1.5 5.5-1.5 1.65 0 3.35.3 4.75 1.05.1.05.15.05.25.05.25 0 .5-.25.5-.5v-1.1z"}),"AutoStories");t.Z=r},2610:(e,t,n)=>{var s=n(4836);t.Z=void 0;var i=s(n(4938)),o=n(5893),r=(0,i.default)((0,o.jsx)("path",{d:"M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"}),"DragIndicator");t.Z=r},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),l=n(469),a=n(1980),c=n(7392),d=n(12);function u(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 h(e){const{values:t,children:n}=e;return(0,s.useMemo)((()=>{const e=t??function(e){return u(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,a._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=h(e),[r,a]=(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,u]=m({queryString:n,groupId:i}),[b,g]=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}),x=(()=>{const e=c??b;return p({value:e,tabValues:o})?e:null})();(0,l.Z)((()=>{x&&a(x)}),[x]);return{selectedValue:r,selectValue:(0,s.useCallback)((e=>{if(!p({value:e,tabValues:o}))throw new Error(`Can't select invalid tab value=${e}`);a(e),u(e),g(e)}),[u,g,o]),tabValues:o}}var g=n(2389);const x={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var A=n(5893);function f(e){let{className:t,block:n,selectedValue:s,selectValue:r,tabValues:l}=e;const a=[],{blockElementScrollPositionUntilNextRender:c}=(0,o.o5)(),d=e=>{const t=e.currentTarget,n=a.indexOf(t),i=l[n].value;i!==s&&(c(t),r(i))},u=e=>{let t=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":{const n=a.indexOf(e.currentTarget)+1;t=a[n]??a[0];break}case"ArrowLeft":{const n=a.indexOf(e.currentTarget)-1;t=a[n]??a[a.length-1];break}}t?.focus()};return(0,A.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,i.Z)("tabs",{"tabs--block":n},t),children:l.map((e=>{let{value:t,label:n,attributes:o}=e;return(0,A.jsx)("li",{role:"tab",tabIndex:s===t?0:-1,"aria-selected":s===t,ref:e=>a.push(e),onKeyDown:u,onClick:d,...o,className:(0,i.Z)("tabs__item",x.tabItem,o?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function v(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,A.jsx)("div",{className:"margin-top--md",children:o.map(((e,t)=>(0,s.cloneElement)(e,{key:t,hidden:e.props.value!==i})))})}function w(e){const t=b(e);return(0,A.jsxs)("div",{className:(0,i.Z)("tabs-container",x.tabList),children:[(0,A.jsx)(f,{...e,...t}),(0,A.jsx)(v,{...e,...t})]})}function j(e){const t=(0,g.Z)();return(0,A.jsx)(w,{...e,children:u(e.children)},String(t))}},6957:(e,t,n)=>{n.d(t,{Z:()=>g});var s=n(7294),i=n(917),o=n(4866),r=n(5162),l=n(4673),a=n(1750);const c="data:image/png;base64,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",d=n.p+"assets/images/expand-ba3f00f73da43d91e5b17663c4a7d108.png",u="data:image/png;base64,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";var h=n(2610),p=n(5944);function m(e){let{collapse:t,setCollapse:n}=e;const s=i.iv`
+ display: flex;
+ justify-content: end;
+ align-items: flex-end;
+ background-color: transparent;
+ margin-bottom: -10px;
+ `,o=i.iv`
+ /* position: absolute;
+ right: 0; */
+ cursor: pointer;
+ z-index: 10;
+ height: 35px;
+ width: 35px;
+ border: none;
+ background-color: none;
+ justify-self: flex-end;
+ background-color: transparent;
+ margin-right: 5px;
+ margin-bottom: -50px !important;
+ `,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-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:u})})}function g(e){let{path:t,javaC:n,javaE:c,cssURL:d,javaHighlight:u,height:g,frame:x,tabs:A}=e;const[f,v]=(0,s.useState)(""),[w,j]=(0,s.useState)(""),[y,B]=(0,s.useState)(""),[S,k]=(0,s.useState)(!(!n||!c)),[Z,L]=(0,s.useState)(!1),[D,C]=(0,s.useState)({}),[E,M]=(0,s.useState)(!1),[z,T]=(0,s.useState)(0),[N,O]=(0,s.useState)(0),[V,H]=(0,s.useState)(25),[F,X]=(0,s.useState)(25),[J,P]=(0,s.useState)(0),[G,Y]=(0,s.useState)(!1),I=(0,s.useRef)(null),U=(0,s.useRef)(null);(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];C((e=>({...e,javaFile:n})))})),n&&fetch(n).then((e=>e.text())).then((e=>{v(e)})),d&&fetch(d).then((e=>e.text())).then((e=>{B(e);const t=new URL(d).pathname.split("/"),n=t[t.length-1];C((e=>({...e,cssFile:n})))})),P(I.current.offsetWidth),console.log(J)}),[]);const q=()=>{M(!1),console.log("Stop Resizing")},W=e=>{if(E){const t=e.clientX-z;N+t>J/3&&(I.current.style.width=`${N+t}px`,U.current.style.right=(V-t<25?25:V-t)+"px",X(V-t<25?25:V-t))}},R=i.iv`
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ margin-bottom: 16px;
+ /* padding: ${"hidden"==x?"0 15px 0 15px;":"7px 15px 0 15px;"}; */
+ /* box-shadow: var(--ifm-global-shadow-lw); */
+ background-color: var(--code-display-color-background);
+ `,K=i.iv`
+ width: 100%;
+ /* padding: 1em; */
+ border: 1px solid var(--ifm-toc-border-color);
+ border-right: none;
+ background-color: transparent;
+ display: flex;
+ position: relative;
+ `,Q=i.iv`
+ min-height: 100px;
+ height: 100%;
+ width: 100%;
+ height: ${g||"100%"};
+ pointer-events: none;
+ `,_=i.iv`
+ display: flex;
+ justify-content: flex-end;
+ opacity: 0;
+ transition: opacity 0.3s ease-in-out;
+ ${Z&&"opacity: 1;"};
+ margin: 10px 0 0 0;
+ position: absolute;
+ right: 25px;
+ `,$=i.iv`
+ display: flex;
+ align-items: center;
+ cursor: ew-resize;
+ border-left: 1px solid var(--ifm-toc-border-color);
+ border-right: 1px solid var(--ifm-toc-border-color);
+ background-color: var(--ifm-background-color);
+ `,ee=i.iv`
+ box-shadow: none;
+ background-color: var(--ifm-background-color);
+ margin: 0px;
+ padding: 0px;
+ border: 1px solid var(--ifm-toc-border-color);
+ border-top: none;
+ border-radius: 0px;
+ position: relative;
+
+ div{
+ /* border: none; */
+ border-color: var(--ifm-toc-border-color);
+ padding: 2px 0px 0px 0px;
+ margin: 0px
+ }
+
+ summary{
+ display: flex;
+ width: 100%;
+ justify-content: center;
+ margin: 10px 0;
+ font-weight: bold;
+ ::before{
+ left: auto;
+ margin-left: -100px;
+ --docusaurus-details-decoration-color: var(--ifm-color-primary)
+ }
+ }
+ .margin-top--md{
+ margin-top: 0px !important;
+ }
+ ul{
+ margin: -4px 0px!important;
+ }
+ `,te=i.iv`
+ /* :first-child{
+ margin-left: 1em;
+ } */
+ li[aria-selected="true"]{
+ border-color: var(--ifm-color-primary);
+ }
+
+ .tabs__item{
+ padding: 5px 20px -2px 20px;
+ border-radius: 0px;
+ }
+ `,ne=i.iv`
+ border-radius: 0px;
+ box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset;
+ `;return(0,p.BX)("div",{css:R,onMouseUp:q,onMouseLeave:q,onMouseMove:W,children:["hidden"!=x?(0,p.BX)("div",{onMouseEnter:()=>{L(!0)},onMouseLeave:()=>L(!1),css:K,children:[(0,p.tZ)("iframe",{onMouseUp:q,loading:"lazy",src:t,css:{...Q,pointerEvents:E?"none":"auto"},ref:I,onMouseMove:W}),(0,p.tZ)("div",{css:_,ref:U,children:(0,p.tZ)(b,{url:t})}),(0,p.tZ)("div",{css:$,onMouseDown:e=>{e.preventDefault(),M(!0),T(e.clientX),O(I.current.offsetWidth),H(F),console.log(U.current.right),console.log("Start Resizing")},children:(0,p.tZ)(h.Z,{})})]}):null,(0,p.BX)(l.Z,{css:ee,summary:(0,p.tZ)("summary",{onClick:()=>Y(!G),children:G?"Hide Code":"Show Code"}),children:[n&&c?(0,p.tZ)(m,{collapse:S,setCollapse:k}):null,d?(0,p.BX)(o.Z,{css:te,children:[(0,p.tZ)(r.Z,{value:A?A[0]:"Java",label:A?A[0]:D.javaFile,default:!0,children:(0,p.tZ)(a.Z,{css:ne,className:"codeDemoBlock",language:"java",showLineNumbers:!0,metastring:u,children:S?f:w})}),(0,p.tZ)(r.Z,{value:A?A[1]:"CSS",label:A?A[1]:D.cssFile,children:(0,p.tZ)(a.Z,{css:ne,className:"codeDemoBlock",language:"css",showLineNumbers:!0,children:y})})]}):(0,p.tZ)(o.Z,{css:te,children:(0,p.tZ)(r.Z,{value:A?A[0]:"Java",label:A?A[0]:D.javaFile,default:!0,children:(0,p.tZ)(a.Z,{css:ne,className:"codeDemoBlock",language:"java",showLineNumbers:!0,metastring:u,children:S?f:w})})})]})]})}},3273:(e,t,n)=>{n.d(t,{Z:()=>c});var s=n(7294),i=n(917),o=n(8230),r=n(4387),l=n(6031);var a=n(5944);function c(e){let{type:t,location:n,top:c,children:d,code:u,suffix:h}=e;const[p,m]=(0,s.useState)("");(0,s.useEffect)((()=>{h||(h=""),m("https://javadoc.io/doc/org.dwcj/dwcj-"+t+"/latest/"+n+".html"+h)}),[]);const b=i.iv`
+ display: inline;
+
+ ${c&&i.iv`
+ width: 100%;
+ display: flex;
+ justify-content: flex-end;
+ margin-top: -33px;
+ margin-bottom: 25px;
+ `}
+ `,g=i.iv`
+ background-color: #0063CC;
+ padding: 0 0 0 5px;
+ :hover{
+ color: white;
+ }
+ `;return(0,a.BX)(a.HY,{children:["true"===c&&(0,a.tZ)("div",{css:b,children:(0,a.tZ)(o.Z,{title:"JavaDoc",arrow:!0,children:(0,a.tZ)(r.Z,{css:g,label:"Java API",component:"a",href:p,icon:(0,a.tZ)(l.Z,{}),clickable:!0,color:"primary",target:"_blank"})})}),"true"!==c&&!u&&(0,a.tZ)("div",{css:b,children:(0,a.tZ)("a",{href:p,target:"_blank",children:d})}),"true"!==c&&u&&(0,a.tZ)("div",{css:b,children:(0,a.tZ)("code",{children:(0,a.tZ)("a",{href:p,target:"_blank",children:d})})})]})}},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/2df7d063.e63a6f00.js b/assets/js/2df7d063.b3953ece.js
similarity index 77%
rename from assets/js/2df7d063.e63a6f00.js
rename to assets/js/2df7d063.b3953ece.js
index da8853a99..fe2a7a3f5 100644
--- a/assets/js/2df7d063.e63a6f00.js
+++ b/assets/js/2df7d063.b3953ece.js
@@ -1,16 +1,17 @@
-"use strict";(self.webpackChunkdwcj_documentation=self.webpackChunkdwcj_documentation||[]).push([[7100],{3343:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>l,contentTitle:()=>d,default:()=>p,frontMatter:()=>c,metadata:()=>o,toc:()=>a});var n=s(5893),r=s(1151),i=s(3273);const c={sidebar_position:0,title:"KeypressEvent",sidebar_class_name:"sidebar--item__hidden",slug:"KeypressEvent"},d=void 0,o={id:"components/events/keypress-event",title:"KeypressEvent",description:"A Keypress event occurs when a user presses a specific key on the keyboard while an element, such as an input field or a specific section of a web page, has focus. This event is commonly used to capture and respond to user keyboard interactions.",source:"@site/docs/components/events/keypress-event.md",sourceDirName:"components/events",slug:"/components/events/KeypressEvent",permalink:"/docs/components/events/KeypressEvent",draft:!1,unlisted:!1,editUrl:"https://github.com/DwcJava/dwcjava.github.io/tree/website/docs/components/events/keypress-event.md",tags:[],version:"current",sidebarPosition:0,frontMatter:{sidebar_position:0,title:"KeypressEvent",sidebar_class_name:"sidebar--item__hidden",slug:"KeypressEvent"},sidebar:"documentationSidebar",previous:{title:"FocusEvent",permalink:"/docs/components/events/FocusEvent"},next:{title:"ListCloseEvent",permalink:"/docs/components/events/ListCloseEvent"}},l={},a=[{value:"Event Payload",id:"event-payload",level:2},{value:"See Also",id:"see-also",level:2}];function h(e){const t={a:"a",code:"code",h2:"h2",li:"li",p:"p",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,r.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(i.Z,{type:"engine",location:"org/dwcj/component/event/KeypressEvent",top:"true"}),"\n",(0,n.jsx)(t.p,{children:"A Keypress event occurs when a user presses a specific key on the keyboard while an element, such as an input field or a specific section of a web page, has focus. This event is commonly used to capture and respond to user keyboard interactions."}),"\n",(0,n.jsx)(t.p,{children:"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,n.jsxs)(t.p,{children:["To see a list of keys that trigger this event, ",(0,n.jsx)(i.Z,{type:"engine",location:"org/dwcj/component/event/KeypressEvent.Key",children:"see the Javadoc."})," This class also inherits methods from the ",(0,n.jsxs)(t.a,{href:"./event",children:["base ",(0,n.jsx)(t.code,{children:"Event"})," class"]})]}),"\n",(0,n.jsx)(t.h2,{id:"event-payload",children:"Event Payload"}),"\n",(0,n.jsxs)(t.table,{children:[(0,n.jsx)(t.thead,{children:(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.th,{style:{textAlign:"center"},children:"Method"}),(0,n.jsx)(t.th,{children:"Description"})]})}),(0,n.jsxs)(t.tbody,{children:[(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{style:{textAlign:"center"},children:(0,n.jsx)(t.code,{children:"getCode()"})}),(0,n.jsx)(t.td,{children:"Returns the integer value of the key code."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{style:{textAlign:"center"},children:(0,n.jsx)(t.code,{children:"getName()"})}),(0,n.jsx)(t.td,{children:"Returns the name of the key code."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{style:{textAlign:"center"},children:(0,n.jsx)(t.code,{children:"fromCode(int value)"})}),(0,n.jsx)(t.td,{children:"Returns the key code that matches the given integer value."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{style:{textAlign:"center"},children:(0,n.jsx)(t.code,{children:"fromName(String name)"})}),(0,n.jsx)(t.td,{children:"Returns the key code that matches the given name."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{style:{textAlign:"center"},children:(0,n.jsx)(t.code,{children:"getKeyCode()"})}),(0,n.jsx)(t.td,{children:"Returns the key that was pressed."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{style:{textAlign:"center"},children:(0,n.jsx)(t.code,{children:"isAltKey()"})}),(0,n.jsx)(t.td,{children:"Returns whether or not the alt key was pressed when the event happened."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{style:{textAlign:"center"},children:(0,n.jsx)(t.code,{children:"isCmdKey()"})}),(0,n.jsx)(t.td,{children:"Returns whether or not the command key was pressed when the event happened."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{style:{textAlign:"center"},children:(0,n.jsx)(t.code,{children:"isControlKey()"})}),(0,n.jsx)(t.td,{children:"Returns whether or not the control key was pressed when the event happened."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{style:{textAlign:"center"},children:(0,n.jsx)(t.code,{children:"isShiftKey()"})}),(0,n.jsx)(t.td,{children:"Returns whether or not the shift key was pressed when the event happened."})]})]})]}),"\n",(0,n.jsx)(t.h2,{id:"see-also",children:"See Also"}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsx)(t.li,{children:(0,n.jsx)(t.a,{href:"./event",children:"Event"})}),"\n"]})]})}function p(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(h,{...e})}):h(e)}},3273:(e,t,s)=>{s.d(t,{Z:()=>l});var n=s(7294),r=s(917),i=s(8230),c=s(4387),d=s(6770);var o=s(5944);function l(e){let{type:t,location:s,top:l,children:a,code:h,suffix:p}=e;const[u,x]=(0,n.useState)("");(0,n.useEffect)((()=>{p||(p=""),x("https://javadoc.io/doc/org.dwcj/dwcj-"+t+"/latest/"+s+".html"+p)}),[]);const v=r.iv`
+"use strict";(self.webpackChunkdwcj_documentation=self.webpackChunkdwcj_documentation||[]).push([[7100],{3343:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>a,contentTitle:()=>d,default:()=>p,frontMatter:()=>c,metadata:()=>o,toc:()=>l});var n=s(5893),r=s(1151),i=s(3273);const c={sidebar_position:0,title:"KeypressEvent",sidebar_class_name:"sidebar--item__hidden",slug:"KeypressEvent"},d=void 0,o={id:"components/events/keypress-event",title:"KeypressEvent",description:"A Keypress event occurs when a user presses a specific key on the keyboard while an element, such as an input field or a specific section of a web page, has focus. This event is commonly used to capture and respond to user keyboard interactions.",source:"@site/docs/components/events/keypress-event.md",sourceDirName:"components/events",slug:"/components/events/KeypressEvent",permalink:"/docs/components/events/KeypressEvent",draft:!1,unlisted:!1,editUrl:"https://github.com/DwcJava/dwcjava.github.io/tree/website/docs/components/events/keypress-event.md",tags:[],version:"current",sidebarPosition:0,frontMatter:{sidebar_position:0,title:"KeypressEvent",sidebar_class_name:"sidebar--item__hidden",slug:"KeypressEvent"},sidebar:"documentationSidebar",previous:{title:"FocusEvent",permalink:"/docs/components/events/FocusEvent"},next:{title:"ListCloseEvent",permalink:"/docs/components/events/ListCloseEvent"}},a={},l=[{value:"Event Payload",id:"event-payload",level:2},{value:"See Also",id:"see-also",level:2}];function h(e){const t={a:"a",code:"code",h2:"h2",li:"li",p:"p",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,r.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(i.Z,{type:"engine",location:"org/dwcj/component/event/KeypressEvent",top:"true"}),"\n",(0,n.jsx)(t.p,{children:"A Keypress event occurs when a user presses a specific key on the keyboard while an element, such as an input field or a specific section of a web page, has focus. This event is commonly used to capture and respond to user keyboard interactions."}),"\n",(0,n.jsx)(t.p,{children:"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,n.jsxs)(t.p,{children:["To see a list of keys that trigger this event, ",(0,n.jsx)(i.Z,{type:"engine",location:"org/dwcj/component/event/KeypressEvent.Key",children:"see the Javadoc."})," This class also inherits methods from the ",(0,n.jsxs)(t.a,{href:"./event",children:["base ",(0,n.jsx)(t.code,{children:"Event"})," class"]})]}),"\n",(0,n.jsx)(t.h2,{id:"event-payload",children:"Event Payload"}),"\n",(0,n.jsxs)(t.table,{children:[(0,n.jsx)(t.thead,{children:(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.th,{style:{textAlign:"center"},children:"Method"}),(0,n.jsx)(t.th,{children:"Description"})]})}),(0,n.jsxs)(t.tbody,{children:[(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{style:{textAlign:"center"},children:(0,n.jsx)(t.code,{children:"getCode()"})}),(0,n.jsx)(t.td,{children:"Returns the integer value of the key code."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{style:{textAlign:"center"},children:(0,n.jsx)(t.code,{children:"getName()"})}),(0,n.jsx)(t.td,{children:"Returns the name of the key code."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{style:{textAlign:"center"},children:(0,n.jsx)(t.code,{children:"fromCode(int value)"})}),(0,n.jsx)(t.td,{children:"Returns the key code that matches the given integer value."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{style:{textAlign:"center"},children:(0,n.jsx)(t.code,{children:"fromName(String name)"})}),(0,n.jsx)(t.td,{children:"Returns the key code that matches the given name."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{style:{textAlign:"center"},children:(0,n.jsx)(t.code,{children:"getKeyCode()"})}),(0,n.jsx)(t.td,{children:"Returns the key that was pressed."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{style:{textAlign:"center"},children:(0,n.jsx)(t.code,{children:"isAltKey()"})}),(0,n.jsx)(t.td,{children:"Returns whether or not the alt key was pressed when the event happened."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{style:{textAlign:"center"},children:(0,n.jsx)(t.code,{children:"isCmdKey()"})}),(0,n.jsx)(t.td,{children:"Returns whether or not the command key was pressed when the event happened."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{style:{textAlign:"center"},children:(0,n.jsx)(t.code,{children:"isControlKey()"})}),(0,n.jsx)(t.td,{children:"Returns whether or not the control key was pressed when the event happened."})]}),(0,n.jsxs)(t.tr,{children:[(0,n.jsx)(t.td,{style:{textAlign:"center"},children:(0,n.jsx)(t.code,{children:"isShiftKey()"})}),(0,n.jsx)(t.td,{children:"Returns whether or not the shift key was pressed when the event happened."})]})]})]}),"\n",(0,n.jsx)(t.h2,{id:"see-also",children:"See Also"}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsx)(t.li,{children:(0,n.jsx)(t.a,{href:"./event",children:"Event"})}),"\n"]})]})}function p(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(h,{...e})}):h(e)}},6031:(e,t,s)=>{var n=s(4836);t.Z=void 0;var r=n(s(4938)),i=s(5893),c=(0,r.default)((0,i.jsx)("path",{d:"m19 1-5 5v11l5-4.5V1zM1 6v14.65c0 .25.25.5.5.5.1 0 .15-.05.25-.05C3.1 20.45 5.05 20 6.5 20c1.95 0 4.05.4 5.5 1.5V6c-1.45-1.1-3.55-1.5-5.5-1.5S2.45 4.9 1 6zm22 13.5V6c-.6-.45-1.25-.75-2-1v13.5c-1.1-.35-2.3-.5-3.5-.5-1.7 0-4.15.65-5.5 1.5v2c1.35-.85 3.8-1.5 5.5-1.5 1.65 0 3.35.3 4.75 1.05.1.05.15.05.25.05.25 0 .5-.25.5-.5v-1.1z"}),"AutoStories");t.Z=c},3273:(e,t,s)=>{s.d(t,{Z:()=>a});var n=s(7294),r=s(917),i=s(8230),c=s(4387),d=s(6031);var o=s(5944);function a(e){let{type:t,location:s,top:a,children:l,code:h,suffix:p}=e;const[v,u]=(0,n.useState)("");(0,n.useEffect)((()=>{p||(p=""),u("https://javadoc.io/doc/org.dwcj/dwcj-"+t+"/latest/"+s+".html"+p)}),[]);const x=r.iv`
display: inline;
- ${l&&r.iv`
+ ${a&&r.iv`
width: 100%;
display: flex;
justify-content: flex-end;
margin-top: -33px;
margin-bottom: 25px;
`}
- `,y=r.iv`
+ `,j=r.iv`
background-color: #0063CC;
+ padding: 0 0 0 5px;
:hover{
color: white;
}
- `;return(0,o.BX)(o.HY,{children:["true"===l&&(0,o.tZ)("div",{css:v,children:(0,o.tZ)(i.Z,{title:"JavaDoc",arrow:!0,children:(0,o.tZ)(c.Z,{css:y,label:"Java API",component:"a",href:u,icon:(0,o.tZ)(d.Z,{}),clickable:!0,color:"primary",target:"_blank"})})}),"true"!==l&&!h&&(0,o.tZ)("div",{css:v,children:(0,o.tZ)("a",{href:u,target:"_blank",children:a})}),"true"!==l&&h&&(0,o.tZ)("div",{css:v,children:(0,o.tZ)("code",{children:(0,o.tZ)("a",{href:u,target:"_blank",children:a})})})]})}}}]);
\ No newline at end of file
+ `;return(0,o.BX)(o.HY,{children:["true"===a&&(0,o.tZ)("div",{css:x,children:(0,o.tZ)(i.Z,{title:"JavaDoc",arrow:!0,children:(0,o.tZ)(c.Z,{css:j,label:"Java API",component:"a",href:v,icon:(0,o.tZ)(d.Z,{}),clickable:!0,color:"primary",target:"_blank"})})}),"true"!==a&&!h&&(0,o.tZ)("div",{css:x,children:(0,o.tZ)("a",{href:v,target:"_blank",children:l})}),"true"!==a&&h&&(0,o.tZ)("div",{css:x,children:(0,o.tZ)("code",{children:(0,o.tZ)("a",{href:v,target:"_blank",children:l})})})]})}}}]);
\ No newline at end of file
diff --git a/assets/js/3202e975.9581f4f8.js b/assets/js/3202e975.28465a74.js
similarity index 83%
rename from assets/js/3202e975.9581f4f8.js
rename to assets/js/3202e975.28465a74.js
index ac7f9d81e..85455465d 100644
--- a/assets/js/3202e975.9581f4f8.js
+++ b/assets/js/3202e975.28465a74.js
@@ -1,4 +1,4 @@
-"use strict";(self.webpackChunkdwcj_documentation=self.webpackChunkdwcj_documentation||[]).push([[3850],{4583:(t,e,n)=>{n.r(e),n.d(e,{assets:()=>a,contentTitle:()=>r,default:()=>u,frontMatter:()=>c,metadata:()=>l,toc:()=>d});var i=n(5893),o=n(1151),s=n(3273);const c={sidebar_position:0,title:"ButtonClickEvent",sidebar_class_name:"sidebar--item__hidden",slug:"ButtonClickEvent"},r=void 0,l={id:"components/events/button-click-event",title:"ButtonClickEvent",description:"The ButtonClickEvent is an event type that is triggered when a user clicks on a Button element. This event is essential for capturing user interactions with buttons on a web page, such as submitting forms, triggering actions, or navigating to different sections of the site.",source:"@site/docs/components/events/button-click-event.md",sourceDirName:"components/events",slug:"/components/events/ButtonClickEvent",permalink:"/docs/components/events/ButtonClickEvent",draft:!1,unlisted:!1,editUrl:"https://github.com/DwcJava/dwcjava.github.io/tree/website/docs/components/events/button-click-event.md",tags:[],version:"current",sidebarPosition:0,frontMatter:{sidebar_position:0,title:"ButtonClickEvent",sidebar_class_name:"sidebar--item__hidden",slug:"ButtonClickEvent"},sidebar:"documentationSidebar",previous:{title:"BlurEvent",permalink:"/docs/components/events/BlurEvent"},next:{title:"CheckEvent",permalink:"/docs/components/events/CheckEvent"}},a={},d=[{value:"Event Payload",id:"event-payload",level:2},{value:"See Also",id:"see-also",level:2}];function h(t){const e={a:"a",code:"code",h2:"h2",li:"li",p:"p",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,o.a)(),...t.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(s.Z,{type:"engine",location:"org/dwcj/component/button/event/ButtonClickEvent",top:"true"}),"\n",(0,i.jsxs)(e.p,{children:["The ",(0,i.jsx)(e.code,{children:"ButtonClickEvent"})," is an event type that is triggered when a user clicks on a ",(0,i.jsx)(s.Z,{type:"engine",location:"org/dwcj/component/button/Button",code:"true",children:"Button"})," element. This event is essential for capturing user interactions with buttons on a web page, such as submitting forms, triggering actions, or navigating to different sections of the site."]}),"\n",(0,i.jsx)(e.h2,{id:"event-payload",children:"Event Payload"}),"\n",(0,i.jsxs)(e.table,{children:[(0,i.jsx)(e.thead,{children:(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.th,{style:{textAlign:"center"},children:"Method"}),(0,i.jsx)(e.th,{children:"Description"})]})}),(0,i.jsxs)(e.tbody,{children:[(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{style:{textAlign:"center"},children:(0,i.jsx)(e.code,{children:"getX()"})}),(0,i.jsxs)(e.td,{children:["Returns the X location of the mouse within the ",(0,i.jsx)(s.Z,{type:"engine",location:"org/dwcj/component/button/Button",code:"true",children:"Button"})," component at the time the event was fired."]})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{style:{textAlign:"center"},children:(0,i.jsx)(e.code,{children:"getY()"})}),(0,i.jsxs)(e.td,{children:["Returns the Y location of the mouse within the ",(0,i.jsx)(s.Z,{type:"engine",location:"org/dwcj/component/button/Button",code:"true",children:"Button"})," component at the time the event was fired."]})]})]})]}),"\n",(0,i.jsx)(e.h2,{id:"see-also",children:"See Also"}),"\n",(0,i.jsxs)(e.ul,{children:["\n",(0,i.jsx)(e.li,{children:(0,i.jsx)(e.a,{href:"./event",children:"Event"})}),"\n",(0,i.jsx)(e.li,{children:(0,i.jsx)(e.a,{href:"../button",children:"Button"})}),"\n"]})]})}function u(t={}){const{wrapper:e}={...(0,o.a)(),...t.components};return e?(0,i.jsx)(e,{...t,children:(0,i.jsx)(h,{...t})}):h(t)}},3273:(t,e,n)=>{n.d(e,{Z:()=>a});var i=n(7294),o=n(917),s=n(8230),c=n(4387),r=n(6770);var l=n(5944);function a(t){let{type:e,location:n,top:a,children:d,code:h,suffix:u}=t;const[v,p]=(0,i.useState)("");(0,i.useEffect)((()=>{u||(u=""),p("https://javadoc.io/doc/org.dwcj/dwcj-"+e+"/latest/"+n+".html"+u)}),[]);const m=o.iv`
+"use strict";(self.webpackChunkdwcj_documentation=self.webpackChunkdwcj_documentation||[]).push([[3850],{4583:(t,e,n)=>{n.r(e),n.d(e,{assets:()=>a,contentTitle:()=>r,default:()=>u,frontMatter:()=>c,metadata:()=>l,toc:()=>d});var i=n(5893),o=n(1151),s=n(3273);const c={sidebar_position:0,title:"ButtonClickEvent",sidebar_class_name:"sidebar--item__hidden",slug:"ButtonClickEvent"},r=void 0,l={id:"components/events/button-click-event",title:"ButtonClickEvent",description:"The ButtonClickEvent is an event type that is triggered when a user clicks on a Button element. This event is essential for capturing user interactions with buttons on a web page, such as submitting forms, triggering actions, or navigating to different sections of the site.",source:"@site/docs/components/events/button-click-event.md",sourceDirName:"components/events",slug:"/components/events/ButtonClickEvent",permalink:"/docs/components/events/ButtonClickEvent",draft:!1,unlisted:!1,editUrl:"https://github.com/DwcJava/dwcjava.github.io/tree/website/docs/components/events/button-click-event.md",tags:[],version:"current",sidebarPosition:0,frontMatter:{sidebar_position:0,title:"ButtonClickEvent",sidebar_class_name:"sidebar--item__hidden",slug:"ButtonClickEvent"},sidebar:"documentationSidebar",previous:{title:"BlurEvent",permalink:"/docs/components/events/BlurEvent"},next:{title:"CheckEvent",permalink:"/docs/components/events/CheckEvent"}},a={},d=[{value:"Event Payload",id:"event-payload",level:2},{value:"See Also",id:"see-also",level:2}];function h(t){const e={a:"a",code:"code",h2:"h2",li:"li",p:"p",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,o.a)(),...t.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(s.Z,{type:"engine",location:"org/dwcj/component/button/event/ButtonClickEvent",top:"true"}),"\n",(0,i.jsxs)(e.p,{children:["The ",(0,i.jsx)(e.code,{children:"ButtonClickEvent"})," is an event type that is triggered when a user clicks on a ",(0,i.jsx)(s.Z,{type:"engine",location:"org/dwcj/component/button/Button",code:"true",children:"Button"})," element. This event is essential for capturing user interactions with buttons on a web page, such as submitting forms, triggering actions, or navigating to different sections of the site."]}),"\n",(0,i.jsx)(e.h2,{id:"event-payload",children:"Event Payload"}),"\n",(0,i.jsxs)(e.table,{children:[(0,i.jsx)(e.thead,{children:(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.th,{style:{textAlign:"center"},children:"Method"}),(0,i.jsx)(e.th,{children:"Description"})]})}),(0,i.jsxs)(e.tbody,{children:[(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{style:{textAlign:"center"},children:(0,i.jsx)(e.code,{children:"getX()"})}),(0,i.jsxs)(e.td,{children:["Returns the X location of the mouse within the ",(0,i.jsx)(s.Z,{type:"engine",location:"org/dwcj/component/button/Button",code:"true",children:"Button"})," component at the time the event was fired."]})]}),(0,i.jsxs)(e.tr,{children:[(0,i.jsx)(e.td,{style:{textAlign:"center"},children:(0,i.jsx)(e.code,{children:"getY()"})}),(0,i.jsxs)(e.td,{children:["Returns the Y location of the mouse within the ",(0,i.jsx)(s.Z,{type:"engine",location:"org/dwcj/component/button/Button",code:"true",children:"Button"})," component at the time the event was fired."]})]})]})]}),"\n",(0,i.jsx)(e.h2,{id:"see-also",children:"See Also"}),"\n",(0,i.jsxs)(e.ul,{children:["\n",(0,i.jsx)(e.li,{children:(0,i.jsx)(e.a,{href:"./event",children:"Event"})}),"\n",(0,i.jsx)(e.li,{children:(0,i.jsx)(e.a,{href:"../button",children:"Button"})}),"\n"]})]})}function u(t={}){const{wrapper:e}={...(0,o.a)(),...t.components};return e?(0,i.jsx)(e,{...t,children:(0,i.jsx)(h,{...t})}):h(t)}},6031:(t,e,n)=>{var i=n(4836);e.Z=void 0;var o=i(n(4938)),s=n(5893),c=(0,o.default)((0,s.jsx)("path",{d:"m19 1-5 5v11l5-4.5V1zM1 6v14.65c0 .25.25.5.5.5.1 0 .15-.05.25-.05C3.1 20.45 5.05 20 6.5 20c1.95 0 4.05.4 5.5 1.5V6c-1.45-1.1-3.55-1.5-5.5-1.5S2.45 4.9 1 6zm22 13.5V6c-.6-.45-1.25-.75-2-1v13.5c-1.1-.35-2.3-.5-3.5-.5-1.7 0-4.15.65-5.5 1.5v2c1.35-.85 3.8-1.5 5.5-1.5 1.65 0 3.35.3 4.75 1.05.1.05.15.05.25.05.25 0 .5-.25.5-.5v-1.1z"}),"AutoStories");e.Z=c},3273:(t,e,n)=>{n.d(e,{Z:()=>a});var i=n(7294),o=n(917),s=n(8230),c=n(4387),r=n(6031);var l=n(5944);function a(t){let{type:e,location:n,top:a,children:d,code:h,suffix:u}=t;const[v,p]=(0,i.useState)("");(0,i.useEffect)((()=>{u||(u=""),p("https://javadoc.io/doc/org.dwcj/dwcj-"+e+"/latest/"+n+".html"+u)}),[]);const m=o.iv`
display: inline;
${a&&o.iv`
@@ -10,6 +10,7 @@
`}
`,g=o.iv`
background-color: #0063CC;
+ padding: 0 0 0 5px;
:hover{
color: white;
}
diff --git a/assets/js/33b18326.e7b15a71.js b/assets/js/33b18326.d23677b9.js
similarity index 61%
rename from assets/js/33b18326.e7b15a71.js
rename to assets/js/33b18326.d23677b9.js
index 39c008a43..a9481e5f0 100644
--- a/assets/js/33b18326.e7b15a71.js
+++ b/assets/js/33b18326.d23677b9.js
@@ -1,10 +1,12 @@
-"use strict";(self.webpackChunkdwcj_documentation=self.webpackChunkdwcj_documentation||[]).push([[8402],{8105:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>A,default:()=>u,frontMatter:()=>o,metadata:()=>l,toc:()=>d});var r=n(5893),i=n(1151),a=(n(7650),n(2322),n(6957),n(7796)),s=n(3273);const o={sidebar_position:0,title:"Field"},A=void 0,l={id:"components/fields/fields",title:"Field",description:"The DWCJ supports seven different types of field components, each with various behaviors and implementations that suit various",source:"@site/docs/components/fields/fields.md",sourceDirName:"components/fields",slug:"/components/fields/",permalink:"/docs/components/fields/",draft:!1,unlisted:!1,editUrl:"https://github.com/DwcJava/dwcjava.github.io/tree/website/docs/components/fields/fields.md",tags:[],version:"current",sidebarPosition:0,frontMatter:{sidebar_position:0,title:"Field"},sidebar:"documentationSidebar",previous:{title:"Drawer",permalink:"/docs/components/drawer"},next:{title:"ColorField",permalink:"/docs/components/fields/colorfield"}},c={},d=[{value:"Shared Field Properties",id:"shared-field-properties",level:2},{value:"Label",id:"label",level:3},{value:"Required",id:"required",level:3},{value:"Spellcheck",id:"spellcheck",level:3},{value:"Shared Events",id:"shared-events",level:2},{value:"Parts and CSS Properties",id:"parts-and-css-properties",level:2},{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}];function h(e){const t={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",li:"li",p:"p",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,i.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(s.Z,{type:"engine",location:"org/dwcj/component/field/AbstractField"}),"\n",(0,r.jsx)(t.p,{children:"The DWCJ supports seven different types of field components, each with various behaviors and implementations that suit various\r\nneeds. While each of these components have variations in their implementations, there are commonalities amongst all of the\r\nfield classes that will be described here."}),"\n",(0,r.jsx)(t.admonition,{type:"info",children:(0,r.jsx)(t.p,{children:"This section describes common functionality amongst various field components in the DWCJ, and is not itself a class that can be instantiated and used."})}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"/docs/components/fields/colorfield",children:(0,r.jsx)(t.code,{children:"ColorField"})})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"/docs/components/fields/datefield",children:(0,r.jsx)(t.code,{children:"DateField"})})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"/docs/components/fields/datetimefield",children:(0,r.jsx)(t.code,{children:"DateTimeField"})})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"/docs/components/fields/numberfield",children:(0,r.jsx)(t.code,{children:"NumberField"})})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"/docs/components/fields/passwordfield",children:(0,r.jsx)(t.code,{children:"PasswordField"})})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"/docs/components/fields/textfield",children:(0,r.jsx)(t.code,{children:"TextField"})})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"/docs/components/fields/timefield",children:(0,r.jsx)(t.code,{children:"TimeField"})})}),"\n"]}),"\n",(0,r.jsx)(t.h2,{id:"shared-field-properties",children:"Shared Field Properties"}),"\n",(0,r.jsx)(t.h3,{id:"label",children:"Label"}),"\n",(0,r.jsx)(t.p,{children:"A field label is a descriptive text or title that is associated with the field. It provides a brief explanation or prompt to help users understand the purpose or expected input for that particular field. Field labels are not only important for usability but also play a crucial role in accessibility, as they enable screen readers and assistive technologies to provide accurate information and facilitate keyboard navigation."}),"\n",(0,r.jsx)(t.h3,{id:"required",children:"Required"}),"\n",(0,r.jsxs)(t.p,{children:["A field is required when the user must provide a value before submitting a form. This is mainly used in conjunction with ",(0,r.jsx)(t.code,{children:"setLabel(String)"})," to provide a visual indication to users that the field is required."]}),"\n",(0,r.jsx)(t.admonition,{type:"info",children:(0,r.jsx)(t.p,{children:"Field components contain built-in visual validation which notifies users if a required field is empty, or has had values removed."})}),"\n",(0,r.jsx)(t.h3,{id:"spellcheck",children:"Spellcheck"}),"\n",(0,r.jsxs)(t.p,{children:["By calling the ",(0,r.jsx)(t.code,{children:"setSpellCheck(true)"})," method, you can enable the spellcheck feature for a field. This means that when a user enters text into the field, the browser or user agent may check the spelling of the entered text for errors."]}),"\n",(0,r.jsx)(t.h2,{id:"shared-events",children:"Shared Events"}),"\n",(0,r.jsx)(t.admonition,{type:"info",children:(0,r.jsx)(t.p,{children:"All field components share the following events"})}),"\n",(0,r.jsxs)(t.table,{children:[(0,r.jsx)(t.thead,{children:(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.th,{style:{textAlign:"center"},children:"Events"}),(0,r.jsx)(t.th,{children:"Description"})]})}),(0,r.jsxs)(t.tbody,{children:[(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{style:{textAlign:"center"},children:(0,r.jsx)(s.Z,{type:"engine",location:"org/dwcj/component/event/BlurEvent",code:"true",children:"BlurEvent"})}),(0,r.jsx)(t.td,{children:"An event that is triggered when a component loses focus."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{style:{textAlign:"center"},children:(0,r.jsx)(s.Z,{type:"engine",location:"org/dwcj/component/event/FocusEvent",code:"true",children:"FocusEvent"})}),(0,r.jsx)(t.td,{children:"An event that is triggered when a component gains focus, opposite of a blur event."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{style:{textAlign:"center"},children:(0,r.jsx)(s.Z,{type:"engine",location:"org/dwcj/component/event/KeypressEvent",code:"true",children:"KeypressEvent"})}),(0,r.jsx)(t.td,{children:'An event that is triggered when one of "special keys" is pressed while the component has focus. These keys have specific codes, allowing for conditional logic to be implemented based on the key pressed.'})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{style:{textAlign:"center"},children:(0,r.jsx)(s.Z,{type:"engine",location:"org/dwcj/component/event/ModifyEvent",code:"true",children:"ModifyEvent"})}),(0,r.jsx)(t.td,{children:"An event that is triggered when an is changed or modified. It typically occurs any time a user changes an aspect of the component, such as each time a letter is input or removed from an input component."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{style:{textAlign:"center"},children:(0,r.jsx)(s.Z,{type:"engine",location:"org/dwcj/component/event/MouseEnterEvent",code:"true",children:"MouseEnterEvent"})}),(0,r.jsx)(t.td,{children:"An event that is triggered when the mouse cursor enters the boundaries of a component."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{style:{textAlign:"center"},children:(0,r.jsx)(s.Z,{type:"engine",location:"org/dwcj/component/event/MouseExitEvent",code:"true",children:"MouseExitEvent"})}),(0,r.jsx)(t.td,{children:"An event that is triggered when the mouse cursor exits the boundaries of a component."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{style:{textAlign:"center"},children:(0,r.jsx)(s.Z,{type:"engine",location:"org/dwcj/component/event/RightMouseDownEvent",code:"true",children:"RightMouseDownEvent"})}),(0,r.jsx)(t.td,{children:"An event that is triggered when the user presses the right mouse button while the cursor is over a component."})]})]})]}),"\n",(0,r.jsx)(t.h2,{id:"parts-and-css-properties",children:"Parts and CSS Properties"}),"\n",(0,r.jsx)(t.admonition,{type:"info",children:(0,r.jsx)(t.p,{children:"As all field components are built from a singular web component, they will all share the\r\nfollowing Shadow Parts and CSS Property values"})}),"\n",(0,r.jsx)(t.h3,{id:"shadow-parts",children:"Shadow Parts"}),"\n",(0,r.jsx)(t.p,{children:"These are the various parts of the shadow DOM for the component, which will be required when styling via CSS is desired."}),"\n",(0,r.jsx)(a.Z,{tag:n(5731).gN,table:"parts"}),"\n",(0,r.jsx)(t.h3,{id:"css-properties",children:"CSS Properties"}),"\n",(0,r.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,r.jsx)(a.Z,{tag:n(5731).gN,table:"properties"}),"\n",(0,r.jsx)(t.h3,{id:"reflected-attributes",children:"Reflected Attributes"}),"\n",(0,r.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,r.jsx)(a.Z,{tag:n(5731).gN,table:"reflects"}),"\n",(0,r.jsx)(t.h3,{id:"dependencies",children:"Dependencies"}),"\n",(0,r.jsx)(t.p,{children:"This component relies on the following components - see the related article for more detailed styling information:"}),"\n",(0,r.jsx)(a.Z,{tag:"bbj-editbox",table:"dependencies"})]})}function u(e={}){const{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(h,{...e})}):h(e)}},5162:(e,t,n)=>{n.d(t,{Z:()=>s});n(7294);var r=n(6010);const i={tabItem:"tabItem_Ymn6"};var a=n(5893);function s(e){let{children:t,hidden:n,className:s}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,r.Z)(i.tabItem,s),hidden:n,children:t})}},4866:(e,t,n)=>{n.d(t,{Z:()=>B});var r=n(7294),i=n(6010),a=n(2466),s=n(6550),o=n(469),A=n(1980),l=n(7392),c=n(12);function d(e){return r.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,r.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 h(e){const{values:t,children:n}=e;return(0,r.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:r,default:i}}=e;return{value:t,label:n,attributes:r,default:i}}))}(n);return function(e){const t=(0,l.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 u(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 i=(0,s.k6)(),a=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,A._X)(a),(0,r.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(i.location.search);t.set(a,e),i.replace({...i.location,search:t.toString()})}),[a,i])]}function g(e){const{defaultValue:t,queryString:n=!1,groupId:i}=e,a=h(e),[s,A]=(0,r.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(!u({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 r=n.find((e=>e.default))??n[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:t,tabValues:a}))),[l,d]=p({queryString:n,groupId:i}),[g,b]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[i,a]=(0,c.Nk)(n);return[i,(0,r.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:i}),m=(()=>{const e=l??g;return u({value:e,tabValues:a})?e:null})();(0,o.Z)((()=>{m&&A(m)}),[m]);return{selectedValue:s,selectValue:(0,r.useCallback)((e=>{if(!u({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);A(e),d(e),b(e)}),[d,b,a]),tabValues:a}}var b=n(2389);const m={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var f=n(5893);function v(e){let{className:t,block:n,selectedValue:r,selectValue:s,tabValues:o}=e;const A=[],{blockElementScrollPositionUntilNextRender:l}=(0,a.o5)(),c=e=>{const t=e.currentTarget,n=A.indexOf(t),i=o[n].value;i!==r&&(l(t),s(i))},d=e=>{let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const n=A.indexOf(e.currentTarget)+1;t=A[n]??A[0];break}case"ArrowLeft":{const n=A.indexOf(e.currentTarget)-1;t=A[n]??A[A.length-1];break}}t?.focus()};return(0,f.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,i.Z)("tabs",{"tabs--block":n},t),children:o.map((e=>{let{value:t,label:n,attributes:a}=e;return(0,f.jsx)("li",{role:"tab",tabIndex:r===t?0:-1,"aria-selected":r===t,ref:e=>A.push(e),onKeyDown:d,onClick:c,...a,className:(0,i.Z)("tabs__item",m.tabItem,a?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function w(e){let{lazy:t,children:n,selectedValue:i}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===i));return e?(0,r.cloneElement)(e,{className:"margin-top--md"}):null}return(0,f.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==i})))})}function x(e){const t=g(e);return(0,f.jsxs)("div",{className:(0,i.Z)("tabs-container",m.tabList),children:[(0,f.jsx)(v,{...e,...t}),(0,f.jsx)(w,{...e,...t})]})}function B(e){const t=(0,b.Z)();return(0,f.jsx)(x,{...e,children:d(e.children)},String(t))}},6957:(e,t,n)=>{n.d(t,{Z:()=>b});var r=n(7294),i=n(917),a=n(4866),s=n(5162),o=n(4673),A=n(1750);const l="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPAAAADwCAYAAAA+VemSAAAABmJLR0QA/wD/AP+gvaeTAAAG/ElEQVR4nO3dTW7bRhgG4Ddu4bTHa72Ir+UbNKskm/YgvYJhGF61B2gcIEDdRSVAMGxLIueHQz4PMBtDGeoj9EIfxWEmAQAAAAAAAAAAAAAAAAAAAAAAACjnMsl1ks9JbpN8343b3d+ud68BFuYqyUOSpyPjYfdaYAEuktzkeHCfj5vdvwU6mhLewxADnVxlenj3QzsNHVwmucv8AN8ned/2rQPXmR/e/fjQ+L1TiB8xxvVLwbl+LTgXcIIS7fN+3DV+7xTyrvcbYLLHJD8Vmutbkp8LzUVDAjyup8Lz+SwMyDUwDEyAYWACDAMTYBiYAMPABBgGJsAwMAGGgQkwDEyAYWACDAMTYBiYAMPABBgGJsAwMAGGgQkwDEyAYWACDAMT4Dq2tkvg1uplxVrtEljqv5Tdj6nsisgqtN4lsHeA7YrIqszZJfBjzv9Q9wzwxe49Tz2WXRFZlBK7BJ4b4l4Bnhve/dBOswildgl8SvIpyY8nHrdHgC+S/FboePexKyILUHKXwHNC3DrAJcO7H3ZFpLsvKR+mU9rplgEu1TY/H1+OHBeqK7lL4DkhbhXgWuF9il0RWYDH1PlwP+XtdrpFgGu0zYfj8ZXjQjNfU+8D/laIawe4dnifkvzz+mmFNmq10IfjpXa6ZoBrts2HQwtNdzV+xDolxLUC3Cq8T/EjFgtQ+jbSW+Owna4R4BZt8+FwG4nuSi7kOCfEpedtHd77WMjBQpRYSnnOqNHitmqb98NSShZlzsMMWxseZmBxWv74M/KY8uQVNNH6OnK08SnJD1NPLrQgxMLL4IRYeBmcEAsvg9t6iIWX4W01xMLLamwtxMLL6mzlPrH7vKzW2r+JffOyemsNsfCyGWsLsfCyOWsJsfCyWaOHWHjZvFFDLLywM9otJreK4JlRQiy88Iqlh1h44YilXhO75oUTLS3EwgtnWko7rW2GiXqHWHhhpl4hFl4opPU1sWteKKzVN7FvXqikdoiFFyqr1U5rm6GR0iEWXmisVDutbYZO5oZYeKGzi0zb2vQmwguLcZXkIceD+xCba8MiXSa5TvI5yW2S77txu/vb9e41AAAAAAAAAAAAwCK9tBTw1MX5S1oyqA51bM6pi/FPHb0W7atDHZsy9XG4U0erx+bUoY5NqnmSD0+2OtQxYh2LdpX6J3k/arY96lDH5lwmuUu7E32f5L061DFIHYt3nXYneT8+qEMdg9Rxkp4X4b90OOavFeZUx3TqGFjLNmc/7tShjkHqOMm7XgdO8pjkp8bH/Jbk58JzqmM6dczUs4V+6nDMfyvMqY7p1DFTzwD/1eGYf1eYUx3TqWOmngH+cyXHVMeyjrmWOk7SM8B/dDjm7xXmVMd06hjYWm64q0Mdm1zIkaxnyZs61LFZa1l0rg51bNJaHvtShzo2bS0PXqtDHZu1lv/6RB3qAAAAAAAAAAAAAJp7acmgpYAwgFMX7VuMDwsy9bE5j8NBZxdJPmb6o3EfI8TQxdzwCjF0cpHkt5R7SP1Tkh9bFgBbVTq8QgyNlGqbtdPQWO3wCjFUUqtt1k5DZa3DK8RQSKu2WTsNhfUOrxDDRL3aZu00zLS08AoxnGgpbbN2Gs609PAKMbxilPAKMTyz1GveY8M1MZs3aniFmM0bPbxCzGatJbxCzOasLbxCzGasNbxCzOqNdqto6nCLidVZ+zevb2JWa2vhFWJWY6vhFWKGt/XwCjHDEl4hZlDCK8QMSniFmEFt5T7v3OE+MYs0ZYvPrY6biecYqrhK+2+xEeZ8a9hknEW4THKXdh/8T0l+qDBv6+v3+yTvzz7bUNh12oc3FeZO2of4wzknGmr4kjYf9uc//tQIcNL2x7gvJ55jqKZF+/zSL7e1Apy0C/Hd0bMLlT2m7of8sG0+VDPASZt2+vH10wptfE378KbCsV5SO8T/vHJcaKZWC31swUOLACd122ktNN3V+BHrlNVKrQKc1AuxH7HorvRtpLfa5kMtA5zUaafdRqK7kgs5Tg1vCh3vnAAnZUN8Hws5WIgSSynPXeTfI8BJuXbaUkoWZc7DDFOe0OkV4GR+iD3MwOJcZFqIbzLt8bqeAU7a1wtNXCV5yPEP8kPmtZG9A7zXql5o5jL//zr9Ocltku+7cbv72/XuNXMsJcBJm3p5wbveb4DJ5obuOZ+FAbkWgYEJMAxMgGFgAgwDE2AYmADDwAQYBibAMDABhoEJMAxMgGFgAgwDE2AYmADDwAQYBibAMDABhoEJMAxMgGFgAjyukltzfi04Fw0J8Lj+KjjX3wXnoiEBHtefC52LhgR4XH8UnOv3gnMBJyi1K+J97BIIXZTYFdF2J9DRnF0R7RIIndklEFbALoEwOLsEAgAAAAAAAAAAAAAAAAAAAAAAAE39B2tV13Hdy+hQAAAAAElFTkSuQmCC",c=n.p+"assets/images/expand-ba3f00f73da43d91e5b17663c4a7d108.png",d="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPAAAADwCAYAAAA+VemSAAAABmJLR0QA/wD/AP+gvaeTAAALyElEQVR4nO3dXahmVR3H8e+M0/FlRouiGV9GxLSkiy7MkW7MDJOCCJ1zkia66KaLLByKEqUizW6EwJjKi24yDfL9pYSEEDSlIMS3JkJrlBzURiUcdXyZF8cu9hnmpOfMec551tr//9rP9wMLQWU9/73W/p398qy9H5AkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSW1bEV1ABauBs4AzgNNm2zrgvcAa4D1xpakHe4DXgJeAF4HHgSeAh4A/z/63wRhKgNcBXwamgU8AU7HlKKk9wF+B24EbgOdjy9E5wF3AXuBtm20JbS/we+Bs1Ltz6U6HoncC2zDaA8CnUXXHAdcTP+G2Yba7gBNRFZuAncRPsm3YbSdwISrmCOCXxE+sbbLaNcDhaCxrgD8SP5m2yWz30n39mFbmr5HWAXcDp0cXoon2CPA54IXoQuaTNcDHAPdheJXDVrqvm3ZGF/JOK6MLmMcRdHcDDa+y+BhwGwmviQ+LLmAe19CtqJIyORl4P/CH6ELmyhbgC4GroouQFnAm8E/g79GFHJDpGvh44B8kv+unibcT+CiwI7oQyHUNfDWGV/m9D/hJdBEHZDkCnwvcE12ENKK36dZO/ym6kCwBfoDuGV6pFfcDn4ouIsMp9DkYXrXnbOCT0UVkCPB3oguQlumS6AKiT6HXAs8Cq4LrkJZjH7CeCX6zx7epuxj9TbrnhzcCJ+H7sCbBKrq5ngZ+Q7cP1NzHNvezWTndT72B/S3dd8uabCcAN1L3iaWJtBrYTfkB3Qd8vcftUBu+Qbdv1DjLO7LH7Ujjs9T5i3hRnxuhpnyTOvvceX1uRBbfo85ps3QoN1F+v7us1y1I4jrKDuIbeM2rxa2n/I2ta3vdgjkivwc+rXB/twDPFe5Tw/MMcGvhPkvvyyOLDPCxhfu7o3B/Gq47C/dXel8eWWSAjy7c30OF+9Nwld5XSu/LI4tcibWbsr9hNEX3cxnSYqbo9r9SdtO9Cqp3kQF+u3B/0ctC1ZZB7H8ZHmaQtEwGWGqYAZYaZoClhhlgqWEGWGqYAZYaZoClhhlgqWEGeFimgE10r5DZRre0tMYD7KXbHuBp4Gd0P+quBpTeCSbdDLCd+DCO2/bRz0+XuP+NyQEsYyWwhfjglW6PUvd1w+5/Y3IAyxhieOeGuBb3vzE5gOObIT5ktVut0+lB7H8+TtiuKeBxul+OH7J9wAeAVwr3O4j9z7vQ7Zpm+OGF7jr4yugisjLA7doYXUCPpqMLyMoAt+vM6AJ6dFx0AVl5DdyuNwh6D1OQ0vM7iP3PI3C7JvXOu+YwwO3aEV2A4hngdj0YXYDiGeB2+UsU8iZWwyZlIccB3sSah0fgdu0BLokuQrEMcNtuo3uGVurdIBaTJzDUxwlrz2/2+tJzAMsaygP9BngJvIk1LFN064YvADYAJ1H3ofg+eRMrmUH8BRywlcCviT/yegROygHMK1t4DXBCDmBOGcNrgBNyAPPJGl4DnJADmEvm8BrghBzAPLKH1wAn5ADm0EJ4DXBCDmC8VsJrgBNyAGO1FF4DnJADGKe18BrghBzAGC2G1wAn5AD2r9XwGuCEHMB+tRxeA5yQA9if1sNrgBNyAPsREd4bKvRZWvb60nMA64sK72EV+i0te33pOYB1RYaXCn2Xlr2+9BzAeqLDS4X+S8teX3oOYB0ZwkuFzygte33pOYDlZQkvFT6ntOz1pecAlpUpvFT4rNKy15eeA1hOtvBS4fNKy15feg5gGRnDS4XPLC17fek5gOPLGl4qfG5p2etLzwEcT+bwUuGzS8teX3oO4PJlDy8VPr+07PWl5wAuTwvhpUINpWWvLz0HcOlaCS8V6igte33pOYBL01J4qVBLadnrS88BHF1r4aVCPaVlry+91yk3eK/1XHufWgwv5J9fAzympyg3eE/1XHtfWg0v5J/fQQR4ZdQHAw8m7SuLlcC1wFd7/Mzrga8AbxXoy/kduE2U++v3pZ5r78MW+j3yXkfZP+jZ53cQR+BIU5Q5zfo3cHi/pVc3Q9vhhfzza4ALKLGjzvRedV2ldvxRW6lr3vlknl8DXMg4p4pbAuqtreSpZ2R4D8g6vwa4kJUsb5K3EHsTrpab6Ce8NU6b55N1fg1wYTPAdhYfqO0M77R5rj5On/sK71zZ5tcAVzBFdwp5I7AN2Dvbts3+u02z/8+QvUHd8PZx2ryQTPNrgFVFyRVMmcKbjQFWFbVOoSNOmzMzwKqixk0sw/tuBlhVlP4aydPm+RlgVVFyIYfhXZgBVjUlVjB52nxoBlhVjbOCyfAuzgCrqqwrmIbCAKsX2VYwDYUBVm8yrWAaikEEeEXUB0vBSocuJEteK0kNM8BSwwyw1DADLDXMAEsNM8BSwwyw1DADLDXMAEsNWxVdwBynABcAHwfWA+tm/7k6qJ7XgGeA52f/+TBwJ/BkUD1SOuuAHwNbKb82tVbbClw5W7vaNYi10FFWA5cCLxMfyOW2XcBVwDGFx0b9MMDLNAPsID6ApdoOYGPREVIfDPASraA76r5FfOhKt/10R2NvCrbDAC/BUcAtxAetdrsJOLLQmKkuAzyiFXQPnUeHq692Gz5n3QIDPKIriA9V3+2HJQZOVRngEczQXR9GB6rvth9vbGU3iADXPNVbA/wLOLbiZ2T2AnAq8Gp0IZpX6dAN7pU632VywwuwFvhWdBEatlp/NdbSvTHx6Er9t2IX8GG674qVi0fgQ7gYwwvdZcRF0UVouGoF2Bs4B10QXYCGq8Zh/1S6m1c66CM4Jtl4Cr2A8yv02bovRBegYaoR4A0V+mzd6dEFaJhqBPj4Cn22zjFRFTUCfFyFPlt3QnQBGqYaAZ7kxRsL8QisKmrcORvE3T2Gsx2a3yDm1wfQpYYZYKlhBlhqmAGWGmaApYYZYKlhBlhqmAGWGmaApYYZYE2iqcL97S7c38gMsCZR6YdLwt48aoA1iUo/s26ApR6Vfk9Z2FtHDbAmzYl0vxhS0hOF+xuZAdakuRo4vHCfYQGuYRC/OTNCXa1shw7aTJ3fwvpMnxtR21B2/KFshzqbqfPj8m8ysN+EHsqOP5TtmHQnUvfH5e/tb1PebVXkh0sVTNF9z7uB7m7zDOWveee6vWLfi/KdWAtrcTumgGm6HXcDcBL+ka5pL90fixejCnByh2MG+CndKaP6cTeB4a1lKNeOrWzHSmBLhXpti7ezRpif5rSy4y+mle0wvDHtvhHmpkmt7PiLaWE7ZirUaVu87QfOHmF+mtTCjj+K7NsxBTxVoU7b4u36EeanFy6lbNc0cHJ0ERPoJeCS6CIOMMDt2hhdwIT6GvB8dBEHGOB2nRldwAT6BcELN97JhRwLy74drzOwNbjJ3QN8HtgTXchcNRZy7ALWFOwv8kZWKa9EF6Cx/A34IsnCC3VOoZ+r0GfraoxJ2FsgJszDwHnAy9GFzKdGgP9Toc/W1QjwgxX61P+7BzgHeCG4jgV5BO5HjTG5o0KfOujndNe8YS+sG0WNAD9Uoc/W1RiTO4CnK/Q76V6iW+G2mYTXvH04hfiVMtlarQUXLqUs1/bTrbBat6QZGKitxE9IlvbomGO5GB9mGL/dx4DXNi/HlcRPSpZ2xXhDuSgfJ1xe2wP8joE+EjiuD9Lddo+epOj2Kv2dks0A23vYppbbm3TvsLqYbh/VIVxO/IRFtx+MPYpLMwVsAm4EttG98iV6DPpuu4H/Ak8CfwF+BVxG9+pXV64twWq6r0+iJzSqPTc7BlKzpunu7kWHqe/2FnB+gfGTwl1OfKD6bt8vMnJSAiuAG4gPVV/tVuKeoJKqOBK4mfhw1W43440SDdQK4FLq/D5NdNsPXIUvSNAE2Miw7k4/S/kfjJZSO4ruaLyT+AAut+2iO+oeXXhspGasBX4EPEZ8IEdtj83WvLbCeEhLkulu6Yfovjs9A1hPtwRxPWVfz7MUu4Bn6F5Q8CzwCHAn3buYJUmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEnA/wDL76bzm26ebQAAAABJRU5ErkJggg==";var h=n(2949),u=n(5944);function p(e){let{collapse:t,setCollapse:n}=e;const r=i.iv`
+"use strict";(self.webpackChunkdwcj_documentation=self.webpackChunkdwcj_documentation||[]).push([[8402],{8105:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>A,contentTitle:()=>l,default:()=>u,frontMatter:()=>o,metadata:()=>c,toc:()=>d});var r=n(5893),i=n(1151),a=(n(7650),n(2322),n(6957),n(7796)),s=n(3273);const o={sidebar_position:0,title:"Field"},l=void 0,c={id:"components/fields/fields",title:"Field",description:"The DWCJ supports seven different types of field components, each with various behaviors and implementations that suit various",source:"@site/docs/components/fields/fields.md",sourceDirName:"components/fields",slug:"/components/fields/",permalink:"/docs/components/fields/",draft:!1,unlisted:!1,editUrl:"https://github.com/DwcJava/dwcjava.github.io/tree/website/docs/components/fields/fields.md",tags:[],version:"current",sidebarPosition:0,frontMatter:{sidebar_position:0,title:"Field"},sidebar:"documentationSidebar",previous:{title:"Drawer",permalink:"/docs/components/drawer"},next:{title:"ColorField",permalink:"/docs/components/fields/colorfield"}},A={},d=[{value:"Shared Field Properties",id:"shared-field-properties",level:2},{value:"Label",id:"label",level:3},{value:"Required",id:"required",level:3},{value:"Spellcheck",id:"spellcheck",level:3},{value:"Shared Events",id:"shared-events",level:2},{value:"Parts and CSS Properties",id:"parts-and-css-properties",level:2},{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}];function h(e){const t={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",li:"li",p:"p",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,i.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(s.Z,{type:"engine",location:"org/dwcj/component/field/AbstractField"}),"\n",(0,r.jsx)(t.p,{children:"The DWCJ supports seven different types of field components, each with various behaviors and implementations that suit various\r\nneeds. While each of these components have variations in their implementations, there are commonalities amongst all of the\r\nfield classes that will be described here."}),"\n",(0,r.jsx)(t.admonition,{type:"info",children:(0,r.jsx)(t.p,{children:"This section describes common functionality amongst various field components in the DWCJ, and is not itself a class that can be instantiated and used."})}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"/docs/components/fields/colorfield",children:(0,r.jsx)(t.code,{children:"ColorField"})})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"/docs/components/fields/datefield",children:(0,r.jsx)(t.code,{children:"DateField"})})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"/docs/components/fields/datetimefield",children:(0,r.jsx)(t.code,{children:"DateTimeField"})})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"/docs/components/fields/numberfield",children:(0,r.jsx)(t.code,{children:"NumberField"})})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"/docs/components/fields/passwordfield",children:(0,r.jsx)(t.code,{children:"PasswordField"})})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"/docs/components/fields/textfield",children:(0,r.jsx)(t.code,{children:"TextField"})})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsx)(t.a,{href:"/docs/components/fields/timefield",children:(0,r.jsx)(t.code,{children:"TimeField"})})}),"\n"]}),"\n",(0,r.jsx)(t.h2,{id:"shared-field-properties",children:"Shared Field Properties"}),"\n",(0,r.jsx)(t.h3,{id:"label",children:"Label"}),"\n",(0,r.jsx)(t.p,{children:"A field label is a descriptive text or title that is associated with the field. It provides a brief explanation or prompt to help users understand the purpose or expected input for that particular field. Field labels are not only important for usability but also play a crucial role in accessibility, as they enable screen readers and assistive technologies to provide accurate information and facilitate keyboard navigation."}),"\n",(0,r.jsx)(t.h3,{id:"required",children:"Required"}),"\n",(0,r.jsxs)(t.p,{children:["A field is required when the user must provide a value before submitting a form. This is mainly used in conjunction with ",(0,r.jsx)(t.code,{children:"setLabel(String)"})," to provide a visual indication to users that the field is required."]}),"\n",(0,r.jsx)(t.admonition,{type:"info",children:(0,r.jsx)(t.p,{children:"Field components contain built-in visual validation which notifies users if a required field is empty, or has had values removed."})}),"\n",(0,r.jsx)(t.h3,{id:"spellcheck",children:"Spellcheck"}),"\n",(0,r.jsxs)(t.p,{children:["By calling the ",(0,r.jsx)(t.code,{children:"setSpellCheck(true)"})," method, you can enable the spellcheck feature for a field. This means that when a user enters text into the field, the browser or user agent may check the spelling of the entered text for errors."]}),"\n",(0,r.jsx)(t.h2,{id:"shared-events",children:"Shared Events"}),"\n",(0,r.jsx)(t.admonition,{type:"info",children:(0,r.jsx)(t.p,{children:"All field components share the following events"})}),"\n",(0,r.jsxs)(t.table,{children:[(0,r.jsx)(t.thead,{children:(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.th,{style:{textAlign:"center"},children:"Events"}),(0,r.jsx)(t.th,{children:"Description"})]})}),(0,r.jsxs)(t.tbody,{children:[(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{style:{textAlign:"center"},children:(0,r.jsx)(s.Z,{type:"engine",location:"org/dwcj/component/event/BlurEvent",code:"true",children:"BlurEvent"})}),(0,r.jsx)(t.td,{children:"An event that is triggered when a component loses focus."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{style:{textAlign:"center"},children:(0,r.jsx)(s.Z,{type:"engine",location:"org/dwcj/component/event/FocusEvent",code:"true",children:"FocusEvent"})}),(0,r.jsx)(t.td,{children:"An event that is triggered when a component gains focus, opposite of a blur event."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{style:{textAlign:"center"},children:(0,r.jsx)(s.Z,{type:"engine",location:"org/dwcj/component/event/KeypressEvent",code:"true",children:"KeypressEvent"})}),(0,r.jsx)(t.td,{children:'An event that is triggered when one of "special keys" is pressed while the component has focus. These keys have specific codes, allowing for conditional logic to be implemented based on the key pressed.'})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{style:{textAlign:"center"},children:(0,r.jsx)(s.Z,{type:"engine",location:"org/dwcj/component/event/ModifyEvent",code:"true",children:"ModifyEvent"})}),(0,r.jsx)(t.td,{children:"An event that is triggered when an is changed or modified. It typically occurs any time a user changes an aspect of the component, such as each time a letter is input or removed from an input component."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{style:{textAlign:"center"},children:(0,r.jsx)(s.Z,{type:"engine",location:"org/dwcj/component/event/MouseEnterEvent",code:"true",children:"MouseEnterEvent"})}),(0,r.jsx)(t.td,{children:"An event that is triggered when the mouse cursor enters the boundaries of a component."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{style:{textAlign:"center"},children:(0,r.jsx)(s.Z,{type:"engine",location:"org/dwcj/component/event/MouseExitEvent",code:"true",children:"MouseExitEvent"})}),(0,r.jsx)(t.td,{children:"An event that is triggered when the mouse cursor exits the boundaries of a component."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{style:{textAlign:"center"},children:(0,r.jsx)(s.Z,{type:"engine",location:"org/dwcj/component/event/RightMouseDownEvent",code:"true",children:"RightMouseDownEvent"})}),(0,r.jsx)(t.td,{children:"An event that is triggered when the user presses the right mouse button while the cursor is over a component."})]})]})]}),"\n",(0,r.jsx)(t.h2,{id:"parts-and-css-properties",children:"Parts and CSS Properties"}),"\n",(0,r.jsx)(t.admonition,{type:"info",children:(0,r.jsx)(t.p,{children:"As all field components are built from a singular web component, they will all share the\r\nfollowing Shadow Parts and CSS Property values"})}),"\n",(0,r.jsx)(t.h3,{id:"shadow-parts",children:"Shadow Parts"}),"\n",(0,r.jsx)(t.p,{children:"These are the various parts of the shadow DOM for the component, which will be required when styling via CSS is desired."}),"\n",(0,r.jsx)(a.Z,{tag:n(5731).gN,table:"parts"}),"\n",(0,r.jsx)(t.h3,{id:"css-properties",children:"CSS Properties"}),"\n",(0,r.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,r.jsx)(a.Z,{tag:n(5731).gN,table:"properties"}),"\n",(0,r.jsx)(t.h3,{id:"reflected-attributes",children:"Reflected Attributes"}),"\n",(0,r.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,r.jsx)(a.Z,{tag:n(5731).gN,table:"reflects"}),"\n",(0,r.jsx)(t.h3,{id:"dependencies",children:"Dependencies"}),"\n",(0,r.jsx)(t.p,{children:"This component relies on the following components - see the related article for more detailed styling information:"}),"\n",(0,r.jsx)(a.Z,{tag:"bbj-editbox",table:"dependencies"})]})}function u(e={}){const{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(h,{...e})}):h(e)}},6031:(e,t,n)=>{var r=n(4836);t.Z=void 0;var i=r(n(4938)),a=n(5893),s=(0,i.default)((0,a.jsx)("path",{d:"m19 1-5 5v11l5-4.5V1zM1 6v14.65c0 .25.25.5.5.5.1 0 .15-.05.25-.05C3.1 20.45 5.05 20 6.5 20c1.95 0 4.05.4 5.5 1.5V6c-1.45-1.1-3.55-1.5-5.5-1.5S2.45 4.9 1 6zm22 13.5V6c-.6-.45-1.25-.75-2-1v13.5c-1.1-.35-2.3-.5-3.5-.5-1.7 0-4.15.65-5.5 1.5v2c1.35-.85 3.8-1.5 5.5-1.5 1.65 0 3.35.3 4.75 1.05.1.05.15.05.25.05.25 0 .5-.25.5-.5v-1.1z"}),"AutoStories");t.Z=s},2610:(e,t,n)=>{var r=n(4836);t.Z=void 0;var i=r(n(4938)),a=n(5893),s=(0,i.default)((0,a.jsx)("path",{d:"M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"}),"DragIndicator");t.Z=s},5162:(e,t,n)=>{n.d(t,{Z:()=>s});n(7294);var r=n(6010);const i={tabItem:"tabItem_Ymn6"};var a=n(5893);function s(e){let{children:t,hidden:n,className:s}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,r.Z)(i.tabItem,s),hidden:n,children:t})}},4866:(e,t,n)=>{n.d(t,{Z:()=>y});var r=n(7294),i=n(6010),a=n(2466),s=n(6550),o=n(469),l=n(1980),c=n(7392),A=n(12);function d(e){return r.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,r.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 h(e){const{values:t,children:n}=e;return(0,r.useMemo)((()=>{const e=t??function(e){return d(e).map((e=>{let{props:{value:t,label:n,attributes:r,default:i}}=e;return{value:t,label:n,attributes:r,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 u(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 i=(0,s.k6)(),a=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)(a),(0,r.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(i.location.search);t.set(a,e),i.replace({...i.location,search:t.toString()})}),[a,i])]}function g(e){const{defaultValue:t,queryString:n=!1,groupId:i}=e,a=h(e),[s,l]=(0,r.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(!u({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 r=n.find((e=>e.default))??n[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:t,tabValues:a}))),[c,d]=p({queryString:n,groupId:i}),[g,b]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[i,a]=(0,A.Nk)(n);return[i,(0,r.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:i}),m=(()=>{const e=c??g;return u({value:e,tabValues:a})?e:null})();(0,o.Z)((()=>{m&&l(m)}),[m]);return{selectedValue:s,selectValue:(0,r.useCallback)((e=>{if(!u({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);l(e),d(e),b(e)}),[d,b,a]),tabValues:a}}var b=n(2389);const m={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var f=n(5893);function v(e){let{className:t,block:n,selectedValue:r,selectValue:s,tabValues:o}=e;const l=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.o5)(),A=e=>{const t=e.currentTarget,n=l.indexOf(t),i=o[n].value;i!==r&&(c(t),s(i))},d=e=>{let t=null;switch(e.key){case"Enter":A(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,f.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,i.Z)("tabs",{"tabs--block":n},t),children:o.map((e=>{let{value:t,label:n,attributes:a}=e;return(0,f.jsx)("li",{role:"tab",tabIndex:r===t?0:-1,"aria-selected":r===t,ref:e=>l.push(e),onKeyDown:d,onClick:A,...a,className:(0,i.Z)("tabs__item",m.tabItem,a?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function w(e){let{lazy:t,children:n,selectedValue:i}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===i));return e?(0,r.cloneElement)(e,{className:"margin-top--md"}):null}return(0,f.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==i})))})}function x(e){const t=g(e);return(0,f.jsxs)("div",{className:(0,i.Z)("tabs-container",m.tabList),children:[(0,f.jsx)(v,{...e,...t}),(0,f.jsx)(w,{...e,...t})]})}function y(e){const t=(0,b.Z)();return(0,f.jsx)(x,{...e,children:d(e.children)},String(t))}},6957:(e,t,n)=>{n.d(t,{Z:()=>b});var r=n(7294),i=n(917),a=n(4866),s=n(5162),o=n(4673),l=n(1750);const c="data:image/png;base64,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",A=n.p+"assets/images/expand-ba3f00f73da43d91e5b17663c4a7d108.png",d="data:image/png;base64,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";var h=n(2610),u=n(5944);function p(e){let{collapse:t,setCollapse:n}=e;const r=i.iv`
display: flex;
justify-content: end;
- margin-bottom: -30px;
+ align-items: flex-end;
background-color: transparent;
+ margin-bottom: -10px;
`,a=i.iv`
- position: relative;
+ /* position: absolute;
+ right: 0; */
cursor: pointer;
z-index: 10;
height: 35px;
@@ -12,11 +14,12 @@
border: none;
background-color: none;
justify-self: flex-end;
- margin-right: 5px;
background-color: transparent;
+ margin-right: 5px;
+ margin-bottom: -50px !important;
`,s=i.iv`
filter: invert(var(--inversion-percentage));
- `;return(0,u.tZ)("div",{css:r,children:(0,u.tZ)("button",{css:a,onClick:()=>{n(!t)},children:t?(0,u.tZ)("img",{css:s,src:c,className:"icon-tabler-arrow-bar-up"}):(0,u.tZ)("img",{css:s,src:l,className:"icon-tabler-arrow-bar-down"})})})}function g(e){let{url:t}=e;const n=i.iv`
+ `;return(0,u.tZ)("div",{css:r,children:(0,u.tZ)("button",{css:a,onClick:()=>{n(!t)},children:t?(0,u.tZ)("img",{css:s,src:A,className:"icon-tabler-arrow-bar-up"}):(0,u.tZ)("img",{css:s,src:c,className:"icon-tabler-arrow-bar-down"})})})}function g(e){let{url:t}=e;const n=i.iv`
position: relative;
cursor: pointer;
z-index: 10;
@@ -25,7 +28,6 @@
border: none;
background-color: none;
justify-self: flex-end;
- /* margin-right: 5px; */
margin-top: -5px;
margin-bottom: -20px;
background-color: transparent;
@@ -37,55 +39,98 @@
mix-blend-mode: lighten; /* The blend mode determines how the overlay interacts with the image */
opacity: 0.5;
}
- `;return(0,u.tZ)("button",{css:n,onClick:()=>{window.open(t,"_blank")},children:(0,u.tZ)("img",{css:r,src:d})})}function b(e){let{path:t,javaC:n,javaE:l,cssURL:c,javaHighlight:d,height:b,frame:m,tabs:f}=e;const[v,w]=(0,r.useState)(""),[x,B]=(0,r.useState)(""),[E,y]=(0,r.useState)(""),[C,j]=(0,r.useState)(!(!n||!l)),[D,H]=(0,r.useState)(!1),[O,S]=(0,r.useState)({});(0,r.useEffect)((()=>{l&&fetch(l).then((e=>e.text())).then((e=>{B(e);const t=new URL(l).pathname.split("/"),n=t[t.length-1];S((e=>({...e,javaFile:n})))})),n&&fetch(n).then((e=>e.text())).then((e=>{w(e)})),c&&fetch(c).then((e=>e.text())).then((e=>{y(e);const t=new URL(c).pathname.split("/"),n=t[t.length-1];S((e=>({...e,cssFile:n})))}))}),[]);const Z=i.iv`
+ `;return(0,u.tZ)("button",{css:n,onClick:()=>{window.open(t,"_blank")},children:(0,u.tZ)("img",{css:r,src:d})})}function b(e){let{path:t,javaC:n,javaE:c,cssURL:A,javaHighlight:d,height:b,frame:m,tabs:f}=e;const[v,w]=(0,r.useState)(""),[x,y]=(0,r.useState)(""),[E,B]=(0,r.useState)(""),[C,j]=(0,r.useState)(!(!n||!c)),[D,H]=(0,r.useState)(!1),[S,O]=(0,r.useState)({}),[Z,k]=(0,r.useState)(!1),[V,I]=(0,r.useState)(0),[X,N]=(0,r.useState)(0),[Q,R]=(0,r.useState)(25),[T,q]=(0,r.useState)(25),[P,z]=(0,r.useState)(0),[L,M]=(0,r.useState)(!1),F=(0,r.useRef)(null),G=(0,r.useRef)(null);(0,r.useEffect)((()=>{c&&fetch(c).then((e=>e.text())).then((e=>{y(e);const t=new URL(c).pathname.split("/"),n=t[t.length-1];O((e=>({...e,javaFile:n})))})),n&&fetch(n).then((e=>e.text())).then((e=>{w(e)})),A&&fetch(A).then((e=>e.text())).then((e=>{B(e);const t=new URL(A).pathname.split("/"),n=t[t.length-1];O((e=>({...e,cssFile:n})))})),z(F.current.offsetWidth),console.log(P)}),[]);const J=()=>{k(!1),console.log("Stop Resizing")},Y=e=>{if(Z){const t=e.clientX-V;X+t>P/3&&(F.current.style.width=`${X+t}px`,G.current.style.right=(Q-t<25?25:Q-t)+"px",q(Q-t<25?25:Q-t))}},U=i.iv`
display: flex;
flex-direction: column;
- background-color: var(--code-display-color);
width: 100%;
margin-bottom: 16px;
- padding: ${"hidden"==m?"0 15px 0 15px;":"7px 15px 0 15px;"};
- box-shadow: var(--ifm-global-shadow-lw);
- `,I=i.iv`
+ /* padding: ${"hidden"==m?"0 15px 0 15px;":"7px 15px 0 15px;"}; */
+ /* box-shadow: var(--ifm-global-shadow-lw); */
+ background-color: var(--code-display-color-background);
+ `,W=i.iv`
+ width: 100%;
+ /* padding: 1em; */
+ border: 1px solid var(--ifm-toc-border-color);
+ border-right: none;
+ background-color: transparent;
+ display: flex;
+ position: relative;
+ `,K=i.iv`
min-height: 100px;
height: 100%;
width: 100%;
- height: ${b};
- `,V=i.iv`
- border: none;
+ height: ${b||"100%"};
+ pointer-events: none;
+ `,_=i.iv`
+ display: flex;
+ justify-content: flex-end;
+ opacity: 0;
+ transition: opacity 0.3s ease-in-out;
+ ${D&&"opacity: 1;"};
+ margin: 10px 0 0 0;
+ position: absolute;
+ right: 25px;
+ `,$=i.iv`
+ display: flex;
+ align-items: center;
+ cursor: ew-resize;
+ border-left: 1px solid var(--ifm-toc-border-color);
+ border-right: 1px solid var(--ifm-toc-border-color);
+ background-color: var(--ifm-background-color);
+ `,ee=i.iv`
box-shadow: none;
- background-color: var(--code-display-color);
- margin-bottom: 0px;
- padding: 10px;
+ background-color: var(--ifm-background-color);
+ margin: 0px;
+ padding: 0px;
+ border: 1px solid var(--ifm-toc-border-color);
+ border-top: none;
+ border-radius: 0px;
+ position: relative;
- .tabs{
- margin-top: 20px;
+ div{
+ /* border: none; */
+ border-color: var(--ifm-toc-border-color);
+ padding: 2px 0px 0px 0px;
+ margin: 0px
}
summary{
display: flex;
width: 100%;
justify-content: center;
- margin: 0;
+ margin: 10px 0;
font-weight: bold;
::before{
left: auto;
margin-left: -100px;
+ --docusaurus-details-decoration-color: var(--ifm-color-primary)
}
}
-
- `,X=i.iv`
- width: 100%;
- `,k=i.iv`
- display: flex;
- justify-content: flex-end;
- opacity: 0;
- transition: opacity 0.3s ease-in-out;
- ${D&&"opacity: 1;"};
+ .margin-top--md{
+ margin-top: 0px !important;
+ }
+ ul{
+ margin: -4px 0px!important;
+ }
+ `,te=i.iv`
+ /* :first-child{
+ margin-left: 1em;
+ } */
+ li[aria-selected="true"]{
+ border-color: var(--ifm-color-primary);
+ }
- `;return(0,u.BX)("div",{css:Z,children:["hidden"!=m?(0,u.BX)("div",{onMouseEnter:()=>{H(!0)},onMouseLeave:()=>H(!1),css:X,children:[(0,u.tZ)("div",{css:k,children:(0,u.tZ)(g,{url:t})}),(0,u.tZ)("iframe",{loading:"lazy",src:t+"&theme="+("dark"===(0,h.I)().colorMode?"dark":"light"),css:I})]}):null,(0,u.BX)(o.Z,{css:V,summary:(0,u.tZ)("summary",{children:"Show Code"}),children:[n&&l?(0,u.tZ)(p,{collapse:C,setCollapse:j}):null,c?(0,u.BX)(a.Z,{children:[(0,u.tZ)(s.Z,{value:f?f[0]:"Java",label:f?f[0]:O.javaFile,default:!0,children:(0,u.tZ)(A.Z,{className:"codeDemoBlock",language:"java",showLineNumbers:!0,metastring:d,children:C?v:x})}),(0,u.tZ)(s.Z,{value:f?f[1]:"CSS",label:f?f[1]:O.cssFile,children:(0,u.tZ)(A.Z,{className:"codeDemoBlock",language:"css",showLineNumbers:!0,children:E})})]}):(0,u.tZ)(a.Z,{children:(0,u.tZ)(s.Z,{value:f?f[0]:"Java",label:f?f[0]:O.javaFile,default:!0,children:(0,u.tZ)(A.Z,{className:"codeDemoBlock",language:"java",showLineNumbers:!0,metastring:d,children:C?v:x})})})]})]})}},3273:(e,t,n)=>{n.d(t,{Z:()=>l});var r=n(7294),i=n(917),a=n(8230),s=n(4387),o=n(6770);var A=n(5944);function l(e){let{type:t,location:n,top:l,children:c,code:d,suffix:h}=e;const[u,p]=(0,r.useState)("");(0,r.useEffect)((()=>{h||(h=""),p("https://javadoc.io/doc/org.dwcj/dwcj-"+t+"/latest/"+n+".html"+h)}),[]);const g=i.iv`
+ .tabs__item{
+ padding: 5px 20px -2px 20px;
+ border-radius: 0px;
+ }
+ `,ne=i.iv`
+ border-radius: 0px;
+ box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset;
+ `;return(0,u.BX)("div",{css:U,onMouseUp:J,onMouseLeave:J,onMouseMove:Y,children:["hidden"!=m?(0,u.BX)("div",{onMouseEnter:()=>{H(!0)},onMouseLeave:()=>H(!1),css:W,children:[(0,u.tZ)("iframe",{onMouseUp:J,loading:"lazy",src:t,css:{...K,pointerEvents:Z?"none":"auto"},ref:F,onMouseMove:Y}),(0,u.tZ)("div",{css:_,ref:G,children:(0,u.tZ)(g,{url:t})}),(0,u.tZ)("div",{css:$,onMouseDown:e=>{e.preventDefault(),k(!0),I(e.clientX),N(F.current.offsetWidth),R(T),console.log(G.current.right),console.log("Start Resizing")},children:(0,u.tZ)(h.Z,{})})]}):null,(0,u.BX)(o.Z,{css:ee,summary:(0,u.tZ)("summary",{onClick:()=>M(!L),children:L?"Hide Code":"Show Code"}),children:[n&&c?(0,u.tZ)(p,{collapse:C,setCollapse:j}):null,A?(0,u.BX)(a.Z,{css:te,children:[(0,u.tZ)(s.Z,{value:f?f[0]:"Java",label:f?f[0]:S.javaFile,default:!0,children:(0,u.tZ)(l.Z,{css:ne,className:"codeDemoBlock",language:"java",showLineNumbers:!0,metastring:d,children:C?v:x})}),(0,u.tZ)(s.Z,{value:f?f[1]:"CSS",label:f?f[1]:S.cssFile,children:(0,u.tZ)(l.Z,{css:ne,className:"codeDemoBlock",language:"css",showLineNumbers:!0,children:E})})]}):(0,u.tZ)(a.Z,{css:te,children:(0,u.tZ)(s.Z,{value:f?f[0]:"Java",label:f?f[0]:S.javaFile,default:!0,children:(0,u.tZ)(l.Z,{css:ne,className:"codeDemoBlock",language:"java",showLineNumbers:!0,metastring:d,children:C?v:x})})})]})]})}},3273:(e,t,n)=>{n.d(t,{Z:()=>c});var r=n(7294),i=n(917),a=n(8230),s=n(4387),o=n(6031);var l=n(5944);function c(e){let{type:t,location:n,top:c,children:A,code:d,suffix:h}=e;const[u,p]=(0,r.useState)("");(0,r.useEffect)((()=>{h||(h=""),p("https://javadoc.io/doc/org.dwcj/dwcj-"+t+"/latest/"+n+".html"+h)}),[]);const g=i.iv`
display: inline;
- ${l&&i.iv`
+ ${c&&i.iv`
width: 100%;
display: flex;
justify-content: flex-end;
@@ -94,10 +139,11 @@
`}
`,b=i.iv`
background-color: #0063CC;
+ padding: 0 0 0 5px;
:hover{
color: white;
}
- `;return(0,A.BX)(A.HY,{children:["true"===l&&(0,A.tZ)("div",{css:g,children:(0,A.tZ)(a.Z,{title:"JavaDoc",arrow:!0,children:(0,A.tZ)(s.Z,{css:b,label:"Java API",component:"a",href:u,icon:(0,A.tZ)(o.Z,{}),clickable:!0,color:"primary",target:"_blank"})})}),"true"!==l&&!d&&(0,A.tZ)("div",{css:g,children:(0,A.tZ)("a",{href:u,target:"_blank",children:c})}),"true"!==l&&d&&(0,A.tZ)("div",{css:g,children:(0,A.tZ)("code",{children:(0,A.tZ)("a",{href:u,target:"_blank",children:c})})})]})}},2322:(e,t,n)=>{n.d(t,{Z:()=>o});n(7294);var r=n(917),i=n(9960),a=n(5944);function s(e){let{imagePath:t,title:n,description:s,link:o}=e;const A=r.iv`
+ `;return(0,l.BX)(l.HY,{children:["true"===c&&(0,l.tZ)("div",{css:g,children:(0,l.tZ)(a.Z,{title:"JavaDoc",arrow:!0,children:(0,l.tZ)(s.Z,{css:b,label:"Java API",component:"a",href:u,icon:(0,l.tZ)(o.Z,{}),clickable:!0,color:"primary",target:"_blank"})})}),"true"!==c&&!d&&(0,l.tZ)("div",{css:g,children:(0,l.tZ)("a",{href:u,target:"_blank",children:A})}),"true"!==c&&d&&(0,l.tZ)("div",{css:g,children:(0,l.tZ)("code",{children:(0,l.tZ)("a",{href:u,target:"_blank",children:A})})})]})}},2322:(e,t,n)=>{n.d(t,{Z:()=>o});n(7294);var r=n(917),i=n(9960),a=n(5944);function s(e){let{imagePath:t,title:n,description:s,link:o}=e;const l=r.iv`
display: flex;
flex-direction: column;
width: 300px;
@@ -121,12 +167,12 @@
text-decoration: none;
color: var(--ifm-font-color-base);
}
- `,l=r.iv`
+ `,c=r.iv`
width: 250px;
height: 150px;
object-fit: contain;
margin: 0 0 5px -3px;
- `,c=r.iv`
+ `,A=r.iv`
height: 1px;
background-color: lightgray;
margin: 5px 0 15px 0;
@@ -140,7 +186,7 @@
font-size: .9em;
margin: 0px !important;
}
- `;return(0,a.BX)(i.Z,{to:o,css:A,children:[(0,a.tZ)("div",{css:{display:"flex",justifyContent:"center"},children:(0,a.tZ)("img",{src:t.default,css:l})}),(0,a.tZ)("div",{css:c,className:"bar"}),(0,a.BX)("div",{css:d,children:[(0,a.tZ)("h5",{children:n}),(0,a.tZ)("p",{children:s})]})]})}function o(e){let{componentData:t}=e;const n=r.iv`
+ `;return(0,a.BX)(i.Z,{to:o,css:l,children:[(0,a.tZ)("div",{css:{display:"flex",justifyContent:"center"},children:(0,a.tZ)("img",{src:t.default,css:c})}),(0,a.tZ)("div",{css:A,className:"bar"}),(0,a.BX)("div",{css:d,children:[(0,a.tZ)("h5",{children:n}),(0,a.tZ)("p",{children:s})]})]})}function o(e){let{componentData:t}=e;const n=r.iv`
display : flex;
flex-direction : row;
flex-wrap : wrap;
diff --git a/assets/js/44a2ffa8.610f66d0.js b/assets/js/44a2ffa8.610f66d0.js
deleted file mode 100644
index 5ab7e6240..000000000
--- a/assets/js/44a2ffa8.610f66d0.js
+++ /dev/null
@@ -1,100 +0,0 @@
-"use strict";(self.webpackChunkdwcj_documentation=self.webpackChunkdwcj_documentation||[]).push([[8499],{1955:(e,t,i)=>{i.r(t),i.d(t,{assets:()=>d,contentTitle:()=>o,default:()=>m,frontMatter:()=>l,metadata:()=>c,toc:()=>h});var n=i(5893),s=i(1151),a=(i(6957),i(7796),i(3273)),r=i(2665);const l={sidebar_position:7,title:"TimeField",slug:"timefield"},o=void 0,c={id:"components/fields/time-field",title:"TimeField",description:"The TimeField class is a Field component, and as such shares all of the commonalities belonging to a Field. Please refer to the Field documentation page for an overview of Field properties, events, and other important information.",source:"@site/docs/components/fields/time-field.md",sourceDirName:"components/fields",slug:"/components/fields/timefield",permalink:"/docs/components/fields/timefield",draft:!1,unlisted:!1,editUrl:"https://github.com/DwcJava/dwcjava.github.io/tree/website/docs/components/fields/time-field.md",tags:[],version:"current",sidebarPosition:7,frontMatter:{sidebar_position:7,title:"TimeField",slug:"timefield"},sidebar:"documentationSidebar",previous:{title:"TextField",permalink:"/docs/components/fields/textfield"},next:{title:"Label",permalink:"/docs/components/label"}},d={},h=[{value:"Usages",id:"usages",level:3},{value:"Constructors",id:"constructors",level:3},{value:"Maximum and Minimum",id:"maximum-and-minimum",level:3},{value:"Display",id:"display",level:3},{value:"Static Utilities",id:"static-utilities",level:3},{value:"Best Practices",id:"best-practices",level:3}];function u(e){const t={a:"a",admonition:"admonition",code:"code",h3:"h3",li:"li",mdxAdmonitionTitle:"mdxAdmonitionTitle",ol:"ol",p:"p",strong:"strong",ul:"ul",...(0,s.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(r.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,n.jsx)(r.Z,{tooltipText:"The name of the web component that will render in the DOM.",label:"bbj-editbox",href:"https://basishub.github.io/basis-next/#/web-components/bbj-editbox",clickable:!1,iconName:"code"}),"\n",(0,n.jsx)(a.Z,{type:"engine",location:"org/dwcj/component/field/TimeField",top:"true"}),"\n",(0,n.jsxs)(t.admonition,{type:"success",children:[(0,n.jsx)(t.mdxAdmonitionTitle,{children:(0,n.jsx)(t.strong,{children:"Important"})}),(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.code,{children:"TimeField"})," class is a Field component, and as such shares all of the commonalities belonging to a Field. Please refer to the ",(0,n.jsx)(t.strong,{children:(0,n.jsx)(t.a,{href:"/docs/components/fields",children:"Field documentation page"})})," for an overview of Field properties, events, and other important information."]})]}),"\n",(0,n.jsx)(t.h3,{id:"usages",children:"Usages"}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.code,{children:"TimeField"})," is best used in scenarios where capturing or manipulating time values is crucial to the user interface or application functionality. Here are some examples of when to use the ",(0,n.jsx)(t.code,{children:"TimeField"}),":"]}),"\n",(0,n.jsxs)(t.ol,{children:["\n",(0,n.jsxs)(t.li,{children:["\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.strong,{children:"Event Scheduling and Calendars"}),": Time fields are essential in applications that involve event scheduling, appointment booking, or managing calendars where precise time selection is required."]}),"\n"]}),"\n",(0,n.jsxs)(t.li,{children:["\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.strong,{children:"Time Tracking and Logging"}),": Applications that involve time tracking, such as timesheet management or logging work hours, require Time fields to capture accurate time entries."]}),"\n"]}),"\n",(0,n.jsxs)(t.li,{children:["\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.strong,{children:"Reminders and Alarms"}),": If your application involves setting reminders or alarms that require specific times, using a ",(0,n.jsx)(t.code,{children:"TimeField"})," simplifies the input process for users."]}),"\n"]}),"\n",(0,n.jsxs)(t.li,{children:["\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.strong,{children:"Meeting or Event Invitations"}),": When designing applications that involve meeting or event invitations, a ",(0,n.jsx)(t.code,{children:"TimeField"})," enables users to specify event start times or deadlines accurately."]}),"\n"]}),"\n"]}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.code,{children:"TimeField"})," class provides a user interface component that allows the user to enter both a time; hours, minutes, and optionally seconds. The value of the time field is always in 24-hour format that includes leading zeros: HH",":mm",", regardless of the field format, which is likely to be selected based on the user's locale (or by the user agent). If the time includes seconds, the format is always HH:mm",":ss"]}),"\n",(0,n.jsx)(t.h3,{id:"constructors",children:"Constructors"}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.code,{children:"TimeField"})," class has four constructors:"]}),"\n",(0,n.jsxs)(t.ol,{children:["\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"TimeField(String label, LocalTime time)"}),": Creates a ",(0,n.jsx)(t.code,{children:"TimeField"})," with a given label and time."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"TimeField(String label)"}),": Creates a ",(0,n.jsx)(t.code,{children:"TimeField"})," with a given label but with no pre-populated time."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"TimeField(LocalTime time)"}),": Creates a ",(0,n.jsx)(t.code,{children:"TimeField"})," with a given time, but without a label."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"TimeField()"}),": Creates a ",(0,n.jsx)(t.code,{children:"TimeField"})," without any provided information."]}),"\n"]}),"\n",(0,n.jsx)(t.h3,{id:"maximum-and-minimum",children:"Maximum and Minimum"}),"\n",(0,n.jsxs)(t.p,{children:["You can use the ",(0,n.jsx)(t.code,{children:"setMax()"})," and ",(0,n.jsx)(t.code,{children:"setMin()"})," methods to specify the acceptable time range. If the value entered into the component is outside of the specified value, the component fails constraint validation. Also, if there is already a maximum or minimum set, the value given to the other method must be lower or higher respectively."]}),"\n",(0,n.jsx)(t.h3,{id:"display",children:"Display"}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.code,{children:"TimeField"})," will, by default, display its information within the UI element based on the locale the browser is configured to. For example, users with United States configurations will see the time displayed with A.M. and P.M. labels, whereas other locales would see the time in 24 hour format. This does not inhibit manipulation of the ",(0,n.jsx)(t.code,{children:"LocalTime"})," object returned by methods from the class, however."]}),"\n",(0,n.jsx)(t.admonition,{type:"info",children:(0,n.jsxs)(t.p,{children:["When displaying time, the seconds will display by default. However, if the component is given a ",(0,n.jsx)(t.code,{children:"LocaleTime"})," object with the seconds set to 0, the seconds are then hidden from the display."]})}),"\n",(0,n.jsx)(t.h3,{id:"static-utilities",children:"Static Utilities"}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.code,{children:"TimeField"})," class also provides the following static utility methods:"]}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsxs)(t.li,{children:["\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:"fromTime(String timeAsString)"}),": Convert a time string in HH:mm",":ss"," format to a LocalTime object which can then be utilized with this class, or elsewhere."]}),"\n"]}),"\n",(0,n.jsxs)(t.li,{children:["\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:"toTime(LocalTime time)"}),": Convert a LocalTime to a time string in HH:mm",":ss"," format."]}),"\n"]}),"\n",(0,n.jsxs)(t.li,{children:["\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:"isValidTime(String timeAsString)"}),": Check if the given string is a valid HH:mm",":ss"," time. This will return a boolean value true if so, false otherwise."]}),"\n"]}),"\n"]}),"\n",(0,n.jsx)(t.h3,{id:"best-practices",children:"Best Practices"}),"\n",(0,n.jsxs)(t.ol,{children:["\n",(0,n.jsxs)(t.li,{children:["\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.strong,{children:"Provide Clear Time Format Examples"}),": Clearly indicate the expected time format to users within or near the ",(0,n.jsx)(t.code,{children:"TimeField"}),". Use examples or placeholders to guide users in entering time correctly. Consider displaying the time format dynamically based on the user's locale if applicable."]}),"\n"]}),"\n",(0,n.jsxs)(t.li,{children:["\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.strong,{children:"Consider Accessibility"}),": Utilize the ",(0,n.jsx)(t.code,{children:"TimeField"})," component with accessibility in mind, ensuring it meets accessibility standards such as providing proper labels, sufficient color contrast, and compatibility with assistive technologies."]}),"\n"]}),"\n",(0,n.jsxs)(t.li,{children:["\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.strong,{children:"Include Clear Time Clearing Option"}),": Enable users to clear the selected time easily if needed, providing a way to reset the ",(0,n.jsx)(t.code,{children:"TimeField"})," to an empty state."]}),"\n"]}),"\n"]})]})}function m(e={}){const{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(u,{...e})}):u(e)}},5162:(e,t,i)=>{i.d(t,{Z:()=>r});i(7294);var n=i(6010);const s={tabItem:"tabItem_Ymn6"};var a=i(5893);function r(e){let{children:t,hidden:i,className:r}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,n.Z)(s.tabItem,r),hidden:i,children:t})}},4866:(e,t,i)=>{i.d(t,{Z:()=>j});var n=i(7294),s=i(6010),a=i(2466),r=i(6550),l=i(469),o=i(1980),c=i(7392),d=i(12);function h(e){return n.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,n.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:i}=e;return(0,n.useMemo)((()=>{const e=t??function(e){return h(e).map((e=>{let{props:{value:t,label:i,attributes:n,default:s}}=e;return{value:t,label:i,attributes:n,default:s}}))}(i);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,i])}function m(e){let{value:t,tabValues:i}=e;return i.some((e=>e.value===t))}function p(e){let{queryString:t=!1,groupId:i}=e;const s=(0,r.k6)(),a=function(e){let{queryString:t=!1,groupId:i}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!i)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 i??null}({queryString:t,groupId:i});return[(0,o._X)(a),(0,n.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(s.location.search);t.set(a,e),s.replace({...s.location,search:t.toString()})}),[a,s])]}function A(e){const{defaultValue:t,queryString:i=!1,groupId:s}=e,a=u(e),[r,o]=(0,n.useState)((()=>function(e){let{defaultValue:t,tabValues:i}=e;if(0===i.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!m({value:t,tabValues:i}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${i.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const n=i.find((e=>e.default))??i[0];if(!n)throw new Error("Unexpected error: 0 tabValues");return n.value}({defaultValue:t,tabValues:a}))),[c,h]=p({queryString:i,groupId:s}),[A,b]=function(e){let{groupId:t}=e;const i=function(e){return e?`docusaurus.tab.${e}`:null}(t),[s,a]=(0,d.Nk)(i);return[s,(0,n.useCallback)((e=>{i&&a.set(e)}),[i,a])]}({groupId:s}),g=(()=>{const e=c??A;return m({value:e,tabValues:a})?e:null})();(0,l.Z)((()=>{g&&o(g)}),[g]);return{selectedValue:r,selectValue:(0,n.useCallback)((e=>{if(!m({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);o(e),h(e),b(e)}),[h,b,a]),tabValues:a}}var b=i(2389);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var f=i(5893);function v(e){let{className:t,block:i,selectedValue:n,selectValue:r,tabValues:l}=e;const o=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.o5)(),d=e=>{const t=e.currentTarget,i=o.indexOf(t),s=l[i].value;s!==n&&(c(t),r(s))},h=e=>{let t=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":{const i=o.indexOf(e.currentTarget)+1;t=o[i]??o[0];break}case"ArrowLeft":{const i=o.indexOf(e.currentTarget)-1;t=o[i]??o[o.length-1];break}}t?.focus()};return(0,f.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.Z)("tabs",{"tabs--block":i},t),children:l.map((e=>{let{value:t,label:i,attributes:a}=e;return(0,f.jsx)("li",{role:"tab",tabIndex:n===t?0:-1,"aria-selected":n===t,ref:e=>o.push(e),onKeyDown:h,onClick:d,...a,className:(0,s.Z)("tabs__item",g.tabItem,a?.className,{"tabs__item--active":n===t}),children:i??t},t)}))})}function x(e){let{lazy:t,children:i,selectedValue:s}=e;const a=(Array.isArray(i)?i:[i]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===s));return e?(0,n.cloneElement)(e,{className:"margin-top--md"}):null}return(0,f.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,n.cloneElement)(e,{key:t,hidden:e.props.value!==s})))})}function w(e){const t=A(e);return(0,f.jsxs)("div",{className:(0,s.Z)("tabs-container",g.tabList),children:[(0,f.jsx)(v,{...e,...t}),(0,f.jsx)(x,{...e,...t})]})}function j(e){const t=(0,b.Z)();return(0,f.jsx)(w,{...e,children:h(e.children)},String(t))}},6957:(e,t,i)=>{i.d(t,{Z:()=>b});var n=i(7294),s=i(917),a=i(4866),r=i(5162),l=i(4673),o=i(1750);const c="data:image/png;base64,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",d=i.p+"assets/images/expand-ba3f00f73da43d91e5b17663c4a7d108.png",h="data:image/png;base64,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";var u=i(2949),m=i(5944);function p(e){let{collapse:t,setCollapse:i}=e;const n=s.iv`
- display: flex;
- justify-content: end;
- margin-bottom: -30px;
- background-color: transparent;
- `,a=s.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=s.iv`
- filter: invert(var(--inversion-percentage));
- `;return(0,m.tZ)("div",{css:n,children:(0,m.tZ)("button",{css:a,onClick:()=>{i(!t)},children:t?(0,m.tZ)("img",{css:r,src:d,className:"icon-tabler-arrow-bar-up"}):(0,m.tZ)("img",{css:r,src:c,className:"icon-tabler-arrow-bar-down"})})})}function A(e){let{url:t}=e;const i=s.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;
-
-
- `,n=s.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,m.tZ)("button",{css:i,onClick:()=>{window.open(t,"_blank")},children:(0,m.tZ)("img",{css:n,src:h})})}function b(e){let{path:t,javaC:i,javaE:c,cssURL:d,javaHighlight:h,height:b,frame:g,tabs:f}=e;const[v,x]=(0,n.useState)(""),[w,j]=(0,n.useState)(""),[y,T]=(0,n.useState)(""),[D,B]=(0,n.useState)(!(!i||!c)),[Z,k]=(0,n.useState)(!1),[F,C]=(0,n.useState)({});(0,n.useEffect)((()=>{c&&fetch(c).then((e=>e.text())).then((e=>{j(e);const t=new URL(c).pathname.split("/"),i=t[t.length-1];C((e=>({...e,javaFile:i})))})),i&&fetch(i).then((e=>e.text())).then((e=>{x(e)})),d&&fetch(d).then((e=>e.text())).then((e=>{T(e);const t=new URL(d).pathname.split("/"),i=t[t.length-1];C((e=>({...e,cssFile:i})))}))}),[]);const S=s.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);
- `,E=s.iv`
- min-height: 100px;
- height: 100%;
- width: 100%;
- height: ${b};
- `,L=s.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;
- }
- }
-
- `,H=s.iv`
- width: 100%;
- `,M=s.iv`
- display: flex;
- justify-content: flex-end;
- opacity: 0;
- transition: opacity 0.3s ease-in-out;
- ${Z&&"opacity: 1;"};
-
- `;return(0,m.BX)("div",{css:S,children:["hidden"!=g?(0,m.BX)("div",{onMouseEnter:()=>{k(!0)},onMouseLeave:()=>k(!1),css:H,children:[(0,m.tZ)("div",{css:M,children:(0,m.tZ)(A,{url:t})}),(0,m.tZ)("iframe",{loading:"lazy",src:t+"&theme="+("dark"===(0,u.I)().colorMode?"dark":"light"),css:E})]}):null,(0,m.BX)(l.Z,{css:L,summary:(0,m.tZ)("summary",{children:"Show Code"}),children:[i&&c?(0,m.tZ)(p,{collapse:D,setCollapse:B}):null,d?(0,m.BX)(a.Z,{children:[(0,m.tZ)(r.Z,{value:f?f[0]:"Java",label:f?f[0]:F.javaFile,default:!0,children:(0,m.tZ)(o.Z,{className:"codeDemoBlock",language:"java",showLineNumbers:!0,metastring:h,children:D?v:w})}),(0,m.tZ)(r.Z,{value:f?f[1]:"CSS",label:f?f[1]:F.cssFile,children:(0,m.tZ)(o.Z,{className:"codeDemoBlock",language:"css",showLineNumbers:!0,children:y})})]}):(0,m.tZ)(a.Z,{children:(0,m.tZ)(r.Z,{value:f?f[0]:"Java",label:f?f[0]:F.javaFile,default:!0,children:(0,m.tZ)(o.Z,{className:"codeDemoBlock",language:"java",showLineNumbers:!0,metastring:h,children:D?v:w})})})]})]})}},3273:(e,t,i)=>{i.d(t,{Z:()=>c});var n=i(7294),s=i(917),a=i(8230),r=i(4387),l=i(6770);var o=i(5944);function c(e){let{type:t,location:i,top:c,children:d,code:h,suffix:u}=e;const[m,p]=(0,n.useState)("");(0,n.useEffect)((()=>{u||(u=""),p("https://javadoc.io/doc/org.dwcj/dwcj-"+t+"/latest/"+i+".html"+u)}),[]);const A=s.iv`
- display: inline;
-
- ${c&&s.iv`
- width: 100%;
- display: flex;
- justify-content: flex-end;
- margin-top: -33px;
- margin-bottom: 25px;
- `}
- `,b=s.iv`
- background-color: #0063CC;
- :hover{
- color: white;
- }
- `;return(0,o.BX)(o.HY,{children:["true"===c&&(0,o.tZ)("div",{css:A,children:(0,o.tZ)(a.Z,{title:"JavaDoc",arrow:!0,children:(0,o.tZ)(r.Z,{css:b,label:"Java API",component:"a",href:m,icon:(0,o.tZ)(l.Z,{}),clickable:!0,color:"primary",target:"_blank"})})}),"true"!==c&&!h&&(0,o.tZ)("div",{css:A,children:(0,o.tZ)("a",{href:m,target:"_blank",children:d})}),"true"!==c&&h&&(0,o.tZ)("div",{css:A,children:(0,o.tZ)("code",{children:(0,o.tZ)("a",{href:m,target:"_blank",children:d})})})]})}},1415:(e,t,i)=>{i.d(t,{Z:()=>a});i(7294);var n=i(8397),s=i(5893);function a(e){return(0,s.jsx)(s.Fragment,{children:(0,s.jsx)(n.Z,{...e})})}}}]);
\ No newline at end of file
diff --git a/assets/js/44a2ffa8.7c4918ef.js b/assets/js/44a2ffa8.7c4918ef.js
new file mode 100644
index 000000000..6f5121fbb
--- /dev/null
+++ b/assets/js/44a2ffa8.7c4918ef.js
@@ -0,0 +1,146 @@
+"use strict";(self.webpackChunkdwcj_documentation=self.webpackChunkdwcj_documentation||[]).push([[8499],{1955:(e,t,i)=>{i.r(t),i.d(t,{assets:()=>d,contentTitle:()=>l,default:()=>m,frontMatter:()=>o,metadata:()=>c,toc:()=>u});var n=i(5893),s=i(1151),r=(i(6957),i(7796),i(3273)),a=i(2665);const o={sidebar_position:7,title:"TimeField",slug:"timefield"},l=void 0,c={id:"components/fields/time-field",title:"TimeField",description:"The TimeField class is a Field component, and as such shares all of the commonalities belonging to a Field. Please refer to the Field documentation page for an overview of Field properties, events, and other important information.",source:"@site/docs/components/fields/time-field.md",sourceDirName:"components/fields",slug:"/components/fields/timefield",permalink:"/docs/components/fields/timefield",draft:!1,unlisted:!1,editUrl:"https://github.com/DwcJava/dwcjava.github.io/tree/website/docs/components/fields/time-field.md",tags:[],version:"current",sidebarPosition:7,frontMatter:{sidebar_position:7,title:"TimeField",slug:"timefield"},sidebar:"documentationSidebar",previous:{title:"TextField",permalink:"/docs/components/fields/textfield"},next:{title:"Label",permalink:"/docs/components/label"}},d={},u=[{value:"Usages",id:"usages",level:3},{value:"Constructors",id:"constructors",level:3},{value:"Maximum and Minimum",id:"maximum-and-minimum",level:3},{value:"Display",id:"display",level:3},{value:"Static Utilities",id:"static-utilities",level:3},{value:"Best Practices",id:"best-practices",level:3}];function h(e){const t={a:"a",admonition:"admonition",code:"code",h3:"h3",li:"li",mdxAdmonitionTitle:"mdxAdmonitionTitle",ol:"ol",p:"p",strong:"strong",ul:"ul",...(0,s.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(a.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,n.jsx)(a.Z,{tooltipText:"The name of the web component that will render in the DOM.",label:"bbj-editbox",href:"https://basishub.github.io/basis-next/#/web-components/bbj-editbox",clickable:!1,iconName:"code"}),"\n",(0,n.jsx)(r.Z,{type:"engine",location:"org/dwcj/component/field/TimeField",top:"true"}),"\n",(0,n.jsxs)(t.admonition,{type:"success",children:[(0,n.jsx)(t.mdxAdmonitionTitle,{children:(0,n.jsx)(t.strong,{children:"Important"})}),(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.code,{children:"TimeField"})," class is a Field component, and as such shares all of the commonalities belonging to a Field. Please refer to the ",(0,n.jsx)(t.strong,{children:(0,n.jsx)(t.a,{href:"/docs/components/fields",children:"Field documentation page"})})," for an overview of Field properties, events, and other important information."]})]}),"\n",(0,n.jsx)(t.h3,{id:"usages",children:"Usages"}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.code,{children:"TimeField"})," is best used in scenarios where capturing or manipulating time values is crucial to the user interface or application functionality. Here are some examples of when to use the ",(0,n.jsx)(t.code,{children:"TimeField"}),":"]}),"\n",(0,n.jsxs)(t.ol,{children:["\n",(0,n.jsxs)(t.li,{children:["\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.strong,{children:"Event Scheduling and Calendars"}),": Time fields are essential in applications that involve event scheduling, appointment booking, or managing calendars where precise time selection is required."]}),"\n"]}),"\n",(0,n.jsxs)(t.li,{children:["\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.strong,{children:"Time Tracking and Logging"}),": Applications that involve time tracking, such as timesheet management or logging work hours, require Time fields to capture accurate time entries."]}),"\n"]}),"\n",(0,n.jsxs)(t.li,{children:["\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.strong,{children:"Reminders and Alarms"}),": If your application involves setting reminders or alarms that require specific times, using a ",(0,n.jsx)(t.code,{children:"TimeField"})," simplifies the input process for users."]}),"\n"]}),"\n",(0,n.jsxs)(t.li,{children:["\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.strong,{children:"Meeting or Event Invitations"}),": When designing applications that involve meeting or event invitations, a ",(0,n.jsx)(t.code,{children:"TimeField"})," enables users to specify event start times or deadlines accurately."]}),"\n"]}),"\n"]}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.code,{children:"TimeField"})," class provides a user interface component that allows the user to enter both a time; hours, minutes, and optionally seconds. The value of the time field is always in 24-hour format that includes leading zeros: HH",":mm",", regardless of the field format, which is likely to be selected based on the user's locale (or by the user agent). If the time includes seconds, the format is always HH:mm",":ss"]}),"\n",(0,n.jsx)(t.h3,{id:"constructors",children:"Constructors"}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.code,{children:"TimeField"})," class has four constructors:"]}),"\n",(0,n.jsxs)(t.ol,{children:["\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"TimeField(String label, LocalTime time)"}),": Creates a ",(0,n.jsx)(t.code,{children:"TimeField"})," with a given label and time."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"TimeField(String label)"}),": Creates a ",(0,n.jsx)(t.code,{children:"TimeField"})," with a given label but with no pre-populated time."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"TimeField(LocalTime time)"}),": Creates a ",(0,n.jsx)(t.code,{children:"TimeField"})," with a given time, but without a label."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"TimeField()"}),": Creates a ",(0,n.jsx)(t.code,{children:"TimeField"})," without any provided information."]}),"\n"]}),"\n",(0,n.jsx)(t.h3,{id:"maximum-and-minimum",children:"Maximum and Minimum"}),"\n",(0,n.jsxs)(t.p,{children:["You can use the ",(0,n.jsx)(t.code,{children:"setMax()"})," and ",(0,n.jsx)(t.code,{children:"setMin()"})," methods to specify the acceptable time range. If the value entered into the component is outside of the specified value, the component fails constraint validation. Also, if there is already a maximum or minimum set, the value given to the other method must be lower or higher respectively."]}),"\n",(0,n.jsx)(t.h3,{id:"display",children:"Display"}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.code,{children:"TimeField"})," will, by default, display its information within the UI element based on the locale the browser is configured to. For example, users with United States configurations will see the time displayed with A.M. and P.M. labels, whereas other locales would see the time in 24 hour format. This does not inhibit manipulation of the ",(0,n.jsx)(t.code,{children:"LocalTime"})," object returned by methods from the class, however."]}),"\n",(0,n.jsx)(t.admonition,{type:"info",children:(0,n.jsxs)(t.p,{children:["When displaying time, the seconds will display by default. However, if the component is given a ",(0,n.jsx)(t.code,{children:"LocaleTime"})," object with the seconds set to 0, the seconds are then hidden from the display."]})}),"\n",(0,n.jsx)(t.h3,{id:"static-utilities",children:"Static Utilities"}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.code,{children:"TimeField"})," class also provides the following static utility methods:"]}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsxs)(t.li,{children:["\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:"fromTime(String timeAsString)"}),": Convert a time string in HH:mm",":ss"," format to a LocalTime object which can then be utilized with this class, or elsewhere."]}),"\n"]}),"\n",(0,n.jsxs)(t.li,{children:["\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:"toTime(LocalTime time)"}),": Convert a LocalTime to a time string in HH:mm",":ss"," format."]}),"\n"]}),"\n",(0,n.jsxs)(t.li,{children:["\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:"isValidTime(String timeAsString)"}),": Check if the given string is a valid HH:mm",":ss"," time. This will return a boolean value true if so, false otherwise."]}),"\n"]}),"\n"]}),"\n",(0,n.jsx)(t.h3,{id:"best-practices",children:"Best Practices"}),"\n",(0,n.jsxs)(t.ol,{children:["\n",(0,n.jsxs)(t.li,{children:["\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.strong,{children:"Provide Clear Time Format Examples"}),": Clearly indicate the expected time format to users within or near the ",(0,n.jsx)(t.code,{children:"TimeField"}),". Use examples or placeholders to guide users in entering time correctly. Consider displaying the time format dynamically based on the user's locale if applicable."]}),"\n"]}),"\n",(0,n.jsxs)(t.li,{children:["\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.strong,{children:"Consider Accessibility"}),": Utilize the ",(0,n.jsx)(t.code,{children:"TimeField"})," component with accessibility in mind, ensuring it meets accessibility standards such as providing proper labels, sufficient color contrast, and compatibility with assistive technologies."]}),"\n"]}),"\n",(0,n.jsxs)(t.li,{children:["\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.strong,{children:"Include Clear Time Clearing Option"}),": Enable users to clear the selected time easily if needed, providing a way to reset the ",(0,n.jsx)(t.code,{children:"TimeField"})," to an empty state."]}),"\n"]}),"\n"]})]})}function m(e={}){const{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(h,{...e})}):h(e)}},6031:(e,t,i)=>{var n=i(4836);t.Z=void 0;var s=n(i(4938)),r=i(5893),a=(0,s.default)((0,r.jsx)("path",{d:"m19 1-5 5v11l5-4.5V1zM1 6v14.65c0 .25.25.5.5.5.1 0 .15-.05.25-.05C3.1 20.45 5.05 20 6.5 20c1.95 0 4.05.4 5.5 1.5V6c-1.45-1.1-3.55-1.5-5.5-1.5S2.45 4.9 1 6zm22 13.5V6c-.6-.45-1.25-.75-2-1v13.5c-1.1-.35-2.3-.5-3.5-.5-1.7 0-4.15.65-5.5 1.5v2c1.35-.85 3.8-1.5 5.5-1.5 1.65 0 3.35.3 4.75 1.05.1.05.15.05.25.05.25 0 .5-.25.5-.5v-1.1z"}),"AutoStories");t.Z=a},2610:(e,t,i)=>{var n=i(4836);t.Z=void 0;var s=n(i(4938)),r=i(5893),a=(0,s.default)((0,r.jsx)("path",{d:"M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"}),"DragIndicator");t.Z=a},5162:(e,t,i)=>{i.d(t,{Z:()=>a});i(7294);var n=i(6010);const s={tabItem:"tabItem_Ymn6"};var r=i(5893);function a(e){let{children:t,hidden:i,className:a}=e;return(0,r.jsx)("div",{role:"tabpanel",className:(0,n.Z)(s.tabItem,a),hidden:i,children:t})}},4866:(e,t,i)=>{i.d(t,{Z:()=>j});var n=i(7294),s=i(6010),r=i(2466),a=i(6550),o=i(469),l=i(1980),c=i(7392),d=i(12);function u(e){return n.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,n.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 h(e){const{values:t,children:i}=e;return(0,n.useMemo)((()=>{const e=t??function(e){return u(e).map((e=>{let{props:{value:t,label:i,attributes:n,default:s}}=e;return{value:t,label:i,attributes:n,default:s}}))}(i);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,i])}function m(e){let{value:t,tabValues:i}=e;return i.some((e=>e.value===t))}function p(e){let{queryString:t=!1,groupId:i}=e;const s=(0,a.k6)(),r=function(e){let{queryString:t=!1,groupId:i}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!i)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 i??null}({queryString:t,groupId:i});return[(0,l._X)(r),(0,n.useCallback)((e=>{if(!r)return;const t=new URLSearchParams(s.location.search);t.set(r,e),s.replace({...s.location,search:t.toString()})}),[r,s])]}function g(e){const{defaultValue:t,queryString:i=!1,groupId:s}=e,r=h(e),[a,l]=(0,n.useState)((()=>function(e){let{defaultValue:t,tabValues:i}=e;if(0===i.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!m({value:t,tabValues:i}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${i.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const n=i.find((e=>e.default))??i[0];if(!n)throw new Error("Unexpected error: 0 tabValues");return n.value}({defaultValue:t,tabValues:r}))),[c,u]=p({queryString:i,groupId:s}),[g,b]=function(e){let{groupId:t}=e;const i=function(e){return e?`docusaurus.tab.${e}`:null}(t),[s,r]=(0,d.Nk)(i);return[s,(0,n.useCallback)((e=>{i&&r.set(e)}),[i,r])]}({groupId:s}),A=(()=>{const e=c??g;return m({value:e,tabValues:r})?e:null})();(0,o.Z)((()=>{A&&l(A)}),[A]);return{selectedValue:a,selectValue:(0,n.useCallback)((e=>{if(!m({value:e,tabValues:r}))throw new Error(`Can't select invalid tab value=${e}`);l(e),u(e),b(e)}),[u,b,r]),tabValues:r}}var b=i(2389);const A={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=i(5893);function f(e){let{className:t,block:i,selectedValue:n,selectValue:a,tabValues:o}=e;const l=[],{blockElementScrollPositionUntilNextRender:c}=(0,r.o5)(),d=e=>{const t=e.currentTarget,i=l.indexOf(t),s=o[i].value;s!==n&&(c(t),a(s))},u=e=>{let t=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":{const i=l.indexOf(e.currentTarget)+1;t=l[i]??l[0];break}case"ArrowLeft":{const i=l.indexOf(e.currentTarget)-1;t=l[i]??l[l.length-1];break}}t?.focus()};return(0,v.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.Z)("tabs",{"tabs--block":i},t),children:o.map((e=>{let{value:t,label:i,attributes:r}=e;return(0,v.jsx)("li",{role:"tab",tabIndex:n===t?0:-1,"aria-selected":n===t,ref:e=>l.push(e),onKeyDown:u,onClick:d,...r,className:(0,s.Z)("tabs__item",A.tabItem,r?.className,{"tabs__item--active":n===t}),children:i??t},t)}))})}function x(e){let{lazy:t,children:i,selectedValue:s}=e;const r=(Array.isArray(i)?i:[i]).filter(Boolean);if(t){const e=r.find((e=>e.props.value===s));return e?(0,n.cloneElement)(e,{className:"margin-top--md"}):null}return(0,v.jsx)("div",{className:"margin-top--md",children:r.map(((e,t)=>(0,n.cloneElement)(e,{key:t,hidden:e.props.value!==s})))})}function w(e){const t=g(e);return(0,v.jsxs)("div",{className:(0,s.Z)("tabs-container",A.tabList),children:[(0,v.jsx)(f,{...e,...t}),(0,v.jsx)(x,{...e,...t})]})}function j(e){const t=(0,b.Z)();return(0,v.jsx)(w,{...e,children:u(e.children)},String(t))}},6957:(e,t,i)=>{i.d(t,{Z:()=>b});var n=i(7294),s=i(917),r=i(4866),a=i(5162),o=i(4673),l=i(1750);const c="data:image/png;base64,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",d=i.p+"assets/images/expand-ba3f00f73da43d91e5b17663c4a7d108.png",u="data:image/png;base64,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";var h=i(2610),m=i(5944);function p(e){let{collapse:t,setCollapse:i}=e;const n=s.iv`
+ display: flex;
+ justify-content: end;
+ align-items: flex-end;
+ background-color: transparent;
+ margin-bottom: -10px;
+ `,r=s.iv`
+ /* position: absolute;
+ right: 0; */
+ cursor: pointer;
+ z-index: 10;
+ height: 35px;
+ width: 35px;
+ border: none;
+ background-color: none;
+ justify-self: flex-end;
+ background-color: transparent;
+ margin-right: 5px;
+ margin-bottom: -50px !important;
+ `,a=s.iv`
+ filter: invert(var(--inversion-percentage));
+ `;return(0,m.tZ)("div",{css:n,children:(0,m.tZ)("button",{css:r,onClick:()=>{i(!t)},children:t?(0,m.tZ)("img",{css:a,src:d,className:"icon-tabler-arrow-bar-up"}):(0,m.tZ)("img",{css:a,src:c,className:"icon-tabler-arrow-bar-down"})})})}function g(e){let{url:t}=e;const i=s.iv`
+ position: relative;
+ cursor: pointer;
+ z-index: 10;
+ height: 35px;
+ width: 35px;
+ border: none;
+ background-color: none;
+ justify-self: flex-end;
+ margin-top: -5px;
+ margin-bottom: -20px;
+ background-color: transparent;
+
+
+ `,n=s.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,m.tZ)("button",{css:i,onClick:()=>{window.open(t,"_blank")},children:(0,m.tZ)("img",{css:n,src:u})})}function b(e){let{path:t,javaC:i,javaE:c,cssURL:d,javaHighlight:u,height:b,frame:A,tabs:v}=e;const[f,x]=(0,n.useState)(""),[w,j]=(0,n.useState)(""),[y,D]=(0,n.useState)(""),[T,Z]=(0,n.useState)(!(!i||!c)),[B,k]=(0,n.useState)(!1),[S,F]=(0,n.useState)({}),[C,E]=(0,n.useState)(!1),[L,M]=(0,n.useState)(0),[H,z]=(0,n.useState)(0),[V,N]=(0,n.useState)(25),[O,X]=(0,n.useState)(25),[G,Y]=(0,n.useState)(0),[J,I]=(0,n.useState)(!1),P=(0,n.useRef)(null),W=(0,n.useRef)(null);(0,n.useEffect)((()=>{c&&fetch(c).then((e=>e.text())).then((e=>{j(e);const t=new URL(c).pathname.split("/"),i=t[t.length-1];F((e=>({...e,javaFile:i})))})),i&&fetch(i).then((e=>e.text())).then((e=>{x(e)})),d&&fetch(d).then((e=>e.text())).then((e=>{D(e);const t=new URL(d).pathname.split("/"),i=t[t.length-1];F((e=>({...e,cssFile:i})))})),Y(P.current.offsetWidth),console.log(G)}),[]);const U=()=>{E(!1),console.log("Stop Resizing")},q=e=>{if(C){const t=e.clientX-L;H+t>G/3&&(P.current.style.width=`${H+t}px`,W.current.style.right=(V-t<25?25:V-t)+"px",X(V-t<25?25:V-t))}},R=s.iv`
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ margin-bottom: 16px;
+ /* padding: ${"hidden"==A?"0 15px 0 15px;":"7px 15px 0 15px;"}; */
+ /* box-shadow: var(--ifm-global-shadow-lw); */
+ background-color: var(--code-display-color-background);
+ `,K=s.iv`
+ width: 100%;
+ /* padding: 1em; */
+ border: 1px solid var(--ifm-toc-border-color);
+ border-right: none;
+ background-color: transparent;
+ display: flex;
+ position: relative;
+ `,Q=s.iv`
+ min-height: 100px;
+ height: 100%;
+ width: 100%;
+ height: ${b||"100%"};
+ pointer-events: none;
+ `,_=s.iv`
+ display: flex;
+ justify-content: flex-end;
+ opacity: 0;
+ transition: opacity 0.3s ease-in-out;
+ ${B&&"opacity: 1;"};
+ margin: 10px 0 0 0;
+ position: absolute;
+ right: 25px;
+ `,$=s.iv`
+ display: flex;
+ align-items: center;
+ cursor: ew-resize;
+ border-left: 1px solid var(--ifm-toc-border-color);
+ border-right: 1px solid var(--ifm-toc-border-color);
+ background-color: var(--ifm-background-color);
+ `,ee=s.iv`
+ box-shadow: none;
+ background-color: var(--ifm-background-color);
+ margin: 0px;
+ padding: 0px;
+ border: 1px solid var(--ifm-toc-border-color);
+ border-top: none;
+ border-radius: 0px;
+ position: relative;
+
+ div{
+ /* border: none; */
+ border-color: var(--ifm-toc-border-color);
+ padding: 2px 0px 0px 0px;
+ margin: 0px
+ }
+
+ summary{
+ display: flex;
+ width: 100%;
+ justify-content: center;
+ margin: 10px 0;
+ font-weight: bold;
+ ::before{
+ left: auto;
+ margin-left: -100px;
+ --docusaurus-details-decoration-color: var(--ifm-color-primary)
+ }
+ }
+ .margin-top--md{
+ margin-top: 0px !important;
+ }
+ ul{
+ margin: -4px 0px!important;
+ }
+ `,te=s.iv`
+ /* :first-child{
+ margin-left: 1em;
+ } */
+ li[aria-selected="true"]{
+ border-color: var(--ifm-color-primary);
+ }
+
+ .tabs__item{
+ padding: 5px 20px -2px 20px;
+ border-radius: 0px;
+ }
+ `,ie=s.iv`
+ border-radius: 0px;
+ box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset;
+ `;return(0,m.BX)("div",{css:R,onMouseUp:U,onMouseLeave:U,onMouseMove:q,children:["hidden"!=A?(0,m.BX)("div",{onMouseEnter:()=>{k(!0)},onMouseLeave:()=>k(!1),css:K,children:[(0,m.tZ)("iframe",{onMouseUp:U,loading:"lazy",src:t,css:{...Q,pointerEvents:C?"none":"auto"},ref:P,onMouseMove:q}),(0,m.tZ)("div",{css:_,ref:W,children:(0,m.tZ)(g,{url:t})}),(0,m.tZ)("div",{css:$,onMouseDown:e=>{e.preventDefault(),E(!0),M(e.clientX),z(P.current.offsetWidth),N(O),console.log(W.current.right),console.log("Start Resizing")},children:(0,m.tZ)(h.Z,{})})]}):null,(0,m.BX)(o.Z,{css:ee,summary:(0,m.tZ)("summary",{onClick:()=>I(!J),children:J?"Hide Code":"Show Code"}),children:[i&&c?(0,m.tZ)(p,{collapse:T,setCollapse:Z}):null,d?(0,m.BX)(r.Z,{css:te,children:[(0,m.tZ)(a.Z,{value:v?v[0]:"Java",label:v?v[0]:S.javaFile,default:!0,children:(0,m.tZ)(l.Z,{css:ie,className:"codeDemoBlock",language:"java",showLineNumbers:!0,metastring:u,children:T?f:w})}),(0,m.tZ)(a.Z,{value:v?v[1]:"CSS",label:v?v[1]:S.cssFile,children:(0,m.tZ)(l.Z,{css:ie,className:"codeDemoBlock",language:"css",showLineNumbers:!0,children:y})})]}):(0,m.tZ)(r.Z,{css:te,children:(0,m.tZ)(a.Z,{value:v?v[0]:"Java",label:v?v[0]:S.javaFile,default:!0,children:(0,m.tZ)(l.Z,{css:ie,className:"codeDemoBlock",language:"java",showLineNumbers:!0,metastring:u,children:T?f:w})})})]})]})}},3273:(e,t,i)=>{i.d(t,{Z:()=>c});var n=i(7294),s=i(917),r=i(8230),a=i(4387),o=i(6031);var l=i(5944);function c(e){let{type:t,location:i,top:c,children:d,code:u,suffix:h}=e;const[m,p]=(0,n.useState)("");(0,n.useEffect)((()=>{h||(h=""),p("https://javadoc.io/doc/org.dwcj/dwcj-"+t+"/latest/"+i+".html"+h)}),[]);const g=s.iv`
+ display: inline;
+
+ ${c&&s.iv`
+ width: 100%;
+ display: flex;
+ justify-content: flex-end;
+ margin-top: -33px;
+ margin-bottom: 25px;
+ `}
+ `,b=s.iv`
+ background-color: #0063CC;
+ padding: 0 0 0 5px;
+ :hover{
+ color: white;
+ }
+ `;return(0,l.BX)(l.HY,{children:["true"===c&&(0,l.tZ)("div",{css:g,children:(0,l.tZ)(r.Z,{title:"JavaDoc",arrow:!0,children:(0,l.tZ)(a.Z,{css:b,label:"Java API",component:"a",href:m,icon:(0,l.tZ)(o.Z,{}),clickable:!0,color:"primary",target:"_blank"})})}),"true"!==c&&!u&&(0,l.tZ)("div",{css:g,children:(0,l.tZ)("a",{href:m,target:"_blank",children:d})}),"true"!==c&&u&&(0,l.tZ)("div",{css:g,children:(0,l.tZ)("code",{children:(0,l.tZ)("a",{href:m,target:"_blank",children:d})})})]})}},1415:(e,t,i)=>{i.d(t,{Z:()=>r});i(7294);var n=i(8397),s=i(5893);function r(e){return(0,s.jsx)(s.Fragment,{children:(0,s.jsx)(n.Z,{...e})})}}}]);
\ No newline at end of file
diff --git a/assets/js/47f3d74a.43b513e9.js b/assets/js/47f3d74a.43b513e9.js
deleted file mode 100644
index db6c5860e..000000000
--- a/assets/js/47f3d74a.43b513e9.js
+++ /dev/null
@@ -1,100 +0,0 @@
-"use strict";(self.webpackChunkdwcj_documentation=self.webpackChunkdwcj_documentation||[]).push([[1303],{1214:(e,t,i)=>{i.r(t),i.d(t,{assets:()=>h,contentTitle:()=>d,default:()=>p,frontMatter:()=>o,metadata:()=>c,toc:()=>u});var n=i(5893),a=i(1151),s=i(6957),r=(i(7796),i(3273)),l=i(2665);const o={sidebar_position:3,title:"DateTimeField",slug:"datetimefield"},d=void 0,c={id:"components/fields/date-time-field",title:"DateTimeField",description:"The DateTimeField class is a Field component, and as such shares all of the commonalities belonging to a Field. Please refer to the Field documentation page for an overview of Field properties, events, and other important information.",source:"@site/docs/components/fields/date-time-field.md",sourceDirName:"components/fields",slug:"/components/fields/datetimefield",permalink:"/docs/components/fields/datetimefield",draft:!1,unlisted:!1,editUrl:"https://github.com/DwcJava/dwcjava.github.io/tree/website/docs/components/fields/date-time-field.md",tags:[],version:"current",sidebarPosition:3,frontMatter:{sidebar_position:3,title:"DateTimeField",slug:"datetimefield"},sidebar:"documentationSidebar",previous:{title:"DateField",permalink:"/docs/components/fields/datefield"},next:{title:"NumberField",permalink:"/docs/components/fields/numberfield"}},h={},u=[{value:"Usages",id:"usages",level:3},{value:"Constructors",id:"constructors",level:3},{value:"Maximum and Minimum",id:"maximum-and-minimum",level:3},{value:"Display",id:"display",level:3},{value:"Static Utilities",id:"static-utilities",level:3},{value:"Best Practices",id:"best-practices",level:3}];function m(e){const t={a:"a",admonition:"admonition",code:"code",h3:"h3",li:"li",mdxAdmonitionTitle:"mdxAdmonitionTitle",ol:"ol",p:"p",strong:"strong",ul:"ul",...(0,a.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.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,n.jsx)(l.Z,{tooltipText:"The name of the web component that will render in the DOM.",label:"bbj-editbox",href:"https://basishub.github.io/basis-next/#/web-components/bbj-editbox",clickable:!1,iconName:"code"}),"\n",(0,n.jsx)(r.Z,{type:"engine",location:"org/dwcj/component/field/DateTimeField",top:"true"}),"\n",(0,n.jsxs)(t.admonition,{type:"success",children:[(0,n.jsx)(t.mdxAdmonitionTitle,{children:(0,n.jsx)(t.strong,{children:"Important"})}),(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.code,{children:"DateTimeField"})," class is a Field component, and as such shares all of the commonalities belonging to a Field. Please refer to the ",(0,n.jsx)(t.strong,{children:(0,n.jsx)(t.a,{href:"/docs/components/fields",children:"Field documentation page"})})," for an overview of Field properties, events, and other important information."]})]}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.code,{children:"DateTimeField"})," class provides a user interface component that allows the user to enter both a date and a time, including the year, month, and day, as well as the time in hours and minutes. It offers the flexibility to validate the input or use a special date-time picker interface."]}),"\n",(0,n.jsx)(s.Z,{path:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.fielddemos.DateTimeFieldDemo",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/fielddemos/DateTimeFieldDemo.java",javaC:"",cssURL:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/resources/css/fieldstyles/date_field_styles.css"}),"\n",(0,n.jsx)(t.h3,{id:"usages",children:"Usages"}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.code,{children:"DateTimeField"})," is best used in scenarios where capturing or displaying both date ",(0,n.jsx)(t.strong,{children:"and"})," time is essential to the user interface or application functionality. Here are some examples of when to use the ",(0,n.jsx)(t.code,{children:"DateTimeField"}),":"]}),"\n",(0,n.jsxs)(t.ol,{children:["\n",(0,n.jsxs)(t.li,{children:["\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.strong,{children:"Event Scheduling and Calendars"}),": If time of day is in important factor in applications that involve event scheduling, appointment booking, or managing calendars then a ",(0,n.jsx)(t.code,{children:"DateTimeField"})," is the proper component to use."]}),"\n"]}),"\n",(0,n.jsxs)(t.li,{children:["\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.strong,{children:"Form Inputs"}),": When designing forms that require date and time inputs, using a ",(0,n.jsx)(t.code,{children:"DateTimeField"})," simplifies the selection process for users. This is particularly useful for applications that collect user data or require scheduling with specific times."]}),"\n"]}),"\n",(0,n.jsxs)(t.li,{children:["\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.strong,{children:"Data Logging and Timestamps"}),": Applications that involve data logging or capturing timestamps require ",(0,n.jsx)(t.code,{children:"DateTimeFields"})," to record the date and time when events occur or when data is submitted."]}),"\n"]}),"\n",(0,n.jsxs)(t.li,{children:["\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.strong,{children:"Task Management and Deadlines"}),": ",(0,n.jsx)(t.code,{children:"DateTimeFields"})," are valuable in applications that involve task management or setting deadlines where both the date and time are relevant for accurate scheduling."]}),"\n"]}),"\n"]}),"\n",(0,n.jsx)(t.h3,{id:"constructors",children:"Constructors"}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.code,{children:"DateTimeField"})," class has four constructors:"]}),"\n",(0,n.jsxs)(t.ol,{children:["\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"DateTimeField(String label, LocalDateTime dateTime)"}),": Creates a ",(0,n.jsx)(t.code,{children:"DateTimeField"})," with a given label and datetime."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"DateTimeField(String label)"}),": Creates a ",(0,n.jsx)(t.code,{children:"DateTimeField"})," with a given label but with no pre-populated datetime."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"DateTimeField(LocalDateTime dateTime)"}),": Creates a ",(0,n.jsx)(t.code,{children:"DateTimeField"})," with a given datetime, but without a label."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"DateTimeField()"}),": Creates a ",(0,n.jsx)(t.code,{children:"DateTimeField"})," without any provided information."]}),"\n"]}),"\n",(0,n.jsx)(t.h3,{id:"maximum-and-minimum",children:"Maximum and Minimum"}),"\n",(0,n.jsxs)(t.p,{children:["You can use the ",(0,n.jsx)(t.code,{children:"setMax()"})," and ",(0,n.jsx)(t.code,{children:"setMin()"})," methods to specify the acceptable range of dates and times. If the value entered into the component is outside of the specified timestamp, the component fails constraint validation. Also, if there is already a maximum or minimum set, the value given to the other method must be lower or higher respectively."]}),"\n",(0,n.jsx)(t.h3,{id:"display",children:"Display"}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.code,{children:"DateTimeField"})," will, by default, display its information within the UI element based on the locale the browser is configured to. For example, users with United States configurations will see the date displayed with the month preceding the day, whereas European users will see the day before the month. This does not inhibit manipulation of the ",(0,n.jsx)(t.code,{children:"LocalDateTime"})," object returned by methods from the class, however."]}),"\n",(0,n.jsx)(t.admonition,{type:"info",children:(0,n.jsxs)(t.p,{children:["When displaying time, the seconds will display by default. However, if the component is given a ",(0,n.jsx)(t.code,{children:"LocaleDateTime"})," object with the seconds set to 0, the seconds are then hidden from the display."]})}),"\n",(0,n.jsx)(t.h3,{id:"static-utilities",children:"Static Utilities"}),"\n",(0,n.jsx)(t.p,{children:"The DateTimeField class also provides the following static utility methods:"}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsxs)(t.li,{children:["\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:"fromDateTime(String dateTimeAsString)"}),": Convert a date and time string in yyyy-MM-ddTHH:mm",":ss"," format to a LocalDateTime object which can then be utilized with this class, or elsewhere."]}),"\n"]}),"\n",(0,n.jsxs)(t.li,{children:["\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:"toDateTime(LocalDateTime dateTime)"}),": Convert a LocalDateTime object to a date and time string in yyyy-MM-ddTHH:mm",":ss"," format."]}),"\n"]}),"\n",(0,n.jsxs)(t.li,{children:["\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:"isValidDateTime(String dateTimeAsString)"}),": Checks to see if the given string is a valid yyyy-MM-ddTHH:mm",":ss"," date and time. This will return a boolean value true if so, false otherwise."]}),"\n"]}),"\n"]}),"\n",(0,n.jsx)(t.h3,{id:"best-practices",children:"Best Practices"}),"\n",(0,n.jsxs)(t.p,{children:["To ensure an optimal user experience when using the ",(0,n.jsx)(t.code,{children:"DateField"})," component, consider the following best practices:"]}),"\n",(0,n.jsxs)(t.ol,{children:["\n",(0,n.jsxs)(t.li,{children:["\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.strong,{children:"Consider Localized Date Display"}),": When displaying dates, consider localizing the date format and incorporating regional preferences. This enhances usability and ensures dates are presented in a familiar format to the user."]}),"\n"]}),"\n",(0,n.jsxs)(t.li,{children:["\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.strong,{children:"Include Timezone Considerations"}),": If your application deals with time-sensitive information across different time zones, consider incorporating timezone selection alongside the date field to ensure accurate date-time representation."]}),"\n"]}),"\n",(0,n.jsxs)(t.li,{children:["\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.strong,{children:"Consider Accessibility"}),": Utilize the ",(0,n.jsx)(t.code,{children:"DateField"})," with accessibility in mind. Ensure that it meets accessibility standards, such as providing proper labels, and being compatible with assistive technologies."]}),"\n"]}),"\n",(0,n.jsxs)(t.li,{children:["\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.strong,{children:"Auto-Populate Current Date"}),": Consider providing an option to auto-populate the current date as a default value in the date field, if appropriate for your application's use case."]}),"\n"]}),"\n"]})]})}function p(e={}){const{wrapper:t}={...(0,a.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(m,{...e})}):m(e)}},5162:(e,t,i)=>{i.d(t,{Z:()=>r});i(7294);var n=i(6010);const a={tabItem:"tabItem_Ymn6"};var s=i(5893);function r(e){let{children:t,hidden:i,className:r}=e;return(0,s.jsx)("div",{role:"tabpanel",className:(0,n.Z)(a.tabItem,r),hidden:i,children:t})}},4866:(e,t,i)=>{i.d(t,{Z:()=>j});var n=i(7294),a=i(6010),s=i(2466),r=i(6550),l=i(469),o=i(1980),d=i(7392),c=i(12);function h(e){return n.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,n.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:i}=e;return(0,n.useMemo)((()=>{const e=t??function(e){return h(e).map((e=>{let{props:{value:t,label:i,attributes:n,default:a}}=e;return{value:t,label:i,attributes:n,default:a}}))}(i);return function(e){const t=(0,d.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,i])}function m(e){let{value:t,tabValues:i}=e;return i.some((e=>e.value===t))}function p(e){let{queryString:t=!1,groupId:i}=e;const a=(0,r.k6)(),s=function(e){let{queryString:t=!1,groupId:i}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!i)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 i??null}({queryString:t,groupId:i});return[(0,o._X)(s),(0,n.useCallback)((e=>{if(!s)return;const t=new URLSearchParams(a.location.search);t.set(s,e),a.replace({...a.location,search:t.toString()})}),[s,a])]}function A(e){const{defaultValue:t,queryString:i=!1,groupId:a}=e,s=u(e),[r,o]=(0,n.useState)((()=>function(e){let{defaultValue:t,tabValues:i}=e;if(0===i.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!m({value:t,tabValues:i}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${i.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const n=i.find((e=>e.default))??i[0];if(!n)throw new Error("Unexpected error: 0 tabValues");return n.value}({defaultValue:t,tabValues:s}))),[d,h]=p({queryString:i,groupId:a}),[A,b]=function(e){let{groupId:t}=e;const i=function(e){return e?`docusaurus.tab.${e}`:null}(t),[a,s]=(0,c.Nk)(i);return[a,(0,n.useCallback)((e=>{i&&s.set(e)}),[i,s])]}({groupId:a}),g=(()=>{const e=d??A;return m({value:e,tabValues:s})?e:null})();(0,l.Z)((()=>{g&&o(g)}),[g]);return{selectedValue:r,selectValue:(0,n.useCallback)((e=>{if(!m({value:e,tabValues:s}))throw new Error(`Can't select invalid tab value=${e}`);o(e),h(e),b(e)}),[h,b,s]),tabValues:s}}var b=i(2389);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var f=i(5893);function v(e){let{className:t,block:i,selectedValue:n,selectValue:r,tabValues:l}=e;const o=[],{blockElementScrollPositionUntilNextRender:d}=(0,s.o5)(),c=e=>{const t=e.currentTarget,i=o.indexOf(t),a=l[i].value;a!==n&&(d(t),r(a))},h=e=>{let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const i=o.indexOf(e.currentTarget)+1;t=o[i]??o[0];break}case"ArrowLeft":{const i=o.indexOf(e.currentTarget)-1;t=o[i]??o[o.length-1];break}}t?.focus()};return(0,f.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,a.Z)("tabs",{"tabs--block":i},t),children:l.map((e=>{let{value:t,label:i,attributes:s}=e;return(0,f.jsx)("li",{role:"tab",tabIndex:n===t?0:-1,"aria-selected":n===t,ref:e=>o.push(e),onKeyDown:h,onClick:c,...s,className:(0,a.Z)("tabs__item",g.tabItem,s?.className,{"tabs__item--active":n===t}),children:i??t},t)}))})}function x(e){let{lazy:t,children:i,selectedValue:a}=e;const s=(Array.isArray(i)?i:[i]).filter(Boolean);if(t){const e=s.find((e=>e.props.value===a));return e?(0,n.cloneElement)(e,{className:"margin-top--md"}):null}return(0,f.jsx)("div",{className:"margin-top--md",children:s.map(((e,t)=>(0,n.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function w(e){const t=A(e);return(0,f.jsxs)("div",{className:(0,a.Z)("tabs-container",g.tabList),children:[(0,f.jsx)(v,{...e,...t}),(0,f.jsx)(x,{...e,...t})]})}function j(e){const t=(0,b.Z)();return(0,f.jsx)(w,{...e,children:h(e.children)},String(t))}},6957:(e,t,i)=>{i.d(t,{Z:()=>b});var n=i(7294),a=i(917),s=i(4866),r=i(5162),l=i(4673),o=i(1750);const d="data:image/png;base64,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",c=i.p+"assets/images/expand-ba3f00f73da43d91e5b17663c4a7d108.png",h="data:image/png;base64,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";var u=i(2949),m=i(5944);function p(e){let{collapse:t,setCollapse:i}=e;const n=a.iv`
- display: flex;
- justify-content: end;
- margin-bottom: -30px;
- background-color: transparent;
- `,s=a.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=a.iv`
- filter: invert(var(--inversion-percentage));
- `;return(0,m.tZ)("div",{css:n,children:(0,m.tZ)("button",{css:s,onClick:()=>{i(!t)},children:t?(0,m.tZ)("img",{css:r,src:c,className:"icon-tabler-arrow-bar-up"}):(0,m.tZ)("img",{css:r,src:d,className:"icon-tabler-arrow-bar-down"})})})}function A(e){let{url:t}=e;const i=a.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;
-
-
- `,n=a.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,m.tZ)("button",{css:i,onClick:()=>{window.open(t,"_blank")},children:(0,m.tZ)("img",{css:n,src:h})})}function b(e){let{path:t,javaC:i,javaE:d,cssURL:c,javaHighlight:h,height:b,frame:g,tabs:f}=e;const[v,x]=(0,n.useState)(""),[w,j]=(0,n.useState)(""),[D,y]=(0,n.useState)(""),[T,B]=(0,n.useState)(!(!i||!d)),[F,Z]=(0,n.useState)(!1),[k,C]=(0,n.useState)({});(0,n.useEffect)((()=>{d&&fetch(d).then((e=>e.text())).then((e=>{j(e);const t=new URL(d).pathname.split("/"),i=t[t.length-1];C((e=>({...e,javaFile:i})))})),i&&fetch(i).then((e=>e.text())).then((e=>{x(e)})),c&&fetch(c).then((e=>e.text())).then((e=>{y(e);const t=new URL(c).pathname.split("/"),i=t[t.length-1];C((e=>({...e,cssFile:i})))}))}),[]);const S=a.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);
- `,E=a.iv`
- min-height: 100px;
- height: 100%;
- width: 100%;
- height: ${b};
- `,L=a.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;
- }
- }
-
- `,M=a.iv`
- width: 100%;
- `,H=a.iv`
- display: flex;
- justify-content: flex-end;
- opacity: 0;
- transition: opacity 0.3s ease-in-out;
- ${F&&"opacity: 1;"};
-
- `;return(0,m.BX)("div",{css:S,children:["hidden"!=g?(0,m.BX)("div",{onMouseEnter:()=>{Z(!0)},onMouseLeave:()=>Z(!1),css:M,children:[(0,m.tZ)("div",{css:H,children:(0,m.tZ)(A,{url:t})}),(0,m.tZ)("iframe",{loading:"lazy",src:t+"&theme="+("dark"===(0,u.I)().colorMode?"dark":"light"),css:E})]}):null,(0,m.BX)(l.Z,{css:L,summary:(0,m.tZ)("summary",{children:"Show Code"}),children:[i&&d?(0,m.tZ)(p,{collapse:T,setCollapse:B}):null,c?(0,m.BX)(s.Z,{children:[(0,m.tZ)(r.Z,{value:f?f[0]:"Java",label:f?f[0]:k.javaFile,default:!0,children:(0,m.tZ)(o.Z,{className:"codeDemoBlock",language:"java",showLineNumbers:!0,metastring:h,children:T?v:w})}),(0,m.tZ)(r.Z,{value:f?f[1]:"CSS",label:f?f[1]:k.cssFile,children:(0,m.tZ)(o.Z,{className:"codeDemoBlock",language:"css",showLineNumbers:!0,children:D})})]}):(0,m.tZ)(s.Z,{children:(0,m.tZ)(r.Z,{value:f?f[0]:"Java",label:f?f[0]:k.javaFile,default:!0,children:(0,m.tZ)(o.Z,{className:"codeDemoBlock",language:"java",showLineNumbers:!0,metastring:h,children:T?v:w})})})]})]})}},3273:(e,t,i)=>{i.d(t,{Z:()=>d});var n=i(7294),a=i(917),s=i(8230),r=i(4387),l=i(6770);var o=i(5944);function d(e){let{type:t,location:i,top:d,children:c,code:h,suffix:u}=e;const[m,p]=(0,n.useState)("");(0,n.useEffect)((()=>{u||(u=""),p("https://javadoc.io/doc/org.dwcj/dwcj-"+t+"/latest/"+i+".html"+u)}),[]);const A=a.iv`
- display: inline;
-
- ${d&&a.iv`
- width: 100%;
- display: flex;
- justify-content: flex-end;
- margin-top: -33px;
- margin-bottom: 25px;
- `}
- `,b=a.iv`
- background-color: #0063CC;
- :hover{
- color: white;
- }
- `;return(0,o.BX)(o.HY,{children:["true"===d&&(0,o.tZ)("div",{css:A,children:(0,o.tZ)(s.Z,{title:"JavaDoc",arrow:!0,children:(0,o.tZ)(r.Z,{css:b,label:"Java API",component:"a",href:m,icon:(0,o.tZ)(l.Z,{}),clickable:!0,color:"primary",target:"_blank"})})}),"true"!==d&&!h&&(0,o.tZ)("div",{css:A,children:(0,o.tZ)("a",{href:m,target:"_blank",children:c})}),"true"!==d&&h&&(0,o.tZ)("div",{css:A,children:(0,o.tZ)("code",{children:(0,o.tZ)("a",{href:m,target:"_blank",children:c})})})]})}},1415:(e,t,i)=>{i.d(t,{Z:()=>s});i(7294);var n=i(8397),a=i(5893);function s(e){return(0,a.jsx)(a.Fragment,{children:(0,a.jsx)(n.Z,{...e})})}}}]);
\ No newline at end of file
diff --git a/assets/js/47f3d74a.a4ff2fe7.js b/assets/js/47f3d74a.a4ff2fe7.js
new file mode 100644
index 000000000..0a989a64a
--- /dev/null
+++ b/assets/js/47f3d74a.a4ff2fe7.js
@@ -0,0 +1,146 @@
+"use strict";(self.webpackChunkdwcj_documentation=self.webpackChunkdwcj_documentation||[]).push([[1303],{1214:(e,t,i)=>{i.r(t),i.d(t,{assets:()=>u,contentTitle:()=>d,default:()=>p,frontMatter:()=>l,metadata:()=>c,toc:()=>h});var n=i(5893),a=i(1151),s=i(6957),r=(i(7796),i(3273)),o=i(2665);const l={sidebar_position:3,title:"DateTimeField",slug:"datetimefield"},d=void 0,c={id:"components/fields/date-time-field",title:"DateTimeField",description:"The DateTimeField class is a Field component, and as such shares all of the commonalities belonging to a Field. Please refer to the Field documentation page for an overview of Field properties, events, and other important information.",source:"@site/docs/components/fields/date-time-field.md",sourceDirName:"components/fields",slug:"/components/fields/datetimefield",permalink:"/docs/components/fields/datetimefield",draft:!1,unlisted:!1,editUrl:"https://github.com/DwcJava/dwcjava.github.io/tree/website/docs/components/fields/date-time-field.md",tags:[],version:"current",sidebarPosition:3,frontMatter:{sidebar_position:3,title:"DateTimeField",slug:"datetimefield"},sidebar:"documentationSidebar",previous:{title:"DateField",permalink:"/docs/components/fields/datefield"},next:{title:"NumberField",permalink:"/docs/components/fields/numberfield"}},u={},h=[{value:"Usages",id:"usages",level:3},{value:"Constructors",id:"constructors",level:3},{value:"Maximum and Minimum",id:"maximum-and-minimum",level:3},{value:"Display",id:"display",level:3},{value:"Static Utilities",id:"static-utilities",level:3},{value:"Best Practices",id:"best-practices",level:3}];function m(e){const t={a:"a",admonition:"admonition",code:"code",h3:"h3",li:"li",mdxAdmonitionTitle:"mdxAdmonitionTitle",ol:"ol",p:"p",strong:"strong",ul:"ul",...(0,a.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(o.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,n.jsx)(o.Z,{tooltipText:"The name of the web component that will render in the DOM.",label:"bbj-editbox",href:"https://basishub.github.io/basis-next/#/web-components/bbj-editbox",clickable:!1,iconName:"code"}),"\n",(0,n.jsx)(r.Z,{type:"engine",location:"org/dwcj/component/field/DateTimeField",top:"true"}),"\n",(0,n.jsxs)(t.admonition,{type:"success",children:[(0,n.jsx)(t.mdxAdmonitionTitle,{children:(0,n.jsx)(t.strong,{children:"Important"})}),(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.code,{children:"DateTimeField"})," class is a Field component, and as such shares all of the commonalities belonging to a Field. Please refer to the ",(0,n.jsx)(t.strong,{children:(0,n.jsx)(t.a,{href:"/docs/components/fields",children:"Field documentation page"})})," for an overview of Field properties, events, and other important information."]})]}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.code,{children:"DateTimeField"})," class provides a user interface component that allows the user to enter both a date and a time, including the year, month, and day, as well as the time in hours and minutes. It offers the flexibility to validate the input or use a special date-time picker interface."]}),"\n",(0,n.jsx)(s.Z,{path:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.fielddemos.DateTimeFieldDemo",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/fielddemos/DateTimeFieldDemo.java",javaC:"",cssURL:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/resources/css/fieldstyles/date_field_styles.css"}),"\n",(0,n.jsx)(t.h3,{id:"usages",children:"Usages"}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.code,{children:"DateTimeField"})," is best used in scenarios where capturing or displaying both date ",(0,n.jsx)(t.strong,{children:"and"})," time is essential to the user interface or application functionality. Here are some examples of when to use the ",(0,n.jsx)(t.code,{children:"DateTimeField"}),":"]}),"\n",(0,n.jsxs)(t.ol,{children:["\n",(0,n.jsxs)(t.li,{children:["\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.strong,{children:"Event Scheduling and Calendars"}),": If time of day is in important factor in applications that involve event scheduling, appointment booking, or managing calendars then a ",(0,n.jsx)(t.code,{children:"DateTimeField"})," is the proper component to use."]}),"\n"]}),"\n",(0,n.jsxs)(t.li,{children:["\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.strong,{children:"Form Inputs"}),": When designing forms that require date and time inputs, using a ",(0,n.jsx)(t.code,{children:"DateTimeField"})," simplifies the selection process for users. This is particularly useful for applications that collect user data or require scheduling with specific times."]}),"\n"]}),"\n",(0,n.jsxs)(t.li,{children:["\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.strong,{children:"Data Logging and Timestamps"}),": Applications that involve data logging or capturing timestamps require ",(0,n.jsx)(t.code,{children:"DateTimeFields"})," to record the date and time when events occur or when data is submitted."]}),"\n"]}),"\n",(0,n.jsxs)(t.li,{children:["\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.strong,{children:"Task Management and Deadlines"}),": ",(0,n.jsx)(t.code,{children:"DateTimeFields"})," are valuable in applications that involve task management or setting deadlines where both the date and time are relevant for accurate scheduling."]}),"\n"]}),"\n"]}),"\n",(0,n.jsx)(t.h3,{id:"constructors",children:"Constructors"}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.code,{children:"DateTimeField"})," class has four constructors:"]}),"\n",(0,n.jsxs)(t.ol,{children:["\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"DateTimeField(String label, LocalDateTime dateTime)"}),": Creates a ",(0,n.jsx)(t.code,{children:"DateTimeField"})," with a given label and datetime."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"DateTimeField(String label)"}),": Creates a ",(0,n.jsx)(t.code,{children:"DateTimeField"})," with a given label but with no pre-populated datetime."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"DateTimeField(LocalDateTime dateTime)"}),": Creates a ",(0,n.jsx)(t.code,{children:"DateTimeField"})," with a given datetime, but without a label."]}),"\n",(0,n.jsxs)(t.li,{children:[(0,n.jsx)(t.code,{children:"DateTimeField()"}),": Creates a ",(0,n.jsx)(t.code,{children:"DateTimeField"})," without any provided information."]}),"\n"]}),"\n",(0,n.jsx)(t.h3,{id:"maximum-and-minimum",children:"Maximum and Minimum"}),"\n",(0,n.jsxs)(t.p,{children:["You can use the ",(0,n.jsx)(t.code,{children:"setMax()"})," and ",(0,n.jsx)(t.code,{children:"setMin()"})," methods to specify the acceptable range of dates and times. If the value entered into the component is outside of the specified timestamp, the component fails constraint validation. Also, if there is already a maximum or minimum set, the value given to the other method must be lower or higher respectively."]}),"\n",(0,n.jsx)(t.h3,{id:"display",children:"Display"}),"\n",(0,n.jsxs)(t.p,{children:["The ",(0,n.jsx)(t.code,{children:"DateTimeField"})," will, by default, display its information within the UI element based on the locale the browser is configured to. For example, users with United States configurations will see the date displayed with the month preceding the day, whereas European users will see the day before the month. This does not inhibit manipulation of the ",(0,n.jsx)(t.code,{children:"LocalDateTime"})," object returned by methods from the class, however."]}),"\n",(0,n.jsx)(t.admonition,{type:"info",children:(0,n.jsxs)(t.p,{children:["When displaying time, the seconds will display by default. However, if the component is given a ",(0,n.jsx)(t.code,{children:"LocaleDateTime"})," object with the seconds set to 0, the seconds are then hidden from the display."]})}),"\n",(0,n.jsx)(t.h3,{id:"static-utilities",children:"Static Utilities"}),"\n",(0,n.jsx)(t.p,{children:"The DateTimeField class also provides the following static utility methods:"}),"\n",(0,n.jsxs)(t.ul,{children:["\n",(0,n.jsxs)(t.li,{children:["\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:"fromDateTime(String dateTimeAsString)"}),": Convert a date and time string in yyyy-MM-ddTHH:mm",":ss"," format to a LocalDateTime object which can then be utilized with this class, or elsewhere."]}),"\n"]}),"\n",(0,n.jsxs)(t.li,{children:["\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:"toDateTime(LocalDateTime dateTime)"}),": Convert a LocalDateTime object to a date and time string in yyyy-MM-ddTHH:mm",":ss"," format."]}),"\n"]}),"\n",(0,n.jsxs)(t.li,{children:["\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:"isValidDateTime(String dateTimeAsString)"}),": Checks to see if the given string is a valid yyyy-MM-ddTHH:mm",":ss"," date and time. This will return a boolean value true if so, false otherwise."]}),"\n"]}),"\n"]}),"\n",(0,n.jsx)(t.h3,{id:"best-practices",children:"Best Practices"}),"\n",(0,n.jsxs)(t.p,{children:["To ensure an optimal user experience when using the ",(0,n.jsx)(t.code,{children:"DateField"})," component, consider the following best practices:"]}),"\n",(0,n.jsxs)(t.ol,{children:["\n",(0,n.jsxs)(t.li,{children:["\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.strong,{children:"Consider Localized Date Display"}),": When displaying dates, consider localizing the date format and incorporating regional preferences. This enhances usability and ensures dates are presented in a familiar format to the user."]}),"\n"]}),"\n",(0,n.jsxs)(t.li,{children:["\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.strong,{children:"Include Timezone Considerations"}),": If your application deals with time-sensitive information across different time zones, consider incorporating timezone selection alongside the date field to ensure accurate date-time representation."]}),"\n"]}),"\n",(0,n.jsxs)(t.li,{children:["\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.strong,{children:"Consider Accessibility"}),": Utilize the ",(0,n.jsx)(t.code,{children:"DateField"})," with accessibility in mind. Ensure that it meets accessibility standards, such as providing proper labels, and being compatible with assistive technologies."]}),"\n"]}),"\n",(0,n.jsxs)(t.li,{children:["\n",(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.strong,{children:"Auto-Populate Current Date"}),": Consider providing an option to auto-populate the current date as a default value in the date field, if appropriate for your application's use case."]}),"\n"]}),"\n"]})]})}function p(e={}){const{wrapper:t}={...(0,a.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(m,{...e})}):m(e)}},6031:(e,t,i)=>{var n=i(4836);t.Z=void 0;var a=n(i(4938)),s=i(5893),r=(0,a.default)((0,s.jsx)("path",{d:"m19 1-5 5v11l5-4.5V1zM1 6v14.65c0 .25.25.5.5.5.1 0 .15-.05.25-.05C3.1 20.45 5.05 20 6.5 20c1.95 0 4.05.4 5.5 1.5V6c-1.45-1.1-3.55-1.5-5.5-1.5S2.45 4.9 1 6zm22 13.5V6c-.6-.45-1.25-.75-2-1v13.5c-1.1-.35-2.3-.5-3.5-.5-1.7 0-4.15.65-5.5 1.5v2c1.35-.85 3.8-1.5 5.5-1.5 1.65 0 3.35.3 4.75 1.05.1.05.15.05.25.05.25 0 .5-.25.5-.5v-1.1z"}),"AutoStories");t.Z=r},2610:(e,t,i)=>{var n=i(4836);t.Z=void 0;var a=n(i(4938)),s=i(5893),r=(0,a.default)((0,s.jsx)("path",{d:"M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"}),"DragIndicator");t.Z=r},5162:(e,t,i)=>{i.d(t,{Z:()=>r});i(7294);var n=i(6010);const a={tabItem:"tabItem_Ymn6"};var s=i(5893);function r(e){let{children:t,hidden:i,className:r}=e;return(0,s.jsx)("div",{role:"tabpanel",className:(0,n.Z)(a.tabItem,r),hidden:i,children:t})}},4866:(e,t,i)=>{i.d(t,{Z:()=>j});var n=i(7294),a=i(6010),s=i(2466),r=i(6550),o=i(469),l=i(1980),d=i(7392),c=i(12);function u(e){return n.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,n.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 h(e){const{values:t,children:i}=e;return(0,n.useMemo)((()=>{const e=t??function(e){return u(e).map((e=>{let{props:{value:t,label:i,attributes:n,default:a}}=e;return{value:t,label:i,attributes:n,default:a}}))}(i);return function(e){const t=(0,d.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,i])}function m(e){let{value:t,tabValues:i}=e;return i.some((e=>e.value===t))}function p(e){let{queryString:t=!1,groupId:i}=e;const a=(0,r.k6)(),s=function(e){let{queryString:t=!1,groupId:i}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!i)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 i??null}({queryString:t,groupId:i});return[(0,l._X)(s),(0,n.useCallback)((e=>{if(!s)return;const t=new URLSearchParams(a.location.search);t.set(s,e),a.replace({...a.location,search:t.toString()})}),[s,a])]}function g(e){const{defaultValue:t,queryString:i=!1,groupId:a}=e,s=h(e),[r,l]=(0,n.useState)((()=>function(e){let{defaultValue:t,tabValues:i}=e;if(0===i.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!m({value:t,tabValues:i}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${i.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const n=i.find((e=>e.default))??i[0];if(!n)throw new Error("Unexpected error: 0 tabValues");return n.value}({defaultValue:t,tabValues:s}))),[d,u]=p({queryString:i,groupId:a}),[g,b]=function(e){let{groupId:t}=e;const i=function(e){return e?`docusaurus.tab.${e}`:null}(t),[a,s]=(0,c.Nk)(i);return[a,(0,n.useCallback)((e=>{i&&s.set(e)}),[i,s])]}({groupId:a}),f=(()=>{const e=d??g;return m({value:e,tabValues:s})?e:null})();(0,o.Z)((()=>{f&&l(f)}),[f]);return{selectedValue:r,selectValue:(0,n.useCallback)((e=>{if(!m({value:e,tabValues:s}))throw new Error(`Can't select invalid tab value=${e}`);l(e),u(e),b(e)}),[u,b,s]),tabValues:s}}var b=i(2389);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var A=i(5893);function v(e){let{className:t,block:i,selectedValue:n,selectValue:r,tabValues:o}=e;const l=[],{blockElementScrollPositionUntilNextRender:d}=(0,s.o5)(),c=e=>{const t=e.currentTarget,i=l.indexOf(t),a=o[i].value;a!==n&&(d(t),r(a))},u=e=>{let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const i=l.indexOf(e.currentTarget)+1;t=l[i]??l[0];break}case"ArrowLeft":{const i=l.indexOf(e.currentTarget)-1;t=l[i]??l[l.length-1];break}}t?.focus()};return(0,A.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,a.Z)("tabs",{"tabs--block":i},t),children:o.map((e=>{let{value:t,label:i,attributes:s}=e;return(0,A.jsx)("li",{role:"tab",tabIndex:n===t?0:-1,"aria-selected":n===t,ref:e=>l.push(e),onKeyDown:u,onClick:c,...s,className:(0,a.Z)("tabs__item",f.tabItem,s?.className,{"tabs__item--active":n===t}),children:i??t},t)}))})}function x(e){let{lazy:t,children:i,selectedValue:a}=e;const s=(Array.isArray(i)?i:[i]).filter(Boolean);if(t){const e=s.find((e=>e.props.value===a));return e?(0,n.cloneElement)(e,{className:"margin-top--md"}):null}return(0,A.jsx)("div",{className:"margin-top--md",children:s.map(((e,t)=>(0,n.cloneElement)(e,{key:t,hidden:e.props.value!==a})))})}function w(e){const t=g(e);return(0,A.jsxs)("div",{className:(0,a.Z)("tabs-container",f.tabList),children:[(0,A.jsx)(v,{...e,...t}),(0,A.jsx)(x,{...e,...t})]})}function j(e){const t=(0,b.Z)();return(0,A.jsx)(w,{...e,children:u(e.children)},String(t))}},6957:(e,t,i)=>{i.d(t,{Z:()=>b});var n=i(7294),a=i(917),s=i(4866),r=i(5162),o=i(4673),l=i(1750);const d="data:image/png;base64,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",c=i.p+"assets/images/expand-ba3f00f73da43d91e5b17663c4a7d108.png",u="data:image/png;base64,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";var h=i(2610),m=i(5944);function p(e){let{collapse:t,setCollapse:i}=e;const n=a.iv`
+ display: flex;
+ justify-content: end;
+ align-items: flex-end;
+ background-color: transparent;
+ margin-bottom: -10px;
+ `,s=a.iv`
+ /* position: absolute;
+ right: 0; */
+ cursor: pointer;
+ z-index: 10;
+ height: 35px;
+ width: 35px;
+ border: none;
+ background-color: none;
+ justify-self: flex-end;
+ background-color: transparent;
+ margin-right: 5px;
+ margin-bottom: -50px !important;
+ `,r=a.iv`
+ filter: invert(var(--inversion-percentage));
+ `;return(0,m.tZ)("div",{css:n,children:(0,m.tZ)("button",{css:s,onClick:()=>{i(!t)},children:t?(0,m.tZ)("img",{css:r,src:c,className:"icon-tabler-arrow-bar-up"}):(0,m.tZ)("img",{css:r,src:d,className:"icon-tabler-arrow-bar-down"})})})}function g(e){let{url:t}=e;const i=a.iv`
+ position: relative;
+ cursor: pointer;
+ z-index: 10;
+ height: 35px;
+ width: 35px;
+ border: none;
+ background-color: none;
+ justify-self: flex-end;
+ margin-top: -5px;
+ margin-bottom: -20px;
+ background-color: transparent;
+
+
+ `,n=a.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,m.tZ)("button",{css:i,onClick:()=>{window.open(t,"_blank")},children:(0,m.tZ)("img",{css:n,src:u})})}function b(e){let{path:t,javaC:i,javaE:d,cssURL:c,javaHighlight:u,height:b,frame:f,tabs:A}=e;const[v,x]=(0,n.useState)(""),[w,j]=(0,n.useState)(""),[D,y]=(0,n.useState)(""),[T,Z]=(0,n.useState)(!(!i||!d)),[B,k]=(0,n.useState)(!1),[S,F]=(0,n.useState)({}),[C,E]=(0,n.useState)(!1),[L,M]=(0,n.useState)(0),[z,H]=(0,n.useState)(0),[V,N]=(0,n.useState)(25),[O,X]=(0,n.useState)(25),[J,G]=(0,n.useState)(0),[Y,I]=(0,n.useState)(!1),P=(0,n.useRef)(null),W=(0,n.useRef)(null);(0,n.useEffect)((()=>{d&&fetch(d).then((e=>e.text())).then((e=>{j(e);const t=new URL(d).pathname.split("/"),i=t[t.length-1];F((e=>({...e,javaFile:i})))})),i&&fetch(i).then((e=>e.text())).then((e=>{x(e)})),c&&fetch(c).then((e=>e.text())).then((e=>{y(e);const t=new URL(c).pathname.split("/"),i=t[t.length-1];F((e=>({...e,cssFile:i})))})),G(P.current.offsetWidth),console.log(J)}),[]);const U=()=>{E(!1),console.log("Stop Resizing")},q=e=>{if(C){const t=e.clientX-L;z+t>J/3&&(P.current.style.width=`${z+t}px`,W.current.style.right=(V-t<25?25:V-t)+"px",X(V-t<25?25:V-t))}},R=a.iv`
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ margin-bottom: 16px;
+ /* padding: ${"hidden"==f?"0 15px 0 15px;":"7px 15px 0 15px;"}; */
+ /* box-shadow: var(--ifm-global-shadow-lw); */
+ background-color: var(--code-display-color-background);
+ `,K=a.iv`
+ width: 100%;
+ /* padding: 1em; */
+ border: 1px solid var(--ifm-toc-border-color);
+ border-right: none;
+ background-color: transparent;
+ display: flex;
+ position: relative;
+ `,Q=a.iv`
+ min-height: 100px;
+ height: 100%;
+ width: 100%;
+ height: ${b||"100%"};
+ pointer-events: none;
+ `,_=a.iv`
+ display: flex;
+ justify-content: flex-end;
+ opacity: 0;
+ transition: opacity 0.3s ease-in-out;
+ ${B&&"opacity: 1;"};
+ margin: 10px 0 0 0;
+ position: absolute;
+ right: 25px;
+ `,$=a.iv`
+ display: flex;
+ align-items: center;
+ cursor: ew-resize;
+ border-left: 1px solid var(--ifm-toc-border-color);
+ border-right: 1px solid var(--ifm-toc-border-color);
+ background-color: var(--ifm-background-color);
+ `,ee=a.iv`
+ box-shadow: none;
+ background-color: var(--ifm-background-color);
+ margin: 0px;
+ padding: 0px;
+ border: 1px solid var(--ifm-toc-border-color);
+ border-top: none;
+ border-radius: 0px;
+ position: relative;
+
+ div{
+ /* border: none; */
+ border-color: var(--ifm-toc-border-color);
+ padding: 2px 0px 0px 0px;
+ margin: 0px
+ }
+
+ summary{
+ display: flex;
+ width: 100%;
+ justify-content: center;
+ margin: 10px 0;
+ font-weight: bold;
+ ::before{
+ left: auto;
+ margin-left: -100px;
+ --docusaurus-details-decoration-color: var(--ifm-color-primary)
+ }
+ }
+ .margin-top--md{
+ margin-top: 0px !important;
+ }
+ ul{
+ margin: -4px 0px!important;
+ }
+ `,te=a.iv`
+ /* :first-child{
+ margin-left: 1em;
+ } */
+ li[aria-selected="true"]{
+ border-color: var(--ifm-color-primary);
+ }
+
+ .tabs__item{
+ padding: 5px 20px -2px 20px;
+ border-radius: 0px;
+ }
+ `,ie=a.iv`
+ border-radius: 0px;
+ box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset;
+ `;return(0,m.BX)("div",{css:R,onMouseUp:U,onMouseLeave:U,onMouseMove:q,children:["hidden"!=f?(0,m.BX)("div",{onMouseEnter:()=>{k(!0)},onMouseLeave:()=>k(!1),css:K,children:[(0,m.tZ)("iframe",{onMouseUp:U,loading:"lazy",src:t,css:{...Q,pointerEvents:C?"none":"auto"},ref:P,onMouseMove:q}),(0,m.tZ)("div",{css:_,ref:W,children:(0,m.tZ)(g,{url:t})}),(0,m.tZ)("div",{css:$,onMouseDown:e=>{e.preventDefault(),E(!0),M(e.clientX),H(P.current.offsetWidth),N(O),console.log(W.current.right),console.log("Start Resizing")},children:(0,m.tZ)(h.Z,{})})]}):null,(0,m.BX)(o.Z,{css:ee,summary:(0,m.tZ)("summary",{onClick:()=>I(!Y),children:Y?"Hide Code":"Show Code"}),children:[i&&d?(0,m.tZ)(p,{collapse:T,setCollapse:Z}):null,c?(0,m.BX)(s.Z,{css:te,children:[(0,m.tZ)(r.Z,{value:A?A[0]:"Java",label:A?A[0]:S.javaFile,default:!0,children:(0,m.tZ)(l.Z,{css:ie,className:"codeDemoBlock",language:"java",showLineNumbers:!0,metastring:u,children:T?v:w})}),(0,m.tZ)(r.Z,{value:A?A[1]:"CSS",label:A?A[1]:S.cssFile,children:(0,m.tZ)(l.Z,{css:ie,className:"codeDemoBlock",language:"css",showLineNumbers:!0,children:D})})]}):(0,m.tZ)(s.Z,{css:te,children:(0,m.tZ)(r.Z,{value:A?A[0]:"Java",label:A?A[0]:S.javaFile,default:!0,children:(0,m.tZ)(l.Z,{css:ie,className:"codeDemoBlock",language:"java",showLineNumbers:!0,metastring:u,children:T?v:w})})})]})]})}},3273:(e,t,i)=>{i.d(t,{Z:()=>d});var n=i(7294),a=i(917),s=i(8230),r=i(4387),o=i(6031);var l=i(5944);function d(e){let{type:t,location:i,top:d,children:c,code:u,suffix:h}=e;const[m,p]=(0,n.useState)("");(0,n.useEffect)((()=>{h||(h=""),p("https://javadoc.io/doc/org.dwcj/dwcj-"+t+"/latest/"+i+".html"+h)}),[]);const g=a.iv`
+ display: inline;
+
+ ${d&&a.iv`
+ width: 100%;
+ display: flex;
+ justify-content: flex-end;
+ margin-top: -33px;
+ margin-bottom: 25px;
+ `}
+ `,b=a.iv`
+ background-color: #0063CC;
+ padding: 0 0 0 5px;
+ :hover{
+ color: white;
+ }
+ `;return(0,l.BX)(l.HY,{children:["true"===d&&(0,l.tZ)("div",{css:g,children:(0,l.tZ)(s.Z,{title:"JavaDoc",arrow:!0,children:(0,l.tZ)(r.Z,{css:b,label:"Java API",component:"a",href:m,icon:(0,l.tZ)(o.Z,{}),clickable:!0,color:"primary",target:"_blank"})})}),"true"!==d&&!u&&(0,l.tZ)("div",{css:g,children:(0,l.tZ)("a",{href:m,target:"_blank",children:c})}),"true"!==d&&u&&(0,l.tZ)("div",{css:g,children:(0,l.tZ)("code",{children:(0,l.tZ)("a",{href:m,target:"_blank",children:c})})})]})}},1415:(e,t,i)=>{i.d(t,{Z:()=>s});i(7294);var n=i(8397),a=i(5893);function s(e){return(0,a.jsx)(a.Fragment,{children:(0,a.jsx)(n.Z,{...e})})}}}]);
\ No newline at end of file
diff --git a/assets/js/4eb8144b.4d28e4d6.js b/assets/js/4eb8144b.4d28e4d6.js
deleted file mode 100644
index 0bd475c8a..000000000
--- a/assets/js/4eb8144b.4d28e4d6.js
+++ /dev/null
@@ -1,120 +0,0 @@
-"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 o=n(5893),s=n(1151),i=n(6957),r=(n(6521),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:"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",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:"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,o.jsx)(t.code,{children:"ChoiceBox"}),", which triggers the display of a dropdown list containing available choices. Users can also interact with the ",(0,o.jsx)(t.code,{children:"ChoiceBox"})," with the arrow keys. When a user makes a selection, the chosen option is then displayed in the ",(0,o.jsx)(t.code,{children:"ChoiceBox"})," button."]}),"\n",(0,o.jsx)(t.h2,{id:"usages",children:"Usages"}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.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,o.jsxs)(t.ol,{children:["\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.strong,{children:"User Selection of Options"}),": The primary purpose of a ",(0,o.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,o.jsxs)(t.blockquote,{children:["\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsx)(t.li,{children:"Selecting items from a list"}),"\n",(0,o.jsx)(t.li,{children:"Choosing from a list of categories"}),"\n",(0,o.jsx)(t.li,{children:"Picking options from predefined sets"}),"\n"]}),"\n"]}),"\n",(0,o.jsxs)(t.ol,{start:"2",children:["\n",(0,o.jsxs)(t.li,{children:["\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.strong,{children:"Form Inputs"}),": When designing forms that require users to input specific options, the ",(0,o.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,o.jsx)(t.code,{children:"ChoiceBox"})," streamlines the input process."]}),"\n"]}),"\n",(0,o.jsxs)(t.li,{children:["\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.strong,{children:"Filtering and Sorting"}),": ",(0,o.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,o.jsxs)(t.li,{children:["\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.strong,{children:"Configuration and Settings"}),": When your application includes settings or configuration options, the ",(0,o.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,o.jsx)(t.admonition,{type:"tip",children:(0,o.jsxs)(t.p,{children:["The ",(0,o.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,o.jsx)(t.a,{href:"/docs/components/list-components/combobox",children:(0,o.jsx)(t.code,{children:"ComboBox"})})," 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)(a.Z,{type:"engine",location:"org/dwcj/component/list/ChoiceBox",code:"true",suffix:"#()",children:"ChoiceBox()"}),": Constructs a new ",(0,o.jsx)(t.code,{children:"ChoiceBox"})," without a label."]}),"\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(a.Z,{type:"engine",location:"org/dwcj/component/list/ChoiceBox",code:"true",suffix:"#(java.lang.String)",children:"ChoiceBox(String label)"}),": Constructs a new ",(0,o.jsx)(t.code,{children:"ChoiceBox"})," with the specified label."]}),"\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(a.Z,{type:"engine",location:"org/dwcj/component/list/ChoiceBox",code:"true",suffix:"#(java.lang.String,org.dwcj.component.event.ComponentEventListener)",children:"ChoiceBox(String label, ComponentEventListener< ListSelectEvent> selectListener)"}),": Constructs a new ",(0,o.jsx)(t.code,{children:"ChoiceBox"})," with the given label and a listener to handle item selection events."]}),"\n"]}),"\n",(0,o.jsx)(t.h2,{id:"dropdown-type",children:"Dropdown Type"}),"\n",(0,o.jsxs)(t.p,{children:["Using the ",(0,o.jsx)(a.Z,{type:"engine",location:"org/dwcj/component/list/DwcSelectDropdown",code:"true",suffix:"#setDropdownType(java.lang.String)",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:"ChoiceBox"}),", 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:"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,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.comboboxdemos.ChoiceBoxDropdownType",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/comboboxdemos/ChoiceBoxDropdownType.java",height:"250px"}),"\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:"ChoiceBox"})," will be increased to fit the content. However, using the ",(0,o.jsx)(a.Z,{type:"engine",location:"org/dwcj/component/list/DwcSelectDropdown",code:"true",suffix:"#setMaxRowCount(int)",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.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,o.jsx)(t.h2,{id:"opening-dimensions",children:"Opening Dimensions"}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.code,{children:"ChoiceBox"})," 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)(a.Z,{type:"engine",location:"org/dwcj/component/list/DwcSelectDropdown",code:"true",suffix:"#setOpenHeight(int)",children:"setOpenHeight()"})," and ",(0,o.jsx)(a.Z,{type:"engine",location:"org/dwcj/component/list/DwcSelectDropdown",code:"true",suffix:"#setOpenWidth(int)",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:"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,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."})]})]})]}),"\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:"ChoiceBox"}),", 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.h2,{id:"styling",children:"Styling"}),"\n",(0,o.jsx)(t.h3,{id:"expanses",children:"Expanses"}),"\n",(0,o.jsxs)(t.p,{children:["There are five ",(0,o.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,o.jsx)("br",{})]}),"\n",(0,o.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,o.jsx)(t.h3,{id:"themes",children:"Themes"}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.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,o.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,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:"ChoiceBox"})," component, which will be required when styling via CSS is desired."]}),"\n",(0,o.jsx)(r.Z,{tag:n(5731).Z,table:"parts",exclusions:""}),"\n",(0,o.jsx)(t.h3,{id:"css-properties",children:"CSS Properties"}),"\n",(0,o.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,o.jsx)(r.Z,{tag:n(5731).Z,exclusions:"",table:"properties"}),"\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).Z,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-button",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:"ChoiceBox"})," 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:"Clear and Limited Options"}),": Keep the list of choices concise where possible, and relevant to the user's task. A ",(0,o.jsx)(t.code,{children:"ChoiceBox"})," is ideal for presenting a clear list of options."]}),"\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:"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,o.jsxs)(t.li,{children:["\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.strong,{children:"ChoiceBox vs. Other List Components"}),": A ",(0,o.jsx)(t.code,{children:"ChoiceBox"})," 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.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,s.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(m,{...e})}):m(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:()=>j});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 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 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(!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 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]=m({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 p({value:e,tabValues:i})?e:null})();(0,a.Z)((()=>{g&&l(g)}),[g]);return{selectedValue:r,selectValue:(0,o.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 w=n(5893);function v(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,w.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,w.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 f(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,w.jsx)("div",{className:"margin-top--md",children:i.map(((e,t)=>(0,o.cloneElement)(e,{key:t,hidden:e.props.value!==s})))})}function A(e){const t=b(e);return(0,w.jsxs)("div",{className:(0,s.Z)("tabs-container",g.tabList),children:[(0,w.jsx)(v,{...e,...t}),(0,w.jsx)(f,{...e,...t})]})}function j(e){const t=(0,x.Z)();return(0,w.jsx)(A,{...e,children:h(e.children)},String(t))}},6521:(e,t,n)=>{n.d(t,{Z:()=>i});n(7294);var o=n(917),s=n(5944);function i(e){let{url:t,mobile:n}=e;const i=o.iv`
- display: flex;
- flex-direction: column;
- align-items: center;
- margin: 4rem 0;
- /* width: 110%; */
- margin-left: -5%;
- `,r=o.iv`
- position: relative;
- width : 100%;
- max-width: ${"true"==n?"375px":"100%"};
- height: ${"true"==n?"700px":"600px"};
- border-radius: 32px;
- overflow: hidden;
- box-shadow: 0 0 0 10px black, 0 3px 22px black;
- outline: thin solid black;
- `,a=o.iv`
- width: 100%;
- height: 100%;
- background: var(--bbj-surface-3);
- `;return(0,s.tZ)("div",{css:i,children:(0,s.tZ)("div",{css:r,children:(0,s.tZ)("iframe",{src:t,css:a,loading:"lazy"})})})}},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),p=n(5944);function m(e){let{collapse:t,setCollapse:n}=e;const o=s.iv`
- display: flex;
- justify-content: end;
- margin-bottom: -30px;
- background-color: transparent;
- `,i=s.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=s.iv`
- filter: invert(var(--inversion-percentage));
- `;return(0,p.tZ)("div",{css:o,children:(0,p.tZ)("button",{css:i,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=s.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;
-
-
- `,o=s.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:o,src:h})})}function x(e){let{path:t,javaC:n,javaE:c,cssURL:d,javaHighlight:h,height:x,frame:g,tabs:w}=e;const[v,f]=(0,o.useState)(""),[A,j]=(0,o.useState)(""),[y,C]=(0,o.useState)(""),[B,D]=(0,o.useState)(!(!n||!c)),[k,S]=(0,o.useState)(!1),[Z,E]=(0,o.useState)({});(0,o.useEffect)((()=>{c&&fetch(c).then((e=>e.text())).then((e=>{j(e);const t=new URL(c).pathname.split("/"),n=t[t.length-1];E((e=>({...e,javaFile:n})))})),n&&fetch(n).then((e=>e.text())).then((e=>{f(e)})),d&&fetch(d).then((e=>e.text())).then((e=>{C(e);const t=new URL(d).pathname.split("/"),n=t[t.length-1];E((e=>({...e,cssFile:n})))}))}),[]);const L=s.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=s.iv`
- min-height: 100px;
- height: 100%;
- width: 100%;
- height: ${x};
- `,O=s.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;
- }
- }
-
- `,M=s.iv`
- width: 100%;
- `,N=s.iv`
- display: flex;
- justify-content: flex-end;
- opacity: 0;
- transition: opacity 0.3s ease-in-out;
- ${k&&"opacity: 1;"};
-
- `;return(0,p.BX)("div",{css:L,children:["hidden"!=g?(0,p.BX)("div",{onMouseEnter:()=>{S(!0)},onMouseLeave:()=>S(!1),css:M,children:[(0,p.tZ)("div",{css:N,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:O,summary:(0,p.tZ)("summary",{children:"Show Code"}),children:[n&&c?(0,p.tZ)(m,{collapse:B,setCollapse:D}):null,d?(0,p.BX)(i.Z,{children:[(0,p.tZ)(r.Z,{value:w?w[0]:"Java",label:w?w[0]:Z.javaFile,default:!0,children:(0,p.tZ)(l.Z,{className:"codeDemoBlock",language:"java",showLineNumbers:!0,metastring:h,children:B?v:A})}),(0,p.tZ)(r.Z,{value:w?w[1]:"CSS",label:w?w[1]:Z.cssFile,children:(0,p.tZ)(l.Z,{className:"codeDemoBlock",language:"css",showLineNumbers:!0,children:y})})]}):(0,p.tZ)(i.Z,{children:(0,p.tZ)(r.Z,{value:w?w[0]:"Java",label:w?w[0]:Z.javaFile,default:!0,children:(0,p.tZ)(l.Z,{className:"codeDemoBlock",language:"java",showLineNumbers:!0,metastring:h,children:B?v:A})})})]})]})}},3273:(e,t,n)=>{n.d(t,{Z:()=>c});var o=n(7294),s=n(917),i=n(8230),r=n(4387),a=n(6770);var l=n(5944);function c(e){let{type:t,location:n,top:c,children:d,code:h,suffix:u}=e;const[p,m]=(0,o.useState)("");(0,o.useEffect)((()=>{u||(u=""),m("https://javadoc.io/doc/org.dwcj/dwcj-"+t+"/latest/"+n+".html"+u)}),[]);const b=s.iv`
- display: inline;
-
- ${c&&s.iv`
- width: 100%;
- display: flex;
- justify-content: flex-end;
- margin-top: -33px;
- margin-bottom: 25px;
- `}
- `,x=s.iv`
- background-color: #0063CC;
- :hover{
- color: white;
- }
- `;return(0,l.BX)(l.HY,{children:["true"===c&&(0,l.tZ)("div",{css:b,children:(0,l.tZ)(i.Z,{title:"JavaDoc",arrow:!0,children:(0,l.tZ)(r.Z,{css:x,label:"Java API",component:"a",href:p,icon:(0,l.tZ)(a.Z,{}),clickable:!0,color:"primary",target:"_blank"})})}),"true"!==c&&!h&&(0,l.tZ)("div",{css:b,children:(0,l.tZ)("a",{href:p,target:"_blank",children:d})}),"true"!==c&&h&&(0,l.tZ)("div",{css:b,children:(0,l.tZ)("code",{children:(0,l.tZ)("a",{href:p,target:"_blank",children:d})})})]})}},1415:(e,t,n)=>{n.d(t,{Z:()=>i});n(7294);var o=n(8397),s=n(5893);function i(e){return(0,s.jsx)(s.Fragment,{children:(0,s.jsx)(o.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.5411bd73.js b/assets/js/4eb8144b.5411bd73.js
new file mode 100644
index 000000000..d1e1d3b89
--- /dev/null
+++ b/assets/js/4eb8144b.5411bd73.js
@@ -0,0 +1,166 @@
+"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:()=>x,frontMatter:()=>c,metadata:()=>h,toc:()=>p});var o=n(5893),i=n(1151),s=n(6957),r=(n(6521),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:"Styling",id:"styling",level:2},{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",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,i.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:"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,o.jsx)(t.code,{children:"ChoiceBox"}),", which triggers the display of a dropdown list containing available choices. Users can also interact with the ",(0,o.jsx)(t.code,{children:"ChoiceBox"})," with the arrow keys. When a user makes a selection, the chosen option is then displayed in the ",(0,o.jsx)(t.code,{children:"ChoiceBox"})," button."]}),"\n",(0,o.jsx)(t.h2,{id:"usages",children:"Usages"}),"\n",(0,o.jsxs)(t.p,{children:[(0,o.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,o.jsxs)(t.ol,{children:["\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.strong,{children:"User Selection of Options"}),": The primary purpose of a ",(0,o.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,o.jsxs)(t.blockquote,{children:["\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsx)(t.li,{children:"Selecting items from a list"}),"\n",(0,o.jsx)(t.li,{children:"Choosing from a list of categories"}),"\n",(0,o.jsx)(t.li,{children:"Picking options from predefined sets"}),"\n"]}),"\n"]}),"\n",(0,o.jsxs)(t.ol,{start:"2",children:["\n",(0,o.jsxs)(t.li,{children:["\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.strong,{children:"Form Inputs"}),": When designing forms that require users to input specific options, the ",(0,o.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,o.jsx)(t.code,{children:"ChoiceBox"})," streamlines the input process."]}),"\n"]}),"\n",(0,o.jsxs)(t.li,{children:["\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.strong,{children:"Filtering and Sorting"}),": ",(0,o.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,o.jsxs)(t.li,{children:["\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.strong,{children:"Configuration and Settings"}),": When your application includes settings or configuration options, the ",(0,o.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,o.jsx)(t.admonition,{type:"tip",children:(0,o.jsxs)(t.p,{children:["The ",(0,o.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,o.jsx)(t.a,{href:"/docs/components/list-components/combobox",children:(0,o.jsx)(t.code,{children:"ComboBox"})})," 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)(a.Z,{type:"engine",location:"org/dwcj/component/list/ChoiceBox",code:"true",suffix:"#()",children:"ChoiceBox()"}),": Constructs a new ",(0,o.jsx)(t.code,{children:"ChoiceBox"})," without a label."]}),"\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(a.Z,{type:"engine",location:"org/dwcj/component/list/ChoiceBox",code:"true",suffix:"#(java.lang.String)",children:"ChoiceBox(String label)"}),": Constructs a new ",(0,o.jsx)(t.code,{children:"ChoiceBox"})," with the specified label."]}),"\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(a.Z,{type:"engine",location:"org/dwcj/component/list/ChoiceBox",code:"true",suffix:"#(java.lang.String,org.dwcj.component.event.ComponentEventListener)",children:"ChoiceBox(String label, ComponentEventListener< ListSelectEvent> selectListener)"}),": Constructs a new ",(0,o.jsx)(t.code,{children:"ChoiceBox"})," with the given label and a listener to handle item selection events."]}),"\n"]}),"\n",(0,o.jsx)(t.h2,{id:"dropdown-type",children:"Dropdown Type"}),"\n",(0,o.jsxs)(t.p,{children:["Using the ",(0,o.jsx)(a.Z,{type:"engine",location:"org/dwcj/component/list/DwcSelectDropdown",code:"true",suffix:"#setDropdownType(java.lang.String)",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:"ChoiceBox"}),", 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:"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,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)(s.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:"250px"}),"\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:"ChoiceBox"})," will be increased to fit the content. However, using the ",(0,o.jsx)(a.Z,{type:"engine",location:"org/dwcj/component/list/DwcSelectDropdown",code:"true",suffix:"#setMaxRowCount(int)",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)(s.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",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:"ChoiceBox"})," 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)(a.Z,{type:"engine",location:"org/dwcj/component/list/DwcSelectDropdown",code:"true",suffix:"#setOpenHeight(int)",children:"setOpenHeight()"})," and ",(0,o.jsx)(a.Z,{type:"engine",location:"org/dwcj/component/list/DwcSelectDropdown",code:"true",suffix:"#setOpenWidth(int)",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:"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,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."})]})]})]}),"\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:"ChoiceBox"}),", 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.h2,{id:"styling",children:"Styling"}),"\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:"ChoiceBox"})," component, which will be required when styling via CSS is desired."]}),"\n",(0,o.jsx)(r.Z,{tag:n(5731).Z,table:"parts",exclusions:""}),"\n",(0,o.jsx)(t.h3,{id:"css-properties",children:"CSS Properties"}),"\n",(0,o.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,o.jsx)(r.Z,{tag:n(5731).Z,exclusions:"",table:"properties"}),"\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).Z,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-button",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:"ChoiceBox"})," 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:"Clear and Limited Options"}),": Keep the list of choices concise where possible, and relevant to the user's task. A ",(0,o.jsx)(t.code,{children:"ChoiceBox"})," is ideal for presenting a clear list of options."]}),"\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:"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,o.jsxs)(t.li,{children:["\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.strong,{children:"ChoiceBox vs. Other List Components"}),": A ",(0,o.jsx)(t.code,{children:"ChoiceBox"})," 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.jsx)(t.li,{children:"A selection of predefined choices is desired, preventing users from entering custom or unexpected data."}),"\n"]}),"\n"]})]})}function x(e={}){const{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(m,{...e})}):m(e)}},6031:(e,t,n)=>{var o=n(4836);t.Z=void 0;var i=o(n(4938)),s=n(5893),r=(0,i.default)((0,s.jsx)("path",{d:"m19 1-5 5v11l5-4.5V1zM1 6v14.65c0 .25.25.5.5.5.1 0 .15-.05.25-.05C3.1 20.45 5.05 20 6.5 20c1.95 0 4.05.4 5.5 1.5V6c-1.45-1.1-3.55-1.5-5.5-1.5S2.45 4.9 1 6zm22 13.5V6c-.6-.45-1.25-.75-2-1v13.5c-1.1-.35-2.3-.5-3.5-.5-1.7 0-4.15.65-5.5 1.5v2c1.35-.85 3.8-1.5 5.5-1.5 1.65 0 3.35.3 4.75 1.05.1.05.15.05.25.05.25 0 .5-.25.5-.5v-1.1z"}),"AutoStories");t.Z=r},2610:(e,t,n)=>{var o=n(4836);t.Z=void 0;var i=o(n(4938)),s=n(5893),r=(0,i.default)((0,s.jsx)("path",{d:"M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"}),"DragIndicator");t.Z=r},5162:(e,t,n)=>{n.d(t,{Z:()=>r});n(7294);var o=n(6010);const i={tabItem:"tabItem_Ymn6"};var s=n(5893);function r(e){let{children:t,hidden:n,className:r}=e;return(0,s.jsx)("div",{role:"tabpanel",className:(0,o.Z)(i.tabItem,r),hidden:n,children:t})}},4866:(e,t,n)=>{n.d(t,{Z:()=>j});var o=n(7294),i=n(6010),s=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:i}}=e;return{value:t,label:n,attributes:o,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)(),s=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)(s),(0,o.useCallback)((e=>{if(!s)return;const t=new URLSearchParams(i.location.search);t.set(s,e),i.replace({...i.location,search:t.toString()})}),[s,i])]}function x(e){const{defaultValue:t,queryString:n=!1,groupId:i}=e,s=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(!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 o=n.find((e=>e.default))??n[0];if(!o)throw new Error("Unexpected error: 0 tabValues");return o.value}({defaultValue:t,tabValues:s}))),[c,h]=m({queryString:n,groupId:i}),[x,b]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[i,s]=(0,d.Nk)(n);return[i,(0,o.useCallback)((e=>{n&&s.set(e)}),[n,s])]}({groupId:i}),g=(()=>{const e=c??x;return p({value:e,tabValues:s})?e:null})();(0,a.Z)((()=>{g&&l(g)}),[g]);return{selectedValue:r,selectValue:(0,o.useCallback)((e=>{if(!p({value:e,tabValues:s}))throw new Error(`Can't select invalid tab value=${e}`);l(e),h(e),b(e)}),[h,b,s]),tabValues:s}}var b=n(2389);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=n(5893);function f(e){let{className:t,block:n,selectedValue:o,selectValue:r,tabValues:a}=e;const l=[],{blockElementScrollPositionUntilNextRender:c}=(0,s.o5)(),d=e=>{const t=e.currentTarget,n=l.indexOf(t),i=a[n].value;i!==o&&(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:s}=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,...s,className:(0,i.Z)("tabs__item",g.tabItem,s?.className,{"tabs__item--active":o===t}),children:n??t},t)}))})}function w(e){let{lazy:t,children:n,selectedValue:i}=e;const s=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=s.find((e=>e.props.value===i));return e?(0,o.cloneElement)(e,{className:"margin-top--md"}):null}return(0,v.jsx)("div",{className:"margin-top--md",children:s.map(((e,t)=>(0,o.cloneElement)(e,{key:t,hidden:e.props.value!==i})))})}function A(e){const t=x(e);return(0,v.jsxs)("div",{className:(0,i.Z)("tabs-container",g.tabList),children:[(0,v.jsx)(f,{...e,...t}),(0,v.jsx)(w,{...e,...t})]})}function j(e){const t=(0,b.Z)();return(0,v.jsx)(A,{...e,children:h(e.children)},String(t))}},6521:(e,t,n)=>{n.d(t,{Z:()=>s});n(7294);var o=n(917),i=n(5944);function s(e){let{url:t,mobile:n}=e;const s=o.iv`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin: 4rem 0;
+ /* width: 110%; */
+ margin-left: -5%;
+ `,r=o.iv`
+ position: relative;
+ width : 100%;
+ max-width: ${"true"==n?"375px":"100%"};
+ height: ${"true"==n?"700px":"600px"};
+ border-radius: 32px;
+ overflow: hidden;
+ box-shadow: 0 0 0 10px black, 0 3px 22px black;
+ outline: thin solid black;
+ `,a=o.iv`
+ width: 100%;
+ height: 100%;
+ background: var(--bbj-surface-3);
+ `;return(0,i.tZ)("div",{css:s,children:(0,i.tZ)("div",{css:r,children:(0,i.tZ)("iframe",{src:t,css:a,loading:"lazy"})})})}},6957:(e,t,n)=>{n.d(t,{Z:()=>b});var o=n(7294),i=n(917),s=n(4866),r=n(5162),a=n(4673),l=n(1750);const c="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPAAAADwCAYAAAA+VemSAAAABmJLR0QA/wD/AP+gvaeTAAAG/ElEQVR4nO3dTW7bRhgG4Ddu4bTHa72Ir+UbNKskm/YgvYJhGF61B2gcIEDdRSVAMGxLIueHQz4PMBtDGeoj9EIfxWEmAQAAAAAAAAAAAAAAAAAAAAAAACjnMsl1ks9JbpN8343b3d+ud68BFuYqyUOSpyPjYfdaYAEuktzkeHCfj5vdvwU6mhLewxADnVxlenj3QzsNHVwmucv8AN8ned/2rQPXmR/e/fjQ+L1TiB8xxvVLwbl+LTgXcIIS7fN+3DV+7xTyrvcbYLLHJD8Vmutbkp8LzUVDAjyup8Lz+SwMyDUwDEyAYWACDAMTYBiYAMPABBgGJsAwMAGGgQkwDEyAYWACDAMTYBiYAMPABBgGJsAwMAGGgQkwDEyAYWACDAMT4Dq2tkvg1uplxVrtEljqv5Tdj6nsisgqtN4lsHeA7YrIqszZJfBjzv9Q9wzwxe49Tz2WXRFZlBK7BJ4b4l4Bnhve/dBOswildgl8SvIpyY8nHrdHgC+S/FboePexKyILUHKXwHNC3DrAJcO7H3ZFpLsvKR+mU9rplgEu1TY/H1+OHBeqK7lL4DkhbhXgWuF9il0RWYDH1PlwP+XtdrpFgGu0zYfj8ZXjQjNfU+8D/laIawe4dnifkvzz+mmFNmq10IfjpXa6ZoBrts2HQwtNdzV+xDolxLUC3Cq8T/EjFgtQ+jbSW+Owna4R4BZt8+FwG4nuSi7kOCfEpedtHd77WMjBQpRYSnnOqNHitmqb98NSShZlzsMMWxseZmBxWv74M/KY8uQVNNH6OnK08SnJD1NPLrQgxMLL4IRYeBmcEAsvg9t6iIWX4W01xMLLamwtxMLL6mzlPrH7vKzW2r+JffOyemsNsfCyGWsLsfCyOWsJsfCyWaOHWHjZvFFDLLywM9otJreK4JlRQiy88Iqlh1h44YilXhO75oUTLS3EwgtnWko7rW2GiXqHWHhhpl4hFl4opPU1sWteKKzVN7FvXqikdoiFFyqr1U5rm6GR0iEWXmisVDutbYZO5oZYeKGzi0zb2vQmwguLcZXkIceD+xCba8MiXSa5TvI5yW2S77txu/vb9e41AAAAAAAAAAAAwCK9tBTw1MX5S1oyqA51bM6pi/FPHb0W7atDHZsy9XG4U0erx+bUoY5NqnmSD0+2OtQxYh2LdpX6J3k/arY96lDH5lwmuUu7E32f5L061DFIHYt3nXYneT8+qEMdg9Rxkp4X4b90OOavFeZUx3TqGFjLNmc/7tShjkHqOMm7XgdO8pjkp8bH/Jbk58JzqmM6dczUs4V+6nDMfyvMqY7p1DFTzwD/1eGYf1eYUx3TqWOmngH+cyXHVMeyjrmWOk7SM8B/dDjm7xXmVMd06hjYWm64q0Mdm1zIkaxnyZs61LFZa1l0rg51bNJaHvtShzo2bS0PXqtDHZu1lv/6RB3qAAAAAAAAAAAAAJp7acmgpYAwgFMX7VuMDwsy9bE5j8NBZxdJPmb6o3EfI8TQxdzwCjF0cpHkt5R7SP1Tkh9bFgBbVTq8QgyNlGqbtdPQWO3wCjFUUqtt1k5DZa3DK8RQSKu2WTsNhfUOrxDDRL3aZu00zLS08AoxnGgpbbN2Gs609PAKMbxilPAKMTyz1GveY8M1MZs3aniFmM0bPbxCzGatJbxCzOasLbxCzGasNbxCzOqNdqto6nCLidVZ+zevb2JWa2vhFWJWY6vhFWKGt/XwCjHDEl4hZlDCK8QMSniFmEFt5T7v3OE+MYs0ZYvPrY6biecYqrhK+2+xEeZ8a9hknEW4THKXdh/8T0l+qDBv6+v3+yTvzz7bUNh12oc3FeZO2of4wzknGmr4kjYf9uc//tQIcNL2x7gvJ55jqKZF+/zSL7e1Apy0C/Hd0bMLlT2m7of8sG0+VDPASZt2+vH10wptfE378KbCsV5SO8T/vHJcaKZWC31swUOLACd122ktNN3V+BHrlNVKrQKc1AuxH7HorvRtpLfa5kMtA5zUaafdRqK7kgs5Tg1vCh3vnAAnZUN8Hws5WIgSSynPXeTfI8BJuXbaUkoWZc7DDFOe0OkV4GR+iD3MwOJcZFqIbzLt8bqeAU7a1wtNXCV5yPEP8kPmtZG9A7zXql5o5jL//zr9Ocltku+7cbv72/XuNXMsJcBJm3p5wbveb4DJ5obuOZ+FAbkWgYEJMAxMgGFgAgwDE2AYmADDwAQYBibAMDABhoEJMAxMgGFgAgwDE2AYmADDwAQYBibAMDABhoEJMAxMgGFgAjyukltzfi04Fw0J8Lj+KjjX3wXnoiEBHtefC52LhgR4XH8UnOv3gnMBJyi1K+J97BIIXZTYFdF2J9DRnF0R7RIIndklEFbALoEwOLsEAgAAAAAAAAAAAAAAAAAAAAAAAE39B2tV13Hdy+hQAAAAAElFTkSuQmCC",d=n.p+"assets/images/expand-ba3f00f73da43d91e5b17663c4a7d108.png",h="data:image/png;base64,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";var u=n(2610),p=n(5944);function m(e){let{collapse:t,setCollapse:n}=e;const o=i.iv`
+ display: flex;
+ justify-content: end;
+ align-items: flex-end;
+ background-color: transparent;
+ margin-bottom: -10px;
+ `,s=i.iv`
+ /* position: absolute;
+ right: 0; */
+ cursor: pointer;
+ z-index: 10;
+ height: 35px;
+ width: 35px;
+ border: none;
+ background-color: none;
+ justify-self: flex-end;
+ background-color: transparent;
+ margin-right: 5px;
+ margin-bottom: -50px !important;
+ `,r=i.iv`
+ filter: invert(var(--inversion-percentage));
+ `;return(0,p.tZ)("div",{css:o,children:(0,p.tZ)("button",{css:s,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 x(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-top: -5px;
+ margin-bottom: -20px;
+ background-color: transparent;
+
+
+ `,o=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:o,src:h})})}function b(e){let{path:t,javaC:n,javaE:c,cssURL:d,javaHighlight:h,height:b,frame:g,tabs:v}=e;const[f,w]=(0,o.useState)(""),[A,j]=(0,o.useState)(""),[y,C]=(0,o.useState)(""),[B,D]=(0,o.useState)(!(!n||!c)),[S,Z]=(0,o.useState)(!1),[k,E]=(0,o.useState)({}),[L,T]=(0,o.useState)(!1),[M,O]=(0,o.useState)(0),[z,N]=(0,o.useState)(0),[V,H]=(0,o.useState)(25),[F,X]=(0,o.useState)(25),[J,G]=(0,o.useState)(0),[Y,P]=(0,o.useState)(!1),q=(0,o.useRef)(null),U=(0,o.useRef)(null);(0,o.useEffect)((()=>{c&&fetch(c).then((e=>e.text())).then((e=>{j(e);const t=new URL(c).pathname.split("/"),n=t[t.length-1];E((e=>({...e,javaFile:n})))})),n&&fetch(n).then((e=>e.text())).then((e=>{w(e)})),d&&fetch(d).then((e=>e.text())).then((e=>{C(e);const t=new URL(d).pathname.split("/"),n=t[t.length-1];E((e=>({...e,cssFile:n})))})),G(q.current.offsetWidth),console.log(J)}),[]);const W=()=>{T(!1),console.log("Stop Resizing")},R=e=>{if(L){const t=e.clientX-M;z+t>J/3&&(q.current.style.width=`${z+t}px`,U.current.style.right=(V-t<25?25:V-t)+"px",X(V-t<25?25:V-t))}},I=i.iv`
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ margin-bottom: 16px;
+ /* padding: ${"hidden"==g?"0 15px 0 15px;":"7px 15px 0 15px;"}; */
+ /* box-shadow: var(--ifm-global-shadow-lw); */
+ background-color: var(--code-display-color-background);
+ `,K=i.iv`
+ width: 100%;
+ /* padding: 1em; */
+ border: 1px solid var(--ifm-toc-border-color);
+ border-right: none;
+ background-color: transparent;
+ display: flex;
+ position: relative;
+ `,Q=i.iv`
+ min-height: 100px;
+ height: 100%;
+ width: 100%;
+ height: ${b||"100%"};
+ pointer-events: none;
+ `,_=i.iv`
+ display: flex;
+ justify-content: flex-end;
+ opacity: 0;
+ transition: opacity 0.3s ease-in-out;
+ ${S&&"opacity: 1;"};
+ margin: 10px 0 0 0;
+ position: absolute;
+ right: 25px;
+ `,$=i.iv`
+ display: flex;
+ align-items: center;
+ cursor: ew-resize;
+ border-left: 1px solid var(--ifm-toc-border-color);
+ border-right: 1px solid var(--ifm-toc-border-color);
+ background-color: var(--ifm-background-color);
+ `,ee=i.iv`
+ box-shadow: none;
+ background-color: var(--ifm-background-color);
+ margin: 0px;
+ padding: 0px;
+ border: 1px solid var(--ifm-toc-border-color);
+ border-top: none;
+ border-radius: 0px;
+ position: relative;
+
+ div{
+ /* border: none; */
+ border-color: var(--ifm-toc-border-color);
+ padding: 2px 0px 0px 0px;
+ margin: 0px
+ }
+
+ summary{
+ display: flex;
+ width: 100%;
+ justify-content: center;
+ margin: 10px 0;
+ font-weight: bold;
+ ::before{
+ left: auto;
+ margin-left: -100px;
+ --docusaurus-details-decoration-color: var(--ifm-color-primary)
+ }
+ }
+ .margin-top--md{
+ margin-top: 0px !important;
+ }
+ ul{
+ margin: -4px 0px!important;
+ }
+ `,te=i.iv`
+ /* :first-child{
+ margin-left: 1em;
+ } */
+ li[aria-selected="true"]{
+ border-color: var(--ifm-color-primary);
+ }
+
+ .tabs__item{
+ padding: 5px 20px -2px 20px;
+ border-radius: 0px;
+ }
+ `,ne=i.iv`
+ border-radius: 0px;
+ box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset;
+ `;return(0,p.BX)("div",{css:I,onMouseUp:W,onMouseLeave:W,onMouseMove:R,children:["hidden"!=g?(0,p.BX)("div",{onMouseEnter:()=>{Z(!0)},onMouseLeave:()=>Z(!1),css:K,children:[(0,p.tZ)("iframe",{onMouseUp:W,loading:"lazy",src:t,css:{...Q,pointerEvents:L?"none":"auto"},ref:q,onMouseMove:R}),(0,p.tZ)("div",{css:_,ref:U,children:(0,p.tZ)(x,{url:t})}),(0,p.tZ)("div",{css:$,onMouseDown:e=>{e.preventDefault(),T(!0),O(e.clientX),N(q.current.offsetWidth),H(F),console.log(U.current.right),console.log("Start Resizing")},children:(0,p.tZ)(u.Z,{})})]}):null,(0,p.BX)(a.Z,{css:ee,summary:(0,p.tZ)("summary",{onClick:()=>P(!Y),children:Y?"Hide Code":"Show Code"}),children:[n&&c?(0,p.tZ)(m,{collapse:B,setCollapse:D}):null,d?(0,p.BX)(s.Z,{css:te,children:[(0,p.tZ)(r.Z,{value:v?v[0]:"Java",label:v?v[0]:k.javaFile,default:!0,children:(0,p.tZ)(l.Z,{css:ne,className:"codeDemoBlock",language:"java",showLineNumbers:!0,metastring:h,children:B?f:A})}),(0,p.tZ)(r.Z,{value:v?v[1]:"CSS",label:v?v[1]:k.cssFile,children:(0,p.tZ)(l.Z,{css:ne,className:"codeDemoBlock",language:"css",showLineNumbers:!0,children:y})})]}):(0,p.tZ)(s.Z,{css:te,children:(0,p.tZ)(r.Z,{value:v?v[0]:"Java",label:v?v[0]:k.javaFile,default:!0,children:(0,p.tZ)(l.Z,{css:ne,className:"codeDemoBlock",language:"java",showLineNumbers:!0,metastring:h,children:B?f:A})})})]})]})}},3273:(e,t,n)=>{n.d(t,{Z:()=>c});var o=n(7294),i=n(917),s=n(8230),r=n(4387),a=n(6031);var l=n(5944);function c(e){let{type:t,location:n,top:c,children:d,code:h,suffix:u}=e;const[p,m]=(0,o.useState)("");(0,o.useEffect)((()=>{u||(u=""),m("https://javadoc.io/doc/org.dwcj/dwcj-"+t+"/latest/"+n+".html"+u)}),[]);const x=i.iv`
+ display: inline;
+
+ ${c&&i.iv`
+ width: 100%;
+ display: flex;
+ justify-content: flex-end;
+ margin-top: -33px;
+ margin-bottom: 25px;
+ `}
+ `,b=i.iv`
+ background-color: #0063CC;
+ padding: 0 0 0 5px;
+ :hover{
+ color: white;
+ }
+ `;return(0,l.BX)(l.HY,{children:["true"===c&&(0,l.tZ)("div",{css:x,children:(0,l.tZ)(s.Z,{title:"JavaDoc",arrow:!0,children:(0,l.tZ)(r.Z,{css:b,label:"Java API",component:"a",href:p,icon:(0,l.tZ)(a.Z,{}),clickable:!0,color:"primary",target:"_blank"})})}),"true"!==c&&!h&&(0,l.tZ)("div",{css:x,children:(0,l.tZ)("a",{href:p,target:"_blank",children:d})}),"true"!==c&&h&&(0,l.tZ)("div",{css:x,children:(0,l.tZ)("code",{children:(0,l.tZ)("a",{href:p,target:"_blank",children:d})})})]})}},1415:(e,t,n)=>{n.d(t,{Z:()=>s});n(7294);var o=n(8397),i=n(5893);function s(e){return(0,i.jsx)(i.Fragment,{children:(0,i.jsx)(o.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/5510d6bc.3e7e9541.js b/assets/js/5510d6bc.2dcab082.js
similarity index 64%
rename from assets/js/5510d6bc.3e7e9541.js
rename to assets/js/5510d6bc.2dcab082.js
index 7cc575804..d8e0fcf70 100644
--- a/assets/js/5510d6bc.3e7e9541.js
+++ b/assets/js/5510d6bc.2dcab082.js
@@ -1,16 +1,17 @@
-"use strict";(self.webpackChunkdwcj_documentation=self.webpackChunkdwcj_documentation||[]).push([[6020],{5006:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>a,default:()=>v,frontMatter:()=>o,metadata:()=>r,toc:()=>d});var c=n(5893),s=n(1151),i=n(3273);const o={sidebar_position:0,title:"CheckEvent",sidebar_class_name:"sidebar--item__hidden",slug:"CheckEvent"},a=void 0,r={id:"components/events/check-event",title:"CheckEvent",description:'A "check" event occurs when an element or checkbox is selected or marked as "checked." This event is triggered when a user interacts with a checkbox, radio button, or any other form element with a "checked" state. It typically indicates that the associated action or state has been enabled or activated. This class also inherits methods from the base Event class.',source:"@site/docs/components/events/check-event.md",sourceDirName:"components/events",slug:"/components/events/CheckEvent",permalink:"/docs/components/events/CheckEvent",draft:!1,unlisted:!1,editUrl:"https://github.com/DwcJava/dwcjava.github.io/tree/website/docs/components/events/check-event.md",tags:[],version:"current",sidebarPosition:0,frontMatter:{sidebar_position:0,title:"CheckEvent",sidebar_class_name:"sidebar--item__hidden",slug:"CheckEvent"},sidebar:"documentationSidebar",previous:{title:"ButtonClickEvent",permalink:"/docs/components/events/ButtonClickEvent"},next:{title:"ListClickEvent",permalink:"/docs/components/events/ListClickEvent"}},l={},d=[{value:"See Also",id:"see-also",level:2}];function h(e){const t={a:"a",code:"code",h2:"h2",li:"li",p:"p",ul:"ul",...(0,s.a)(),...e.components};return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(i.Z,{type:"engine",location:"org/dwcj/component/event/CheckEvent",top:"true"}),"\n",(0,c.jsxs)(t.p,{children:['A "check" event occurs when an element or checkbox is selected or marked as "checked." This event is triggered when a user interacts with a checkbox, radio button, or any other form element with a "checked" state. It typically indicates that the associated action or state has been enabled or activated. This class also inherits methods from the base ',(0,c.jsx)(t.code,{children:"Event"})," class."]}),"\n",(0,c.jsx)(t.h2,{id:"see-also",children:"See Also"}),"\n",(0,c.jsxs)(t.ul,{children:["\n",(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:"./event",children:"Event"})}),"\n",(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:"./UncheckEvent",children:"Uncheck Event"})}),"\n",(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:"./ToggleEvent",children:"Toggle Event"})}),"\n",(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:"../checkbox",children:"CheckBox"})}),"\n",(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:"../radiobutton",children:"RadioButton"})}),"\n"]})]})}function v(e={}){const{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,c.jsx)(t,{...e,children:(0,c.jsx)(h,{...e})}):h(e)}},3273:(e,t,n)=>{n.d(t,{Z:()=>l});var c=n(7294),s=n(917),i=n(8230),o=n(4387),a=n(6770);var r=n(5944);function l(e){let{type:t,location:n,top:l,children:d,code:h,suffix:v}=e;const[u,m]=(0,c.useState)("");(0,c.useEffect)((()=>{v||(v=""),m("https://javadoc.io/doc/org.dwcj/dwcj-"+t+"/latest/"+n+".html"+v)}),[]);const k=s.iv`
+"use strict";(self.webpackChunkdwcj_documentation=self.webpackChunkdwcj_documentation||[]).push([[6020],{5006:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>a,default:()=>v,frontMatter:()=>o,metadata:()=>r,toc:()=>l});var c=n(5893),s=n(1151),i=n(3273);const o={sidebar_position:0,title:"CheckEvent",sidebar_class_name:"sidebar--item__hidden",slug:"CheckEvent"},a=void 0,r={id:"components/events/check-event",title:"CheckEvent",description:'A "check" event occurs when an element or checkbox is selected or marked as "checked." This event is triggered when a user interacts with a checkbox, radio button, or any other form element with a "checked" state. It typically indicates that the associated action or state has been enabled or activated. This class also inherits methods from the base Event class.',source:"@site/docs/components/events/check-event.md",sourceDirName:"components/events",slug:"/components/events/CheckEvent",permalink:"/docs/components/events/CheckEvent",draft:!1,unlisted:!1,editUrl:"https://github.com/DwcJava/dwcjava.github.io/tree/website/docs/components/events/check-event.md",tags:[],version:"current",sidebarPosition:0,frontMatter:{sidebar_position:0,title:"CheckEvent",sidebar_class_name:"sidebar--item__hidden",slug:"CheckEvent"},sidebar:"documentationSidebar",previous:{title:"ButtonClickEvent",permalink:"/docs/components/events/ButtonClickEvent"},next:{title:"ListClickEvent",permalink:"/docs/components/events/ListClickEvent"}},d={},l=[{value:"See Also",id:"see-also",level:2}];function h(e){const t={a:"a",code:"code",h2:"h2",li:"li",p:"p",ul:"ul",...(0,s.a)(),...e.components};return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(i.Z,{type:"engine",location:"org/dwcj/component/event/CheckEvent",top:"true"}),"\n",(0,c.jsxs)(t.p,{children:['A "check" event occurs when an element or checkbox is selected or marked as "checked." This event is triggered when a user interacts with a checkbox, radio button, or any other form element with a "checked" state. It typically indicates that the associated action or state has been enabled or activated. This class also inherits methods from the base ',(0,c.jsx)(t.code,{children:"Event"})," class."]}),"\n",(0,c.jsx)(t.h2,{id:"see-also",children:"See Also"}),"\n",(0,c.jsxs)(t.ul,{children:["\n",(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:"./event",children:"Event"})}),"\n",(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:"./UncheckEvent",children:"Uncheck Event"})}),"\n",(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:"./ToggleEvent",children:"Toggle Event"})}),"\n",(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:"../checkbox",children:"CheckBox"})}),"\n",(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:"../radiobutton",children:"RadioButton"})}),"\n"]})]})}function v(e={}){const{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,c.jsx)(t,{...e,children:(0,c.jsx)(h,{...e})}):h(e)}},6031:(e,t,n)=>{var c=n(4836);t.Z=void 0;var s=c(n(4938)),i=n(5893),o=(0,s.default)((0,i.jsx)("path",{d:"m19 1-5 5v11l5-4.5V1zM1 6v14.65c0 .25.25.5.5.5.1 0 .15-.05.25-.05C3.1 20.45 5.05 20 6.5 20c1.95 0 4.05.4 5.5 1.5V6c-1.45-1.1-3.55-1.5-5.5-1.5S2.45 4.9 1 6zm22 13.5V6c-.6-.45-1.25-.75-2-1v13.5c-1.1-.35-2.3-.5-3.5-.5-1.7 0-4.15.65-5.5 1.5v2c1.35-.85 3.8-1.5 5.5-1.5 1.65 0 3.35.3 4.75 1.05.1.05.15.05.25.05.25 0 .5-.25.5-.5v-1.1z"}),"AutoStories");t.Z=o},3273:(e,t,n)=>{n.d(t,{Z:()=>d});var c=n(7294),s=n(917),i=n(8230),o=n(4387),a=n(6031);var r=n(5944);function d(e){let{type:t,location:n,top:d,children:l,code:h,suffix:v}=e;const[u,m]=(0,c.useState)("");(0,c.useEffect)((()=>{v||(v=""),m("https://javadoc.io/doc/org.dwcj/dwcj-"+t+"/latest/"+n+".html"+v)}),[]);const p=s.iv`
display: inline;
- ${l&&s.iv`
+ ${d&&s.iv`
width: 100%;
display: flex;
justify-content: flex-end;
margin-top: -33px;
margin-bottom: 25px;
`}
- `,p=s.iv`
+ `,k=s.iv`
background-color: #0063CC;
+ padding: 0 0 0 5px;
:hover{
color: white;
}
- `;return(0,r.BX)(r.HY,{children:["true"===l&&(0,r.tZ)("div",{css:k,children:(0,r.tZ)(i.Z,{title:"JavaDoc",arrow:!0,children:(0,r.tZ)(o.Z,{css:p,label:"Java API",component:"a",href:u,icon:(0,r.tZ)(a.Z,{}),clickable:!0,color:"primary",target:"_blank"})})}),"true"!==l&&!h&&(0,r.tZ)("div",{css:k,children:(0,r.tZ)("a",{href:u,target:"_blank",children:d})}),"true"!==l&&h&&(0,r.tZ)("div",{css:k,children:(0,r.tZ)("code",{children:(0,r.tZ)("a",{href:u,target:"_blank",children:d})})})]})}}}]);
\ No newline at end of file
+ `;return(0,r.BX)(r.HY,{children:["true"===d&&(0,r.tZ)("div",{css:p,children:(0,r.tZ)(i.Z,{title:"JavaDoc",arrow:!0,children:(0,r.tZ)(o.Z,{css:k,label:"Java API",component:"a",href:u,icon:(0,r.tZ)(a.Z,{}),clickable:!0,color:"primary",target:"_blank"})})}),"true"!==d&&!h&&(0,r.tZ)("div",{css:p,children:(0,r.tZ)("a",{href:u,target:"_blank",children:l})}),"true"!==d&&h&&(0,r.tZ)("div",{css:p,children:(0,r.tZ)("code",{children:(0,r.tZ)("a",{href:u,target:"_blank",children:l})})})]})}}}]);
\ No newline at end of file
diff --git a/assets/js/559b7fc6.392bc949.js b/assets/js/559b7fc6.392bc949.js
deleted file mode 100644
index f3091ff8b..000000000
--- a/assets/js/559b7fc6.392bc949.js
+++ /dev/null
@@ -1,100 +0,0 @@
-"use strict";(self.webpackChunkdwcj_documentation=self.webpackChunkdwcj_documentation||[]).push([[377],{6153:(e,t,r)=>{r.r(t),r.d(t,{assets:()=>u,contentTitle:()=>c,default:()=>p,frontMatter:()=>l,metadata:()=>d,toc:()=>h});var a=r(5893),s=r(1151),n=r(6957),o=r(7796),i=r(3273);const l={sidebar_position:90,title:"ProgressBar"},c=void 0,d={id:"components/progress-bar",title:"ProgressBar",description:"Text and String Painting",source:"@site/docs/components/progress-bar.md",sourceDirName:"components",slug:"/components/progress-bar",permalink:"/docs/components/progress-bar",draft:!1,unlisted:!1,editUrl:"https://github.com/DwcJava/dwcjava.github.io/tree/website/docs/components/progress-bar.md",tags:[],version:"current",sidebarPosition:90,frontMatter:{sidebar_position:90,title:"ProgressBar"},sidebar:"documentationSidebar",previous:{title:"ListBox",permalink:"/docs/components/list-components/listbox"},next:{title:"RadioButton",permalink:"/docs/components/radiobutton"}},u={},h=[{value:"Text and String Painting",id:"text-and-string-painting",level:3},{value:"Orientation",id:"orientation",level:3},{value:"Indeterminate",id:"indeterminate",level:3},{value:"Upper and Lower Limit",id:"upper-and-lower-limit",level:3},{value:"Themes",id:"themes",level:3},{value:"Parts and CSS Properties",id:"parts-and-css-properties",level:2}];function m(e){const t={code:"code",h2:"h2",h3:"h3",p:"p",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,s.a)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(i.Z,{type:"engine",location:"org/dwcj/component/progressbar/ProgressBar",top:"true"}),"\n",(0,a.jsx)(t.h3,{id:"text-and-string-painting",children:"Text and String Painting"}),"\n",(0,a.jsxs)(t.p,{children:['By default when created, the progress bar will display the percentage complete in the format "XX%". Using the ',(0,a.jsx)(t.code,{children:"setText()"})," method, you can use the placeholder ",(0,a.jsx)(t.code,{children:"{{x}}"})," to get the current value as a percentage. Additionally, you can use the placeholder ",(0,a.jsx)(t.code,{children:"{{value}}"})," to get the raw current value."]}),"\n",(0,a.jsx)(n.Z,{path:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.progressbardemos.ProgressbarPlaceholders",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/progressbardemos/ProgressbarPlaceholders.java",javaC:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/code_snippets/progressbar/Placeholders.txt",cssURL:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/resources/css/progressbarstyles/placeholder_styles.css",javaHighlight:"{25}",height:"100px"}),"\n",(0,a.jsx)("br",{}),"\n",(0,a.jsx)(t.h3,{id:"orientation",children:"Orientation"}),"\n",(0,a.jsxs)(t.p,{children:["The DWCJ's progress bar allows the developer to chose the direction in which the bar will fill as progress is made. The options are either filling vertically from bottom to top, or horizontally from left to right. Setting the orientation ",(0,a.jsx)("b",{children:" does not "})," automatically set the dimensions for the bar, this must be done by the developer."]}),"\n",(0,a.jsx)(n.Z,{path:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.progressbardemos.ProgressbarOrientation",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/progressbardemos/ProgressbarOrientation.java",javaC:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/code_snippets/progressbar/Orientation.txt",cssURL:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/resources/css/progressbarstyles/orientation_styles.css",javaHighlight:"{26}",height:"435px"}),"\n",(0,a.jsx)("br",{}),"\n",(0,a.jsx)(t.h3,{id:"indeterminate",children:"Indeterminate"}),"\n",(0,a.jsx)(t.p,{children:"The progress bar in the DWCJ allows for indeterminate display, displaying an animation that conveys continuous progress that is not quantified."}),"\n",(0,a.jsx)(n.Z,{path:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.progressbardemos.ProgressbarIndeterminate",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/progressbardemos/ProgressbarIndeterminate.java",javaC:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/code_snippets/progressbar/Indeterminate.txt",cssURL:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/resources/css/progressbarstyles/indeterminate_styles.css",javaHighlight:"{21}",height:"100px"}),"\n",(0,a.jsx)("br",{}),"\n",(0,a.jsx)(t.h3,{id:"upper-and-lower-limit",children:"Upper and Lower Limit"}),"\n",(0,a.jsx)(t.p,{children:"The progress bar can has minimum and maximum values that can be set, which will alter how the progress"}),"\n",(0,a.jsx)(n.Z,{path:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.progressbardemos.ProgressbarMinMax",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/progressbardemos/ProgressbarMinMax.java",javaC:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/code_snippets/progressbar/MinMax.txt",cssURL:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/resources/css/progressbarstyles/minmax_styles.css",javaHighlight:"{25-26}",height:"120px"}),"\n",(0,a.jsx)("br",{}),"\n",(0,a.jsx)(t.h3,{id:"themes",children:"Themes"}),"\n",(0,a.jsxs)(t.p,{children:["The DWCJ progress bar comes with 6 themes built in for quick styling without the use of CSS.\r\nShown below are progress bars with each of the supported Themes applied: ",(0,a.jsx)("br",{})]}),"\n",(0,a.jsx)(n.Z,{path:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.progressbardemos.ProgressbarThemes",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/progressbardemos/ProgressbarThemes.java",javaC:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/code_snippets/progressbar/Themes.txt",cssURL:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/resources/css/progressbarstyles/theme_styles.css",javaHighlight:"{25,30,35,40,45,50}",height:"300px"}),"\n",(0,a.jsxs)(t.table,{children:[(0,a.jsx)(t.thead,{children:(0,a.jsx)(t.tr,{children:(0,a.jsx)(t.th,{children:"Progress Bar Themes"})})}),(0,a.jsx)(t.tbody,{children:(0,a.jsx)(t.tr,{children:(0,a.jsx)(t.td,{children:(0,a.jsxs)("ul",{children:[(0,a.jsx)("li",{children:(0,a.jsx)(t.code,{children:"ProgressBar.Theme.DEFAULT"})}),(0,a.jsx)("li",{children:(0,a.jsx)(t.code,{children:"ProgressBar.Theme.DANGER"})}),(0,a.jsx)("li",{children:(0,a.jsx)(t.code,{children:"ProgressBar.Theme.GRAY"})}),(0,a.jsx)("li",{children:(0,a.jsx)(t.code,{children:"ProgressBar.Theme.INFO"})}),(0,a.jsx)("li",{children:(0,a.jsx)(t.code,{children:"ProgressBar.Theme.SUCCESS"})}),(0,a.jsx)("li",{children:(0,a.jsx)(t.code,{children:"ProgressBar.Theme.WARNING"})})]})})})})]}),"\n",(0,a.jsx)(t.h2,{id:"parts-and-css-properties",children:"Parts and CSS Properties"}),"\n",(0,a.jsx)(o.Z,{tag:r(5731).ko})]})}function p(e={}){const{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,a.jsx)(t,{...e,children:(0,a.jsx)(m,{...e})}):m(e)}},5162:(e,t,r)=>{r.d(t,{Z:()=>o});r(7294);var a=r(6010);const s={tabItem:"tabItem_Ymn6"};var n=r(5893);function o(e){let{children:t,hidden:r,className:o}=e;return(0,n.jsx)("div",{role:"tabpanel",className:(0,a.Z)(s.tabItem,o),hidden:r,children:t})}},4866:(e,t,r)=>{r.d(t,{Z:()=>j});var a=r(7294),s=r(6010),n=r(2466),o=r(6550),i=r(469),l=r(1980),c=r(7392),d=r(12);function u(e){return a.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,a.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 h(e){const{values:t,children:r}=e;return(0,a.useMemo)((()=>{const e=t??function(e){return u(e).map((e=>{let{props:{value:t,label:r,attributes:a,default:s}}=e;return{value:t,label:r,attributes:a,default:s}}))}(r);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,r])}function m(e){let{value:t,tabValues:r}=e;return r.some((e=>e.value===t))}function p(e){let{queryString:t=!1,groupId:r}=e;const s=(0,o.k6)(),n=function(e){let{queryString:t=!1,groupId:r}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!r)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 r??null}({queryString:t,groupId:r});return[(0,l._X)(n),(0,a.useCallback)((e=>{if(!n)return;const t=new URLSearchParams(s.location.search);t.set(n,e),s.replace({...s.location,search:t.toString()})}),[n,s])]}function b(e){const{defaultValue:t,queryString:r=!1,groupId:s}=e,n=h(e),[o,l]=(0,a.useState)((()=>function(e){let{defaultValue:t,tabValues:r}=e;if(0===r.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!m({value:t,tabValues:r}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${r.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const a=r.find((e=>e.default))??r[0];if(!a)throw new Error("Unexpected error: 0 tabValues");return a.value}({defaultValue:t,tabValues:n}))),[c,u]=p({queryString:r,groupId:s}),[b,g]=function(e){let{groupId:t}=e;const r=function(e){return e?`docusaurus.tab.${e}`:null}(t),[s,n]=(0,d.Nk)(r);return[s,(0,a.useCallback)((e=>{r&&n.set(e)}),[r,n])]}({groupId:s}),A=(()=>{const e=c??b;return m({value:e,tabValues:n})?e:null})();(0,i.Z)((()=>{A&&l(A)}),[A]);return{selectedValue:o,selectValue:(0,a.useCallback)((e=>{if(!m({value:e,tabValues:n}))throw new Error(`Can't select invalid tab value=${e}`);l(e),u(e),g(e)}),[u,g,n]),tabValues:n}}var g=r(2389);const A={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=r(5893);function w(e){let{className:t,block:r,selectedValue:a,selectValue:o,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:c}=(0,n.o5)(),d=e=>{const t=e.currentTarget,r=l.indexOf(t),s=i[r].value;s!==a&&(c(t),o(s))},u=e=>{let t=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":{const r=l.indexOf(e.currentTarget)+1;t=l[r]??l[0];break}case"ArrowLeft":{const r=l.indexOf(e.currentTarget)-1;t=l[r]??l[l.length-1];break}}t?.focus()};return(0,v.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.Z)("tabs",{"tabs--block":r},t),children:i.map((e=>{let{value:t,label:r,attributes:n}=e;return(0,v.jsx)("li",{role:"tab",tabIndex:a===t?0:-1,"aria-selected":a===t,ref:e=>l.push(e),onKeyDown:u,onClick:d,...n,className:(0,s.Z)("tabs__item",A.tabItem,n?.className,{"tabs__item--active":a===t}),children:r??t},t)}))})}function x(e){let{lazy:t,children:r,selectedValue:s}=e;const n=(Array.isArray(r)?r:[r]).filter(Boolean);if(t){const e=n.find((e=>e.props.value===s));return e?(0,a.cloneElement)(e,{className:"margin-top--md"}):null}return(0,v.jsx)("div",{className:"margin-top--md",children:n.map(((e,t)=>(0,a.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",A.tabList),children:[(0,v.jsx)(w,{...e,...t}),(0,v.jsx)(x,{...e,...t})]})}function j(e){const t=(0,g.Z)();return(0,v.jsx)(f,{...e,children:u(e.children)},String(t))}},6957:(e,t,r)=>{r.d(t,{Z:()=>g});var a=r(7294),s=r(917),n=r(4866),o=r(5162),i=r(4673),l=r(1750);const c="data:image/png;base64,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",d=r.p+"assets/images/expand-ba3f00f73da43d91e5b17663c4a7d108.png",u="data:image/png;base64,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";var h=r(2949),m=r(5944);function p(e){let{collapse:t,setCollapse:r}=e;const a=s.iv`
- display: flex;
- justify-content: end;
- margin-bottom: -30px;
- background-color: transparent;
- `,n=s.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;
- `,o=s.iv`
- filter: invert(var(--inversion-percentage));
- `;return(0,m.tZ)("div",{css:a,children:(0,m.tZ)("button",{css:n,onClick:()=>{r(!t)},children:t?(0,m.tZ)("img",{css:o,src:d,className:"icon-tabler-arrow-bar-up"}):(0,m.tZ)("img",{css:o,src:c,className:"icon-tabler-arrow-bar-down"})})})}function b(e){let{url:t}=e;const r=s.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;
-
-
- `,a=s.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,m.tZ)("button",{css:r,onClick:()=>{window.open(t,"_blank")},children:(0,m.tZ)("img",{css:a,src:u})})}function g(e){let{path:t,javaC:r,javaE:c,cssURL:d,javaHighlight:u,height:g,frame:A,tabs:v}=e;const[w,x]=(0,a.useState)(""),[f,j]=(0,a.useState)(""),[y,D]=(0,a.useState)(""),[B,S]=(0,a.useState)(!(!r||!c)),[C,Z]=(0,a.useState)(!1),[k,E]=(0,a.useState)({});(0,a.useEffect)((()=>{c&&fetch(c).then((e=>e.text())).then((e=>{j(e);const t=new URL(c).pathname.split("/"),r=t[t.length-1];E((e=>({...e,javaFile:r})))})),r&&fetch(r).then((e=>e.text())).then((e=>{x(e)})),d&&fetch(d).then((e=>e.text())).then((e=>{D(e);const t=new URL(d).pathname.split("/"),r=t[t.length-1];E((e=>({...e,cssFile:r})))}))}),[]);const L=s.iv`
- display: flex;
- flex-direction: column;
- background-color: var(--code-display-color);
- width: 100%;
- margin-bottom: 16px;
- padding: ${"hidden"==A?"0 15px 0 15px;":"7px 15px 0 15px;"};
- box-shadow: var(--ifm-global-shadow-lw);
- `,J=s.iv`
- min-height: 100px;
- height: 100%;
- width: 100%;
- height: ${g};
- `,P=s.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;
- }
- }
-
- `,T=s.iv`
- width: 100%;
- `,N=s.iv`
- display: flex;
- justify-content: flex-end;
- opacity: 0;
- transition: opacity 0.3s ease-in-out;
- ${C&&"opacity: 1;"};
-
- `;return(0,m.BX)("div",{css:L,children:["hidden"!=A?(0,m.BX)("div",{onMouseEnter:()=>{Z(!0)},onMouseLeave:()=>Z(!1),css:T,children:[(0,m.tZ)("div",{css:N,children:(0,m.tZ)(b,{url:t})}),(0,m.tZ)("iframe",{loading:"lazy",src:t+"&theme="+("dark"===(0,h.I)().colorMode?"dark":"light"),css:J})]}):null,(0,m.BX)(i.Z,{css:P,summary:(0,m.tZ)("summary",{children:"Show Code"}),children:[r&&c?(0,m.tZ)(p,{collapse:B,setCollapse:S}):null,d?(0,m.BX)(n.Z,{children:[(0,m.tZ)(o.Z,{value:v?v[0]:"Java",label:v?v[0]:k.javaFile,default:!0,children:(0,m.tZ)(l.Z,{className:"codeDemoBlock",language:"java",showLineNumbers:!0,metastring:u,children:B?w:f})}),(0,m.tZ)(o.Z,{value:v?v[1]:"CSS",label:v?v[1]:k.cssFile,children:(0,m.tZ)(l.Z,{className:"codeDemoBlock",language:"css",showLineNumbers:!0,children:y})})]}):(0,m.tZ)(n.Z,{children:(0,m.tZ)(o.Z,{value:v?v[0]:"Java",label:v?v[0]:k.javaFile,default:!0,children:(0,m.tZ)(l.Z,{className:"codeDemoBlock",language:"java",showLineNumbers:!0,metastring:u,children:B?w:f})})})]})]})}},3273:(e,t,r)=>{r.d(t,{Z:()=>c});var a=r(7294),s=r(917),n=r(8230),o=r(4387),i=r(6770);var l=r(5944);function c(e){let{type:t,location:r,top:c,children:d,code:u,suffix:h}=e;const[m,p]=(0,a.useState)("");(0,a.useEffect)((()=>{h||(h=""),p("https://javadoc.io/doc/org.dwcj/dwcj-"+t+"/latest/"+r+".html"+h)}),[]);const b=s.iv`
- display: inline;
-
- ${c&&s.iv`
- width: 100%;
- display: flex;
- justify-content: flex-end;
- margin-top: -33px;
- margin-bottom: 25px;
- `}
- `,g=s.iv`
- background-color: #0063CC;
- :hover{
- color: white;
- }
- `;return(0,l.BX)(l.HY,{children:["true"===c&&(0,l.tZ)("div",{css:b,children:(0,l.tZ)(n.Z,{title:"JavaDoc",arrow:!0,children:(0,l.tZ)(o.Z,{css:g,label:"Java API",component:"a",href:m,icon:(0,l.tZ)(i.Z,{}),clickable:!0,color:"primary",target:"_blank"})})}),"true"!==c&&!u&&(0,l.tZ)("div",{css:b,children:(0,l.tZ)("a",{href:m,target:"_blank",children:d})}),"true"!==c&&u&&(0,l.tZ)("div",{css:b,children:(0,l.tZ)("code",{children:(0,l.tZ)("a",{href:m,target:"_blank",children:d})})})]})}},1415:(e,t,r)=>{r.d(t,{Z:()=>n});r(7294);var a=r(8397),s=r(5893);function n(e){return(0,s.jsx)(s.Fragment,{children:(0,s.jsx)(a.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/559b7fc6.b43602d1.js b/assets/js/559b7fc6.b43602d1.js
new file mode 100644
index 000000000..fab24316a
--- /dev/null
+++ b/assets/js/559b7fc6.b43602d1.js
@@ -0,0 +1,146 @@
+"use strict";(self.webpackChunkdwcj_documentation=self.webpackChunkdwcj_documentation||[]).push([[377],{6153:(e,t,r)=>{r.r(t),r.d(t,{assets:()=>u,contentTitle:()=>c,default:()=>m,frontMatter:()=>l,metadata:()=>d,toc:()=>h});var a=r(5893),s=r(1151),n=r(6957),o=r(7796),i=r(3273);const l={sidebar_position:90,title:"ProgressBar"},c=void 0,d={id:"components/progress-bar",title:"ProgressBar",description:"Text and String Painting",source:"@site/docs/components/progress-bar.md",sourceDirName:"components",slug:"/components/progress-bar",permalink:"/docs/components/progress-bar",draft:!1,unlisted:!1,editUrl:"https://github.com/DwcJava/dwcjava.github.io/tree/website/docs/components/progress-bar.md",tags:[],version:"current",sidebarPosition:90,frontMatter:{sidebar_position:90,title:"ProgressBar"},sidebar:"documentationSidebar",previous:{title:"ListBox",permalink:"/docs/components/list-components/listbox"},next:{title:"RadioButton",permalink:"/docs/components/radiobutton"}},u={},h=[{value:"Text and String Painting",id:"text-and-string-painting",level:3},{value:"Orientation",id:"orientation",level:3},{value:"Indeterminate",id:"indeterminate",level:3},{value:"Upper and Lower Limit",id:"upper-and-lower-limit",level:3},{value:"Themes",id:"themes",level:3},{value:"Parts and CSS Properties",id:"parts-and-css-properties",level:2}];function p(e){const t={code:"code",h2:"h2",h3:"h3",p:"p",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,s.a)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(i.Z,{type:"engine",location:"org/dwcj/component/progressbar/ProgressBar",top:"true"}),"\n",(0,a.jsx)(t.h3,{id:"text-and-string-painting",children:"Text and String Painting"}),"\n",(0,a.jsxs)(t.p,{children:['By default when created, the progress bar will display the percentage complete in the format "XX%". Using the ',(0,a.jsx)(t.code,{children:"setText()"})," method, you can use the placeholder ",(0,a.jsx)(t.code,{children:"{{x}}"})," to get the current value as a percentage. Additionally, you can use the placeholder ",(0,a.jsx)(t.code,{children:"{{value}}"})," to get the raw current value."]}),"\n",(0,a.jsx)(n.Z,{path:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.progressbardemos.ProgressbarPlaceholders",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/progressbardemos/ProgressbarPlaceholders.java",javaC:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/code_snippets/progressbar/Placeholders.txt",cssURL:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/resources/css/progressbarstyles/placeholder_styles.css",javaHighlight:"{25}",height:"100px"}),"\n",(0,a.jsx)("br",{}),"\n",(0,a.jsx)(t.h3,{id:"orientation",children:"Orientation"}),"\n",(0,a.jsxs)(t.p,{children:["The DWCJ's progress bar allows the developer to chose the direction in which the bar will fill as progress is made. The options are either filling vertically from bottom to top, or horizontally from left to right. Setting the orientation ",(0,a.jsx)("b",{children:" does not "})," automatically set the dimensions for the bar, this must be done by the developer."]}),"\n",(0,a.jsx)(n.Z,{path:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.progressbardemos.ProgressbarOrientation",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/progressbardemos/ProgressbarOrientation.java",javaC:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/code_snippets/progressbar/Orientation.txt",cssURL:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/resources/css/progressbarstyles/orientation_styles.css",javaHighlight:"{26}",height:"435px"}),"\n",(0,a.jsx)("br",{}),"\n",(0,a.jsx)(t.h3,{id:"indeterminate",children:"Indeterminate"}),"\n",(0,a.jsx)(t.p,{children:"The progress bar in the DWCJ allows for indeterminate display, displaying an animation that conveys continuous progress that is not quantified."}),"\n",(0,a.jsx)(n.Z,{path:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.progressbardemos.ProgressbarIndeterminate",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/progressbardemos/ProgressbarIndeterminate.java",javaC:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/code_snippets/progressbar/Indeterminate.txt",cssURL:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/resources/css/progressbarstyles/indeterminate_styles.css",javaHighlight:"{21}",height:"100px"}),"\n",(0,a.jsx)("br",{}),"\n",(0,a.jsx)(t.h3,{id:"upper-and-lower-limit",children:"Upper and Lower Limit"}),"\n",(0,a.jsx)(t.p,{children:"The progress bar can has minimum and maximum values that can be set, which will alter how the progress"}),"\n",(0,a.jsx)(n.Z,{path:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.progressbardemos.ProgressbarMinMax",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/progressbardemos/ProgressbarMinMax.java",javaC:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/code_snippets/progressbar/MinMax.txt",cssURL:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/resources/css/progressbarstyles/minmax_styles.css",javaHighlight:"{25-26}",height:"120px"}),"\n",(0,a.jsx)("br",{}),"\n",(0,a.jsx)(t.h3,{id:"themes",children:"Themes"}),"\n",(0,a.jsxs)(t.p,{children:["The DWCJ progress bar comes with 6 themes built in for quick styling without the use of CSS.\r\nShown below are progress bars with each of the supported Themes applied: ",(0,a.jsx)("br",{})]}),"\n",(0,a.jsx)(n.Z,{path:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.progressbardemos.ProgressbarThemes",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/progressbardemos/ProgressbarThemes.java",javaC:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/code_snippets/progressbar/Themes.txt",cssURL:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/resources/css/progressbarstyles/theme_styles.css",javaHighlight:"{25,30,35,40,45,50}",height:"300px"}),"\n",(0,a.jsxs)(t.table,{children:[(0,a.jsx)(t.thead,{children:(0,a.jsx)(t.tr,{children:(0,a.jsx)(t.th,{children:"Progress Bar Themes"})})}),(0,a.jsx)(t.tbody,{children:(0,a.jsx)(t.tr,{children:(0,a.jsx)(t.td,{children:(0,a.jsxs)("ul",{children:[(0,a.jsx)("li",{children:(0,a.jsx)(t.code,{children:"ProgressBar.Theme.DEFAULT"})}),(0,a.jsx)("li",{children:(0,a.jsx)(t.code,{children:"ProgressBar.Theme.DANGER"})}),(0,a.jsx)("li",{children:(0,a.jsx)(t.code,{children:"ProgressBar.Theme.GRAY"})}),(0,a.jsx)("li",{children:(0,a.jsx)(t.code,{children:"ProgressBar.Theme.INFO"})}),(0,a.jsx)("li",{children:(0,a.jsx)(t.code,{children:"ProgressBar.Theme.SUCCESS"})}),(0,a.jsx)("li",{children:(0,a.jsx)(t.code,{children:"ProgressBar.Theme.WARNING"})})]})})})})]}),"\n",(0,a.jsx)(t.h2,{id:"parts-and-css-properties",children:"Parts and CSS Properties"}),"\n",(0,a.jsx)(o.Z,{tag:r(5731).ko})]})}function m(e={}){const{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,a.jsx)(t,{...e,children:(0,a.jsx)(p,{...e})}):p(e)}},6031:(e,t,r)=>{var a=r(4836);t.Z=void 0;var s=a(r(4938)),n=r(5893),o=(0,s.default)((0,n.jsx)("path",{d:"m19 1-5 5v11l5-4.5V1zM1 6v14.65c0 .25.25.5.5.5.1 0 .15-.05.25-.05C3.1 20.45 5.05 20 6.5 20c1.95 0 4.05.4 5.5 1.5V6c-1.45-1.1-3.55-1.5-5.5-1.5S2.45 4.9 1 6zm22 13.5V6c-.6-.45-1.25-.75-2-1v13.5c-1.1-.35-2.3-.5-3.5-.5-1.7 0-4.15.65-5.5 1.5v2c1.35-.85 3.8-1.5 5.5-1.5 1.65 0 3.35.3 4.75 1.05.1.05.15.05.25.05.25 0 .5-.25.5-.5v-1.1z"}),"AutoStories");t.Z=o},2610:(e,t,r)=>{var a=r(4836);t.Z=void 0;var s=a(r(4938)),n=r(5893),o=(0,s.default)((0,n.jsx)("path",{d:"M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"}),"DragIndicator");t.Z=o},5162:(e,t,r)=>{r.d(t,{Z:()=>o});r(7294);var a=r(6010);const s={tabItem:"tabItem_Ymn6"};var n=r(5893);function o(e){let{children:t,hidden:r,className:o}=e;return(0,n.jsx)("div",{role:"tabpanel",className:(0,a.Z)(s.tabItem,o),hidden:r,children:t})}},4866:(e,t,r)=>{r.d(t,{Z:()=>j});var a=r(7294),s=r(6010),n=r(2466),o=r(6550),i=r(469),l=r(1980),c=r(7392),d=r(12);function u(e){return a.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,a.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 h(e){const{values:t,children:r}=e;return(0,a.useMemo)((()=>{const e=t??function(e){return u(e).map((e=>{let{props:{value:t,label:r,attributes:a,default:s}}=e;return{value:t,label:r,attributes:a,default:s}}))}(r);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,r])}function p(e){let{value:t,tabValues:r}=e;return r.some((e=>e.value===t))}function m(e){let{queryString:t=!1,groupId:r}=e;const s=(0,o.k6)(),n=function(e){let{queryString:t=!1,groupId:r}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!r)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 r??null}({queryString:t,groupId:r});return[(0,l._X)(n),(0,a.useCallback)((e=>{if(!n)return;const t=new URLSearchParams(s.location.search);t.set(n,e),s.replace({...s.location,search:t.toString()})}),[n,s])]}function b(e){const{defaultValue:t,queryString:r=!1,groupId:s}=e,n=h(e),[o,l]=(0,a.useState)((()=>function(e){let{defaultValue:t,tabValues:r}=e;if(0===r.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!p({value:t,tabValues:r}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${r.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const a=r.find((e=>e.default))??r[0];if(!a)throw new Error("Unexpected error: 0 tabValues");return a.value}({defaultValue:t,tabValues:n}))),[c,u]=m({queryString:r,groupId:s}),[b,g]=function(e){let{groupId:t}=e;const r=function(e){return e?`docusaurus.tab.${e}`:null}(t),[s,n]=(0,d.Nk)(r);return[s,(0,a.useCallback)((e=>{r&&n.set(e)}),[r,n])]}({groupId:s}),A=(()=>{const e=c??b;return p({value:e,tabValues:n})?e:null})();(0,i.Z)((()=>{A&&l(A)}),[A]);return{selectedValue:o,selectValue:(0,a.useCallback)((e=>{if(!p({value:e,tabValues:n}))throw new Error(`Can't select invalid tab value=${e}`);l(e),u(e),g(e)}),[u,g,n]),tabValues:n}}var g=r(2389);const A={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=r(5893);function x(e){let{className:t,block:r,selectedValue:a,selectValue:o,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:c}=(0,n.o5)(),d=e=>{const t=e.currentTarget,r=l.indexOf(t),s=i[r].value;s!==a&&(c(t),o(s))},u=e=>{let t=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":{const r=l.indexOf(e.currentTarget)+1;t=l[r]??l[0];break}case"ArrowLeft":{const r=l.indexOf(e.currentTarget)-1;t=l[r]??l[l.length-1];break}}t?.focus()};return(0,v.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.Z)("tabs",{"tabs--block":r},t),children:i.map((e=>{let{value:t,label:r,attributes:n}=e;return(0,v.jsx)("li",{role:"tab",tabIndex:a===t?0:-1,"aria-selected":a===t,ref:e=>l.push(e),onKeyDown:u,onClick:d,...n,className:(0,s.Z)("tabs__item",A.tabItem,n?.className,{"tabs__item--active":a===t}),children:r??t},t)}))})}function w(e){let{lazy:t,children:r,selectedValue:s}=e;const n=(Array.isArray(r)?r:[r]).filter(Boolean);if(t){const e=n.find((e=>e.props.value===s));return e?(0,a.cloneElement)(e,{className:"margin-top--md"}):null}return(0,v.jsx)("div",{className:"margin-top--md",children:n.map(((e,t)=>(0,a.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",A.tabList),children:[(0,v.jsx)(x,{...e,...t}),(0,v.jsx)(w,{...e,...t})]})}function j(e){const t=(0,g.Z)();return(0,v.jsx)(f,{...e,children:u(e.children)},String(t))}},6957:(e,t,r)=>{r.d(t,{Z:()=>g});var a=r(7294),s=r(917),n=r(4866),o=r(5162),i=r(4673),l=r(1750);const c="data:image/png;base64,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",d=r.p+"assets/images/expand-ba3f00f73da43d91e5b17663c4a7d108.png",u="data:image/png;base64,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";var h=r(2610),p=r(5944);function m(e){let{collapse:t,setCollapse:r}=e;const a=s.iv`
+ display: flex;
+ justify-content: end;
+ align-items: flex-end;
+ background-color: transparent;
+ margin-bottom: -10px;
+ `,n=s.iv`
+ /* position: absolute;
+ right: 0; */
+ cursor: pointer;
+ z-index: 10;
+ height: 35px;
+ width: 35px;
+ border: none;
+ background-color: none;
+ justify-self: flex-end;
+ background-color: transparent;
+ margin-right: 5px;
+ margin-bottom: -50px !important;
+ `,o=s.iv`
+ filter: invert(var(--inversion-percentage));
+ `;return(0,p.tZ)("div",{css:a,children:(0,p.tZ)("button",{css:n,onClick:()=>{r(!t)},children:t?(0,p.tZ)("img",{css:o,src:d,className:"icon-tabler-arrow-bar-up"}):(0,p.tZ)("img",{css:o,src:c,className:"icon-tabler-arrow-bar-down"})})})}function b(e){let{url:t}=e;const r=s.iv`
+ position: relative;
+ cursor: pointer;
+ z-index: 10;
+ height: 35px;
+ width: 35px;
+ border: none;
+ background-color: none;
+ justify-self: flex-end;
+ margin-top: -5px;
+ margin-bottom: -20px;
+ background-color: transparent;
+
+
+ `,a=s.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:r,onClick:()=>{window.open(t,"_blank")},children:(0,p.tZ)("img",{css:a,src:u})})}function g(e){let{path:t,javaC:r,javaE:c,cssURL:d,javaHighlight:u,height:g,frame:A,tabs:v}=e;const[x,w]=(0,a.useState)(""),[f,j]=(0,a.useState)(""),[y,D]=(0,a.useState)(""),[S,B]=(0,a.useState)(!(!r||!c)),[Z,C]=(0,a.useState)(!1),[k,E]=(0,a.useState)({}),[L,J]=(0,a.useState)(!1),[P,T]=(0,a.useState)(0),[M,N]=(0,a.useState)(0),[z,O]=(0,a.useState)(25),[H,V]=(0,a.useState)(25),[X,F]=(0,a.useState)(0),[G,Y]=(0,a.useState)(!1),I=(0,a.useRef)(null),R=(0,a.useRef)(null);(0,a.useEffect)((()=>{c&&fetch(c).then((e=>e.text())).then((e=>{j(e);const t=new URL(c).pathname.split("/"),r=t[t.length-1];E((e=>({...e,javaFile:r})))})),r&&fetch(r).then((e=>e.text())).then((e=>{w(e)})),d&&fetch(d).then((e=>e.text())).then((e=>{D(e);const t=new URL(d).pathname.split("/"),r=t[t.length-1];E((e=>({...e,cssFile:r})))})),F(I.current.offsetWidth),console.log(X)}),[]);const W=()=>{J(!1),console.log("Stop Resizing")},U=e=>{if(L){const t=e.clientX-P;M+t>X/3&&(I.current.style.width=`${M+t}px`,R.current.style.right=(z-t<25?25:z-t)+"px",V(z-t<25?25:z-t))}},q=s.iv`
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ margin-bottom: 16px;
+ /* padding: ${"hidden"==A?"0 15px 0 15px;":"7px 15px 0 15px;"}; */
+ /* box-shadow: var(--ifm-global-shadow-lw); */
+ background-color: var(--code-display-color-background);
+ `,K=s.iv`
+ width: 100%;
+ /* padding: 1em; */
+ border: 1px solid var(--ifm-toc-border-color);
+ border-right: none;
+ background-color: transparent;
+ display: flex;
+ position: relative;
+ `,Q=s.iv`
+ min-height: 100px;
+ height: 100%;
+ width: 100%;
+ height: ${g||"100%"};
+ pointer-events: none;
+ `,_=s.iv`
+ display: flex;
+ justify-content: flex-end;
+ opacity: 0;
+ transition: opacity 0.3s ease-in-out;
+ ${Z&&"opacity: 1;"};
+ margin: 10px 0 0 0;
+ position: absolute;
+ right: 25px;
+ `,$=s.iv`
+ display: flex;
+ align-items: center;
+ cursor: ew-resize;
+ border-left: 1px solid var(--ifm-toc-border-color);
+ border-right: 1px solid var(--ifm-toc-border-color);
+ background-color: var(--ifm-background-color);
+ `,ee=s.iv`
+ box-shadow: none;
+ background-color: var(--ifm-background-color);
+ margin: 0px;
+ padding: 0px;
+ border: 1px solid var(--ifm-toc-border-color);
+ border-top: none;
+ border-radius: 0px;
+ position: relative;
+
+ div{
+ /* border: none; */
+ border-color: var(--ifm-toc-border-color);
+ padding: 2px 0px 0px 0px;
+ margin: 0px
+ }
+
+ summary{
+ display: flex;
+ width: 100%;
+ justify-content: center;
+ margin: 10px 0;
+ font-weight: bold;
+ ::before{
+ left: auto;
+ margin-left: -100px;
+ --docusaurus-details-decoration-color: var(--ifm-color-primary)
+ }
+ }
+ .margin-top--md{
+ margin-top: 0px !important;
+ }
+ ul{
+ margin: -4px 0px!important;
+ }
+ `,te=s.iv`
+ /* :first-child{
+ margin-left: 1em;
+ } */
+ li[aria-selected="true"]{
+ border-color: var(--ifm-color-primary);
+ }
+
+ .tabs__item{
+ padding: 5px 20px -2px 20px;
+ border-radius: 0px;
+ }
+ `,re=s.iv`
+ border-radius: 0px;
+ box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset;
+ `;return(0,p.BX)("div",{css:q,onMouseUp:W,onMouseLeave:W,onMouseMove:U,children:["hidden"!=A?(0,p.BX)("div",{onMouseEnter:()=>{C(!0)},onMouseLeave:()=>C(!1),css:K,children:[(0,p.tZ)("iframe",{onMouseUp:W,loading:"lazy",src:t,css:{...Q,pointerEvents:L?"none":"auto"},ref:I,onMouseMove:U}),(0,p.tZ)("div",{css:_,ref:R,children:(0,p.tZ)(b,{url:t})}),(0,p.tZ)("div",{css:$,onMouseDown:e=>{e.preventDefault(),J(!0),T(e.clientX),N(I.current.offsetWidth),O(H),console.log(R.current.right),console.log("Start Resizing")},children:(0,p.tZ)(h.Z,{})})]}):null,(0,p.BX)(i.Z,{css:ee,summary:(0,p.tZ)("summary",{onClick:()=>Y(!G),children:G?"Hide Code":"Show Code"}),children:[r&&c?(0,p.tZ)(m,{collapse:S,setCollapse:B}):null,d?(0,p.BX)(n.Z,{css:te,children:[(0,p.tZ)(o.Z,{value:v?v[0]:"Java",label:v?v[0]:k.javaFile,default:!0,children:(0,p.tZ)(l.Z,{css:re,className:"codeDemoBlock",language:"java",showLineNumbers:!0,metastring:u,children:S?x:f})}),(0,p.tZ)(o.Z,{value:v?v[1]:"CSS",label:v?v[1]:k.cssFile,children:(0,p.tZ)(l.Z,{css:re,className:"codeDemoBlock",language:"css",showLineNumbers:!0,children:y})})]}):(0,p.tZ)(n.Z,{css:te,children:(0,p.tZ)(o.Z,{value:v?v[0]:"Java",label:v?v[0]:k.javaFile,default:!0,children:(0,p.tZ)(l.Z,{css:re,className:"codeDemoBlock",language:"java",showLineNumbers:!0,metastring:u,children:S?x:f})})})]})]})}},3273:(e,t,r)=>{r.d(t,{Z:()=>c});var a=r(7294),s=r(917),n=r(8230),o=r(4387),i=r(6031);var l=r(5944);function c(e){let{type:t,location:r,top:c,children:d,code:u,suffix:h}=e;const[p,m]=(0,a.useState)("");(0,a.useEffect)((()=>{h||(h=""),m("https://javadoc.io/doc/org.dwcj/dwcj-"+t+"/latest/"+r+".html"+h)}),[]);const b=s.iv`
+ display: inline;
+
+ ${c&&s.iv`
+ width: 100%;
+ display: flex;
+ justify-content: flex-end;
+ margin-top: -33px;
+ margin-bottom: 25px;
+ `}
+ `,g=s.iv`
+ background-color: #0063CC;
+ padding: 0 0 0 5px;
+ :hover{
+ color: white;
+ }
+ `;return(0,l.BX)(l.HY,{children:["true"===c&&(0,l.tZ)("div",{css:b,children:(0,l.tZ)(n.Z,{title:"JavaDoc",arrow:!0,children:(0,l.tZ)(o.Z,{css:g,label:"Java API",component:"a",href:p,icon:(0,l.tZ)(i.Z,{}),clickable:!0,color:"primary",target:"_blank"})})}),"true"!==c&&!u&&(0,l.tZ)("div",{css:b,children:(0,l.tZ)("a",{href:p,target:"_blank",children:d})}),"true"!==c&&u&&(0,l.tZ)("div",{css:b,children:(0,l.tZ)("code",{children:(0,l.tZ)("a",{href:p,target:"_blank",children:d})})})]})}},1415:(e,t,r)=>{r.d(t,{Z:()=>n});r(7294);var a=r(8397),s=r(5893);function n(e){return(0,s.jsx)(s.Fragment,{children:(0,s.jsx)(a.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/56ad8461.08b7b3d0.js b/assets/js/56ad8461.08b7b3d0.js
deleted file mode 100644
index f7d95c209..000000000
--- a/assets/js/56ad8461.08b7b3d0.js
+++ /dev/null
@@ -1,100 +0,0 @@
-"use strict";(self.webpackChunkdwcj_documentation=self.webpackChunkdwcj_documentation||[]).push([[2565],{61:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>o,default:()=>m,frontMatter:()=>l,metadata:()=>c,toc:()=>h});var a=n(5893),s=n(1151),r=n(6957),i=n(3273);const l={sidebar_position:50,title:"Label"},o=void 0,c={id:"components/label",title:"Label",description:"The Label class is used to create a label object which shows static text.",source:"@site/docs/components/label.md",sourceDirName:"components",slug:"/components/label",permalink:"/docs/components/label",draft:!1,unlisted:!1,editUrl:"https://github.com/DwcJava/dwcjava.github.io/tree/website/docs/components/label.md",tags:[],version:"current",sidebarPosition:50,frontMatter:{sidebar_position:50,title:"Label"},sidebar:"documentationSidebar",previous:{title:"TimeField",permalink:"/docs/components/fields/timefield"},next:{title:"Lists",permalink:"/docs/components/list-components/lists"}},d={},h=[{value:"Usages",id:"usages",level:2},{value:"Constructors",id:"constructors",level:2},{value:"HTML Injection",id:"html-injection",level:2},{value:"Line Wrapping",id:"line-wrapping",level:2},{value:"Alignment",id:"alignment",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:"Example",id:"example",level:2}];function u(e){const t={a:"a",admonition:"admonition",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",...(0,s.a)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(i.Z,{type:"engine",location:"org/dwcj/component/label/Label",top:"true"}),"\n",(0,a.jsxs)(t.p,{children:["The ",(0,a.jsx)(t.code,{children:"Label"})," class is used to create a label object which shows static text."]}),"\n",(0,a.jsx)(t.h2,{id:"usages",children:"Usages"}),"\n",(0,a.jsx)(t.p,{children:"The Label component is a static text UI component that is commonly used in applications to display descriptive or informational text. It serves as a visual element that provides context, identifies UI elements, or presents information to the user. The Label component is highly versatile and can be used in various scenarios throughout an application. Some common usages of the Label component include:"}),"\n",(0,a.jsxs)(t.ol,{children:["\n",(0,a.jsxs)(t.li,{children:["\n",(0,a.jsxs)(t.p,{children:[(0,a.jsx)(t.strong,{children:"Form Labels"}),": Labels are frequently used alongside form fields to describe the purpose or expected input for a particular field. They improve usability and accessibility by providing clear instructions or hints to users. For example, you can use Labels in registration forms, contact forms, or search forms to identify input fields like name, email, address, or search query."]}),"\n"]}),"\n",(0,a.jsxs)(t.li,{children:["\n",(0,a.jsxs)(t.p,{children:[(0,a.jsx)(t.strong,{children:"Data Display"}),": Labels are useful for displaying static information or labeling data elements in different sections of an application. They can be used to present user profiles, product details, or any other information that needs proper identification or description."]}),"\n"]}),"\n",(0,a.jsxs)(t.li,{children:["\n",(0,a.jsxs)(t.p,{children:[(0,a.jsx)(t.strong,{children:"Navigation"}),": Labels can be employed in navigation menus, sidebars, or tabs to indicate the purpose or destination of a particular navigation item. They help users understand the function of each navigation option and improve the overall user experience."]}),"\n"]}),"\n",(0,a.jsxs)(t.li,{children:["\n",(0,a.jsxs)(t.p,{children:[(0,a.jsx)(t.strong,{children:"Headers and Section Titles"}),": Labels can be used as section titles or headers to organize content and provide clear delineation between different sections or blocks of information. They enhance the readability and structure of the user interface."]}),"\n"]}),"\n"]}),"\n",(0,a.jsx)(t.h2,{id:"constructors",children:"Constructors"}),"\n",(0,a.jsxs)(t.p,{children:["The ",(0,a.jsx)(t.code,{children:"Label"})," class has three constructors:"]}),"\n",(0,a.jsxs)(t.ol,{children:["\n",(0,a.jsxs)(t.li,{children:[(0,a.jsx)(t.code,{children:"Label()"}),": Creates an empty label."]}),"\n",(0,a.jsxs)(t.li,{children:[(0,a.jsx)(t.code,{children:"Label(String text)"}),": Creates a label with the specified text."]}),"\n",(0,a.jsxs)(t.li,{children:[(0,a.jsx)(t.code,{children:"Label(String text, boolean wrap)"}),": Creates a label with the specified text and sets whether or not the text should be wrapped. More detail about line wrapping can be found ",(0,a.jsx)(t.a,{href:"#line-wrapping",children:"here."})]}),"\n"]}),"\n",(0,a.jsx)(t.p,{children:"Here's an example of how to create a Label object using each constructor:"}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-java",children:'// Creates an empty label.\r\nLabel emptyLabel = new Label();\r\n\r\n// Creates a label with the specified text.\r\nLabel textLabel = new Label("Hello, world!");\r\n\r\n// Creates a label with the specified text and sets whether or not the text should be wrapped.\r\nLabel wrappedLabel = new Label("Lorem ipsum dolor sit amet, consectetur adipiscing elit.", true);\r\n\n'})}),"\n",(0,a.jsx)(t.h2,{id:"html-injection",children:"HTML Injection"}),"\n",(0,a.jsx)(t.p,{children:"In addition to using the label as static text, it can also be used as an HTML tag within your code. Simply set the label's content to the desired HTML tag with the various attributes, class names, etc, and the label will be replaced with the desired HTML element."}),"\n",(0,a.jsx)(r.Z,{path:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.labeldemos.LabelDemo",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/labeldemos/LabelDemo.java",javaC:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/code_snippets/label/Demo.txt",cssURL:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/resources/css/labelstyles/text_styles.css",javaHighlight:"{16-18}",height:"250px"}),"\n",(0,a.jsx)(t.h2,{id:"line-wrapping",children:"Line Wrapping"}),"\n",(0,a.jsxs)(t.p,{children:["The line wrap method for a ",(0,a.jsx)(t.code,{children:"Label"})," component sets whether or not the component automatically wraps the text within the label onto multiple lines when it exceeds the available width, ensuring that the entire text is visible without overflowing the container. Setting this value to false will truncate any text that falls out of the component's bounds. This helps manipulate readability and truncation of longer text content within the label. The default value for lineWrap is ",(0,a.jsx)(t.code,{children:"true"}),"."]}),"\n",(0,a.jsx)(r.Z,{path:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.labeldemos.LabelLineWrap",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/labeldemos/LabelLineWrap.java",cssURL:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/resources/css/labelstyles/wrap_styles.css",javaHighlight:"{16-18}",height:"250px"}),"\n",(0,a.jsx)("br",{}),"\n",(0,a.jsx)(t.h2,{id:"alignment",children:"Alignment"}),"\n",(0,a.jsxs)(t.p,{children:["The ",(0,a.jsx)(t.code,{children:"Label"})," class implements the TextAlignable interface, which allows you to set the text alignment of the label. The possible alignment values are Alignment.LEFT, Alignment.MIDDLE, and Alignment.RIGHT. To set the alignment, use the setTextAlignment method:"]}),"\n",(0,a.jsx)(r.Z,{path:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.labeldemos.LabelAlignment",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/labeldemos/LabelAlignment.java",javaC:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/code_snippets/label/Alignment.txt",cssURL:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/resources/css/labelstyles/alignment_styles.css",height:"450px"}),"\n",(0,a.jsx)(t.h2,{id:"events",children:"Events"}),"\n",(0,a.jsxs)(t.p,{children:["The ",(0,a.jsx)(t.code,{children:"Label"})," class provides methods to add and remove event listeners for the following events:"]}),"\n",(0,a.jsxs)(t.table,{children:[(0,a.jsx)(t.thead,{children:(0,a.jsxs)(t.tr,{children:[(0,a.jsx)(t.th,{style:{textAlign:"center"},children:"Events"}),(0,a.jsx)(t.th,{children:"Description"})]})}),(0,a.jsxs)(t.tbody,{children:[(0,a.jsxs)(t.tr,{children:[(0,a.jsx)(t.td,{style:{textAlign:"center"},children:(0,a.jsx)(i.Z,{type:"engine",location:"org/dwcj/component/event/MouseEnterEvent",code:"true",children:"MouseEnterEvent"})}),(0,a.jsx)(t.td,{children:"An event that is triggered when the mouse cursor enters the boundaries of a component."})]}),(0,a.jsxs)(t.tr,{children:[(0,a.jsx)(t.td,{style:{textAlign:"center"},children:(0,a.jsx)(i.Z,{type:"engine",location:"org/dwcj/component/event/MouseExitEvent",code:"true",children:"MouseExitEvent"})}),(0,a.jsx)(t.td,{children:"An event that is triggered when the mouse cursor exits the boundaries of a component."})]}),(0,a.jsxs)(t.tr,{children:[(0,a.jsx)(t.td,{style:{textAlign:"center"},children:(0,a.jsx)(i.Z,{type:"engine",location:"org/dwcj/component/event/RightMouseDownEvent",code:"true",children:"RightMouseDownEvent"})}),(0,a.jsx)(t.td,{children:"An event that is triggered when the user presses the right mouse button while the cursor is over a component."})]})]})]}),"\n",(0,a.jsx)(t.h3,{id:"adding-events",children:"Adding Events"}),"\n",(0,a.jsx)(t.p,{children:"To add an event listener, use the appropriate method:"}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-java",children:"myLabel.addMouseEnterListener( e -> {\r\n //Executed when the event fires\r\n});\n"})}),"\n",(0,a.jsxs)(t.p,{children:["Additional syntactic sugar methods, or aliases, have been added to allow for alternative addition of events by using the ",(0,a.jsx)(t.code,{children:"on"})," prefix followed by the event, such as:"]}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-java",children:"myLabel.onMouseEnter( e -> {\r\n //Executed when the event fires\r\n});\n"})}),"\n",(0,a.jsx)(t.admonition,{type:"tip",children:(0,a.jsx)(t.p,{children:"Using the event payload that comes with various events to attain information reduces the number of round trips made when instead querying the component for the required information."})}),"\n",(0,a.jsx)(t.h3,{id:"removing-events",children:"Removing Events"}),"\n",(0,a.jsx)(t.p,{children:"To remove an event listener, use the appropriate method:"}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-java",children:"myLabel.removeMouseEnterListener(listener);\n"})}),"\n",(0,a.jsx)(t.h2,{id:"example",children:"Example"}),"\n",(0,a.jsxs)(t.p,{children:["Here is an example of how to use the ",(0,a.jsx)(t.code,{children:"Label"})," class to create a simple UI component which allows the user to hover over the text to change the message:"]}),"\n",(0,a.jsx)(r.Z,{path:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.labeldemos.LabelSample",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/labeldemos/LabelSample.java",javaC:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/code_snippets/label/Sample.txt",cssURL:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/resources/css/labelstyles/text_styles.css",javaHighlight:"{43-45}"}),"\n",(0,a.jsx)("br",{})]})}function m(e={}){const{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,a.jsx)(t,{...e,children:(0,a.jsx)(u,{...e})}):u(e)}},5162:(e,t,n)=>{n.d(t,{Z:()=>i});n(7294);var a=n(6010);const s={tabItem:"tabItem_Ymn6"};var r=n(5893);function i(e){let{children:t,hidden:n,className:i}=e;return(0,r.jsx)("div",{role:"tabpanel",className:(0,a.Z)(s.tabItem,i),hidden:n,children:t})}},4866:(e,t,n)=>{n.d(t,{Z:()=>j});var a=n(7294),s=n(6010),r=n(2466),i=n(6550),l=n(469),o=n(1980),c=n(7392),d=n(12);function h(e){return a.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,a.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,a.useMemo)((()=>{const e=t??function(e){return h(e).map((e=>{let{props:{value:t,label:n,attributes:a,default:s}}=e;return{value:t,label:n,attributes:a,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,i.k6)(),r=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,o._X)(r),(0,a.useCallback)((e=>{if(!r)return;const t=new URLSearchParams(s.location.search);t.set(r,e),s.replace({...s.location,search:t.toString()})}),[r,s])]}function b(e){const{defaultValue:t,queryString:n=!1,groupId:s}=e,r=u(e),[i,o]=(0,a.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 a=n.find((e=>e.default))??n[0];if(!a)throw new Error("Unexpected error: 0 tabValues");return a.value}({defaultValue:t,tabValues:r}))),[c,h]=p({queryString:n,groupId:s}),[b,v]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[s,r]=(0,d.Nk)(n);return[s,(0,a.useCallback)((e=>{n&&r.set(e)}),[n,r])]}({groupId:s}),g=(()=>{const e=c??b;return m({value:e,tabValues:r})?e:null})();(0,l.Z)((()=>{g&&o(g)}),[g]);return{selectedValue:i,selectValue:(0,a.useCallback)((e=>{if(!m({value:e,tabValues:r}))throw new Error(`Can't select invalid tab value=${e}`);o(e),h(e),v(e)}),[h,v,r]),tabValues:r}}var v=n(2389);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var A=n(5893);function x(e){let{className:t,block:n,selectedValue:a,selectValue:i,tabValues:l}=e;const o=[],{blockElementScrollPositionUntilNextRender:c}=(0,r.o5)(),d=e=>{const t=e.currentTarget,n=o.indexOf(t),s=l[n].value;s!==a&&(c(t),i(s))},h=e=>{let t=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":{const n=o.indexOf(e.currentTarget)+1;t=o[n]??o[0];break}case"ArrowLeft":{const n=o.indexOf(e.currentTarget)-1;t=o[n]??o[o.length-1];break}}t?.focus()};return(0,A.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.Z)("tabs",{"tabs--block":n},t),children:l.map((e=>{let{value:t,label:n,attributes:r}=e;return(0,A.jsx)("li",{role:"tab",tabIndex:a===t?0:-1,"aria-selected":a===t,ref:e=>o.push(e),onKeyDown:h,onClick:d,...r,className:(0,s.Z)("tabs__item",g.tabItem,r?.className,{"tabs__item--active":a===t}),children:n??t},t)}))})}function w(e){let{lazy:t,children:n,selectedValue:s}=e;const r=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=r.find((e=>e.props.value===s));return e?(0,a.cloneElement)(e,{className:"margin-top--md"}):null}return(0,A.jsx)("div",{className:"margin-top--md",children:r.map(((e,t)=>(0,a.cloneElement)(e,{key:t,hidden:e.props.value!==s})))})}function f(e){const t=b(e);return(0,A.jsxs)("div",{className:(0,s.Z)("tabs-container",g.tabList),children:[(0,A.jsx)(x,{...e,...t}),(0,A.jsx)(w,{...e,...t})]})}function j(e){const t=(0,v.Z)();return(0,A.jsx)(f,{...e,children:h(e.children)},String(t))}},6957:(e,t,n)=>{n.d(t,{Z:()=>v});var a=n(7294),s=n(917),r=n(4866),i=n(5162),l=n(4673),o=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 a=s.iv`
- display: flex;
- justify-content: end;
- margin-bottom: -30px;
- background-color: transparent;
- `,r=s.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;
- `,i=s.iv`
- filter: invert(var(--inversion-percentage));
- `;return(0,m.tZ)("div",{css:a,children:(0,m.tZ)("button",{css:r,onClick:()=>{n(!t)},children:t?(0,m.tZ)("img",{css:i,src:d,className:"icon-tabler-arrow-bar-up"}):(0,m.tZ)("img",{css:i,src:c,className:"icon-tabler-arrow-bar-down"})})})}function b(e){let{url:t}=e;const n=s.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;
-
-
- `,a=s.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,m.tZ)("button",{css:n,onClick:()=>{window.open(t,"_blank")},children:(0,m.tZ)("img",{css:a,src:h})})}function v(e){let{path:t,javaC:n,javaE:c,cssURL:d,javaHighlight:h,height:v,frame:g,tabs:A}=e;const[x,w]=(0,a.useState)(""),[f,j]=(0,a.useState)(""),[y,L]=(0,a.useState)(""),[D,E]=(0,a.useState)(!(!n||!c)),[Z,B]=(0,a.useState)(!1),[C,S]=(0,a.useState)({});(0,a.useEffect)((()=>{c&&fetch(c).then((e=>e.text())).then((e=>{j(e);const t=new URL(c).pathname.split("/"),n=t[t.length-1];S((e=>({...e,javaFile:n})))})),n&&fetch(n).then((e=>e.text())).then((e=>{w(e)})),d&&fetch(d).then((e=>e.text())).then((e=>{L(e);const t=new URL(d).pathname.split("/"),n=t[t.length-1];S((e=>({...e,cssFile:n})))}))}),[]);const k=s.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=s.iv`
- min-height: 100px;
- height: 100%;
- width: 100%;
- height: ${v};
- `,H=s.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;
- }
- }
-
- `,M=s.iv`
- width: 100%;
- `,N=s.iv`
- display: flex;
- justify-content: flex-end;
- opacity: 0;
- transition: opacity 0.3s ease-in-out;
- ${Z&&"opacity: 1;"};
-
- `;return(0,m.BX)("div",{css:k,children:["hidden"!=g?(0,m.BX)("div",{onMouseEnter:()=>{B(!0)},onMouseLeave:()=>B(!1),css:M,children:[(0,m.tZ)("div",{css:N,children:(0,m.tZ)(b,{url:t})}),(0,m.tZ)("iframe",{loading:"lazy",src:t+"&theme="+("dark"===(0,u.I)().colorMode?"dark":"light"),css:T})]}):null,(0,m.BX)(l.Z,{css:H,summary:(0,m.tZ)("summary",{children:"Show Code"}),children:[n&&c?(0,m.tZ)(p,{collapse:D,setCollapse:E}):null,d?(0,m.BX)(r.Z,{children:[(0,m.tZ)(i.Z,{value:A?A[0]:"Java",label:A?A[0]:C.javaFile,default:!0,children:(0,m.tZ)(o.Z,{className:"codeDemoBlock",language:"java",showLineNumbers:!0,metastring:h,children:D?x:f})}),(0,m.tZ)(i.Z,{value:A?A[1]:"CSS",label:A?A[1]:C.cssFile,children:(0,m.tZ)(o.Z,{className:"codeDemoBlock",language:"css",showLineNumbers:!0,children:y})})]}):(0,m.tZ)(r.Z,{children:(0,m.tZ)(i.Z,{value:A?A[0]:"Java",label:A?A[0]:C.javaFile,default:!0,children:(0,m.tZ)(o.Z,{className:"codeDemoBlock",language:"java",showLineNumbers:!0,metastring:h,children:D?x:f})})})]})]})}},3273:(e,t,n)=>{n.d(t,{Z:()=>c});var a=n(7294),s=n(917),r=n(8230),i=n(4387),l=n(6770);var o=n(5944);function c(e){let{type:t,location:n,top:c,children:d,code:h,suffix:u}=e;const[m,p]=(0,a.useState)("");(0,a.useEffect)((()=>{u||(u=""),p("https://javadoc.io/doc/org.dwcj/dwcj-"+t+"/latest/"+n+".html"+u)}),[]);const b=s.iv`
- display: inline;
-
- ${c&&s.iv`
- width: 100%;
- display: flex;
- justify-content: flex-end;
- margin-top: -33px;
- margin-bottom: 25px;
- `}
- `,v=s.iv`
- background-color: #0063CC;
- :hover{
- color: white;
- }
- `;return(0,o.BX)(o.HY,{children:["true"===c&&(0,o.tZ)("div",{css:b,children:(0,o.tZ)(r.Z,{title:"JavaDoc",arrow:!0,children:(0,o.tZ)(i.Z,{css:v,label:"Java API",component:"a",href:m,icon:(0,o.tZ)(l.Z,{}),clickable:!0,color:"primary",target:"_blank"})})}),"true"!==c&&!h&&(0,o.tZ)("div",{css:b,children:(0,o.tZ)("a",{href:m,target:"_blank",children:d})}),"true"!==c&&h&&(0,o.tZ)("div",{css:b,children:(0,o.tZ)("code",{children:(0,o.tZ)("a",{href:m,target:"_blank",children:d})})})]})}},1415:(e,t,n)=>{n.d(t,{Z:()=>r});n(7294);var a=n(8397),s=n(5893);function r(e){return(0,s.jsx)(s.Fragment,{children:(0,s.jsx)(a.Z,{...e})})}}}]);
\ No newline at end of file
diff --git a/assets/js/56ad8461.58994522.js b/assets/js/56ad8461.58994522.js
new file mode 100644
index 000000000..221385070
--- /dev/null
+++ b/assets/js/56ad8461.58994522.js
@@ -0,0 +1,146 @@
+"use strict";(self.webpackChunkdwcj_documentation=self.webpackChunkdwcj_documentation||[]).push([[2565],{61:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>l,default:()=>p,frontMatter:()=>i,metadata:()=>c,toc:()=>u});var a=n(5893),s=n(1151),r=n(6957),o=n(3273);const i={sidebar_position:50,title:"Label"},l=void 0,c={id:"components/label",title:"Label",description:"The Label class is used to create a label object which shows static text.",source:"@site/docs/components/label.md",sourceDirName:"components",slug:"/components/label",permalink:"/docs/components/label",draft:!1,unlisted:!1,editUrl:"https://github.com/DwcJava/dwcjava.github.io/tree/website/docs/components/label.md",tags:[],version:"current",sidebarPosition:50,frontMatter:{sidebar_position:50,title:"Label"},sidebar:"documentationSidebar",previous:{title:"TimeField",permalink:"/docs/components/fields/timefield"},next:{title:"Lists",permalink:"/docs/components/list-components/lists"}},d={},u=[{value:"Usages",id:"usages",level:2},{value:"Constructors",id:"constructors",level:2},{value:"HTML Injection",id:"html-injection",level:2},{value:"Line Wrapping",id:"line-wrapping",level:2},{value:"Alignment",id:"alignment",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:"Example",id:"example",level:2}];function h(e){const t={a:"a",admonition:"admonition",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",...(0,s.a)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(o.Z,{type:"engine",location:"org/dwcj/component/label/Label",top:"true"}),"\n",(0,a.jsxs)(t.p,{children:["The ",(0,a.jsx)(t.code,{children:"Label"})," class is used to create a label object which shows static text."]}),"\n",(0,a.jsx)(t.h2,{id:"usages",children:"Usages"}),"\n",(0,a.jsx)(t.p,{children:"The Label component is a static text UI component that is commonly used in applications to display descriptive or informational text. It serves as a visual element that provides context, identifies UI elements, or presents information to the user. The Label component is highly versatile and can be used in various scenarios throughout an application. Some common usages of the Label component include:"}),"\n",(0,a.jsxs)(t.ol,{children:["\n",(0,a.jsxs)(t.li,{children:["\n",(0,a.jsxs)(t.p,{children:[(0,a.jsx)(t.strong,{children:"Form Labels"}),": Labels are frequently used alongside form fields to describe the purpose or expected input for a particular field. They improve usability and accessibility by providing clear instructions or hints to users. For example, you can use Labels in registration forms, contact forms, or search forms to identify input fields like name, email, address, or search query."]}),"\n"]}),"\n",(0,a.jsxs)(t.li,{children:["\n",(0,a.jsxs)(t.p,{children:[(0,a.jsx)(t.strong,{children:"Data Display"}),": Labels are useful for displaying static information or labeling data elements in different sections of an application. They can be used to present user profiles, product details, or any other information that needs proper identification or description."]}),"\n"]}),"\n",(0,a.jsxs)(t.li,{children:["\n",(0,a.jsxs)(t.p,{children:[(0,a.jsx)(t.strong,{children:"Navigation"}),": Labels can be employed in navigation menus, sidebars, or tabs to indicate the purpose or destination of a particular navigation item. They help users understand the function of each navigation option and improve the overall user experience."]}),"\n"]}),"\n",(0,a.jsxs)(t.li,{children:["\n",(0,a.jsxs)(t.p,{children:[(0,a.jsx)(t.strong,{children:"Headers and Section Titles"}),": Labels can be used as section titles or headers to organize content and provide clear delineation between different sections or blocks of information. They enhance the readability and structure of the user interface."]}),"\n"]}),"\n"]}),"\n",(0,a.jsx)(t.h2,{id:"constructors",children:"Constructors"}),"\n",(0,a.jsxs)(t.p,{children:["The ",(0,a.jsx)(t.code,{children:"Label"})," class has three constructors:"]}),"\n",(0,a.jsxs)(t.ol,{children:["\n",(0,a.jsxs)(t.li,{children:[(0,a.jsx)(t.code,{children:"Label()"}),": Creates an empty label."]}),"\n",(0,a.jsxs)(t.li,{children:[(0,a.jsx)(t.code,{children:"Label(String text)"}),": Creates a label with the specified text."]}),"\n",(0,a.jsxs)(t.li,{children:[(0,a.jsx)(t.code,{children:"Label(String text, boolean wrap)"}),": Creates a label with the specified text and sets whether or not the text should be wrapped. More detail about line wrapping can be found ",(0,a.jsx)(t.a,{href:"#line-wrapping",children:"here."})]}),"\n"]}),"\n",(0,a.jsx)(t.p,{children:"Here's an example of how to create a Label object using each constructor:"}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-java",children:'// Creates an empty label.\r\nLabel emptyLabel = new Label();\r\n\r\n// Creates a label with the specified text.\r\nLabel textLabel = new Label("Hello, world!");\r\n\r\n// Creates a label with the specified text and sets whether or not the text should be wrapped.\r\nLabel wrappedLabel = new Label("Lorem ipsum dolor sit amet, consectetur adipiscing elit.", true);\r\n\n'})}),"\n",(0,a.jsx)(t.h2,{id:"html-injection",children:"HTML Injection"}),"\n",(0,a.jsx)(t.p,{children:"In addition to using the label as static text, it can also be used as an HTML tag within your code. Simply set the label's content to the desired HTML tag with the various attributes, class names, etc, and the label will be replaced with the desired HTML element."}),"\n",(0,a.jsx)(r.Z,{path:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.labeldemos.LabelDemo",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/labeldemos/LabelDemo.java",javaC:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/code_snippets/label/Demo.txt",cssURL:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/resources/css/labelstyles/text_styles.css",javaHighlight:"{16-18}",height:"250px"}),"\n",(0,a.jsx)(t.h2,{id:"line-wrapping",children:"Line Wrapping"}),"\n",(0,a.jsxs)(t.p,{children:["The line wrap method for a ",(0,a.jsx)(t.code,{children:"Label"})," component sets whether or not the component automatically wraps the text within the label onto multiple lines when it exceeds the available width, ensuring that the entire text is visible without overflowing the container. Setting this value to false will truncate any text that falls out of the component's bounds. This helps manipulate readability and truncation of longer text content within the label. The default value for lineWrap is ",(0,a.jsx)(t.code,{children:"true"}),"."]}),"\n",(0,a.jsx)(r.Z,{path:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.labeldemos.LabelLineWrap",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/labeldemos/LabelLineWrap.java",cssURL:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/resources/css/labelstyles/wrap_styles.css",javaHighlight:"{16-18}",height:"250px"}),"\n",(0,a.jsx)("br",{}),"\n",(0,a.jsx)(t.h2,{id:"alignment",children:"Alignment"}),"\n",(0,a.jsxs)(t.p,{children:["The ",(0,a.jsx)(t.code,{children:"Label"})," class implements the TextAlignable interface, which allows you to set the text alignment of the label. The possible alignment values are Alignment.LEFT, Alignment.MIDDLE, and Alignment.RIGHT. To set the alignment, use the setTextAlignment method:"]}),"\n",(0,a.jsx)(r.Z,{path:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.labeldemos.LabelAlignment",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/labeldemos/LabelAlignment.java",javaC:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/code_snippets/label/Alignment.txt",cssURL:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/resources/css/labelstyles/alignment_styles.css",height:"450px"}),"\n",(0,a.jsx)(t.h2,{id:"events",children:"Events"}),"\n",(0,a.jsxs)(t.p,{children:["The ",(0,a.jsx)(t.code,{children:"Label"})," class provides methods to add and remove event listeners for the following events:"]}),"\n",(0,a.jsxs)(t.table,{children:[(0,a.jsx)(t.thead,{children:(0,a.jsxs)(t.tr,{children:[(0,a.jsx)(t.th,{style:{textAlign:"center"},children:"Events"}),(0,a.jsx)(t.th,{children:"Description"})]})}),(0,a.jsxs)(t.tbody,{children:[(0,a.jsxs)(t.tr,{children:[(0,a.jsx)(t.td,{style:{textAlign:"center"},children:(0,a.jsx)(o.Z,{type:"engine",location:"org/dwcj/component/event/MouseEnterEvent",code:"true",children:"MouseEnterEvent"})}),(0,a.jsx)(t.td,{children:"An event that is triggered when the mouse cursor enters the boundaries of a component."})]}),(0,a.jsxs)(t.tr,{children:[(0,a.jsx)(t.td,{style:{textAlign:"center"},children:(0,a.jsx)(o.Z,{type:"engine",location:"org/dwcj/component/event/MouseExitEvent",code:"true",children:"MouseExitEvent"})}),(0,a.jsx)(t.td,{children:"An event that is triggered when the mouse cursor exits the boundaries of a component."})]}),(0,a.jsxs)(t.tr,{children:[(0,a.jsx)(t.td,{style:{textAlign:"center"},children:(0,a.jsx)(o.Z,{type:"engine",location:"org/dwcj/component/event/RightMouseDownEvent",code:"true",children:"RightMouseDownEvent"})}),(0,a.jsx)(t.td,{children:"An event that is triggered when the user presses the right mouse button while the cursor is over a component."})]})]})]}),"\n",(0,a.jsx)(t.h3,{id:"adding-events",children:"Adding Events"}),"\n",(0,a.jsx)(t.p,{children:"To add an event listener, use the appropriate method:"}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-java",children:"myLabel.addMouseEnterListener( e -> {\r\n //Executed when the event fires\r\n});\n"})}),"\n",(0,a.jsxs)(t.p,{children:["Additional syntactic sugar methods, or aliases, have been added to allow for alternative addition of events by using the ",(0,a.jsx)(t.code,{children:"on"})," prefix followed by the event, such as:"]}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-java",children:"myLabel.onMouseEnter( e -> {\r\n //Executed when the event fires\r\n});\n"})}),"\n",(0,a.jsx)(t.admonition,{type:"tip",children:(0,a.jsx)(t.p,{children:"Using the event payload that comes with various events to attain information reduces the number of round trips made when instead querying the component for the required information."})}),"\n",(0,a.jsx)(t.h3,{id:"removing-events",children:"Removing Events"}),"\n",(0,a.jsx)(t.p,{children:"To remove an event listener, use the appropriate method:"}),"\n",(0,a.jsx)(t.pre,{children:(0,a.jsx)(t.code,{className:"language-java",children:"myLabel.removeMouseEnterListener(listener);\n"})}),"\n",(0,a.jsx)(t.h2,{id:"example",children:"Example"}),"\n",(0,a.jsxs)(t.p,{children:["Here is an example of how to use the ",(0,a.jsx)(t.code,{children:"Label"})," class to create a simple UI component which allows the user to hover over the text to change the message:"]}),"\n",(0,a.jsx)(r.Z,{path:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.labeldemos.LabelSample",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/labeldemos/LabelSample.java",javaC:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/code_snippets/label/Sample.txt",cssURL:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/resources/css/labelstyles/text_styles.css",javaHighlight:"{43-45}"}),"\n",(0,a.jsx)("br",{})]})}function p(e={}){const{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,a.jsx)(t,{...e,children:(0,a.jsx)(h,{...e})}):h(e)}},6031:(e,t,n)=>{var a=n(4836);t.Z=void 0;var s=a(n(4938)),r=n(5893),o=(0,s.default)((0,r.jsx)("path",{d:"m19 1-5 5v11l5-4.5V1zM1 6v14.65c0 .25.25.5.5.5.1 0 .15-.05.25-.05C3.1 20.45 5.05 20 6.5 20c1.95 0 4.05.4 5.5 1.5V6c-1.45-1.1-3.55-1.5-5.5-1.5S2.45 4.9 1 6zm22 13.5V6c-.6-.45-1.25-.75-2-1v13.5c-1.1-.35-2.3-.5-3.5-.5-1.7 0-4.15.65-5.5 1.5v2c1.35-.85 3.8-1.5 5.5-1.5 1.65 0 3.35.3 4.75 1.05.1.05.15.05.25.05.25 0 .5-.25.5-.5v-1.1z"}),"AutoStories");t.Z=o},2610:(e,t,n)=>{var a=n(4836);t.Z=void 0;var s=a(n(4938)),r=n(5893),o=(0,s.default)((0,r.jsx)("path",{d:"M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"}),"DragIndicator");t.Z=o},5162:(e,t,n)=>{n.d(t,{Z:()=>o});n(7294);var a=n(6010);const s={tabItem:"tabItem_Ymn6"};var r=n(5893);function o(e){let{children:t,hidden:n,className:o}=e;return(0,r.jsx)("div",{role:"tabpanel",className:(0,a.Z)(s.tabItem,o),hidden:n,children:t})}},4866:(e,t,n)=>{n.d(t,{Z:()=>j});var a=n(7294),s=n(6010),r=n(2466),o=n(6550),i=n(469),l=n(1980),c=n(7392),d=n(12);function u(e){return a.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,a.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 h(e){const{values:t,children:n}=e;return(0,a.useMemo)((()=>{const e=t??function(e){return u(e).map((e=>{let{props:{value:t,label:n,attributes:a,default:s}}=e;return{value:t,label:n,attributes:a,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 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 s=(0,o.k6)(),r=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)(r),(0,a.useCallback)((e=>{if(!r)return;const t=new URLSearchParams(s.location.search);t.set(r,e),s.replace({...s.location,search:t.toString()})}),[r,s])]}function b(e){const{defaultValue:t,queryString:n=!1,groupId:s}=e,r=h(e),[o,l]=(0,a.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 a=n.find((e=>e.default))??n[0];if(!a)throw new Error("Unexpected error: 0 tabValues");return a.value}({defaultValue:t,tabValues:r}))),[c,u]=m({queryString:n,groupId:s}),[b,v]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[s,r]=(0,d.Nk)(n);return[s,(0,a.useCallback)((e=>{n&&r.set(e)}),[n,r])]}({groupId:s}),g=(()=>{const e=c??b;return p({value:e,tabValues:r})?e:null})();(0,i.Z)((()=>{g&&l(g)}),[g]);return{selectedValue:o,selectValue:(0,a.useCallback)((e=>{if(!p({value:e,tabValues:r}))throw new Error(`Can't select invalid tab value=${e}`);l(e),u(e),v(e)}),[u,v,r]),tabValues:r}}var v=n(2389);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var A=n(5893);function x(e){let{className:t,block:n,selectedValue:a,selectValue:o,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:c}=(0,r.o5)(),d=e=>{const t=e.currentTarget,n=l.indexOf(t),s=i[n].value;s!==a&&(c(t),o(s))},u=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,A.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.Z)("tabs",{"tabs--block":n},t),children:i.map((e=>{let{value:t,label:n,attributes:r}=e;return(0,A.jsx)("li",{role:"tab",tabIndex:a===t?0:-1,"aria-selected":a===t,ref:e=>l.push(e),onKeyDown:u,onClick:d,...r,className:(0,s.Z)("tabs__item",g.tabItem,r?.className,{"tabs__item--active":a===t}),children:n??t},t)}))})}function f(e){let{lazy:t,children:n,selectedValue:s}=e;const r=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=r.find((e=>e.props.value===s));return e?(0,a.cloneElement)(e,{className:"margin-top--md"}):null}return(0,A.jsx)("div",{className:"margin-top--md",children:r.map(((e,t)=>(0,a.cloneElement)(e,{key:t,hidden:e.props.value!==s})))})}function w(e){const t=b(e);return(0,A.jsxs)("div",{className:(0,s.Z)("tabs-container",g.tabList),children:[(0,A.jsx)(x,{...e,...t}),(0,A.jsx)(f,{...e,...t})]})}function j(e){const t=(0,v.Z)();return(0,A.jsx)(w,{...e,children:u(e.children)},String(t))}},6957:(e,t,n)=>{n.d(t,{Z:()=>v});var a=n(7294),s=n(917),r=n(4866),o=n(5162),i=n(4673),l=n(1750);const c="data:image/png;base64,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",d=n.p+"assets/images/expand-ba3f00f73da43d91e5b17663c4a7d108.png",u="data:image/png;base64,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";var h=n(2610),p=n(5944);function m(e){let{collapse:t,setCollapse:n}=e;const a=s.iv`
+ display: flex;
+ justify-content: end;
+ align-items: flex-end;
+ background-color: transparent;
+ margin-bottom: -10px;
+ `,r=s.iv`
+ /* position: absolute;
+ right: 0; */
+ cursor: pointer;
+ z-index: 10;
+ height: 35px;
+ width: 35px;
+ border: none;
+ background-color: none;
+ justify-self: flex-end;
+ background-color: transparent;
+ margin-right: 5px;
+ margin-bottom: -50px !important;
+ `,o=s.iv`
+ filter: invert(var(--inversion-percentage));
+ `;return(0,p.tZ)("div",{css:a,children:(0,p.tZ)("button",{css:r,onClick:()=>{n(!t)},children:t?(0,p.tZ)("img",{css:o,src:d,className:"icon-tabler-arrow-bar-up"}):(0,p.tZ)("img",{css:o,src:c,className:"icon-tabler-arrow-bar-down"})})})}function b(e){let{url:t}=e;const n=s.iv`
+ position: relative;
+ cursor: pointer;
+ z-index: 10;
+ height: 35px;
+ width: 35px;
+ border: none;
+ background-color: none;
+ justify-self: flex-end;
+ margin-top: -5px;
+ margin-bottom: -20px;
+ background-color: transparent;
+
+
+ `,a=s.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:a,src:u})})}function v(e){let{path:t,javaC:n,javaE:c,cssURL:d,javaHighlight:u,height:v,frame:g,tabs:A}=e;const[x,f]=(0,a.useState)(""),[w,j]=(0,a.useState)(""),[y,L]=(0,a.useState)(""),[D,Z]=(0,a.useState)(!(!n||!c)),[E,S]=(0,a.useState)(!1),[B,C]=(0,a.useState)({}),[k,M]=(0,a.useState)(!1),[T,H]=(0,a.useState)(0),[N,z]=(0,a.useState)(0),[J,V]=(0,a.useState)(25),[F,X]=(0,a.useState)(25),[O,G]=(0,a.useState)(0),[Y,I]=(0,a.useState)(!1),R=(0,a.useRef)(null),W=(0,a.useRef)(null);(0,a.useEffect)((()=>{c&&fetch(c).then((e=>e.text())).then((e=>{j(e);const t=new URL(c).pathname.split("/"),n=t[t.length-1];C((e=>({...e,javaFile:n})))})),n&&fetch(n).then((e=>e.text())).then((e=>{f(e)})),d&&fetch(d).then((e=>e.text())).then((e=>{L(e);const t=new URL(d).pathname.split("/"),n=t[t.length-1];C((e=>({...e,cssFile:n})))})),G(R.current.offsetWidth),console.log(O)}),[]);const U=()=>{M(!1),console.log("Stop Resizing")},q=e=>{if(k){const t=e.clientX-T;N+t>O/3&&(R.current.style.width=`${N+t}px`,W.current.style.right=(J-t<25?25:J-t)+"px",X(J-t<25?25:J-t))}},P=s.iv`
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ margin-bottom: 16px;
+ /* padding: ${"hidden"==g?"0 15px 0 15px;":"7px 15px 0 15px;"}; */
+ /* box-shadow: var(--ifm-global-shadow-lw); */
+ background-color: var(--code-display-color-background);
+ `,K=s.iv`
+ width: 100%;
+ /* padding: 1em; */
+ border: 1px solid var(--ifm-toc-border-color);
+ border-right: none;
+ background-color: transparent;
+ display: flex;
+ position: relative;
+ `,Q=s.iv`
+ min-height: 100px;
+ height: 100%;
+ width: 100%;
+ height: ${v||"100%"};
+ pointer-events: none;
+ `,_=s.iv`
+ display: flex;
+ justify-content: flex-end;
+ opacity: 0;
+ transition: opacity 0.3s ease-in-out;
+ ${E&&"opacity: 1;"};
+ margin: 10px 0 0 0;
+ position: absolute;
+ right: 25px;
+ `,$=s.iv`
+ display: flex;
+ align-items: center;
+ cursor: ew-resize;
+ border-left: 1px solid var(--ifm-toc-border-color);
+ border-right: 1px solid var(--ifm-toc-border-color);
+ background-color: var(--ifm-background-color);
+ `,ee=s.iv`
+ box-shadow: none;
+ background-color: var(--ifm-background-color);
+ margin: 0px;
+ padding: 0px;
+ border: 1px solid var(--ifm-toc-border-color);
+ border-top: none;
+ border-radius: 0px;
+ position: relative;
+
+ div{
+ /* border: none; */
+ border-color: var(--ifm-toc-border-color);
+ padding: 2px 0px 0px 0px;
+ margin: 0px
+ }
+
+ summary{
+ display: flex;
+ width: 100%;
+ justify-content: center;
+ margin: 10px 0;
+ font-weight: bold;
+ ::before{
+ left: auto;
+ margin-left: -100px;
+ --docusaurus-details-decoration-color: var(--ifm-color-primary)
+ }
+ }
+ .margin-top--md{
+ margin-top: 0px !important;
+ }
+ ul{
+ margin: -4px 0px!important;
+ }
+ `,te=s.iv`
+ /* :first-child{
+ margin-left: 1em;
+ } */
+ li[aria-selected="true"]{
+ border-color: var(--ifm-color-primary);
+ }
+
+ .tabs__item{
+ padding: 5px 20px -2px 20px;
+ border-radius: 0px;
+ }
+ `,ne=s.iv`
+ border-radius: 0px;
+ box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset;
+ `;return(0,p.BX)("div",{css:P,onMouseUp:U,onMouseLeave:U,onMouseMove:q,children:["hidden"!=g?(0,p.BX)("div",{onMouseEnter:()=>{S(!0)},onMouseLeave:()=>S(!1),css:K,children:[(0,p.tZ)("iframe",{onMouseUp:U,loading:"lazy",src:t,css:{...Q,pointerEvents:k?"none":"auto"},ref:R,onMouseMove:q}),(0,p.tZ)("div",{css:_,ref:W,children:(0,p.tZ)(b,{url:t})}),(0,p.tZ)("div",{css:$,onMouseDown:e=>{e.preventDefault(),M(!0),H(e.clientX),z(R.current.offsetWidth),V(F),console.log(W.current.right),console.log("Start Resizing")},children:(0,p.tZ)(h.Z,{})})]}):null,(0,p.BX)(i.Z,{css:ee,summary:(0,p.tZ)("summary",{onClick:()=>I(!Y),children:Y?"Hide Code":"Show Code"}),children:[n&&c?(0,p.tZ)(m,{collapse:D,setCollapse:Z}):null,d?(0,p.BX)(r.Z,{css:te,children:[(0,p.tZ)(o.Z,{value:A?A[0]:"Java",label:A?A[0]:B.javaFile,default:!0,children:(0,p.tZ)(l.Z,{css:ne,className:"codeDemoBlock",language:"java",showLineNumbers:!0,metastring:u,children:D?x:w})}),(0,p.tZ)(o.Z,{value:A?A[1]:"CSS",label:A?A[1]:B.cssFile,children:(0,p.tZ)(l.Z,{css:ne,className:"codeDemoBlock",language:"css",showLineNumbers:!0,children:y})})]}):(0,p.tZ)(r.Z,{css:te,children:(0,p.tZ)(o.Z,{value:A?A[0]:"Java",label:A?A[0]:B.javaFile,default:!0,children:(0,p.tZ)(l.Z,{css:ne,className:"codeDemoBlock",language:"java",showLineNumbers:!0,metastring:u,children:D?x:w})})})]})]})}},3273:(e,t,n)=>{n.d(t,{Z:()=>c});var a=n(7294),s=n(917),r=n(8230),o=n(4387),i=n(6031);var l=n(5944);function c(e){let{type:t,location:n,top:c,children:d,code:u,suffix:h}=e;const[p,m]=(0,a.useState)("");(0,a.useEffect)((()=>{h||(h=""),m("https://javadoc.io/doc/org.dwcj/dwcj-"+t+"/latest/"+n+".html"+h)}),[]);const b=s.iv`
+ display: inline;
+
+ ${c&&s.iv`
+ width: 100%;
+ display: flex;
+ justify-content: flex-end;
+ margin-top: -33px;
+ margin-bottom: 25px;
+ `}
+ `,v=s.iv`
+ background-color: #0063CC;
+ padding: 0 0 0 5px;
+ :hover{
+ color: white;
+ }
+ `;return(0,l.BX)(l.HY,{children:["true"===c&&(0,l.tZ)("div",{css:b,children:(0,l.tZ)(r.Z,{title:"JavaDoc",arrow:!0,children:(0,l.tZ)(o.Z,{css:v,label:"Java API",component:"a",href:p,icon:(0,l.tZ)(i.Z,{}),clickable:!0,color:"primary",target:"_blank"})})}),"true"!==c&&!u&&(0,l.tZ)("div",{css:b,children:(0,l.tZ)("a",{href:p,target:"_blank",children:d})}),"true"!==c&&u&&(0,l.tZ)("div",{css:b,children:(0,l.tZ)("code",{children:(0,l.tZ)("a",{href:p,target:"_blank",children:d})})})]})}},1415:(e,t,n)=>{n.d(t,{Z:()=>r});n(7294);var a=n(8397),s=n(5893);function r(e){return(0,s.jsx)(s.Fragment,{children:(0,s.jsx)(a.Z,{...e})})}}}]);
\ No newline at end of file
diff --git a/assets/js/693028f3.d2484754.js b/assets/js/693028f3.d4e62acf.js
similarity index 70%
rename from assets/js/693028f3.d2484754.js
rename to assets/js/693028f3.d4e62acf.js
index 8635e5ace..b974da267 100644
--- a/assets/js/693028f3.d2484754.js
+++ b/assets/js/693028f3.d4e62acf.js
@@ -1,7 +1,7 @@
-"use strict";(self.webpackChunkdwcj_documentation=self.webpackChunkdwcj_documentation||[]).push([[3779],{8727:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>l,default:()=>u,frontMatter:()=>a,metadata:()=>r,toc:()=>d});var s=n(5893),i=n(1151),o=n(3273);const a={sidebar_position:0,title:"BlurEvent",sidebar_class_name:"sidebar--item__hidden",slug:"BlurEvent"},l=void 0,r={id:"components/events/blur-event",title:"BlurEvent",description:"An event that is triggered when an element loses focus. It occurs when the user interacts with an element, such as clicking inside an input field, and then moves the focus away from that element, typically by clicking outside of it or tabbing to another element on the page. This event is useful when you want to detect when a user moves away from a particular element on a web page, such as an input field or a button. This class also inherits methods from the base Event class.",source:"@site/docs/components/events/blur-event.md",sourceDirName:"components/events",slug:"/components/events/BlurEvent",permalink:"/docs/components/events/BlurEvent",draft:!1,unlisted:!1,editUrl:"https://github.com/DwcJava/dwcjava.github.io/tree/website/docs/components/events/blur-event.md",tags:[],version:"current",sidebarPosition:0,frontMatter:{sidebar_position:0,title:"BlurEvent",sidebar_class_name:"sidebar--item__hidden",slug:"BlurEvent"},sidebar:"documentationSidebar",previous:{title:"Event",permalink:"/docs/components/events/event"},next:{title:"ButtonClickEvent",permalink:"/docs/components/events/ButtonClickEvent"}},c={},d=[{value:"Event Payload",id:"event-payload",level:2},{value:"See Also",id:"see-also",level:2}];function h(e){const t={a:"a",code:"code",h2:"h2",li:"li",p:"p",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,i.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(o.Z,{type:"engine",location:"org/dwcj/component/event/BlurEvent",top:"true"}),"\n",(0,s.jsxs)(t.p,{children:["An event that is triggered when an element loses focus. It occurs when the user interacts with an element, such as clicking inside an input field, and then moves the focus away from that element, typically by clicking outside of it or tabbing to another element on the page. This event is useful when you want to detect when a user moves away from a particular element on a web page, such as an input field or a button. This class also inherits methods from the base ",(0,s.jsx)(t.code,{children:"Event"})," class."]}),"\n",(0,s.jsx)(t.h2,{id:"event-payload",children:"Event Payload"}),"\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:"Method"}),(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)(t.code,{children:"getText()"})}),(0,s.jsx)(t.td,{children:"Gets the text of the component."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"center"},children:(0,s.jsx)(t.code,{children:"isClientValidationValid()"})}),(0,s.jsx)(t.td,{children:"Returns the result of the client validation function, if any, when the component loses focus."})]})]})]}),"\n",(0,s.jsx)(t.h2,{id:"see-also",children:"See Also"}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"./event",children:"Event"})}),"\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"./FocusEvent",children:"Focus Event"})}),"\n"]})]})}function u(e={}){const{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(h,{...e})}):h(e)}},3273:(e,t,n)=>{n.d(t,{Z:()=>c});var s=n(7294),i=n(917),o=n(8230),a=n(4387),l=n(6770);var r=n(5944);function c(e){let{type:t,location:n,top:c,children:d,code:h,suffix:u}=e;const[v,m]=(0,s.useState)("");(0,s.useEffect)((()=>{u||(u=""),m("https://javadoc.io/doc/org.dwcj/dwcj-"+t+"/latest/"+n+".html"+u)}),[]);const p=i.iv`
+"use strict";(self.webpackChunkdwcj_documentation=self.webpackChunkdwcj_documentation||[]).push([[3779],{8727:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>r,contentTitle:()=>l,default:()=>u,frontMatter:()=>a,metadata:()=>c,toc:()=>d});var s=n(5893),i=n(1151),o=n(3273);const a={sidebar_position:0,title:"BlurEvent",sidebar_class_name:"sidebar--item__hidden",slug:"BlurEvent"},l=void 0,c={id:"components/events/blur-event",title:"BlurEvent",description:"An event that is triggered when an element loses focus. It occurs when the user interacts with an element, such as clicking inside an input field, and then moves the focus away from that element, typically by clicking outside of it or tabbing to another element on the page. This event is useful when you want to detect when a user moves away from a particular element on a web page, such as an input field or a button. This class also inherits methods from the base Event class.",source:"@site/docs/components/events/blur-event.md",sourceDirName:"components/events",slug:"/components/events/BlurEvent",permalink:"/docs/components/events/BlurEvent",draft:!1,unlisted:!1,editUrl:"https://github.com/DwcJava/dwcjava.github.io/tree/website/docs/components/events/blur-event.md",tags:[],version:"current",sidebarPosition:0,frontMatter:{sidebar_position:0,title:"BlurEvent",sidebar_class_name:"sidebar--item__hidden",slug:"BlurEvent"},sidebar:"documentationSidebar",previous:{title:"Event",permalink:"/docs/components/events/event"},next:{title:"ButtonClickEvent",permalink:"/docs/components/events/ButtonClickEvent"}},r={},d=[{value:"Event Payload",id:"event-payload",level:2},{value:"See Also",id:"see-also",level:2}];function h(e){const t={a:"a",code:"code",h2:"h2",li:"li",p:"p",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,i.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(o.Z,{type:"engine",location:"org/dwcj/component/event/BlurEvent",top:"true"}),"\n",(0,s.jsxs)(t.p,{children:["An event that is triggered when an element loses focus. It occurs when the user interacts with an element, such as clicking inside an input field, and then moves the focus away from that element, typically by clicking outside of it or tabbing to another element on the page. This event is useful when you want to detect when a user moves away from a particular element on a web page, such as an input field or a button. This class also inherits methods from the base ",(0,s.jsx)(t.code,{children:"Event"})," class."]}),"\n",(0,s.jsx)(t.h2,{id:"event-payload",children:"Event Payload"}),"\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:"Method"}),(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)(t.code,{children:"getText()"})}),(0,s.jsx)(t.td,{children:"Gets the text of the component."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"center"},children:(0,s.jsx)(t.code,{children:"isClientValidationValid()"})}),(0,s.jsx)(t.td,{children:"Returns the result of the client validation function, if any, when the component loses focus."})]})]})]}),"\n",(0,s.jsx)(t.h2,{id:"see-also",children:"See Also"}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"./event",children:"Event"})}),"\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"./FocusEvent",children:"Focus Event"})}),"\n"]})]})}function u(e={}){const{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(h,{...e})}):h(e)}},6031:(e,t,n)=>{var s=n(4836);t.Z=void 0;var i=s(n(4938)),o=n(5893),a=(0,i.default)((0,o.jsx)("path",{d:"m19 1-5 5v11l5-4.5V1zM1 6v14.65c0 .25.25.5.5.5.1 0 .15-.05.25-.05C3.1 20.45 5.05 20 6.5 20c1.95 0 4.05.4 5.5 1.5V6c-1.45-1.1-3.55-1.5-5.5-1.5S2.45 4.9 1 6zm22 13.5V6c-.6-.45-1.25-.75-2-1v13.5c-1.1-.35-2.3-.5-3.5-.5-1.7 0-4.15.65-5.5 1.5v2c1.35-.85 3.8-1.5 5.5-1.5 1.65 0 3.35.3 4.75 1.05.1.05.15.05.25.05.25 0 .5-.25.5-.5v-1.1z"}),"AutoStories");t.Z=a},3273:(e,t,n)=>{n.d(t,{Z:()=>r});var s=n(7294),i=n(917),o=n(8230),a=n(4387),l=n(6031);var c=n(5944);function r(e){let{type:t,location:n,top:r,children:d,code:h,suffix:u}=e;const[v,m]=(0,s.useState)("");(0,s.useEffect)((()=>{u||(u=""),m("https://javadoc.io/doc/org.dwcj/dwcj-"+t+"/latest/"+n+".html"+u)}),[]);const p=i.iv`
display: inline;
- ${c&&i.iv`
+ ${r&&i.iv`
width: 100%;
display: flex;
justify-content: flex-end;
@@ -10,7 +10,8 @@
`}
`,f=i.iv`
background-color: #0063CC;
+ padding: 0 0 0 5px;
:hover{
color: white;
}
- `;return(0,r.BX)(r.HY,{children:["true"===c&&(0,r.tZ)("div",{css:p,children:(0,r.tZ)(o.Z,{title:"JavaDoc",arrow:!0,children:(0,r.tZ)(a.Z,{css:f,label:"Java API",component:"a",href:v,icon:(0,r.tZ)(l.Z,{}),clickable:!0,color:"primary",target:"_blank"})})}),"true"!==c&&!h&&(0,r.tZ)("div",{css:p,children:(0,r.tZ)("a",{href:v,target:"_blank",children:d})}),"true"!==c&&h&&(0,r.tZ)("div",{css:p,children:(0,r.tZ)("code",{children:(0,r.tZ)("a",{href:v,target:"_blank",children:d})})})]})}}}]);
\ No newline at end of file
+ `;return(0,c.BX)(c.HY,{children:["true"===r&&(0,c.tZ)("div",{css:p,children:(0,c.tZ)(o.Z,{title:"JavaDoc",arrow:!0,children:(0,c.tZ)(a.Z,{css:f,label:"Java API",component:"a",href:v,icon:(0,c.tZ)(l.Z,{}),clickable:!0,color:"primary",target:"_blank"})})}),"true"!==r&&!h&&(0,c.tZ)("div",{css:p,children:(0,c.tZ)("a",{href:v,target:"_blank",children:d})}),"true"!==r&&h&&(0,c.tZ)("div",{css:p,children:(0,c.tZ)("code",{children:(0,c.tZ)("a",{href:v,target:"_blank",children:d})})})]})}}}]);
\ No newline at end of file
diff --git a/assets/js/6da97851.fb1dcc06.js b/assets/js/6da97851.534aad95.js
similarity index 81%
rename from assets/js/6da97851.fb1dcc06.js
rename to assets/js/6da97851.534aad95.js
index b9a7bcd38..7ca33b1b3 100644
--- a/assets/js/6da97851.fb1dcc06.js
+++ b/assets/js/6da97851.534aad95.js
@@ -1,4 +1,4 @@
-"use strict";(self.webpackChunkdwcj_documentation=self.webpackChunkdwcj_documentation||[]).push([[9583],{4486:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>a,contentTitle:()=>c,default:()=>v,frontMatter:()=>l,metadata:()=>r,toc:()=>d});var s=n(5893),i=n(1151),o=n(3273);const l={sidebar_position:0,title:"ListCloseEvent",sidebar_class_name:"sidebar--item__hidden",slug:"ListCloseEvent"},c=void 0,r={id:"components/events/list-close-event",title:"ListCloseEvent",description:"This event inherits from the ListEvent class, and is triggered when the user closes a List-based component. It provides essential information about the selected item and allows developers to implement custom actions or responses when an item is chosen.",source:"@site/docs/components/events/list-close-event.md",sourceDirName:"components/events",slug:"/components/events/ListCloseEvent",permalink:"/docs/components/events/ListCloseEvent",draft:!1,unlisted:!1,editUrl:"https://github.com/DwcJava/dwcjava.github.io/tree/website/docs/components/events/list-close-event.md",tags:[],version:"current",sidebarPosition:0,frontMatter:{sidebar_position:0,title:"ListCloseEvent",sidebar_class_name:"sidebar--item__hidden",slug:"ListCloseEvent"},sidebar:"documentationSidebar",previous:{title:"KeypressEvent",permalink:"/docs/components/events/KeypressEvent"},next:{title:"ListEvent",permalink:"/docs/components/events/ListEvent"}},a={},d=[{value:"See Also",id:"see-also",level:2},{value:"Events",id:"events",level:3},{value:"Components",id:"components",level:3}];function h(e){const t={a:"a",h2:"h2",h3:"h3",li:"li",p:"p",ul:"ul",...(0,i.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(o.Z,{type:"engine",location:"org/dwcj/component/event/ListCloseEvent",top:"true"}),"\n",(0,s.jsx)(t.p,{children:"This event inherits from the ListEvent class, and is triggered when the user closes a List-based component. It provides essential information about the selected item and allows developers to implement custom actions or responses when an item is chosen."}),"\n",(0,s.jsx)(t.h2,{id:"see-also",children:"See Also"}),"\n",(0,s.jsx)(t.h3,{id:"events",children:"Events"}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"./event",children:"Event"})}),"\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"./ListOpenEvent",children:"ListOpenEvent"})}),"\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"./ListSelectEvent",children:"ListSelectEvent"})}),"\n"]}),"\n",(0,s.jsx)(t.h3,{id:"components",children:"Components"}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"../list-components/ChoiceBox",children:"ChoiceBox"})}),"\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"../list-components/ComboBox",children:"ComboBox"})}),"\n"]})]})}function v(e={}){const{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(h,{...e})}):h(e)}},3273:(e,t,n)=>{n.d(t,{Z:()=>a});var s=n(7294),i=n(917),o=n(8230),l=n(4387),c=n(6770);var r=n(5944);function a(e){let{type:t,location:n,top:a,children:d,code:h,suffix:v}=e;const[p,m]=(0,s.useState)("");(0,s.useEffect)((()=>{v||(v=""),m("https://javadoc.io/doc/org.dwcj/dwcj-"+t+"/latest/"+n+".html"+v)}),[]);const u=i.iv`
+"use strict";(self.webpackChunkdwcj_documentation=self.webpackChunkdwcj_documentation||[]).push([[9583],{4486:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>a,contentTitle:()=>c,default:()=>v,frontMatter:()=>l,metadata:()=>r,toc:()=>d});var s=n(5893),i=n(1151),o=n(3273);const l={sidebar_position:0,title:"ListCloseEvent",sidebar_class_name:"sidebar--item__hidden",slug:"ListCloseEvent"},c=void 0,r={id:"components/events/list-close-event",title:"ListCloseEvent",description:"This event inherits from the ListEvent class, and is triggered when the user closes a List-based component. It provides essential information about the selected item and allows developers to implement custom actions or responses when an item is chosen.",source:"@site/docs/components/events/list-close-event.md",sourceDirName:"components/events",slug:"/components/events/ListCloseEvent",permalink:"/docs/components/events/ListCloseEvent",draft:!1,unlisted:!1,editUrl:"https://github.com/DwcJava/dwcjava.github.io/tree/website/docs/components/events/list-close-event.md",tags:[],version:"current",sidebarPosition:0,frontMatter:{sidebar_position:0,title:"ListCloseEvent",sidebar_class_name:"sidebar--item__hidden",slug:"ListCloseEvent"},sidebar:"documentationSidebar",previous:{title:"KeypressEvent",permalink:"/docs/components/events/KeypressEvent"},next:{title:"ListEvent",permalink:"/docs/components/events/ListEvent"}},a={},d=[{value:"See Also",id:"see-also",level:2},{value:"Events",id:"events",level:3},{value:"Components",id:"components",level:3}];function h(e){const t={a:"a",h2:"h2",h3:"h3",li:"li",p:"p",ul:"ul",...(0,i.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(o.Z,{type:"engine",location:"org/dwcj/component/event/ListCloseEvent",top:"true"}),"\n",(0,s.jsx)(t.p,{children:"This event inherits from the ListEvent class, and is triggered when the user closes a List-based component. It provides essential information about the selected item and allows developers to implement custom actions or responses when an item is chosen."}),"\n",(0,s.jsx)(t.h2,{id:"see-also",children:"See Also"}),"\n",(0,s.jsx)(t.h3,{id:"events",children:"Events"}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"./event",children:"Event"})}),"\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"./ListOpenEvent",children:"ListOpenEvent"})}),"\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"./ListSelectEvent",children:"ListSelectEvent"})}),"\n"]}),"\n",(0,s.jsx)(t.h3,{id:"components",children:"Components"}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"../list-components/ChoiceBox",children:"ChoiceBox"})}),"\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"../list-components/ComboBox",children:"ComboBox"})}),"\n"]})]})}function v(e={}){const{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(h,{...e})}):h(e)}},6031:(e,t,n)=>{var s=n(4836);t.Z=void 0;var i=s(n(4938)),o=n(5893),l=(0,i.default)((0,o.jsx)("path",{d:"m19 1-5 5v11l5-4.5V1zM1 6v14.65c0 .25.25.5.5.5.1 0 .15-.05.25-.05C3.1 20.45 5.05 20 6.5 20c1.95 0 4.05.4 5.5 1.5V6c-1.45-1.1-3.55-1.5-5.5-1.5S2.45 4.9 1 6zm22 13.5V6c-.6-.45-1.25-.75-2-1v13.5c-1.1-.35-2.3-.5-3.5-.5-1.7 0-4.15.65-5.5 1.5v2c1.35-.85 3.8-1.5 5.5-1.5 1.65 0 3.35.3 4.75 1.05.1.05.15.05.25.05.25 0 .5-.25.5-.5v-1.1z"}),"AutoStories");t.Z=l},3273:(e,t,n)=>{n.d(t,{Z:()=>a});var s=n(7294),i=n(917),o=n(8230),l=n(4387),c=n(6031);var r=n(5944);function a(e){let{type:t,location:n,top:a,children:d,code:h,suffix:v}=e;const[p,m]=(0,s.useState)("");(0,s.useEffect)((()=>{v||(v=""),m("https://javadoc.io/doc/org.dwcj/dwcj-"+t+"/latest/"+n+".html"+v)}),[]);const u=i.iv`
display: inline;
${a&&i.iv`
@@ -10,6 +10,7 @@
`}
`,x=i.iv`
background-color: #0063CC;
+ padding: 0 0 0 5px;
:hover{
color: white;
}
diff --git a/assets/js/700cec1a.d1f0b957.js b/assets/js/700cec1a.d1f0b957.js
new file mode 100644
index 000000000..705a15314
--- /dev/null
+++ b/assets/js/700cec1a.d1f0b957.js
@@ -0,0 +1,146 @@
+"use strict";(self.webpackChunkdwcj_documentation=self.webpackChunkdwcj_documentation||[]).push([[4020],{5338:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>l,default:()=>p,frontMatter:()=>s,metadata:()=>c,toc:()=>u});var o=n(5893),r=n(1151),a=n(6957),i=(n(7796),n(3273));const s={sidebar_position:100,title:"RadioButtonGroup",slug:"radiobuttongroup"},l=void 0,c={id:"components/radio-group",title:"RadioButtonGroup",description:"The RadioButtonGroup class is used to group related radio buttons together, which helps establish the mutual exclusivity among the options within that group. Users can select only one radio button within a given radio group. When a user selects a radio button within a group, any previously selected radio button in the same group automatically becomes deselected. This ensures that only one option can be chosen at a time.",source:"@site/docs/components/radio-group.md",sourceDirName:"components",slug:"/components/radiobuttongroup",permalink:"/docs/components/radiobuttongroup",draft:!1,unlisted:!1,editUrl:"https://github.com/DwcJava/dwcjava.github.io/tree/website/docs/components/radio-group.md",tags:[],version:"current",sidebarPosition:100,frontMatter:{sidebar_position:100,title:"RadioButtonGroup",slug:"radiobuttongroup"},sidebar:"documentationSidebar",previous:{title:"RadioButton",permalink:"/docs/components/radiobutton"},next:{title:"Slider",permalink:"/docs/components/slider"}},d={},u=[{value:"Usages",id:"usages",level:2},{value:"Constructors",id:"constructors",level:2},{value:"Adding and Removing RadioButtons",id:"adding-and-removing-radiobuttons",level:2},{value:"Naming",id:"naming",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:"Best Practices",id:"best-practices",level:2}];function h(e){const t={admonition:"admonition",code:"code",h2:"h2",h3:"h3",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",...(0,r.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(i.Z,{type:"engine",location:"org/dwcj/component/optioninput/RadioButtonGroup",top:"true"}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.code,{children:"RadioButtonGroup"})," class is used to group related radio buttons together, which helps establish the mutual exclusivity among the options within that group. Users can select only one radio button within a given radio group. When a user selects a radio button within a group, any previously selected radio button in the same group automatically becomes deselected. This ensures that only one option can be chosen at a time."]}),"\n",(0,o.jsx)(a.Z,{path:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.radiobuttondemos.RadioButtonGroupDemo",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/radiobuttondemos/RadioButtonGroupDemo.java",cssURL:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/resources/css/radiobuttonstyles/radiobutton_styles.css",height:"200px"}),"\n",(0,o.jsx)(t.admonition,{type:"important",children:(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.code,{children:"RadioButtonGroup"})," component will not render an HTML element on the page. Rather, it is only\r\nlogic that ensures a group of RadioButtons behave as a group instead of individually."]})}),"\n",(0,o.jsx)(t.h2,{id:"usages",children:"Usages"}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.code,{children:"RadioButtonGroup"})," is best used in scenarios where users need to make a single selection from a predefined set of options presented as radio buttons. Here are some examples of when to use the ",(0,o.jsx)(t.code,{children:"RadioButtonGroup"}),":"]}),"\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:"Survey or Questionnaires"}),": ",(0,o.jsx)(t.code,{children:"RadioButtonGroup"})," components are commonly used in surveys or questionnaires where users need to select a single response from a list of options."]}),"\n"]}),"\n",(0,o.jsxs)(t.li,{children:["\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.strong,{children:"Preference Settings"}),": Applications that involve preference or settings panels often use RadioButtonGroup component to allow users to choose a single option from a set of mutually exclusive choices."]}),"\n"]}),"\n",(0,o.jsxs)(t.li,{children:["\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.strong,{children:"Filtering or Sorting"}),": A ",(0,o.jsx)(t.code,{children:"RadioButton"})," can be used in applications that require users to select a single filter or sorting option, such as sorting a list of items by different criteria."]}),"\n"]}),"\n"]}),"\n",(0,o.jsx)(t.h2,{id:"constructors",children:"Constructors"}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.code,{children:"RadioButtonGroup"})," class has four constructors:"]}),"\n",(0,o.jsxs)(t.ol,{children:["\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.code,{children:"RadioButtonGroup()"}),": Creates an empty ",(0,o.jsx)(t.code,{children:"RadioButtonGroup"})," in the unchecked state."]}),"\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.code,{children:"RadioButtonGroup(String name)"}),": Creates a ",(0,o.jsx)(t.code,{children:"RadioButtonGroup"})," with an name."]}),"\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.code,{children:"RadioButtonGroup(RadioButton... buttons)"}),": Creates a ",(0,o.jsx)(t.code,{children:"RadioButtonGroup"})," with one or more ",(0,o.jsx)(t.code,{children:"RadioButton"})," objects assigned to the group."]}),"\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.code,{children:"RadioButtonGroup(String name, RadioButton... buttons)"})," Creates a ",(0,o.jsx)(t.code,{children:"RadioButtonGroup"})," with both a name and one or more ",(0,o.jsx)(t.code,{children:"RadioButton"})," objects assigned to the group."]}),"\n"]}),"\n",(0,o.jsxs)(t.p,{children:["A ",(0,o.jsx)(t.code,{children:"RadioButton"})," component stores the group to which it belongs, which can be accessed via the ",(0,o.jsx)(t.code,{children:"getButtonGroup()"})," method."]}),"\n",(0,o.jsx)(t.h2,{id:"adding-and-removing-radiobuttons",children:"Adding and Removing RadioButtons"}),"\n",(0,o.jsxs)(t.p,{children:["It is possible to add and remove singular or multiple ",(0,o.jsx)(t.code,{children:"RadioButton"})," objects to a group, ensuring that they exhibit mutually-exclusive checking behavior, and are associated with any name that may belong to the group."]}),"\n",(0,o.jsx)(t.h2,{id:"naming",children:"Naming"}),"\n",(0,o.jsxs)(t.p,{children:["The name attribute in a ",(0,o.jsx)(t.code,{children:"RadioButtonGroup"})," groups related RadioButtons together, allowing users to make a single choice from the options provided and enforcing exclusivity among the RadioButtons. The name of a group is not reflected in the DOM, however, and is a convenience utility for the Java developer."]}),"\n",(0,o.jsx)(t.h2,{id:"events",children:"Events"}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.code,{children:"RadioButtonGroup"})," class provides methods to add and remove change events. These events fire whenever a change is made to an element within the group."]}),"\n",(0,o.jsx)(t.h3,{id:"adding-events",children:"Adding Events"}),"\n",(0,o.jsxs)(t.p,{children:["To add an ",(0,o.jsx)(t.code,{children:"ChangeEvent"})," listener, use the appropriate method:"]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-java",children:"myRadioButtonGroup.addChangeListener( e -> {\r\n //Executed when the event fires\r\n});\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:"myRadioButtonGroup.onChange( e -> {\r\n //Executed when the event fires\r\n});\n"})}),"\n",(0,o.jsx)(t.admonition,{type:"tip",children:(0,o.jsx)(t.p,{children:"Using the event payload that comes with various events to attain information reduces the number of round trips made when instead querying the component for the required information."})}),"\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:"myRadioButton.removeChangeListener(listener);\n"})}),"\n",(0,o.jsx)(t.h2,{id:"best-practices",children:"Best Practices"}),"\n",(0,o.jsx)(t.p,{children:"To ensure an optimal user experience when using the RadioButton 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:"Clearly Label Options"}),": Provide clear and concise labels for each ",(0,o.jsx)(t.code,{children:"RadioButton"})," option to accurately describe the choice. Labels should be easy to understand and distinguish from one another."]}),"\n"]}),"\n",(0,o.jsxs)(t.li,{children:["\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.strong,{children:"Provide Default Selection"}),": If applicable, consider providing a default selection for Radio buttons to guide users when they first encounter the options. The default selection should align with the most common or preferred choice."]}),"\n"]}),"\n"]})]})}function p(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(h,{...e})}):h(e)}},6031:(e,t,n)=>{var o=n(4836);t.Z=void 0;var r=o(n(4938)),a=n(5893),i=(0,r.default)((0,a.jsx)("path",{d:"m19 1-5 5v11l5-4.5V1zM1 6v14.65c0 .25.25.5.5.5.1 0 .15-.05.25-.05C3.1 20.45 5.05 20 6.5 20c1.95 0 4.05.4 5.5 1.5V6c-1.45-1.1-3.55-1.5-5.5-1.5S2.45 4.9 1 6zm22 13.5V6c-.6-.45-1.25-.75-2-1v13.5c-1.1-.35-2.3-.5-3.5-.5-1.7 0-4.15.65-5.5 1.5v2c1.35-.85 3.8-1.5 5.5-1.5 1.65 0 3.35.3 4.75 1.05.1.05.15.05.25.05.25 0 .5-.25.5-.5v-1.1z"}),"AutoStories");t.Z=i},2610:(e,t,n)=>{var o=n(4836);t.Z=void 0;var r=o(n(4938)),a=n(5893),i=(0,r.default)((0,a.jsx)("path",{d:"M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"}),"DragIndicator");t.Z=i},5162:(e,t,n)=>{n.d(t,{Z:()=>i});n(7294);var o=n(6010);const r={tabItem:"tabItem_Ymn6"};var a=n(5893);function i(e){let{children:t,hidden:n,className:i}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,o.Z)(r.tabItem,i),hidden:n,children:t})}},4866:(e,t,n)=>{n.d(t,{Z:()=>j});var o=n(7294),r=n(6010),a=n(2466),i=n(6550),s=n(469),l=n(1980),c=n(7392),d=n(12);function u(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 h(e){const{values:t,children:n}=e;return(0,o.useMemo)((()=>{const e=t??function(e){return u(e).map((e=>{let{props:{value:t,label:n,attributes:o,default:r}}=e;return{value:t,label:n,attributes:o,default:r}}))}(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 r=(0,i.k6)(),a=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)(a),(0,o.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(r.location.search);t.set(a,e),r.replace({...r.location,search:t.toString()})}),[a,r])]}function g(e){const{defaultValue:t,queryString:n=!1,groupId:r}=e,a=h(e),[i,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(!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 o=n.find((e=>e.default))??n[0];if(!o)throw new Error("Unexpected error: 0 tabValues");return o.value}({defaultValue:t,tabValues:a}))),[c,u]=m({queryString:n,groupId:r}),[g,v]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,a]=(0,d.Nk)(n);return[r,(0,o.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:r}),b=(()=>{const e=c??g;return p({value:e,tabValues:a})?e:null})();(0,s.Z)((()=>{b&&l(b)}),[b]);return{selectedValue:i,selectValue:(0,o.useCallback)((e=>{if(!p({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);l(e),u(e),v(e)}),[u,v,a]),tabValues:a}}var v=n(2389);const b={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var A=n(5893);function x(e){let{className:t,block:n,selectedValue:o,selectValue:i,tabValues:s}=e;const l=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.o5)(),d=e=>{const t=e.currentTarget,n=l.indexOf(t),r=s[n].value;r!==o&&(c(t),i(r))},u=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,A.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.Z)("tabs",{"tabs--block":n},t),children:s.map((e=>{let{value:t,label:n,attributes:a}=e;return(0,A.jsx)("li",{role:"tab",tabIndex:o===t?0:-1,"aria-selected":o===t,ref:e=>l.push(e),onKeyDown:u,onClick:d,...a,className:(0,r.Z)("tabs__item",b.tabItem,a?.className,{"tabs__item--active":o===t}),children:n??t},t)}))})}function f(e){let{lazy:t,children:n,selectedValue:r}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===r));return e?(0,o.cloneElement)(e,{className:"margin-top--md"}):null}return(0,A.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,o.cloneElement)(e,{key:t,hidden:e.props.value!==r})))})}function w(e){const t=g(e);return(0,A.jsxs)("div",{className:(0,r.Z)("tabs-container",b.tabList),children:[(0,A.jsx)(x,{...e,...t}),(0,A.jsx)(f,{...e,...t})]})}function j(e){const t=(0,v.Z)();return(0,A.jsx)(w,{...e,children:u(e.children)},String(t))}},6957:(e,t,n)=>{n.d(t,{Z:()=>v});var o=n(7294),r=n(917),a=n(4866),i=n(5162),s=n(4673),l=n(1750);const c="data:image/png;base64,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",d=n.p+"assets/images/expand-ba3f00f73da43d91e5b17663c4a7d108.png",u="data:image/png;base64,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";var h=n(2610),p=n(5944);function m(e){let{collapse:t,setCollapse:n}=e;const o=r.iv`
+ display: flex;
+ justify-content: end;
+ align-items: flex-end;
+ background-color: transparent;
+ margin-bottom: -10px;
+ `,a=r.iv`
+ /* position: absolute;
+ right: 0; */
+ cursor: pointer;
+ z-index: 10;
+ height: 35px;
+ width: 35px;
+ border: none;
+ background-color: none;
+ justify-self: flex-end;
+ background-color: transparent;
+ margin-right: 5px;
+ margin-bottom: -50px !important;
+ `,i=r.iv`
+ filter: invert(var(--inversion-percentage));
+ `;return(0,p.tZ)("div",{css:o,children:(0,p.tZ)("button",{css:a,onClick:()=>{n(!t)},children:t?(0,p.tZ)("img",{css:i,src:d,className:"icon-tabler-arrow-bar-up"}):(0,p.tZ)("img",{css:i,src:c,className:"icon-tabler-arrow-bar-down"})})})}function g(e){let{url:t}=e;const n=r.iv`
+ position: relative;
+ cursor: pointer;
+ z-index: 10;
+ height: 35px;
+ width: 35px;
+ border: none;
+ background-color: none;
+ justify-self: flex-end;
+ margin-top: -5px;
+ margin-bottom: -20px;
+ background-color: transparent;
+
+
+ `,o=r.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:o,src:u})})}function v(e){let{path:t,javaC:n,javaE:c,cssURL:d,javaHighlight:u,height:v,frame:b,tabs:A}=e;const[x,f]=(0,o.useState)(""),[w,j]=(0,o.useState)(""),[B,y]=(0,o.useState)(""),[D,Z]=(0,o.useState)(!(!n||!c)),[k,S]=(0,o.useState)(!1),[C,R]=(0,o.useState)({}),[E,G]=(0,o.useState)(!1),[L,N]=(0,o.useState)(0),[M,z]=(0,o.useState)(0),[T,V]=(0,o.useState)(25),[H,F]=(0,o.useState)(25),[O,X]=(0,o.useState)(0),[J,Y]=(0,o.useState)(!1),P=(0,o.useRef)(null),I=(0,o.useRef)(null);(0,o.useEffect)((()=>{c&&fetch(c).then((e=>e.text())).then((e=>{j(e);const t=new URL(c).pathname.split("/"),n=t[t.length-1];R((e=>({...e,javaFile:n})))})),n&&fetch(n).then((e=>e.text())).then((e=>{f(e)})),d&&fetch(d).then((e=>e.text())).then((e=>{y(e);const t=new URL(d).pathname.split("/"),n=t[t.length-1];R((e=>({...e,cssFile:n})))})),X(P.current.offsetWidth),console.log(O)}),[]);const W=()=>{G(!1),console.log("Stop Resizing")},q=e=>{if(E){const t=e.clientX-L;M+t>O/3&&(P.current.style.width=`${M+t}px`,I.current.style.right=(T-t<25?25:T-t)+"px",F(T-t<25?25:T-t))}},U=r.iv`
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ margin-bottom: 16px;
+ /* padding: ${"hidden"==b?"0 15px 0 15px;":"7px 15px 0 15px;"}; */
+ /* box-shadow: var(--ifm-global-shadow-lw); */
+ background-color: var(--code-display-color-background);
+ `,K=r.iv`
+ width: 100%;
+ /* padding: 1em; */
+ border: 1px solid var(--ifm-toc-border-color);
+ border-right: none;
+ background-color: transparent;
+ display: flex;
+ position: relative;
+ `,Q=r.iv`
+ min-height: 100px;
+ height: 100%;
+ width: 100%;
+ height: ${v||"100%"};
+ pointer-events: none;
+ `,_=r.iv`
+ display: flex;
+ justify-content: flex-end;
+ opacity: 0;
+ transition: opacity 0.3s ease-in-out;
+ ${k&&"opacity: 1;"};
+ margin: 10px 0 0 0;
+ position: absolute;
+ right: 25px;
+ `,$=r.iv`
+ display: flex;
+ align-items: center;
+ cursor: ew-resize;
+ border-left: 1px solid var(--ifm-toc-border-color);
+ border-right: 1px solid var(--ifm-toc-border-color);
+ background-color: var(--ifm-background-color);
+ `,ee=r.iv`
+ box-shadow: none;
+ background-color: var(--ifm-background-color);
+ margin: 0px;
+ padding: 0px;
+ border: 1px solid var(--ifm-toc-border-color);
+ border-top: none;
+ border-radius: 0px;
+ position: relative;
+
+ div{
+ /* border: none; */
+ border-color: var(--ifm-toc-border-color);
+ padding: 2px 0px 0px 0px;
+ margin: 0px
+ }
+
+ summary{
+ display: flex;
+ width: 100%;
+ justify-content: center;
+ margin: 10px 0;
+ font-weight: bold;
+ ::before{
+ left: auto;
+ margin-left: -100px;
+ --docusaurus-details-decoration-color: var(--ifm-color-primary)
+ }
+ }
+ .margin-top--md{
+ margin-top: 0px !important;
+ }
+ ul{
+ margin: -4px 0px!important;
+ }
+ `,te=r.iv`
+ /* :first-child{
+ margin-left: 1em;
+ } */
+ li[aria-selected="true"]{
+ border-color: var(--ifm-color-primary);
+ }
+
+ .tabs__item{
+ padding: 5px 20px -2px 20px;
+ border-radius: 0px;
+ }
+ `,ne=r.iv`
+ border-radius: 0px;
+ box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset;
+ `;return(0,p.BX)("div",{css:U,onMouseUp:W,onMouseLeave:W,onMouseMove:q,children:["hidden"!=b?(0,p.BX)("div",{onMouseEnter:()=>{S(!0)},onMouseLeave:()=>S(!1),css:K,children:[(0,p.tZ)("iframe",{onMouseUp:W,loading:"lazy",src:t,css:{...Q,pointerEvents:E?"none":"auto"},ref:P,onMouseMove:q}),(0,p.tZ)("div",{css:_,ref:I,children:(0,p.tZ)(g,{url:t})}),(0,p.tZ)("div",{css:$,onMouseDown:e=>{e.preventDefault(),G(!0),N(e.clientX),z(P.current.offsetWidth),V(H),console.log(I.current.right),console.log("Start Resizing")},children:(0,p.tZ)(h.Z,{})})]}):null,(0,p.BX)(s.Z,{css:ee,summary:(0,p.tZ)("summary",{onClick:()=>Y(!J),children:J?"Hide Code":"Show Code"}),children:[n&&c?(0,p.tZ)(m,{collapse:D,setCollapse:Z}):null,d?(0,p.BX)(a.Z,{css:te,children:[(0,p.tZ)(i.Z,{value:A?A[0]:"Java",label:A?A[0]:C.javaFile,default:!0,children:(0,p.tZ)(l.Z,{css:ne,className:"codeDemoBlock",language:"java",showLineNumbers:!0,metastring:u,children:D?x:w})}),(0,p.tZ)(i.Z,{value:A?A[1]:"CSS",label:A?A[1]:C.cssFile,children:(0,p.tZ)(l.Z,{css:ne,className:"codeDemoBlock",language:"css",showLineNumbers:!0,children:B})})]}):(0,p.tZ)(a.Z,{css:te,children:(0,p.tZ)(i.Z,{value:A?A[0]:"Java",label:A?A[0]:C.javaFile,default:!0,children:(0,p.tZ)(l.Z,{css:ne,className:"codeDemoBlock",language:"java",showLineNumbers:!0,metastring:u,children:D?x:w})})})]})]})}},3273:(e,t,n)=>{n.d(t,{Z:()=>c});var o=n(7294),r=n(917),a=n(8230),i=n(4387),s=n(6031);var l=n(5944);function c(e){let{type:t,location:n,top:c,children:d,code:u,suffix:h}=e;const[p,m]=(0,o.useState)("");(0,o.useEffect)((()=>{h||(h=""),m("https://javadoc.io/doc/org.dwcj/dwcj-"+t+"/latest/"+n+".html"+h)}),[]);const g=r.iv`
+ display: inline;
+
+ ${c&&r.iv`
+ width: 100%;
+ display: flex;
+ justify-content: flex-end;
+ margin-top: -33px;
+ margin-bottom: 25px;
+ `}
+ `,v=r.iv`
+ background-color: #0063CC;
+ padding: 0 0 0 5px;
+ :hover{
+ color: white;
+ }
+ `;return(0,l.BX)(l.HY,{children:["true"===c&&(0,l.tZ)("div",{css:g,children:(0,l.tZ)(a.Z,{title:"JavaDoc",arrow:!0,children:(0,l.tZ)(i.Z,{css:v,label:"Java API",component:"a",href:p,icon:(0,l.tZ)(s.Z,{}),clickable:!0,color:"primary",target:"_blank"})})}),"true"!==c&&!u&&(0,l.tZ)("div",{css:g,children:(0,l.tZ)("a",{href:p,target:"_blank",children:d})}),"true"!==c&&u&&(0,l.tZ)("div",{css:g,children:(0,l.tZ)("code",{children:(0,l.tZ)("a",{href:p,target:"_blank",children:d})})})]})}},1415:(e,t,n)=>{n.d(t,{Z:()=>a});n(7294);var o=n(8397),r=n(5893);function a(e){return(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(o.Z,{...e})})}}}]);
\ No newline at end of file
diff --git a/assets/js/700cec1a.ffaaae31.js b/assets/js/700cec1a.ffaaae31.js
deleted file mode 100644
index f5f183f51..000000000
--- a/assets/js/700cec1a.ffaaae31.js
+++ /dev/null
@@ -1,100 +0,0 @@
-"use strict";(self.webpackChunkdwcj_documentation=self.webpackChunkdwcj_documentation||[]).push([[4020],{5338:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>l,default:()=>p,frontMatter:()=>s,metadata:()=>c,toc:()=>u});var o=n(5893),r=n(1151),a=n(6957),i=(n(7796),n(3273));const s={sidebar_position:100,title:"RadioButtonGroup",slug:"radiobuttongroup"},l=void 0,c={id:"components/radio-group",title:"RadioButtonGroup",description:"The RadioButtonGroup class is used to group related radio buttons together, which helps establish the mutual exclusivity among the options within that group. Users can select only one radio button within a given radio group. When a user selects a radio button within a group, any previously selected radio button in the same group automatically becomes deselected. This ensures that only one option can be chosen at a time.",source:"@site/docs/components/radio-group.md",sourceDirName:"components",slug:"/components/radiobuttongroup",permalink:"/docs/components/radiobuttongroup",draft:!1,unlisted:!1,editUrl:"https://github.com/DwcJava/dwcjava.github.io/tree/website/docs/components/radio-group.md",tags:[],version:"current",sidebarPosition:100,frontMatter:{sidebar_position:100,title:"RadioButtonGroup",slug:"radiobuttongroup"},sidebar:"documentationSidebar",previous:{title:"RadioButton",permalink:"/docs/components/radiobutton"},next:{title:"Slider",permalink:"/docs/components/slider"}},d={},u=[{value:"Usages",id:"usages",level:2},{value:"Constructors",id:"constructors",level:2},{value:"Adding and Removing RadioButtons",id:"adding-and-removing-radiobuttons",level:2},{value:"Naming",id:"naming",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:"Best Practices",id:"best-practices",level:2}];function h(e){const t={admonition:"admonition",code:"code",h2:"h2",h3:"h3",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",...(0,r.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(i.Z,{type:"engine",location:"org/dwcj/component/optioninput/RadioButtonGroup",top:"true"}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.code,{children:"RadioButtonGroup"})," class is used to group related radio buttons together, which helps establish the mutual exclusivity among the options within that group. Users can select only one radio button within a given radio group. When a user selects a radio button within a group, any previously selected radio button in the same group automatically becomes deselected. This ensures that only one option can be chosen at a time."]}),"\n",(0,o.jsx)(a.Z,{path:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.radiobuttondemos.RadioButtonGroupDemo",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/radiobuttondemos/RadioButtonGroupDemo.java",cssURL:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/resources/css/radiobuttonstyles/radiobutton_styles.css",height:"200px"}),"\n",(0,o.jsx)(t.admonition,{type:"important",children:(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.code,{children:"RadioButtonGroup"})," component will not render an HTML element on the page. Rather, it is only\r\nlogic that ensures a group of RadioButtons behave as a group instead of individually."]})}),"\n",(0,o.jsx)(t.h2,{id:"usages",children:"Usages"}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.code,{children:"RadioButtonGroup"})," is best used in scenarios where users need to make a single selection from a predefined set of options presented as radio buttons. Here are some examples of when to use the ",(0,o.jsx)(t.code,{children:"RadioButtonGroup"}),":"]}),"\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:"Survey or Questionnaires"}),": ",(0,o.jsx)(t.code,{children:"RadioButtonGroup"})," components are commonly used in surveys or questionnaires where users need to select a single response from a list of options."]}),"\n"]}),"\n",(0,o.jsxs)(t.li,{children:["\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.strong,{children:"Preference Settings"}),": Applications that involve preference or settings panels often use RadioButtonGroup component to allow users to choose a single option from a set of mutually exclusive choices."]}),"\n"]}),"\n",(0,o.jsxs)(t.li,{children:["\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.strong,{children:"Filtering or Sorting"}),": A ",(0,o.jsx)(t.code,{children:"RadioButton"})," can be used in applications that require users to select a single filter or sorting option, such as sorting a list of items by different criteria."]}),"\n"]}),"\n"]}),"\n",(0,o.jsx)(t.h2,{id:"constructors",children:"Constructors"}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.code,{children:"RadioButtonGroup"})," class has four constructors:"]}),"\n",(0,o.jsxs)(t.ol,{children:["\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.code,{children:"RadioButtonGroup()"}),": Creates an empty ",(0,o.jsx)(t.code,{children:"RadioButtonGroup"})," in the unchecked state."]}),"\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.code,{children:"RadioButtonGroup(String name)"}),": Creates a ",(0,o.jsx)(t.code,{children:"RadioButtonGroup"})," with an name."]}),"\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.code,{children:"RadioButtonGroup(RadioButton... buttons)"}),": Creates a ",(0,o.jsx)(t.code,{children:"RadioButtonGroup"})," with one or more ",(0,o.jsx)(t.code,{children:"RadioButton"})," objects assigned to the group."]}),"\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.code,{children:"RadioButtonGroup(String name, RadioButton... buttons)"})," Creates a ",(0,o.jsx)(t.code,{children:"RadioButtonGroup"})," with both a name and one or more ",(0,o.jsx)(t.code,{children:"RadioButton"})," objects assigned to the group."]}),"\n"]}),"\n",(0,o.jsxs)(t.p,{children:["A ",(0,o.jsx)(t.code,{children:"RadioButton"})," component stores the group to which it belongs, which can be accessed via the ",(0,o.jsx)(t.code,{children:"getButtonGroup()"})," method."]}),"\n",(0,o.jsx)(t.h2,{id:"adding-and-removing-radiobuttons",children:"Adding and Removing RadioButtons"}),"\n",(0,o.jsxs)(t.p,{children:["It is possible to add and remove singular or multiple ",(0,o.jsx)(t.code,{children:"RadioButton"})," objects to a group, ensuring that they exhibit mutually-exclusive checking behavior, and are associated with any name that may belong to the group."]}),"\n",(0,o.jsx)(t.h2,{id:"naming",children:"Naming"}),"\n",(0,o.jsxs)(t.p,{children:["The name attribute in a ",(0,o.jsx)(t.code,{children:"RadioButtonGroup"})," groups related RadioButtons together, allowing users to make a single choice from the options provided and enforcing exclusivity among the RadioButtons. The name of a group is not reflected in the DOM, however, and is a convenience utility for the Java developer."]}),"\n",(0,o.jsx)(t.h2,{id:"events",children:"Events"}),"\n",(0,o.jsxs)(t.p,{children:["The ",(0,o.jsx)(t.code,{children:"RadioButtonGroup"})," class provides methods to add and remove change events. These events fire whenever a change is made to an element within the group."]}),"\n",(0,o.jsx)(t.h3,{id:"adding-events",children:"Adding Events"}),"\n",(0,o.jsxs)(t.p,{children:["To add an ",(0,o.jsx)(t.code,{children:"ChangeEvent"})," listener, use the appropriate method:"]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-java",children:"myRadioButtonGroup.addChangeListener( e -> {\r\n //Executed when the event fires\r\n});\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:"myRadioButtonGroup.onChange( e -> {\r\n //Executed when the event fires\r\n});\n"})}),"\n",(0,o.jsx)(t.admonition,{type:"tip",children:(0,o.jsx)(t.p,{children:"Using the event payload that comes with various events to attain information reduces the number of round trips made when instead querying the component for the required information."})}),"\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:"myRadioButton.removeChangeListener(listener);\n"})}),"\n",(0,o.jsx)(t.h2,{id:"best-practices",children:"Best Practices"}),"\n",(0,o.jsx)(t.p,{children:"To ensure an optimal user experience when using the RadioButton 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:"Clearly Label Options"}),": Provide clear and concise labels for each ",(0,o.jsx)(t.code,{children:"RadioButton"})," option to accurately describe the choice. Labels should be easy to understand and distinguish from one another."]}),"\n"]}),"\n",(0,o.jsxs)(t.li,{children:["\n",(0,o.jsxs)(t.p,{children:[(0,o.jsx)(t.strong,{children:"Provide Default Selection"}),": If applicable, consider providing a default selection for Radio buttons to guide users when they first encounter the options. The default selection should align with the most common or preferred choice."]}),"\n"]}),"\n"]})]})}function p(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(h,{...e})}):h(e)}},5162:(e,t,n)=>{n.d(t,{Z:()=>i});n(7294);var o=n(6010);const r={tabItem:"tabItem_Ymn6"};var a=n(5893);function i(e){let{children:t,hidden:n,className:i}=e;return(0,a.jsx)("div",{role:"tabpanel",className:(0,o.Z)(r.tabItem,i),hidden:n,children:t})}},4866:(e,t,n)=>{n.d(t,{Z:()=>j});var o=n(7294),r=n(6010),a=n(2466),i=n(6550),s=n(469),l=n(1980),c=n(7392),d=n(12);function u(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 h(e){const{values:t,children:n}=e;return(0,o.useMemo)((()=>{const e=t??function(e){return u(e).map((e=>{let{props:{value:t,label:n,attributes:o,default:r}}=e;return{value:t,label:n,attributes:o,default:r}}))}(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 r=(0,i.k6)(),a=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)(a),(0,o.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(r.location.search);t.set(a,e),r.replace({...r.location,search:t.toString()})}),[a,r])]}function g(e){const{defaultValue:t,queryString:n=!1,groupId:r}=e,a=h(e),[i,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(!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 o=n.find((e=>e.default))??n[0];if(!o)throw new Error("Unexpected error: 0 tabValues");return o.value}({defaultValue:t,tabValues:a}))),[c,u]=m({queryString:n,groupId:r}),[g,A]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,a]=(0,d.Nk)(n);return[r,(0,o.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:r}),v=(()=>{const e=c??g;return p({value:e,tabValues:a})?e:null})();(0,s.Z)((()=>{v&&l(v)}),[v]);return{selectedValue:i,selectValue:(0,o.useCallback)((e=>{if(!p({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);l(e),u(e),A(e)}),[u,A,a]),tabValues:a}}var A=n(2389);const v={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=n(5893);function f(e){let{className:t,block:n,selectedValue:o,selectValue:i,tabValues:s}=e;const l=[],{blockElementScrollPositionUntilNextRender:c}=(0,a.o5)(),d=e=>{const t=e.currentTarget,n=l.indexOf(t),r=s[n].value;r!==o&&(c(t),i(r))},u=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,b.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.Z)("tabs",{"tabs--block":n},t),children:s.map((e=>{let{value:t,label:n,attributes:a}=e;return(0,b.jsx)("li",{role:"tab",tabIndex:o===t?0:-1,"aria-selected":o===t,ref:e=>l.push(e),onKeyDown:u,onClick:d,...a,className:(0,r.Z)("tabs__item",v.tabItem,a?.className,{"tabs__item--active":o===t}),children:n??t},t)}))})}function x(e){let{lazy:t,children:n,selectedValue:r}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===r));return e?(0,o.cloneElement)(e,{className:"margin-top--md"}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,o.cloneElement)(e,{key:t,hidden:e.props.value!==r})))})}function w(e){const t=g(e);return(0,b.jsxs)("div",{className:(0,r.Z)("tabs-container",v.tabList),children:[(0,b.jsx)(f,{...e,...t}),(0,b.jsx)(x,{...e,...t})]})}function j(e){const t=(0,A.Z)();return(0,b.jsx)(w,{...e,children:u(e.children)},String(t))}},6957:(e,t,n)=>{n.d(t,{Z:()=>A});var o=n(7294),r=n(917),a=n(4866),i=n(5162),s=n(4673),l=n(1750);const c="data:image/png;base64,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",d=n.p+"assets/images/expand-ba3f00f73da43d91e5b17663c4a7d108.png",u="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPAAAADwCAYAAAA+VemSAAAABmJLR0QA/wD/AP+gvaeTAAALyElEQVR4nO3dXahmVR3H8e+M0/FlRouiGV9GxLSkiy7MkW7MDJOCCJ1zkia66KaLLByKEqUizW6EwJjKi24yDfL9pYSEEDSlIMS3JkJrlBzURiUcdXyZF8cu9hnmpOfMec551tr//9rP9wMLQWU9/73W/p398qy9H5AkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSW1bEV1ABauBs4AzgNNm2zrgvcAa4D1xpakHe4DXgJeAF4HHgSeAh4A/z/63wRhKgNcBXwamgU8AU7HlKKk9wF+B24EbgOdjy9E5wF3AXuBtm20JbS/we+Bs1Ltz6U6HoncC2zDaA8CnUXXHAdcTP+G2Yba7gBNRFZuAncRPsm3YbSdwISrmCOCXxE+sbbLaNcDhaCxrgD8SP5m2yWz30n39mFbmr5HWAXcDp0cXoon2CPA54IXoQuaTNcDHAPdheJXDVrqvm3ZGF/JOK6MLmMcRdHcDDa+y+BhwGwmviQ+LLmAe19CtqJIyORl4P/CH6ELmyhbgC4GroouQFnAm8E/g79GFHJDpGvh44B8kv+unibcT+CiwI7oQyHUNfDWGV/m9D/hJdBEHZDkCnwvcE12ENKK36dZO/ym6kCwBfoDuGV6pFfcDn4ouIsMp9DkYXrXnbOCT0UVkCPB3oguQlumS6AKiT6HXAs8Cq4LrkJZjH7CeCX6zx7epuxj9TbrnhzcCJ+H7sCbBKrq5ngZ+Q7cP1NzHNvezWTndT72B/S3dd8uabCcAN1L3iaWJtBrYTfkB3Qd8vcftUBu+Qbdv1DjLO7LH7Ujjs9T5i3hRnxuhpnyTOvvceX1uRBbfo85ps3QoN1F+v7us1y1I4jrKDuIbeM2rxa2n/I2ta3vdgjkivwc+rXB/twDPFe5Tw/MMcGvhPkvvyyOLDPCxhfu7o3B/Gq47C/dXel8eWWSAjy7c30OF+9Nwld5XSu/LI4tcibWbsr9hNEX3cxnSYqbo9r9SdtO9Cqp3kQF+u3B/0ctC1ZZB7H8ZHmaQtEwGWGqYAZYaZoClhhlgqWEGWGqYAZYaZoClhhlgqWEGeFimgE10r5DZRre0tMYD7KXbHuBp4Gd0P+quBpTeCSbdDLCd+DCO2/bRz0+XuP+NyQEsYyWwhfjglW6PUvd1w+5/Y3IAyxhieOeGuBb3vzE5gOObIT5ktVut0+lB7H8+TtiuKeBxul+OH7J9wAeAVwr3O4j9z7vQ7Zpm+OGF7jr4yugisjLA7doYXUCPpqMLyMoAt+vM6AJ6dFx0AVl5DdyuNwh6D1OQ0vM7iP3PI3C7JvXOu+YwwO3aEV2A4hngdj0YXYDiGeB2+UsU8iZWwyZlIccB3sSah0fgdu0BLokuQrEMcNtuo3uGVurdIBaTJzDUxwlrz2/2+tJzAMsaygP9BngJvIk1LFN064YvADYAJ1H3ofg+eRMrmUH8BRywlcCviT/yegROygHMK1t4DXBCDmBOGcNrgBNyAPPJGl4DnJADmEvm8BrghBzAPLKH1wAn5ADm0EJ4DXBCDmC8VsJrgBNyAGO1FF4DnJADGKe18BrghBzAGC2G1wAn5AD2r9XwGuCEHMB+tRxeA5yQA9if1sNrgBNyAPsREd4bKvRZWvb60nMA64sK72EV+i0te33pOYB1RYaXCn2Xlr2+9BzAeqLDS4X+S8teX3oOYB0ZwkuFzygte33pOYDlZQkvFT6ntOz1pecAlpUpvFT4rNKy15eeA1hOtvBS4fNKy15feg5gGRnDS4XPLC17fek5gOPLGl4qfG5p2etLzwEcT+bwUuGzS8teX3oO4PJlDy8VPr+07PWl5wAuTwvhpUINpWWvLz0HcOlaCS8V6igte33pOYBL01J4qVBLadnrS88BHF1r4aVCPaVlry+91yk3eK/1XHufWgwv5J9fAzympyg3eE/1XHtfWg0v5J/fQQR4ZdQHAw8m7SuLlcC1wFd7/Mzrga8AbxXoy/kduE2U++v3pZ5r78MW+j3yXkfZP+jZ53cQR+BIU5Q5zfo3cHi/pVc3Q9vhhfzza4ALKLGjzvRedV2ldvxRW6lr3vlknl8DXMg4p4pbAuqtreSpZ2R4D8g6vwa4kJUsb5K3EHsTrpab6Ce8NU6b55N1fg1wYTPAdhYfqO0M77R5rj5On/sK71zZ5tcAVzBFdwp5I7AN2Dvbts3+u02z/8+QvUHd8PZx2ryQTPNrgFVFyRVMmcKbjQFWFbVOoSNOmzMzwKqixk0sw/tuBlhVlP4aydPm+RlgVVFyIYfhXZgBVjUlVjB52nxoBlhVjbOCyfAuzgCrqqwrmIbCAKsX2VYwDYUBVm8yrWAaikEEeEXUB0vBSocuJEteK0kNM8BSwwyw1DADLDXMAEsNM8BSwwyw1DADLDXMAEsNWxVdwBynABcAHwfWA+tm/7k6qJ7XgGeA52f/+TBwJ/BkUD1SOuuAHwNbKb82tVbbClw5W7vaNYi10FFWA5cCLxMfyOW2XcBVwDGFx0b9MMDLNAPsID6ApdoOYGPREVIfDPASraA76r5FfOhKt/10R2NvCrbDAC/BUcAtxAetdrsJOLLQmKkuAzyiFXQPnUeHq692Gz5n3QIDPKIriA9V3+2HJQZOVRngEczQXR9GB6rvth9vbGU3iADXPNVbA/wLOLbiZ2T2AnAq8Gp0IZpX6dAN7pU632VywwuwFvhWdBEatlp/NdbSvTHx6Er9t2IX8GG674qVi0fgQ7gYwwvdZcRF0UVouGoF2Bs4B10QXYCGq8Zh/1S6m1c66CM4Jtl4Cr2A8yv02bovRBegYaoR4A0V+mzd6dEFaJhqBPj4Cn22zjFRFTUCfFyFPlt3QnQBGqYaAZ7kxRsL8QisKmrcORvE3T2Gsx2a3yDm1wfQpYYZYKlhBlhqmAGWGmaApYYZYKlhBlhqmAGWGmaApYYZYE2iqcL97S7c38gMsCZR6YdLwt48aoA1iUo/s26ApR6Vfk9Z2FtHDbAmzYl0vxhS0hOF+xuZAdakuRo4vHCfYQGuYRC/OTNCXa1shw7aTJ3fwvpMnxtR21B2/KFshzqbqfPj8m8ysN+EHsqOP5TtmHQnUvfH5e/tb1PebVXkh0sVTNF9z7uB7m7zDOWveee6vWLfi/KdWAtrcTumgGm6HXcDcBL+ka5pL90fixejCnByh2MG+CndKaP6cTeB4a1lKNeOrWzHSmBLhXpti7ezRpif5rSy4y+mle0wvDHtvhHmpkmt7PiLaWE7ZirUaVu87QfOHmF+mtTCjj+K7NsxBTxVoU7b4u36EeanFy6lbNc0cHJ0ERPoJeCS6CIOMMDt2hhdwIT6GvB8dBEHGOB2nRldwAT6BcELN97JhRwLy74drzOwNbjJ3QN8HtgTXchcNRZy7ALWFOwv8kZWKa9EF6Cx/A34IsnCC3VOoZ+r0GfraoxJ2FsgJszDwHnAy9GFzKdGgP9Toc/W1QjwgxX61P+7BzgHeCG4jgV5BO5HjTG5o0KfOujndNe8YS+sG0WNAD9Uoc/W1RiTO4CnK/Q76V6iW+G2mYTXvH04hfiVMtlarQUXLqUs1/bTrbBat6QZGKitxE9IlvbomGO5GB9mGL/dx4DXNi/HlcRPSpZ2xXhDuSgfJ1xe2wP8joE+EjiuD9Lddo+epOj2Kv2dks0A23vYppbbm3TvsLqYbh/VIVxO/IRFtx+MPYpLMwVsAm4EttG98iV6DPpuu4H/Ak8CfwF+BVxG9+pXV64twWq6r0+iJzSqPTc7BlKzpunu7kWHqe/2FnB+gfGTwl1OfKD6bt8vMnJSAiuAG4gPVV/tVuKeoJKqOBK4mfhw1W43440SDdQK4FLq/D5NdNsPXIUvSNAE2Miw7k4/S/kfjJZSO4ruaLyT+AAut+2iO+oeXXhspGasBX4EPEZ8IEdtj83WvLbCeEhLkulu6Yfovjs9A1hPtwRxPWVfz7MUu4Bn6F5Q8CzwCHAn3buYJUmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEnA/wDL76bzm26ebQAAAABJRU5ErkJggg==";var h=n(2949),p=n(5944);function m(e){let{collapse:t,setCollapse:n}=e;const o=r.iv`
- display: flex;
- justify-content: end;
- margin-bottom: -30px;
- background-color: transparent;
- `,a=r.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;
- `,i=r.iv`
- filter: invert(var(--inversion-percentage));
- `;return(0,p.tZ)("div",{css:o,children:(0,p.tZ)("button",{css:a,onClick:()=>{n(!t)},children:t?(0,p.tZ)("img",{css:i,src:d,className:"icon-tabler-arrow-bar-up"}):(0,p.tZ)("img",{css:i,src:c,className:"icon-tabler-arrow-bar-down"})})})}function g(e){let{url:t}=e;const n=r.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;
-
-
- `,o=r.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:o,src:u})})}function A(e){let{path:t,javaC:n,javaE:c,cssURL:d,javaHighlight:u,height:A,frame:v,tabs:b}=e;const[f,x]=(0,o.useState)(""),[w,j]=(0,o.useState)(""),[B,y]=(0,o.useState)(""),[D,Z]=(0,o.useState)(!(!n||!c)),[k,C]=(0,o.useState)(!1),[E,S]=(0,o.useState)({});(0,o.useEffect)((()=>{c&&fetch(c).then((e=>e.text())).then((e=>{j(e);const t=new URL(c).pathname.split("/"),n=t[t.length-1];S((e=>({...e,javaFile:n})))})),n&&fetch(n).then((e=>e.text())).then((e=>{x(e)})),d&&fetch(d).then((e=>e.text())).then((e=>{y(e);const t=new URL(d).pathname.split("/"),n=t[t.length-1];S((e=>({...e,cssFile:n})))}))}),[]);const R=r.iv`
- display: flex;
- flex-direction: column;
- background-color: var(--code-display-color);
- width: 100%;
- margin-bottom: 16px;
- padding: ${"hidden"==v?"0 15px 0 15px;":"7px 15px 0 15px;"};
- box-shadow: var(--ifm-global-shadow-lw);
- `,G=r.iv`
- min-height: 100px;
- height: 100%;
- width: 100%;
- height: ${A};
- `,L=r.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;
- }
- }
-
- `,N=r.iv`
- width: 100%;
- `,T=r.iv`
- display: flex;
- justify-content: flex-end;
- opacity: 0;
- transition: opacity 0.3s ease-in-out;
- ${k&&"opacity: 1;"};
-
- `;return(0,p.BX)("div",{css:R,children:["hidden"!=v?(0,p.BX)("div",{onMouseEnter:()=>{C(!0)},onMouseLeave:()=>C(!1),css:N,children:[(0,p.tZ)("div",{css:T,children:(0,p.tZ)(g,{url:t})}),(0,p.tZ)("iframe",{loading:"lazy",src:t+"&theme="+("dark"===(0,h.I)().colorMode?"dark":"light"),css:G})]}):null,(0,p.BX)(s.Z,{css:L,summary:(0,p.tZ)("summary",{children:"Show Code"}),children:[n&&c?(0,p.tZ)(m,{collapse:D,setCollapse:Z}):null,d?(0,p.BX)(a.Z,{children:[(0,p.tZ)(i.Z,{value:b?b[0]:"Java",label:b?b[0]:E.javaFile,default:!0,children:(0,p.tZ)(l.Z,{className:"codeDemoBlock",language:"java",showLineNumbers:!0,metastring:u,children:D?f:w})}),(0,p.tZ)(i.Z,{value:b?b[1]:"CSS",label:b?b[1]:E.cssFile,children:(0,p.tZ)(l.Z,{className:"codeDemoBlock",language:"css",showLineNumbers:!0,children:B})})]}):(0,p.tZ)(a.Z,{children:(0,p.tZ)(i.Z,{value:b?b[0]:"Java",label:b?b[0]:E.javaFile,default:!0,children:(0,p.tZ)(l.Z,{className:"codeDemoBlock",language:"java",showLineNumbers:!0,metastring:u,children:D?f:w})})})]})]})}},3273:(e,t,n)=>{n.d(t,{Z:()=>c});var o=n(7294),r=n(917),a=n(8230),i=n(4387),s=n(6770);var l=n(5944);function c(e){let{type:t,location:n,top:c,children:d,code:u,suffix:h}=e;const[p,m]=(0,o.useState)("");(0,o.useEffect)((()=>{h||(h=""),m("https://javadoc.io/doc/org.dwcj/dwcj-"+t+"/latest/"+n+".html"+h)}),[]);const g=r.iv`
- display: inline;
-
- ${c&&r.iv`
- width: 100%;
- display: flex;
- justify-content: flex-end;
- margin-top: -33px;
- margin-bottom: 25px;
- `}
- `,A=r.iv`
- background-color: #0063CC;
- :hover{
- color: white;
- }
- `;return(0,l.BX)(l.HY,{children:["true"===c&&(0,l.tZ)("div",{css:g,children:(0,l.tZ)(a.Z,{title:"JavaDoc",arrow:!0,children:(0,l.tZ)(i.Z,{css:A,label:"Java API",component:"a",href:p,icon:(0,l.tZ)(s.Z,{}),clickable:!0,color:"primary",target:"_blank"})})}),"true"!==c&&!u&&(0,l.tZ)("div",{css:g,children:(0,l.tZ)("a",{href:p,target:"_blank",children:d})}),"true"!==c&&u&&(0,l.tZ)("div",{css:g,children:(0,l.tZ)("code",{children:(0,l.tZ)("a",{href:p,target:"_blank",children:d})})})]})}},1415:(e,t,n)=>{n.d(t,{Z:()=>a});n(7294);var o=n(8397),r=n(5893);function a(e){return(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(o.Z,{...e})})}}}]);
\ No newline at end of file
diff --git a/assets/js/76eefc0f.5c007295.js b/assets/js/76eefc0f.e11a4af3.js
similarity index 86%
rename from assets/js/76eefc0f.5c007295.js
rename to assets/js/76eefc0f.e11a4af3.js
index a9bc476c8..64d15d480 100644
--- a/assets/js/76eefc0f.5c007295.js
+++ b/assets/js/76eefc0f.e11a4af3.js
@@ -1,4 +1,4 @@
-"use strict";(self.webpackChunkdwcj_documentation=self.webpackChunkdwcj_documentation||[]).push([[4718],{7335:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>r,contentTitle:()=>c,default:()=>p,frontMatter:()=>o,metadata:()=>d,toc:()=>a});var s=n(5893),i=n(1151),l=n(3273);const o={sidebar_position:0,title:"ListOpenEvent",sidebar_class_name:"sidebar--item__hidden",slug:"ListOpenEvent"},c=void 0,d={id:"components/events/list-open-event",title:"ListOpenEvent",description:"This event is triggered when the user opens a List-based component. It provides essential information about the selected item and allows developers to implement custom actions or responses when an item is chosen.",source:"@site/docs/components/events/list-open-event.md",sourceDirName:"components/events",slug:"/components/events/ListOpenEvent",permalink:"/docs/components/events/ListOpenEvent",draft:!1,unlisted:!1,editUrl:"https://github.com/DwcJava/dwcjava.github.io/tree/website/docs/components/events/list-open-event.md",tags:[],version:"current",sidebarPosition:0,frontMatter:{sidebar_position:0,title:"ListOpenEvent",sidebar_class_name:"sidebar--item__hidden",slug:"ListOpenEvent"},sidebar:"documentationSidebar",previous:{title:"ListEvent",permalink:"/docs/components/events/ListEvent"},next:{title:"ListSelectEvent",permalink:"/docs/components/events/ListSelectEvent"}},r={},a=[{value:"Event Payload",id:"event-payload",level:2},{value:"See Also",id:"see-also",level:2},{value:"Events",id:"events",level:3},{value:"Components",id:"components",level:3}];function h(e){const t={a:"a",code:"code",h2:"h2",h3:"h3",li:"li",p:"p",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,i.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(l.Z,{type:"engine",location:"org/dwcj/component/event/ListOpenEvent",top:"true"}),"\n",(0,s.jsx)(t.p,{children:"This event is triggered when the user opens a List-based component. It provides essential information about the selected item and allows developers to implement custom actions or responses when an item is chosen."}),"\n",(0,s.jsx)(t.h2,{id:"event-payload",children:"Event Payload"}),"\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:"Method"}),(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)(t.code,{children:"getSelectedIndex()"})}),(0,s.jsx)(t.td,{children:"Returns the selected index, or -1 if no item is selected."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"center"},children:(0,s.jsx)(t.code,{children:"getSelectedItem()"})}),(0,s.jsx)(t.td,{children:"Returns the selected item, or null if no item is selected."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"center"},children:(0,s.jsx)(t.code,{children:"getSelectedIndices()"})}),(0,s.jsx)(t.td,{children:"Returns a list of selected indices, or an empty list if no item is selected. If the list doesn't support multiple selection, the list will contain only one item."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"center"},children:(0,s.jsx)(t.code,{children:"getSelectedItems()"})}),(0,s.jsx)(t.td,{children:"Returns a list of selected items. If the list doesn't support multiple selection, the list will contain only one item."})]})]})]}),"\n",(0,s.jsx)(t.h2,{id:"see-also",children:"See Also"}),"\n",(0,s.jsx)(t.h3,{id:"events",children:"Events"}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"./event",children:"Event"})}),"\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"./ListCloseEvent",children:"ListCloseEvent"})}),"\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"./ListSelectEvent",children:"ListSelectEvent"})}),"\n"]}),"\n",(0,s.jsx)(t.h3,{id:"components",children:"Components"}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"../list-components/ChoiceBox",children:"ChoiceBox"})}),"\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"../list-components/ComboBox",children:"ComboBox"})}),"\n"]})]})}function p(e={}){const{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(h,{...e})}):h(e)}},3273:(e,t,n)=>{n.d(t,{Z:()=>r});var s=n(7294),i=n(917),l=n(8230),o=n(4387),c=n(6770);var d=n(5944);function r(e){let{type:t,location:n,top:r,children:a,code:h,suffix:p}=e;const[v,m]=(0,s.useState)("");(0,s.useEffect)((()=>{p||(p=""),m("https://javadoc.io/doc/org.dwcj/dwcj-"+t+"/latest/"+n+".html"+p)}),[]);const x=i.iv`
+"use strict";(self.webpackChunkdwcj_documentation=self.webpackChunkdwcj_documentation||[]).push([[4718],{7335:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>r,contentTitle:()=>c,default:()=>p,frontMatter:()=>o,metadata:()=>d,toc:()=>a});var s=n(5893),i=n(1151),l=n(3273);const o={sidebar_position:0,title:"ListOpenEvent",sidebar_class_name:"sidebar--item__hidden",slug:"ListOpenEvent"},c=void 0,d={id:"components/events/list-open-event",title:"ListOpenEvent",description:"This event is triggered when the user opens a List-based component. It provides essential information about the selected item and allows developers to implement custom actions or responses when an item is chosen.",source:"@site/docs/components/events/list-open-event.md",sourceDirName:"components/events",slug:"/components/events/ListOpenEvent",permalink:"/docs/components/events/ListOpenEvent",draft:!1,unlisted:!1,editUrl:"https://github.com/DwcJava/dwcjava.github.io/tree/website/docs/components/events/list-open-event.md",tags:[],version:"current",sidebarPosition:0,frontMatter:{sidebar_position:0,title:"ListOpenEvent",sidebar_class_name:"sidebar--item__hidden",slug:"ListOpenEvent"},sidebar:"documentationSidebar",previous:{title:"ListEvent",permalink:"/docs/components/events/ListEvent"},next:{title:"ListSelectEvent",permalink:"/docs/components/events/ListSelectEvent"}},r={},a=[{value:"Event Payload",id:"event-payload",level:2},{value:"See Also",id:"see-also",level:2},{value:"Events",id:"events",level:3},{value:"Components",id:"components",level:3}];function h(e){const t={a:"a",code:"code",h2:"h2",h3:"h3",li:"li",p:"p",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,i.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(l.Z,{type:"engine",location:"org/dwcj/component/event/ListOpenEvent",top:"true"}),"\n",(0,s.jsx)(t.p,{children:"This event is triggered when the user opens a List-based component. It provides essential information about the selected item and allows developers to implement custom actions or responses when an item is chosen."}),"\n",(0,s.jsx)(t.h2,{id:"event-payload",children:"Event Payload"}),"\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:"Method"}),(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)(t.code,{children:"getSelectedIndex()"})}),(0,s.jsx)(t.td,{children:"Returns the selected index, or -1 if no item is selected."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"center"},children:(0,s.jsx)(t.code,{children:"getSelectedItem()"})}),(0,s.jsx)(t.td,{children:"Returns the selected item, or null if no item is selected."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"center"},children:(0,s.jsx)(t.code,{children:"getSelectedIndices()"})}),(0,s.jsx)(t.td,{children:"Returns a list of selected indices, or an empty list if no item is selected. If the list doesn't support multiple selection, the list will contain only one item."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"center"},children:(0,s.jsx)(t.code,{children:"getSelectedItems()"})}),(0,s.jsx)(t.td,{children:"Returns a list of selected items. If the list doesn't support multiple selection, the list will contain only one item."})]})]})]}),"\n",(0,s.jsx)(t.h2,{id:"see-also",children:"See Also"}),"\n",(0,s.jsx)(t.h3,{id:"events",children:"Events"}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"./event",children:"Event"})}),"\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"./ListCloseEvent",children:"ListCloseEvent"})}),"\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"./ListSelectEvent",children:"ListSelectEvent"})}),"\n"]}),"\n",(0,s.jsx)(t.h3,{id:"components",children:"Components"}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"../list-components/ChoiceBox",children:"ChoiceBox"})}),"\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"../list-components/ComboBox",children:"ComboBox"})}),"\n"]})]})}function p(e={}){const{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(h,{...e})}):h(e)}},6031:(e,t,n)=>{var s=n(4836);t.Z=void 0;var i=s(n(4938)),l=n(5893),o=(0,i.default)((0,l.jsx)("path",{d:"m19 1-5 5v11l5-4.5V1zM1 6v14.65c0 .25.25.5.5.5.1 0 .15-.05.25-.05C3.1 20.45 5.05 20 6.5 20c1.95 0 4.05.4 5.5 1.5V6c-1.45-1.1-3.55-1.5-5.5-1.5S2.45 4.9 1 6zm22 13.5V6c-.6-.45-1.25-.75-2-1v13.5c-1.1-.35-2.3-.5-3.5-.5-1.7 0-4.15.65-5.5 1.5v2c1.35-.85 3.8-1.5 5.5-1.5 1.65 0 3.35.3 4.75 1.05.1.05.15.05.25.05.25 0 .5-.25.5-.5v-1.1z"}),"AutoStories");t.Z=o},3273:(e,t,n)=>{n.d(t,{Z:()=>r});var s=n(7294),i=n(917),l=n(8230),o=n(4387),c=n(6031);var d=n(5944);function r(e){let{type:t,location:n,top:r,children:a,code:h,suffix:p}=e;const[v,m]=(0,s.useState)("");(0,s.useEffect)((()=>{p||(p=""),m("https://javadoc.io/doc/org.dwcj/dwcj-"+t+"/latest/"+n+".html"+p)}),[]);const x=i.iv`
display: inline;
${r&&i.iv`
@@ -10,6 +10,7 @@
`}
`,u=i.iv`
background-color: #0063CC;
+ padding: 0 0 0 5px;
:hover{
color: white;
}
diff --git a/assets/js/79697695.02ba1ba4.js b/assets/js/79697695.02ba1ba4.js
deleted file mode 100644
index 62bffcce6..000000000
--- a/assets/js/79697695.02ba1ba4.js
+++ /dev/null
@@ -1,100 +0,0 @@
-"use strict";(self.webpackChunkdwcj_documentation=self.webpackChunkdwcj_documentation||[]).push([[1588],{3751:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>o,default:()=>p,frontMatter:()=>a,metadata:()=>d,toc:()=>h});var i=n(5893),s=n(1151),r=(n(6957),n(7796),n(3273)),l=n(2665);const a={sidebar_position:6,title:"TextField",slug:"textfield"},o=void 0,d={id:"components/fields/text-field",title:"TextField",description:"The DateTimeField class is a Field component, and as such shares all of the commonalities belonging to a Field. Please refer to the Field documentation page for an overview of Field properties, events, and other important information.",source:"@site/docs/components/fields/text-field.md",sourceDirName:"components/fields",slug:"/components/fields/textfield",permalink:"/docs/components/fields/textfield",draft:!1,unlisted:!1,editUrl:"https://github.com/DwcJava/dwcjava.github.io/tree/website/docs/components/fields/text-field.md",tags:[],version:"current",sidebarPosition:6,frontMatter:{sidebar_position:6,title:"TextField",slug:"textfield"},sidebar:"documentationSidebar",previous:{title:"PasswordField",permalink:"/docs/components/fields/passwordfield"},next:{title:"TimeField",permalink:"/docs/components/fields/timefield"}},c={},h=[{value:"Usages",id:"usages",level:3},{value:"Constructors",id:"constructors",level:3},{value:"Types",id:"types",level:3},{value:"Placeholder Text",id:"placeholder-text",level:3},{value:"Selected Text",id:"selected-text",level:3},{value:"Best Practices",id:"best-practices",level:3}];function u(e){const t={a:"a",admonition:"admonition",code:"code",h3:"h3",li:"li",mdxAdmonitionTitle:"mdxAdmonitionTitle",ol:"ol",p:"p",strong:"strong",ul:"ul",...(0,s.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.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,i.jsx)(l.Z,{tooltipText:"The name of the web component that will render in the DOM.",label:"bbj-editbox",href:"https://basishub.github.io/basis-next/#/web-components/bbj-editbox",clickable:!1,iconName:"code"}),"\n",(0,i.jsx)(r.Z,{type:"engine",location:"org/dwcj/component/field/TextField",top:"true"}),"\n",(0,i.jsxs)(t.admonition,{type:"success",children:[(0,i.jsx)(t.mdxAdmonitionTitle,{children:(0,i.jsx)(t.strong,{children:"Important"})}),(0,i.jsxs)(t.p,{children:["The ",(0,i.jsx)(t.code,{children:"DateTimeField"})," class is a Field component, and as such shares all of the commonalities belonging to a Field. Please refer to the ",(0,i.jsx)(t.strong,{children:(0,i.jsx)(t.a,{href:"/docs/components/fields",children:"Field documentation page"})})," for an overview of Field properties, events, and other important information."]})]}),"\n",(0,i.jsxs)(t.p,{children:["The ",(0,i.jsx)(t.code,{children:"TextField"})," component allows users to enter and edit text in a single line. It can be configured to display a specific virtual keyboard, such as a numeric keypad, email input, telephone input, or URL input. The component also provides built-in validation to reject values that do not adhere to the specified type."]}),"\n",(0,i.jsx)(t.h3,{id:"usages",children:"Usages"}),"\n",(0,i.jsxs)(t.p,{children:["The ",(0,i.jsx)(t.code,{children:"TextField"})," is suitable for a wide range of scenarios where text input or editing is required. Here are some examples of when to use the ",(0,i.jsx)(t.code,{children:"TextField"}),":"]}),"\n",(0,i.jsxs)(t.ol,{children:["\n",(0,i.jsxs)(t.li,{children:["\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.strong,{children:"Form Inputs"}),": A ",(0,i.jsx)(t.code,{children:"TextField"})," is commonly used in forms for capturing user input, such as names, addresses, or comments. It is best to use a ",(0,i.jsx)(t.code,{children:"TextField"})," in these applications when the input is generally short enough to fit on one line."]}),"\n"]}),"\n",(0,i.jsxs)(t.li,{children:["\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.strong,{children:"Search Functionality"}),": ",(0,i.jsx)(t.code,{children:"TextField"})," can be used to provide a search box, allowing users to input search queries."]}),"\n"]}),"\n",(0,i.jsxs)(t.li,{children:["\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.strong,{children:"Text Editing"}),": A ",(0,i.jsx)(t.code,{children:"TextField"})," is ideal for applications that require text editing or content creation, such as document editors, chat applications, or note-taking apps."]}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(t.h3,{id:"constructors",children:"Constructors"}),"\n",(0,i.jsxs)(t.p,{children:["The ",(0,i.jsx)(t.code,{children:"TextField"})," class has three constructors:"]}),"\n",(0,i.jsxs)(t.ol,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.code,{children:"TextField(Type type, String label, String value)"}),": Creates a ",(0,i.jsx)(t.code,{children:"TextField"})," with a given applicable type, a label, and a value."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.code,{children:"TextField(Type type, String label)"}),": Creates a ",(0,i.jsx)(t.code,{children:"TextField"})," with a given applicable type and label."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.code,{children:"TextField(String label, String value)"}),": Creates a ",(0,i.jsx)(t.code,{children:"TextField"})," with a given label and a value."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.code,{children:"TextField(Type type)"}),": Creates a ",(0,i.jsx)(t.code,{children:"TextField"})," with a given applicable type."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.code,{children:"TextField(String label)"}),": Creates a ",(0,i.jsx)(t.code,{children:"TextField"})," with a given label."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.code,{children:"TextField()"}),": Creates a ",(0,i.jsx)(t.code,{children:"TextField"})," without any provided information."]}),"\n"]}),"\n",(0,i.jsx)(t.h3,{id:"types",children:"Types"}),"\n",(0,i.jsxs)(t.p,{children:["You can specify the type of the TextField using the ",(0,i.jsx)(t.code,{children:"setType"})," method. Similarly, the type can be retrieved using the ",(0,i.jsx)(t.code,{children:"getType"})," method, which will return an enum value."]}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:["\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"Type.TEXT"}),": This is the default value for a ",(0,i.jsx)(t.code,{children:"TextField"}),", and automatically removes line breaks from the input value"]}),"\n"]}),"\n",(0,i.jsxs)(t.li,{children:["\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"Type.EMAIL"}),": This configuration option is used for editing an email address. It has a relevant keyboard in supporting browsers and devices with dynamic keyboards."]}),"\n"]}),"\n",(0,i.jsxs)(t.li,{children:["\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"Type.TEL"}),": This option is used for entering a telephone number. The field will display a telephone keypad in some devices with dynamic keypads."]}),"\n"]}),"\n",(0,i.jsxs)(t.li,{children:["\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"Type.URL"}),": A field for entering a URL. It has a relevant keyboard in supporting browsers and devices with dynamic keyboards."]}),"\n"]}),"\n",(0,i.jsxs)(t.li,{children:["\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"Type.SEARCH"}),": A single-line text field for entering search strings. Line-breaks are automatically removed from the input value."]}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(t.h3,{id:"placeholder-text",children:"Placeholder Text"}),"\n",(0,i.jsxs)(t.p,{children:["You can set placeholder text for the ",(0,i.jsx)(t.code,{children:"TextField"})," using the ",(0,i.jsx)(t.code,{children:"setPlaceholder"})," method. The placeholder text is displayed when the field is empty, helping to prompt the user to enter appropriate input into the ",(0,i.jsx)(t.code,{children:"TextField"}),"."]}),"\n",(0,i.jsx)(t.h3,{id:"selected-text",children:"Selected Text"}),"\n",(0,i.jsxs)(t.p,{children:["It is possible to interact with the ",(0,i.jsx)(t.code,{children:"TextField"})," class to retrieve a user's selected text, and to get information about the user's selection. You can retrieve the selected text in the ",(0,i.jsx)(t.code,{children:"TextField"})," using the ",(0,i.jsx)(t.code,{children:"getSelectedText"})," method. This behavior would commonly be used in conjunction with an event. Similarly, it is possible to retrieve the current selection range of the ",(0,i.jsx)(t.code,{children:"TextField"})," using the ",(0,i.jsx)(t.code,{children:"getSelectionRange"})," method. This returns a ",(0,i.jsx)(t.code,{children:"SelectionRange"})," object representing the start and end indices of the selected text."]}),"\n",(0,i.jsx)(t.h3,{id:"best-practices",children:"Best Practices"}),"\n",(0,i.jsxs)(t.p,{children:["The following section outlines some suggested best practices for utilization of the ",(0,i.jsx)(t.code,{children:"TextField"}),"."]}),"\n",(0,i.jsxs)(t.ol,{children:["\n",(0,i.jsxs)(t.li,{children:["\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.strong,{children:"Provide Clear Labels and Instructions"}),": Label the ",(0,i.jsx)(t.code,{children:"TextField"})," clearly to indicate the type of information users should enter. Consider providing additional instructional text or placeholder values to guide users and set expectations for the required input."]}),"\n"]}),"\n",(0,i.jsxs)(t.li,{children:["\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.strong,{children:"Spell Checking and Auto-Complete"}),": When applicable, consider utilizing spellcheck and/or autocomplete functionality to the ",(0,i.jsx)(t.code,{children:"TextField"}),". These features can help users input information faster and reduce errors by providing suggested values based on previous inputs or predefined options."]}),"\n"]}),"\n",(0,i.jsxs)(t.li,{children:["\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.strong,{children:"Consider Accessibility"}),": Utilize the ",(0,i.jsx)(t.code,{children:"TextField"})," component with accessibility in mind, adhering to accessibility standards such as proper labeling, keyboard navigation support, and compatibility with assistive technologies. Ensure that users with disabilities can interact with the ",(0,i.jsx)(t.code,{children:"TextField"})," effectively."]}),"\n"]}),"\n"]})]})}function p(e={}){const{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(u,{...e})}):u(e)}},5162:(e,t,n)=>{n.d(t,{Z:()=>l});n(7294);var i=n(6010);const s={tabItem:"tabItem_Ymn6"};var r=n(5893);function l(e){let{children:t,hidden:n,className:l}=e;return(0,r.jsx)("div",{role:"tabpanel",className:(0,i.Z)(s.tabItem,l),hidden:n,children:t})}},4866:(e,t,n)=>{n.d(t,{Z:()=>j});var i=n(7294),s=n(6010),r=n(2466),l=n(6550),a=n(469),o=n(1980),d=n(7392),c=n(12);function h(e){return i.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,i.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,i.useMemo)((()=>{const e=t??function(e){return h(e).map((e=>{let{props:{value:t,label:n,attributes:i,default:s}}=e;return{value:t,label:n,attributes:i,default:s}}))}(n);return function(e){const t=(0,d.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 s=(0,l.k6)(),r=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,o._X)(r),(0,i.useCallback)((e=>{if(!r)return;const t=new URLSearchParams(s.location.search);t.set(r,e),s.replace({...s.location,search:t.toString()})}),[r,s])]}function x(e){const{defaultValue:t,queryString:n=!1,groupId:s}=e,r=u(e),[l,o]=(0,i.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 i=n.find((e=>e.default))??n[0];if(!i)throw new Error("Unexpected error: 0 tabValues");return i.value}({defaultValue:t,tabValues:r}))),[d,h]=m({queryString:n,groupId:s}),[x,A]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[s,r]=(0,c.Nk)(n);return[s,(0,i.useCallback)((e=>{n&&r.set(e)}),[n,r])]}({groupId:s}),b=(()=>{const e=d??x;return p({value:e,tabValues:r})?e:null})();(0,a.Z)((()=>{b&&o(b)}),[b]);return{selectedValue:l,selectValue:(0,i.useCallback)((e=>{if(!p({value:e,tabValues:r}))throw new Error(`Can't select invalid tab value=${e}`);o(e),h(e),A(e)}),[h,A,r]),tabValues:r}}var A=n(2389);const b={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var g=n(5893);function v(e){let{className:t,block:n,selectedValue:i,selectValue:l,tabValues:a}=e;const o=[],{blockElementScrollPositionUntilNextRender:d}=(0,r.o5)(),c=e=>{const t=e.currentTarget,n=o.indexOf(t),s=a[n].value;s!==i&&(d(t),l(s))},h=e=>{let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const n=o.indexOf(e.currentTarget)+1;t=o[n]??o[0];break}case"ArrowLeft":{const n=o.indexOf(e.currentTarget)-1;t=o[n]??o[o.length-1];break}}t?.focus()};return(0,g.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:r}=e;return(0,g.jsx)("li",{role:"tab",tabIndex:i===t?0:-1,"aria-selected":i===t,ref:e=>o.push(e),onKeyDown:h,onClick:c,...r,className:(0,s.Z)("tabs__item",b.tabItem,r?.className,{"tabs__item--active":i===t}),children:n??t},t)}))})}function f(e){let{lazy:t,children:n,selectedValue:s}=e;const r=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=r.find((e=>e.props.value===s));return e?(0,i.cloneElement)(e,{className:"margin-top--md"}):null}return(0,g.jsx)("div",{className:"margin-top--md",children:r.map(((e,t)=>(0,i.cloneElement)(e,{key:t,hidden:e.props.value!==s})))})}function w(e){const t=x(e);return(0,g.jsxs)("div",{className:(0,s.Z)("tabs-container",b.tabList),children:[(0,g.jsx)(v,{...e,...t}),(0,g.jsx)(f,{...e,...t})]})}function j(e){const t=(0,A.Z)();return(0,g.jsx)(w,{...e,children:h(e.children)},String(t))}},6957:(e,t,n)=>{n.d(t,{Z:()=>A});var i=n(7294),s=n(917),r=n(4866),l=n(5162),a=n(4673),o=n(1750);const d="data:image/png;base64,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",c=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 i=s.iv`
- display: flex;
- justify-content: end;
- margin-bottom: -30px;
- background-color: transparent;
- `,r=s.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;
- `,l=s.iv`
- filter: invert(var(--inversion-percentage));
- `;return(0,p.tZ)("div",{css:i,children:(0,p.tZ)("button",{css:r,onClick:()=>{n(!t)},children:t?(0,p.tZ)("img",{css:l,src:c,className:"icon-tabler-arrow-bar-up"}):(0,p.tZ)("img",{css:l,src:d,className:"icon-tabler-arrow-bar-down"})})})}function x(e){let{url:t}=e;const n=s.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;
-
-
- `,i=s.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:i,src:h})})}function A(e){let{path:t,javaC:n,javaE:d,cssURL:c,javaHighlight:h,height:A,frame:b,tabs:g}=e;const[v,f]=(0,i.useState)(""),[w,j]=(0,i.useState)(""),[y,T]=(0,i.useState)(""),[F,k]=(0,i.useState)(!(!n||!d)),[D,B]=(0,i.useState)(!1),[Z,S]=(0,i.useState)({});(0,i.useEffect)((()=>{d&&fetch(d).then((e=>e.text())).then((e=>{j(e);const t=new URL(d).pathname.split("/"),n=t[t.length-1];S((e=>({...e,javaFile:n})))})),n&&fetch(n).then((e=>e.text())).then((e=>{f(e)})),c&&fetch(c).then((e=>e.text())).then((e=>{T(e);const t=new URL(c).pathname.split("/"),n=t[t.length-1];S((e=>({...e,cssFile:n})))}))}),[]);const C=s.iv`
- display: flex;
- flex-direction: column;
- background-color: var(--code-display-color);
- width: 100%;
- margin-bottom: 16px;
- padding: ${"hidden"==b?"0 15px 0 15px;":"7px 15px 0 15px;"};
- box-shadow: var(--ifm-global-shadow-lw);
- `,E=s.iv`
- min-height: 100px;
- height: 100%;
- width: 100%;
- height: ${A};
- `,L=s.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;
- }
- }
-
- `,N=s.iv`
- width: 100%;
- `,H=s.iv`
- display: flex;
- justify-content: flex-end;
- opacity: 0;
- transition: opacity 0.3s ease-in-out;
- ${D&&"opacity: 1;"};
-
- `;return(0,p.BX)("div",{css:C,children:["hidden"!=b?(0,p.BX)("div",{onMouseEnter:()=>{B(!0)},onMouseLeave:()=>B(!1),css:N,children:[(0,p.tZ)("div",{css:H,children:(0,p.tZ)(x,{url:t})}),(0,p.tZ)("iframe",{loading:"lazy",src:t+"&theme="+("dark"===(0,u.I)().colorMode?"dark":"light"),css:E})]}):null,(0,p.BX)(a.Z,{css:L,summary:(0,p.tZ)("summary",{children:"Show Code"}),children:[n&&d?(0,p.tZ)(m,{collapse:F,setCollapse:k}):null,c?(0,p.BX)(r.Z,{children:[(0,p.tZ)(l.Z,{value:g?g[0]:"Java",label:g?g[0]:Z.javaFile,default:!0,children:(0,p.tZ)(o.Z,{className:"codeDemoBlock",language:"java",showLineNumbers:!0,metastring:h,children:F?v:w})}),(0,p.tZ)(l.Z,{value:g?g[1]:"CSS",label:g?g[1]:Z.cssFile,children:(0,p.tZ)(o.Z,{className:"codeDemoBlock",language:"css",showLineNumbers:!0,children:y})})]}):(0,p.tZ)(r.Z,{children:(0,p.tZ)(l.Z,{value:g?g[0]:"Java",label:g?g[0]:Z.javaFile,default:!0,children:(0,p.tZ)(o.Z,{className:"codeDemoBlock",language:"java",showLineNumbers:!0,metastring:h,children:F?v:w})})})]})]})}},3273:(e,t,n)=>{n.d(t,{Z:()=>d});var i=n(7294),s=n(917),r=n(8230),l=n(4387),a=n(6770);var o=n(5944);function d(e){let{type:t,location:n,top:d,children:c,code:h,suffix:u}=e;const[p,m]=(0,i.useState)("");(0,i.useEffect)((()=>{u||(u=""),m("https://javadoc.io/doc/org.dwcj/dwcj-"+t+"/latest/"+n+".html"+u)}),[]);const x=s.iv`
- display: inline;
-
- ${d&&s.iv`
- width: 100%;
- display: flex;
- justify-content: flex-end;
- margin-top: -33px;
- margin-bottom: 25px;
- `}
- `,A=s.iv`
- background-color: #0063CC;
- :hover{
- color: white;
- }
- `;return(0,o.BX)(o.HY,{children:["true"===d&&(0,o.tZ)("div",{css:x,children:(0,o.tZ)(r.Z,{title:"JavaDoc",arrow:!0,children:(0,o.tZ)(l.Z,{css:A,label:"Java API",component:"a",href:p,icon:(0,o.tZ)(a.Z,{}),clickable:!0,color:"primary",target:"_blank"})})}),"true"!==d&&!h&&(0,o.tZ)("div",{css:x,children:(0,o.tZ)("a",{href:p,target:"_blank",children:c})}),"true"!==d&&h&&(0,o.tZ)("div",{css:x,children:(0,o.tZ)("code",{children:(0,o.tZ)("a",{href:p,target:"_blank",children:c})})})]})}},1415:(e,t,n)=>{n.d(t,{Z:()=>r});n(7294);var i=n(8397),s=n(5893);function r(e){return(0,s.jsx)(s.Fragment,{children:(0,s.jsx)(i.Z,{...e})})}}}]);
\ No newline at end of file
diff --git a/assets/js/79697695.0bf4314d.js b/assets/js/79697695.0bf4314d.js
new file mode 100644
index 000000000..8c0e69c28
--- /dev/null
+++ b/assets/js/79697695.0bf4314d.js
@@ -0,0 +1,146 @@
+"use strict";(self.webpackChunkdwcj_documentation=self.webpackChunkdwcj_documentation||[]).push([[1588],{3751:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>a,default:()=>p,frontMatter:()=>l,metadata:()=>d,toc:()=>u});var i=n(5893),r=n(1151),s=(n(6957),n(7796),n(3273)),o=n(2665);const l={sidebar_position:6,title:"TextField",slug:"textfield"},a=void 0,d={id:"components/fields/text-field",title:"TextField",description:"The DateTimeField class is a Field component, and as such shares all of the commonalities belonging to a Field. Please refer to the Field documentation page for an overview of Field properties, events, and other important information.",source:"@site/docs/components/fields/text-field.md",sourceDirName:"components/fields",slug:"/components/fields/textfield",permalink:"/docs/components/fields/textfield",draft:!1,unlisted:!1,editUrl:"https://github.com/DwcJava/dwcjava.github.io/tree/website/docs/components/fields/text-field.md",tags:[],version:"current",sidebarPosition:6,frontMatter:{sidebar_position:6,title:"TextField",slug:"textfield"},sidebar:"documentationSidebar",previous:{title:"PasswordField",permalink:"/docs/components/fields/passwordfield"},next:{title:"TimeField",permalink:"/docs/components/fields/timefield"}},c={},u=[{value:"Usages",id:"usages",level:3},{value:"Constructors",id:"constructors",level:3},{value:"Types",id:"types",level:3},{value:"Placeholder Text",id:"placeholder-text",level:3},{value:"Selected Text",id:"selected-text",level:3},{value:"Best Practices",id:"best-practices",level:3}];function h(e){const t={a:"a",admonition:"admonition",code:"code",h3:"h3",li:"li",mdxAdmonitionTitle:"mdxAdmonitionTitle",ol:"ol",p:"p",strong:"strong",ul:"ul",...(0,r.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(o.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,i.jsx)(o.Z,{tooltipText:"The name of the web component that will render in the DOM.",label:"bbj-editbox",href:"https://basishub.github.io/basis-next/#/web-components/bbj-editbox",clickable:!1,iconName:"code"}),"\n",(0,i.jsx)(s.Z,{type:"engine",location:"org/dwcj/component/field/TextField",top:"true"}),"\n",(0,i.jsxs)(t.admonition,{type:"success",children:[(0,i.jsx)(t.mdxAdmonitionTitle,{children:(0,i.jsx)(t.strong,{children:"Important"})}),(0,i.jsxs)(t.p,{children:["The ",(0,i.jsx)(t.code,{children:"DateTimeField"})," class is a Field component, and as such shares all of the commonalities belonging to a Field. Please refer to the ",(0,i.jsx)(t.strong,{children:(0,i.jsx)(t.a,{href:"/docs/components/fields",children:"Field documentation page"})})," for an overview of Field properties, events, and other important information."]})]}),"\n",(0,i.jsxs)(t.p,{children:["The ",(0,i.jsx)(t.code,{children:"TextField"})," component allows users to enter and edit text in a single line. It can be configured to display a specific virtual keyboard, such as a numeric keypad, email input, telephone input, or URL input. The component also provides built-in validation to reject values that do not adhere to the specified type."]}),"\n",(0,i.jsx)(t.h3,{id:"usages",children:"Usages"}),"\n",(0,i.jsxs)(t.p,{children:["The ",(0,i.jsx)(t.code,{children:"TextField"})," is suitable for a wide range of scenarios where text input or editing is required. Here are some examples of when to use the ",(0,i.jsx)(t.code,{children:"TextField"}),":"]}),"\n",(0,i.jsxs)(t.ol,{children:["\n",(0,i.jsxs)(t.li,{children:["\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.strong,{children:"Form Inputs"}),": A ",(0,i.jsx)(t.code,{children:"TextField"})," is commonly used in forms for capturing user input, such as names, addresses, or comments. It is best to use a ",(0,i.jsx)(t.code,{children:"TextField"})," in these applications when the input is generally short enough to fit on one line."]}),"\n"]}),"\n",(0,i.jsxs)(t.li,{children:["\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.strong,{children:"Search Functionality"}),": ",(0,i.jsx)(t.code,{children:"TextField"})," can be used to provide a search box, allowing users to input search queries."]}),"\n"]}),"\n",(0,i.jsxs)(t.li,{children:["\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.strong,{children:"Text Editing"}),": A ",(0,i.jsx)(t.code,{children:"TextField"})," is ideal for applications that require text editing or content creation, such as document editors, chat applications, or note-taking apps."]}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(t.h3,{id:"constructors",children:"Constructors"}),"\n",(0,i.jsxs)(t.p,{children:["The ",(0,i.jsx)(t.code,{children:"TextField"})," class has three constructors:"]}),"\n",(0,i.jsxs)(t.ol,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.code,{children:"TextField(Type type, String label, String value)"}),": Creates a ",(0,i.jsx)(t.code,{children:"TextField"})," with a given applicable type, a label, and a value."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.code,{children:"TextField(Type type, String label)"}),": Creates a ",(0,i.jsx)(t.code,{children:"TextField"})," with a given applicable type and label."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.code,{children:"TextField(String label, String value)"}),": Creates a ",(0,i.jsx)(t.code,{children:"TextField"})," with a given label and a value."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.code,{children:"TextField(Type type)"}),": Creates a ",(0,i.jsx)(t.code,{children:"TextField"})," with a given applicable type."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.code,{children:"TextField(String label)"}),": Creates a ",(0,i.jsx)(t.code,{children:"TextField"})," with a given label."]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.code,{children:"TextField()"}),": Creates a ",(0,i.jsx)(t.code,{children:"TextField"})," without any provided information."]}),"\n"]}),"\n",(0,i.jsx)(t.h3,{id:"types",children:"Types"}),"\n",(0,i.jsxs)(t.p,{children:["You can specify the type of the TextField using the ",(0,i.jsx)(t.code,{children:"setType"})," method. Similarly, the type can be retrieved using the ",(0,i.jsx)(t.code,{children:"getType"})," method, which will return an enum value."]}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:["\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"Type.TEXT"}),": This is the default value for a ",(0,i.jsx)(t.code,{children:"TextField"}),", and automatically removes line breaks from the input value"]}),"\n"]}),"\n",(0,i.jsxs)(t.li,{children:["\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"Type.EMAIL"}),": This configuration option is used for editing an email address. It has a relevant keyboard in supporting browsers and devices with dynamic keyboards."]}),"\n"]}),"\n",(0,i.jsxs)(t.li,{children:["\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"Type.TEL"}),": This option is used for entering a telephone number. The field will display a telephone keypad in some devices with dynamic keypads."]}),"\n"]}),"\n",(0,i.jsxs)(t.li,{children:["\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"Type.URL"}),": A field for entering a URL. It has a relevant keyboard in supporting browsers and devices with dynamic keyboards."]}),"\n"]}),"\n",(0,i.jsxs)(t.li,{children:["\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.code,{children:"Type.SEARCH"}),": A single-line text field for entering search strings. Line-breaks are automatically removed from the input value."]}),"\n"]}),"\n"]}),"\n",(0,i.jsx)(t.h3,{id:"placeholder-text",children:"Placeholder Text"}),"\n",(0,i.jsxs)(t.p,{children:["You can set placeholder text for the ",(0,i.jsx)(t.code,{children:"TextField"})," using the ",(0,i.jsx)(t.code,{children:"setPlaceholder"})," method. The placeholder text is displayed when the field is empty, helping to prompt the user to enter appropriate input into the ",(0,i.jsx)(t.code,{children:"TextField"}),"."]}),"\n",(0,i.jsx)(t.h3,{id:"selected-text",children:"Selected Text"}),"\n",(0,i.jsxs)(t.p,{children:["It is possible to interact with the ",(0,i.jsx)(t.code,{children:"TextField"})," class to retrieve a user's selected text, and to get information about the user's selection. You can retrieve the selected text in the ",(0,i.jsx)(t.code,{children:"TextField"})," using the ",(0,i.jsx)(t.code,{children:"getSelectedText"})," method. This behavior would commonly be used in conjunction with an event. Similarly, it is possible to retrieve the current selection range of the ",(0,i.jsx)(t.code,{children:"TextField"})," using the ",(0,i.jsx)(t.code,{children:"getSelectionRange"})," method. This returns a ",(0,i.jsx)(t.code,{children:"SelectionRange"})," object representing the start and end indices of the selected text."]}),"\n",(0,i.jsx)(t.h3,{id:"best-practices",children:"Best Practices"}),"\n",(0,i.jsxs)(t.p,{children:["The following section outlines some suggested best practices for utilization of the ",(0,i.jsx)(t.code,{children:"TextField"}),"."]}),"\n",(0,i.jsxs)(t.ol,{children:["\n",(0,i.jsxs)(t.li,{children:["\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.strong,{children:"Provide Clear Labels and Instructions"}),": Label the ",(0,i.jsx)(t.code,{children:"TextField"})," clearly to indicate the type of information users should enter. Consider providing additional instructional text or placeholder values to guide users and set expectations for the required input."]}),"\n"]}),"\n",(0,i.jsxs)(t.li,{children:["\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.strong,{children:"Spell Checking and Auto-Complete"}),": When applicable, consider utilizing spellcheck and/or autocomplete functionality to the ",(0,i.jsx)(t.code,{children:"TextField"}),". These features can help users input information faster and reduce errors by providing suggested values based on previous inputs or predefined options."]}),"\n"]}),"\n",(0,i.jsxs)(t.li,{children:["\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.strong,{children:"Consider Accessibility"}),": Utilize the ",(0,i.jsx)(t.code,{children:"TextField"})," component with accessibility in mind, adhering to accessibility standards such as proper labeling, keyboard navigation support, and compatibility with assistive technologies. Ensure that users with disabilities can interact with the ",(0,i.jsx)(t.code,{children:"TextField"})," effectively."]}),"\n"]}),"\n"]})]})}function p(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(h,{...e})}):h(e)}},6031:(e,t,n)=>{var i=n(4836);t.Z=void 0;var r=i(n(4938)),s=n(5893),o=(0,r.default)((0,s.jsx)("path",{d:"m19 1-5 5v11l5-4.5V1zM1 6v14.65c0 .25.25.5.5.5.1 0 .15-.05.25-.05C3.1 20.45 5.05 20 6.5 20c1.95 0 4.05.4 5.5 1.5V6c-1.45-1.1-3.55-1.5-5.5-1.5S2.45 4.9 1 6zm22 13.5V6c-.6-.45-1.25-.75-2-1v13.5c-1.1-.35-2.3-.5-3.5-.5-1.7 0-4.15.65-5.5 1.5v2c1.35-.85 3.8-1.5 5.5-1.5 1.65 0 3.35.3 4.75 1.05.1.05.15.05.25.05.25 0 .5-.25.5-.5v-1.1z"}),"AutoStories");t.Z=o},2610:(e,t,n)=>{var i=n(4836);t.Z=void 0;var r=i(n(4938)),s=n(5893),o=(0,r.default)((0,s.jsx)("path",{d:"M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"}),"DragIndicator");t.Z=o},5162:(e,t,n)=>{n.d(t,{Z:()=>o});n(7294);var i=n(6010);const r={tabItem:"tabItem_Ymn6"};var s=n(5893);function o(e){let{children:t,hidden:n,className:o}=e;return(0,s.jsx)("div",{role:"tabpanel",className:(0,i.Z)(r.tabItem,o),hidden:n,children:t})}},4866:(e,t,n)=>{n.d(t,{Z:()=>j});var i=n(7294),r=n(6010),s=n(2466),o=n(6550),l=n(469),a=n(1980),d=n(7392),c=n(12);function u(e){return i.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,i.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 h(e){const{values:t,children:n}=e;return(0,i.useMemo)((()=>{const e=t??function(e){return u(e).map((e=>{let{props:{value:t,label:n,attributes:i,default:r}}=e;return{value:t,label:n,attributes:i,default:r}}))}(n);return function(e){const t=(0,d.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 r=(0,o.k6)(),s=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,a._X)(s),(0,i.useCallback)((e=>{if(!s)return;const t=new URLSearchParams(r.location.search);t.set(s,e),r.replace({...r.location,search:t.toString()})}),[s,r])]}function x(e){const{defaultValue:t,queryString:n=!1,groupId:r}=e,s=h(e),[o,a]=(0,i.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 i=n.find((e=>e.default))??n[0];if(!i)throw new Error("Unexpected error: 0 tabValues");return i.value}({defaultValue:t,tabValues:s}))),[d,u]=m({queryString:n,groupId:r}),[x,b]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,s]=(0,c.Nk)(n);return[r,(0,i.useCallback)((e=>{n&&s.set(e)}),[n,s])]}({groupId:r}),g=(()=>{const e=d??x;return p({value:e,tabValues:s})?e:null})();(0,l.Z)((()=>{g&&a(g)}),[g]);return{selectedValue:o,selectValue:(0,i.useCallback)((e=>{if(!p({value:e,tabValues:s}))throw new Error(`Can't select invalid tab value=${e}`);a(e),u(e),b(e)}),[u,b,s]),tabValues:s}}var b=n(2389);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var A=n(5893);function v(e){let{className:t,block:n,selectedValue:i,selectValue:o,tabValues:l}=e;const a=[],{blockElementScrollPositionUntilNextRender:d}=(0,s.o5)(),c=e=>{const t=e.currentTarget,n=a.indexOf(t),r=l[n].value;r!==i&&(d(t),o(r))},u=e=>{let t=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{const n=a.indexOf(e.currentTarget)+1;t=a[n]??a[0];break}case"ArrowLeft":{const n=a.indexOf(e.currentTarget)-1;t=a[n]??a[a.length-1];break}}t?.focus()};return(0,A.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.Z)("tabs",{"tabs--block":n},t),children:l.map((e=>{let{value:t,label:n,attributes:s}=e;return(0,A.jsx)("li",{role:"tab",tabIndex:i===t?0:-1,"aria-selected":i===t,ref:e=>a.push(e),onKeyDown:u,onClick:c,...s,className:(0,r.Z)("tabs__item",g.tabItem,s?.className,{"tabs__item--active":i===t}),children:n??t},t)}))})}function f(e){let{lazy:t,children:n,selectedValue:r}=e;const s=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=s.find((e=>e.props.value===r));return e?(0,i.cloneElement)(e,{className:"margin-top--md"}):null}return(0,A.jsx)("div",{className:"margin-top--md",children:s.map(((e,t)=>(0,i.cloneElement)(e,{key:t,hidden:e.props.value!==r})))})}function w(e){const t=x(e);return(0,A.jsxs)("div",{className:(0,r.Z)("tabs-container",g.tabList),children:[(0,A.jsx)(v,{...e,...t}),(0,A.jsx)(f,{...e,...t})]})}function j(e){const t=(0,b.Z)();return(0,A.jsx)(w,{...e,children:u(e.children)},String(t))}},6957:(e,t,n)=>{n.d(t,{Z:()=>b});var i=n(7294),r=n(917),s=n(4866),o=n(5162),l=n(4673),a=n(1750);const d="data:image/png;base64,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",c=n.p+"assets/images/expand-ba3f00f73da43d91e5b17663c4a7d108.png",u="data:image/png;base64,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";var h=n(2610),p=n(5944);function m(e){let{collapse:t,setCollapse:n}=e;const i=r.iv`
+ display: flex;
+ justify-content: end;
+ align-items: flex-end;
+ background-color: transparent;
+ margin-bottom: -10px;
+ `,s=r.iv`
+ /* position: absolute;
+ right: 0; */
+ cursor: pointer;
+ z-index: 10;
+ height: 35px;
+ width: 35px;
+ border: none;
+ background-color: none;
+ justify-self: flex-end;
+ background-color: transparent;
+ margin-right: 5px;
+ margin-bottom: -50px !important;
+ `,o=r.iv`
+ filter: invert(var(--inversion-percentage));
+ `;return(0,p.tZ)("div",{css:i,children:(0,p.tZ)("button",{css:s,onClick:()=>{n(!t)},children:t?(0,p.tZ)("img",{css:o,src:c,className:"icon-tabler-arrow-bar-up"}):(0,p.tZ)("img",{css:o,src:d,className:"icon-tabler-arrow-bar-down"})})})}function x(e){let{url:t}=e;const n=r.iv`
+ position: relative;
+ cursor: pointer;
+ z-index: 10;
+ height: 35px;
+ width: 35px;
+ border: none;
+ background-color: none;
+ justify-self: flex-end;
+ margin-top: -5px;
+ margin-bottom: -20px;
+ background-color: transparent;
+
+
+ `,i=r.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:i,src:u})})}function b(e){let{path:t,javaC:n,javaE:d,cssURL:c,javaHighlight:u,height:b,frame:g,tabs:A}=e;const[v,f]=(0,i.useState)(""),[w,j]=(0,i.useState)(""),[y,T]=(0,i.useState)(""),[F,k]=(0,i.useState)(!(!n||!d)),[D,Z]=(0,i.useState)(!1),[S,B]=(0,i.useState)({}),[C,E]=(0,i.useState)(!1),[L,z]=(0,i.useState)(0),[M,V]=(0,i.useState)(0),[N,H]=(0,i.useState)(25),[X,O]=(0,i.useState)(25),[Y,G]=(0,i.useState)(0),[J,I]=(0,i.useState)(!1),P=(0,i.useRef)(null),R=(0,i.useRef)(null);(0,i.useEffect)((()=>{d&&fetch(d).then((e=>e.text())).then((e=>{j(e);const t=new URL(d).pathname.split("/"),n=t[t.length-1];B((e=>({...e,javaFile:n})))})),n&&fetch(n).then((e=>e.text())).then((e=>{f(e)})),c&&fetch(c).then((e=>e.text())).then((e=>{T(e);const t=new URL(c).pathname.split("/"),n=t[t.length-1];B((e=>({...e,cssFile:n})))})),G(P.current.offsetWidth),console.log(Y)}),[]);const W=()=>{E(!1),console.log("Stop Resizing")},q=e=>{if(C){const t=e.clientX-L;M+t>Y/3&&(P.current.style.width=`${M+t}px`,R.current.style.right=(N-t<25?25:N-t)+"px",O(N-t<25?25:N-t))}},U=r.iv`
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ margin-bottom: 16px;
+ /* padding: ${"hidden"==g?"0 15px 0 15px;":"7px 15px 0 15px;"}; */
+ /* box-shadow: var(--ifm-global-shadow-lw); */
+ background-color: var(--code-display-color-background);
+ `,K=r.iv`
+ width: 100%;
+ /* padding: 1em; */
+ border: 1px solid var(--ifm-toc-border-color);
+ border-right: none;
+ background-color: transparent;
+ display: flex;
+ position: relative;
+ `,Q=r.iv`
+ min-height: 100px;
+ height: 100%;
+ width: 100%;
+ height: ${b||"100%"};
+ pointer-events: none;
+ `,_=r.iv`
+ display: flex;
+ justify-content: flex-end;
+ opacity: 0;
+ transition: opacity 0.3s ease-in-out;
+ ${D&&"opacity: 1;"};
+ margin: 10px 0 0 0;
+ position: absolute;
+ right: 25px;
+ `,$=r.iv`
+ display: flex;
+ align-items: center;
+ cursor: ew-resize;
+ border-left: 1px solid var(--ifm-toc-border-color);
+ border-right: 1px solid var(--ifm-toc-border-color);
+ background-color: var(--ifm-background-color);
+ `,ee=r.iv`
+ box-shadow: none;
+ background-color: var(--ifm-background-color);
+ margin: 0px;
+ padding: 0px;
+ border: 1px solid var(--ifm-toc-border-color);
+ border-top: none;
+ border-radius: 0px;
+ position: relative;
+
+ div{
+ /* border: none; */
+ border-color: var(--ifm-toc-border-color);
+ padding: 2px 0px 0px 0px;
+ margin: 0px
+ }
+
+ summary{
+ display: flex;
+ width: 100%;
+ justify-content: center;
+ margin: 10px 0;
+ font-weight: bold;
+ ::before{
+ left: auto;
+ margin-left: -100px;
+ --docusaurus-details-decoration-color: var(--ifm-color-primary)
+ }
+ }
+ .margin-top--md{
+ margin-top: 0px !important;
+ }
+ ul{
+ margin: -4px 0px!important;
+ }
+ `,te=r.iv`
+ /* :first-child{
+ margin-left: 1em;
+ } */
+ li[aria-selected="true"]{
+ border-color: var(--ifm-color-primary);
+ }
+
+ .tabs__item{
+ padding: 5px 20px -2px 20px;
+ border-radius: 0px;
+ }
+ `,ne=r.iv`
+ border-radius: 0px;
+ box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset;
+ `;return(0,p.BX)("div",{css:U,onMouseUp:W,onMouseLeave:W,onMouseMove:q,children:["hidden"!=g?(0,p.BX)("div",{onMouseEnter:()=>{Z(!0)},onMouseLeave:()=>Z(!1),css:K,children:[(0,p.tZ)("iframe",{onMouseUp:W,loading:"lazy",src:t,css:{...Q,pointerEvents:C?"none":"auto"},ref:P,onMouseMove:q}),(0,p.tZ)("div",{css:_,ref:R,children:(0,p.tZ)(x,{url:t})}),(0,p.tZ)("div",{css:$,onMouseDown:e=>{e.preventDefault(),E(!0),z(e.clientX),V(P.current.offsetWidth),H(X),console.log(R.current.right),console.log("Start Resizing")},children:(0,p.tZ)(h.Z,{})})]}):null,(0,p.BX)(l.Z,{css:ee,summary:(0,p.tZ)("summary",{onClick:()=>I(!J),children:J?"Hide Code":"Show Code"}),children:[n&&d?(0,p.tZ)(m,{collapse:F,setCollapse:k}):null,c?(0,p.BX)(s.Z,{css:te,children:[(0,p.tZ)(o.Z,{value:A?A[0]:"Java",label:A?A[0]:S.javaFile,default:!0,children:(0,p.tZ)(a.Z,{css:ne,className:"codeDemoBlock",language:"java",showLineNumbers:!0,metastring:u,children:F?v:w})}),(0,p.tZ)(o.Z,{value:A?A[1]:"CSS",label:A?A[1]:S.cssFile,children:(0,p.tZ)(a.Z,{css:ne,className:"codeDemoBlock",language:"css",showLineNumbers:!0,children:y})})]}):(0,p.tZ)(s.Z,{css:te,children:(0,p.tZ)(o.Z,{value:A?A[0]:"Java",label:A?A[0]:S.javaFile,default:!0,children:(0,p.tZ)(a.Z,{css:ne,className:"codeDemoBlock",language:"java",showLineNumbers:!0,metastring:u,children:F?v:w})})})]})]})}},3273:(e,t,n)=>{n.d(t,{Z:()=>d});var i=n(7294),r=n(917),s=n(8230),o=n(4387),l=n(6031);var a=n(5944);function d(e){let{type:t,location:n,top:d,children:c,code:u,suffix:h}=e;const[p,m]=(0,i.useState)("");(0,i.useEffect)((()=>{h||(h=""),m("https://javadoc.io/doc/org.dwcj/dwcj-"+t+"/latest/"+n+".html"+h)}),[]);const x=r.iv`
+ display: inline;
+
+ ${d&&r.iv`
+ width: 100%;
+ display: flex;
+ justify-content: flex-end;
+ margin-top: -33px;
+ margin-bottom: 25px;
+ `}
+ `,b=r.iv`
+ background-color: #0063CC;
+ padding: 0 0 0 5px;
+ :hover{
+ color: white;
+ }
+ `;return(0,a.BX)(a.HY,{children:["true"===d&&(0,a.tZ)("div",{css:x,children:(0,a.tZ)(s.Z,{title:"JavaDoc",arrow:!0,children:(0,a.tZ)(o.Z,{css:b,label:"Java API",component:"a",href:p,icon:(0,a.tZ)(l.Z,{}),clickable:!0,color:"primary",target:"_blank"})})}),"true"!==d&&!u&&(0,a.tZ)("div",{css:x,children:(0,a.tZ)("a",{href:p,target:"_blank",children:c})}),"true"!==d&&u&&(0,a.tZ)("div",{css:x,children:(0,a.tZ)("code",{children:(0,a.tZ)("a",{href:p,target:"_blank",children:c})})})]})}},1415:(e,t,n)=>{n.d(t,{Z:()=>s});n(7294);var i=n(8397),r=n(5893);function s(e){return(0,r.jsx)(r.Fragment,{children:(0,r.jsx)(i.Z,{...e})})}}}]);
\ No newline at end of file
diff --git a/assets/js/7c7204eb.ca2f4fd9.js b/assets/js/7c7204eb.8cded49b.js
similarity index 86%
rename from assets/js/7c7204eb.ca2f4fd9.js
rename to assets/js/7c7204eb.8cded49b.js
index edda43de6..192652eb2 100644
--- a/assets/js/7c7204eb.ca2f4fd9.js
+++ b/assets/js/7c7204eb.8cded49b.js
@@ -1,4 +1,4 @@
-"use strict";(self.webpackChunkdwcj_documentation=self.webpackChunkdwcj_documentation||[]).push([[3574],{8287:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>r,contentTitle:()=>d,default:()=>v,frontMatter:()=>o,metadata:()=>c,toc:()=>a});var s=n(5893),i=n(1151),l=n(3273);const o={sidebar_position:0,title:"ListEvent",sidebar_class_name:"sidebar--item__hidden",slug:"ListEvent"},d=void 0,c={id:"components/events/list-event",title:"ListEvent",description:"This event is the base class for List-based component related events. inherited methods will provide essential information about the selected item and allow developers to implement custom actions or responses when an inherited event is fired.",source:"@site/docs/components/events/list-event.md",sourceDirName:"components/events",slug:"/components/events/ListEvent",permalink:"/docs/components/events/ListEvent",draft:!1,unlisted:!1,editUrl:"https://github.com/DwcJava/dwcjava.github.io/tree/website/docs/components/events/list-event.md",tags:[],version:"current",sidebarPosition:0,frontMatter:{sidebar_position:0,title:"ListEvent",sidebar_class_name:"sidebar--item__hidden",slug:"ListEvent"},sidebar:"documentationSidebar",previous:{title:"ListCloseEvent",permalink:"/docs/components/events/ListCloseEvent"},next:{title:"ListOpenEvent",permalink:"/docs/components/events/ListOpenEvent"}},r={},a=[{value:"Event Payload",id:"event-payload",level:2},{value:"See Also",id:"see-also",level:2},{value:"Events",id:"events",level:3},{value:"Components",id:"components",level:3}];function h(e){const t={a:"a",code:"code",h2:"h2",h3:"h3",li:"li",p:"p",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,i.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(l.Z,{type:"engine",location:"org/dwcj/component/event/ListEvent",top:"true"}),"\n",(0,s.jsx)(t.p,{children:"This event is the base class for List-based component related events. inherited methods will provide essential information about the selected item and allow developers to implement custom actions or responses when an inherited event is fired."}),"\n",(0,s.jsx)(t.h2,{id:"event-payload",children:"Event Payload"}),"\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:"Method"}),(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)(t.code,{children:"getSelectedIndex()"})}),(0,s.jsx)(t.td,{children:"Returns the selected index, or -1 if no item is selected."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"center"},children:(0,s.jsx)(t.code,{children:"getSelectedItem()"})}),(0,s.jsx)(t.td,{children:"Returns the selected item, or null if no item is selected."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"center"},children:(0,s.jsx)(t.code,{children:"getSelectedIndices()"})}),(0,s.jsx)(t.td,{children:"Returns a list of selected indices, or an empty list if no item is selected. If the list doesn't support multiple selection, the list will contain only one item."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"center"},children:(0,s.jsx)(t.code,{children:"getSelectedItems()"})}),(0,s.jsx)(t.td,{children:"Returns a list of selected items. If the list doesn't support multiple selection, the list will contain only one item."})]})]})]}),"\n",(0,s.jsx)(t.h2,{id:"see-also",children:"See Also"}),"\n",(0,s.jsx)(t.h3,{id:"events",children:"Events"}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"./event",children:"Event"})}),"\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"./ListOpenEvent",children:"ListOpenEvent"})}),"\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"./ListCloseEvent",children:"ListCloseEvent"})}),"\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"./ListSelectEvent",children:"ListSelectEvent"})}),"\n"]}),"\n",(0,s.jsx)(t.h3,{id:"components",children:"Components"}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"../list-components/ChoiceBox",children:"ChoiceBox"})}),"\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"../list-components/ComboBox",children:"ComboBox"})}),"\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"../list-components/ListBox",children:"ListBox"})}),"\n"]})]})}function v(e={}){const{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(h,{...e})}):h(e)}},3273:(e,t,n)=>{n.d(t,{Z:()=>r});var s=n(7294),i=n(917),l=n(8230),o=n(4387),d=n(6770);var c=n(5944);function r(e){let{type:t,location:n,top:r,children:a,code:h,suffix:v}=e;const[p,m]=(0,s.useState)("");(0,s.useEffect)((()=>{v||(v=""),m("https://javadoc.io/doc/org.dwcj/dwcj-"+t+"/latest/"+n+".html"+v)}),[]);const x=i.iv`
+"use strict";(self.webpackChunkdwcj_documentation=self.webpackChunkdwcj_documentation||[]).push([[3574],{8287:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>r,contentTitle:()=>d,default:()=>v,frontMatter:()=>o,metadata:()=>c,toc:()=>a});var s=n(5893),i=n(1151),l=n(3273);const o={sidebar_position:0,title:"ListEvent",sidebar_class_name:"sidebar--item__hidden",slug:"ListEvent"},d=void 0,c={id:"components/events/list-event",title:"ListEvent",description:"This event is the base class for List-based component related events. inherited methods will provide essential information about the selected item and allow developers to implement custom actions or responses when an inherited event is fired.",source:"@site/docs/components/events/list-event.md",sourceDirName:"components/events",slug:"/components/events/ListEvent",permalink:"/docs/components/events/ListEvent",draft:!1,unlisted:!1,editUrl:"https://github.com/DwcJava/dwcjava.github.io/tree/website/docs/components/events/list-event.md",tags:[],version:"current",sidebarPosition:0,frontMatter:{sidebar_position:0,title:"ListEvent",sidebar_class_name:"sidebar--item__hidden",slug:"ListEvent"},sidebar:"documentationSidebar",previous:{title:"ListCloseEvent",permalink:"/docs/components/events/ListCloseEvent"},next:{title:"ListOpenEvent",permalink:"/docs/components/events/ListOpenEvent"}},r={},a=[{value:"Event Payload",id:"event-payload",level:2},{value:"See Also",id:"see-also",level:2},{value:"Events",id:"events",level:3},{value:"Components",id:"components",level:3}];function h(e){const t={a:"a",code:"code",h2:"h2",h3:"h3",li:"li",p:"p",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,i.a)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(l.Z,{type:"engine",location:"org/dwcj/component/event/ListEvent",top:"true"}),"\n",(0,s.jsx)(t.p,{children:"This event is the base class for List-based component related events. inherited methods will provide essential information about the selected item and allow developers to implement custom actions or responses when an inherited event is fired."}),"\n",(0,s.jsx)(t.h2,{id:"event-payload",children:"Event Payload"}),"\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:"Method"}),(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)(t.code,{children:"getSelectedIndex()"})}),(0,s.jsx)(t.td,{children:"Returns the selected index, or -1 if no item is selected."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"center"},children:(0,s.jsx)(t.code,{children:"getSelectedItem()"})}),(0,s.jsx)(t.td,{children:"Returns the selected item, or null if no item is selected."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"center"},children:(0,s.jsx)(t.code,{children:"getSelectedIndices()"})}),(0,s.jsx)(t.td,{children:"Returns a list of selected indices, or an empty list if no item is selected. If the list doesn't support multiple selection, the list will contain only one item."})]}),(0,s.jsxs)(t.tr,{children:[(0,s.jsx)(t.td,{style:{textAlign:"center"},children:(0,s.jsx)(t.code,{children:"getSelectedItems()"})}),(0,s.jsx)(t.td,{children:"Returns a list of selected items. If the list doesn't support multiple selection, the list will contain only one item."})]})]})]}),"\n",(0,s.jsx)(t.h2,{id:"see-also",children:"See Also"}),"\n",(0,s.jsx)(t.h3,{id:"events",children:"Events"}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"./event",children:"Event"})}),"\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"./ListOpenEvent",children:"ListOpenEvent"})}),"\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"./ListCloseEvent",children:"ListCloseEvent"})}),"\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"./ListSelectEvent",children:"ListSelectEvent"})}),"\n"]}),"\n",(0,s.jsx)(t.h3,{id:"components",children:"Components"}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"../list-components/ChoiceBox",children:"ChoiceBox"})}),"\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"../list-components/ComboBox",children:"ComboBox"})}),"\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"../list-components/ListBox",children:"ListBox"})}),"\n"]})]})}function v(e={}){const{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(h,{...e})}):h(e)}},6031:(e,t,n)=>{var s=n(4836);t.Z=void 0;var i=s(n(4938)),l=n(5893),o=(0,i.default)((0,l.jsx)("path",{d:"m19 1-5 5v11l5-4.5V1zM1 6v14.65c0 .25.25.5.5.5.1 0 .15-.05.25-.05C3.1 20.45 5.05 20 6.5 20c1.95 0 4.05.4 5.5 1.5V6c-1.45-1.1-3.55-1.5-5.5-1.5S2.45 4.9 1 6zm22 13.5V6c-.6-.45-1.25-.75-2-1v13.5c-1.1-.35-2.3-.5-3.5-.5-1.7 0-4.15.65-5.5 1.5v2c1.35-.85 3.8-1.5 5.5-1.5 1.65 0 3.35.3 4.75 1.05.1.05.15.05.25.05.25 0 .5-.25.5-.5v-1.1z"}),"AutoStories");t.Z=o},3273:(e,t,n)=>{n.d(t,{Z:()=>r});var s=n(7294),i=n(917),l=n(8230),o=n(4387),d=n(6031);var c=n(5944);function r(e){let{type:t,location:n,top:r,children:a,code:h,suffix:v}=e;const[p,m]=(0,s.useState)("");(0,s.useEffect)((()=>{v||(v=""),m("https://javadoc.io/doc/org.dwcj/dwcj-"+t+"/latest/"+n+".html"+v)}),[]);const x=i.iv`
display: inline;
${r&&i.iv`
@@ -10,6 +10,7 @@
`}
`,j=i.iv`
background-color: #0063CC;
+ padding: 0 0 0 5px;
:hover{
color: white;
}
diff --git a/assets/js/7f7b6a5a.a3d5ef0e.js b/assets/js/7f7b6a5a.9800b153.js
similarity index 74%
rename from assets/js/7f7b6a5a.a3d5ef0e.js
rename to assets/js/7f7b6a5a.9800b153.js
index b54184b72..98ebc2400 100644
--- a/assets/js/7f7b6a5a.a3d5ef0e.js
+++ b/assets/js/7f7b6a5a.9800b153.js
@@ -1,4 +1,4 @@
-"use strict";(self.webpackChunkdwcj_documentation=self.webpackChunkdwcj_documentation||[]).push([[2616],{4519:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>a,default:()=>u,frontMatter:()=>o,metadata:()=>r,toc:()=>l});var c=n(5893),s=n(1151),i=n(3273);const o={sidebar_position:0,title:"UncheckEvent",sidebar_class_name:"sidebar--item__hidden",slug:"UncheckEvent",pagination_next:null},a=void 0,r={id:"components/events/uncheck-event",title:"UncheckEvent",description:'An "uncheck" event occurs when an element or checkbox is deselected or marked as "unchecked." This event is triggered when a user interacts with a checkbox, radio button, or any other form element to remove the "checked" state. It usually indicates that the associated action or state has been disabled or deactivated. This class also inherits methods from the base Event class',source:"@site/docs/components/events/uncheck-event.md",sourceDirName:"components/events",slug:"/components/events/UncheckEvent",permalink:"/docs/components/events/UncheckEvent",draft:!1,unlisted:!1,editUrl:"https://github.com/DwcJava/dwcjava.github.io/tree/website/docs/components/events/uncheck-event.md",tags:[],version:"current",sidebarPosition:0,frontMatter:{sidebar_position:0,title:"UncheckEvent",sidebar_class_name:"sidebar--item__hidden",slug:"UncheckEvent",pagination_next:null},sidebar:"documentationSidebar",previous:{title:"ToggleEvent",permalink:"/docs/components/events/ToggleEvent"}},d={},l=[{value:"See Also",id:"see-also",level:2}];function h(e){const t={a:"a",code:"code",h2:"h2",li:"li",p:"p",ul:"ul",...(0,s.a)(),...e.components};return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(i.Z,{type:"engine",location:"org/dwcj/component/event/UncheckEvent",top:"true"}),"\n",(0,c.jsxs)(t.p,{children:['An "uncheck" event occurs when an element or checkbox is deselected or marked as "unchecked." This event is triggered when a user interacts with a checkbox, radio button, or any other form element to remove the "checked" state. It usually indicates that the associated action or state has been disabled or deactivated. This class also inherits methods from the ',(0,c.jsxs)(t.a,{href:"./event",children:["base ",(0,c.jsx)(t.code,{children:"Event"})," class"]})]}),"\n",(0,c.jsx)(t.h2,{id:"see-also",children:"See Also"}),"\n",(0,c.jsxs)(t.ul,{children:["\n",(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:"./event",children:"Event"})}),"\n",(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:"./CheckEvent",children:"Check Event"})}),"\n",(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:"./ToggleEvent",children:"Toggle Event"})}),"\n",(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:"../checkbox",children:"CheckBox"})}),"\n",(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:"../radiobutton",children:"RadioButton"})}),"\n"]})]})}function u(e={}){const{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,c.jsx)(t,{...e,children:(0,c.jsx)(h,{...e})}):h(e)}},3273:(e,t,n)=>{n.d(t,{Z:()=>d});var c=n(7294),s=n(917),i=n(8230),o=n(4387),a=n(6770);var r=n(5944);function d(e){let{type:t,location:n,top:d,children:l,code:h,suffix:u}=e;const[v,m]=(0,c.useState)("");(0,c.useEffect)((()=>{u||(u=""),m("https://javadoc.io/doc/org.dwcj/dwcj-"+t+"/latest/"+n+".html"+u)}),[]);const p=s.iv`
+"use strict";(self.webpackChunkdwcj_documentation=self.webpackChunkdwcj_documentation||[]).push([[2616],{4519:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>a,default:()=>v,frontMatter:()=>o,metadata:()=>r,toc:()=>l});var c=n(5893),s=n(1151),i=n(3273);const o={sidebar_position:0,title:"UncheckEvent",sidebar_class_name:"sidebar--item__hidden",slug:"UncheckEvent",pagination_next:null},a=void 0,r={id:"components/events/uncheck-event",title:"UncheckEvent",description:'An "uncheck" event occurs when an element or checkbox is deselected or marked as "unchecked." This event is triggered when a user interacts with a checkbox, radio button, or any other form element to remove the "checked" state. It usually indicates that the associated action or state has been disabled or deactivated. This class also inherits methods from the base Event class',source:"@site/docs/components/events/uncheck-event.md",sourceDirName:"components/events",slug:"/components/events/UncheckEvent",permalink:"/docs/components/events/UncheckEvent",draft:!1,unlisted:!1,editUrl:"https://github.com/DwcJava/dwcjava.github.io/tree/website/docs/components/events/uncheck-event.md",tags:[],version:"current",sidebarPosition:0,frontMatter:{sidebar_position:0,title:"UncheckEvent",sidebar_class_name:"sidebar--item__hidden",slug:"UncheckEvent",pagination_next:null},sidebar:"documentationSidebar",previous:{title:"ToggleEvent",permalink:"/docs/components/events/ToggleEvent"}},d={},l=[{value:"See Also",id:"see-also",level:2}];function h(e){const t={a:"a",code:"code",h2:"h2",li:"li",p:"p",ul:"ul",...(0,s.a)(),...e.components};return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(i.Z,{type:"engine",location:"org/dwcj/component/event/UncheckEvent",top:"true"}),"\n",(0,c.jsxs)(t.p,{children:['An "uncheck" event occurs when an element or checkbox is deselected or marked as "unchecked." This event is triggered when a user interacts with a checkbox, radio button, or any other form element to remove the "checked" state. It usually indicates that the associated action or state has been disabled or deactivated. This class also inherits methods from the ',(0,c.jsxs)(t.a,{href:"./event",children:["base ",(0,c.jsx)(t.code,{children:"Event"})," class"]})]}),"\n",(0,c.jsx)(t.h2,{id:"see-also",children:"See Also"}),"\n",(0,c.jsxs)(t.ul,{children:["\n",(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:"./event",children:"Event"})}),"\n",(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:"./CheckEvent",children:"Check Event"})}),"\n",(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:"./ToggleEvent",children:"Toggle Event"})}),"\n",(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:"../checkbox",children:"CheckBox"})}),"\n",(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:"../radiobutton",children:"RadioButton"})}),"\n"]})]})}function v(e={}){const{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,c.jsx)(t,{...e,children:(0,c.jsx)(h,{...e})}):h(e)}},6031:(e,t,n)=>{var c=n(4836);t.Z=void 0;var s=c(n(4938)),i=n(5893),o=(0,s.default)((0,i.jsx)("path",{d:"m19 1-5 5v11l5-4.5V1zM1 6v14.65c0 .25.25.5.5.5.1 0 .15-.05.25-.05C3.1 20.45 5.05 20 6.5 20c1.95 0 4.05.4 5.5 1.5V6c-1.45-1.1-3.55-1.5-5.5-1.5S2.45 4.9 1 6zm22 13.5V6c-.6-.45-1.25-.75-2-1v13.5c-1.1-.35-2.3-.5-3.5-.5-1.7 0-4.15.65-5.5 1.5v2c1.35-.85 3.8-1.5 5.5-1.5 1.65 0 3.35.3 4.75 1.05.1.05.15.05.25.05.25 0 .5-.25.5-.5v-1.1z"}),"AutoStories");t.Z=o},3273:(e,t,n)=>{n.d(t,{Z:()=>d});var c=n(7294),s=n(917),i=n(8230),o=n(4387),a=n(6031);var r=n(5944);function d(e){let{type:t,location:n,top:d,children:l,code:h,suffix:v}=e;const[u,m]=(0,c.useState)("");(0,c.useEffect)((()=>{v||(v=""),m("https://javadoc.io/doc/org.dwcj/dwcj-"+t+"/latest/"+n+".html"+v)}),[]);const p=s.iv`
display: inline;
${d&&s.iv`
@@ -10,7 +10,8 @@
`}
`,k=s.iv`
background-color: #0063CC;
+ padding: 0 0 0 5px;
:hover{
color: white;
}
- `;return(0,r.BX)(r.HY,{children:["true"===d&&(0,r.tZ)("div",{css:p,children:(0,r.tZ)(i.Z,{title:"JavaDoc",arrow:!0,children:(0,r.tZ)(o.Z,{css:k,label:"Java API",component:"a",href:v,icon:(0,r.tZ)(a.Z,{}),clickable:!0,color:"primary",target:"_blank"})})}),"true"!==d&&!h&&(0,r.tZ)("div",{css:p,children:(0,r.tZ)("a",{href:v,target:"_blank",children:l})}),"true"!==d&&h&&(0,r.tZ)("div",{css:p,children:(0,r.tZ)("code",{children:(0,r.tZ)("a",{href:v,target:"_blank",children:l})})})]})}}}]);
\ No newline at end of file
+ `;return(0,r.BX)(r.HY,{children:["true"===d&&(0,r.tZ)("div",{css:p,children:(0,r.tZ)(i.Z,{title:"JavaDoc",arrow:!0,children:(0,r.tZ)(o.Z,{css:k,label:"Java API",component:"a",href:u,icon:(0,r.tZ)(a.Z,{}),clickable:!0,color:"primary",target:"_blank"})})}),"true"!==d&&!h&&(0,r.tZ)("div",{css:p,children:(0,r.tZ)("a",{href:u,target:"_blank",children:l})}),"true"!==d&&h&&(0,r.tZ)("div",{css:p,children:(0,r.tZ)("code",{children:(0,r.tZ)("a",{href:u,target:"_blank",children:l})})})]})}}}]);
\ No newline at end of file
diff --git a/assets/js/87878b99.3e2884b4.js b/assets/js/87878b99.752409ed.js
similarity index 56%
rename from assets/js/87878b99.3e2884b4.js
rename to assets/js/87878b99.752409ed.js
index a120a69ba..23527e018 100644
--- a/assets/js/87878b99.3e2884b4.js
+++ b/assets/js/87878b99.752409ed.js
@@ -1,10 +1,12 @@
-"use strict";(self.webpackChunkdwcj_documentation=self.webpackChunkdwcj_documentation||[]).push([[9047],{4679:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>h,default:()=>x,frontMatter:()=>l,metadata:()=>d,toc:()=>p});var s=n(5893),o=n(1151),i=(n(4866),n(5162),n(6957)),r=n(7796),a=n(3273),c=n(2665);const l={sidebar_position:10,title:"CheckBox"},h=void 0,d={id:"components/checkbox",title:"CheckBox",description:"The CheckBox class creates a component that can be selected or deselected, and which displays its state to the user. When clicked, a check mark appears inside the box, to indicate an affirmative choice (on). When clicked again, the check mark disappears, indicating a negative choice (off).",source:"@site/docs/components/checkbox.md",sourceDirName:"components",slug:"/components/checkbox",permalink:"/docs/components/checkbox",draft:!1,unlisted:!1,editUrl:"https://github.com/DwcJava/dwcjava.github.io/tree/website/docs/components/checkbox.md",tags:[],version:"current",sidebarPosition:10,frontMatter:{sidebar_position:10,title:"CheckBox"},sidebar:"documentationSidebar",previous:{title:"Button",permalink:"/docs/components/button"},next:{title:"Styles",permalink:"/docs/category/styles"}},u={},p=[{value:"Usages",id:"usages",level:2},{value:"Constructors",id:"constructors",level:2},{value:"Text and Positioning",id:"text-and-positioning",level:2},{value:"Indeterminism",id:"indeterminism",level:2},{value:"Events",id:"events",level:2},{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={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)(c.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)(c.Z,{tooltipText:"The name of the web component that will render in the DOM.",label:"bbj-checkbox",href:"https://basishub.github.io/basis-next/#/web-components/bbj-checkbox",clickable:!1,iconName:"code"}),"\n",(0,s.jsx)(a.Z,{type:"engine",location:"org/dwcj/component/optioninput/CheckBox",top:"true"}),"\n",(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.code,{children:"CheckBox"})," class creates a component that can be selected or deselected, and which displays its state to the user. When clicked, a check mark appears inside the box, to indicate an affirmative choice (on). When clicked again, the check mark disappears, indicating a negative choice (off)."]}),"\n",(0,s.jsx)(t.p,{children:"By providing a clear and straightforward visual indication of selection status, checkboxes enhance user interaction and decision-making, making them an essential element in modern user interfaces."}),"\n",(0,s.jsx)(t.h2,{id:"usages",children:"Usages"}),"\n",(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.code,{children:"CheckBox"})," is best used in scenarios where users need to make multiple selections from a list of options. Here are some examples of when to use the ",(0,s.jsx)(t.code,{children:"CheckBox"}),":"]}),"\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:"Task or Feature Selection"}),": Checkboxes are commonly used when users need to select multiple tasks or features to perform certain actions or configurations."]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Preference Settings"}),": Applications that involve preference or settings panels often use Checkboxes to allow users to choose multiple options from a set of choices. This is best for options which are not mutually exclusive. For instance:"]}),"\n"]}),"\n"]}),"\n",(0,s.jsxs)(t.blockquote,{children:["\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:"Enabling or disabling notifications"}),"\n",(0,s.jsx)(t.li,{children:"Choosing a dark mode or light mode theme"}),"\n",(0,s.jsx)(t.li,{children:"Selecting email notification preferences"}),"\n"]}),"\n"]}),"\n",(0,s.jsxs)(t.ol,{start:"3",children:["\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Filtering or Sorting"}),": A ",(0,s.jsx)(t.code,{children:"CheckBox"})," can be used in applications that require users to select multiple filters or categories, such as filtering search results or selecting multiple items for further actions."]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Form Inputs"}),": Checkboxes are commonly used in forms to allow users to select multiple options or make binary choices. For example:"]}),"\n"]}),"\n"]}),"\n",(0,s.jsxs)(t.blockquote,{children:["\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:"Subscribe to a newsletter"}),"\n",(0,s.jsx)(t.li,{children:"Agree to terms and conditions"}),"\n",(0,s.jsx)(t.li,{children:"Select items for purchase or booking"}),"\n"]}),"\n"]}),"\n",(0,s.jsx)(t.h2,{id:"constructors",children:"Constructors"}),"\n",(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.code,{children:"CheckBox"})," class has three constructors:"]}),"\n",(0,s.jsxs)(t.ol,{children:["\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(a.Z,{type:"engine",location:"org/dwcj/component/checkbox/CheckBox",code:"true",suffix:"#()",children:"Checkbox()"}),": Creates an empty ",(0,s.jsx)("code",{children:"CheckBox"})," in the unchecked state."]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(a.Z,{type:"engine",location:"org/dwcj/component/checkbox/CheckBox",code:"true",suffix:"#(java.lang.String)",children:"Checkbox(String text)"}),": Creates a ",(0,s.jsx)("code",{children:"CheckBox"})," with an attached label in the unchecked state."]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(a.Z,{type:"engine",location:"org/dwcj/component/checkbox/CheckBox",code:"true",suffix:"#(java.lang.String,boolean)",children:"Checkbox(String text boolean checked)"}),": Creates a ",(0,s.jsx)("code",{children:"CheckBox"})," with an attached label in either the checked or unchecked state, based on the boolean passed (",(0,s.jsx)("code",{children:"true"})," for checked, ",(0,s.jsx)("code",{children:"false"})," for unchecked)."]}),"\n"]}),"\n",(0,s.jsxs)(t.p,{children:["Here is an example of how to create a ",(0,s.jsx)(t.code,{children:"CheckBox"})," object:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-java",children:'CheckBox enabled = new CheckBox("Enable Option");\n'})}),"\n",(0,s.jsx)(t.h2,{id:"text-and-positioning",children:"Text and Positioning"}),"\n",(0,s.jsxs)(t.p,{children:["Check boxes can utilize the ",(0,s.jsx)(a.Z,{type:"engine",location:"org/dwcj/component/AbstractOptionInput",code:"true",suffix:"#setText(java.lang.String)",children:"setText(String text)"})," method, which will be positioned near the check box according to the built-in ",(0,s.jsx)(a.Z,{type:"engine",location:"org/dwcj/component/TextPosition",code:"true",suffix:"",children:"Position"}),"."]}),"\n",(0,s.jsxs)(t.p,{children:["Checkboxes have built-in functionality to set text to be displayed either to the right or left of the box. By default, the text will be displayed to the right of the component. Positioning of the text is supported by use of the ",(0,s.jsx)(a.Z,{type:"engine",location:"org/dwcj/component/TextPosition",code:"true",suffix:"",children:"Position"})," enum. Show below are the two settings: ",(0,s.jsx)("br",{})]}),"\n",(0,s.jsx)(i.Z,{path:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.checkboxdemos.CheckboxHorizontalText",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/checkboxdemos/CheckboxHorizontalText.java",javaC:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/code_snippets/checkbox/Horizontal.txt",cssURL:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/resources/css/checkboxstyles/text_styles.css",height:"200px"}),"\n",(0,s.jsx)("br",{}),"\n",(0,s.jsx)(t.h2,{id:"indeterminism",children:"Indeterminism"}),"\n",(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.code,{children:"CheckBox"})," component supports indeterminism, which is a UI pattern commonly used in forms and lists to indicate that a group of checkboxes has a mixture of checked and unchecked states. This state is represented by a third visual state, typically displayed as a filled square or a dash inside the checkbox. There are a few common use cases associated with indeterminism:"]}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Selecting multiple items"}),": Indeterminism is useful when users need to select multiple items from a list or a set of options. It allows users to indicate that they want to select some, but not all, of the available choices."]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Hierarchical data"}),": Indeterminism can be employed in scenarios where there is a hierarchical relationship between CheckBoxes. For example, when selecting categories and subcategories, indeterminism can represent that some subcategories are selected while others are not, and the parent component is in the indeterminate state."]}),"\n"]}),"\n"]}),"\n",(0,s.jsx)(i.Z,{path:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.checkboxdemos.CheckboxIndeterminate",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/checkboxdemos/CheckboxIndeterminate.java",javaC:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/code_snippets/checkbox/Indeterminate.txt",cssURL:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/resources/css/checkboxstyles/text_styles.css",height:"150px"}),"\n",(0,s.jsx)(t.h2,{id:"events",children:"Events"}),"\n",(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.code,{children:"CheckBox"})," class provides methods to add and remove event listeners for the following events:"]}),"\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/event/BlurEvent",code:"true",children:"BlurEvent"})}),(0,s.jsx)(t.td,{children:"An event that is triggered when an element loses focus. It occurs when the user interacts with an element, such as clicking inside an input field, and then moves the focus away from that element, typically by clicking outside of it or tabbing to another element on the page."})]}),(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/event/FocusEvent",code:"true",children:"FocusEvent"})}),(0,s.jsx)(t.td,{children:"An event that is triggered when an element gains focus, opposite of a blur event. It occurs when the user interacts with an element, typically by clicking inside an input field or navigating to it using the keyboard's tab key, causing the element to become active and ready to receive user input."})]}),(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/event/CheckEvent",code:"true",children:"CheckEvent"})}),(0,s.jsx)(t.td,{children:"An event that is triggered when the state of a component changes and becomes checked. It occurs when the user interacts with a checkbox element by clicking or tapping on it, causing the checkbox to transition from an unchecked state to a checked state."})]}),(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/event/UncheckEvent",code:"true",children:"UncheckEvent"})}),(0,s.jsx)(t.td,{children:"An event that is triggered when the state of a component changes and becomes unchecked."})]}),(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/event/ToggleEvent",code:"true",children:"ToggleEvent"})}),(0,s.jsx)(t.td,{children:'A ToggleEvent fires a CheckBox or a similar UI element changes its state between "on" and "off" or "active" and "inactive."'})]}),(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/event/MouseEnterEvent",code:"true",children:"MouseEnterEvent"})}),(0,s.jsx)(t.td,{children:"An event that is triggered when the mouse cursor enters the boundaries of a component."})]}),(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/event/MouseExitEvent",code:"true",children:"MouseExitEvent"})}),(0,s.jsx)(t.td,{children:"An event that is triggered when the mouse cursor exits the boundaries of a component."})]}),(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/event/RightMouseDownEvent",code:"true",children:"RightMouseDownEvent"})}),(0,s.jsx)(t.td,{children:"An event that is triggered when the user presses the right mouse button while the cursor is over a component."})]})]})]}),"\n",(0,s.jsx)("br",{}),"\n",(0,s.jsx)(t.p,{children:"To add an event listener, use the appropriate method:"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-java",children:"myCheckBox.addCheckListener( e -> {\r\n //Executed when the event fires\r\n});\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:"myCheckBox.onCheck( e -> {\r\n //Executed when the event fires\r\n});\n"})}),"\n",(0,s.jsx)(t.admonition,{type:"tip",children:(0,s.jsx)(t.p,{children:"Using the event payload that comes with various events to attain information reduces the number of round trips made when instead querying the component for the required information."})}),"\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:"myCheckBox.removeCheckListener(listener);\n"})}),"\n",(0,s.jsx)(i.Z,{path:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.checkboxdemos.CheckboxEventDemo",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/checkboxdemos/CheckboxEventDemo.java",javaC:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/code_snippets/checkbox/Event.txt",cssURL:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/resources/css/checkboxstyles/text_styles.css",height:"100px"}),"\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:["The following ",(0,s.jsx)(a.Z,{type:"engine",location:"org/dwcj/component/Expanse",children:" Expanses values "})," allow for quick styling without using CSS.\r\nExpanses are supported by use of the ",(0,s.jsx)(t.code,{children:"Expanse"})," enum class. Below are the expanses supported for the checkbox component: ",(0,s.jsx)("br",{})]}),"\n",(0,s.jsx)(i.Z,{path:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.checkboxdemos.CheckboxExpanseDemo",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/checkboxdemos/CheckboxExpanseDemo.java",javaC:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/code_snippets/checkbox/Expanse.txt",cssURL:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/resources/css/checkboxstyles/expanse_styles.css",javaHighlight:"{17,21,25,29,33}"}),"\n",(0,s.jsx)("br",{}),"\n",(0,s.jsx)(t.h3,{id:"shadow-parts",children:"Shadow Parts"}),"\n",(0,s.jsx)(t.p,{children:"These are the various parts of the shadow DOM for the component, which will be required when styling via CSS is desired."}),"\n",(0,s.jsx)(r.Z,{tag:n(5731).XZ,table:"parts"}),"\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).XZ,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).XZ,table:"reflects"}),"\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-checkbox",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:"Checkbox"})," 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:"Clearly Label Options"}),": Provide clear and concise labels for each ",(0,s.jsx)(t.code,{children:"CheckBox"})," option to accurately describe the choice. Labels should be easy to understand and distinguish from one another."]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Group CheckBoxes"}),": Group related Checkboxes together to indicate their association. This helps users understand that multiple options can be selected within a specific group."]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Provide Default Selection"}),": If applicable, consider providing a default selection for CheckBoxes to guide users when they first encounter the options. The default selection should align with the most common or preferred choice."]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Indeterminism"}),": If a parent ",(0,s.jsx)(t.code,{children:"CheckBox"})," component has multiple components belonging to it in a way in which some can be checked on and others checked off, use the indeterminate property to show that not all ",(0,s.jsx)(t.code,{children:"CheckBox"})," components are checked or unchecked."]}),"\n"]}),"\n"]})]})}function x(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:()=>f});var s=n(7294),o=n(6010),i=n(2466),r=n(6550),a=n(469),c=n(1980),l=n(7392),h=n(12);function d(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 d(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,l.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,c._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 x(e){const{defaultValue:t,queryString:n=!1,groupId:o}=e,i=u(e),[r,c]=(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}))),[l,d]=m({queryString:n,groupId:o}),[x,b]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[o,i]=(0,h.Nk)(n);return[o,(0,s.useCallback)((e=>{n&&i.set(e)}),[n,i])]}({groupId:o}),g=(()=>{const e=l??x;return p({value:e,tabValues:i})?e:null})();(0,a.Z)((()=>{g&&c(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}`);c(e),d(e),b(e)}),[d,b,i]),tabValues:i}}var b=n(2389);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=n(5893);function j(e){let{className:t,block:n,selectedValue:s,selectValue:r,tabValues:a}=e;const c=[],{blockElementScrollPositionUntilNextRender:l}=(0,i.o5)(),h=e=>{const t=e.currentTarget,n=c.indexOf(t),o=a[n].value;o!==s&&(l(t),r(o))},d=e=>{let t=null;switch(e.key){case"Enter":h(e);break;case"ArrowRight":{const n=c.indexOf(e.currentTarget)+1;t=c[n]??c[0];break}case"ArrowLeft":{const n=c.indexOf(e.currentTarget)-1;t=c[n]??c[c.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=>c.push(e),onKeyDown:d,onClick:h,...i,className:(0,o.Z)("tabs__item",g.tabItem,i?.className,{"tabs__item--active":s===t}),children:n??t},t)}))})}function A(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 w(e){const t=x(e);return(0,v.jsxs)("div",{className:(0,o.Z)("tabs-container",g.tabList),children:[(0,v.jsx)(j,{...e,...t}),(0,v.jsx)(A,{...e,...t})]})}function f(e){const t=(0,b.Z)();return(0,v.jsx)(w,{...e,children:d(e.children)},String(t))}},6957:(e,t,n)=>{n.d(t,{Z:()=>b});var s=n(7294),o=n(917),i=n(4866),r=n(5162),a=n(4673),c=n(1750);const l="data:image/png;base64,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",h=n.p+"assets/images/expand-ba3f00f73da43d91e5b17663c4a7d108.png",d="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPAAAADwCAYAAAA+VemSAAAABmJLR0QA/wD/AP+gvaeTAAALyElEQVR4nO3dXahmVR3H8e+M0/FlRouiGV9GxLSkiy7MkW7MDJOCCJ1zkia66KaLLByKEqUizW6EwJjKi24yDfL9pYSEEDSlIMS3JkJrlBzURiUcdXyZF8cu9hnmpOfMec551tr//9rP9wMLQWU9/73W/p398qy9H5AkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSW1bEV1ABauBs4AzgNNm2zrgvcAa4D1xpakHe4DXgJeAF4HHgSeAh4A/z/63wRhKgNcBXwamgU8AU7HlKKk9wF+B24EbgOdjy9E5wF3AXuBtm20JbS/we+Bs1Ltz6U6HoncC2zDaA8CnUXXHAdcTP+G2Yba7gBNRFZuAncRPsm3YbSdwISrmCOCXxE+sbbLaNcDhaCxrgD8SP5m2yWz30n39mFbmr5HWAXcDp0cXoon2CPA54IXoQuaTNcDHAPdheJXDVrqvm3ZGF/JOK6MLmMcRdHcDDa+y+BhwGwmviQ+LLmAe19CtqJIyORl4P/CH6ELmyhbgC4GroouQFnAm8E/g79GFHJDpGvh44B8kv+unibcT+CiwI7oQyHUNfDWGV/m9D/hJdBEHZDkCnwvcE12ENKK36dZO/ym6kCwBfoDuGV6pFfcDn4ouIsMp9DkYXrXnbOCT0UVkCPB3oguQlumS6AKiT6HXAs8Cq4LrkJZjH7CeCX6zx7epuxj9TbrnhzcCJ+H7sCbBKrq5ngZ+Q7cP1NzHNvezWTndT72B/S3dd8uabCcAN1L3iaWJtBrYTfkB3Qd8vcftUBu+Qbdv1DjLO7LH7Ujjs9T5i3hRnxuhpnyTOvvceX1uRBbfo85ps3QoN1F+v7us1y1I4jrKDuIbeM2rxa2n/I2ta3vdgjkivwc+rXB/twDPFe5Tw/MMcGvhPkvvyyOLDPCxhfu7o3B/Gq47C/dXel8eWWSAjy7c30OF+9Nwld5XSu/LI4tcibWbsr9hNEX3cxnSYqbo9r9SdtO9Cqp3kQF+u3B/0ctC1ZZB7H8ZHmaQtEwGWGqYAZYaZoClhhlgqWEGWGqYAZYaZoClhhlgqWEGeFimgE10r5DZRre0tMYD7KXbHuBp4Gd0P+quBpTeCSbdDLCd+DCO2/bRz0+XuP+NyQEsYyWwhfjglW6PUvd1w+5/Y3IAyxhieOeGuBb3vzE5gOObIT5ktVut0+lB7H8+TtiuKeBxul+OH7J9wAeAVwr3O4j9z7vQ7Zpm+OGF7jr4yugisjLA7doYXUCPpqMLyMoAt+vM6AJ6dFx0AVl5DdyuNwh6D1OQ0vM7iP3PI3C7JvXOu+YwwO3aEV2A4hngdj0YXYDiGeB2+UsU8iZWwyZlIccB3sSah0fgdu0BLokuQrEMcNtuo3uGVurdIBaTJzDUxwlrz2/2+tJzAMsaygP9BngJvIk1LFN064YvADYAJ1H3ofg+eRMrmUH8BRywlcCviT/yegROygHMK1t4DXBCDmBOGcNrgBNyAPPJGl4DnJADmEvm8BrghBzAPLKH1wAn5ADm0EJ4DXBCDmC8VsJrgBNyAGO1FF4DnJADGKe18BrghBzAGC2G1wAn5AD2r9XwGuCEHMB+tRxeA5yQA9if1sNrgBNyAPsREd4bKvRZWvb60nMA64sK72EV+i0te33pOYB1RYaXCn2Xlr2+9BzAeqLDS4X+S8teX3oOYB0ZwkuFzygte33pOYDlZQkvFT6ntOz1pecAlpUpvFT4rNKy15eeA1hOtvBS4fNKy15feg5gGRnDS4XPLC17fek5gOPLGl4qfG5p2etLzwEcT+bwUuGzS8teX3oO4PJlDy8VPr+07PWl5wAuTwvhpUINpWWvLz0HcOlaCS8V6igte33pOYBL01J4qVBLadnrS88BHF1r4aVCPaVlry+91yk3eK/1XHufWgwv5J9fAzympyg3eE/1XHtfWg0v5J/fQQR4ZdQHAw8m7SuLlcC1wFd7/Mzrga8AbxXoy/kduE2U++v3pZ5r78MW+j3yXkfZP+jZ53cQR+BIU5Q5zfo3cHi/pVc3Q9vhhfzza4ALKLGjzvRedV2ldvxRW6lr3vlknl8DXMg4p4pbAuqtreSpZ2R4D8g6vwa4kJUsb5K3EHsTrpab6Ce8NU6b55N1fg1wYTPAdhYfqO0M77R5rj5On/sK71zZ5tcAVzBFdwp5I7AN2Dvbts3+u02z/8+QvUHd8PZx2ryQTPNrgFVFyRVMmcKbjQFWFbVOoSNOmzMzwKqixk0sw/tuBlhVlP4aydPm+RlgVVFyIYfhXZgBVjUlVjB52nxoBlhVjbOCyfAuzgCrqqwrmIbCAKsX2VYwDYUBVm8yrWAaikEEeEXUB0vBSocuJEteK0kNM8BSwwyw1DADLDXMAEsNM8BSwwyw1DADLDXMAEsNWxVdwBynABcAHwfWA+tm/7k6qJ7XgGeA52f/+TBwJ/BkUD1SOuuAHwNbKb82tVbbClw5W7vaNYi10FFWA5cCLxMfyOW2XcBVwDGFx0b9MMDLNAPsID6ApdoOYGPREVIfDPASraA76r5FfOhKt/10R2NvCrbDAC/BUcAtxAetdrsJOLLQmKkuAzyiFXQPnUeHq692Gz5n3QIDPKIriA9V3+2HJQZOVRngEczQXR9GB6rvth9vbGU3iADXPNVbA/wLOLbiZ2T2AnAq8Gp0IZpX6dAN7pU632VywwuwFvhWdBEatlp/NdbSvTHx6Er9t2IX8GG674qVi0fgQ7gYwwvdZcRF0UVouGoF2Bs4B10QXYCGq8Zh/1S6m1c66CM4Jtl4Cr2A8yv02bovRBegYaoR4A0V+mzd6dEFaJhqBPj4Cn22zjFRFTUCfFyFPlt3QnQBGqYaAZ7kxRsL8QisKmrcORvE3T2Gsx2a3yDm1wfQpYYZYKlhBlhqmAGWGmaApYYZYKlhBlhqmAGWGmaApYYZYE2iqcL97S7c38gMsCZR6YdLwt48aoA1iUo/s26ApR6Vfk9Z2FtHDbAmzYl0vxhS0hOF+xuZAdakuRo4vHCfYQGuYRC/OTNCXa1shw7aTJ3fwvpMnxtR21B2/KFshzqbqfPj8m8ysN+EHsqOP5TtmHQnUvfH5e/tb1PebVXkh0sVTNF9z7uB7m7zDOWveee6vWLfi/KdWAtrcTumgGm6HXcDcBL+ka5pL90fixejCnByh2MG+CndKaP6cTeB4a1lKNeOrWzHSmBLhXpti7ezRpif5rSy4y+mle0wvDHtvhHmpkmt7PiLaWE7ZirUaVu87QfOHmF+mtTCjj+K7NsxBTxVoU7b4u36EeanFy6lbNc0cHJ0ERPoJeCS6CIOMMDt2hhdwIT6GvB8dBEHGOB2nRldwAT6BcELN97JhRwLy74drzOwNbjJ3QN8HtgTXchcNRZy7ALWFOwv8kZWKa9EF6Cx/A34IsnCC3VOoZ+r0GfraoxJ2FsgJszDwHnAy9GFzKdGgP9Toc/W1QjwgxX61P+7BzgHeCG4jgV5BO5HjTG5o0KfOujndNe8YS+sG0WNAD9Uoc/W1RiTO4CnK/Q76V6iW+G2mYTXvH04hfiVMtlarQUXLqUs1/bTrbBat6QZGKitxE9IlvbomGO5GB9mGL/dx4DXNi/HlcRPSpZ2xXhDuSgfJ1xe2wP8joE+EjiuD9Lddo+epOj2Kv2dks0A23vYppbbm3TvsLqYbh/VIVxO/IRFtx+MPYpLMwVsAm4EttG98iV6DPpuu4H/Ak8CfwF+BVxG9+pXV64twWq6r0+iJzSqPTc7BlKzpunu7kWHqe/2FnB+gfGTwl1OfKD6bt8vMnJSAiuAG4gPVV/tVuKeoJKqOBK4mfhw1W43440SDdQK4FLq/D5NdNsPXIUvSNAE2Miw7k4/S/kfjJZSO4ruaLyT+AAut+2iO+oeXXhspGasBX4EPEZ8IEdtj83WvLbCeEhLkulu6Yfovjs9A1hPtwRxPWVfz7MUu4Bn6F5Q8CzwCHAn3buYJUmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEnA/wDL76bzm26ebQAAAABJRU5ErkJggg==";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([[9047],{4679:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>d,default:()=>x,frontMatter:()=>l,metadata:()=>h,toc:()=>p});var s=n(5893),o=n(1151),i=(n(4866),n(5162),n(6957)),r=n(7796),a=n(3273),c=n(2665);const l={sidebar_position:10,title:"CheckBox"},d=void 0,h={id:"components/checkbox",title:"CheckBox",description:"The CheckBox class creates a component that can be selected or deselected, and which displays its state to the user. When clicked, a check mark appears inside the box, to indicate an affirmative choice (on). When clicked again, the check mark disappears, indicating a negative choice (off).",source:"@site/docs/components/checkbox.md",sourceDirName:"components",slug:"/components/checkbox",permalink:"/docs/components/checkbox",draft:!1,unlisted:!1,editUrl:"https://github.com/DwcJava/dwcjava.github.io/tree/website/docs/components/checkbox.md",tags:[],version:"current",sidebarPosition:10,frontMatter:{sidebar_position:10,title:"CheckBox"},sidebar:"documentationSidebar",previous:{title:"Button",permalink:"/docs/components/button"},next:{title:"Styles",permalink:"/docs/category/styles"}},u={},p=[{value:"Usages",id:"usages",level:2},{value:"Constructors",id:"constructors",level:2},{value:"Text and Positioning",id:"text-and-positioning",level:2},{value:"Indeterminism",id:"indeterminism",level:2},{value:"Events",id:"events",level:2},{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={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)(c.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)(c.Z,{tooltipText:"The name of the web component that will render in the DOM.",label:"bbj-checkbox",href:"https://basishub.github.io/basis-next/#/web-components/bbj-checkbox",clickable:!1,iconName:"code"}),"\n",(0,s.jsx)(a.Z,{type:"engine",location:"org/dwcj/component/optioninput/CheckBox",top:"true"}),"\n",(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.code,{children:"CheckBox"})," class creates a component that can be selected or deselected, and which displays its state to the user. When clicked, a check mark appears inside the box, to indicate an affirmative choice (on). When clicked again, the check mark disappears, indicating a negative choice (off)."]}),"\n",(0,s.jsx)(t.p,{children:"By providing a clear and straightforward visual indication of selection status, checkboxes enhance user interaction and decision-making, making them an essential element in modern user interfaces."}),"\n",(0,s.jsx)(t.h2,{id:"usages",children:"Usages"}),"\n",(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.code,{children:"CheckBox"})," is best used in scenarios where users need to make multiple selections from a list of options. Here are some examples of when to use the ",(0,s.jsx)(t.code,{children:"CheckBox"}),":"]}),"\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:"Task or Feature Selection"}),": Checkboxes are commonly used when users need to select multiple tasks or features to perform certain actions or configurations."]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Preference Settings"}),": Applications that involve preference or settings panels often use Checkboxes to allow users to choose multiple options from a set of choices. This is best for options which are not mutually exclusive. For instance:"]}),"\n"]}),"\n"]}),"\n",(0,s.jsxs)(t.blockquote,{children:["\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:"Enabling or disabling notifications"}),"\n",(0,s.jsx)(t.li,{children:"Choosing a dark mode or light mode theme"}),"\n",(0,s.jsx)(t.li,{children:"Selecting email notification preferences"}),"\n"]}),"\n"]}),"\n",(0,s.jsxs)(t.ol,{start:"3",children:["\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Filtering or Sorting"}),": A ",(0,s.jsx)(t.code,{children:"CheckBox"})," can be used in applications that require users to select multiple filters or categories, such as filtering search results or selecting multiple items for further actions."]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Form Inputs"}),": Checkboxes are commonly used in forms to allow users to select multiple options or make binary choices. For example:"]}),"\n"]}),"\n"]}),"\n",(0,s.jsxs)(t.blockquote,{children:["\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:"Subscribe to a newsletter"}),"\n",(0,s.jsx)(t.li,{children:"Agree to terms and conditions"}),"\n",(0,s.jsx)(t.li,{children:"Select items for purchase or booking"}),"\n"]}),"\n"]}),"\n",(0,s.jsx)(t.h2,{id:"constructors",children:"Constructors"}),"\n",(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.code,{children:"CheckBox"})," class has three constructors:"]}),"\n",(0,s.jsxs)(t.ol,{children:["\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(a.Z,{type:"engine",location:"org/dwcj/component/checkbox/CheckBox",code:"true",suffix:"#()",children:"Checkbox()"}),": Creates an empty ",(0,s.jsx)("code",{children:"CheckBox"})," in the unchecked state."]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(a.Z,{type:"engine",location:"org/dwcj/component/checkbox/CheckBox",code:"true",suffix:"#(java.lang.String)",children:"Checkbox(String text)"}),": Creates a ",(0,s.jsx)("code",{children:"CheckBox"})," with an attached label in the unchecked state."]}),"\n",(0,s.jsxs)(t.li,{children:[(0,s.jsx)(a.Z,{type:"engine",location:"org/dwcj/component/checkbox/CheckBox",code:"true",suffix:"#(java.lang.String,boolean)",children:"Checkbox(String text boolean checked)"}),": Creates a ",(0,s.jsx)("code",{children:"CheckBox"})," with an attached label in either the checked or unchecked state, based on the boolean passed (",(0,s.jsx)("code",{children:"true"})," for checked, ",(0,s.jsx)("code",{children:"false"})," for unchecked)."]}),"\n"]}),"\n",(0,s.jsxs)(t.p,{children:["Here is an example of how to create a ",(0,s.jsx)(t.code,{children:"CheckBox"})," object:"]}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-java",children:'CheckBox enabled = new CheckBox("Enable Option");\n'})}),"\n",(0,s.jsx)(t.h2,{id:"text-and-positioning",children:"Text and Positioning"}),"\n",(0,s.jsxs)(t.p,{children:["Check boxes can utilize the ",(0,s.jsx)(a.Z,{type:"engine",location:"org/dwcj/component/AbstractOptionInput",code:"true",suffix:"#setText(java.lang.String)",children:"setText(String text)"})," method, which will be positioned near the check box according to the built-in ",(0,s.jsx)(a.Z,{type:"engine",location:"org/dwcj/component/TextPosition",code:"true",suffix:"",children:"Position"}),"."]}),"\n",(0,s.jsxs)(t.p,{children:["Checkboxes have built-in functionality to set text to be displayed either to the right or left of the box. By default, the text will be displayed to the right of the component. Positioning of the text is supported by use of the ",(0,s.jsx)(a.Z,{type:"engine",location:"org/dwcj/component/TextPosition",code:"true",suffix:"",children:"Position"})," enum. Show below are the two settings: ",(0,s.jsx)("br",{})]}),"\n",(0,s.jsx)(i.Z,{path:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.checkboxdemos.CheckboxHorizontalText",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/checkboxdemos/CheckboxHorizontalText.java",javaC:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/code_snippets/checkbox/Horizontal.txt",cssURL:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/resources/css/checkboxstyles/text_styles.css",height:"200px"}),"\n",(0,s.jsx)("br",{}),"\n",(0,s.jsx)(t.h2,{id:"indeterminism",children:"Indeterminism"}),"\n",(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.code,{children:"CheckBox"})," component supports indeterminism, which is a UI pattern commonly used in forms and lists to indicate that a group of checkboxes has a mixture of checked and unchecked states. This state is represented by a third visual state, typically displayed as a filled square or a dash inside the checkbox. There are a few common use cases associated with indeterminism:"]}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Selecting multiple items"}),": Indeterminism is useful when users need to select multiple items from a list or a set of options. It allows users to indicate that they want to select some, but not all, of the available choices."]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Hierarchical data"}),": Indeterminism can be employed in scenarios where there is a hierarchical relationship between CheckBoxes. For example, when selecting categories and subcategories, indeterminism can represent that some subcategories are selected while others are not, and the parent component is in the indeterminate state."]}),"\n"]}),"\n"]}),"\n",(0,s.jsx)(i.Z,{path:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.checkboxdemos.CheckboxIndeterminate",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/checkboxdemos/CheckboxIndeterminate.java",javaC:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/code_snippets/checkbox/Indeterminate.txt",cssURL:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/resources/css/checkboxstyles/text_styles.css",height:"150px"}),"\n",(0,s.jsx)(t.h2,{id:"events",children:"Events"}),"\n",(0,s.jsxs)(t.p,{children:["The ",(0,s.jsx)(t.code,{children:"CheckBox"})," class provides methods to add and remove event listeners for the following events:"]}),"\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/event/BlurEvent",code:"true",children:"BlurEvent"})}),(0,s.jsx)(t.td,{children:"An event that is triggered when an element loses focus. It occurs when the user interacts with an element, such as clicking inside an input field, and then moves the focus away from that element, typically by clicking outside of it or tabbing to another element on the page."})]}),(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/event/FocusEvent",code:"true",children:"FocusEvent"})}),(0,s.jsx)(t.td,{children:"An event that is triggered when an element gains focus, opposite of a blur event. It occurs when the user interacts with an element, typically by clicking inside an input field or navigating to it using the keyboard's tab key, causing the element to become active and ready to receive user input."})]}),(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/event/CheckEvent",code:"true",children:"CheckEvent"})}),(0,s.jsx)(t.td,{children:"An event that is triggered when the state of a component changes and becomes checked. It occurs when the user interacts with a checkbox element by clicking or tapping on it, causing the checkbox to transition from an unchecked state to a checked state."})]}),(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/event/UncheckEvent",code:"true",children:"UncheckEvent"})}),(0,s.jsx)(t.td,{children:"An event that is triggered when the state of a component changes and becomes unchecked."})]}),(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/event/ToggleEvent",code:"true",children:"ToggleEvent"})}),(0,s.jsx)(t.td,{children:'A ToggleEvent fires a CheckBox or a similar UI element changes its state between "on" and "off" or "active" and "inactive."'})]}),(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/event/MouseEnterEvent",code:"true",children:"MouseEnterEvent"})}),(0,s.jsx)(t.td,{children:"An event that is triggered when the mouse cursor enters the boundaries of a component."})]}),(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/event/MouseExitEvent",code:"true",children:"MouseExitEvent"})}),(0,s.jsx)(t.td,{children:"An event that is triggered when the mouse cursor exits the boundaries of a component."})]}),(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/event/RightMouseDownEvent",code:"true",children:"RightMouseDownEvent"})}),(0,s.jsx)(t.td,{children:"An event that is triggered when the user presses the right mouse button while the cursor is over a component."})]})]})]}),"\n",(0,s.jsx)("br",{}),"\n",(0,s.jsx)(t.p,{children:"To add an event listener, use the appropriate method:"}),"\n",(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-java",children:"myCheckBox.addCheckListener( e -> {\r\n //Executed when the event fires\r\n});\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:"myCheckBox.onCheck( e -> {\r\n //Executed when the event fires\r\n});\n"})}),"\n",(0,s.jsx)(t.admonition,{type:"tip",children:(0,s.jsx)(t.p,{children:"Using the event payload that comes with various events to attain information reduces the number of round trips made when instead querying the component for the required information."})}),"\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:"myCheckBox.removeCheckListener(listener);\n"})}),"\n",(0,s.jsx)(i.Z,{path:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.checkboxdemos.CheckboxEventDemo",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/checkboxdemos/CheckboxEventDemo.java",javaC:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/code_snippets/checkbox/Event.txt",cssURL:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/resources/css/checkboxstyles/text_styles.css",height:"100px"}),"\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:["The following ",(0,s.jsx)(a.Z,{type:"engine",location:"org/dwcj/component/Expanse",children:" Expanses values "})," allow for quick styling without using CSS.\r\nExpanses are supported by use of the ",(0,s.jsx)(t.code,{children:"Expanse"})," enum class. Below are the expanses supported for the checkbox component: ",(0,s.jsx)("br",{})]}),"\n",(0,s.jsx)(i.Z,{path:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.checkboxdemos.CheckboxExpanseDemo",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/checkboxdemos/CheckboxExpanseDemo.java",javaC:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/code_snippets/checkbox/Expanse.txt",cssURL:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/resources/css/checkboxstyles/expanse_styles.css",javaHighlight:"{17,21,25,29,33}"}),"\n",(0,s.jsx)("br",{}),"\n",(0,s.jsx)(t.h3,{id:"shadow-parts",children:"Shadow Parts"}),"\n",(0,s.jsx)(t.p,{children:"These are the various parts of the shadow DOM for the component, which will be required when styling via CSS is desired."}),"\n",(0,s.jsx)(r.Z,{tag:n(5731).XZ,table:"parts"}),"\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).XZ,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).XZ,table:"reflects"}),"\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-checkbox",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:"Checkbox"})," 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:"Clearly Label Options"}),": Provide clear and concise labels for each ",(0,s.jsx)(t.code,{children:"CheckBox"})," option to accurately describe the choice. Labels should be easy to understand and distinguish from one another."]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Group CheckBoxes"}),": Group related Checkboxes together to indicate their association. This helps users understand that multiple options can be selected within a specific group."]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Provide Default Selection"}),": If applicable, consider providing a default selection for CheckBoxes to guide users when they first encounter the options. The default selection should align with the most common or preferred choice."]}),"\n"]}),"\n",(0,s.jsxs)(t.li,{children:["\n",(0,s.jsxs)(t.p,{children:[(0,s.jsx)(t.strong,{children:"Indeterminism"}),": If a parent ",(0,s.jsx)(t.code,{children:"CheckBox"})," component has multiple components belonging to it in a way in which some can be checked on and others checked off, use the indeterminate property to show that not all ",(0,s.jsx)(t.code,{children:"CheckBox"})," components are checked or unchecked."]}),"\n"]}),"\n"]})]})}function x(e={}){const{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(m,{...e})}):m(e)}},6031:(e,t,n)=>{var s=n(4836);t.Z=void 0;var o=s(n(4938)),i=n(5893),r=(0,o.default)((0,i.jsx)("path",{d:"m19 1-5 5v11l5-4.5V1zM1 6v14.65c0 .25.25.5.5.5.1 0 .15-.05.25-.05C3.1 20.45 5.05 20 6.5 20c1.95 0 4.05.4 5.5 1.5V6c-1.45-1.1-3.55-1.5-5.5-1.5S2.45 4.9 1 6zm22 13.5V6c-.6-.45-1.25-.75-2-1v13.5c-1.1-.35-2.3-.5-3.5-.5-1.7 0-4.15.65-5.5 1.5v2c1.35-.85 3.8-1.5 5.5-1.5 1.65 0 3.35.3 4.75 1.05.1.05.15.05.25.05.25 0 .5-.25.5-.5v-1.1z"}),"AutoStories");t.Z=r},2610:(e,t,n)=>{var s=n(4836);t.Z=void 0;var o=s(n(4938)),i=n(5893),r=(0,o.default)((0,i.jsx)("path",{d:"M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"}),"DragIndicator");t.Z=r},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:()=>w});var s=n(7294),o=n(6010),i=n(2466),r=n(6550),a=n(469),c=n(1980),l=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,l.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,c._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 x(e){const{defaultValue:t,queryString:n=!1,groupId:o}=e,i=u(e),[r,c]=(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}))),[l,h]=m({queryString:n,groupId:o}),[x,b]=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=l??x;return p({value:e,tabValues:i})?e:null})();(0,a.Z)((()=>{g&&c(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}`);c(e),h(e),b(e)}),[h,b,i]),tabValues:i}}var b=n(2389);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=n(5893);function f(e){let{className:t,block:n,selectedValue:s,selectValue:r,tabValues:a}=e;const c=[],{blockElementScrollPositionUntilNextRender:l}=(0,i.o5)(),d=e=>{const t=e.currentTarget,n=c.indexOf(t),o=a[n].value;o!==s&&(l(t),r(o))},h=e=>{let t=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":{const n=c.indexOf(e.currentTarget)+1;t=c[n]??c[0];break}case"ArrowLeft":{const n=c.indexOf(e.currentTarget)-1;t=c[n]??c[c.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=>c.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 j(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=x(e);return(0,v.jsxs)("div",{className:(0,o.Z)("tabs-container",g.tabList),children:[(0,v.jsx)(f,{...e,...t}),(0,v.jsx)(j,{...e,...t})]})}function w(e){const t=(0,b.Z)();return(0,v.jsx)(A,{...e,children:h(e.children)},String(t))}},6957:(e,t,n)=>{n.d(t,{Z:()=>b});var s=n(7294),o=n(917),i=n(4866),r=n(5162),a=n(4673),c=n(1750);const l="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(2610),p=n(5944);function m(e){let{collapse:t,setCollapse:n}=e;const s=o.iv`
display: flex;
justify-content: end;
- margin-bottom: -30px;
+ align-items: flex-end;
background-color: transparent;
+ margin-bottom: -10px;
`,i=o.iv`
- position: relative;
+ /* position: absolute;
+ right: 0; */
cursor: pointer;
z-index: 10;
height: 35px;
@@ -12,11 +14,12 @@
border: none;
background-color: none;
justify-self: flex-end;
- margin-right: 5px;
background-color: transparent;
+ margin-right: 5px;
+ margin-bottom: -50px !important;
`,r=o.iv`
filter: invert(var(--inversion-percentage));
- `;return(0,p.tZ)("div",{css:s,children:(0,p.tZ)("button",{css:i,onClick:()=>{n(!t)},children:t?(0,p.tZ)("img",{css:r,src:h,className:"icon-tabler-arrow-bar-up"}):(0,p.tZ)("img",{css:r,src:l,className:"icon-tabler-arrow-bar-down"})})})}function x(e){let{url:t}=e;const n=o.iv`
+ `;return(0,p.tZ)("div",{css:s,children:(0,p.tZ)("button",{css:i,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:l,className:"icon-tabler-arrow-bar-down"})})})}function x(e){let{url:t}=e;const n=o.iv`
position: relative;
cursor: pointer;
z-index: 10;
@@ -25,7 +28,6 @@
border: none;
background-color: none;
justify-self: flex-end;
- /* margin-right: 5px; */
margin-top: -5px;
margin-bottom: -20px;
background-color: transparent;
@@ -37,52 +39,95 @@
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:d})})}function b(e){let{path:t,javaC:n,javaE:l,cssURL:h,javaHighlight:d,height:b,frame:g,tabs:v}=e;const[j,A]=(0,s.useState)(""),[w,f]=(0,s.useState)(""),[k,y]=(0,s.useState)(""),[C,B]=(0,s.useState)(!(!n||!l)),[D,Z]=(0,s.useState)(!1),[E,S]=(0,s.useState)({});(0,s.useEffect)((()=>{l&&fetch(l).then((e=>e.text())).then((e=>{f(e);const t=new URL(l).pathname.split("/"),n=t[t.length-1];S((e=>({...e,javaFile:n})))})),n&&fetch(n).then((e=>e.text())).then((e=>{A(e)})),h&&fetch(h).then((e=>e.text())).then((e=>{y(e);const t=new URL(h).pathname.split("/"),n=t[t.length-1];S((e=>({...e,cssFile:n})))}))}),[]);const T=o.iv`
+ `;return(0,p.tZ)("button",{css:n,onClick:()=>{window.open(t,"_blank")},children:(0,p.tZ)("img",{css:s,src:h})})}function b(e){let{path:t,javaC:n,javaE:l,cssURL:d,javaHighlight:h,height:b,frame:g,tabs:v}=e;const[f,j]=(0,s.useState)(""),[A,w]=(0,s.useState)(""),[k,y]=(0,s.useState)(""),[C,B]=(0,s.useState)(!(!n||!l)),[Z,S]=(0,s.useState)(!1),[D,E]=(0,s.useState)({}),[T,L]=(0,s.useState)(!1),[M,N]=(0,s.useState)(0),[z,H]=(0,s.useState)(0),[J,F]=(0,s.useState)(25),[O,V]=(0,s.useState)(25),[X,I]=(0,s.useState)(0),[P,G]=(0,s.useState)(!1),Y=(0,s.useRef)(null),q=(0,s.useRef)(null);(0,s.useEffect)((()=>{l&&fetch(l).then((e=>e.text())).then((e=>{w(e);const t=new URL(l).pathname.split("/"),n=t[t.length-1];E((e=>({...e,javaFile:n})))})),n&&fetch(n).then((e=>e.text())).then((e=>{j(e)})),d&&fetch(d).then((e=>e.text())).then((e=>{y(e);const t=new URL(d).pathname.split("/"),n=t[t.length-1];E((e=>({...e,cssFile:n})))})),I(Y.current.offsetWidth),console.log(X)}),[]);const R=()=>{L(!1),console.log("Stop Resizing")},U=e=>{if(T){const t=e.clientX-M;z+t>X/3&&(Y.current.style.width=`${z+t}px`,q.current.style.right=(J-t<25?25:J-t)+"px",V(J-t<25?25:J-t))}},W=o.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);
- `,L=o.iv`
+ /* padding: ${"hidden"==g?"0 15px 0 15px;":"7px 15px 0 15px;"}; */
+ /* box-shadow: var(--ifm-global-shadow-lw); */
+ background-color: var(--code-display-color-background);
+ `,K=o.iv`
+ width: 100%;
+ /* padding: 1em; */
+ border: 1px solid var(--ifm-toc-border-color);
+ border-right: none;
+ background-color: transparent;
+ display: flex;
+ position: relative;
+ `,Q=o.iv`
min-height: 100px;
height: 100%;
width: 100%;
- height: ${b};
- `,N=o.iv`
- border: none;
+ height: ${b||"100%"};
+ pointer-events: none;
+ `,_=o.iv`
+ display: flex;
+ justify-content: flex-end;
+ opacity: 0;
+ transition: opacity 0.3s ease-in-out;
+ ${Z&&"opacity: 1;"};
+ margin: 10px 0 0 0;
+ position: absolute;
+ right: 25px;
+ `,$=o.iv`
+ display: flex;
+ align-items: center;
+ cursor: ew-resize;
+ border-left: 1px solid var(--ifm-toc-border-color);
+ border-right: 1px solid var(--ifm-toc-border-color);
+ background-color: var(--ifm-background-color);
+ `,ee=o.iv`
box-shadow: none;
- background-color: var(--code-display-color);
- margin-bottom: 0px;
- padding: 10px;
+ background-color: var(--ifm-background-color);
+ margin: 0px;
+ padding: 0px;
+ border: 1px solid var(--ifm-toc-border-color);
+ border-top: none;
+ border-radius: 0px;
+ position: relative;
- .tabs{
- margin-top: 20px;
+ div{
+ /* border: none; */
+ border-color: var(--ifm-toc-border-color);
+ padding: 2px 0px 0px 0px;
+ margin: 0px
}
summary{
display: flex;
width: 100%;
justify-content: center;
- margin: 0;
+ margin: 10px 0;
font-weight: bold;
::before{
left: auto;
margin-left: -100px;
+ --docusaurus-details-decoration-color: var(--ifm-color-primary)
}
}
-
- `,J=o.iv`
- width: 100%;
- `,F=o.iv`
- display: flex;
- justify-content: flex-end;
- opacity: 0;
- transition: opacity 0.3s ease-in-out;
- ${D&&"opacity: 1;"};
+ .margin-top--md{
+ margin-top: 0px !important;
+ }
+ ul{
+ margin: -4px 0px!important;
+ }
+ `,te=o.iv`
+ /* :first-child{
+ margin-left: 1em;
+ } */
+ li[aria-selected="true"]{
+ border-color: var(--ifm-color-primary);
+ }
- `;return(0,p.BX)("div",{css:T,children:["hidden"!=g?(0,p.BX)("div",{onMouseEnter:()=>{Z(!0)},onMouseLeave:()=>Z(!1),css:J,children:[(0,p.tZ)("div",{css:F,children:(0,p.tZ)(x,{url:t})}),(0,p.tZ)("iframe",{loading:"lazy",src:t+"&theme="+("dark"===(0,u.I)().colorMode?"dark":"light"),css:L})]}):null,(0,p.BX)(a.Z,{css:N,summary:(0,p.tZ)("summary",{children:"Show Code"}),children:[n&&l?(0,p.tZ)(m,{collapse:C,setCollapse:B}):null,h?(0,p.BX)(i.Z,{children:[(0,p.tZ)(r.Z,{value:v?v[0]:"Java",label:v?v[0]:E.javaFile,default:!0,children:(0,p.tZ)(c.Z,{className:"codeDemoBlock",language:"java",showLineNumbers:!0,metastring:d,children:C?j:w})}),(0,p.tZ)(r.Z,{value:v?v[1]:"CSS",label:v?v[1]:E.cssFile,children:(0,p.tZ)(c.Z,{className:"codeDemoBlock",language:"css",showLineNumbers:!0,children:k})})]}):(0,p.tZ)(i.Z,{children:(0,p.tZ)(r.Z,{value:v?v[0]:"Java",label:v?v[0]:E.javaFile,default:!0,children:(0,p.tZ)(c.Z,{className:"codeDemoBlock",language:"java",showLineNumbers:!0,metastring:d,children:C?j:w})})})]})]})}},3273:(e,t,n)=>{n.d(t,{Z:()=>l});var s=n(7294),o=n(917),i=n(8230),r=n(4387),a=n(6770);var c=n(5944);function l(e){let{type:t,location:n,top:l,children:h,code:d,suffix:u}=e;const[p,m]=(0,s.useState)("");(0,s.useEffect)((()=>{u||(u=""),m("https://javadoc.io/doc/org.dwcj/dwcj-"+t+"/latest/"+n+".html"+u)}),[]);const x=o.iv`
+ .tabs__item{
+ padding: 5px 20px -2px 20px;
+ border-radius: 0px;
+ }
+ `,ne=o.iv`
+ border-radius: 0px;
+ box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset;
+ `;return(0,p.BX)("div",{css:W,onMouseUp:R,onMouseLeave:R,onMouseMove:U,children:["hidden"!=g?(0,p.BX)("div",{onMouseEnter:()=>{S(!0)},onMouseLeave:()=>S(!1),css:K,children:[(0,p.tZ)("iframe",{onMouseUp:R,loading:"lazy",src:t,css:{...Q,pointerEvents:T?"none":"auto"},ref:Y,onMouseMove:U}),(0,p.tZ)("div",{css:_,ref:q,children:(0,p.tZ)(x,{url:t})}),(0,p.tZ)("div",{css:$,onMouseDown:e=>{e.preventDefault(),L(!0),N(e.clientX),H(Y.current.offsetWidth),F(O),console.log(q.current.right),console.log("Start Resizing")},children:(0,p.tZ)(u.Z,{})})]}):null,(0,p.BX)(a.Z,{css:ee,summary:(0,p.tZ)("summary",{onClick:()=>G(!P),children:P?"Hide Code":"Show Code"}),children:[n&&l?(0,p.tZ)(m,{collapse:C,setCollapse:B}):null,d?(0,p.BX)(i.Z,{css:te,children:[(0,p.tZ)(r.Z,{value:v?v[0]:"Java",label:v?v[0]:D.javaFile,default:!0,children:(0,p.tZ)(c.Z,{css:ne,className:"codeDemoBlock",language:"java",showLineNumbers:!0,metastring:h,children:C?f:A})}),(0,p.tZ)(r.Z,{value:v?v[1]:"CSS",label:v?v[1]:D.cssFile,children:(0,p.tZ)(c.Z,{css:ne,className:"codeDemoBlock",language:"css",showLineNumbers:!0,children:k})})]}):(0,p.tZ)(i.Z,{css:te,children:(0,p.tZ)(r.Z,{value:v?v[0]:"Java",label:v?v[0]:D.javaFile,default:!0,children:(0,p.tZ)(c.Z,{css:ne,className:"codeDemoBlock",language:"java",showLineNumbers:!0,metastring:h,children:C?f:A})})})]})]})}},3273:(e,t,n)=>{n.d(t,{Z:()=>l});var s=n(7294),o=n(917),i=n(8230),r=n(4387),a=n(6031);var c=n(5944);function l(e){let{type:t,location:n,top:l,children:d,code:h,suffix:u}=e;const[p,m]=(0,s.useState)("");(0,s.useEffect)((()=>{u||(u=""),m("https://javadoc.io/doc/org.dwcj/dwcj-"+t+"/latest/"+n+".html"+u)}),[]);const x=o.iv`
display: inline;
${l&&o.iv`
@@ -94,7 +139,8 @@
`}
`,b=o.iv`
background-color: #0063CC;
+ padding: 0 0 0 5px;
:hover{
color: white;
}
- `;return(0,c.BX)(c.HY,{children:["true"===l&&(0,c.tZ)("div",{css:x,children:(0,c.tZ)(i.Z,{title:"JavaDoc",arrow:!0,children:(0,c.tZ)(r.Z,{css:b,label:"Java API",component:"a",href:p,icon:(0,c.tZ)(a.Z,{}),clickable:!0,color:"primary",target:"_blank"})})}),"true"!==l&&!d&&(0,c.tZ)("div",{css:x,children:(0,c.tZ)("a",{href:p,target:"_blank",children:h})}),"true"!==l&&d&&(0,c.tZ)("div",{css:x,children:(0,c.tZ)("code",{children:(0,c.tZ)("a",{href:p,target:"_blank",children:h})})})]})}},1415:(e,t,n)=>{n.d(t,{Z:()=>i});n(7294);var s=n(8397),o=n(5893);function i(e){return(0,o.jsx)(o.Fragment,{children:(0,o.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
+ `;return(0,c.BX)(c.HY,{children:["true"===l&&(0,c.tZ)("div",{css:x,children:(0,c.tZ)(i.Z,{title:"JavaDoc",arrow:!0,children:(0,c.tZ)(r.Z,{css:b,label:"Java API",component:"a",href:p,icon:(0,c.tZ)(a.Z,{}),clickable:!0,color:"primary",target:"_blank"})})}),"true"!==l&&!h&&(0,c.tZ)("div",{css:x,children:(0,c.tZ)("a",{href:p,target:"_blank",children:d})}),"true"!==l&&h&&(0,c.tZ)("div",{css:x,children:(0,c.tZ)("code",{children:(0,c.tZ)("a",{href:p,target:"_blank",children:d})})})]})}},1415:(e,t,n)=>{n.d(t,{Z:()=>i});n(7294);var s=n(8397),o=n(5893);function i(e){return(0,o.jsx)(o.Fragment,{children:(0,o.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/899bab7c.8c90bf36.js b/assets/js/899bab7c.8c90bf36.js
new file mode 100644
index 000000000..a9e677fa6
--- /dev/null
+++ b/assets/js/899bab7c.8c90bf36.js
@@ -0,0 +1,146 @@
+"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:()=>p});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={},p=[{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:"Styling",id:"styling",level:2},{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 m(e){const t={a:"a",admonition:"admonition",blockquote:"blockquote",code:"code",em:"em",h2:"h2",h3:"h3",li:"li",ol:"ol",p:"p",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)(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",(0,o.jsxs)(t.blockquote,{children:["\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsx)(t.li,{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",(0,o.jsx)(t.li,{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",(0,o.jsx)(t.li,{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"]}),"\n",(0,o.jsxs)(t.li,{children:["\n",(0,o.jsxs)(t.p,{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",(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"]}),"\n"]}),"\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)(a.Z,{type:"engine",location:"org/dwcj/component/list/ComboBox",code:"true",suffix:"#()",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)(a.Z,{type:"engine",location:"org/dwcj/component/list/ComboBox",code:"true",suffix:"#(java.lang.String)",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)(a.Z,{type:"engine",location:"org/dwcj/component/list/ComboBox",code:"true",suffix:"#(java.lang.String,org.dwcj.component.event.ComponentEventListener)",children:"ComboBox(String label, ComponentEventListener< ListSelectEvent> 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)(a.Z,{type:"engine",location:"org/dwcj/component/list/ComboBox",code:"true",suffix:"#setAllowCustomValue(boolean)",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",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)(a.Z,{type:"engine",location:"org/dwcj/component/list/ComboBox",code:"true",suffix:"#setPlaceholder(java.lang.String)",children:"setPlaceholder()"})," method."]}),"\n",(0,o.jsx)(i.Z,{path:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.textcomboboxdemos.ComboBoxPlaceholder",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/textcomboboxdemos/ComboBoxPlaceholder.java",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)(a.Z,{type:"engine",location:"org/dwcj/component/list/DwcSelectDropdown",code:"true",suffix:"#setDropdownType(java.lang.String)",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:"250px"}),"\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)(a.Z,{type:"engine",location:"org/dwcj/component/list/DwcSelectDropdown",code:"true",suffix:"#setMaxRowCount(int)",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/textcomboboxdemos/ComboBoxMaxRowDemo.java",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)(a.Z,{type:"engine",location:"org/dwcj/component/list/DwcSelectDropdown",code:"true",suffix:"#setOpenHeight(int)",children:"setOpenHeight()"})," and ",(0,o.jsx)(a.Z,{type:"engine",location:"org/dwcj/component/list/DwcSelectDropdown",code:"true",suffix:"#setOpenWidth(int)",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.h2,{id:"styling",children:"Styling"}),"\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)(m,{...e})}):m(e)}},6031:(e,t,n)=>{var o=n(4836);t.Z=void 0;var s=o(n(4938)),i=n(5893),r=(0,s.default)((0,i.jsx)("path",{d:"m19 1-5 5v11l5-4.5V1zM1 6v14.65c0 .25.25.5.5.5.1 0 .15-.05.25-.05C3.1 20.45 5.05 20 6.5 20c1.95 0 4.05.4 5.5 1.5V6c-1.45-1.1-3.55-1.5-5.5-1.5S2.45 4.9 1 6zm22 13.5V6c-.6-.45-1.25-.75-2-1v13.5c-1.1-.35-2.3-.5-3.5-.5-1.7 0-4.15.65-5.5 1.5v2c1.35-.85 3.8-1.5 5.5-1.5 1.65 0 3.35.3 4.75 1.05.1.05.15.05.25.05.25 0 .5-.25.5-.5v-1.1z"}),"AutoStories");t.Z=r},2610:(e,t,n)=>{var o=n(4836);t.Z=void 0;var s=o(n(4938)),i=n(5893),r=(0,s.default)((0,i.jsx)("path",{d:"M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"}),"DragIndicator");t.Z=r},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:()=>j});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 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 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(!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 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]=m({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 p({value:e,tabValues:i})?e:null})();(0,a.Z)((()=>{g&&l(g)}),[g]);return{selectedValue:r,selectValue:(0,o.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 f(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 w(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 A(e){const t=b(e);return(0,v.jsxs)("div",{className:(0,s.Z)("tabs-container",g.tabList),children:[(0,v.jsx)(f,{...e,...t}),(0,v.jsx)(w,{...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 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,iVBORw0KGgoAAAANSUhEUgAAAPAAAADwCAYAAAA+VemSAAAABmJLR0QA/wD/AP+gvaeTAAALyElEQVR4nO3dXahmVR3H8e+M0/FlRouiGV9GxLSkiy7MkW7MDJOCCJ1zkia66KaLLByKEqUizW6EwJjKi24yDfL9pYSEEDSlIMS3JkJrlBzURiUcdXyZF8cu9hnmpOfMec551tr//9rP9wMLQWU9/73W/p398qy9H5AkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSW1bEV1ABauBs4AzgNNm2zrgvcAa4D1xpakHe4DXgJeAF4HHgSeAh4A/z/63wRhKgNcBXwamgU8AU7HlKKk9wF+B24EbgOdjy9E5wF3AXuBtm20JbS/we+Bs1Ltz6U6HoncC2zDaA8CnUXXHAdcTP+G2Yba7gBNRFZuAncRPsm3YbSdwISrmCOCXxE+sbbLaNcDhaCxrgD8SP5m2yWz30n39mFbmr5HWAXcDp0cXoon2CPA54IXoQuaTNcDHAPdheJXDVrqvm3ZGF/JOK6MLmMcRdHcDDa+y+BhwGwmviQ+LLmAe19CtqJIyORl4P/CH6ELmyhbgC4GroouQFnAm8E/g79GFHJDpGvh44B8kv+unibcT+CiwI7oQyHUNfDWGV/m9D/hJdBEHZDkCnwvcE12ENKK36dZO/ym6kCwBfoDuGV6pFfcDn4ouIsMp9DkYXrXnbOCT0UVkCPB3oguQlumS6AKiT6HXAs8Cq4LrkJZjH7CeCX6zx7epuxj9TbrnhzcCJ+H7sCbBKrq5ngZ+Q7cP1NzHNvezWTndT72B/S3dd8uabCcAN1L3iaWJtBrYTfkB3Qd8vcftUBu+Qbdv1DjLO7LH7Ujjs9T5i3hRnxuhpnyTOvvceX1uRBbfo85ps3QoN1F+v7us1y1I4jrKDuIbeM2rxa2n/I2ta3vdgjkivwc+rXB/twDPFe5Tw/MMcGvhPkvvyyOLDPCxhfu7o3B/Gq47C/dXel8eWWSAjy7c30OF+9Nwld5XSu/LI4tcibWbsr9hNEX3cxnSYqbo9r9SdtO9Cqp3kQF+u3B/0ctC1ZZB7H8ZHmaQtEwGWGqYAZYaZoClhhlgqWEGWGqYAZYaZoClhhlgqWEGeFimgE10r5DZRre0tMYD7KXbHuBp4Gd0P+quBpTeCSbdDLCd+DCO2/bRz0+XuP+NyQEsYyWwhfjglW6PUvd1w+5/Y3IAyxhieOeGuBb3vzE5gOObIT5ktVut0+lB7H8+TtiuKeBxul+OH7J9wAeAVwr3O4j9z7vQ7Zpm+OGF7jr4yugisjLA7doYXUCPpqMLyMoAt+vM6AJ6dFx0AVl5DdyuNwh6D1OQ0vM7iP3PI3C7JvXOu+YwwO3aEV2A4hngdj0YXYDiGeB2+UsU8iZWwyZlIccB3sSah0fgdu0BLokuQrEMcNtuo3uGVurdIBaTJzDUxwlrz2/2+tJzAMsaygP9BngJvIk1LFN064YvADYAJ1H3ofg+eRMrmUH8BRywlcCviT/yegROygHMK1t4DXBCDmBOGcNrgBNyAPPJGl4DnJADmEvm8BrghBzAPLKH1wAn5ADm0EJ4DXBCDmC8VsJrgBNyAGO1FF4DnJADGKe18BrghBzAGC2G1wAn5AD2r9XwGuCEHMB+tRxeA5yQA9if1sNrgBNyAPsREd4bKvRZWvb60nMA64sK72EV+i0te33pOYB1RYaXCn2Xlr2+9BzAeqLDS4X+S8teX3oOYB0ZwkuFzygte33pOYDlZQkvFT6ntOz1pecAlpUpvFT4rNKy15eeA1hOtvBS4fNKy15feg5gGRnDS4XPLC17fek5gOPLGl4qfG5p2etLzwEcT+bwUuGzS8teX3oO4PJlDy8VPr+07PWl5wAuTwvhpUINpWWvLz0HcOlaCS8V6igte33pOYBL01J4qVBLadnrS88BHF1r4aVCPaVlry+91yk3eK/1XHufWgwv5J9fAzympyg3eE/1XHtfWg0v5J/fQQR4ZdQHAw8m7SuLlcC1wFd7/Mzrga8AbxXoy/kduE2U++v3pZ5r78MW+j3yXkfZP+jZ53cQR+BIU5Q5zfo3cHi/pVc3Q9vhhfzza4ALKLGjzvRedV2ldvxRW6lr3vlknl8DXMg4p4pbAuqtreSpZ2R4D8g6vwa4kJUsb5K3EHsTrpab6Ce8NU6b55N1fg1wYTPAdhYfqO0M77R5rj5On/sK71zZ5tcAVzBFdwp5I7AN2Dvbts3+u02z/8+QvUHd8PZx2ryQTPNrgFVFyRVMmcKbjQFWFbVOoSNOmzMzwKqixk0sw/tuBlhVlP4aydPm+RlgVVFyIYfhXZgBVjUlVjB52nxoBlhVjbOCyfAuzgCrqqwrmIbCAKsX2VYwDYUBVm8yrWAaikEEeEXUB0vBSocuJEteK0kNM8BSwwyw1DADLDXMAEsNM8BSwwyw1DADLDXMAEsNWxVdwBynABcAHwfWA+tm/7k6qJ7XgGeA52f/+TBwJ/BkUD1SOuuAHwNbKb82tVbbClw5W7vaNYi10FFWA5cCLxMfyOW2XcBVwDGFx0b9MMDLNAPsID6ApdoOYGPREVIfDPASraA76r5FfOhKt/10R2NvCrbDAC/BUcAtxAetdrsJOLLQmKkuAzyiFXQPnUeHq692Gz5n3QIDPKIriA9V3+2HJQZOVRngEczQXR9GB6rvth9vbGU3iADXPNVbA/wLOLbiZ2T2AnAq8Gp0IZpX6dAN7pU632VywwuwFvhWdBEatlp/NdbSvTHx6Er9t2IX8GG674qVi0fgQ7gYwwvdZcRF0UVouGoF2Bs4B10QXYCGq8Zh/1S6m1c66CM4Jtl4Cr2A8yv02bovRBegYaoR4A0V+mzd6dEFaJhqBPj4Cn22zjFRFTUCfFyFPlt3QnQBGqYaAZ7kxRsL8QisKmrcORvE3T2Gsx2a3yDm1wfQpYYZYKlhBlhqmAGWGmaApYYZYKlhBlhqmAGWGmaApYYZYE2iqcL97S7c38gMsCZR6YdLwt48aoA1iUo/s26ApR6Vfk9Z2FtHDbAmzYl0vxhS0hOF+xuZAdakuRo4vHCfYQGuYRC/OTNCXa1shw7aTJ3fwvpMnxtR21B2/KFshzqbqfPj8m8ysN+EHsqOP5TtmHQnUvfH5e/tb1PebVXkh0sVTNF9z7uB7m7zDOWveee6vWLfi/KdWAtrcTumgGm6HXcDcBL+ka5pL90fixejCnByh2MG+CndKaP6cTeB4a1lKNeOrWzHSmBLhXpti7ezRpif5rSy4y+mle0wvDHtvhHmpkmt7PiLaWE7ZirUaVu87QfOHmF+mtTCjj+K7NsxBTxVoU7b4u36EeanFy6lbNc0cHJ0ERPoJeCS6CIOMMDt2hhdwIT6GvB8dBEHGOB2nRldwAT6BcELN97JhRwLy74drzOwNbjJ3QN8HtgTXchcNRZy7ALWFOwv8kZWKa9EF6Cx/A34IsnCC3VOoZ+r0GfraoxJ2FsgJszDwHnAy9GFzKdGgP9Toc/W1QjwgxX61P+7BzgHeCG4jgV5BO5HjTG5o0KfOujndNe8YS+sG0WNAD9Uoc/W1RiTO4CnK/Q76V6iW+G2mYTXvH04hfiVMtlarQUXLqUs1/bTrbBat6QZGKitxE9IlvbomGO5GB9mGL/dx4DXNi/HlcRPSpZ2xXhDuSgfJ1xe2wP8joE+EjiuD9Lddo+epOj2Kv2dks0A23vYppbbm3TvsLqYbh/VIVxO/IRFtx+MPYpLMwVsAm4EttG98iV6DPpuu4H/Ak8CfwF+BVxG9+pXV64twWq6r0+iJzSqPTc7BlKzpunu7kWHqe/2FnB+gfGTwl1OfKD6bt8vMnJSAiuAG4gPVV/tVuKeoJKqOBK4mfhw1W43440SDdQK4FLq/D5NdNsPXIUvSNAE2Miw7k4/S/kfjJZSO4ruaLyT+AAut+2iO+oeXXhspGasBX4EPEZ8IEdtj83WvLbCeEhLkulu6Yfovjs9A1hPtwRxPWVfz7MUu4Bn6F5Q8CzwCHAn3buYJUmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEnA/wDL76bzm26ebQAAAABJRU5ErkJggg==";var u=n(2610),p=n(5944);function m(e){let{collapse:t,setCollapse:n}=e;const o=s.iv`
+ display: flex;
+ justify-content: end;
+ align-items: flex-end;
+ background-color: transparent;
+ margin-bottom: -10px;
+ `,i=s.iv`
+ /* position: absolute;
+ right: 0; */
+ cursor: pointer;
+ z-index: 10;
+ height: 35px;
+ width: 35px;
+ border: none;
+ background-color: none;
+ justify-self: flex-end;
+ background-color: transparent;
+ margin-right: 5px;
+ margin-bottom: -50px !important;
+ `,r=s.iv`
+ filter: invert(var(--inversion-percentage));
+ `;return(0,p.tZ)("div",{css:o,children:(0,p.tZ)("button",{css:i,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=s.iv`
+ position: relative;
+ cursor: pointer;
+ z-index: 10;
+ height: 35px;
+ width: 35px;
+ border: none;
+ background-color: none;
+ justify-self: flex-end;
+ margin-top: -5px;
+ margin-bottom: -20px;
+ background-color: transparent;
+
+
+ `,o=s.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:o,src:h})})}function x(e){let{path:t,javaC:n,javaE:c,cssURL:d,javaHighlight:h,height:x,frame:g,tabs:v}=e;const[f,w]=(0,o.useState)(""),[A,j]=(0,o.useState)(""),[y,C]=(0,o.useState)(""),[B,D]=(0,o.useState)(!(!n||!c)),[k,Z]=(0,o.useState)(!1),[S,E]=(0,o.useState)({}),[L,T]=(0,o.useState)(!1),[M,O]=(0,o.useState)(0),[V,z]=(0,o.useState)(0),[N,H]=(0,o.useState)(25),[F,J]=(0,o.useState)(25),[X,P]=(0,o.useState)(0),[I,G]=(0,o.useState)(!1),Y=(0,o.useRef)(null),U=(0,o.useRef)(null);(0,o.useEffect)((()=>{c&&fetch(c).then((e=>e.text())).then((e=>{j(e);const t=new URL(c).pathname.split("/"),n=t[t.length-1];E((e=>({...e,javaFile:n})))})),n&&fetch(n).then((e=>e.text())).then((e=>{w(e)})),d&&fetch(d).then((e=>e.text())).then((e=>{C(e);const t=new URL(d).pathname.split("/"),n=t[t.length-1];E((e=>({...e,cssFile:n})))})),P(Y.current.offsetWidth),console.log(X)}),[]);const R=()=>{T(!1),console.log("Stop Resizing")},q=e=>{if(L){const t=e.clientX-M;V+t>X/3&&(Y.current.style.width=`${V+t}px`,U.current.style.right=(N-t<25?25:N-t)+"px",J(N-t<25?25:N-t))}},W=s.iv`
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ margin-bottom: 16px;
+ /* padding: ${"hidden"==g?"0 15px 0 15px;":"7px 15px 0 15px;"}; */
+ /* box-shadow: var(--ifm-global-shadow-lw); */
+ background-color: var(--code-display-color-background);
+ `,K=s.iv`
+ width: 100%;
+ /* padding: 1em; */
+ border: 1px solid var(--ifm-toc-border-color);
+ border-right: none;
+ background-color: transparent;
+ display: flex;
+ position: relative;
+ `,Q=s.iv`
+ min-height: 100px;
+ height: 100%;
+ width: 100%;
+ height: ${x||"100%"};
+ pointer-events: none;
+ `,_=s.iv`
+ display: flex;
+ justify-content: flex-end;
+ opacity: 0;
+ transition: opacity 0.3s ease-in-out;
+ ${k&&"opacity: 1;"};
+ margin: 10px 0 0 0;
+ position: absolute;
+ right: 25px;
+ `,$=s.iv`
+ display: flex;
+ align-items: center;
+ cursor: ew-resize;
+ border-left: 1px solid var(--ifm-toc-border-color);
+ border-right: 1px solid var(--ifm-toc-border-color);
+ background-color: var(--ifm-background-color);
+ `,ee=s.iv`
+ box-shadow: none;
+ background-color: var(--ifm-background-color);
+ margin: 0px;
+ padding: 0px;
+ border: 1px solid var(--ifm-toc-border-color);
+ border-top: none;
+ border-radius: 0px;
+ position: relative;
+
+ div{
+ /* border: none; */
+ border-color: var(--ifm-toc-border-color);
+ padding: 2px 0px 0px 0px;
+ margin: 0px
+ }
+
+ summary{
+ display: flex;
+ width: 100%;
+ justify-content: center;
+ margin: 10px 0;
+ font-weight: bold;
+ ::before{
+ left: auto;
+ margin-left: -100px;
+ --docusaurus-details-decoration-color: var(--ifm-color-primary)
+ }
+ }
+ .margin-top--md{
+ margin-top: 0px !important;
+ }
+ ul{
+ margin: -4px 0px!important;
+ }
+ `,te=s.iv`
+ /* :first-child{
+ margin-left: 1em;
+ } */
+ li[aria-selected="true"]{
+ border-color: var(--ifm-color-primary);
+ }
+
+ .tabs__item{
+ padding: 5px 20px -2px 20px;
+ border-radius: 0px;
+ }
+ `,ne=s.iv`
+ border-radius: 0px;
+ box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset;
+ `;return(0,p.BX)("div",{css:W,onMouseUp:R,onMouseLeave:R,onMouseMove:q,children:["hidden"!=g?(0,p.BX)("div",{onMouseEnter:()=>{Z(!0)},onMouseLeave:()=>Z(!1),css:K,children:[(0,p.tZ)("iframe",{onMouseUp:R,loading:"lazy",src:t,css:{...Q,pointerEvents:L?"none":"auto"},ref:Y,onMouseMove:q}),(0,p.tZ)("div",{css:_,ref:U,children:(0,p.tZ)(b,{url:t})}),(0,p.tZ)("div",{css:$,onMouseDown:e=>{e.preventDefault(),T(!0),O(e.clientX),z(Y.current.offsetWidth),H(F),console.log(U.current.right),console.log("Start Resizing")},children:(0,p.tZ)(u.Z,{})})]}):null,(0,p.BX)(a.Z,{css:ee,summary:(0,p.tZ)("summary",{onClick:()=>G(!I),children:I?"Hide Code":"Show Code"}),children:[n&&c?(0,p.tZ)(m,{collapse:B,setCollapse:D}):null,d?(0,p.BX)(i.Z,{css:te,children:[(0,p.tZ)(r.Z,{value:v?v[0]:"Java",label:v?v[0]:S.javaFile,default:!0,children:(0,p.tZ)(l.Z,{css:ne,className:"codeDemoBlock",language:"java",showLineNumbers:!0,metastring:h,children:B?f:A})}),(0,p.tZ)(r.Z,{value:v?v[1]:"CSS",label:v?v[1]:S.cssFile,children:(0,p.tZ)(l.Z,{css:ne,className:"codeDemoBlock",language:"css",showLineNumbers:!0,children:y})})]}):(0,p.tZ)(i.Z,{css:te,children:(0,p.tZ)(r.Z,{value:v?v[0]:"Java",label:v?v[0]:S.javaFile,default:!0,children:(0,p.tZ)(l.Z,{css:ne,className:"codeDemoBlock",language:"java",showLineNumbers:!0,metastring:h,children:B?f:A})})})]})]})}},3273:(e,t,n)=>{n.d(t,{Z:()=>c});var o=n(7294),s=n(917),i=n(8230),r=n(4387),a=n(6031);var l=n(5944);function c(e){let{type:t,location:n,top:c,children:d,code:h,suffix:u}=e;const[p,m]=(0,o.useState)("");(0,o.useEffect)((()=>{u||(u=""),m("https://javadoc.io/doc/org.dwcj/dwcj-"+t+"/latest/"+n+".html"+u)}),[]);const b=s.iv`
+ display: inline;
+
+ ${c&&s.iv`
+ width: 100%;
+ display: flex;
+ justify-content: flex-end;
+ margin-top: -33px;
+ margin-bottom: 25px;
+ `}
+ `,x=s.iv`
+ background-color: #0063CC;
+ padding: 0 0 0 5px;
+ :hover{
+ color: white;
+ }
+ `;return(0,l.BX)(l.HY,{children:["true"===c&&(0,l.tZ)("div",{css:b,children:(0,l.tZ)(i.Z,{title:"JavaDoc",arrow:!0,children:(0,l.tZ)(r.Z,{css:x,label:"Java API",component:"a",href:p,icon:(0,l.tZ)(a.Z,{}),clickable:!0,color:"primary",target:"_blank"})})}),"true"!==c&&!h&&(0,l.tZ)("div",{css:b,children:(0,l.tZ)("a",{href:p,target:"_blank",children:d})}),"true"!==c&&h&&(0,l.tZ)("div",{css:b,children:(0,l.tZ)("code",{children:(0,l.tZ)("a",{href:p,target:"_blank",children:d})})})]})}},1415:(e,t,n)=>{n.d(t,{Z:()=>i});n(7294);var o=n(8397),s=n(5893);function i(e){return(0,s.jsx)(s.Fragment,{children:(0,s.jsx)(o.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/899bab7c.c2cbfbba.js b/assets/js/899bab7c.c2cbfbba.js
deleted file mode 100644
index 47ad037f1..000000000
--- a/assets/js/899bab7c.c2cbfbba.js
+++ /dev/null
@@ -1,100 +0,0 @@
-"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:"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",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)(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",(0,o.jsxs)(t.blockquote,{children:["\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsx)(t.li,{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",(0,o.jsx)(t.li,{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",(0,o.jsx)(t.li,{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"]}),"\n",(0,o.jsxs)(t.li,{children:["\n",(0,o.jsxs)(t.p,{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",(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"]}),"\n"]}),"\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)(a.Z,{type:"engine",location:"org/dwcj/component/list/ComboBox",code:"true",suffix:"#()",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)(a.Z,{type:"engine",location:"org/dwcj/component/list/ComboBox",code:"true",suffix:"#(java.lang.String)",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)(a.Z,{type:"engine",location:"org/dwcj/component/list/ComboBox",code:"true",suffix:"#(java.lang.String,org.dwcj.component.event.ComponentEventListener)",children:"ComboBox(String label, ComponentEventListener< ListSelectEvent> 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)(a.Z,{type:"engine",location:"org/dwcj/component/list/ComboBox",code:"true",suffix:"#setAllowCustomValue(boolean)",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)(a.Z,{type:"engine",location:"org/dwcj/component/list/ComboBox",code:"true",suffix:"#setPlaceholder(java.lang.String)",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)(a.Z,{type:"engine",location:"org/dwcj/component/list/DwcSelectDropdown",code:"true",suffix:"#setDropdownType(java.lang.String)",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)(a.Z,{type:"engine",location:"org/dwcj/component/list/DwcSelectDropdown",code:"true",suffix:"#setMaxRowCount(int)",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)(a.Z,{type:"engine",location:"org/dwcj/component/list/DwcSelectDropdown",code:"true",suffix:"#setOpenHeight(int)",children:"setOpenHeight()"})," and ",(0,o.jsx)(a.Z,{type:"engine",location:"org/dwcj/component/list/DwcSelectDropdown",code:"true",suffix:"#setOpenWidth(int)",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.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:()=>j});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 w=n(5893);function v(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,w.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,w.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 f(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,w.jsx)("div",{className:"margin-top--md",children:i.map(((e,t)=>(0,o.cloneElement)(e,{key:t,hidden:e.props.value!==s})))})}function A(e){const t=b(e);return(0,w.jsxs)("div",{className:(0,s.Z)("tabs-container",g.tabList),children:[(0,w.jsx)(v,{...e,...t}),(0,w.jsx)(f,{...e,...t})]})}function j(e){const t=(0,x.Z)();return(0,w.jsx)(A,{...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;
- background-color: transparent;
- `,i=s.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=s.iv`
- filter: invert(var(--inversion-percentage));
- `;return(0,m.tZ)("div",{css:o,children:(0,m.tZ)("button",{css:i,onClick:()=>{n(!t)},children:t?(0,m.tZ)("img",{css:r,src:d,className:"icon-tabler-arrow-bar-up"}):(0,m.tZ)("img",{css:r,src:c,className:"icon-tabler-arrow-bar-down"})})})}function b(e){let{url:t}=e;const n=s.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;
-
-
- `,o=s.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,m.tZ)("button",{css:n,onClick:()=>{window.open(t,"_blank")},children:(0,m.tZ)("img",{css:o,src:h})})}function x(e){let{path:t,javaC:n,javaE:c,cssURL:d,javaHighlight:h,height:x,frame:g,tabs:w}=e;const[v,f]=(0,o.useState)(""),[A,j]=(0,o.useState)(""),[y,C]=(0,o.useState)(""),[B,D]=(0,o.useState)(!(!n||!c)),[k,S]=(0,o.useState)(!1),[Z,E]=(0,o.useState)({});(0,o.useEffect)((()=>{c&&fetch(c).then((e=>e.text())).then((e=>{j(e);const t=new URL(c).pathname.split("/"),n=t[t.length-1];E((e=>({...e,javaFile:n})))})),n&&fetch(n).then((e=>e.text())).then((e=>{f(e)})),d&&fetch(d).then((e=>e.text())).then((e=>{C(e);const t=new URL(d).pathname.split("/"),n=t[t.length-1];E((e=>({...e,cssFile:n})))}))}),[]);const L=s.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=s.iv`
- min-height: 100px;
- height: 100%;
- width: 100%;
- height: ${x};
- `,O=s.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;
- }
- }
-
- `,V=s.iv`
- width: 100%;
- `,M=s.iv`
- display: flex;
- justify-content: flex-end;
- opacity: 0;
- transition: opacity 0.3s ease-in-out;
- ${k&&"opacity: 1;"};
-
- `;return(0,m.BX)("div",{css:L,children:["hidden"!=g?(0,m.BX)("div",{onMouseEnter:()=>{S(!0)},onMouseLeave:()=>S(!1),css:V,children:[(0,m.tZ)("div",{css:M,children:(0,m.tZ)(b,{url:t})}),(0,m.tZ)("iframe",{loading:"lazy",src:t+"&theme="+("dark"===(0,u.I)().colorMode?"dark":"light"),css:T})]}):null,(0,m.BX)(a.Z,{css:O,summary:(0,m.tZ)("summary",{children:"Show Code"}),children:[n&&c?(0,m.tZ)(p,{collapse:B,setCollapse:D}):null,d?(0,m.BX)(i.Z,{children:[(0,m.tZ)(r.Z,{value:w?w[0]:"Java",label:w?w[0]:Z.javaFile,default:!0,children:(0,m.tZ)(l.Z,{className:"codeDemoBlock",language:"java",showLineNumbers:!0,metastring:h,children:B?v:A})}),(0,m.tZ)(r.Z,{value:w?w[1]:"CSS",label:w?w[1]:Z.cssFile,children:(0,m.tZ)(l.Z,{className:"codeDemoBlock",language:"css",showLineNumbers:!0,children:y})})]}):(0,m.tZ)(i.Z,{children:(0,m.tZ)(r.Z,{value:w?w[0]:"Java",label:w?w[0]:Z.javaFile,default:!0,children:(0,m.tZ)(l.Z,{className:"codeDemoBlock",language:"java",showLineNumbers:!0,metastring:h,children:B?v:A})})})]})]})}},3273:(e,t,n)=>{n.d(t,{Z:()=>c});var o=n(7294),s=n(917),i=n(8230),r=n(4387),a=n(6770);var l=n(5944);function c(e){let{type:t,location:n,top:c,children:d,code:h,suffix:u}=e;const[m,p]=(0,o.useState)("");(0,o.useEffect)((()=>{u||(u=""),p("https://javadoc.io/doc/org.dwcj/dwcj-"+t+"/latest/"+n+".html"+u)}),[]);const b=s.iv`
- display: inline;
-
- ${c&&s.iv`
- width: 100%;
- display: flex;
- justify-content: flex-end;
- margin-top: -33px;
- margin-bottom: 25px;
- `}
- `,x=s.iv`
- background-color: #0063CC;
- :hover{
- color: white;
- }
- `;return(0,l.BX)(l.HY,{children:["true"===c&&(0,l.tZ)("div",{css:b,children:(0,l.tZ)(i.Z,{title:"JavaDoc",arrow:!0,children:(0,l.tZ)(r.Z,{css:x,label:"Java API",component:"a",href:m,icon:(0,l.tZ)(a.Z,{}),clickable:!0,color:"primary",target:"_blank"})})}),"true"!==c&&!h&&(0,l.tZ)("div",{css:b,children:(0,l.tZ)("a",{href:m,target:"_blank",children:d})}),"true"!==c&&h&&(0,l.tZ)("div",{css:b,children:(0,l.tZ)("code",{children:(0,l.tZ)("a",{href:m,target:"_blank",children:d})})})]})}},1415:(e,t,n)=>{n.d(t,{Z:()=>i});n(7294);var o=n(8397),s=n(5893);function i(e){return(0,s.jsx)(s.Fragment,{children:(0,s.jsx)(o.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/9df0fb54.d1b1f4ae.js b/assets/js/9df0fb54.d1b1f4ae.js
new file mode 100644
index 000000000..e32dc6638
--- /dev/null
+++ b/assets/js/9df0fb54.d1b1f4ae.js
@@ -0,0 +1,146 @@
+"use strict";(self.webpackChunkdwcj_documentation=self.webpackChunkdwcj_documentation||[]).push([[1368],{3284:(e,t,a)=>{a.r(t),a.d(t,{assets:()=>u,contentTitle:()=>c,default:()=>m,frontMatter:()=>l,metadata:()=>d,toc:()=>p});var r=a(5893),n=a(1151),s=a(6957),o=a(7796),i=a(3273);const l={sidebar_position:140,title:"TextArea",pagination_next:"styling/styling_intro"},c=void 0,d={id:"components/text-area",title:"TextArea",description:"Labeling",source:"@site/docs/components/text-area.md",sourceDirName:"components",slug:"/components/text-area",permalink:"/docs/components/text-area",draft:!1,unlisted:!1,editUrl:"https://github.com/DwcJava/dwcjava.github.io/tree/website/docs/components/text-area.md",tags:[],version:"current",sidebarPosition:140,frontMatter:{sidebar_position:140,title:"TextArea",pagination_next:"styling/styling_intro"},sidebar:"documentationSidebar",previous:{title:"Slider",permalink:"/docs/components/slider"},next:{title:"Styling",permalink:"/docs/styling/styling_intro"}},u={},p=[{value:"Labeling",id:"labeling",level:3},{value:"Placeholder",id:"placeholder",level:3},{value:"Spellcheck",id:"spellcheck",level:3},{value:"Expanses",id:"expanses",level:3},{value:"Parts and CSS Properties",id:"parts-and-css-properties",level:2}];function h(e){const t={code:"code",h2:"h2",h3:"h3",p:"p",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,n.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(i.Z,{type:"engine",location:"org/dwcj/component/textarea/TextArea",top:"true"}),"\n",(0,r.jsx)(t.h3,{id:"labeling",children:"Labeling"}),"\n",(0,r.jsxs)(t.p,{children:["The text area component can be easily labeled without the needing to create an extra label component using the ",(0,r.jsx)(t.code,{children:"setAttribute()"})," method and passing the desired label as a string, as shown below: ",(0,r.jsx)("br",{})]}),"\n",(0,r.jsx)(s.Z,{path:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.textareademos.TextAreaLabel",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/textareademos/TextAreaLabel.java",javaC:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/code_snippets/textarea/Label.txt",cssURL:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/resources/css/textareastyles/text_area_styles.css",javaHighlight:"{15}",height:"125px"}),"\n",(0,r.jsx)("br",{}),"\n",(0,r.jsx)(t.h3,{id:"placeholder",children:"Placeholder"}),"\n",(0,r.jsxs)(t.p,{children:["It is also possible to set placeholder text within the component to better help users understand what type of input is expected. Similar to a label, this can be accomplished using the ",(0,r.jsx)(t.code,{children:"setAttribute()"})," method: ",(0,r.jsx)("br",{})]}),"\n",(0,r.jsx)(s.Z,{path:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.textareademos.TextAreaPlaceholder",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/textareademos/TextAreaPlaceholder.java",javaC:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/code_snippets/textarea/Placeholder.txt",cssURL:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/resources/css/textareastyles/text_area_styles.css",javaHighlight:"{16}",height:"125px"}),"\n",(0,r.jsx)("br",{}),"\n",(0,r.jsx)(t.h3,{id:"spellcheck",children:"Spellcheck"}),"\n",(0,r.jsxs)(t.p,{children:["The text area can also be configured with spellchecking to help the user improve their input. Use the ",(0,r.jsx)(t.code,{children:"setAttribute()"})," method to do this:"]}),"\n",(0,r.jsx)(s.Z,{path:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.textareademos.TextAreaSpellcheck",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/textareademos/TextAreaSpellcheck.java",javaC:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/code_snippets/textarea/Spellcheck.txt",cssURL:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/resources/css/textareastyles/text_area_styles.css",javaHighlight:"{16}",height:"125px"}),"\n",(0,r.jsx)("br",{}),"\n",(0,r.jsx)(t.h3,{id:"expanses",children:"Expanses"}),"\n",(0,r.jsxs)(t.p,{children:["DWCJ's text area comes with 5 expanses for quick styling without the use of CSS. Expanses are supported by use of a built-in enum class.\r\nBelow are the various expanses supported for the text area component: ",(0,r.jsx)("br",{})]}),"\n",(0,r.jsx)(s.Z,{path:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.textareademos.TextAreaExpanse",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/textareademos/TextAreaExpanse.java",javaC:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/code_snippets/textarea/Expanse.txt",cssURL:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/resources/css/textareastyles/text_area_styles.css",javaHighlight:"{19,23,27,31,35}",height:"200px"}),"\n",(0,r.jsxs)(t.table,{children:[(0,r.jsx)(t.thead,{children:(0,r.jsx)(t.tr,{children:(0,r.jsx)(t.th,{children:"Text Area Expanses"})})}),(0,r.jsx)(t.tbody,{children:(0,r.jsx)(t.tr,{children:(0,r.jsx)(t.td,{children:(0,r.jsxs)("ul",{children:[(0,r.jsx)("li",{children:(0,r.jsx)(t.code,{children:"TextArea.Expanse.XSMALL"})}),(0,r.jsx)("li",{children:(0,r.jsx)(t.code,{children:"TextArea.Expanse.SMALL"})}),(0,r.jsx)("li",{children:(0,r.jsx)(t.code,{children:"TextArea.Expanse.MEDIUM"})}),(0,r.jsx)("li",{children:(0,r.jsx)(t.code,{children:"TextArea.Expanse.LARGE"})}),(0,r.jsx)("li",{children:(0,r.jsx)(t.code,{children:"TextArea.Expanse.XLARGE"})})]})})})})]}),"\n",(0,r.jsx)(t.h2,{id:"parts-and-css-properties",children:"Parts and CSS Properties"}),"\n",(0,r.jsx)(o.Z,{tag:a(5731).Kx})]})}function m(e={}){const{wrapper:t}={...(0,n.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(h,{...e})}):h(e)}},6031:(e,t,a)=>{var r=a(4836);t.Z=void 0;var n=r(a(4938)),s=a(5893),o=(0,n.default)((0,s.jsx)("path",{d:"m19 1-5 5v11l5-4.5V1zM1 6v14.65c0 .25.25.5.5.5.1 0 .15-.05.25-.05C3.1 20.45 5.05 20 6.5 20c1.95 0 4.05.4 5.5 1.5V6c-1.45-1.1-3.55-1.5-5.5-1.5S2.45 4.9 1 6zm22 13.5V6c-.6-.45-1.25-.75-2-1v13.5c-1.1-.35-2.3-.5-3.5-.5-1.7 0-4.15.65-5.5 1.5v2c1.35-.85 3.8-1.5 5.5-1.5 1.65 0 3.35.3 4.75 1.05.1.05.15.05.25.05.25 0 .5-.25.5-.5v-1.1z"}),"AutoStories");t.Z=o},2610:(e,t,a)=>{var r=a(4836);t.Z=void 0;var n=r(a(4938)),s=a(5893),o=(0,n.default)((0,s.jsx)("path",{d:"M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"}),"DragIndicator");t.Z=o},5162:(e,t,a)=>{a.d(t,{Z:()=>o});a(7294);var r=a(6010);const n={tabItem:"tabItem_Ymn6"};var s=a(5893);function o(e){let{children:t,hidden:a,className:o}=e;return(0,s.jsx)("div",{role:"tabpanel",className:(0,r.Z)(n.tabItem,o),hidden:a,children:t})}},4866:(e,t,a)=>{a.d(t,{Z:()=>j});var r=a(7294),n=a(6010),s=a(2466),o=a(6550),i=a(469),l=a(1980),c=a(7392),d=a(12);function u(e){return r.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,r.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 p(e){const{values:t,children:a}=e;return(0,r.useMemo)((()=>{const e=t??function(e){return u(e).map((e=>{let{props:{value:t,label:a,attributes:r,default:n}}=e;return{value:t,label:a,attributes:r,default:n}}))}(a);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,a])}function h(e){let{value:t,tabValues:a}=e;return a.some((e=>e.value===t))}function m(e){let{queryString:t=!1,groupId:a}=e;const n=(0,o.k6)(),s=function(e){let{queryString:t=!1,groupId:a}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!a)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 a??null}({queryString:t,groupId:a});return[(0,l._X)(s),(0,r.useCallback)((e=>{if(!s)return;const t=new URLSearchParams(n.location.search);t.set(s,e),n.replace({...n.location,search:t.toString()})}),[s,n])]}function b(e){const{defaultValue:t,queryString:a=!1,groupId:n}=e,s=p(e),[o,l]=(0,r.useState)((()=>function(e){let{defaultValue:t,tabValues:a}=e;if(0===a.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!h({value:t,tabValues:a}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${a.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const r=a.find((e=>e.default))??a[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:t,tabValues:s}))),[c,u]=m({queryString:a,groupId:n}),[b,A]=function(e){let{groupId:t}=e;const a=function(e){return e?`docusaurus.tab.${e}`:null}(t),[n,s]=(0,d.Nk)(a);return[n,(0,r.useCallback)((e=>{a&&s.set(e)}),[a,s])]}({groupId:n}),x=(()=>{const e=c??b;return h({value:e,tabValues:s})?e:null})();(0,i.Z)((()=>{x&&l(x)}),[x]);return{selectedValue:o,selectValue:(0,r.useCallback)((e=>{if(!h({value:e,tabValues:s}))throw new Error(`Can't select invalid tab value=${e}`);l(e),u(e),A(e)}),[u,A,s]),tabValues:s}}var A=a(2389);const x={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var g=a(5893);function v(e){let{className:t,block:a,selectedValue:r,selectValue:o,tabValues:i}=e;const l=[],{blockElementScrollPositionUntilNextRender:c}=(0,s.o5)(),d=e=>{const t=e.currentTarget,a=l.indexOf(t),n=i[a].value;n!==r&&(c(t),o(n))},u=e=>{let t=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":{const a=l.indexOf(e.currentTarget)+1;t=l[a]??l[0];break}case"ArrowLeft":{const a=l.indexOf(e.currentTarget)-1;t=l[a]??l[l.length-1];break}}t?.focus()};return(0,g.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,n.Z)("tabs",{"tabs--block":a},t),children:i.map((e=>{let{value:t,label:a,attributes:s}=e;return(0,g.jsx)("li",{role:"tab",tabIndex:r===t?0:-1,"aria-selected":r===t,ref:e=>l.push(e),onKeyDown:u,onClick:d,...s,className:(0,n.Z)("tabs__item",x.tabItem,s?.className,{"tabs__item--active":r===t}),children:a??t},t)}))})}function w(e){let{lazy:t,children:a,selectedValue:n}=e;const s=(Array.isArray(a)?a:[a]).filter(Boolean);if(t){const e=s.find((e=>e.props.value===n));return e?(0,r.cloneElement)(e,{className:"margin-top--md"}):null}return(0,g.jsx)("div",{className:"margin-top--md",children:s.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==n})))})}function f(e){const t=b(e);return(0,g.jsxs)("div",{className:(0,n.Z)("tabs-container",x.tabList),children:[(0,g.jsx)(v,{...e,...t}),(0,g.jsx)(w,{...e,...t})]})}function j(e){const t=(0,A.Z)();return(0,g.jsx)(f,{...e,children:u(e.children)},String(t))}},6957:(e,t,a)=>{a.d(t,{Z:()=>A});var r=a(7294),n=a(917),s=a(4866),o=a(5162),i=a(4673),l=a(1750);const c="data:image/png;base64,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",d=a.p+"assets/images/expand-ba3f00f73da43d91e5b17663c4a7d108.png",u="data:image/png;base64,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";var p=a(2610),h=a(5944);function m(e){let{collapse:t,setCollapse:a}=e;const r=n.iv`
+ display: flex;
+ justify-content: end;
+ align-items: flex-end;
+ background-color: transparent;
+ margin-bottom: -10px;
+ `,s=n.iv`
+ /* position: absolute;
+ right: 0; */
+ cursor: pointer;
+ z-index: 10;
+ height: 35px;
+ width: 35px;
+ border: none;
+ background-color: none;
+ justify-self: flex-end;
+ background-color: transparent;
+ margin-right: 5px;
+ margin-bottom: -50px !important;
+ `,o=n.iv`
+ filter: invert(var(--inversion-percentage));
+ `;return(0,h.tZ)("div",{css:r,children:(0,h.tZ)("button",{css:s,onClick:()=>{a(!t)},children:t?(0,h.tZ)("img",{css:o,src:d,className:"icon-tabler-arrow-bar-up"}):(0,h.tZ)("img",{css:o,src:c,className:"icon-tabler-arrow-bar-down"})})})}function b(e){let{url:t}=e;const a=n.iv`
+ position: relative;
+ cursor: pointer;
+ z-index: 10;
+ height: 35px;
+ width: 35px;
+ border: none;
+ background-color: none;
+ justify-self: flex-end;
+ margin-top: -5px;
+ margin-bottom: -20px;
+ background-color: transparent;
+
+
+ `,r=n.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,h.tZ)("button",{css:a,onClick:()=>{window.open(t,"_blank")},children:(0,h.tZ)("img",{css:r,src:u})})}function A(e){let{path:t,javaC:a,javaE:c,cssURL:d,javaHighlight:u,height:A,frame:x,tabs:g}=e;const[v,w]=(0,r.useState)(""),[f,j]=(0,r.useState)(""),[y,D]=(0,r.useState)(""),[S,Z]=(0,r.useState)(!(!a||!c)),[k,B]=(0,r.useState)(!1),[C,E]=(0,r.useState)({}),[L,J]=(0,r.useState)(!1),[T,M]=(0,r.useState)(0),[z,V]=(0,r.useState)(0),[H,N]=(0,r.useState)(25),[X,O]=(0,r.useState)(25),[F,G]=(0,r.useState)(0),[Y,P]=(0,r.useState)(!1),R=(0,r.useRef)(null),I=(0,r.useRef)(null);(0,r.useEffect)((()=>{c&&fetch(c).then((e=>e.text())).then((e=>{j(e);const t=new URL(c).pathname.split("/"),a=t[t.length-1];E((e=>({...e,javaFile:a})))})),a&&fetch(a).then((e=>e.text())).then((e=>{w(e)})),d&&fetch(d).then((e=>e.text())).then((e=>{D(e);const t=new URL(d).pathname.split("/"),a=t[t.length-1];E((e=>({...e,cssFile:a})))})),G(R.current.offsetWidth),console.log(F)}),[]);const W=()=>{J(!1),console.log("Stop Resizing")},U=e=>{if(L){const t=e.clientX-T;z+t>F/3&&(R.current.style.width=`${z+t}px`,I.current.style.right=(H-t<25?25:H-t)+"px",O(H-t<25?25:H-t))}},q=n.iv`
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ margin-bottom: 16px;
+ /* padding: ${"hidden"==x?"0 15px 0 15px;":"7px 15px 0 15px;"}; */
+ /* box-shadow: var(--ifm-global-shadow-lw); */
+ background-color: var(--code-display-color-background);
+ `,K=n.iv`
+ width: 100%;
+ /* padding: 1em; */
+ border: 1px solid var(--ifm-toc-border-color);
+ border-right: none;
+ background-color: transparent;
+ display: flex;
+ position: relative;
+ `,Q=n.iv`
+ min-height: 100px;
+ height: 100%;
+ width: 100%;
+ height: ${A||"100%"};
+ pointer-events: none;
+ `,_=n.iv`
+ display: flex;
+ justify-content: flex-end;
+ opacity: 0;
+ transition: opacity 0.3s ease-in-out;
+ ${k&&"opacity: 1;"};
+ margin: 10px 0 0 0;
+ position: absolute;
+ right: 25px;
+ `,$=n.iv`
+ display: flex;
+ align-items: center;
+ cursor: ew-resize;
+ border-left: 1px solid var(--ifm-toc-border-color);
+ border-right: 1px solid var(--ifm-toc-border-color);
+ background-color: var(--ifm-background-color);
+ `,ee=n.iv`
+ box-shadow: none;
+ background-color: var(--ifm-background-color);
+ margin: 0px;
+ padding: 0px;
+ border: 1px solid var(--ifm-toc-border-color);
+ border-top: none;
+ border-radius: 0px;
+ position: relative;
+
+ div{
+ /* border: none; */
+ border-color: var(--ifm-toc-border-color);
+ padding: 2px 0px 0px 0px;
+ margin: 0px
+ }
+
+ summary{
+ display: flex;
+ width: 100%;
+ justify-content: center;
+ margin: 10px 0;
+ font-weight: bold;
+ ::before{
+ left: auto;
+ margin-left: -100px;
+ --docusaurus-details-decoration-color: var(--ifm-color-primary)
+ }
+ }
+ .margin-top--md{
+ margin-top: 0px !important;
+ }
+ ul{
+ margin: -4px 0px!important;
+ }
+ `,te=n.iv`
+ /* :first-child{
+ margin-left: 1em;
+ } */
+ li[aria-selected="true"]{
+ border-color: var(--ifm-color-primary);
+ }
+
+ .tabs__item{
+ padding: 5px 20px -2px 20px;
+ border-radius: 0px;
+ }
+ `,ae=n.iv`
+ border-radius: 0px;
+ box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset;
+ `;return(0,h.BX)("div",{css:q,onMouseUp:W,onMouseLeave:W,onMouseMove:U,children:["hidden"!=x?(0,h.BX)("div",{onMouseEnter:()=>{B(!0)},onMouseLeave:()=>B(!1),css:K,children:[(0,h.tZ)("iframe",{onMouseUp:W,loading:"lazy",src:t,css:{...Q,pointerEvents:L?"none":"auto"},ref:R,onMouseMove:U}),(0,h.tZ)("div",{css:_,ref:I,children:(0,h.tZ)(b,{url:t})}),(0,h.tZ)("div",{css:$,onMouseDown:e=>{e.preventDefault(),J(!0),M(e.clientX),V(R.current.offsetWidth),N(X),console.log(I.current.right),console.log("Start Resizing")},children:(0,h.tZ)(p.Z,{})})]}):null,(0,h.BX)(i.Z,{css:ee,summary:(0,h.tZ)("summary",{onClick:()=>P(!Y),children:Y?"Hide Code":"Show Code"}),children:[a&&c?(0,h.tZ)(m,{collapse:S,setCollapse:Z}):null,d?(0,h.BX)(s.Z,{css:te,children:[(0,h.tZ)(o.Z,{value:g?g[0]:"Java",label:g?g[0]:C.javaFile,default:!0,children:(0,h.tZ)(l.Z,{css:ae,className:"codeDemoBlock",language:"java",showLineNumbers:!0,metastring:u,children:S?v:f})}),(0,h.tZ)(o.Z,{value:g?g[1]:"CSS",label:g?g[1]:C.cssFile,children:(0,h.tZ)(l.Z,{css:ae,className:"codeDemoBlock",language:"css",showLineNumbers:!0,children:y})})]}):(0,h.tZ)(s.Z,{css:te,children:(0,h.tZ)(o.Z,{value:g?g[0]:"Java",label:g?g[0]:C.javaFile,default:!0,children:(0,h.tZ)(l.Z,{css:ae,className:"codeDemoBlock",language:"java",showLineNumbers:!0,metastring:u,children:S?v:f})})})]})]})}},3273:(e,t,a)=>{a.d(t,{Z:()=>c});var r=a(7294),n=a(917),s=a(8230),o=a(4387),i=a(6031);var l=a(5944);function c(e){let{type:t,location:a,top:c,children:d,code:u,suffix:p}=e;const[h,m]=(0,r.useState)("");(0,r.useEffect)((()=>{p||(p=""),m("https://javadoc.io/doc/org.dwcj/dwcj-"+t+"/latest/"+a+".html"+p)}),[]);const b=n.iv`
+ display: inline;
+
+ ${c&&n.iv`
+ width: 100%;
+ display: flex;
+ justify-content: flex-end;
+ margin-top: -33px;
+ margin-bottom: 25px;
+ `}
+ `,A=n.iv`
+ background-color: #0063CC;
+ padding: 0 0 0 5px;
+ :hover{
+ color: white;
+ }
+ `;return(0,l.BX)(l.HY,{children:["true"===c&&(0,l.tZ)("div",{css:b,children:(0,l.tZ)(s.Z,{title:"JavaDoc",arrow:!0,children:(0,l.tZ)(o.Z,{css:A,label:"Java API",component:"a",href:h,icon:(0,l.tZ)(i.Z,{}),clickable:!0,color:"primary",target:"_blank"})})}),"true"!==c&&!u&&(0,l.tZ)("div",{css:b,children:(0,l.tZ)("a",{href:h,target:"_blank",children:d})}),"true"!==c&&u&&(0,l.tZ)("div",{css:b,children:(0,l.tZ)("code",{children:(0,l.tZ)("a",{href:h,target:"_blank",children:d})})})]})}},1415:(e,t,a)=>{a.d(t,{Z:()=>s});a(7294);var r=a(8397),n=a(5893);function s(e){return(0,n.jsx)(n.Fragment,{children:(0,n.jsx)(r.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/9df0fb54.f85f4104.js b/assets/js/9df0fb54.f85f4104.js
deleted file mode 100644
index 0ceb52ea5..000000000
--- a/assets/js/9df0fb54.f85f4104.js
+++ /dev/null
@@ -1,100 +0,0 @@
-"use strict";(self.webpackChunkdwcj_documentation=self.webpackChunkdwcj_documentation||[]).push([[1368],{3284:(e,t,a)=>{a.r(t),a.d(t,{assets:()=>u,contentTitle:()=>c,default:()=>A,frontMatter:()=>i,metadata:()=>d,toc:()=>h});var n=a(5893),r=a(1151),s=a(6957),o=a(7796),l=a(3273);const i={sidebar_position:140,title:"TextArea",pagination_next:"styling/styling_intro"},c=void 0,d={id:"components/text-area",title:"TextArea",description:"Labeling",source:"@site/docs/components/text-area.md",sourceDirName:"components",slug:"/components/text-area",permalink:"/docs/components/text-area",draft:!1,unlisted:!1,editUrl:"https://github.com/DwcJava/dwcjava.github.io/tree/website/docs/components/text-area.md",tags:[],version:"current",sidebarPosition:140,frontMatter:{sidebar_position:140,title:"TextArea",pagination_next:"styling/styling_intro"},sidebar:"documentationSidebar",previous:{title:"Slider",permalink:"/docs/components/slider"},next:{title:"Styling",permalink:"/docs/styling/styling_intro"}},u={},h=[{value:"Labeling",id:"labeling",level:3},{value:"Placeholder",id:"placeholder",level:3},{value:"Spellcheck",id:"spellcheck",level:3},{value:"Expanses",id:"expanses",level:3},{value:"Parts and CSS Properties",id:"parts-and-css-properties",level:2}];function p(e){const t={code:"code",h2:"h2",h3:"h3",p:"p",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,r.a)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(l.Z,{type:"engine",location:"org/dwcj/component/textarea/TextArea",top:"true"}),"\n",(0,n.jsx)(t.h3,{id:"labeling",children:"Labeling"}),"\n",(0,n.jsxs)(t.p,{children:["The text area component can be easily labeled without the needing to create an extra label component using the ",(0,n.jsx)(t.code,{children:"setAttribute()"})," method and passing the desired label as a string, as shown below: ",(0,n.jsx)("br",{})]}),"\n",(0,n.jsx)(s.Z,{path:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.textareademos.TextAreaLabel",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/textareademos/TextAreaLabel.java",javaC:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/code_snippets/textarea/Label.txt",cssURL:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/resources/css/textareastyles/text_area_styles.css",javaHighlight:"{15}",height:"125px"}),"\n",(0,n.jsx)("br",{}),"\n",(0,n.jsx)(t.h3,{id:"placeholder",children:"Placeholder"}),"\n",(0,n.jsxs)(t.p,{children:["It is also possible to set placeholder text within the component to better help users understand what type of input is expected. Similar to a label, this can be accomplished using the ",(0,n.jsx)(t.code,{children:"setAttribute()"})," method: ",(0,n.jsx)("br",{})]}),"\n",(0,n.jsx)(s.Z,{path:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.textareademos.TextAreaPlaceholder",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/textareademos/TextAreaPlaceholder.java",javaC:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/code_snippets/textarea/Placeholder.txt",cssURL:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/resources/css/textareastyles/text_area_styles.css",javaHighlight:"{16}",height:"125px"}),"\n",(0,n.jsx)("br",{}),"\n",(0,n.jsx)(t.h3,{id:"spellcheck",children:"Spellcheck"}),"\n",(0,n.jsxs)(t.p,{children:["The text area can also be configured with spellchecking to help the user improve their input. Use the ",(0,n.jsx)(t.code,{children:"setAttribute()"})," method to do this:"]}),"\n",(0,n.jsx)(s.Z,{path:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.textareademos.TextAreaSpellcheck",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/textareademos/TextAreaSpellcheck.java",javaC:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/code_snippets/textarea/Spellcheck.txt",cssURL:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/resources/css/textareastyles/text_area_styles.css",javaHighlight:"{16}",height:"125px"}),"\n",(0,n.jsx)("br",{}),"\n",(0,n.jsx)(t.h3,{id:"expanses",children:"Expanses"}),"\n",(0,n.jsxs)(t.p,{children:["DWCJ's text area comes with 5 expanses for quick styling without the use of CSS. Expanses are supported by use of a built-in enum class.\r\nBelow are the various expanses supported for the text area component: ",(0,n.jsx)("br",{})]}),"\n",(0,n.jsx)(s.Z,{path:"https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.textareademos.TextAreaExpanse",javaE:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/textareademos/TextAreaExpanse.java",javaC:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/code_snippets/textarea/Expanse.txt",cssURL:"https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/resources/css/textareastyles/text_area_styles.css",javaHighlight:"{19,23,27,31,35}",height:"200px"}),"\n",(0,n.jsxs)(t.table,{children:[(0,n.jsx)(t.thead,{children:(0,n.jsx)(t.tr,{children:(0,n.jsx)(t.th,{children:"Text Area Expanses"})})}),(0,n.jsx)(t.tbody,{children:(0,n.jsx)(t.tr,{children:(0,n.jsx)(t.td,{children:(0,n.jsxs)("ul",{children:[(0,n.jsx)("li",{children:(0,n.jsx)(t.code,{children:"TextArea.Expanse.XSMALL"})}),(0,n.jsx)("li",{children:(0,n.jsx)(t.code,{children:"TextArea.Expanse.SMALL"})}),(0,n.jsx)("li",{children:(0,n.jsx)(t.code,{children:"TextArea.Expanse.MEDIUM"})}),(0,n.jsx)("li",{children:(0,n.jsx)(t.code,{children:"TextArea.Expanse.LARGE"})}),(0,n.jsx)("li",{children:(0,n.jsx)(t.code,{children:"TextArea.Expanse.XLARGE"})})]})})})})]}),"\n",(0,n.jsx)(t.h2,{id:"parts-and-css-properties",children:"Parts and CSS Properties"}),"\n",(0,n.jsx)(o.Z,{tag:a(5731).Kx})]})}function A(e={}){const{wrapper:t}={...(0,r.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(p,{...e})}):p(e)}},5162:(e,t,a)=>{a.d(t,{Z:()=>o});a(7294);var n=a(6010);const r={tabItem:"tabItem_Ymn6"};var s=a(5893);function o(e){let{children:t,hidden:a,className:o}=e;return(0,s.jsx)("div",{role:"tabpanel",className:(0,n.Z)(r.tabItem,o),hidden:a,children:t})}},4866:(e,t,a)=>{a.d(t,{Z:()=>j});var n=a(7294),r=a(6010),s=a(2466),o=a(6550),l=a(469),i=a(1980),c=a(7392),d=a(12);function u(e){return n.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,n.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 h(e){const{values:t,children:a}=e;return(0,n.useMemo)((()=>{const e=t??function(e){return u(e).map((e=>{let{props:{value:t,label:a,attributes:n,default:r}}=e;return{value:t,label:a,attributes:n,default:r}}))}(a);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,a])}function p(e){let{value:t,tabValues:a}=e;return a.some((e=>e.value===t))}function A(e){let{queryString:t=!1,groupId:a}=e;const r=(0,o.k6)(),s=function(e){let{queryString:t=!1,groupId:a}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!a)throw new Error('Docusaurus error: The