diff --git a/.Rbuildignore b/.Rbuildignore index 27b323cb8..8064e14a6 100644 --- a/.Rbuildignore +++ b/.Rbuildignore @@ -33,3 +33,5 @@ inst/lib/bsw3/.npmignore ^inst/examples-shiny/brand.yml/Monda\.ttf$ ^inst/examples-shiny/brand.yml/Monda-OFL\.txt$ ^AGENTS\.md$ +^inst/examples-shiny/toast/\.gitignore$ +^inst/examples-shiny/brand\.yml/\.gitignore$ diff --git a/DESCRIPTION b/DESCRIPTION index c20469d01..4182de340 100644 --- a/DESCRIPTION +++ b/DESCRIPTION @@ -1,6 +1,6 @@ Package: bslib Title: Custom 'Bootstrap' 'Sass' Themes for 'shiny' and 'rmarkdown' -Version: 0.9.0.9000 +Version: 0.9.0.9002 Authors@R: c( person("Carson", "Sievert", , "carson@posit.co", role = c("aut", "cre"), comment = c(ORCID = "0000-0002-4958-2844")), @@ -115,6 +115,7 @@ Collate: 'shiny-devmode.R' 'sidebar.R' 'staticimports.R' + 'toast.R' 'tooltip.R' 'utils-deps.R' 'utils-shiny.R' diff --git a/NAMESPACE b/NAMESPACE index 27d4445aa..836b2303a 100644 --- a/NAMESPACE +++ b/NAMESPACE @@ -1,6 +1,7 @@ # Generated by roxygen2: do not edit by hand S3method(as.tags,bslib_sidebar) +S3method(as.tags,bslib_toast) S3method(bind_task_button,ExtendedTask) S3method(bind_task_button,default) S3method(brand_resolve,"NULL") @@ -17,9 +18,14 @@ S3method(print,bslib_fragment) S3method(print,bslib_navbar_options) S3method(print,bslib_page) S3method(print,bslib_showcase_layout) +S3method(print,bslib_toast) S3method(print,bslib_value_box_theme) S3method(save_html,bslib_fragment) S3method(save_html,bslib_page) +S3method(toast_component_header,bslib_toast_header) +S3method(toast_component_header,character) +S3method(toast_component_header,default) +S3method(toast_component_header,list) export(accordion) export(accordion_panel) export(accordion_panel_close) @@ -86,6 +92,7 @@ export(font_collection) export(font_face) export(font_google) export(font_link) +export(hide_toast) export(input_dark_mode) export(input_submit_textarea) export(input_switch) @@ -140,6 +147,7 @@ export(popover) export(precompiled_css_path) export(remove_all_fill) export(run_with_themer) +export(show_toast) export(showcase_bottom) export(showcase_left_center) export(showcase_top_right) @@ -147,6 +155,8 @@ export(sidebar) export(sidebar_toggle) export(theme_bootswatch) export(theme_version) +export(toast) +export(toast_header) export(toggle_dark_mode) export(toggle_popover) export(toggle_sidebar) diff --git a/R/sysdata.rda b/R/sysdata.rda index 5c0dfa994..d94f04a20 100644 Binary files a/R/sysdata.rda and b/R/sysdata.rda differ diff --git a/R/toast.R b/R/toast.R new file mode 100644 index 000000000..e0d41f9e2 --- /dev/null +++ b/R/toast.R @@ -0,0 +1,475 @@ +#' Toast notifications +#' +#' @description +#' Toast notifications are lightweight, temporary messages designed to mimic +#' push notifications from mobile and desktop operating systems. They are built +#' on [Bootstrap 5's toast +#' component](https://getbootstrap.com/docs/5.3/components/toasts/). +#' +#' bslib includes a complete example of toasts and their many configuration +#' options: +#' +#' ```r +#' shiny::runExample("toast", package = "bslib") +#' ``` +#' +#' @examplesIf rlang::is_interactive() +#' library(shiny) +#' library(bslib) +#' +#' ui <- page_fluid( +#' actionButton("show_simple", "Simple Toast"), +#' actionButton("show_header", "Toast with Header") +#' ) +#' +#' server <- function(input, output, session) { +#' observeEvent(input$show_simple, { +#' show_toast( +#' toast( +#' "Operation completed successfully!", +#' header = "Success", +#' type = "success" +#' ) +#' ) +#' }) +#' +#' observeEvent(input$show_header, { +#' show_toast( +#' toast( +#' "Your settings have been saved.", +#' header = toast_header( +#' title = "Settings Updated", +#' status = "just now" +#' ), +#' type = "success" +#' ) +#' ) +#' }) +#' } +#' +#' shinyApp(ui, server) +#' +#' @param ... Body content of the toast. Can be a string, or any HTML elements. +#' Named arguments will be treated as HTML attributes for the toast container. +#' @param header Optional header content. Can be a string, or the result of +#' [toast_header()]. If provided, creates a `.toast-header` with close button +#' (if `closable = TRUE`). +#' @param id Optional unique identifier for the toast. If `NULL`, an ID will be +#' automatically generated when the toast is shown via [show_toast()]. +#' Providing a stable ID allows you to hide the toast later. If a toast with +#' `id` is already visible, that toast is automatically hidden before showing +#' the new toast with the same `id` so that only one toast with a given ID is +#' shown at once. +#' @param type Optional semantic type. One of `NULL`, `"primary"`, +#' `"secondary"`, `"success"`, `"info"`, `"warning"`, `"danger"`, `"light"`, +#' or `"dark"`. Applies appropriate Bootstrap background utility classes +#' (`text-bg-*`). +#' @param duration_s Numeric. Number of seconds after which the toast should +#' automatically hide. Use `0`, or `NA` to disable auto-hiding (toast will +#' remain visible until manually dismissed). Default is `5` (5 seconds). +#' @param position String or character vector specifying where to position the +#' toast container. Can be provided in several formats: +#' * Kebab-case: `"top-left"`, `"bottom-right"`, etc. +#' * Space-separated: `"top left"`, `"bottom right"`, etc. +#' * Character vector: `c("top", "left")`, `c("bottom", "right")`, etc. +#' * Any order: `"left top"` is equivalent to `"top left"` +#' +#' Valid vertical positions are `"top"`, `"middle"`, or `"bottom"`. Valid +#' horizontal positions are `"left"`, `"center"`, or `"right"`. Input is +#' case-insensitive. Default is `"bottom-right"`. +#' @param closable Logical. Whether to include a close button. Defaults to +#' `TRUE`. When both `duration_s = NA` (or `0` or `NULL`) and `closable = +#' FALSE`, the toast will remain visible until manually hidden via +#' [hide_toast()]. This is useful when the toast contains interactive Shiny UI +#' elements and you want to manage the toast display programmatically. +#' +#' @return A `bslib_toast` object that can be passed to [show_toast()]. +#' +#' @seealso [show_toast()] to display a toast, [hide_toast()] to dismiss a +#' toast, and [toast_header()] to create structured headers. +#' @describeIn toast Create a toast element. +#' @family Toast components +#' @export +toast <- function( + ..., + header = NULL, + icon = NULL, + id = NULL, + type = NULL, + duration_s = 5, + position = "top-right", + closable = TRUE +) { + if (!is.null(type)) { + type <- rlang::arg_match( + type, + # fmt: skip + c( + "primary", "secondary", + "success", "info", "warning", "danger", "error", + "light", "dark" + ) + ) + # Support "error" as alias for "danger" + type <- switch(type, error = "danger", type) + } + + dots <- separate_arguments(...) + + position <- normalize_toast_position(position) + + # duration_s of 0 or NA (or NULL) disables auto-hiding + if (is.null(duration_s) || rlang::is_na(duration_s)) { + autohide <- FALSE + } else { + if (!is.numeric(duration_s) || length(duration_s) != 1 || duration_s < 0) { + rlang::abort( + "`duration_s` must be a single non-negative number or NA." + ) + } + autohide <- duration_s != 0 + } + + duration <- if (autohide) duration_s * 1000 # milliseconds + + structure( + list( + body = dots$children, + header = header, + icon = icon, + id = id, + type = type, + autohide = autohide, + duration = duration, + position = position, + closable = closable, + attribs = dots$attribs + ), + class = "bslib_toast" + ) +} + +#' @describeIn toast Create a structured toast header with optional icon and +#' status indicator. Returns a data structure that can be passed to the +#' `header` argument of `toast()`. +#' +#' @param title Header text (required). +#' @param icon Optional icon element, for example from [shiny::icon()], +#' [bsicons::bs_icon()] or [fontawesome::fa()]. +#' @param status Optional status text that appears as small, muted text on the +#' right side of the header. +#' +#' @return For `toast_header()`: a toast header object that can be used with the +#' `header` argument of `toast()`. +#' +#' @export +toast_header <- function(title, ..., icon = NULL, status = NULL) { + dots <- separate_arguments(...) + + structure( + list( + title = tagList(title, !!!dots$children), + icon = icon, + status = status, + attribs = dots$attribs + ), + class = "bslib_toast_header" + ) +} + +#' @export +as.tags.bslib_toast <- function(x, ...) { + id <- x$id %||% toast_random_id() + + toast_component( + body = x$body, + header = x$header, + icon = x$icon, + type = x$type, + closable = x$closable, + id = id, + attribs = x$attribs + ) +} + +# nocov start +#' @export +print.bslib_toast <- function(x, ...) { + x_tags <- x + # Add "show" class to make toast visible when printed + x_tags$attribs <- c(x_tags$attribs, list(class = "show")) + x_tags <- as.tags(x_tags) + print(as_fragment(x_tags)) + invisible(x) +} +# nocov end + +#' Show or hide a toast notification +#' +#' @description +#' Displays a toast notification in a Shiny application. +#' +#' @examplesIf rlang::is_interactive() +#' library(shiny) +#' library(bslib) +#' +#' ui <- page_fluid( +#' actionButton("show_persistent", "Show Persistent Toast"), +#' actionButton("hide_persistent", "Hide Toast") +#' ) +#' +#' server <- function(input, output, session) { +#' toast_id <- reactiveVal(NULL) +#' +#' observeEvent(input$show_persistent, { +#' id <- show_toast( +#' toast( +#' body = "This toast won't disappear automatically.", +#' autohide = FALSE +#' ) +#' ) +#' toast_id(id) +#' }) +#' +#' observeEvent(input$hide_persistent, { +#' req(toast_id()) +#' hide_toast(toast_id()) +#' toast_id(NULL) +#' }) +#' } +#' +#' shinyApp(ui, server) +#' +#' @param toast A [toast()], or a string that will be automatically converted to +#' a toast with default settings. +#' @param id String with the toast ID returned by `show_toast()` or a `toast` +#' object provided that the `id` was set when created/shown. +#' @param ... Reserved for future extensions (currently ignored). +#' @param session Shiny session object. +#' +#' @return `show_toast()` Invisibly returns the toast ID (string) that can be +#' used with `hide_toast()`. +#' +#' @family Toast components +#' @describeIn show_toast Show a toast notification. +#' @export +show_toast <- function( + toast, + ..., + session = shiny::getDefaultReactiveDomain() +) { + rlang::check_dots_empty() + + if (!inherits(toast, "bslib_toast")) { + toast <- toast(toast) + } + + if (length(toast$body) == 0 && length(toast$header) == 0) { + rlang::warn("`toast` has no content; no toast to show.") + return(invisible(NULL)) + } + + toast$id <- toast$id %||% toast_random_id() + + toasted <- processDeps(toast, session) + + data <- list( + html = toasted$html, + deps = toasted$deps, + autohide = toast$autohide, + duration = toast$duration, + position = toast$position, + id = toast$id + ) + + # Use custom message to show toast immediately + session$sendCustomMessage("bslib.show-toast", dropNulls(data)) + invisible(toast$id) +} + +#' @describeIn show_toast Hide a toast notification by ID. +#' @export +hide_toast <- function(id, ..., session = shiny::getDefaultReactiveDomain()) { + rlang::check_dots_empty() + + if (inherits(id, "bslib_toast")) { + if (is.null(id$id)) { + rlang::abort("Cannot hide a toast without an ID. Provide the toast ID.") + } + id <- id$id + } + if (is.null(id)) { + rlang::warn("`id` is NULL; no toast to hide.") + return(invisible(NULL)) + } + + # Use custom message to hide toast immediately + session$sendCustomMessage("bslib.hide-toast", list(id = id)) + invisible(id) +} + +toast_component_header <- function(x) { + UseMethod("toast_component_header") +} + +#' @export +toast_component_header.character <- function(x) { + strong(class = "me-auto", x) +} + +#' @export +toast_component_header.bslib_toast_header <- function(x) { + # Status text (small muted text) + status_text <- if (!is.null(x$status)) { + tags$small(class = "text-muted text-end", x$status) + } + + tagList( + if (!is.null(x$icon)) span(class = "toast-header-icon", x$icon), + strong( + class = "me-auto", + class = if (!is.null(x$icon)) "ms-2", + x$title + ), + status_text + ) +} + +#' @export +toast_component_header.list <- function(x) { + # Treat a bare list with a `title` element as a toast_header() + if (!rlang::has_name(x, "title")) { + rlang::abort( + "Invalid toast header: must be a string, toast_header(), or a list with a `title` element." + ) + } + + toast_component_header(structure(x, class = "bslib_toast_header")) +} + +#' @export +toast_component_header.default <- function(x) { + x +} + +# Internal function to build toast HTML structure +toast_component <- function( + body, + header = NULL, + icon = NULL, + type = NULL, + closable = TRUE, + id = NULL, + class = NULL, + attribs = list() +) { + # Set ARIA attributes based on toast urgency level + # - danger toasts use role="alert" + aria-live="assertive" to immediately + # interrupt screen readers (critical errors requiring immediate attention) + # - other toasts use role="status" + aria-live="polite" to announce updates + # without interrupting (non-critical, announced when convenient) + aria_role <- if (!is.null(type) && type == "danger") "alert" else "status" + aria_live <- if (!is.null(type) && type == "danger") "assertive" else "polite" + + type_class <- if (!is.null(type)) { + paste0("text-bg-", type) + } + + close_button <- tags$button( + type = "button", + class = "btn-close", + `data-bs-dismiss` = "toast", + `aria-label` = "Close" + ) + + header_tag <- if (!is.null(header)) { + div( + class = "toast-header", + toast_component_header(header), + if (closable) close_button + ) + } + + # Body with optional close button + # * If header exists, close button goes in header + # * If no header, close button goes in body (if closable) + body_has_close_btn <- is.null(header) && closable + body_tag <- if (!body_has_close_btn && is.null(icon)) { + div(class = "toast-body", body) + } else { + div( + class = "toast-body d-flex gap-2", + if (!is.null(icon)) span(class = "toast-body-icon", icon), + div(class = "toast-body-content flex-grow-1", body), + if (body_has_close_btn) close_button + ) + } + + toast <- div( + id = id, + class = paste(c("toast", type_class, class), collapse = " "), + role = aria_role, + `aria-live` = aria_live, + `aria-atomic` = "true", + !!!attribs, + header_tag, + body_tag, + component_dependencies() + ) + + as_fragment(tag_require(toast, version = 5)) +} + +toast_random_id <- function() { + paste0("bslib-toast-", p_randomInt(1000, 10000000)) +} + +normalize_toast_position <- function(position = "bottom-right") { + if (is.null(position) || length(position) == 0) { + return("bottom-right") + } + + original_position <- position # for error messages + + # If position is a vector, collapse it to a single string with spaces + if (length(position) > 1) { + position <- paste(position, collapse = " ") + } + + position <- tolower(trimws(position)) + components <- strsplit(position, "[-\\s]+", perl = TRUE)[[1]] + components <- components[nzchar(components)] # Remove empty strings + + vertical <- intersect(components, c("top", "middle", "bottom")) + horizontal <- intersect(components, c("left", "center", "right")) + invalid <- setdiff(components, c(vertical, horizontal)) + + if (length(vertical) != 1 || length(horizontal) != 1 || length(invalid) > 0) { + rlang::abort( + paste0( + "Invalid toast position: '", + paste(original_position, collapse = " "), + "'. ", + "Must specify one vertical position (top, middle, bottom) and ", + "one horizontal position (left, center, right)." + ) + ) + } + + result <- paste0(vertical, "-", horizontal) + + rlang::arg_match( + result, + c( + "top-left", + "top-center", + "top-right", + "middle-left", + "middle-center", + "middle-right", + "bottom-left", + "bottom-center", + "bottom-right" + ) + ) +} diff --git a/inst/builtin/bs5/shiny/_variables.scss b/inst/builtin/bs5/shiny/_variables.scss index c7d45a002..3d01e2fd7 100644 --- a/inst/builtin/bs5/shiny/_variables.scss +++ b/inst/builtin/bs5/shiny/_variables.scss @@ -172,5 +172,9 @@ $modal-header-border-width: none !default; $modal-header-padding: 1.5rem !default; $modal-backdrop-bg: #464646 !default; +// Toasts +$toast-spacing: 0.5rem !default; +$toast-border-width: 0 !default; + // Shiny: Base shiny.scss variables $notification-close-color: currentColor !default; diff --git a/inst/components/dist/components.css b/inst/components/dist/components.css index 6a33568d6..c4d9431d2 100644 --- a/inst/components/dist/components.css +++ b/inst/components/dist/components.css @@ -1 +1 @@ -.accordion .accordion-header{font-size:calc(1.325rem + .9vw);margin-top:0;margin-bottom:.5rem;font-weight:400;line-height:1.2;color:var(--bs-heading-color);margin-bottom:0}@media (min-width: 1200px){.accordion .accordion-header{font-size:2rem}}.accordion .accordion-icon:not(:empty){margin-right:0.75rem;display:flex}.accordion .accordion-button:not(.collapsed){box-shadow:none}.accordion .accordion-button:not(.collapsed):focus{box-shadow:var(--bs-accordion-btn-focus-box-shadow)}.bslib-card{overflow:auto}.bslib-card .card-body+.card-body{padding-top:0}.bslib-card .card-body{overflow:auto}.bslib-card .card-body p{margin-top:0}.bslib-card .card-body p:last-child{margin-bottom:0}.bslib-card .card-body{max-height:var(--bslib-card-body-max-height, none)}.bslib-card[data-full-screen="true"]>.card-body{max-height:var(--bslib-card-body-max-height-full-screen, none)}.bslib-card .card-header .form-group{margin-bottom:0}.bslib-card .card-header .selectize-control{margin-bottom:0}.bslib-card .card-header .selectize-control .item{margin-right:1.15rem}.bslib-card .card-footer{margin-top:auto}.bslib-card .bslib-navs-card-title{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center}.bslib-card .bslib-navs-card-title .nav{margin-left:auto}.bslib-card .bslib-sidebar-layout:not([data-bslib-sidebar-border="true"]){border:none}.bslib-card .bslib-sidebar-layout:not([data-bslib-sidebar-border-radius="true"]){border-top-left-radius:0;border-top-right-radius:0}.bslib-card[data-full-screen="true"]{position:fixed;inset:3.5rem 1rem 1rem;height:auto !important;max-height:none !important;width:auto !important;z-index:1070}.bslib-full-screen-enter{position:absolute;bottom:var(--bslib-full-screen-enter-bottom, 0.2rem);right:var(--bslib-full-screen-enter-right, 0);top:var(--bslib-full-screen-enter-top);left:var(--bslib-full-screen-enter-left);color:var(--bslib-color-fg, var(--bs-card-color));background-color:var(--bslib-color-bg, var(--bs-card-bg, var(--bs-body-bg)));border:var(--bs-card-border-width) solid var(--bslib-color-fg, var(--bs-card-border-color));box-shadow:0 2px 4px rgba(0,0,0,0.15);margin:0.2rem 0.4rem;padding:0.55rem !important;font-size:.8rem;cursor:pointer;opacity:0;z-index:1070}.card:hover>*>.bslib-full-screen-enter,.card:focus-within>*>.bslib-full-screen-enter{opacity:0.6}.card:hover>*>.bslib-full-screen-enter:hover,.card:hover>*>.bslib-full-screen-enter:focus,.card:focus-within>*>.bslib-full-screen-enter:hover,.card:focus-within>*>.bslib-full-screen-enter:focus{opacity:1}.card[data-full-screen="false"]:hover>*>.bslib-full-screen-enter{display:block}.bslib-has-full-screen .bslib-full-screen-enter{display:none !important}.bslib-full-screen-exit{position:relative;top:1.35rem;font-size:0.9rem;cursor:pointer;text-decoration:none;display:flex;float:right;margin-right:2.15rem;align-items:center;color:rgba(var(--bs-body-bg-rgb), 0.8)}.bslib-full-screen-exit:hover{color:rgba(var(--bs-body-bg-rgb), 1)}.bslib-full-screen-exit svg{margin-left:0.5rem;font-size:1.5rem}#bslib-full-screen-overlay{position:fixed;inset:0;background-color:rgba(var(--bs-body-color-rgb), 0.6);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);z-index:1069;animation:bslib-full-screen-overlay-enter 400ms cubic-bezier(0.6, 0.02, 0.65, 1) forwards}@keyframes bslib-full-screen-overlay-enter{0%{opacity:0}100%{opacity:1}}@media (max-width: 575.98px){.bslib-card[data-full-screen="true"]{inset:2.5rem 0.5rem 0.5rem}.bslib-full-screen-exit{top:0.75rem;margin-right:1.25rem}}.bslib-grid{--_item-column-span: 1;display:grid !important;gap:var(--bslib-spacer, 1rem);height:var(--bslib-grid-height)}.bslib-grid>*{grid-column:auto/span var(--_item-column-span, 1)}.bslib-grid.grid{grid-template-columns:repeat(var(--bs-columns, 12), minmax(0, 1fr));grid-template-rows:unset;grid-auto-rows:var(--bslib-grid--row-heights);--bslib-grid--row-heights--xs: unset;--bslib-grid--row-heights--sm: unset;--bslib-grid--row-heights--md: unset;--bslib-grid--row-heights--lg: unset;--bslib-grid--row-heights--xl: unset;--bslib-grid--row-heights--xxl: unset}.bslib-grid.grid.bslib-grid--row-heights--xs{--bslib-grid--row-heights: var(--bslib-grid--row-heights--xs)}@media (min-width: 576px){.bslib-grid.grid.bslib-grid--row-heights--sm{--bslib-grid--row-heights: var(--bslib-grid--row-heights--sm)}}@media (min-width: 768px){.bslib-grid.grid.bslib-grid--row-heights--md{--bslib-grid--row-heights: var(--bslib-grid--row-heights--md)}}@media (min-width: 992px){.bslib-grid.grid.bslib-grid--row-heights--lg{--bslib-grid--row-heights: var(--bslib-grid--row-heights--lg)}}@media (min-width: 1200px){.bslib-grid.grid.bslib-grid--row-heights--xl{--bslib-grid--row-heights: var(--bslib-grid--row-heights--xl)}}@media (min-width: 1400px){.bslib-grid.grid.bslib-grid--row-heights--xxl{--bslib-grid--row-heights: var(--bslib-grid--row-heights--xxl)}}.bslib-grid>*>.shiny-input-container{width:100%}bslib-layout-columns.bslib-grid{--_item-column-span: 6}bslib-layout-columns[hidden-until-init]>*{display:none}@media (max-width: 767.98px){bslib-layout-columns:where(.bslib-grid)>*{grid-column:1 / -1}}@media (max-width: 575.98px){.bslib-grid{grid-template-columns:1fr !important;height:var(--bslib-grid-height-mobile)}.bslib-grid.grid{height:unset !important}}.bslib-input-submit-textarea{margin:0 auto}.bslib-submit-textarea-container{display:flex;flex-direction:column;gap:0.5rem;padding:0.5rem;border:var(--bs-border-width, 1px) solid var(--bs-gray-500, #ced4da);border-radius:var(--bs-border-radius-sm, 4px);background-color:var(--bs-body-bg, white);transition:border-color 0.2s, box-shadow 0.2s}.bslib-submit-textarea-container:focus-within{border-color:var(--bs-primary, #007bff);box-shadow:0 0 0 var(--bs-focus-ring-width, 0.25rem) var(--bs-focus-ring-color, rgba(13,110,253,0.25))}.bslib-submit-textarea-container>textarea{border:none;resize:none;min-height:1rem;max-height:10rem;background-color:transparent;padding:0;color:var(--bs-body-color, #212529)}.bslib-submit-textarea-container>textarea:focus{outline:none;box-shadow:none}.bslib-submit-textarea-container>footer{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:0.5rem}.bslib-submit-textarea-container .bslib-submit-textarea-btn{margin-left:auto}.bslib-toolbar{display:flex;align-items:center;gap:0.25rem}.bslib-submit-key{border-radius:var(--bs-border-radius-sm, 4px);padding:0.25em 0.5em;font-weight:300;font-size:0.7em;vertical-align:0.15em}:not(.disabled) .bslib-submit-key{background-color:rgba(var(--bs-body-color-rgb, 0, 0, 0), 0.2)}@media (min-width: 576px){.nav:not(.nav-hidden){display:flex !important;display:-webkit-flex !important}.nav:not(.nav-hidden):not(.nav-stacked):not(.flex-column){float:none !important}.nav:not(.nav-hidden):not(.nav-stacked):not(.flex-column)>.bslib-nav-spacer{margin-left:auto !important}.nav:not(.nav-hidden):not(.nav-stacked):not(.flex-column)>.form-inline{margin-top:auto;margin-bottom:auto}.nav:not(.nav-hidden).nav-stacked{flex-direction:column;-webkit-flex-direction:column;height:100%}.nav:not(.nav-hidden).nav-stacked>.bslib-nav-spacer{margin-top:auto !important}}.bslib-page-fill{width:100%;height:100%;margin:0;padding:var(--bslib-spacer, 1rem);gap:var(--bslib-spacer, 1rem)}@media (max-width: 575.98px){.bslib-flow-mobile>.html-fill-item{flex:0 0 auto}.bslib-flow-mobile.bslib-page-sidebar>.html-fill-item,.bslib-flow-mobile.bslib-page-navbar.has-page-sidebar>.html-fill-item{flex:1 1 auto}.bslib-flow-mobile.bslib-page-sidebar>.bslib-sidebar-layout>.main>.html-fill-item,.bslib-flow-mobile.bslib-page-navbar.has-page-sidebar>.html-fill-container>.bslib-sidebar-layout>.main>.html-fill-item{flex:0 0 auto}}.navbar+.container-fluid:has(>.tab-content>.tab-pane.active.html-fill-container){padding-left:0;padding-right:0}.navbar+.container-fluid>.tab-content>.tab-pane.active.html-fill-container{padding:var(--bslib-spacer, 1rem);gap:var(--bslib-spacer, 1rem)}.navbar+.container-fluid>.tab-content>.tab-pane.active.html-fill-container:has(>.bslib-sidebar-layout:only-child){padding:0}.navbar+.container-fluid>.tab-content>.tab-pane.active.html-fill-container>.bslib-sidebar-layout:only-child:not([data-bslib-sidebar-border="true"]){border-left:none;border-right:none;border-bottom:none}.navbar+.container-fluid>.tab-content>.tab-pane.active.html-fill-container>.bslib-sidebar-layout:only-child:not([data-bslib-sidebar-border-radius="true"]){border-radius:0}.navbar+div>.bslib-sidebar-layout{border-top:var(--bslib-sidebar-border)}:root{--bslib-page-sidebar-title-bg: #202020;--bslib-page-sidebar-title-color: #fff}.bslib-page-sidebar>.navbar{--bs-navbar-brand-color: var(--bslib-page-sidebar-title-color);border-bottom:var(--bs-border-width) solid var(--bs-border-color-translucent);background-color:var(--bslib-page-sidebar-title-bg);color:var(--bslib-page-sidebar-title-color)}.bslib-page-sidebar .bslib-page-title{margin-bottom:0;line-height:var(--bs-body-line-height)}@media (max-width: 991.98px){.bslib-page-sidebar>.bslib-sidebar-layout.sidebar-collapsed:not(.sidebar-right)>.main,.bslib-page-navbar>div>.bslib-sidebar-layout.sidebar-collapsed:not(.sidebar-right)>.main{padding-right:var(--_padding)}.bslib-page-sidebar>.bslib-sidebar-layout.sidebar-collapsed.sidebar-right>.main,.bslib-page-navbar>div>.bslib-sidebar-layout.sidebar-collapsed.sidebar-right>.main{padding-left:var(--_padding)}}@media (min-width: 576px){.bslib-sidebar-layout .bslib-page-main.html-fill-container{min-height:var(--bslib-page-main-min-height, 576px)}.bslib-sidebar-layout:not(.sidebar-collapsed) .bslib-page-main.html-fill-container,.bslib-sidebar-layout.transitioning .bslib-page-main.html-fill-container{min-width:var(--bslib-page-main-min-width, 576px)}}.bslib-sidebar-layout{container-type:style;--_transition-duration: 0;--_transition-easing-x: var(--bslib-sidebar-transition-easing-x, cubic-bezier(0.8, 0.78, 0.22, 1.07));--_border: var(--bslib-sidebar-border, var(--bs-card-border-width, var(--bs-border-width)) solid var(--bs-card-border-color, var(--bs-border-color-translucent)));--_border-radius: var(--bslib-sidebar-border-radius, var(--bs-border-radius));--_vert-border: var(--bslib-sidebar-vert-border, var(--_border));--_sidebar-width: var(--bslib-sidebar-width, 250px);--_sidebar-bg: var(--bslib-sidebar-bg, RGBA(var(--bs-body-bg-rgb), 0.05));--_sidebar-fg: var(--bslib-sidebar-fg, var(--_main-fg));--_main-fg: var(--bslib-sidebar-main-fg, var(--bs-body-color));--_main-bg: var(--bslib-sidebar-main-bg, transparent);--_toggle-bg: var(--bslib-sidebar-toggle-bg, rgba(var(--bs-emphasis-color-rgb, 0, 0, 0), 0.1));--_padding: var(--bslib-sidebar-padding, var(--bslib-spacer, 1.5rem));--_icon-size: var(--bslib-sidebar-icon-size, 1rem);--_icon-button-size: var(--bslib-sidebar-icon-button-size, calc(var(--_icon-size, 1rem) * 2));--_padding-icon: calc(var(--_icon-button-size, 2rem) * 1.5);--_toggle-border-radius: var(--bslib-collapse-toggle-border-radius, var(--bs-border-radius, 3px));--_toggle-transform: var(--bslib-collapse-toggle-transform, 0deg);--_toggle-transition-easing: var(--bslib-sidebar-toggle-transition-easing, cubic-bezier(1, 0, 0, 1));--_toggle-right-transform: var(--bslib-collapse-toggle-right-transform, 180deg);--_toggle-position-y: calc(var(--_js-toggle-count-this-side, 0) * calc(var(--_icon-size) + var(--_padding)) + var(--_icon-size, 1rem) / 2);--_toggle-position-x: calc(-2.5 * var(--_icon-size) - var(--bs-card-border-width, 1px));--_mobile-max-height: var(--bslib-sidebar-mobile-max-height, var(--bslib-sidebar-max-height-mobile));--_sidebar-mobile-opacity: var(--bslib-sidebar-mobile-opacity);--_main-mobile-expanded-opacity: var(--bslib-sidebar-main-mobile-expanded-opacity, 0);--_sidebar-mobile-max-width: var(--bslib-sidebar-mobile-max-width);--_sidebar-mobile-box-shadow: var(--bslib-sidebar-mobile-box-shadow);--_column-main: minmax(0, 1fr);--_toggle-collective-height: calc(calc(var(--_icon-button-size) + 0.5em) * var(--_js-toggle-count-max-side, 1));--_resize-handle-width: var(--bslib-sidebar-resize-handle-width, 12px);--_resize-indicator-color: var(--_sidebar-fg, var(--bs-emphasis-color, black));--_resize-indicator-color-active: var(--bslib-sidebar-resize-indicator-color-active, var(--bs-primary, #0d6efd));display:grid !important;grid-template-columns:Min(calc(100% - var(--_padding-icon)), var(--_sidebar-width)) var(--_column-main);position:relative;transition:grid-template-columns ease-in-out var(--_transition-duration),background-color linear var(--_transition-duration);border:var(--_border);border-radius:var(--_border-radius)}@container style(--bs-card-color: not " "){.bslib-sidebar-layout{--_main-fg: var(--bslib-sidebar-main-fg, var(--bs-card-color, var(--bs-body-color)))}}.bslib-sidebar-layout.transitioning{--_transition-duration: max(var(--bslib-sidebar-transition-duration, 300ms), 5ms)}@media (prefers-reduced-motion: reduce){.bslib-sidebar-layout{transition:none}}.bslib-sidebar-layout,.html-fill-container>.bslib-sidebar-layout.html-fill-item{min-height:var(--_toggle-collective-height)}.bslib-sidebar-layout[data-bslib-sidebar-border="false"]{border:none}.bslib-sidebar-layout[data-bslib-sidebar-border-radius="false"]{border-radius:initial}.bslib-sidebar-layout>.main,.bslib-sidebar-layout>.sidebar{grid-row:1 / 2;border-radius:inherit;overflow:auto}.bslib-sidebar-layout>.main{grid-column:2 / 3;border-top-left-radius:0;border-bottom-left-radius:0;padding:var(--_padding);transition:padding var(--_transition-easing-x) var(--_transition-duration);color:var(--_main-fg);background-color:var(--_main-bg)}.bslib-sidebar-layout>.sidebar{grid-column:1 / 2;width:100%;border-right:var(--_vert-border);border-top-right-radius:0;border-bottom-right-radius:0;color:var(--_sidebar-fg);background-color:var(--_sidebar-bg);position:relative}.bslib-sidebar-layout>.sidebar>.sidebar-content{display:flex;flex-direction:column;gap:var(--bslib-spacer, 1rem);padding:var(--_padding);padding-top:var(--_padding-icon)}.bslib-sidebar-layout>.sidebar>.sidebar-content>:last-child:not(.sidebar-title){margin-bottom:0}.bslib-sidebar-layout>.sidebar>.sidebar-content>.accordion{margin-left:calc(-1 * var(--_padding));margin-right:calc(-1 * var(--_padding))}.bslib-sidebar-layout>.sidebar>.sidebar-content>.accordion:last-child{margin-bottom:calc(-1 * var(--_padding))}.bslib-sidebar-layout>.sidebar>.sidebar-content>.accordion:not(:last-child){margin-bottom:1rem}.bslib-sidebar-layout>.sidebar>.sidebar-content>.accordion .accordion-body{display:flex;flex-direction:column}.bslib-sidebar-layout>.sidebar>.sidebar-content>.accordion:not(:first-child) .accordion-item:first-child{border-top:var(--bs-accordion-border-width) solid var(--bs-accordion-border-color)}.bslib-sidebar-layout>.sidebar>.sidebar-content>.accordion:not(:last-child) .accordion-item:last-child{border-bottom:var(--bs-accordion-border-width) solid var(--bs-accordion-border-color)}.bslib-sidebar-layout>.sidebar>.sidebar-content.has-accordion>.sidebar-title{border-bottom:none;padding-bottom:0}.bslib-sidebar-layout>.sidebar .shiny-input-container{width:100%}.bslib-sidebar-layout>.collapse-toggle{grid-row:1 / 2;grid-column:1 / 2;z-index:1000;display:inline-flex;align-items:center;position:absolute;right:calc(var(--_icon-size));top:calc(var(--_icon-size, 1rem) / 2);border:none;border-radius:var(--_toggle-border-radius);height:var(--_icon-button-size, 2rem);width:var(--_icon-button-size, 2rem);display:flex;align-items:center;justify-content:center;padding:0;color:var(--_sidebar-fg);background-color:unset;transition:color var(--_transition-easing-x) var(--_transition-duration),top var(--_transition-easing-x) var(--_transition-duration),right var(--_transition-easing-x) var(--_transition-duration),left var(--_transition-easing-x) var(--_transition-duration)}.bslib-sidebar-layout>.collapse-toggle:hover{background-color:var(--_toggle-bg)}.bslib-sidebar-layout>.collapse-toggle>.collapse-icon{opacity:0.8;width:var(--_icon-size);height:var(--_icon-size);transform:rotateY(var(--_toggle-transform));transition:transform var(--_toggle-transition-easing) var(--_transition-duration)}.bslib-sidebar-layout>.collapse-toggle:hover>.collapse-icon{opacity:1}.bslib-sidebar-layout .sidebar-title{font-size:1.25rem;line-height:1.25;margin-top:0;margin-bottom:1rem;padding-bottom:1rem;border-bottom:var(--_border)}.bslib-sidebar-layout.sidebar-right{grid-template-columns:var(--_column-main) Min(calc(100% - var(--_padding-icon)), var(--_sidebar-width))}.bslib-sidebar-layout.sidebar-right>.main{grid-column:1 / 2;border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:inherit;border-bottom-left-radius:inherit}.bslib-sidebar-layout.sidebar-right>.sidebar{grid-column:2 / 3;border-right:none;border-left:var(--_vert-border);border-top-left-radius:0;border-bottom-left-radius:0}.bslib-sidebar-layout.sidebar-right>.collapse-toggle{grid-column:2 / 3;left:var(--_icon-size);right:unset;border:var(--bslib-collapse-toggle-border)}.bslib-sidebar-layout.sidebar-right>.collapse-toggle>.collapse-icon{transform:rotateY(var(--_toggle-right-transform))}.bslib-sidebar-layout.transitioning>.sidebar>.sidebar-content{display:none}.bslib-sidebar-layout.sidebar-collapsed{--_toggle-transform: 180deg;--_toggle-right-transform: 0deg;--_vert-border: none;grid-template-columns:0 minmax(0, 1fr)}.bslib-sidebar-layout.sidebar-collapsed.sidebar-right{grid-template-columns:minmax(0, 1fr) 0}.bslib-sidebar-layout.sidebar-collapsed:not(.transitioning)>.sidebar>*{display:none}.bslib-sidebar-layout.sidebar-collapsed>.main{border-radius:inherit;padding-left:var(--_padding-icon);padding-right:var(--_padding-icon)}.bslib-sidebar-layout.sidebar-collapsed>.collapse-toggle{color:var(--_main-fg);top:var(--_toggle-position-y);right:var(--_toggle-position-x)}.bslib-sidebar-layout.sidebar-collapsed.sidebar-right>.collapse-toggle{left:var(--_toggle-position-x);right:unset}.bslib-sidebar-layout .bslib-sidebar-resize-handle{position:absolute;top:0;bottom:0;width:var(--_resize-handle-width);left:calc(calc(-1 * var(--_resize-handle-width)) - 2px);grid-column:2;cursor:ew-resize;user-select:none;z-index:calc(1000 + 1)}.bslib-sidebar-layout .bslib-sidebar-resize-handle::before{content:"";position:absolute;top:0;bottom:0;left:0;right:calc(-1 * var(--_resize-handle-width) - 2px);z-index:calc(1000 + 1)}.bslib-sidebar-layout .bslib-sidebar-resize-handle .resize-indicator{position:absolute;top:50%;right:2px;width:2px;height:30px;transform:translate(-50%, -50%);background-color:var(--_resize-indicator-color);opacity:0.1;border-radius:1px;transition:all 0.15s ease}.bslib-sidebar-layout .bslib-sidebar-resize-handle:hover .resize-indicator,.bslib-sidebar-layout .bslib-sidebar-resize-handle:focus .resize-indicator,.bslib-sidebar-layout .bslib-sidebar-resize-handle:active .resize-indicator,.bslib-sidebar-layout .bslib-sidebar-resize-handle:focus .resize-indicator{opacity:1}.bslib-sidebar-layout .bslib-sidebar-resize-handle:hover .resize-indicator,.bslib-sidebar-layout .bslib-sidebar-resize-handle:focus .resize-indicator{width:3px;height:40px}.bslib-sidebar-layout .bslib-sidebar-resize-handle:active .resize-indicator{background-color:var(--_resize-indicator-color-active);width:4px;height:50px}.bslib-sidebar-layout .bslib-sidebar-resize-handle:focus{outline:none}.bslib-sidebar-layout .bslib-sidebar-resize-handle:focus .resize-indicator{outline:2px solid var(--bs-focus-ring-color, rgba(13,110,253,0.25));outline-offset:2px}.bslib-sidebar-layout.sidebar-right>.bslib-sidebar-resize-handle{left:2px}.bslib-sidebar-layout.transitioning>.bslib-sidebar-resize-handle,.bslib-sidebar-layout.sidebar-collapsed>.bslib-sidebar-resize-handle{display:none}.bslib-sidebar-layout.sidebar-resizing{user-select:none}.bslib-sidebar-layout.sidebar-resizing>.bslib-sidebar-resize-handle .resize-indicator{background-color:var(--_resize-indicator-color-active);width:4px;height:50px}.bslib-sidebar-layout{--bslib-sidebar-js-window-size: desktop}@media (max-width: 575.98px){.bslib-sidebar-layout{--bslib-sidebar-js-window-size: mobile}.bslib-sidebar-layout .bslib-sidebar-resize-handle{display:none !important}}@media (min-width: 576px){.bslib-sidebar-layout[data-collapsible-desktop="false"]{--_padding-icon: var(--_padding)}.bslib-sidebar-layout[data-collapsible-desktop="false"]>.collapse-toggle{display:none}.bslib-sidebar-layout[data-collapsible-desktop="false"]>.sidebar[hidden]{display:block !important}.bslib-sidebar-layout[data-collapsible-desktop="false"]>.sidebar[hidden]>.sidebar-content{display:flex !important}}@media (max-width: 575.98px){.bslib-sidebar-layout>.sidebar,.bslib-sidebar-layout.sidebar-right>.sidebar{border:none}.bslib-sidebar-layout>.main,.bslib-sidebar-layout.sidebar-right>.main{grid-column:1 / 3}.bslib-sidebar-layout[data-collapsible-mobile="true"]{grid-template-rows:calc(var(--_icon-button-size) + var(--_padding)) 1fr;grid-template-columns:100% 0}.bslib-sidebar-layout[data-collapsible-mobile="true"]>.collapse-toggle{grid-row:1 / 2}.bslib-sidebar-layout[data-collapsible-mobile="true"]>.main{grid-row:2 / 3}.bslib-sidebar-layout[data-collapsible-mobile="true"]>.sidebar{grid-row:1 / 3}.bslib-sidebar-layout[data-collapsible-mobile="true"]:not(.sidebar-collapsed)>.sidebar,.bslib-sidebar-layout[data-collapsible-mobile="true"].transitioning>.sidebar{z-index:1045}.bslib-sidebar-layout[data-collapsible-mobile="true"]:not(.sidebar-collapsed)>.collapse-toggle,.bslib-sidebar-layout[data-collapsible-mobile="true"].transitioning>.collapse-toggle{z-index:1045}.bslib-sidebar-layout[data-collapsible-mobile="true"]>.collapse-toggle{top:unset;position:relative;align-self:center}.bslib-sidebar-layout[data-collapsible-mobile="true"]:not(.sidebar-right)>.collapse-toggle{left:var(--_icon-size);right:unset;justify-self:left}.bslib-sidebar-layout[data-collapsible-mobile="true"].sidebar-right>.collapse-toggle{right:var(--_icon-size);left:unset;justify-self:right}.bslib-sidebar-layout[data-collapsible-mobile="true"]>.sidebar{opacity:var(--_sidebar-mobile-opacity, 1);max-width:var(--_sidebar-mobile-max-width, 100%);box-shadow:var(--_sidebar-mobile-box-shadow)}.bslib-sidebar-layout[data-collapsible-mobile="true"]>.sidebar{margin:0;padding-top:var(--_padding-icon)}.bslib-sidebar-layout[data-collapsible-mobile="true"]>.sidebar>.sidebar-content{padding-top:0;height:100%;overflow-y:auto}.bslib-sidebar-layout[data-collapsible-mobile="true"]:not(.sidebar-right)>.sidebar{margin-right:auto}.bslib-sidebar-layout[data-collapsible-mobile="true"].sidebar-right>.sidebar{margin-left:auto}.bslib-sidebar-layout[data-collapsible-mobile="true"].sidebar-right{grid-template-columns:0 100%}.bslib-sidebar-layout[data-collapsible-mobile="true"].sidebar-collapsed{grid-template-columns:0 100%}.bslib-sidebar-layout[data-collapsible-mobile="true"].sidebar-collapsed.sidebar-right{grid-template-columns:100% 0}.bslib-sidebar-layout[data-collapsible-mobile="true"]>.main{padding-top:1px;padding-left:var(--_padding);padding-right:var(--_padding)}.bslib-sidebar-layout[data-collapsible-mobile="true"]>.main{opacity:var(--_main-mobile-expanded-opacity);transition:opacity var(--_transition-easing-x) var(--_transition-duration)}.bslib-sidebar-layout[data-collapsible-mobile="true"].sidebar-collapsed>.main{opacity:1}.bslib-sidebar-layout[data-collapsible-mobile="true"]>.main{background-color:none}.bslib-sidebar-layout[data-collapsible-mobile="true"],.bslib-sidebar-layout[data-collapsible-mobile="true"].sidebar-collapsed{background-color:var(--_main-bg)}}@media (max-width: 575.98px){.bslib-sidebar-layout[data-collapsible-mobile="false"]{display:block !important;--_padding-icon: var(--_padding);--_vert-border: var(--_border)}.bslib-sidebar-layout[data-collapsible-mobile="false"]>.sidebar[hidden]{display:block !important}.bslib-sidebar-layout[data-collapsible-mobile="false"]>.sidebar[hidden]>.sidebar-content{display:flex !important}.bslib-sidebar-layout[data-collapsible-mobile="false"]>.sidebar{max-height:var(--_mobile-max-height);overflow-y:auto}.bslib-sidebar-layout[data-collapsible-mobile="false"][data-open-mobile="always"]>.sidebar{border-top:var(--_vert-border)}.bslib-sidebar-layout[data-collapsible-mobile="false"][data-open-mobile="always-above"]>.sidebar{border-bottom:var(--_vert-border)}.bslib-sidebar-layout[data-collapsible-mobile="false"]>.collapse-toggle{display:none}}html[data-bslib-sidebar-resizing="true"]{cursor:ew-resize !important;user-select:none !important}.bslib-value-box{container-name:bslib-value-box;container-type:inline-size}.bslib-value-box.default{--bslib-value-box-bg-default: var(--bs-card-bg, #fff);--bslib-value-box-border-color-default: var(--bs-card-border-color, var(--bs-border-color-translucent));color:var(--bslib-value-box-color, var(--bs-body-color));background-color:var(--bslib-value-box-bg, var(--bslib-value-box-bg-default));border-color:var(--bslib-value-box-border-color, var(--bslib-value-box-border-color-default))}.bslib-value-box .value-box-grid{display:grid;grid-template-areas:"left right";align-items:center;overflow:hidden}.bslib-value-box .value-box-showcase{height:100%;max-height:var(---bslib-value-box-showcase-max-h, 100%)}.bslib-value-box .value-box-showcase,.bslib-value-box .value-box-showcase>.html-fill-item{width:100%}.bslib-value-box[data-full-screen="true"] .value-box-showcase{max-height:var(---bslib-value-box-showcase-max-h-fs, 100%)}@media screen and (min-width: 575.98px){@container bslib-value-box (max-width: 300px){.bslib-value-box:not(.showcase-bottom) .value-box-grid{grid-template-columns:1fr !important;grid-template-rows:auto auto;grid-template-areas:"top" "bottom"}.bslib-value-box:not(.showcase-bottom) .value-box-grid .value-box-showcase{grid-area:top !important}.bslib-value-box:not(.showcase-bottom) .value-box-grid .value-box-area{grid-area:bottom !important;justify-content:end}}}.bslib-value-box .value-box-area{justify-content:center;padding:1.5rem 1rem;font-size:.9rem;font-weight:500}.bslib-value-box .value-box-area *{margin-bottom:0;margin-top:0}.bslib-value-box .value-box-title{font-size:1rem;margin-top:0;margin-bottom:.5rem;font-weight:400;line-height:1.2}.bslib-value-box .value-box-title:empty::after{content:'\00a0 '}.bslib-value-box .value-box-value{font-size:calc(1.325rem + .9vw);margin-top:0;margin-bottom:.5rem;font-weight:400;line-height:1.2}@media (min-width: 1200px){.bslib-value-box .value-box-value{font-size:2rem}}.bslib-value-box .value-box-value:empty::after{content:'\00a0 '}.bslib-value-box .value-box-showcase{align-items:center;justify-content:center;margin-top:auto;margin-bottom:auto;padding:1rem}.bslib-value-box .value-box-showcase .bi,.bslib-value-box .value-box-showcase .fa,.bslib-value-box .value-box-showcase .fab,.bslib-value-box .value-box-showcase .fas,.bslib-value-box .value-box-showcase .far{opacity:.85;min-width:50px;max-width:125%}.bslib-value-box .value-box-showcase .bi,.bslib-value-box .value-box-showcase .fa,.bslib-value-box .value-box-showcase .fab,.bslib-value-box .value-box-showcase .fas,.bslib-value-box .value-box-showcase .far{font-size:4rem}.bslib-value-box.showcase-top-right .value-box-grid{grid-template-columns:1fr var(---bslib-value-box-showcase-w, 50%)}.bslib-value-box.showcase-top-right .value-box-grid .value-box-showcase{grid-area:right;margin-left:auto;align-self:start;align-items:end;padding-left:0;padding-bottom:0}.bslib-value-box.showcase-top-right .value-box-grid .value-box-area{grid-area:left;align-self:end}.bslib-value-box.showcase-top-right[data-full-screen="true"] .value-box-grid{grid-template-columns:auto var(---bslib-value-box-showcase-w-fs, 1fr)}.bslib-value-box.showcase-top-right[data-full-screen="true"] .value-box-grid>div{align-self:center}.bslib-value-box.showcase-top-right:not([data-full-screen="true"]) .value-box-showcase{margin-top:0}@container bslib-value-box (max-width: 300px){.bslib-value-box.showcase-top-right:not([data-full-screen="true"]) .value-box-grid .value-box-showcase{padding-left:1rem}}.bslib-value-box.showcase-left-center .value-box-grid{grid-template-columns:var(---bslib-value-box-showcase-w, 30%) auto}.bslib-value-box.showcase-left-center[data-full-screen="true"] .value-box-grid{grid-template-columns:var(---bslib-value-box-showcase-w-fs, 1fr) auto}.bslib-value-box.showcase-left-center:not([data-fill-screen="true"]) .value-box-grid .value-box-showcase{grid-area:left}.bslib-value-box.showcase-left-center:not([data-fill-screen="true"]) .value-box-grid .value-box-area{grid-area:right}.bslib-value-box.showcase-bottom .value-box-grid{grid-template-columns:1fr;grid-template-rows:1fr var(---bslib-value-box-showcase-h, auto);grid-template-areas:"top" "bottom";overflow:hidden}.bslib-value-box.showcase-bottom .value-box-grid .value-box-showcase{grid-area:bottom;padding:0;margin:0}.bslib-value-box.showcase-bottom .value-box-grid .value-box-area{grid-area:top}.bslib-value-box.showcase-bottom[data-full-screen="true"] .value-box-grid{grid-template-rows:1fr var(---bslib-value-box-showcase-h-fs, 2fr)}.bslib-value-box.showcase-bottom[data-full-screen="true"] .value-box-grid .value-box-showcase{padding:1rem} +.accordion .accordion-header{font-size:calc(1.325rem + .9vw);margin-top:0;margin-bottom:.5rem;font-weight:400;line-height:1.2;color:var(--bs-heading-color);margin-bottom:0}@media (min-width: 1200px){.accordion .accordion-header{font-size:2rem}}.accordion .accordion-icon:not(:empty){margin-right:0.75rem;display:flex}.accordion .accordion-button:not(.collapsed){box-shadow:none}.accordion .accordion-button:not(.collapsed):focus{box-shadow:var(--bs-accordion-btn-focus-box-shadow)}.bslib-card{overflow:auto}.bslib-card .card-body+.card-body{padding-top:0}.bslib-card .card-body{overflow:auto}.bslib-card .card-body p{margin-top:0}.bslib-card .card-body p:last-child{margin-bottom:0}.bslib-card .card-body{max-height:var(--bslib-card-body-max-height, none)}.bslib-card[data-full-screen="true"]>.card-body{max-height:var(--bslib-card-body-max-height-full-screen, none)}.bslib-card .card-header .form-group{margin-bottom:0}.bslib-card .card-header .selectize-control{margin-bottom:0}.bslib-card .card-header .selectize-control .item{margin-right:1.15rem}.bslib-card .card-footer{margin-top:auto}.bslib-card .bslib-navs-card-title{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center}.bslib-card .bslib-navs-card-title .nav{margin-left:auto}.bslib-card .bslib-sidebar-layout:not([data-bslib-sidebar-border="true"]){border:none}.bslib-card .bslib-sidebar-layout:not([data-bslib-sidebar-border-radius="true"]){border-top-left-radius:0;border-top-right-radius:0}.bslib-card[data-full-screen="true"]{position:fixed;inset:3.5rem 1rem 1rem;height:auto !important;max-height:none !important;width:auto !important;z-index:1070}.bslib-full-screen-enter{position:absolute;bottom:var(--bslib-full-screen-enter-bottom, 0.2rem);right:var(--bslib-full-screen-enter-right, 0);top:var(--bslib-full-screen-enter-top);left:var(--bslib-full-screen-enter-left);color:var(--bslib-color-fg, var(--bs-card-color));background-color:var(--bslib-color-bg, var(--bs-card-bg, var(--bs-body-bg)));border:var(--bs-card-border-width) solid var(--bslib-color-fg, var(--bs-card-border-color));box-shadow:0 2px 4px rgba(0,0,0,0.15);margin:0.2rem 0.4rem;padding:0.55rem !important;font-size:.8rem;cursor:pointer;opacity:0;z-index:1070}.card:hover>*>.bslib-full-screen-enter,.card:focus-within>*>.bslib-full-screen-enter{opacity:0.6}.card:hover>*>.bslib-full-screen-enter:hover,.card:hover>*>.bslib-full-screen-enter:focus,.card:focus-within>*>.bslib-full-screen-enter:hover,.card:focus-within>*>.bslib-full-screen-enter:focus{opacity:1}.card[data-full-screen="false"]:hover>*>.bslib-full-screen-enter{display:block}.bslib-has-full-screen .bslib-full-screen-enter{display:none !important}.bslib-full-screen-exit{position:relative;top:1.35rem;font-size:0.9rem;cursor:pointer;text-decoration:none;display:flex;float:right;margin-right:2.15rem;align-items:center;color:rgba(var(--bs-body-bg-rgb), 0.8)}.bslib-full-screen-exit:hover{color:rgba(var(--bs-body-bg-rgb), 1)}.bslib-full-screen-exit svg{margin-left:0.5rem;font-size:1.5rem}#bslib-full-screen-overlay{position:fixed;inset:0;background-color:rgba(var(--bs-body-color-rgb), 0.6);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);z-index:1069;animation:bslib-full-screen-overlay-enter 400ms cubic-bezier(0.6, 0.02, 0.65, 1) forwards}@keyframes bslib-full-screen-overlay-enter{0%{opacity:0}100%{opacity:1}}@media (max-width: 575.98px){.bslib-card[data-full-screen="true"]{inset:2.5rem 0.5rem 0.5rem}.bslib-full-screen-exit{top:0.75rem;margin-right:1.25rem}}.bslib-grid{--_item-column-span: 1;display:grid !important;gap:var(--bslib-spacer, 1rem);height:var(--bslib-grid-height)}.bslib-grid>*{grid-column:auto/span var(--_item-column-span, 1)}.bslib-grid.grid{grid-template-columns:repeat(var(--bs-columns, 12), minmax(0, 1fr));grid-template-rows:unset;grid-auto-rows:var(--bslib-grid--row-heights);--bslib-grid--row-heights--xs: unset;--bslib-grid--row-heights--sm: unset;--bslib-grid--row-heights--md: unset;--bslib-grid--row-heights--lg: unset;--bslib-grid--row-heights--xl: unset;--bslib-grid--row-heights--xxl: unset}.bslib-grid.grid.bslib-grid--row-heights--xs{--bslib-grid--row-heights: var(--bslib-grid--row-heights--xs)}@media (min-width: 576px){.bslib-grid.grid.bslib-grid--row-heights--sm{--bslib-grid--row-heights: var(--bslib-grid--row-heights--sm)}}@media (min-width: 768px){.bslib-grid.grid.bslib-grid--row-heights--md{--bslib-grid--row-heights: var(--bslib-grid--row-heights--md)}}@media (min-width: 992px){.bslib-grid.grid.bslib-grid--row-heights--lg{--bslib-grid--row-heights: var(--bslib-grid--row-heights--lg)}}@media (min-width: 1200px){.bslib-grid.grid.bslib-grid--row-heights--xl{--bslib-grid--row-heights: var(--bslib-grid--row-heights--xl)}}@media (min-width: 1400px){.bslib-grid.grid.bslib-grid--row-heights--xxl{--bslib-grid--row-heights: var(--bslib-grid--row-heights--xxl)}}.bslib-grid>*>.shiny-input-container{width:100%}bslib-layout-columns.bslib-grid{--_item-column-span: 6}bslib-layout-columns[hidden-until-init]>*{display:none}@media (max-width: 767.98px){bslib-layout-columns:where(.bslib-grid)>*{grid-column:1 / -1}}@media (max-width: 575.98px){.bslib-grid{grid-template-columns:1fr !important;height:var(--bslib-grid-height-mobile)}.bslib-grid.grid{height:unset !important}}.bslib-input-submit-textarea{margin:0 auto}.bslib-submit-textarea-container{display:flex;flex-direction:column;gap:0.5rem;padding:0.5rem;border:var(--bs-border-width, 1px) solid var(--bs-gray-500, #ced4da);border-radius:var(--bs-border-radius-sm, 4px);background-color:var(--bs-body-bg, white);transition:border-color 0.2s, box-shadow 0.2s}.bslib-submit-textarea-container:focus-within{border-color:var(--bs-primary, #007bff);box-shadow:0 0 0 var(--bs-focus-ring-width, 0.25rem) var(--bs-focus-ring-color, rgba(13,110,253,0.25))}.bslib-submit-textarea-container>textarea{border:none;resize:none;min-height:1rem;max-height:10rem;background-color:transparent;padding:0;color:var(--bs-body-color, #212529)}.bslib-submit-textarea-container>textarea:focus{outline:none;box-shadow:none}.bslib-submit-textarea-container>footer{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:0.5rem}.bslib-submit-textarea-container .bslib-submit-textarea-btn{margin-left:auto}.bslib-toolbar{display:flex;align-items:center;gap:0.25rem}.bslib-submit-key{border-radius:var(--bs-border-radius-sm, 4px);padding:0.25em 0.5em;font-weight:300;font-size:0.7em;vertical-align:0.15em}:not(.disabled) .bslib-submit-key{background-color:rgba(var(--bs-body-color-rgb, 0, 0, 0), 0.2)}@media (min-width: 576px){.nav:not(.nav-hidden){display:flex !important;display:-webkit-flex !important}.nav:not(.nav-hidden):not(.nav-stacked):not(.flex-column){float:none !important}.nav:not(.nav-hidden):not(.nav-stacked):not(.flex-column)>.bslib-nav-spacer{margin-left:auto !important}.nav:not(.nav-hidden):not(.nav-stacked):not(.flex-column)>.form-inline{margin-top:auto;margin-bottom:auto}.nav:not(.nav-hidden).nav-stacked{flex-direction:column;-webkit-flex-direction:column;height:100%}.nav:not(.nav-hidden).nav-stacked>.bslib-nav-spacer{margin-top:auto !important}}.bslib-page-fill{width:100%;height:100%;margin:0;padding:var(--bslib-spacer, 1rem);gap:var(--bslib-spacer, 1rem)}@media (max-width: 575.98px){.bslib-flow-mobile>.html-fill-item{flex:0 0 auto}.bslib-flow-mobile.bslib-page-sidebar>.html-fill-item,.bslib-flow-mobile.bslib-page-navbar.has-page-sidebar>.html-fill-item{flex:1 1 auto}.bslib-flow-mobile.bslib-page-sidebar>.bslib-sidebar-layout>.main>.html-fill-item,.bslib-flow-mobile.bslib-page-navbar.has-page-sidebar>.html-fill-container>.bslib-sidebar-layout>.main>.html-fill-item{flex:0 0 auto}}.navbar+.container-fluid:has(>.tab-content>.tab-pane.active.html-fill-container){padding-left:0;padding-right:0}.navbar+.container-fluid>.tab-content>.tab-pane.active.html-fill-container{padding:var(--bslib-spacer, 1rem);gap:var(--bslib-spacer, 1rem)}.navbar+.container-fluid>.tab-content>.tab-pane.active.html-fill-container:has(>.bslib-sidebar-layout:only-child){padding:0}.navbar+.container-fluid>.tab-content>.tab-pane.active.html-fill-container>.bslib-sidebar-layout:only-child:not([data-bslib-sidebar-border="true"]){border-left:none;border-right:none;border-bottom:none}.navbar+.container-fluid>.tab-content>.tab-pane.active.html-fill-container>.bslib-sidebar-layout:only-child:not([data-bslib-sidebar-border-radius="true"]){border-radius:0}.navbar+div>.bslib-sidebar-layout{border-top:var(--bslib-sidebar-border)}:root{--bslib-page-sidebar-title-bg: #202020;--bslib-page-sidebar-title-color: #fff}.bslib-page-sidebar>.navbar{--bs-navbar-brand-color: var(--bslib-page-sidebar-title-color);border-bottom:var(--bs-border-width) solid var(--bs-border-color-translucent);background-color:var(--bslib-page-sidebar-title-bg);color:var(--bslib-page-sidebar-title-color)}.bslib-page-sidebar .bslib-page-title{margin-bottom:0;line-height:var(--bs-body-line-height)}@media (max-width: 991.98px){.bslib-page-sidebar>.bslib-sidebar-layout.sidebar-collapsed:not(.sidebar-right)>.main,.bslib-page-navbar>div>.bslib-sidebar-layout.sidebar-collapsed:not(.sidebar-right)>.main{padding-right:var(--_padding)}.bslib-page-sidebar>.bslib-sidebar-layout.sidebar-collapsed.sidebar-right>.main,.bslib-page-navbar>div>.bslib-sidebar-layout.sidebar-collapsed.sidebar-right>.main{padding-left:var(--_padding)}}@media (min-width: 576px){.bslib-sidebar-layout .bslib-page-main.html-fill-container{min-height:var(--bslib-page-main-min-height, 576px)}.bslib-sidebar-layout:not(.sidebar-collapsed) .bslib-page-main.html-fill-container,.bslib-sidebar-layout.transitioning .bslib-page-main.html-fill-container{min-width:var(--bslib-page-main-min-width, 576px)}}.bslib-sidebar-layout{container-type:style;--_transition-duration: 0;--_transition-easing-x: var(--bslib-sidebar-transition-easing-x, cubic-bezier(0.8, 0.78, 0.22, 1.07));--_border: var(--bslib-sidebar-border, var(--bs-card-border-width, var(--bs-border-width)) solid var(--bs-card-border-color, var(--bs-border-color-translucent)));--_border-radius: var(--bslib-sidebar-border-radius, var(--bs-border-radius));--_vert-border: var(--bslib-sidebar-vert-border, var(--_border));--_sidebar-width: var(--bslib-sidebar-width, 250px);--_sidebar-bg: var(--bslib-sidebar-bg, RGBA(var(--bs-body-bg-rgb), 0.05));--_sidebar-fg: var(--bslib-sidebar-fg, var(--_main-fg));--_main-fg: var(--bslib-sidebar-main-fg, var(--bs-body-color));--_main-bg: var(--bslib-sidebar-main-bg, transparent);--_toggle-bg: var(--bslib-sidebar-toggle-bg, rgba(var(--bs-emphasis-color-rgb, 0, 0, 0), 0.1));--_padding: var(--bslib-sidebar-padding, var(--bslib-spacer, 1.5rem));--_icon-size: var(--bslib-sidebar-icon-size, 1rem);--_icon-button-size: var(--bslib-sidebar-icon-button-size, calc(var(--_icon-size, 1rem) * 2));--_padding-icon: calc(var(--_icon-button-size, 2rem) * 1.5);--_toggle-border-radius: var(--bslib-collapse-toggle-border-radius, var(--bs-border-radius, 3px));--_toggle-transform: var(--bslib-collapse-toggle-transform, 0deg);--_toggle-transition-easing: var(--bslib-sidebar-toggle-transition-easing, cubic-bezier(1, 0, 0, 1));--_toggle-right-transform: var(--bslib-collapse-toggle-right-transform, 180deg);--_toggle-position-y: calc(var(--_js-toggle-count-this-side, 0) * calc(var(--_icon-size) + var(--_padding)) + var(--_icon-size, 1rem) / 2);--_toggle-position-x: calc(-2.5 * var(--_icon-size) - var(--bs-card-border-width, 1px));--_mobile-max-height: var(--bslib-sidebar-mobile-max-height, var(--bslib-sidebar-max-height-mobile));--_sidebar-mobile-opacity: var(--bslib-sidebar-mobile-opacity);--_main-mobile-expanded-opacity: var(--bslib-sidebar-main-mobile-expanded-opacity, 0);--_sidebar-mobile-max-width: var(--bslib-sidebar-mobile-max-width);--_sidebar-mobile-box-shadow: var(--bslib-sidebar-mobile-box-shadow);--_column-main: minmax(0, 1fr);--_toggle-collective-height: calc(calc(var(--_icon-button-size) + 0.5em) * var(--_js-toggle-count-max-side, 1));--_resize-handle-width: var(--bslib-sidebar-resize-handle-width, 12px);--_resize-indicator-color: var(--_sidebar-fg, var(--bs-emphasis-color, black));--_resize-indicator-color-active: var(--bslib-sidebar-resize-indicator-color-active, var(--bs-primary, #0d6efd));display:grid !important;grid-template-columns:Min(calc(100% - var(--_padding-icon)), var(--_sidebar-width)) var(--_column-main);position:relative;transition:grid-template-columns ease-in-out var(--_transition-duration),background-color linear var(--_transition-duration);border:var(--_border);border-radius:var(--_border-radius)}@container style(--bs-card-color: not " "){.bslib-sidebar-layout{--_main-fg: var(--bslib-sidebar-main-fg, var(--bs-card-color, var(--bs-body-color)))}}.bslib-sidebar-layout.transitioning{--_transition-duration: max(var(--bslib-sidebar-transition-duration, 300ms), 5ms)}@media (prefers-reduced-motion: reduce){.bslib-sidebar-layout{transition:none}}.bslib-sidebar-layout,.html-fill-container>.bslib-sidebar-layout.html-fill-item{min-height:var(--_toggle-collective-height)}.bslib-sidebar-layout[data-bslib-sidebar-border="false"]{border:none}.bslib-sidebar-layout[data-bslib-sidebar-border-radius="false"]{border-radius:initial}.bslib-sidebar-layout>.main,.bslib-sidebar-layout>.sidebar{grid-row:1 / 2;border-radius:inherit;overflow:auto}.bslib-sidebar-layout>.main{grid-column:2 / 3;border-top-left-radius:0;border-bottom-left-radius:0;padding:var(--_padding);transition:padding var(--_transition-easing-x) var(--_transition-duration);color:var(--_main-fg);background-color:var(--_main-bg)}.bslib-sidebar-layout>.sidebar{grid-column:1 / 2;width:100%;border-right:var(--_vert-border);border-top-right-radius:0;border-bottom-right-radius:0;color:var(--_sidebar-fg);background-color:var(--_sidebar-bg);position:relative}.bslib-sidebar-layout>.sidebar>.sidebar-content{display:flex;flex-direction:column;gap:var(--bslib-spacer, 1rem);padding:var(--_padding);padding-top:var(--_padding-icon)}.bslib-sidebar-layout>.sidebar>.sidebar-content>:last-child:not(.sidebar-title){margin-bottom:0}.bslib-sidebar-layout>.sidebar>.sidebar-content>.accordion{margin-left:calc(-1 * var(--_padding));margin-right:calc(-1 * var(--_padding))}.bslib-sidebar-layout>.sidebar>.sidebar-content>.accordion:last-child{margin-bottom:calc(-1 * var(--_padding))}.bslib-sidebar-layout>.sidebar>.sidebar-content>.accordion:not(:last-child){margin-bottom:1rem}.bslib-sidebar-layout>.sidebar>.sidebar-content>.accordion .accordion-body{display:flex;flex-direction:column}.bslib-sidebar-layout>.sidebar>.sidebar-content>.accordion:not(:first-child) .accordion-item:first-child{border-top:var(--bs-accordion-border-width) solid var(--bs-accordion-border-color)}.bslib-sidebar-layout>.sidebar>.sidebar-content>.accordion:not(:last-child) .accordion-item:last-child{border-bottom:var(--bs-accordion-border-width) solid var(--bs-accordion-border-color)}.bslib-sidebar-layout>.sidebar>.sidebar-content.has-accordion>.sidebar-title{border-bottom:none;padding-bottom:0}.bslib-sidebar-layout>.sidebar .shiny-input-container{width:100%}.bslib-sidebar-layout>.collapse-toggle{grid-row:1 / 2;grid-column:1 / 2;z-index:1000;display:inline-flex;align-items:center;position:absolute;right:calc(var(--_icon-size));top:calc(var(--_icon-size, 1rem) / 2);border:none;border-radius:var(--_toggle-border-radius);height:var(--_icon-button-size, 2rem);width:var(--_icon-button-size, 2rem);display:flex;align-items:center;justify-content:center;padding:0;color:var(--_sidebar-fg);background-color:unset;transition:color var(--_transition-easing-x) var(--_transition-duration),top var(--_transition-easing-x) var(--_transition-duration),right var(--_transition-easing-x) var(--_transition-duration),left var(--_transition-easing-x) var(--_transition-duration)}.bslib-sidebar-layout>.collapse-toggle:hover{background-color:var(--_toggle-bg)}.bslib-sidebar-layout>.collapse-toggle>.collapse-icon{opacity:0.8;width:var(--_icon-size);height:var(--_icon-size);transform:rotateY(var(--_toggle-transform));transition:transform var(--_toggle-transition-easing) var(--_transition-duration)}.bslib-sidebar-layout>.collapse-toggle:hover>.collapse-icon{opacity:1}.bslib-sidebar-layout .sidebar-title{font-size:1.25rem;line-height:1.25;margin-top:0;margin-bottom:1rem;padding-bottom:1rem;border-bottom:var(--_border)}.bslib-sidebar-layout.sidebar-right{grid-template-columns:var(--_column-main) Min(calc(100% - var(--_padding-icon)), var(--_sidebar-width))}.bslib-sidebar-layout.sidebar-right>.main{grid-column:1 / 2;border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:inherit;border-bottom-left-radius:inherit}.bslib-sidebar-layout.sidebar-right>.sidebar{grid-column:2 / 3;border-right:none;border-left:var(--_vert-border);border-top-left-radius:0;border-bottom-left-radius:0}.bslib-sidebar-layout.sidebar-right>.collapse-toggle{grid-column:2 / 3;left:var(--_icon-size);right:unset;border:var(--bslib-collapse-toggle-border)}.bslib-sidebar-layout.sidebar-right>.collapse-toggle>.collapse-icon{transform:rotateY(var(--_toggle-right-transform))}.bslib-sidebar-layout.transitioning>.sidebar>.sidebar-content{display:none}.bslib-sidebar-layout.sidebar-collapsed{--_toggle-transform: 180deg;--_toggle-right-transform: 0deg;--_vert-border: none;grid-template-columns:0 minmax(0, 1fr)}.bslib-sidebar-layout.sidebar-collapsed.sidebar-right{grid-template-columns:minmax(0, 1fr) 0}.bslib-sidebar-layout.sidebar-collapsed:not(.transitioning)>.sidebar>*{display:none}.bslib-sidebar-layout.sidebar-collapsed>.main{border-radius:inherit;padding-left:var(--_padding-icon);padding-right:var(--_padding-icon)}.bslib-sidebar-layout.sidebar-collapsed>.collapse-toggle{color:var(--_main-fg);top:var(--_toggle-position-y);right:var(--_toggle-position-x)}.bslib-sidebar-layout.sidebar-collapsed.sidebar-right>.collapse-toggle{left:var(--_toggle-position-x);right:unset}.bslib-sidebar-layout .bslib-sidebar-resize-handle{position:absolute;top:0;bottom:0;width:var(--_resize-handle-width);left:calc(calc(-1 * var(--_resize-handle-width)) - 2px);grid-column:2;cursor:ew-resize;user-select:none;z-index:calc(1000 + 1)}.bslib-sidebar-layout .bslib-sidebar-resize-handle::before{content:"";position:absolute;top:0;bottom:0;left:0;right:calc(-1 * var(--_resize-handle-width) - 2px);z-index:calc(1000 + 1)}.bslib-sidebar-layout .bslib-sidebar-resize-handle .resize-indicator{position:absolute;top:50%;right:2px;width:2px;height:30px;transform:translate(-50%, -50%);background-color:var(--_resize-indicator-color);opacity:0.1;border-radius:1px;transition:all 0.15s ease}.bslib-sidebar-layout .bslib-sidebar-resize-handle:hover .resize-indicator,.bslib-sidebar-layout .bslib-sidebar-resize-handle:focus .resize-indicator,.bslib-sidebar-layout .bslib-sidebar-resize-handle:active .resize-indicator,.bslib-sidebar-layout .bslib-sidebar-resize-handle:focus .resize-indicator{opacity:1}.bslib-sidebar-layout .bslib-sidebar-resize-handle:hover .resize-indicator,.bslib-sidebar-layout .bslib-sidebar-resize-handle:focus .resize-indicator{width:3px;height:40px}.bslib-sidebar-layout .bslib-sidebar-resize-handle:active .resize-indicator{background-color:var(--_resize-indicator-color-active);width:4px;height:50px}.bslib-sidebar-layout .bslib-sidebar-resize-handle:focus{outline:none}.bslib-sidebar-layout .bslib-sidebar-resize-handle:focus .resize-indicator{outline:2px solid var(--bs-focus-ring-color, rgba(13,110,253,0.25));outline-offset:2px}.bslib-sidebar-layout.sidebar-right>.bslib-sidebar-resize-handle{left:2px}.bslib-sidebar-layout.transitioning>.bslib-sidebar-resize-handle,.bslib-sidebar-layout.sidebar-collapsed>.bslib-sidebar-resize-handle{display:none}.bslib-sidebar-layout.sidebar-resizing{user-select:none}.bslib-sidebar-layout.sidebar-resizing>.bslib-sidebar-resize-handle .resize-indicator{background-color:var(--_resize-indicator-color-active);width:4px;height:50px}.bslib-sidebar-layout{--bslib-sidebar-js-window-size: desktop}@media (max-width: 575.98px){.bslib-sidebar-layout{--bslib-sidebar-js-window-size: mobile}.bslib-sidebar-layout .bslib-sidebar-resize-handle{display:none !important}}@media (min-width: 576px){.bslib-sidebar-layout[data-collapsible-desktop="false"]{--_padding-icon: var(--_padding)}.bslib-sidebar-layout[data-collapsible-desktop="false"]>.collapse-toggle{display:none}.bslib-sidebar-layout[data-collapsible-desktop="false"]>.sidebar[hidden]{display:block !important}.bslib-sidebar-layout[data-collapsible-desktop="false"]>.sidebar[hidden]>.sidebar-content{display:flex !important}}@media (max-width: 575.98px){.bslib-sidebar-layout>.sidebar,.bslib-sidebar-layout.sidebar-right>.sidebar{border:none}.bslib-sidebar-layout>.main,.bslib-sidebar-layout.sidebar-right>.main{grid-column:1 / 3}.bslib-sidebar-layout[data-collapsible-mobile="true"]{grid-template-rows:calc(var(--_icon-button-size) + var(--_padding)) 1fr;grid-template-columns:100% 0}.bslib-sidebar-layout[data-collapsible-mobile="true"]>.collapse-toggle{grid-row:1 / 2}.bslib-sidebar-layout[data-collapsible-mobile="true"]>.main{grid-row:2 / 3}.bslib-sidebar-layout[data-collapsible-mobile="true"]>.sidebar{grid-row:1 / 3}.bslib-sidebar-layout[data-collapsible-mobile="true"]:not(.sidebar-collapsed)>.sidebar,.bslib-sidebar-layout[data-collapsible-mobile="true"].transitioning>.sidebar{z-index:1045}.bslib-sidebar-layout[data-collapsible-mobile="true"]:not(.sidebar-collapsed)>.collapse-toggle,.bslib-sidebar-layout[data-collapsible-mobile="true"].transitioning>.collapse-toggle{z-index:1045}.bslib-sidebar-layout[data-collapsible-mobile="true"]>.collapse-toggle{top:unset;position:relative;align-self:center}.bslib-sidebar-layout[data-collapsible-mobile="true"]:not(.sidebar-right)>.collapse-toggle{left:var(--_icon-size);right:unset;justify-self:left}.bslib-sidebar-layout[data-collapsible-mobile="true"].sidebar-right>.collapse-toggle{right:var(--_icon-size);left:unset;justify-self:right}.bslib-sidebar-layout[data-collapsible-mobile="true"]>.sidebar{opacity:var(--_sidebar-mobile-opacity, 1);max-width:var(--_sidebar-mobile-max-width, 100%);box-shadow:var(--_sidebar-mobile-box-shadow)}.bslib-sidebar-layout[data-collapsible-mobile="true"]>.sidebar{margin:0;padding-top:var(--_padding-icon)}.bslib-sidebar-layout[data-collapsible-mobile="true"]>.sidebar>.sidebar-content{padding-top:0;height:100%;overflow-y:auto}.bslib-sidebar-layout[data-collapsible-mobile="true"]:not(.sidebar-right)>.sidebar{margin-right:auto}.bslib-sidebar-layout[data-collapsible-mobile="true"].sidebar-right>.sidebar{margin-left:auto}.bslib-sidebar-layout[data-collapsible-mobile="true"].sidebar-right{grid-template-columns:0 100%}.bslib-sidebar-layout[data-collapsible-mobile="true"].sidebar-collapsed{grid-template-columns:0 100%}.bslib-sidebar-layout[data-collapsible-mobile="true"].sidebar-collapsed.sidebar-right{grid-template-columns:100% 0}.bslib-sidebar-layout[data-collapsible-mobile="true"]>.main{padding-top:1px;padding-left:var(--_padding);padding-right:var(--_padding)}.bslib-sidebar-layout[data-collapsible-mobile="true"]>.main{opacity:var(--_main-mobile-expanded-opacity);transition:opacity var(--_transition-easing-x) var(--_transition-duration)}.bslib-sidebar-layout[data-collapsible-mobile="true"].sidebar-collapsed>.main{opacity:1}.bslib-sidebar-layout[data-collapsible-mobile="true"]>.main{background-color:none}.bslib-sidebar-layout[data-collapsible-mobile="true"],.bslib-sidebar-layout[data-collapsible-mobile="true"].sidebar-collapsed{background-color:var(--_main-bg)}}@media (max-width: 575.98px){.bslib-sidebar-layout[data-collapsible-mobile="false"]{display:block !important;--_padding-icon: var(--_padding);--_vert-border: var(--_border)}.bslib-sidebar-layout[data-collapsible-mobile="false"]>.sidebar[hidden]{display:block !important}.bslib-sidebar-layout[data-collapsible-mobile="false"]>.sidebar[hidden]>.sidebar-content{display:flex !important}.bslib-sidebar-layout[data-collapsible-mobile="false"]>.sidebar{max-height:var(--_mobile-max-height);overflow-y:auto}.bslib-sidebar-layout[data-collapsible-mobile="false"][data-open-mobile="always"]>.sidebar{border-top:var(--_vert-border)}.bslib-sidebar-layout[data-collapsible-mobile="false"][data-open-mobile="always-above"]>.sidebar{border-bottom:var(--_vert-border)}.bslib-sidebar-layout[data-collapsible-mobile="false"]>.collapse-toggle{display:none}}html[data-bslib-sidebar-resizing="true"]{cursor:ew-resize !important;user-select:none !important}.toast{--bslib-toast-shadow: var(--bs-box-shadow);box-shadow:var(--bslib-toast-shadow);position:relative;overflow:hidden}.toast-body:empty{display:none}.text-bg-primary.toast .toast-body .btn-close,.text-bg-secondary.toast .toast-body .btn-close,.text-bg-success.toast .toast-body .btn-close,.text-bg-info.toast .toast-body .btn-close,.text-bg-warning.toast .toast-body .btn-close,.text-bg-danger.toast .toast-body .btn-close,.text-bg-dark.toast .toast-body .btn-close,.text-white.toast .toast-body .btn-close,.text-light.toast .toast-body .btn-close{filter:var(--bs-btn-close-white-filter)}@keyframes bslib-toast-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}.bslib-toast-progress-bar{position:absolute;top:0;left:0;height:2px;width:100%;pointer-events:none;z-index:1;transform-origin:left;border-radius:inherit;pointer-events:none;background-color:currentColor}.bslib-value-box{container-name:bslib-value-box;container-type:inline-size}.bslib-value-box.default{--bslib-value-box-bg-default: var(--bs-card-bg, #fff);--bslib-value-box-border-color-default: var(--bs-card-border-color, var(--bs-border-color-translucent));color:var(--bslib-value-box-color, var(--bs-body-color));background-color:var(--bslib-value-box-bg, var(--bslib-value-box-bg-default));border-color:var(--bslib-value-box-border-color, var(--bslib-value-box-border-color-default))}.bslib-value-box .value-box-grid{display:grid;grid-template-areas:"left right";align-items:center;overflow:hidden}.bslib-value-box .value-box-showcase{height:100%;max-height:var(---bslib-value-box-showcase-max-h, 100%)}.bslib-value-box .value-box-showcase,.bslib-value-box .value-box-showcase>.html-fill-item{width:100%}.bslib-value-box[data-full-screen="true"] .value-box-showcase{max-height:var(---bslib-value-box-showcase-max-h-fs, 100%)}@media screen and (min-width: 575.98px){@container bslib-value-box (max-width: 300px){.bslib-value-box:not(.showcase-bottom) .value-box-grid{grid-template-columns:1fr !important;grid-template-rows:auto auto;grid-template-areas:"top" "bottom"}.bslib-value-box:not(.showcase-bottom) .value-box-grid .value-box-showcase{grid-area:top !important}.bslib-value-box:not(.showcase-bottom) .value-box-grid .value-box-area{grid-area:bottom !important;justify-content:end}}}.bslib-value-box .value-box-area{justify-content:center;padding:1.5rem 1rem;font-size:.9rem;font-weight:500}.bslib-value-box .value-box-area *{margin-bottom:0;margin-top:0}.bslib-value-box .value-box-title{font-size:1rem;margin-top:0;margin-bottom:.5rem;font-weight:400;line-height:1.2}.bslib-value-box .value-box-title:empty::after{content:'\00a0 '}.bslib-value-box .value-box-value{font-size:calc(1.325rem + .9vw);margin-top:0;margin-bottom:.5rem;font-weight:400;line-height:1.2}@media (min-width: 1200px){.bslib-value-box .value-box-value{font-size:2rem}}.bslib-value-box .value-box-value:empty::after{content:'\00a0 '}.bslib-value-box .value-box-showcase{align-items:center;justify-content:center;margin-top:auto;margin-bottom:auto;padding:1rem}.bslib-value-box .value-box-showcase .bi,.bslib-value-box .value-box-showcase .fa,.bslib-value-box .value-box-showcase .fab,.bslib-value-box .value-box-showcase .fas,.bslib-value-box .value-box-showcase .far{opacity:.85;min-width:50px;max-width:125%}.bslib-value-box .value-box-showcase .bi,.bslib-value-box .value-box-showcase .fa,.bslib-value-box .value-box-showcase .fab,.bslib-value-box .value-box-showcase .fas,.bslib-value-box .value-box-showcase .far{font-size:4rem}.bslib-value-box.showcase-top-right .value-box-grid{grid-template-columns:1fr var(---bslib-value-box-showcase-w, 50%)}.bslib-value-box.showcase-top-right .value-box-grid .value-box-showcase{grid-area:right;margin-left:auto;align-self:start;align-items:end;padding-left:0;padding-bottom:0}.bslib-value-box.showcase-top-right .value-box-grid .value-box-area{grid-area:left;align-self:end}.bslib-value-box.showcase-top-right[data-full-screen="true"] .value-box-grid{grid-template-columns:auto var(---bslib-value-box-showcase-w-fs, 1fr)}.bslib-value-box.showcase-top-right[data-full-screen="true"] .value-box-grid>div{align-self:center}.bslib-value-box.showcase-top-right:not([data-full-screen="true"]) .value-box-showcase{margin-top:0}@container bslib-value-box (max-width: 300px){.bslib-value-box.showcase-top-right:not([data-full-screen="true"]) .value-box-grid .value-box-showcase{padding-left:1rem}}.bslib-value-box.showcase-left-center .value-box-grid{grid-template-columns:var(---bslib-value-box-showcase-w, 30%) auto}.bslib-value-box.showcase-left-center[data-full-screen="true"] .value-box-grid{grid-template-columns:var(---bslib-value-box-showcase-w-fs, 1fr) auto}.bslib-value-box.showcase-left-center:not([data-fill-screen="true"]) .value-box-grid .value-box-showcase{grid-area:left}.bslib-value-box.showcase-left-center:not([data-fill-screen="true"]) .value-box-grid .value-box-area{grid-area:right}.bslib-value-box.showcase-bottom .value-box-grid{grid-template-columns:1fr;grid-template-rows:1fr var(---bslib-value-box-showcase-h, auto);grid-template-areas:"top" "bottom";overflow:hidden}.bslib-value-box.showcase-bottom .value-box-grid .value-box-showcase{grid-area:bottom;padding:0;margin:0}.bslib-value-box.showcase-bottom .value-box-grid .value-box-area{grid-area:top}.bslib-value-box.showcase-bottom[data-full-screen="true"] .value-box-grid{grid-template-rows:1fr var(---bslib-value-box-showcase-h-fs, 2fr)}.bslib-value-box.showcase-bottom[data-full-screen="true"] .value-box-grid .value-box-showcase{padding:1rem} diff --git a/inst/components/dist/components.js b/inst/components/dist/components.js index 03b007023..b731547ae 100644 --- a/inst/components/dist/components.js +++ b/inst/components/dist/components.js @@ -1,4 +1,4 @@ -/*! bslib 0.9.0.9000 | (c) 2012-2025 RStudio, PBC. | License: MIT + file LICENSE */ +/*! bslib 0.9.0.9002 | (c) 2012-2025 RStudio, PBC. | License: MIT + file LICENSE */ "use strict"; (() => { var __getOwnPropNames = Object.getOwnPropertyNames; @@ -62,6 +62,17 @@ ); } } + function showShinyClientMessage({ + headline = "", + message, + status = "warning" + }) { + document.dispatchEvent( + new CustomEvent("shiny:client-message", { + detail: { headline, message, status } + }) + ); + } function hasDefinedProperty(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop) && obj[prop] !== void 0; } @@ -1780,6 +1791,305 @@ } }); + // srcts/src/components/toast.ts + function showToast(message) { + return __async(this, null, function* () { + var _a, _b; + const { html, deps, autohide, duration, position, id } = message; + if (!window.bootstrap || !window.bootstrap.Toast) { + showShinyClientMessage({ + headline: "Bootstrap 5 Required", + message: "Toast notifications require Bootstrap 5.", + status: "error" + }); + return; + } + const existingToastEl = document.getElementById(id); + if (existingToastEl) { + const existingInstance = toastInstances.get(existingToastEl); + if (existingInstance) { + existingInstance.hide(); + toastInstances.delete(existingToastEl); + } + (_b = (_a = window == null ? void 0 : window.Shiny) == null ? void 0 : _a.unbindAll) == null ? void 0 : _b.call(_a, existingToastEl); + existingToastEl.remove(); + } + const toaster = toasterManager.getOrCreateToaster(position); + yield shinyRenderContent(toaster, { html, deps }, "beforeEnd"); + const toastEl = document.getElementById(id); + if (!toastEl) { + showShinyClientMessage({ + headline: "Toast Creation Failed", + message: `Failed to create toast with id "${id}".`, + status: "error" + }); + return; + } + const toastInstance = new BslibToastInstance(toastEl, { autohide, duration }); + toastInstances.set(toastEl, toastInstance); + toastInstance.show(); + toastEl.addEventListener("hidden.bs.toast", () => { + var _a2, _b2; + (_b2 = (_a2 = window == null ? void 0 : window.Shiny) == null ? void 0 : _a2.unbindAll) == null ? void 0 : _b2.call(_a2, toastEl); + toastEl.remove(); + toastInstances.delete(toastEl); + if (toaster.children.length === 0) { + toaster.remove(); + } + }); + }); + } + function hideToast(message) { + const { id } = message; + const toastEl = document.getElementById(id); + if (!toastEl) { + showShinyClientMessage({ + headline: "Toast Not Found", + message: `No toast with id "${id}" was found.`, + status: "warning" + }); + return; + } + const toastInstance = toastInstances.get(toastEl); + if (toastInstance) { + toastInstance.hide(); + } + } + var bootstrapToast, ToasterManager, toasterManager, BslibToastInstance, toastInstances; + var init_toast = __esm({ + "srcts/src/components/toast.ts"() { + "use strict"; + init_shinyAddCustomMessageHandlers(); + init_utils(); + bootstrapToast = window.bootstrap ? window.bootstrap.Toast : class { + }; + ToasterManager = class { + constructor() { + this.containers = /* @__PURE__ */ new Map(); + } + /** + * Gets an existing toaster for the position or creates a new one. + * + * @param position - The toast position (e.g., "top-right", "bottom-center") + * @returns The DOM container element for the specified position + */ + getOrCreateToaster(position) { + let toaster = this.containers.get(position); + if (!toaster || !document.body.contains(toaster)) { + toaster = ToasterManager._createToaster(position); + document.body.appendChild(toaster); + this.containers.set(position, toaster); + } + return toaster; + } + /** + * Creates a new toast container (toaster) DOM element for the specified + * position. + * + * @param position - The toast position to create a container for + * @returns A new DOM container element positioned and styled for toasts + * @private + */ + static _createToaster(position) { + const toaster = document.createElement("div"); + toaster.className = "toast-container position-fixed p-1 p-md-2"; + toaster.setAttribute("data-bslib-toast-container", position); + toaster.classList.add(...ToasterManager._positionClasses(position)); + return toaster; + } + /** + * Maps toast positions to their corresponding Bootstrap utility classes. + * + * @param position - The toast position + * @returns Array of CSS class names for positioning the container + * @private + */ + static _positionClasses(position) { + const classMap = { + // eslint-disable-next-line @typescript-eslint/naming-convention + "top-left": ["top-0", "start-0"], + // eslint-disable-next-line @typescript-eslint/naming-convention + "top-center": ["top-0", "start-50", "translate-middle-x"], + // eslint-disable-next-line @typescript-eslint/naming-convention + "top-right": ["top-0", "end-0"], + // eslint-disable-next-line @typescript-eslint/naming-convention + "middle-left": ["top-50", "start-0", "translate-middle-y"], + // eslint-disable-next-line @typescript-eslint/naming-convention + "middle-center": ["top-50", "start-50", "translate-middle"], + // eslint-disable-next-line @typescript-eslint/naming-convention + "middle-right": ["top-50", "end-0", "translate-middle-y"], + // eslint-disable-next-line @typescript-eslint/naming-convention + "bottom-left": ["bottom-0", "start-0"], + // eslint-disable-next-line @typescript-eslint/naming-convention + "bottom-center": ["bottom-0", "start-50", "translate-middle-x"], + // eslint-disable-next-line @typescript-eslint/naming-convention + "bottom-right": ["bottom-0", "end-0"] + }; + return classMap[position]; + } + }; + toasterManager = new ToasterManager(); + BslibToastInstance = class { + constructor(element, options) { + this.progressBar = null; + this.timeStart = 0; + this.timeRemaining = 0; + this.hideTimeoutId = null; + this.isPaused = false; + this.isPointerOver = false; + this.hasFocus = false; + this.element = element; + this.timeRemaining = options.duration || 5e3; + const bsOptions = { animation: true, autohide: false }; + this.bsToast = new bootstrapToast(element, bsOptions); + if (options.autohide) { + this._addProgressBar(); + this._setupInteractionPause(); + } + } + /** + * Shows the toast notification. + */ + show() { + this.bsToast.show(); + } + /** + * Hides the toast notification. + */ + hide() { + if (this.hideTimeoutId !== null) { + clearTimeout(this.hideTimeoutId); + this.hideTimeoutId = null; + } + this.bsToast.hide(); + } + /** + * Adds an animated progress bar to the toast element. + * @private + */ + _addProgressBar() { + this.progressBar = document.createElement("div"); + this.progressBar.className = "bslib-toast-progress-bar"; + this.progressBar.style.cssText = ` + animation: bslib-toast-progress ${this.timeRemaining}ms linear forwards; + animation-play-state: running; + `; + const toastHeader = this.element.querySelector(".toast-header"); + if (toastHeader) { + toastHeader.insertBefore(this.progressBar, toastHeader.firstChild); + } else { + this.element.insertBefore(this.progressBar, this.element.firstChild); + } + } + /** + * Sets up interaction-based pause behavior for autohiding toasts. + * Pauses auto-hide when user interacts via pointer (mouse/touch) or keyboard focus. + * @private + */ + _setupInteractionPause() { + this.timeStart = Date.now(); + this._startHideTimeout(this.timeRemaining); + this.element.addEventListener( + "pointerenter", + () => this._handlePointerEnter() + ); + this.element.addEventListener( + "pointerleave", + () => this._handlePointerLeave() + ); + this.element.addEventListener("focusin", () => this._handleFocusIn()); + this.element.addEventListener("focusout", () => this._handleFocusOut()); + } + /** + * Handles pointer enter event - pauses the auto-hide timer. + * @private + */ + _handlePointerEnter() { + this.isPointerOver = true; + this._pause(); + } + /** + * Handles pointer leave event - resumes the auto-hide timer if not focused. + * @private + */ + _handlePointerLeave() { + this.isPointerOver = false; + if (!this.hasFocus) { + this._resume(); + } + } + /** + * Handles focus in event - pauses the auto-hide timer. + * @private + */ + _handleFocusIn() { + this.hasFocus = true; + this._pause(); + } + /** + * Handles focus out event - resumes the auto-hide timer if pointer not over. + * @private + */ + _handleFocusOut() { + this.hasFocus = false; + if (!this.isPointerOver) { + this._resume(); + } + } + /** + * Pauses the auto-hide timer and progress bar animation. + * @private + */ + _pause() { + if (this.isPaused) + return; + this.isPaused = true; + const elapsed = Date.now() - this.timeStart; + this.timeRemaining = Math.max(100, this.timeRemaining - elapsed); + if (this.hideTimeoutId !== null) { + clearTimeout(this.hideTimeoutId); + } + if (this.progressBar) { + this.progressBar.style.animationPlayState = "paused"; + } + } + /** + * Resumes the auto-hide timer and progress bar animation. + * @private + */ + _resume() { + if (!this.isPaused) + return; + this.isPaused = false; + this.timeStart = Date.now(); + this._startHideTimeout(this.timeRemaining); + if (this.progressBar) { + this.progressBar.style.animationPlayState = "running"; + } + } + /** + * Starts or restarts the hide timeout. + * @private + */ + _startHideTimeout(delay) { + if (this.hideTimeoutId !== null) { + clearTimeout(this.hideTimeoutId); + } + this.hideTimeoutId = window.setTimeout(() => { + this.bsToast.hide(); + }, delay); + } + }; + toastInstances = /* @__PURE__ */ new WeakMap(); + shinyAddCustomMessageHandlers({ + // eslint-disable-next-line @typescript-eslint/naming-convention + "bslib.show-toast": showToast, + // eslint-disable-next-line @typescript-eslint/naming-convention + "bslib.hide-toast": hideToast + }); + } + }); + // srcts/src/components/index.ts var require_components = __commonJS({ "srcts/src/components/index.ts"(exports) { @@ -1788,6 +2098,7 @@ init_sidebar(); init_taskButton(); init_submitTextArea(); + init_toast(); init_utils(); init_shinyAddCustomMessageHandlers(); var bslibMessageHandlers = { diff --git a/inst/components/dist/components.js.map b/inst/components/dist/components.js.map index c83c7fc36..ccd178d64 100644 --- a/inst/components/dist/components.js.map +++ b/inst/components/dist/components.js.map @@ -1,7 +1,7 @@ { "version": 3, - "sources": ["../../../srcts/src/components/_utils.ts", "../../../srcts/src/components/accordion.ts", "../../../srcts/src/components/_shinyResizeObserver.ts", "../../../srcts/src/components/_shinyRemovedObserver.ts", "../../../srcts/src/components/card.ts", "../../../srcts/src/components/sidebar.ts", "../../../srcts/src/components/taskButton.ts", "../../../srcts/src/components/submitTextArea.ts", "../../../srcts/src/components/_shinyAddCustomMessageHandlers.ts", "../../../srcts/src/components/index.ts"], - "sourcesContent": ["import type { HtmlDep } from \"rstudio-shiny/srcts/types/src/shiny/render\";\n\nimport type { InputBinding as InputBindingType } from \"rstudio-shiny/srcts/types/src/bindings/input\";\n\nimport type { ShinyClass } from \"rstudio-shiny/srcts/types/src\";\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nconst Shiny: ShinyClass | undefined = window.Shiny;\n\n// Exclude undefined from T\ntype NotUndefined = T extends undefined ? never : T;\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nconst InputBinding = (\n Shiny ? Shiny.InputBinding : class {}\n) as typeof InputBindingType;\n\nfunction registerBinding(\n inputBindingClass: new () => InputBindingType,\n name: string\n): void {\n if (Shiny) {\n Shiny.inputBindings.register(new inputBindingClass(), \"bslib.\" + name);\n }\n}\n\nfunction registerBslibGlobal(name: string, value: object): void {\n (window as any).bslib = (window as any).bslib || {};\n if (!(window as any).bslib[name]) {\n (window as any).bslib[name] = value;\n } else {\n console.error(\n `[bslib] Global window.bslib.${name} was already defined, using previous definition.`\n );\n }\n}\n\ntype ShinyClientMessage = {\n message: string;\n headline?: string;\n status?: \"error\" | \"info\" | \"warning\";\n};\n\nfunction showShinyClientMessage({\n headline = \"\",\n message,\n status = \"warning\",\n}: ShinyClientMessage): void {\n document.dispatchEvent(\n new CustomEvent(\"shiny:client-message\", {\n detail: { headline: headline, message: message, status: status },\n })\n );\n}\n\n// Return true if the key exists on the object and the value is not undefined.\n//\n// This method is mainly used in input bindings' `receiveMessage` method.\n// Since we know that the values are sent by Shiny via `{jsonlite}`,\n// then we know that there are no `undefined` values. `null` is possible, but not `undefined`.\nfunction hasDefinedProperty<\n Prop extends keyof X,\n X extends { [key: string]: any }\n>(\n obj: X,\n prop: Prop\n): obj is X & { [key in NonNullable]: NotUndefined } {\n return (\n Object.prototype.hasOwnProperty.call(obj, prop) && obj[prop] !== undefined\n );\n}\n\n// TODO: Shiny should trigger resize events when the output\n// https://github.com/rstudio/shiny/pull/3682\nfunction doWindowResizeOnElementResize(el: HTMLElement): void {\n if ($(el).data(\"window-resize-observer\")) {\n return;\n }\n const resizeEvent = new Event(\"resize\");\n const ro = new ResizeObserver(() => {\n window.dispatchEvent(resizeEvent);\n });\n ro.observe(el);\n $(el).data(\"window-resize-observer\", ro);\n}\n\nfunction getAllFocusableChildren(el: HTMLElement): HTMLElement[] {\n // Cross-referenced with https://allyjs.io/data-tables/focusable.html\n const base = [\n \"a[href]\",\n \"area[href]\",\n \"button\",\n \"details summary\",\n \"input\",\n \"iframe\",\n \"select\",\n \"textarea\",\n '[contentEditable=\"\"]',\n '[contentEditable=\"true\"]',\n '[contentEditable=\"TRUE\"]',\n \"[tabindex]\",\n ];\n const modifiers = [':not([tabindex=\"-1\"])', \":not([disabled])\"];\n const selectors = base.map((b) => b + modifiers.join(\"\"));\n const focusable = el.querySelectorAll(selectors.join(\", \"));\n return Array.from(focusable) as HTMLElement[];\n}\n\nasync function shinyRenderContent(\n ...args: Parameters\n): Promise {\n if (!Shiny) {\n throw new Error(\"This function must be called in a Shiny app.\");\n }\n if (Shiny.renderContentAsync) {\n return await Shiny.renderContentAsync.apply(null, args);\n } else {\n return await Shiny.renderContent.apply(null, args);\n }\n}\n\n// Copied from shiny utils\nasync function updateLabel(\n labelContent: string | { html: string; deps: HtmlDep[] } | undefined,\n labelNode: JQuery\n): Promise {\n // Only update if label was specified in the update method\n if (typeof labelContent === \"undefined\") return;\n if (labelNode.length !== 1) {\n throw new Error(\"labelNode must be of length 1\");\n }\n\n if (typeof labelContent === \"string\") {\n labelContent = {\n html: labelContent,\n deps: [],\n };\n }\n\n if (labelContent.html === \"\") {\n labelNode.addClass(\"shiny-label-null\");\n } else {\n await shinyRenderContent(labelNode, labelContent);\n labelNode.removeClass(\"shiny-label-null\");\n }\n}\n\nexport {\n InputBinding,\n registerBinding,\n registerBslibGlobal,\n hasDefinedProperty,\n doWindowResizeOnElementResize,\n getAllFocusableChildren,\n shinyRenderContent,\n showShinyClientMessage,\n Shiny,\n updateLabel,\n};\nexport type { HtmlDep, ShinyClientMessage };\n", "import type { HtmlDep } from \"./_utils\";\nimport {\n InputBinding,\n registerBinding,\n hasDefinedProperty,\n shinyRenderContent,\n} from \"./_utils\";\n\ntype AccordionItem = {\n item: HTMLElement;\n value: string;\n isOpen: () => boolean;\n show: () => void;\n hide: () => void;\n};\n\ntype HTMLContent = {\n html: string;\n deps?: HtmlDep[];\n};\n\ntype SetMessage = {\n method: \"set\";\n values: string[];\n};\n\ntype OpenMessage = {\n method: \"open\";\n values: string[] | true;\n};\n\ntype CloseMessage = {\n method: \"close\";\n values: string[] | true;\n};\n\ntype InsertMessage = {\n method: \"insert\";\n panel: HTMLContent;\n target: string;\n position: \"after\" | \"before\";\n};\n\ntype RemoveMessage = {\n method: \"remove\";\n target: string[];\n};\n\ntype UpdateMessage = {\n method: \"update\";\n target: string;\n value: string;\n body: HTMLContent;\n title: HTMLContent;\n icon: HTMLContent;\n};\n\ntype MessageData =\n | CloseMessage\n | InsertMessage\n | OpenMessage\n | RemoveMessage\n | SetMessage\n | UpdateMessage;\n\nclass AccordionInputBinding extends InputBinding {\n find(scope: HTMLElement) {\n return $(scope).find(\".accordion.bslib-accordion-input\");\n }\n\n getValue(el: HTMLElement): string[] | null {\n const items = this._getItemInfo(el);\n const selected = items.filter((x) => x.isOpen()).map((x) => x.value);\n return selected.length === 0 ? null : selected;\n }\n\n subscribe(el: HTMLElement, callback: (x: boolean) => void) {\n $(el).on(\n \"shown.bs.collapse.accordionInputBinding hidden.bs.collapse.accordionInputBinding\",\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n function (event) {\n callback(true);\n }\n );\n }\n\n unsubscribe(el: HTMLElement) {\n $(el).off(\".accordionInputBinding\");\n }\n\n async receiveMessage(el: HTMLElement, data: MessageData) {\n const method = data.method;\n if (method === \"set\") {\n this._setItems(el, data);\n } else if (method === \"open\") {\n this._openItems(el, data);\n } else if (method === \"close\") {\n this._closeItems(el, data);\n } else if (method === \"remove\") {\n this._removeItem(el, data);\n } else if (method === \"insert\") {\n await this._insertItem(el, data);\n } else if (method === \"update\") {\n await this._updateItem(el, data);\n } else {\n throw new Error(`Method not yet implemented: ${method}`);\n }\n }\n\n protected _setItems(el: HTMLElement, data: SetMessage) {\n const items = this._getItemInfo(el);\n const vals = this._getValues(el, items, data.values);\n items.forEach((x) => {\n vals.indexOf(x.value) > -1 ? x.show() : x.hide();\n });\n }\n\n protected _openItems(el: HTMLElement, data: OpenMessage) {\n const items = this._getItemInfo(el);\n const vals = this._getValues(el, items, data.values);\n items.forEach((x) => {\n if (vals.indexOf(x.value) > -1) x.show();\n });\n }\n\n protected _closeItems(el: HTMLElement, data: CloseMessage) {\n const items = this._getItemInfo(el);\n const vals = this._getValues(el, items, data.values);\n items.forEach((x) => {\n if (vals.indexOf(x.value) > -1) x.hide();\n });\n }\n\n protected async _insertItem(el: HTMLElement, data: InsertMessage) {\n let targetItem = this._findItem(el, data.target);\n\n // If no target was specified, or the target was not found, then default\n // to the first or last item, depending on the position\n if (!targetItem) {\n targetItem = (\n data.position === \"before\" ? el.firstElementChild : el.lastElementChild\n ) as HTMLElement;\n }\n\n const panel = data.panel;\n\n // If there is still no targetItem, then there are no items in the accordion\n if (targetItem) {\n await shinyRenderContent(\n targetItem,\n panel,\n data.position === \"before\" ? \"beforeBegin\" : \"afterEnd\"\n );\n } else {\n await shinyRenderContent(el, panel);\n }\n\n // Need to add a reference to the parent id that makes autoclose to work\n if (this._isAutoClosing(el)) {\n const val = $(panel.html).attr(\"data-value\");\n $(el)\n .find(`[data-value=\"${val}\"] .accordion-collapse`)\n .attr(\"data-bs-parent\", \"#\" + el.id);\n }\n }\n\n protected _removeItem(el: HTMLElement, data: RemoveMessage) {\n const targetItems = this._getItemInfo(el).filter(\n (x) => data.target.indexOf(x.value) > -1\n );\n\n const unbindAll = window.Shiny?.unbindAll;\n\n targetItems.forEach((x) => {\n if (unbindAll) unbindAll(x.item);\n x.item.remove();\n });\n }\n\n protected async _updateItem(el: HTMLElement, data: UpdateMessage) {\n const target = this._findItem(el, data.target);\n\n if (!target) {\n throw new Error(\n `Unable to find an accordion_panel() with a value of ${data.target}`\n );\n }\n\n if (hasDefinedProperty(data, \"value\")) {\n target.dataset.value = data.value;\n }\n\n if (hasDefinedProperty(data, \"body\")) {\n const body = target.querySelector(\".accordion-body\") as HTMLElement; // always exists\n await shinyRenderContent(body, data.body);\n }\n\n const header = target.querySelector(\".accordion-header\") as HTMLElement; // always exists\n\n if (hasDefinedProperty(data, \"title\")) {\n const title = header.querySelector(\".accordion-title\") as HTMLElement; // always exists\n await shinyRenderContent(title, data.title);\n }\n\n if (hasDefinedProperty(data, \"icon\")) {\n const icon = header.querySelector(\n \".accordion-button > .accordion-icon\"\n ) as HTMLElement; // always exists\n await shinyRenderContent(icon, data.icon);\n }\n }\n\n protected _getItemInfo(el: HTMLElement): AccordionItem[] {\n const items = Array.from(\n el.querySelectorAll(\":scope > .accordion-item\")\n ) as HTMLElement[];\n return items.map((x) => this._getSingleItemInfo(x));\n }\n\n protected _getSingleItemInfo(x: HTMLElement): AccordionItem {\n const collapse = x.querySelector(\".accordion-collapse\") as HTMLElement;\n const isOpen = () => $(collapse).hasClass(\"show\");\n return {\n item: x,\n value: x.dataset.value as string,\n isOpen: isOpen,\n show: () => {\n if (!isOpen()) $(collapse).collapse(\"show\");\n },\n hide: () => {\n if (isOpen()) $(collapse).collapse(\"hide\");\n },\n };\n }\n\n protected _getValues(\n el: HTMLElement,\n items: AccordionItem[],\n values: string[] | true\n ): string[] {\n let vals = values !== true ? values : items.map((x) => x.value);\n const autoclose = this._isAutoClosing(el);\n if (autoclose) {\n vals = vals.slice(vals.length - 1, vals.length);\n }\n return vals;\n }\n\n protected _findItem(el: HTMLElement, value: string): HTMLElement | null {\n return el.querySelector(`[data-value=\"${value}\"]`);\n }\n\n protected _isAutoClosing(el: HTMLElement): boolean {\n return el.classList.contains(\"autoclose\");\n }\n}\n\nregisterBinding(AccordionInputBinding, \"accordion\");\n", "/**\n * A resize observer that ensures Shiny outputs resize during or just after\n * their parent container size changes. Useful, in particular, for sidebar\n * transitions or for full-screen card transitions.\n *\n * @class ShinyResizeObserver\n * @typedef {ShinyResizeObserver}\n */\nclass ShinyResizeObserver {\n /**\n * The actual ResizeObserver instance.\n * @private\n * @type {ResizeObserver}\n */\n private resizeObserver: ResizeObserver;\n /**\n * An array of elements that are currently being watched by the Resize\n * Observer.\n *\n * @details\n * We don't currently have lifecycle hooks that allow us to unobserve elements\n * when they are removed from the DOM. As a result, we need to manually check\n * that the elements we're watching still exist in the DOM. This array keeps\n * track of the elements we're watching so that we can check them later.\n * @private\n * @type {HTMLElement[]}\n */\n private resizeObserverEntries: HTMLElement[];\n\n /**\n * Watch containers for size changes and ensure that Shiny outputs and\n * htmlwidgets within resize appropriately.\n *\n * @details\n * The ShinyResizeObserver is used to watch the containers, such as Sidebars\n * and Cards for size changes, in particular when the sidebar state is toggled\n * or the card body is expanded full screen. It performs two primary tasks:\n *\n * 1. Dispatches a `resize` event on the window object. This is necessary to\n * ensure that Shiny outputs resize appropriately. In general, the window\n * resizing is throttled and the output update occurs when the transition\n * is complete.\n * 2. If an output with a resize method on the output binding is detected, we\n * directly call the `.onResize()` method of the binding. This ensures that\n * htmlwidgets transition smoothly. In static mode, htmlwidgets does this\n * already.\n *\n * @note\n * This resize observer also handles race conditions in some complex\n * fill-based layouts with multiple outputs (e.g., plotly), where shiny\n * initializes with the correct sizing, but in-between the 1st and last\n * renderValue(), the size of the output containers can change, meaning every\n * output but the 1st gets initialized with the wrong size during their\n * renderValue(). Then, after the render phase, shiny won't know to trigger a\n * resize since all the widgets will return to their original size (and thus,\n * Shiny thinks there isn't any resizing to do). The resize observer works\n * around this by ensuring that the output is resized whenever its container\n * size changes.\n * @constructor\n */\n constructor() {\n this.resizeObserverEntries = [];\n this.resizeObserver = new ResizeObserver((entries) => {\n const resizeEvent = new Event(\"resize\");\n window.dispatchEvent(resizeEvent);\n\n // the rest of this callback is only relevant in Shiny apps\n if (!window.Shiny) return;\n\n const resized = [] as HTMLElement[];\n\n for (const entry of entries) {\n if (!(entry.target instanceof HTMLElement)) continue;\n if (!entry.target.querySelector(\".shiny-bound-output\")) continue;\n\n entry.target\n .querySelectorAll(\".shiny-bound-output\")\n .forEach((el) => {\n if (resized.includes(el)) return;\n\n const { binding, onResize } = $(el).data(\"shinyOutputBinding\");\n if (!binding || !binding.resize) return;\n\n // if this output is owned by another observer, skip it\n const owner = (el as any).shinyResizeObserver;\n if (owner && owner !== this) return;\n // mark this output as owned by this shinyResizeObserver instance\n if (!owner) (el as any).shinyResizeObserver = this;\n\n // trigger immediate resizing of outputs with a resize method\n onResize(el);\n // only once per output and resize event\n resized.push(el);\n\n // set plot images to 100% width temporarily during the transition\n if (!el.classList.contains(\"shiny-plot-output\")) return;\n const img = el.querySelector(\n 'img:not([width=\"100%\"])'\n );\n if (img) img.setAttribute(\"width\", \"100%\");\n });\n }\n });\n }\n\n /**\n * Observe an element for size changes.\n * @param {HTMLElement} el - The element to observe.\n */\n observe(el: HTMLElement): void {\n this.resizeObserver.observe(el);\n this.resizeObserverEntries.push(el);\n }\n\n /**\n * Stop observing an element for size changes.\n * @param {HTMLElement} el - The element to stop observing.\n */\n unobserve(el: HTMLElement): void {\n const idxEl = this.resizeObserverEntries.indexOf(el);\n if (idxEl < 0) return;\n\n this.resizeObserver.unobserve(el);\n this.resizeObserverEntries.splice(idxEl, 1);\n }\n\n /**\n * This method checks that we're not continuing to watch elements that no\n * longer exist in the DOM. If any are found, we stop observing them and\n * remove them from our array of observed elements.\n *\n * @private\n * @static\n */\n flush(): void {\n this.resizeObserverEntries.forEach((el) => {\n if (!document.body.contains(el)) this.unobserve(el);\n });\n }\n}\n\nexport { ShinyResizeObserver };\n", "type Callback = (el: T) => void;\n\n/**\n * Watch for the removal of specific elements from regions of the page.\n */\nexport class ShinyRemovedObserver {\n private observer: MutationObserver;\n private watching: Set;\n\n /**\n * Creates a new instance of the `ShinyRemovedObserver` class to watch for the\n * removal of specific elements from part of the DOM.\n *\n * @param selector A CSS selector to identify elements to watch for removal.\n * @param callback The function to be called on a matching element when it\n * is removed.\n */\n constructor(selector: string, callback: Callback) {\n this.watching = new Set();\n this.observer = new MutationObserver((mutations) => {\n const found = new Set();\n for (const { type, removedNodes } of mutations) {\n if (type !== \"childList\") continue;\n if (removedNodes.length === 0) continue;\n\n for (const node of removedNodes) {\n if (!(node instanceof HTMLElement)) continue;\n if (node.matches(selector)) {\n found.add(node);\n }\n if (node.querySelector(selector)) {\n node\n .querySelectorAll(selector)\n .forEach((el) => found.add(el));\n }\n }\n }\n if (found.size === 0) return;\n for (const el of found) {\n try {\n callback(el);\n } catch (e) {\n console.error(e);\n }\n }\n });\n }\n\n /**\n * Starts observing the specified element for removal of its children. If the\n * element is already being observed, no change is made to the mutation\n * observer.\n * @param el The element to observe.\n */\n observe(el: HTMLElement): void {\n const changed = this._flush();\n if (this.watching.has(el)) {\n if (!changed) return;\n } else {\n this.watching.add(el);\n }\n\n if (changed) {\n this._restartObserver();\n } else {\n this.observer.observe(el, { childList: true, subtree: true });\n }\n }\n\n /**\n * Stops observing the specified element for removal.\n * @param el The element to unobserve.\n */\n unobserve(el: HTMLElement): void {\n if (!this.watching.has(el)) return;\n // MutationObserver doesn't have an \"unobserve\" method, so we have to\n // disconnect and re-observe all elements that are still being watched.\n this.watching.delete(el);\n this._flush();\n this._restartObserver();\n }\n\n /**\n * Restarts the mutation observer, observing all elements in the `watching`\n * and implicitly unobserving any elements that are no longer in the\n * watchlist.\n * @private\n */\n private _restartObserver(): void {\n this.observer.disconnect();\n for (const el of this.watching) {\n this.observer.observe(el, { childList: true, subtree: true });\n }\n }\n\n /**\n * Flushes the set of watched elements, removing any elements that are no\n * longer in the DOM, but it does not modify the mutation observer.\n * @private\n * @returns A boolean indicating whether the watched elements have changed.\n */\n private _flush(): boolean {\n let watchedChanged = false;\n const watched = Array.from(this.watching);\n for (const el of watched) {\n if (document.body.contains(el)) continue;\n this.watching.delete(el);\n watchedChanged = true;\n }\n return watchedChanged;\n }\n}\n", "import { getAllFocusableChildren, registerBslibGlobal, Shiny } from \"./_utils\";\nimport { ShinyResizeObserver } from \"./_shinyResizeObserver\";\nimport { ShinyRemovedObserver } from \"./_shinyRemovedObserver\";\n\n/**\n * The overlay element that is placed behind the card when expanded full screen.\n *\n * @interface CardFullScreenOverlay\n * @typedef {CardFullScreenOverlay}\n */\ninterface CardFullScreenOverlay {\n /**\n * The full screen overlay container.\n * @type {HTMLDivElement}\n */\n container: HTMLDivElement;\n /**\n * The anchor element used to close the full screen overlay.\n * @type {HTMLAnchorElement}\n */\n anchor: HTMLAnchorElement;\n}\n\n/**\n * The bslib card component class.\n *\n * @class Card\n * @typedef {Card}\n */\nclass Card {\n /**\n * The card container element.\n * @private\n * @type {HTMLElement}\n */\n private card: HTMLElement;\n /**\n * The card's full screen overlay element. We create this element once and add\n * and remove it from the DOM as needed (this simplifies focus management\n * while in full screen mode).\n * @private\n * @type {CardFullScreenOverlay}\n */\n private overlay: CardFullScreenOverlay;\n\n /**\n * Key bslib-specific classes and attributes used by the card component.\n * @private\n * @static\n */\n private static attr = {\n // eslint-disable-next-line @typescript-eslint/naming-convention\n ATTR_INIT: \"data-bslib-card-init\",\n // eslint-disable-next-line @typescript-eslint/naming-convention\n CLASS_CARD: \"bslib-card\",\n // eslint-disable-next-line @typescript-eslint/naming-convention\n ATTR_FULL_SCREEN: \"data-full-screen\",\n // eslint-disable-next-line @typescript-eslint/naming-convention\n CLASS_HAS_FULL_SCREEN: \"bslib-has-full-screen\",\n // eslint-disable-next-line @typescript-eslint/naming-convention\n CLASS_FULL_SCREEN_ENTER: \"bslib-full-screen-enter\",\n // eslint-disable-next-line @typescript-eslint/naming-convention\n CLASS_FULL_SCREEN_EXIT: \"bslib-full-screen-exit\",\n // eslint-disable-next-line @typescript-eslint/naming-convention\n ID_FULL_SCREEN_OVERLAY: \"bslib-full-screen-overlay\",\n // eslint-disable-next-line @typescript-eslint/naming-convention\n CLASS_SHINY_INPUT: \"bslib-card-input\",\n };\n\n /**\n * A Shiny-specific resize observer that ensures Shiny outputs in within the\n * card resize appropriately.\n * @private\n * @type {ShinyResizeObserver}\n * @static\n */\n private static shinyResizeObserver = new ShinyResizeObserver();\n\n /**\n * Watch card parent containers for removal and exit full screen mode if a\n * full screen card is removed from the DOM.\n *\n * @private\n * @type {ShinyRemovedObserver}\n * @static\n */\n private static cardRemovedObserver = new ShinyRemovedObserver(\n `.${Card.attr.CLASS_CARD}`,\n (el) => {\n const card = Card.getInstance(el);\n if (!card) return;\n if (card.card.getAttribute(Card.attr.ATTR_FULL_SCREEN) === \"true\") {\n card.exitFullScreen();\n }\n }\n );\n\n /**\n * Creates an instance of a bslib Card component.\n *\n * @constructor\n * @param {HTMLElement} card\n */\n constructor(card: HTMLElement) {\n // remove initialization attribute and script\n card.removeAttribute(Card.attr.ATTR_INIT);\n card\n .querySelector(`script[${Card.attr.ATTR_INIT}]`)\n ?.remove();\n\n this.card = card;\n Card.instanceMap.set(card, this);\n\n // Let Shiny know to trigger resize when the card size changes\n // TODO: shiny could/should do this itself (rstudio/shiny#3682)\n Card.shinyResizeObserver.observe(this.card);\n Card.cardRemovedObserver.observe(document.body);\n\n this._addEventListeners();\n this.overlay = this._createOverlay();\n this._setShinyInput();\n\n // bind event handler methods to this card instance\n this._exitFullScreenOnEscape = this._exitFullScreenOnEscape.bind(this);\n this._trapFocusExit = this._trapFocusExit.bind(this);\n }\n\n /**\n * Enter the card's full screen mode, either programmatically or via an event\n * handler. Full screen mode is activated by adding a class to the card that\n * positions it absolutely and expands it to fill the viewport. In addition,\n * we add a full screen overlay element behind the card and we trap focus in\n * the expanded card while in full screen mode.\n *\n * @param {?Event} [event]\n */\n enterFullScreen(event?: Event): void {\n if (event) event.preventDefault();\n\n // Update close anchor to control current expanded card\n if (this.card.id) {\n this.overlay.anchor.setAttribute(\"aria-controls\", this.card.id);\n }\n\n document.addEventListener(\"keydown\", this._exitFullScreenOnEscape, false);\n\n // trap focus in the fullscreen container, listening for Tab key on the\n // capture phase so we have the best chance of preventing other handlers\n document.addEventListener(\"keydown\", this._trapFocusExit, true);\n\n this.card.setAttribute(Card.attr.ATTR_FULL_SCREEN, \"true\");\n document.body.classList.add(Card.attr.CLASS_HAS_FULL_SCREEN);\n this.card.insertAdjacentElement(\"beforebegin\", this.overlay.container);\n\n // Set initial focus on the card, if not already\n if (\n !this.card.contains(document.activeElement) ||\n document.activeElement?.classList.contains(\n Card.attr.CLASS_FULL_SCREEN_ENTER\n )\n ) {\n this.card.setAttribute(\"tabindex\", \"-1\");\n this.card.focus();\n }\n\n this._emitFullScreenEvent(true);\n this._setShinyInput();\n }\n\n /**\n * Exit full screen mode. This removes the full screen overlay element,\n * removes the full screen class from the card, and removes the keyboard event\n * listeners that were added when entering full screen mode.\n */\n exitFullScreen(): void {\n document.removeEventListener(\n \"keydown\",\n this._exitFullScreenOnEscape,\n false\n );\n document.removeEventListener(\"keydown\", this._trapFocusExit, true);\n\n // Remove overlay and remove full screen classes from card\n this.overlay.container.remove();\n this.card.setAttribute(Card.attr.ATTR_FULL_SCREEN, \"false\");\n this.card.removeAttribute(\"tabindex\");\n document.body.classList.remove(Card.attr.CLASS_HAS_FULL_SCREEN);\n\n this._emitFullScreenEvent(false);\n this._setShinyInput();\n }\n\n private _setShinyInput(): void {\n if (!this.card.classList.contains(Card.attr.CLASS_SHINY_INPUT)) return;\n if (!Shiny) return;\n if (!Shiny.setInputValue) {\n // Shiny isn't ready yet, so we'll try to set the input value again later,\n // (but it might not be ready then either, so we'll keep trying).\n setTimeout(() => this._setShinyInput(), 0);\n return;\n }\n const fsAttr = this.card.getAttribute(Card.attr.ATTR_FULL_SCREEN);\n Shiny.setInputValue(this.card.id + \"_full_screen\", fsAttr === \"true\");\n }\n\n /**\n * Emits a custom event to communicate the card's full screen state change.\n * @private\n * @param {boolean} fullScreen\n */\n private _emitFullScreenEvent(fullScreen: boolean): void {\n const event = new CustomEvent(\"bslib.card\", {\n bubbles: true,\n detail: { fullScreen },\n });\n this.card.dispatchEvent(event);\n }\n\n /**\n * Adds general card-specific event listeners.\n * @private\n */\n private _addEventListeners(): void {\n const btnFullScreen = this.card.querySelector(\n `:scope > * > .${Card.attr.CLASS_FULL_SCREEN_ENTER}`\n );\n if (!btnFullScreen) return;\n btnFullScreen.addEventListener(\"click\", (ev) => this.enterFullScreen(ev));\n }\n\n /**\n * An event handler to exit full screen mode when the Escape key is pressed.\n * @private\n * @param {KeyboardEvent} event\n */\n private _exitFullScreenOnEscape(event: KeyboardEvent): void {\n if (!(event.target instanceof HTMLElement)) return;\n // If the user is in the middle of a select input choice, don't exit\n const selOpenSelectInput = [\"select[open]\", \"input[aria-expanded='true']\"];\n if (event.target.matches(selOpenSelectInput.join(\", \"))) return;\n\n if (event.key === \"Escape\") {\n this.exitFullScreen();\n }\n }\n\n /**\n * An event handler to trap focus within the card when in full screen mode.\n *\n * @description\n * This keyboard event handler ensures that tab focus stays within the card\n * when in full screen mode. When the card is first expanded,\n * we move focus to the card element itself. If focus somehow leaves the card,\n * we returns focus to the card container.\n *\n * Within the card, we handle only tabbing from the close anchor or the last\n * focusable element and only when tab focus would have otherwise left the\n * card. In those cases, we cycle focus to the last focusable element or back\n * to the anchor. If the card doesn't have any focusable elements, we move\n * focus to the close anchor.\n *\n * @note\n * Because the card contents may change, we check for focusable elements\n * every time the handler is called.\n *\n * @private\n * @param {KeyboardEvent} event\n */\n private _trapFocusExit(event: KeyboardEvent): void {\n if (!(event instanceof KeyboardEvent)) return;\n if (event.key !== \"Tab\") return;\n\n const isFocusedContainer = event.target === this.card;\n const isFocusedAnchor = event.target === this.overlay.anchor;\n const isFocusedWithin = this.card.contains(event.target as Node);\n\n const stopEvent = () => {\n event.preventDefault();\n event.stopImmediatePropagation();\n };\n\n if (!(isFocusedWithin || isFocusedContainer || isFocusedAnchor)) {\n // If focus is outside the card, return to the card\n stopEvent();\n this.card.focus();\n return;\n }\n\n // Check focusables every time because the card contents may have changed\n // but exclude the full screen enter button from this list of elements\n const focusableElements = getAllFocusableChildren(this.card).filter(\n (el) => !el.classList.contains(Card.attr.CLASS_FULL_SCREEN_ENTER)\n );\n const hasFocusableElements = focusableElements.length > 0;\n\n // We need to handle five cases:\n // 1. The card has no focusable elements --> focus the anchor\n // 2. Focus is on the card container (do nothing, natural tab order)\n // 3. Focus is on the anchor and the user pressed Tab + Shift (backwards)\n // -> Move to the last focusable element (end of card)\n // 4. Focus is on the last focusable element and the user pressed Tab\n // (forwards) -> Move to the anchor (top of card)\n // 5. otherwise we don't interfere\n\n if (!hasFocusableElements) {\n // case 1\n stopEvent();\n this.overlay.anchor.focus();\n return;\n }\n\n // case 2\n if (isFocusedContainer) return;\n\n const lastFocusable = focusableElements[focusableElements.length - 1];\n const isFocusedLast = event.target === lastFocusable;\n\n if (isFocusedAnchor && event.shiftKey) {\n stopEvent();\n lastFocusable.focus();\n return;\n }\n\n if (isFocusedLast && !event.shiftKey) {\n stopEvent();\n this.overlay.anchor.focus();\n return;\n }\n }\n\n /**\n * Creates the full screen overlay.\n * @private\n * @returns {CardFullScreenOverlay}\n */\n private _createOverlay(): CardFullScreenOverlay {\n const container = document.createElement(\"div\");\n container.id = Card.attr.ID_FULL_SCREEN_OVERLAY;\n container.onclick = this.exitFullScreen.bind(this);\n\n const anchor = this._createOverlayCloseAnchor();\n container.appendChild(anchor);\n\n return { container, anchor };\n }\n\n /**\n * Creates the anchor element used to exit the full screen mode.\n * @private\n * @returns {CardFullScreenOverlay[\"anchor\"]}\n */\n private _createOverlayCloseAnchor(): CardFullScreenOverlay[\"anchor\"] {\n const anchor = document.createElement(\"a\");\n anchor.classList.add(Card.attr.CLASS_FULL_SCREEN_EXIT);\n anchor.tabIndex = 0;\n anchor.setAttribute(\"aria-expanded\", \"true\");\n anchor.setAttribute(\"aria-label\", \"Close card\");\n anchor.setAttribute(\"role\", \"button\");\n anchor.onclick = (ev) => {\n this.exitFullScreen();\n ev.stopPropagation();\n };\n anchor.onkeydown = (ev) => {\n if (ev.key === \"Enter\" || ev.key === \" \") {\n this.exitFullScreen();\n }\n };\n anchor.innerHTML = this._overlayCloseHtml();\n\n return anchor;\n }\n\n /**\n * Returns the HTML for the close icon.\n * @private\n * @returns {string}\n */\n private _overlayCloseHtml(): string {\n return (\n \"Close \" +\n \"\" +\n \"\"\n );\n }\n\n /**\n * The registry of card instances and their associated DOM elements.\n * @private\n * @static\n * @type {WeakMap}\n */\n private static instanceMap: WeakMap = new WeakMap();\n\n /**\n * Returns the card instance associated with the given element, if any.\n * @public\n * @static\n * @param {HTMLElement} el\n * @returns {(Card | undefined)}\n */\n public static getInstance(el: HTMLElement): Card | undefined {\n return Card.instanceMap.get(el);\n }\n\n /**\n * If cards are initialized before the DOM is ready, we re-schedule the\n * initialization to occur on DOMContentLoaded.\n * @private\n * @static\n * @type {boolean}\n */\n private static onReadyScheduled = false;\n\n /**\n * Initializes all cards that require initialization on the page, or schedules\n * initialization if the DOM is not yet ready.\n * @public\n * @static\n * @param {boolean} [flushResizeObserver=true]\n */\n public static initializeAllCards(flushResizeObserver = true): void {\n if (document.readyState === \"loading\") {\n if (!Card.onReadyScheduled) {\n Card.onReadyScheduled = true;\n document.addEventListener(\"DOMContentLoaded\", () => {\n Card.initializeAllCards(false);\n });\n }\n return;\n }\n\n if (flushResizeObserver) {\n // Trigger a recheck of observed cards to unobserve non-existent cards\n Card.shinyResizeObserver.flush();\n }\n\n const initSelector = `.${Card.attr.CLASS_CARD}[${Card.attr.ATTR_INIT}]`;\n if (!document.querySelector(initSelector)) {\n // no cards to initialize\n return;\n }\n\n const cards = document.querySelectorAll(initSelector);\n cards.forEach((card) => new Card(card as HTMLElement));\n }\n}\n\n// attach Sidebar class to window for global usage\nregisterBslibGlobal(\"Card\", Card);\n\nexport { Card };\n", "import { InputBinding, registerBinding, registerBslibGlobal } from \"./_utils\";\nimport { ShinyResizeObserver } from \"./_shinyResizeObserver\";\n\n/**\n * Methods for programmatically toggling the state of the sidebar. These methods\n * describe the desired state of the sidebar: `\"close\"` and `\"open\"` transition\n * the sidebar to the desired state, unless the sidebar is already in that\n * state. `\"toggle\"` transitions the sidebar to the state opposite of its\n * current state.\n * @typedef {SidebarToggleMethod}\n */\ntype SidebarToggleMethod = \"close\" | \"closed\" | \"open\" | \"toggle\";\n\n/**\n * Data received by the input binding's `receiveMessage` method.\n * @typedef {SidebarMessageData}\n */\ntype SidebarMessageData = {\n method: SidebarToggleMethod;\n};\n\n/**\n * Represents the size of the sidebar window either: \"desktop\" or \"mobile\".\n */\ntype SidebarWindowSize = \"desktop\" | \"mobile\";\n\n/**\n * The DOM elements that make up the sidebar. `main`, `sidebar`, and `toggle`\n * are all direct children of `container` (in that order).\n * @interface SidebarComponents\n * @typedef {SidebarComponents}\n */\ninterface SidebarComponents {\n /**\n * The `layout_sidebar()` parent container, with class\n * `Sidebar.classes.LAYOUT`.\n * @type {HTMLElement}\n */\n container: HTMLElement;\n /**\n * The main content area of the sidebar layout.\n * @type {HTMLElement}\n */\n main: HTMLElement;\n /**\n * The sidebar container of the sidebar layout.\n * @type {HTMLElement}\n */\n sidebar: HTMLElement;\n /**\n * The toggle button that is used to toggle the sidebar state.\n * @type {HTMLElement}\n */\n toggle: HTMLElement;\n /**\n * The resize handle for resizing the sidebar (optional).\n * @type {HTMLElement | null}\n */\n resizeHandle?: HTMLElement | null;\n}\n\n/**\n * The bslib sidebar component class. This class is only used for collapsible\n * sidebars.\n *\n * @class Sidebar\n * @typedef {Sidebar}\n */\nclass Sidebar {\n /**\n * The DOM elements that make up the sidebar, see `SidebarComponents`.\n * @private\n * @type {SidebarComponents}\n */\n private layout: SidebarComponents;\n\n /**\n * A Shiny-specific resize observer that ensures Shiny outputs in the main\n * content areas of the sidebar resize appropriately.\n * @private\n * @type {ShinyResizeObserver}\n * @static\n */\n private static shinyResizeObserver = new ShinyResizeObserver();\n\n /**\n * Resize state tracking\n * @private\n */\n private resizeState = {\n isResizing: false,\n startX: 0,\n startWidth: 0,\n minWidth: 150,\n maxWidth: () => window.innerWidth - 50,\n constrainedWidth: (width: number): number => {\n return Math.max(\n this.resizeState.minWidth,\n Math.min(this.resizeState.maxWidth(), width)\n );\n },\n };\n\n /**\n * Creates an instance of a collapsible bslib Sidebar.\n * @constructor\n * @param {HTMLElement} container\n */\n constructor(container: HTMLElement) {\n Sidebar.instanceMap.set(container, this);\n this.layout = {\n container,\n main: container.querySelector(\":scope > .main\") as HTMLElement,\n sidebar: container.querySelector(\":scope > .sidebar\") as HTMLElement,\n toggle: container.querySelector(\n \":scope > .collapse-toggle\"\n ) as HTMLElement,\n } as SidebarComponents;\n\n const sideAccordion = this.layout.sidebar.querySelector(\n \":scope > .sidebar-content > .accordion\"\n );\n if (sideAccordion) {\n // Add `.has-accordion` class to `.sidebar-content` container\n sideAccordion?.parentElement?.classList.add(\"has-accordion\");\n sideAccordion.classList.add(\"accordion-flush\");\n }\n\n this._initSidebarCounters();\n this._initSidebarState();\n\n if (this._isCollapsible(\"desktop\") || this._isCollapsible(\"mobile\")) {\n this._initEventListeners();\n }\n\n // Initialize resize functionality\n this._initResizeHandle();\n\n // Start watching the main content area for size changes to ensure Shiny\n // outputs resize appropriately during sidebar transitions.\n Sidebar.shinyResizeObserver.observe(this.layout.main);\n\n container.removeAttribute(\"data-bslib-sidebar-init\");\n const initScript = container.querySelector(\n \":scope > script[data-bslib-sidebar-init]\"\n );\n if (initScript) {\n container.removeChild(initScript);\n }\n }\n\n /**\n * Read the current state of the sidebar. Note that, when calling this method,\n * the sidebar may be transitioning into the state returned by this method.\n *\n * @description\n * The sidebar state works as follows, starting from the open state. When the\n * sidebar is closed:\n * 1. We add both the `COLLAPSE` and `TRANSITIONING` classes to the sidebar.\n * 2. The sidebar collapse begins to animate. In general, where it is\n * supported, we transition the `grid-template-columns` property of the\n * sidebar layout. We also rotate the collapse icon and we use this\n * rotation to determine when the transition is complete.\n * 3. If another sidebar state toggle is requested while closing the sidebar,\n * we remove the `COLLAPSE` class and the animation immediately starts to\n * reverse.\n * 4. When the `transition` is complete, we remove the `TRANSITIONING` class.\n * @readonly\n * @type {boolean}\n */\n get isClosed(): boolean {\n return this.layout.container.classList.contains(Sidebar.classes.COLLAPSE);\n }\n\n /**\n * Static classes related to the sidebar layout or state.\n * @public\n * @static\n * @readonly\n * @type {{ LAYOUT: string; COLLAPSE: string; TRANSITIONING: string; }}\n */\n public static readonly classes = {\n // eslint-disable-next-line @typescript-eslint/naming-convention\n LAYOUT: \"bslib-sidebar-layout\",\n // eslint-disable-next-line @typescript-eslint/naming-convention\n COLLAPSE: \"sidebar-collapsed\",\n // eslint-disable-next-line @typescript-eslint/naming-convention\n TRANSITIONING: \"transitioning\",\n // eslint-disable-next-line @typescript-eslint/naming-convention\n RESIZE_HANDLE: \"bslib-sidebar-resize-handle\",\n // eslint-disable-next-line @typescript-eslint/naming-convention\n RESIZING: \"sidebar-resizing\",\n };\n\n /**\n * If sidebars are initialized before the DOM is ready, we re-schedule the\n * initialization to occur on DOMContentLoaded.\n * @private\n * @static\n * @type {boolean}\n */\n private static onReadyScheduled = false;\n /**\n * A map of initialized sidebars to their respective Sidebar instances.\n * @private\n * @static\n * @type {WeakMap}\n */\n private static instanceMap: WeakMap = new WeakMap();\n\n /**\n * Given a sidebar container, return the Sidebar instance associated with it.\n * @public\n * @static\n * @param {HTMLElement} el\n * @returns {(Sidebar | undefined)}\n */\n public static getInstance(el: HTMLElement): Sidebar | undefined {\n return Sidebar.instanceMap.get(el);\n }\n\n /**\n * Determine whether the sidebar is collapsible at a given screen size.\n * @private\n * @param {SidebarWindowSize} [size=\"desktop\"]\n * @returns {boolean}\n */\n private _isCollapsible(size: SidebarWindowSize = \"desktop\"): boolean {\n const { container } = this.layout;\n\n const attr =\n size === \"desktop\" ? \"collapsibleDesktop\" : \"collapsibleMobile\";\n\n const isCollapsible = container.dataset[attr];\n\n if (isCollapsible === undefined) {\n return true;\n }\n\n return isCollapsible.trim().toLowerCase() !== \"false\";\n }\n\n /**\n * Initialize all collapsible sidebars on the page.\n * @public\n * @static\n * @param {boolean} [flushResizeObserver=true] When `true`, we remove\n * non-existent elements from the ResizeObserver. This is required\n * periodically to prevent memory leaks. To avoid over-checking, we only flush\n * the ResizeObserver when initializing sidebars after page load.\n */\n public static initCollapsibleAll(flushResizeObserver = true): void {\n if (document.readyState === \"loading\") {\n if (!Sidebar.onReadyScheduled) {\n Sidebar.onReadyScheduled = true;\n document.addEventListener(\"DOMContentLoaded\", () => {\n Sidebar.initCollapsibleAll(false);\n });\n }\n return;\n }\n\n const initSelector = `.${Sidebar.classes.LAYOUT}[data-bslib-sidebar-init]`;\n if (!document.querySelector(initSelector)) {\n // no sidebars to initialize\n return;\n }\n\n if (flushResizeObserver) Sidebar.shinyResizeObserver.flush();\n\n const containers = document.querySelectorAll(initSelector);\n containers.forEach((container) => new Sidebar(container as HTMLElement));\n }\n\n /**\n * Initialize sidebar resize functionality.\n * @private\n */\n private _initResizeHandle(): void {\n if (!this.layout.resizeHandle) {\n const handle = this._createResizeHandle();\n // Insert handle into the layout container\n this.layout.container.appendChild(handle);\n this.layout.resizeHandle = handle;\n\n this._attachResizeEventListeners(handle);\n }\n this._updateResizeAvailability();\n }\n\n /**\n * Create the resize handle element.\n * @private\n */\n private _createResizeHandle(): HTMLDivElement {\n const handle = document.createElement(\"div\");\n handle.className = Sidebar.classes.RESIZE_HANDLE;\n handle.setAttribute(\"role\", \"separator\");\n handle.setAttribute(\"aria-orientation\", \"vertical\");\n handle.setAttribute(\"aria-label\", \"Resize sidebar\");\n handle.setAttribute(\"tabindex\", \"0\");\n handle.setAttribute(\"aria-keyshortcuts\", \"ArrowLeft ArrowRight Home End\");\n handle.title = \"Drag to resize sidebar\";\n\n const indicator = document.createElement(\"div\");\n indicator.className = \"resize-indicator\";\n handle.appendChild(indicator);\n\n const instructions = document.createElement(\"div\");\n instructions.className = \"visually-hidden\";\n instructions.textContent =\n \"Use arrow keys to resize the sidebar, Shift for larger steps, Home/End for min/max width.\";\n handle.appendChild(instructions);\n\n return handle;\n }\n\n /**\n * Attach event listeners for resize functionality.\n * @private\n */\n private _attachResizeEventListeners(handle: HTMLDivElement): void {\n // Mouse events\n handle.addEventListener(\"mousedown\", this._onResizeStart.bind(this));\n document.addEventListener(\"mousemove\", this._onResizeMove.bind(this));\n document.addEventListener(\"mouseup\", this._onResizeEnd.bind(this));\n\n // Touch events for mobile devices\n handle.addEventListener(\"touchstart\", this._onResizeStart.bind(this), {\n passive: false,\n });\n document.addEventListener(\"touchmove\", this._onResizeMove.bind(this), {\n passive: false,\n });\n document.addEventListener(\"touchend\", this._onResizeEnd.bind(this));\n\n // Keyboard events for accessibility\n handle.addEventListener(\"keydown\", this._onResizeKeyDown.bind(this));\n\n window.addEventListener(\n \"resize\",\n whenChangedCallback(\n () => this._getWindowSize(),\n () => this._updateResizeAvailability()\n )\n );\n }\n\n /**\n * Check if the sidebar should be resizable in the current state.\n * @private\n * @returns {boolean}\n */\n private _shouldEnableResize(): boolean {\n const isDesktop = this._getWindowSize() === \"desktop\";\n const notTransitioning = !this.layout.container.classList.contains(\n Sidebar.classes.TRANSITIONING\n );\n const notClosed = !this.isClosed;\n\n return (\n // Allow resizing only when the sidebar...\n isDesktop && notTransitioning && notClosed\n );\n }\n\n /**\n * Handle resize start (mouse/touch down).\n * @private\n * @param {MouseEvent | TouchEvent} event\n */\n private _onResizeStart(event: MouseEvent | TouchEvent): void {\n if (!this._shouldEnableResize()) return;\n\n event.preventDefault();\n\n const clientX =\n \"touches\" in event ? event.touches[0].clientX : event.clientX;\n\n this.resizeState.isResizing = true;\n this.resizeState.startX = clientX;\n this.resizeState.startWidth = this._getCurrentSidebarWidth();\n\n // Disable transitions during resize for smooth interaction\n this.layout.container.style.setProperty(\"--_transition-duration\", \"0ms\");\n this.layout.container.classList.add(Sidebar.classes.RESIZING);\n\n document.documentElement.setAttribute(\n `data-bslib-${Sidebar.classes.RESIZING}`,\n \"true\"\n );\n\n this._dispatchResizeEvent(\"start\", this.resizeState.startWidth);\n }\n\n /**\n * Handle resize move (mouse/touch move).\n * @private\n * @param {MouseEvent | TouchEvent} event\n */\n private _onResizeMove(event: MouseEvent | TouchEvent): void {\n if (!this.resizeState.isResizing) return;\n\n event.preventDefault();\n\n const clientX =\n \"touches\" in event ? event.touches[0].clientX : event.clientX;\n const deltaX = clientX - this.resizeState.startX;\n\n // Calculate new width based on sidebar position\n const isRight = this._isRightSidebar();\n const newWidth = isRight\n ? this.resizeState.startWidth - deltaX\n : this.resizeState.startWidth + deltaX;\n\n // Constrain within bounds\n const constrainedWidth = this.resizeState.constrainedWidth(newWidth);\n\n this._updateSidebarWidth(constrainedWidth);\n this._dispatchResizeEvent(\"move\", constrainedWidth);\n }\n\n /**\n * Handle resize end (mouse/touch up).\n * @private\n */\n private _onResizeEnd(): void {\n if (!this.resizeState.isResizing) return;\n\n this.resizeState.isResizing = false;\n\n // Re-enable transitions\n this.layout.container.style.removeProperty(\"--_transition-duration\");\n this.layout.container.classList.remove(Sidebar.classes.RESIZING);\n\n // Reset cursor and text selection resizing changes\n document.documentElement.removeAttribute(\n `data-bslib-${Sidebar.classes.RESIZING}`\n );\n\n // Dispatch resize end event\n Sidebar.shinyResizeObserver.flush();\n this._dispatchResizeEvent(\"end\", this._getCurrentSidebarWidth());\n }\n\n /**\n * Handle keyboard events for resize accessibility.\n * @private\n * @param {KeyboardEvent} event\n */\n private _onResizeKeyDown(event: KeyboardEvent): void {\n if (!this._shouldEnableResize()) return;\n\n const step = event.shiftKey ? 50 : 10; // Larger steps with Shift\n let newWidth = this._getCurrentSidebarWidth();\n\n switch (event.key) {\n case \"ArrowLeft\":\n newWidth = this._isRightSidebar() ? newWidth + step : newWidth - step;\n break;\n case \"ArrowRight\":\n newWidth = this._isRightSidebar() ? newWidth - step : newWidth + step;\n break;\n case \"Home\":\n newWidth = this.resizeState.minWidth;\n break;\n case \"End\":\n newWidth = this.resizeState.maxWidth();\n break;\n default:\n return; // Don't prevent default for other keys\n }\n\n event.preventDefault();\n\n // Constrain within bounds\n newWidth = this.resizeState.constrainedWidth(newWidth);\n\n this._updateSidebarWidth(newWidth);\n Sidebar.shinyResizeObserver.flush();\n this._dispatchResizeEvent(\"keyboard\", newWidth);\n }\n\n /**\n * Get the current sidebar width in pixels.\n * @private\n * @returns {number}\n */\n private _getCurrentSidebarWidth(): number {\n const sidebarWidth = this.layout.sidebar.getBoundingClientRect().width;\n return sidebarWidth || 250;\n }\n\n /**\n * Update the sidebar width.\n * @private\n * @param {number} newWidth\n */\n private _updateSidebarWidth(newWidth: number): void {\n const { container, resizeHandle } = this.layout;\n\n container.style.setProperty(\"--_sidebar-width\", `${newWidth}px`);\n\n // Update min, max and current width attributes on the resize handle\n if (resizeHandle) {\n resizeHandle.setAttribute(\"aria-valuenow\", newWidth.toString());\n resizeHandle.setAttribute(\n \"aria-valuemin\",\n this.resizeState.minWidth.toString()\n );\n resizeHandle.setAttribute(\n \"aria-valuemax\",\n this.resizeState.maxWidth().toString()\n );\n }\n }\n\n /**\n * Check if this is a right-aligned sidebar.\n * @private\n * @returns {boolean}\n */\n private _isRightSidebar(): boolean {\n return this.layout.container.classList.contains(\"sidebar-right\");\n }\n\n /**\n * Update resize handle availability based on current state.\n * @private\n */\n private _updateResizeAvailability(): void {\n if (!this.layout.resizeHandle) return;\n\n const shouldEnable = this._shouldEnableResize();\n\n this.layout.resizeHandle.style.display = shouldEnable ? \"\" : \"none\";\n this.layout.resizeHandle.setAttribute(\n \"aria-hidden\",\n shouldEnable ? \"false\" : \"true\"\n );\n\n if (shouldEnable) {\n this.layout.resizeHandle.setAttribute(\"tabindex\", \"0\");\n } else {\n this.layout.resizeHandle.removeAttribute(\"tabindex\");\n }\n }\n\n /**\n * Dispatch a custom resize event.\n * @private\n * @param {string} phase The phase of the resize event lifecycle, e.g.\n * \"start\", \"move\", \"end\", or \"keyboard\".\n * @param {number} width The new width of the sidebar in pixels.\n */\n private _dispatchResizeEvent(phase: string, width: number): void {\n const event = new CustomEvent(\"bslib.sidebar.resize\", {\n bubbles: true,\n detail: { phase, width, sidebar: this },\n });\n this.layout.sidebar.dispatchEvent(event);\n }\n\n /**\n * Initialize event listeners for the sidebar toggle button.\n * @private\n */\n private _initEventListeners(): void {\n const { toggle } = this.layout;\n\n toggle.addEventListener(\"click\", (ev) => {\n ev.preventDefault();\n this.toggle(\"toggle\");\n });\n\n // Remove the transitioning class when the transition ends. We watch the\n // collapse toggle icon because it's guaranteed to transition, whereas not\n // all browsers support animating grid-template-columns.\n toggle\n .querySelector(\".collapse-icon\")\n ?.addEventListener(\"transitionend\", () => {\n this._finalizeState();\n });\n\n if (this._isCollapsible(\"desktop\") && this._isCollapsible(\"mobile\")) {\n return;\n }\n\n // The sidebar is *sometimes* collapsible, so we need to handle window\n // resize events to ensure visibility and expected behavior.\n window.addEventListener(\n \"resize\",\n whenChangedCallback(\n () => this._getWindowSize(),\n () => this._initSidebarState()\n )\n );\n }\n\n /**\n * Initialize nested sidebar counters.\n *\n * @description\n * This function walks up the DOM tree, adding CSS variables to each direct\n * parent sidebar layout that count the layout's position in the stack of\n * nested layouts. We use these counters to keep the collapse toggles from\n * overlapping. Note that always-open sidebars that don't have collapse\n * toggles break the chain of nesting.\n * @private\n */\n private _initSidebarCounters(): void {\n const { container } = this.layout;\n\n const selectorChildLayouts =\n `.${Sidebar.classes.LAYOUT}` +\n \"> .main > \" +\n `.${Sidebar.classes.LAYOUT}:not([data-bslib-sidebar-open=\"always\"])`;\n\n const isInnermostLayout =\n container.querySelector(selectorChildLayouts) === null;\n\n if (!isInnermostLayout) {\n // There are sidebar layouts nested within this layout; defer to children\n return;\n }\n\n function nextSidebarParent(el: HTMLElement | null): HTMLElement | null {\n el = el ? el.parentElement : null;\n if (el && el.classList.contains(\"main\")) {\n // .bslib-sidebar-layout > .main > .bslib-sidebar-layout\n el = el.parentElement;\n }\n if (el && el.classList.contains(Sidebar.classes.LAYOUT)) {\n return el;\n }\n return null;\n }\n\n const layouts = [container];\n let parent = nextSidebarParent(container);\n\n while (parent) {\n // Add parent to front of layouts array, so we sort outer -> inner\n layouts.unshift(parent);\n parent = nextSidebarParent(parent);\n }\n\n const count = { left: 0, right: 0 };\n layouts.forEach(function (x: HTMLElement): void {\n const isRight = x.classList.contains(\"sidebar-right\");\n const thisCount = isRight ? count.right++ : count.left++;\n x.style.setProperty(\"--_js-toggle-count-this-side\", thisCount.toString());\n x.style.setProperty(\n \"--_js-toggle-count-max-side\",\n Math.max(count.right, count.left).toString()\n );\n });\n }\n\n /**\n * Retrieves the current window size by reading a CSS variable whose value is\n * toggled via media queries.\n * @returns The window size as `\"desktop\"` or `\"mobile\"`, or `\"\"` if not\n * available.\n */\n private _getWindowSize(): SidebarWindowSize | \"\" {\n const { container } = this.layout;\n\n return window\n .getComputedStyle(container)\n .getPropertyValue(\"--bslib-sidebar-js-window-size\")\n .trim() as SidebarWindowSize | \"\";\n }\n\n /**\n * Determine the initial toggle state of the sidebar at a current screen size.\n * It always returns whether we should `\"open\"` or `\"close\"` the sidebar.\n *\n * @private\n * @returns {(\"close\" | \"open\")}\n */\n private _initialToggleState(): \"close\" | \"open\" {\n const { container } = this.layout;\n\n const attr = this.windowSize === \"desktop\" ? \"openDesktop\" : \"openMobile\";\n\n const initState = container.dataset[attr]?.trim()?.toLowerCase();\n\n if (initState === undefined) {\n return \"open\";\n }\n\n if ([\"open\", \"always\"].includes(initState)) {\n return \"open\";\n }\n\n if ([\"close\", \"closed\"].includes(initState)) {\n return \"close\";\n }\n\n return \"open\";\n }\n\n /**\n * Initialize the sidebar's initial state when `open = \"desktop\"`.\n * @private\n */\n private _initSidebarState(): void {\n // Check the CSS variable to find out which mode we're in right now\n this.windowSize = this._getWindowSize();\n\n const initState = this._initialToggleState();\n this.toggle(initState, true);\n }\n\n /**\n * The current window size, either `\"desktop\"` or `\"mobile\"`.\n * @private\n * @type {SidebarWindowSize | \"\"}\n */\n private windowSize: SidebarWindowSize | \"\" = \"\";\n\n /**\n * Toggle the sidebar's open/closed state.\n * @public\n * @param {SidebarToggleMethod | undefined} method Whether to `\"open\"`,\n * `\"close\"` or `\"toggle\"` the sidebar. If `.toggle()` is called without an\n * argument, it will toggle the sidebar's state.\n * @param {boolean} [immediate=false] If `true`, the sidebar state will be\n * set immediately, without a transition. This is primarily used when the\n * sidebar is initialized.\n */\n public toggle(\n method: SidebarToggleMethod | undefined,\n immediate = false\n ): void {\n if (typeof method === \"undefined\") {\n method = \"toggle\";\n } else if (method === \"closed\") {\n method = \"close\";\n }\n\n const { container, sidebar } = this.layout;\n const isClosed = this.isClosed;\n\n if ([\"open\", \"close\", \"toggle\"].indexOf(method) === -1) {\n throw new Error(`Unknown method ${method}`);\n }\n\n if (method === \"toggle\") {\n method = isClosed ? \"open\" : \"close\";\n }\n\n if ((isClosed && method === \"close\") || (!isClosed && method === \"open\")) {\n // nothing to do, sidebar is already in the desired state\n if (immediate) this._finalizeState();\n return;\n }\n\n if (method === \"open\") {\n // unhide sidebar immediately when opening,\n // otherwise the sidebar is hidden on transitionend\n sidebar.hidden = false;\n }\n\n // If not immediate, add the .transitioning class to the sidebar for smooth\n // transitions. This class is removed when the transition ends.\n container.classList.toggle(Sidebar.classes.TRANSITIONING, !immediate);\n container.classList.toggle(Sidebar.classes.COLLAPSE);\n\n if (immediate) {\n // When transitioning, state is finalized on transitionend, otherwise we\n // need to manually and immediately finalize the state.\n this._finalizeState();\n }\n }\n\n /**\n * When the sidebar open/close transition ends, finalize the sidebar's state.\n * @private\n */\n private _finalizeState(): void {\n const { container, sidebar, toggle } = this.layout;\n container.classList.remove(Sidebar.classes.TRANSITIONING);\n sidebar.hidden = this.isClosed;\n toggle.setAttribute(\"aria-expanded\", this.isClosed ? \"false\" : \"true\");\n\n // Update resize handle availability\n this._updateResizeAvailability();\n\n // Send browser-native event with updated sidebar state\n const event = new CustomEvent(\"bslib.sidebar\", {\n bubbles: true,\n detail: { open: !this.isClosed },\n });\n sidebar.dispatchEvent(event);\n\n // Trigger Shiny input and output binding events\n $(sidebar).trigger(\"toggleCollapse.sidebarInputBinding\");\n $(sidebar).trigger(this.isClosed ? \"hidden\" : \"shown\");\n }\n}\n\nfunction whenChangedCallback(\n watchFn: () => unknown,\n callback: () => void\n): () => void {\n let lastValue = watchFn();\n\n return () => {\n const currentValue = watchFn();\n\n if (currentValue !== lastValue) {\n callback();\n }\n\n lastValue = currentValue;\n };\n}\n\n/**\n * A Shiny input binding for a sidebar.\n * @class SidebarInputBinding\n * @typedef {SidebarInputBinding}\n * @extends {InputBinding}\n */\nclass SidebarInputBinding extends InputBinding {\n find(scope: HTMLElement) {\n return $(scope).find(`.${Sidebar.classes.LAYOUT} > .bslib-sidebar-input`);\n }\n\n getValue(el: HTMLElement): boolean {\n const sb = Sidebar.getInstance(el.parentElement as HTMLElement);\n if (!sb) return false;\n return !sb.isClosed;\n }\n\n setValue(el: HTMLElement, value: boolean): void {\n const method = value ? \"open\" : \"close\";\n this.receiveMessage(el, { method });\n }\n\n subscribe(el: HTMLElement, callback: (x: boolean) => void) {\n $(el).on(\n \"toggleCollapse.sidebarInputBinding\",\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n function (event) {\n callback(true);\n }\n );\n }\n\n unsubscribe(el: HTMLElement) {\n $(el).off(\".sidebarInputBinding\");\n }\n\n receiveMessage(el: HTMLElement, data: SidebarMessageData) {\n const sb = Sidebar.getInstance(el.parentElement as HTMLElement);\n if (sb) sb.toggle(data.method);\n }\n}\n\nregisterBinding(SidebarInputBinding, \"sidebar\");\n// attach Sidebar class to window for global usage\nregisterBslibGlobal(\"Sidebar\", Sidebar);\n", "import { InputBinding, registerBinding } from \"./_utils\";\nimport type { BslibSwitchInline } from \"./webcomponents/switch\";\n\ntype TaskButtonMessage = {\n state: string;\n};\n\n/**\n * This is a Shiny input binding for `bslib::input_task_button()`. It is not a\n * web component, though one of its children is . The\n * reason it is not a web component is because it is primarily a button, and I\n * wanted to use the native + +
+ + +# as.tags.bslib_toast respects accessibility attributes + + Code + cat(format(as.tags(t_danger))) + Output + + +--- + + Code + cat(format(as.tags(t_info))) + Output +
+
+
Info message
+ +
+
+ +--- + + Code + cat(format(as.tags(t_default))) + Output +
+
+
Default message
+ +
+
+ +# as.tags.bslib_toast includes close button appropriately + + Code + cat(format(as.tags(t_header))) + Output +
+
+ Title + +
+
Message
+
+ +--- + + Code + cat(format(as.tags(t_no_header))) + Output +
+
+
Message
+ +
+
+ +--- + + Code + cat(format(as.tags(t_non_closable))) + Output +
+
Message
+
+ +--- + + Code + cat(format(as.tags(t_manual))) + Output +
+
Message
+
+ +# toast() icon renders in body without header + + Code + cat(format(tag)) + Output +
+
+ + ★ + +
You have new messages
+ +
+
+ +# toast() icon renders in body with header + + Code + cat(format(tag)) + Output +
+
+ New Mail + +
+
+ + ★ + +
Message content
+
+
+ +# toast() icon works with closable button in body + + Code + cat(format(tag)) + Output +
+
+ + ★ + +
Warning message
+ +
+
+ +# toast_header() icon renders in header + + Code + cat(format(tag)) + Output +
+
+ + ★ + + Notification + now + +
+
Body content
+
+ +# toast_header() icon with status and title + + Code + cat(format(tag)) + Output +
+
+ + ✓ + + Success + just now + +
+
Operation completed
+
+ +# toast with both header icon and body icon + + Code + cat(format(tag)) + Output +
+
+ + H + + Title + +
+
+ + B + +
Message content
+
+
+ +# normalize_toast_position() errors on invalid input + + Code + normalize_toast_position("top") + Condition + Error in `normalize_toast_position()`: + ! Invalid toast position: 'top'. Must specify one vertical position (top, middle, bottom) and one horizontal position (left, center, right). + Code + normalize_toast_position("left") + Condition + Error in `normalize_toast_position()`: + ! Invalid toast position: 'left'. Must specify one vertical position (top, middle, bottom) and one horizontal position (left, center, right). + Code + normalize_toast_position("top bottom left") + Condition + Error in `normalize_toast_position()`: + ! Invalid toast position: 'top bottom left'. Must specify one vertical position (top, middle, bottom) and one horizontal position (left, center, right). + Code + normalize_toast_position(c("top", "bottom", "left")) + Condition + Error in `normalize_toast_position()`: + ! Invalid toast position: 'top bottom left'. Must specify one vertical position (top, middle, bottom) and one horizontal position (left, center, right). + Code + normalize_toast_position("top invalid") + Condition + Error in `normalize_toast_position()`: + ! Invalid toast position: 'top invalid'. Must specify one vertical position (top, middle, bottom) and one horizontal position (left, center, right). + Code + normalize_toast_position("foo bar") + Condition + Error in `normalize_toast_position()`: + ! Invalid toast position: 'foo bar'. Must specify one vertical position (top, middle, bottom) and one horizontal position (left, center, right). + +# show_toast() and hide_toast() warn if nothing to show/hide + + Code + hide_toast(show_toast(toast(), session = session), session = session) + Condition + Warning: + `toast` has no content; no toast to show. + Warning: + `id` is NULL; no toast to hide. + +# hide_toast() works + + Code + hide_toast(toast()) + Condition + Error in `hide_toast()`: + ! Cannot hide a toast without an ID. Provide the toast ID. + diff --git a/tests/testthat/test-toast.R b/tests/testthat/test-toast.R new file mode 100644 index 000000000..16a326726 --- /dev/null +++ b/tests/testthat/test-toast.R @@ -0,0 +1,695 @@ +# toast() constructor tests ---- + +test_that("toast() creates bslib_toast object with defaults", { + t <- toast("Test message") + + expect_s3_class(t, "bslib_toast") + expect_null(t$id) + expect_true(t$autohide) + expect_equal(t$duration, 5000) # Default 5 seconds in milliseconds + expect_true(t$closable) + expect_null(t$header) + expect_null(t$icon) + expect_equal(t$position, "top-right") +}) + +test_that("toast() validates position argument", { + expect_no_error(toast("Test", position = "bottom-left")) + expect_no_error(toast("Test", position = "top-center")) + expect_no_error(toast("Test", position = "middle-center")) + expect_snapshot(error = TRUE, toast("Test", position = "invalid")) +}) + +test_that("toast() validates type argument", { + expect_no_error(toast("Test", type = "success")) + expect_no_error(toast("Test", type = "danger")) + expect_no_error(toast("Test", type = "info")) + expect_snapshot(error = TRUE, toast("Test", type = "invalid")) +}) + +test_that("toast() type 'error' is aliased to 'danger'", { + t <- toast("Test", type = "error") + expect_equal(t$type, "danger") +}) + +test_that("toast() autohide disabled (0, NA, NULL)", { + # When autohide is disabled, closable can be set to FALSE + # This allows app authors to manage toast display manually + t1 <- toast("Test", duration_s = 0, closable = FALSE) + expect_false(t1$autohide) + expect_false(t1$closable) + + t2 <- toast("Test", duration_s = NA, closable = FALSE) + expect_false(t2$autohide) + expect_false(t2$closable) + + t3 <- toast("Test", duration_s = NULL, closable = FALSE) + expect_false(t3$autohide) + expect_false(t3$closable) + + # closable can also be TRUE when autohide is disabled + t4 <- toast("Test", duration_s = NA, closable = TRUE) + expect_false(t4$autohide) + expect_true(t4$closable) +}) + +test_that("toast() `closable` when autohide enabled", { + # When autohide is enabled, user can control closable + t_closable <- toast("Test", duration_s = 10, closable = TRUE) + expect_true(t_closable$autohide) + expect_equal(t_closable$duration, 10000) # Converted to milliseconds + expect_true(t_closable$closable) + + t_not_closable <- toast("Test", duration_s = 5, closable = FALSE) + expect_true(t_not_closable$autohide) + expect_equal(t_not_closable$duration, 5000) + expect_false(t_not_closable$closable) +}) + +test_that("toast() duration_s throws for invalid values", { + expect_snapshot(error = TRUE, { + toast("Test", duration_s = -5) + toast("Test", duration_s = "invalid") + toast("Test", duration_s = c(5, 10)) + }) +}) + +test_that("toast() stores icon argument", { + icon_elem <- span(class = "test-icon", HTML("★")) + + t <- toast("Test message", icon = icon_elem) + + expect_s3_class(t, "bslib_toast") + expect_s3_class(t$icon, "shiny.tag") + expect_equal(t$icon$attribs$class, "test-icon") + expect_equal(t$icon$children[[1]], HTML("★")) +}) + +test_that("toast() icon is NULL by default", { + t <- toast("Test message") + expect_null(t$icon) +}) + + +# toast() rendering tests ---- + +test_that("as.tags.bslib_toast creates proper HTML structure", { + t <- toast( + body = "Test message", + header = "Test", + type = "success", + id = "test-toast" + ) + + tag <- as.tags(t) + expect_s3_class(tag, "shiny.tag") + expect_snapshot(cat(format(tag))) +}) + +test_that("as.tags.bslib_toast generates ID if not provided", { + t <- toast("Test message") + tag <- as.tags(t) + + html_str <- as.character(tag) + # Verify an auto-generated ID is present + expect_match(html_str, 'id="bslib-toast-[0-9]+"') +}) + +test_that("as.tags.bslib_toast respects accessibility attributes", { + # Danger type gets assertive role + t_danger <- toast("Error message", type = "danger", id = "danger-toast") + html_danger <- as.character(as.tags(t_danger)) + expect_match(html_danger, 'role="alert"') + expect_match(html_danger, 'aria-live="assertive"') + expect_snapshot(cat(format(as.tags(t_danger)))) + + # Info type gets polite role + t_info <- toast("Info message", type = "info", id = "info-toast") + html_info <- as.character(as.tags(t_info)) + expect_match(html_info, 'role="status"') + expect_match(html_info, 'aria-live="polite"') + expect_snapshot(cat(format(as.tags(t_info)))) + + # NULL type (default) gets polite role + t_default <- toast("Default message", id = "default-toast") + html_default <- as.character(as.tags(t_default)) + expect_match(html_default, 'role="status"') + expect_match(html_default, 'aria-live="polite"') + expect_snapshot(cat(format(as.tags(t_default)))) +}) + +test_that("as.tags.bslib_toast includes close button appropriately", { + # With header, closable + t_header <- toast( + "Message", + header = "Title", + closable = TRUE, + id = "header-toast" + ) + expect_snapshot(cat(format(as.tags(t_header)))) + + # Without header, closable + t_no_header <- toast("Message", closable = TRUE, id = "no-header-toast") + expect_snapshot(cat(format(as.tags(t_no_header)))) + + # Non-closable with autohide + t_non_closable <- toast( + "Message", + closable = FALSE, + duration_s = 5, + id = "non-closable-toast" + ) + expect_snapshot(cat(format(as.tags(t_non_closable)))) + + # Non-closable with autohide disabled (for manual management) + t_manual <- toast( + "Message", + closable = FALSE, + duration_s = NA, + id = "manual-toast" + ) + expect_snapshot(cat(format(as.tags(t_manual)))) +}) + +test_that("toast() icon renders in body without header", { + icon_elem <- span(class = "my-icon", HTML("★")) + t <- toast("You have new messages", icon = icon_elem, id = "icon-toast") + + tag <- as.tags(t) + html <- as.character(tag) + + # Icon should be in toast-body with special wrapper + expect_match(html, 'class="toast-body d-flex gap-2"') + expect_match(html, 'class="toast-body-icon"') + expect_match(html, 'class="my-icon"') + expect_match(html, "★") + expect_match(html, 'class="toast-body-content flex-grow-1"') + expect_snapshot(cat(format(tag))) +}) + +test_that("toast() icon renders in body with header", { + icon_elem <- span(class = "header-icon", HTML("★")) + t <- toast( + "Message content", + header = "New Mail", + icon = icon_elem, + id = "icon-header-toast" + ) + + tag <- as.tags(t) + html <- as.character(tag) + + # Icon should still be in body when header is present + expect_match(html, 'class="toast-body d-flex gap-2"') + expect_match(html, 'class="toast-body-icon"') + expect_match(html, 'class="header-icon"') + expect_match(html, "★") + expect_snapshot(cat(format(tag))) +}) + +test_that("toast() icon works with closable button in body", { + icon_elem <- span(class = "alert-icon", HTML("★")) + t <- toast( + "Warning message", + icon = icon_elem, + closable = TRUE, + id = "icon-closable-toast" + ) + + tag <- as.tags(t) + html <- as.character(tag) + + # Should have both icon and close button in body + expect_match(html, 'class="toast-body d-flex gap-2"') + expect_match(html, 'class="toast-body-icon"') + expect_match(html, 'class="alert-icon"') + expect_match(html, "★") + expect_match(html, 'class="btn-close"') + expect_snapshot(cat(format(tag))) +}) + +test_that("toast() without icon or close button has simple body", { + t <- toast( + "Simple message", + header = "Header", + closable = FALSE, + id = "simple-body-toast" + ) + + tag <- as.tags(t) + html <- as.character(tag) + + # Should have simple toast-body (no d-flex gap-2) + expect_match(html, 'class="toast-body"') + expect_false(grepl('class="toast-body d-flex gap-2"', html)) + expect_false(grepl('toast-body-icon', html)) + expect_false(grepl('toast-body-content', html)) +}) + + +# toast_header() tests ---- + +test_that("toast_header() creates structured header data", { + # Simple header with just title + h1 <- toast_header("My Title") + expect_s3_class(h1, "bslib_toast_header") + expect_equal(as.character(h1$title), "My Title") + expect_null(h1$icon) + expect_null(h1$status) + + # Header with status text + h2 <- toast_header("Success", status = "11 mins ago") + expect_s3_class(h2, "bslib_toast_header") + expect_equal(as.character(h2$title), "Success") + expect_equal(h2$status, "11 mins ago") +}) + +test_that("toast_header() works with icons", { + icon <- span(class = "test-icon") + + h <- toast_header("Title", icon = icon) + expect_s3_class(h, "bslib_toast_header") + expect_equal(as.character(h$title), "Title") + expect_s3_class(h$icon, "shiny.tag") + expect_equal(h$icon$attribs$class, "test-icon") +}) + +test_that("toast_header() icon renders in header", { + icon_elem <- span(class = "header-test-icon", HTML("★")) + h <- toast_header("Notification", icon = icon_elem, status = "now") + + t <- toast("Body content", header = h, id = "header-icon-toast") + tag <- as.tags(t) + html <- as.character(tag) + + # Icon should be in toast-header with wrapper + expect_match(html, 'class="toast-header"') + expect_match(html, 'class="toast-header-icon"') + expect_match(html, 'class="header-test-icon"') + expect_match(html, "★") + expect_snapshot(cat(format(tag))) +}) + +test_that("toast_header() icon with status and title", { + icon_elem <- span(class = "success-icon", "✓") + h <- toast_header("Success", icon = icon_elem, status = "just now") + + t <- toast("Operation completed", header = h, id = "full-header-toast") + tag <- as.tags(t) + html <- as.character(tag) + + # Should have all three elements: icon, title, status + expect_match(html, 'class="toast-header-icon"') + expect_match(html, 'class="success-icon"') + expect_match(html, "✓") + expect_match(html, "Success") + expect_match(html, "just now") + expect_match(html, 'class="text-muted text-end"') + expect_snapshot(cat(format(tag))) +}) + +test_that("toast() stores additional attributes", { + t <- toast("Test", `data-test` = "value", class = "extra-class") + + expect_equal(t$attribs$`data-test`, "value") + expect_equal(t$attribs$class, "extra-class") + + tag <- as.tags(t) + html <- as.character(tag) + expect_true(grepl('data-test="value"', html)) + expect_true(grepl('class="toast[^"]+extra-class"', html)) +}) + + +test_that("toast() type is reflected in rendered HTML", { + t_success <- toast("Test", type = "success") + expect_equal(t_success$type, "success") + + tag_success <- as.tags(t_success) + html_success <- as.character(tag_success) + expect_true(grepl("text-bg-success", html_success)) + + t_danger <- toast("Test", type = "danger") + expect_equal(t_danger$type, "danger") + + tag_danger <- as.tags(t_danger) + html_danger <- as.character(tag_danger) + expect_true(grepl("text-bg-danger", html_danger)) +}) + +test_that("toast() position is stored correctly", { + t1 <- toast("Test", position = "top-left") + expect_equal(t1$position, "top-left") + + t2 <- toast("Test", position = "middle-center") + expect_equal(t2$position, "middle-center") + + t3 <- toast("Test", position = "bottom-right") + expect_equal(t3$position, "bottom-right") +}) + +# toast() header integration tests ---- + +test_that("toast header with character", { + t <- toast("Body", header = "Simple Header") + tag <- as.tags(t) + html <- as.character(tag) + + expect_true(grepl("toast-header", html)) + expect_true(grepl("Simple Header", html)) + expect_true(grepl("me-auto", html)) +}) + +test_that("toast header with toast_header()", { + t <- toast( + "Body", + header = toast_header("Title", status = "just now") + ) + tag <- as.tags(t) + html <- as.character(tag) + + expect_true(grepl("toast-header", html)) + expect_true(grepl("Title", html)) + expect_true(grepl("just now", html)) + expect_true(grepl("text-muted", html)) +}) + +test_that("toast header with list(title = ...) pattern", { + # Bare list with title should work like toast_header() + t <- toast( + "Body", + header = list(title = "Title", status = "just now") + ) + tag <- as.tags(t) + html <- as.character(tag) + + expect_true(grepl("toast-header", html)) + expect_true(grepl("Title", html)) + expect_true(grepl("just now", html)) + expect_true(grepl("text-muted", html)) +}) + +test_that("toast header with custom tag", { + t <- toast( + "Body", + header = div(class = "custom-header", "My Header") + ) + + tag <- as.tags(t) + expect_equal(tag$children[[1]]$attribs$class, "toast-header") + expect_equal( + format(tag$children[[1]]$children[[1]]), + '
My Header
' + ) +}) + +test_that("toast header can be modified after creation", { + # Create toast with toast_header() + t <- toast( + "Body", + header = toast_header("Original Title", status = "1 min ago") + ) + + # Modify the header + t$header$title <- "Updated Title" + t$header$status <- "just now" + + tag <- as.tags(t) + html <- as.character(tag) + + expect_true(grepl("Updated Title", html)) + expect_true(grepl("just now", html)) + expect_false(grepl("Original Title", html)) + expect_false(grepl("1 min ago", html)) +}) + +test_that("toast header with icon can be modified after creation", { + # Create toast with toast_header() including icon + icon1 <- span(class = "icon-1", "A") + t <- toast( + "Body", + header = toast_header("Title", icon = icon1) + ) + + # Modify the header icon + icon2 <- span(class = "icon-2", "B") + t$header$icon <- icon2 + + tag <- as.tags(t) + html <- as.character(tag) + + expect_true(grepl("icon-2", html)) + expect_true(grepl("B", html, fixed = TRUE)) + expect_false(grepl("icon-1", html)) + expect_false(grepl("A", html, fixed = TRUE)) +}) + +test_that("toast header with list pattern and icon", { + # Bare list with title and icon + icon_elem <- span(class = "list-icon", HTML("★")) + t <- toast( + "Body", + header = list( + title = "Notes", + icon = icon_elem, + status = "updated" + ) + ) + + tag <- as.tags(t) + html <- as.character(tag) + + expect_true(grepl("toast-header", html)) + expect_true(grepl("Notes", html)) + expect_true(grepl("updated", html)) + expect_true(grepl("list-icon", html)) + expect_true(grepl("★", html)) +}) + +test_that("toast header can be replaced with list pattern", { + # Create toast with simple character header + t <- toast("Body", header = "Simple") + + # Replace with list pattern + t$header <- list( + title = "New Title", + status = "now", + icon = span(class = "icon") + ) + + tag <- as.tags(t) + html <- as.character(tag) + + expect_true(grepl("New Title", html)) + expect_true(grepl("now", html)) + expect_true(grepl("icon", html)) + expect_false(grepl("Simple", html)) +}) + +test_that("toast with both header icon and body icon", { + # Both header and body can have their own icons + header_icon <- span(class = "h-icon", "H") + body_icon <- span(class = "b-icon", "B") + + t <- toast( + "Message content", + header = toast_header("Title", icon = header_icon), + icon = body_icon, + id = "dual-icon-toast" + ) + + tag <- as.tags(t) + html <- as.character(tag) + + # Both icons should be present in different locations + expect_match(html, 'class="toast-header-icon"') + expect_match(html, 'class="h-icon"') + expect_match(html, 'class="toast-body-icon"') + expect_match(html, 'class="b-icon"') + expect_snapshot(cat(format(tag))) +}) + +# normalize_toast_position() helper tests ---- + +test_that("normalize_toast_position() handles standard kebab-case format", { + expect_equal(normalize_toast_position("top-left"), "top-left") + expect_equal(normalize_toast_position("bottom-right"), "bottom-right") + expect_equal( + normalize_toast_position("middle-center"), + "middle-center" + ) +}) + +test_that("normalize_toast_position() handles space-separated format", { + expect_equal(normalize_toast_position("top left"), "top-left") + expect_equal(normalize_toast_position("bottom right"), "bottom-right") + expect_equal( + normalize_toast_position("middle center"), + "middle-center" + ) +}) + +test_that("normalize_toast_position() handles reversed order", { + expect_equal(normalize_toast_position("left top"), "top-left") + expect_equal(normalize_toast_position("right bottom"), "bottom-right") + expect_equal( + normalize_toast_position("center middle"), + "middle-center" + ) +}) + +test_that("normalize_toast_position() handles vector input", { + expect_equal(normalize_toast_position(c("top", "left")), "top-left") + expect_equal( + normalize_toast_position(c("bottom", "right")), + "bottom-right" + ) + expect_equal(normalize_toast_position(c("left", "top")), "top-left") + expect_equal( + normalize_toast_position(c("right", "bottom")), + "bottom-right" + ) +}) + +test_that("normalize_toast_position() is case-insensitive", { + expect_equal(normalize_toast_position("TOP LEFT"), "top-left") + expect_equal(normalize_toast_position("Bottom Right"), "bottom-right") + expect_equal( + normalize_toast_position("MIDDLE center"), + "middle-center" + ) +}) + +test_that("normalize_toast_position() handles default NULL or empty", { + expect_equal(normalize_toast_position(NULL), "bottom-right") + expect_equal(normalize_toast_position(character(0)), "bottom-right") +}) + +test_that("normalize_toast_position() defaults to bottom-right when unspecified", { + expect_equal(normalize_toast_position(), "bottom-right") +}) + +test_that("normalize_toast_position() handles all valid combinations", { + # Space-separated + expect_equal(normalize_toast_position("top left"), "top-left") + expect_equal(normalize_toast_position("middle center"), "middle-center") + expect_equal(normalize_toast_position("bottom right"), "bottom-right") + + # Reversed order + expect_equal(normalize_toast_position("left top"), "top-left") + expect_equal(normalize_toast_position("center middle"), "middle-center") + expect_equal(normalize_toast_position("right bottom"), "bottom-right") + + # Vector input + expect_equal(normalize_toast_position(c("top", "left")), "top-left") + expect_equal(normalize_toast_position(c("center", "middle")), "middle-center") + expect_equal(normalize_toast_position(c("bottom", "right")), "bottom-right") +}) + +test_that("normalize_toast_position() errors on invalid input", { + expect_snapshot(error = TRUE, { + # Missing components + normalize_toast_position("top") + normalize_toast_position("left") + + # Duplicate components + normalize_toast_position("top bottom left") + normalize_toast_position(c("top", "bottom", "left")) + + # Invalid components + normalize_toast_position("top invalid") + normalize_toast_position("foo bar") + }) +}) + +test_that("normalize_toast_position() handles extra whitespace", { + expect_equal(normalize_toast_position(" top left "), "top-left") + expect_equal( + normalize_toast_position("bottom right"), + "bottom-right" + ) +}) + +# show_toast() and hide_toast() tests ---- + +test_that("toast() works with flexible position formats", { + # Space-separated + t1 <- toast("Test", position = "top left") + expect_equal(t1$position, "top-left") + + # Reversed order + t2 <- toast("Test", position = "right bottom") + expect_equal(t2$position, "bottom-right") + + # Vector + t3 <- toast("Test", position = c("middle", "center")) + expect_equal(t3$position, "middle-center") +}) + +test_that("show_toast() returns the toast id", { + local_mocked_bindings( + toast_random_id = function() "bslib-toast-1234" + ) + + session <- list(sendCustomMessage = function(type, message) { + expect_equal(type, "bslib.show-toast") + expect_equal(message$id, !!exp_toast_id) + }) + + t <- toast("Test message") + exp_toast_id <- "bslib-toast-1234" + toast_id <- show_toast(t, session = session) + expect_equal(toast_id, exp_toast_id) + + exp_toast_id <- "custom-id" + t2 <- toast("Another message", id = exp_toast_id) + toast_id2 <- show_toast(t2, session = session) + expect_equal(toast_id2, exp_toast_id) +}) + +test_that("show_toast() converts string to toast automatically", { + local_mocked_bindings( + toast_random_id = function() "bslib-toast-auto" + ) + + message_sent <- FALSE + session <- list(sendCustomMessage = function(type, message) { + expect_equal(type, "bslib.show-toast") + expect_equal(message$id, "bslib-toast-auto") + message_sent <<- TRUE + }) + + # Pass a plain string instead of a toast object + toast_id <- show_toast("Simple message", session = session) + expect_true(message_sent) + expect_equal(toast_id, "bslib-toast-auto") +}) + +test_that("show_toast() and hide_toast() warn if nothing to show/hide", { + session <- list(sendCustomMessage = function(type, message) { + stop("sendCustomMessage should not be called") + }) + + expect_snapshot({ + hide_toast(show_toast(toast(), session = session), session = session) + }) +}) + +test_that("hide_toast() works", { + session <- list(sendCustomMessage = function(type, message) { + expect_equal(type, "bslib.hide-toast") + expect_equal(message$id, !!exp_toast_id) + }) + + exp_toast_id <- "bslib-toast-1234" + t_id <- hide_toast(exp_toast_id, session = session) + expect_equal(t_id, exp_toast_id) + + exp_toast_id <- "custom-id" + t_id2 <- hide_toast(toast("Test", id = exp_toast_id), session = session) + expect_equal(t_id2, exp_toast_id) + + expect_snapshot(error = TRUE, { + hide_toast(toast()) + }) +})