@defra/interactive-map 0.0.40-alpha → 0.0.41-alpha

package/plugins/menu/src/index.test.js

@@ -0,0 +1,31 @@
+import createPlugin from './index.js'
+
+jest.mock('./menu.scss', () => {})
+jest.mock('./manifest.js', () => ({ manifest: { InitComponent: 'MenuInit', panels: [] } }))
+
+describe('createPlugin', () => {
+  it('returns the menu id', () => {
+    expect(createPlugin().id).toBe('menu')
+  })
+
+  it('id cannot be overridden by options', () => {
+    expect(createPlugin({ id: 'other' }).id).toBe('menu')
+  })
+
+  it('returns the default noKeyItemText', () => {
+    expect(createPlugin().noKeyItemText).toBe('No features displayed')
+  })
+
+  it('allows noKeyItemText to be overridden', () => {
+    expect(createPlugin({ noKeyItemText: 'Nothing here' }).noKeyItemText).toBe('Nothing here')
+  })
+
+  it('merges additional options into the returned object', () => {
+    expect(createPlugin({ custom: true }).custom).toBe(true)
+  })
+
+  it('load() resolves to the manifest', async () => {
+    const result = await createPlugin().load()
+    expect(result).toEqual({ InitComponent: 'MenuInit', panels: [] })
+  })
+})

package/plugins/menu/src/initialise/MenuInit.jsx

@@ -0,0 +1,24 @@
+import { useEffect, useRef } from 'react'
+import { createMenu } from './createMenu.js'
+import { attachPluginStateRef } from '../registry/isVisibleWhen.js'
+
+// additional possible params here are: appState, mapProvider,
+export function MenuInit ({ pluginConfig, pluginState, mapState, services }) {
+  const { dispatch } = pluginState
+  const { eventBus } = services
+
+  const pluginStateRef = useRef(pluginState)
+  pluginStateRef.current = pluginState
+
+  useEffect(() => {
+    if (!mapState.isMapReady) {
+      return () => {}
+    }
+    attachPluginStateRef(pluginStateRef)
+    const { menu } = pluginConfig
+    return createMenu({ menu, eventBus, dispatch, pluginStateRef })
+  }, [mapState.isMapReady])
+
+  // Notify any plugins, that are listening, to the menu's state change
+  useEffect(() => eventBus.emit('menu:changed', pluginState.menuState), [pluginState.menuState])
+}

package/plugins/menu/src/initialise/MenuInit.test.jsx

@@ -0,0 +1,50 @@
+import { render } from '@testing-library/react'
+import { MenuInit } from './MenuInit.jsx'
+import { createMenu } from './createMenu.js'
+
+jest.mock('./createMenu.js', () => ({
+  createMenu: jest.fn()
+}))
+
+const mockRemove = jest.fn()
+const mockDispatch = jest.fn()
+const eventBus = { on: jest.fn(), off: jest.fn(), emit: jest.fn(), emitWhenRequested: jest.fn() }
+const services = { eventBus }
+const pluginState = { dispatch: mockDispatch, menuState: null }
+const pluginConfig = { menu: [] }
+
+beforeEach(() => {
+  jest.clearAllMocks()
+  createMenu.mockReturnValue(mockRemove)
+})
+
+describe('MenuInit', () => {
+  it('does not call createMenu when map is not ready', () => {
+    render(<MenuInit mapState={{ isMapReady: false }} services={services} pluginState={pluginState} pluginConfig={pluginConfig} />)
+    expect(createMenu).not.toHaveBeenCalled()
+  })
+
+  it('calls createMenu with eventBus when map is ready', () => {
+    render(<MenuInit mapState={{ isMapReady: true }} services={services} pluginState={pluginState} pluginConfig={pluginConfig} />)
+    expect(createMenu).toHaveBeenCalledWith(expect.objectContaining({ eventBus }))
+  })
+
+  it('calls remove on unmount when map was ready', () => {
+    const { unmount } = render(<MenuInit mapState={{ isMapReady: true }} services={services} pluginState={pluginState} pluginConfig={pluginConfig} />)
+    unmount()
+    expect(mockRemove).toHaveBeenCalled()
+  })
+
+  it('does not call remove on unmount when map was not ready', () => {
+    const { unmount } = render(<MenuInit mapState={{ isMapReady: false }} services={services} pluginState={pluginState} pluginConfig={pluginConfig} />)
+    unmount()
+    expect(mockRemove).not.toHaveBeenCalled()
+  })
+
+  it('calls createMenu again when isMapReady changes to true', () => {
+    const { rerender } = render(<MenuInit mapState={{ isMapReady: false }} services={services} pluginState={pluginState} pluginConfig={pluginConfig} />)
+    expect(createMenu).not.toHaveBeenCalled()
+    rerender(<MenuInit mapState={{ isMapReady: true }} services={services} pluginState={pluginState} pluginConfig={pluginConfig} />)
+    expect(createMenu).toHaveBeenCalledTimes(1)
+  })
+})

package/plugins/menu/src/initialise/createMenu.js

@@ -0,0 +1,10 @@
+import { setDatasetRegistry } from '../registry/getDatasetRegistry.js'
+
+export const createMenu = ({ menu, eventBus, dispatch, pluginStateRef }) => {
+  dispatch({ type: 'SET_MENU', payload: { menu } })
+  // Request a handle on the datasetsRegistry singleton, so that the menu plugin can access it when needed
+  eventBus.requestOnce('datasets:registry', setDatasetRegistry)
+  // add a listener for the menu:state event, which will be emitted whenever requested by other plugins,
+  // e.g. the datasets plugin, so they can access the menu state.
+  return eventBus.emitWhenRequested('menu:state', pluginStateRef)
+}

package/plugins/menu/src/initialise/createMenu.test.js

@@ -0,0 +1,37 @@
+import { createMenu } from './createMenu.js'
+import { setDatasetRegistry } from '../registry/getDatasetRegistry.js'
+
+jest.mock('../registry/getDatasetRegistry.js', () => ({
+  setDatasetRegistry: jest.fn()
+}))
+
+const makeEventBus = () => ({
+  on: jest.fn(),
+  off: jest.fn(),
+  emit: jest.fn(),
+  requestOnce: jest.fn(),
+  emitWhenRequested: jest.fn()
+})
+
+describe('createMenu', () => {
+  it('dispatches SET_MENU with the menu', () => {
+    const eventBus = makeEventBus()
+    const dispatch = jest.fn()
+    const menu = [{ id: 'layer1' }]
+    createMenu({ menu, eventBus, dispatch, pluginStateRef: {} })
+    expect(dispatch).toHaveBeenCalledWith({ type: 'SET_MENU', payload: { menu } })
+  })
+
+  it('calls requestOnce for the datasets registry', () => {
+    const eventBus = makeEventBus()
+    createMenu({ eventBus, dispatch: jest.fn(), pluginStateRef: {} })
+    expect(eventBus.requestOnce).toHaveBeenCalledWith('datasets:registry', setDatasetRegistry)
+  })
+
+  it('calls emitWhenRequested for menu:state', () => {
+    const eventBus = makeEventBus()
+    const pluginStateRef = { current: {} }
+    createMenu({ eventBus, dispatch: jest.fn(), pluginStateRef })
+    expect(eventBus.emitWhenRequested).toHaveBeenCalledWith('menu:state', pluginStateRef)
+  })
+})

package/plugins/menu/src/manifest.js

@@ -0,0 +1,35 @@
+import { Menu } from './components/Menu/Menu.jsx'
+import './registry/getDatasetRegistry.js'
+import { MenuInit } from './initialise/MenuInit.jsx'
+import { initialState, actions } from './reducers/pluginState.js'
+
+export const manifest = {
+  InitComponent: MenuInit,
+  reducer: {
+    initialState,
+    actions
+  },
+  panels: [
+    {
+      id: 'menu',
+      label: 'Layers',
+      mobile: { slot: 'drawer', modal: true, dismissible: true },
+      tablet: { slot: 'left-top', dismissible: true, exclusive: true, width: '260px' },
+      desktop: { slot: 'left-top', modal: false, dismissible: true, exclusive: true, width: '280px' },
+      render: Menu
+    }],
+  buttons: [{
+    id: 'menuButton',
+    label: 'Layers',
+    panelId: 'menu',
+    iconId: 'layersMenu',
+    mobile: { slot: 'top-left', showLabel: true },
+    tablet: { slot: 'top-left', showLabel: true },
+    desktop: { slot: 'top-left', showLabel: true }
+  }],
+
+  icons: [{
+    id: 'layersMenu',
+    svgContent: '<path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"></path><path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12"></path><path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17"></path>'
+  }]
+}

package/plugins/menu/src/manifest.test.js

@@ -0,0 +1,63 @@
+import { manifest } from './manifest.js'
+import { Menu } from './components/Menu/Menu.jsx'
+import { MenuInit } from './initialise/MenuInit.jsx'
+
+jest.mock('./components/Menu/Menu.jsx', () => ({ Menu: jest.fn() }))
+jest.mock('./initialise/MenuInit.jsx', () => ({ MenuInit: jest.fn() }))
+jest.mock('./registry/getDatasetRegistry.js', () => ({}))
+
+describe('manifest', () => {
+  it('sets InitComponent to MenuInit', () => {
+    expect(manifest.InitComponent).toBe(MenuInit)
+  })
+
+  describe('panels', () => {
+    it('defines one panel', () => {
+      expect(manifest.panels).toHaveLength(1)
+    })
+
+    it('panel has id menu', () => {
+      expect(manifest.panels[0].id).toBe('menu')
+    })
+
+    it('panel render is Menu', () => {
+      expect(manifest.panels[0].render).toBe(Menu)
+    })
+
+    it('panel defines mobile, tablet and desktop slots', () => {
+      const { mobile, tablet, desktop } = manifest.panels[0]
+      expect(mobile.slot).toBe('drawer')
+      expect(tablet.slot).toBe('left-top')
+      expect(desktop.slot).toBe('left-top')
+    })
+  })
+
+  describe('buttons', () => {
+    it('defines one button', () => {
+      expect(manifest.buttons).toHaveLength(1)
+    })
+
+    it('button has id menuButton and links to the menu panel', () => {
+      expect(manifest.buttons[0].id).toBe('menuButton')
+      expect(manifest.buttons[0].panelId).toBe('menu')
+    })
+
+    it('button references the layersMenu icon', () => {
+      expect(manifest.buttons[0].iconId).toBe('layersMenu')
+    })
+  })
+
+  describe('icons', () => {
+    it('defines one icon', () => {
+      expect(manifest.icons).toHaveLength(1)
+    })
+
+    it('icon id is layersMenu', () => {
+      expect(manifest.icons[0].id).toBe('layersMenu')
+    })
+
+    it('icon has svgContent', () => {
+      expect(manifest.icons[0].svgContent).toBeTruthy()
+    })
+  })
+})

package/plugins/menu/src/menu.scss

@@ -0,0 +1,4 @@
+// ===================================================
+// Component: Menu
+// ===================================================
+@use './components/Menu/Menu.module';

package/plugins/menu/src/reducers/menuStateReducer.test.js

@@ -0,0 +1,38 @@
+import { buildMenuState } from './menuStateReducer.js'
+
+describe('buildMenuState', () => {
+  it('returns an empty object for an empty menu', () => {
+    expect(buildMenuState([])).toEqual({})
+  })
+
+  it('ignores non-radio menu groups', () => {
+    const menu = [{ id: 'layer', type: 'checkbox', value: 'a' }]
+    expect(buildMenuState(menu)).toEqual({})
+  })
+
+  it('uses the explicit value when set', () => {
+    const menu = [{ id: 'datasets', type: 'radio', value: 'floodZones', items: [{ value: 'other' }] }]
+    expect(buildMenuState(menu)).toEqual({ datasets: 'floodZones' })
+  })
+
+  it('falls back to the first item value when no value is set', () => {
+    const menu = [{ id: 'datasets', type: 'radio', items: [{ value: 'floodZones' }, { value: 'other' }] }]
+    expect(buildMenuState(menu)).toEqual({ datasets: 'floodZones' })
+  })
+
+  it('handles multiple radio groups', () => {
+    const menu = [
+      { id: 'datasets', type: 'radio', value: 'floodZones' },
+      { id: 'timeframe', type: 'radio', items: [{ value: 'presentDay' }] }
+    ]
+    expect(buildMenuState(menu)).toEqual({ datasets: 'floodZones', timeframe: 'presentDay' })
+  })
+
+  it('mixes radio and non-radio groups, only including radios', () => {
+    const menu = [
+      { id: 'layer', type: 'checkbox', value: 'a' },
+      { id: 'datasets', type: 'radio', value: 'floodZones' }
+    ]
+    expect(buildMenuState(menu)).toEqual({ datasets: 'floodZones' })
+  })
+})

package/plugins/menu/src/reducers/pluginState.js

@@ -0,0 +1,35 @@
+import { buildMenuState } from './menuStateReducer.js'
+
+const initialState = {
+  actionsArray: [],
+  menu: [],
+  menuState: {}
+}
+
+const updateMenuState = (state, payload) => {
+  return {
+    ...state,
+    menuState: { ...state.menuState, ...payload }
+  }
+}
+
+const setMenu = (state, payload) => {
+  const { menu } = payload
+  // build the initial menuState for radios from the menu
+  const menuState = buildMenuState(menu)
+  return {
+    ...state,
+    menu,
+    menuState
+  }
+}
+
+const actions = {
+  SET_MENU: setMenu,
+  UPDATE_MENU_STATE: updateMenuState
+}
+
+export {
+  initialState,
+  actions
+}

package/plugins/menu/src/reducers/pluginState.test.js

@@ -0,0 +1,57 @@
+import { initialState, actions } from './pluginState.js'
+
+describe('initialState', () => {
+  it('has the expected shape', () => {
+    expect(initialState).toEqual({
+      actionsArray: [],
+      menu: [],
+      menuState: {}
+    })
+  })
+})
+
+describe('actions.SET_MENU', () => {
+  it('sets the menu on state', () => {
+    const menu = [{ id: 'datasets', type: 'checkbox' }]
+    const result = actions.SET_MENU(initialState, { menu })
+    expect(result.menu).toBe(menu)
+  })
+
+  it('builds menuState from radio groups', () => {
+    const menu = [{ id: 'datasets', type: 'radio', value: 'floodZones' }]
+    const result = actions.SET_MENU(initialState, { menu })
+    expect(result.menuState).toEqual({ datasets: 'floodZones' })
+  })
+
+  it('produces empty menuState when there are no radio groups', () => {
+    const menu = [{ id: 'layer', type: 'checkbox', value: 'a' }]
+    const result = actions.SET_MENU(initialState, { menu })
+    expect(result.menuState).toEqual({})
+  })
+
+  it('does not mutate the existing state', () => {
+    const state = { ...initialState, actionsArray: [1] }
+    const result = actions.SET_MENU(state, { menu: [] })
+    expect(result.actionsArray).toEqual([1])
+  })
+})
+
+describe('actions.UPDATE_MENU_STATE', () => {
+  it('merges payload into menuState', () => {
+    const state = { ...initialState, menuState: { datasets: 'floodZones' } }
+    const result = actions.UPDATE_MENU_STATE(state, { timeframe: 'presentDay' })
+    expect(result.menuState).toEqual({ datasets: 'floodZones', timeframe: 'presentDay' })
+  })
+
+  it('overwrites an existing key', () => {
+    const state = { ...initialState, menuState: { datasets: 'floodZones' } }
+    const result = actions.UPDATE_MENU_STATE(state, { datasets: 'riverNetwork' })
+    expect(result.menuState).toEqual({ datasets: 'riverNetwork' })
+  })
+
+  it('does not mutate the existing state', () => {
+    const state = { ...initialState, actionsArray: [1] }
+    const result = actions.UPDATE_MENU_STATE(state, { datasets: 'floodZones' })
+    expect(result.actionsArray).toEqual([1])
+  })
+})

package/plugins/menu/src/registry/getDatasetRegistry.js

@@ -0,0 +1,9 @@
+// the local _datasetRegistry will only be initialised if the datasets plugin is in use,
+// otherwise it will remain null.
+let _datasetRegistry = null
+
+export const getDatasetRegistry = () => _datasetRegistry
+
+export const setDatasetRegistry = (datasetRegistry) => {
+  _datasetRegistry = datasetRegistry
+}

package/plugins/menu/src/registry/getDatasetRegistry.test.js

@@ -0,0 +1,23 @@
+import { getDatasetRegistry, setDatasetRegistry } from './getDatasetRegistry.js'
+
+afterEach(() => {
+  setDatasetRegistry(null)
+})
+
+describe('getDatasetRegistry', () => {
+  it('returns null before any registry is set', () => {
+    expect(getDatasetRegistry()).toBeNull()
+  })
+
+  it('returns the registry after setDatasetRegistry is called', () => {
+    const registry = { keyItems: jest.fn() }
+    setDatasetRegistry(registry)
+    expect(getDatasetRegistry()).toBe(registry)
+  })
+
+  it('returns null after being reset to null', () => {
+    setDatasetRegistry({ keyItems: jest.fn() })
+    setDatasetRegistry(null)
+    expect(getDatasetRegistry()).toBeNull()
+  })
+})

package/plugins/menu/src/registry/index.js

@@ -0,0 +1,3 @@
+export { getDatasetRegistry } from './getDatasetRegistry.js'
+export { patternRegistry } from '../../../../src/services/patternRegistry.js'
+export { symbolRegistry } from '../../../../src/services/symbolRegistry.js'

package/plugins/menu/src/registry/index.test.js

@@ -0,0 +1,15 @@
+import { getDatasetRegistry, patternRegistry, symbolRegistry } from './index.js'
+
+describe('registry/index', () => {
+  it('exports getDatasetRegistry as a function', () => {
+    expect(typeof getDatasetRegistry).toBe('function')
+  })
+
+  it('exports patternRegistry', () => {
+    expect(patternRegistry).toBeDefined()
+  })
+
+  it('exports symbolRegistry', () => {
+    expect(symbolRegistry).toBeDefined()
+  })
+})

package/plugins/menu/src/registry/isVisibleWhen.js

@@ -0,0 +1,43 @@
+let _pluginStateRef = {}
+export const attachPluginStateRef = (pluginStateRef) => { _pluginStateRef = pluginStateRef }
+
+const _isVisibleWhenMenuCheck = (menuVisibleWhen) => {
+  const menuState = _pluginStateRef?.current?.menuState || {}
+  for (const [key, valueArray] of Object.entries(menuVisibleWhen)) {
+    const menuValue = menuState[key]
+    if (!valueArray.includes(menuValue)) {
+      return false
+    }
+  }
+  return true
+}
+
+/**
+ * receives a visibleWhen boolean or object
+ * and returns a boolean indicating whether the dataset should be visible
+ * if visibleWhen is undefined, it returns true
+ * if visibleWhen is a boolean, it returns that boolean
+ * if visibleWhen is an object, it checks the properties of the object, against the relevant pluginState properties,
+ * and returns true if all properties are satisfied:
+ * @param {boolean|object} visibleWhen - the visibleWhen property of a dataset
+ * @returns {boolean} - true if the dataset should be visible, false otherwise
+ */
+export const isVisibleWhen = (visibleWhen) => {
+  if (visibleWhen === undefined || visibleWhen === null) {
+    return true
+  }
+  if (typeof visibleWhen === 'boolean') {
+    return visibleWhen
+  }
+  if (typeof visibleWhen === 'object') {
+    // check each property of the visibleWhen object against the relevant pluginState property
+    for (const [visibleWhenKey, visibleWhenValue] of Object.entries(visibleWhen)) {
+      if (visibleWhenKey === 'menu' && !_isVisibleWhenMenuCheck(visibleWhenValue)) {
+        return false
+      }
+    }
+    return true
+  }
+  // Fallback to true if visibleWhen is incorrectly configured
+  return true
+}

package/plugins/menu/src/registry/isVisibleWhen.test.js

@@ -0,0 +1,48 @@
+import { isVisibleWhen, attachPluginStateRef } from './isVisibleWhen.js'
+
+const setMenuState = (menuState) => {
+  attachPluginStateRef({ current: { menuState } })
+}
+
+describe('isVisibleWhen', () => {
+  beforeEach(() => {
+    // reset menu state before each test
+    setMenuState({})
+  })
+
+  it('returns true if visibleWhen is undefined', () => {
+    expect(isVisibleWhen(undefined)).toBe(true)
+  })
+
+  it('returns true if visibleWhen is null', () => {
+    expect(isVisibleWhen(null)).toBe(true)
+  })
+
+  it('returns the boolean value if visibleWhen is a boolean', () => {
+    expect(isVisibleWhen(true)).toBe(true)
+    expect(isVisibleWhen(false)).toBe(false)
+  })
+
+  it('returns true if all properties of visibleWhen object are satisfied', () => {
+    setMenuState({ datasets: 'floodZones', timeframe: 'climateChange' })
+    const visibleWhen = { menu: { datasets: ['floodZones'], timeframe: ['climateChange'] } }
+    expect(isVisibleWhen(visibleWhen)).toBe(true)
+  })
+
+  it('returns false if any property of visibleWhen object is not satisfied', () => {
+    setMenuState({ datasets: 'floodZones', timeframe: 'climateChange' })
+    const visibleWhen = { menu: { datasets: ['floodZones'], timeframe: ['presentDay'] } }
+    expect(isVisibleWhen(visibleWhen)).toBe(false)
+  })
+
+  it('returns true if visibleWhen is incorrectly configured', () => {
+    const visibleWhen = 'incorrectly-configured'
+    expect(isVisibleWhen(visibleWhen)).toBe(true)
+  })
+
+  it('falls back to false if menu state is not attached', () => {
+    attachPluginStateRef(null)
+    const visibleWhen = { menu: { datasets: ['floodZones'], timeframe: ['climateChange'] } }
+    expect(isVisibleWhen(visibleWhen)).toBe(false)
+  })
+})

package/plugins/search/dist/css/index.css

@@ -1 +1 @@
-.im-c-search-form{display:none;padding:0;min-height:auto;border-radius:0;filter:var(--search-drop-shadow);-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}.im-c-search-form:before{border-radius:0;box-shadow:none}.im-o-app--mobile .im-c-search-form{position:absolute;left:0;top:0;right:0;height:auto;overflow:visible}.im-o-app--tablet .im-c-search-form,.im-o-app--desktop .im-c-search-form{position:relative;overflow:visible;border-radius:var(--button-border-radius);box-shadow:none}.im-o-app--tablet .im-c-search-form:before,.im-o-app--desktop .im-c-search-form:before{border-radius:var(--button-border-radius)}.im-o-app--tablet .im-c-search-form .im-c-search-suggestions,.im-o-app--desktop .im-c-search-form .im-c-search-suggestions{position:absolute;top:calc(100% + 2px);left:0;right:0;z-index:1}.im-c-search__status{position:absolute;top:100%;left:0;right:0;padding:var(--divider-gap) calc(var(--divider-gap) + 2px);background-color:var(--background-color);border-top:1px solid var(--button-hover-color);border-bottom-left-radius:var(--button-border-radius);border-bottom-right-radius:var(--button-border-radius)}.im-o-app--mobile .im-c-search-form--default-expanded{position:relative;margin:calc(-1*var(--primary-gap)) calc(-1*var(--primary-gap)) 0}.im-o-app--mobile .im-c-search-form--default-expanded .im-c-search-suggestions{position:absolute;top:100%;width:100%;left:0}.im-c-search-close-button{position:relative}.im-c-search-close-button:before{box-shadow:none}.im-c-search-close-button[data-focus-visible=true]{z-index:1}.im-c-search-close-button:hover{z-index:1}.im-c-search-submit-button{position:relative}.im-c-search-submit-button:before{box-shadow:none}.im-c-search-submit-button[data-focus-visible=true]{z-index:1}.im-c-search-suggestions{max-height:calc(100vh - 66px);overflow-y:auto;scroll-padding:0;margin:0;padding:0;background-color:var(--background-color);list-style:none}.im-c-search-suggestions__item{margin:0;padding:calc(var(--divider-gap) + 2px) var(--primary-gap);position:relative;color:var(--secondary-text-color);border-top:1px solid var(--button-hover-color);cursor:pointer;user-select:none}@media(-ms-high-contrast: active),screen and (forced-colors: active){.im-c-search-suggestions__item{color:Highlight}}.im-c-search-suggestions__item mark{font-weight:bold;color:var(--foreground-color);background-color:rgba(0,0,0,0);pointer-events:none}@media(-ms-high-contrast: active),screen and (forced-colors: active){.im-c-search-suggestions__item mark{color:Highlight}}@media(hover: hover)and (pointer: fine){.im-c-search-suggestions__item:hover:not([aria-selected=true]){background-color:var(--button-hover-color)}}.im-c-search-suggestions__item[aria-selected=true]{background-color:var(--button-hover-color)}.im-c-search-suggestions__item[aria-selected=true] mark{color:var(--fixed-foreground-color)}@media(-ms-high-contrast: active),screen and (forced-colors: active){.im-c-search-suggestions__item[aria-selected=true] mark{color:Highlight}}.im-c-search-suggestions__item:hover:not([aria-selected=true]) .im-c-search-suggestions__label{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:2px;text-decoration-color:var(--foreground-color);text-decoration-skip-ink:none}.im-c-search-suggestions__item[aria-selected=true] .im-c-search-suggestions__label{outline:3px solid rgba(0,0,0,0);color:var(--focus-border-color);background-color:var(--focus-outline-color);box-shadow:0 -2px var(--focus-outline-color),0 4px var(--focus-border-color);text-decoration:none}@media(-ms-high-contrast: active),screen and (forced-colors: active){.im-c-search-suggestions__item[aria-selected=true] .im-c-search-suggestions__label{outline-color:Highlight;color:Highlight}}.im-c-search-suggestions__label{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.im-o-app--mobile .im-c-search-form--default-expanded .im-c-search-suggestions{box-shadow:var(--panel-box-shadow);clip-path:inset(0px 0px -20px 0px)}.im-o-app--tablet .im-c-search-suggestions,.im-o-app--desktop .im-c-search-suggestions{border-bottom-left-radius:var(--button-border-radius);border-bottom-right-radius:var(--button-border-radius)}.im-o-app--tablet .im-c-search-suggestions__item,.im-o-app--desktop .im-c-search-suggestions__item{padding:var(--divider-gap) calc(var(--divider-gap) + 2px)}:root{--search-drop-shadow: drop-shadow(0 -2px 20px rgba(0,0,0,.1)) drop-shadow(0 0 12px rgba(0,0,0,.1))}.im-c-search--collapsed{display:none}.im-c-search__input-container{display:flex;position:relative;flex:1 1 auto;min-height:auto;height:var(--button-size)}.im-c-search__input-container:before{content:"";z-index:1;position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;border-radius:var(--button-border-radius);border:2px solid var(--foreground-color);pointer-events:none}@media(-ms-high-contrast: active),screen and (forced-colors: active){.im-c-search__input-container:before{border-color:ButtonText}}@media(-ms-high-contrast: active),screen and (forced-colors: active){.im-c-search__input-container:hover:not(:has(.im-c-search-close-button:hover)):before{border-color:Highlight}}.im-c-search__input-container:after{position:absolute;content:"";pointer-events:none;z-index:99;top:-1px;right:-1px;bottom:-1px;left:-1px;border:var(--focus-border-width) solid var(--focus-border-color);outline:var(--focus-box-shadow-width) solid var(--focus-outline-color);border-radius:calc(var(--button-border-radius) - 2px);opacity:0}@media(prefers-reduced-motion: no-preference){.im-c-search__input-container:after{transition:opacity var(--duration) ease}}.im-o-app .im-c-search__input{width:100%;color:var(--foreground-color);background-color:rgba(0,0,0,0);font-size:1rem;border:0;padding:var(--divider-gap) calc(var(--divider-gap) + 2px);outline:0}.im-o-app .im-c-search__input:focus{outline:3px solid rgba(0,0,0,0);box-shadow:none}@media(-ms-high-contrast: active),screen and (forced-colors: active){.im-o-app .im-c-search__input:focus{outline:none}}.im-o-app .im-c-search__input::placeholder{color:var(--foreground-color)}.im-o-app .im-c-search__input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;display:none}.im-o-app .im-c-search__input::-moz-search-clear{display:none}.im-c-search__hint{display:none}.im-o-app--exclusive-control .im-o-app__top .im-c-button-wrapper,.im-o-app--exclusive-control .im-o-app__right .im-c-button-wrapper{opacity:0;z-index:-1}.im-o-app--exclusive-control .im-c-button-wrapper--search{position:absolute;pointer-events:none}.im-o-app--exclusive-control .im-o-app__left-top .im-c-panel,.im-o-app--exclusive-control .im-o-app__left-bottom .im-c-panel,.im-o-app--exclusive-control .im-o-app__right-top .im-c-panel,.im-o-app--exclusive-control .im-o-app__right-bottom .im-c-panel{opacity:0;z-index:-1}.im-o-app--mobile .im-c-search__input-container{margin:var(--primary-gap)}@media(-ms-high-contrast: active),screen and (forced-colors: active){.im-c-search__input-container--keyboard-focus-within:before{border-color:Highlight}}.im-c-search__input-container--keyboard-focus-within:after{opacity:1}@media(-ms-high-contrast: active),screen and (forced-colors: active){.im-c-search__input-container--keyboard-focus-within:after{opacity:0}}@media(-ms-high-contrast: active),screen and (forced-colors: active){.im-c-search__input-container--keyboard-focus-within{outline:var(--focus-highlight-width) solid Highlight}}
+.im-c-search-form{display:none;padding:0;min-height:auto;border-radius:0;filter:var(--search-drop-shadow)}.im-c-search-form:before{border-radius:0;box-shadow:none}.im-o-app--mobile .im-c-search-form{position:relative;margin:calc(-1*var(--primary-gap)) calc(-1*var(--primary-gap)) 0;overflow:visible}.im-o-app--tablet .im-c-search-form,.im-o-app--desktop .im-c-search-form{position:relative;overflow:visible;border-radius:var(--button-border-radius);box-shadow:none}.im-o-app--tablet .im-c-search-form:before,.im-o-app--desktop .im-c-search-form:before{border-radius:var(--button-border-radius)}.im-o-app--tablet .im-c-search-form .im-c-search-suggestions,.im-o-app--desktop .im-c-search-form .im-c-search-suggestions{position:absolute;top:calc(100% + 2px);left:0;right:0;z-index:1}.im-c-search__status{position:absolute;top:100%;left:0;right:0;padding:var(--divider-gap) calc(var(--divider-gap) + 2px);background-color:var(--background-color);border-top:1px solid var(--button-hover-color);border-bottom-left-radius:var(--button-border-radius);border-bottom-right-radius:var(--button-border-radius)}.im-o-app--mobile .im-c-search-form--default-expanded .im-c-search-suggestions{position:absolute;top:100%;width:100%;left:0}.im-c-search-close-button{position:relative}.im-c-search-close-button:before{box-shadow:none}.im-c-search-close-button[data-focus-visible=true]{z-index:1}.im-c-search-close-button:hover{z-index:1}.im-c-search-submit-button{position:relative}.im-c-search-submit-button:before{box-shadow:none}.im-c-search-submit-button[data-focus-visible=true]{z-index:1}.im-c-search-suggestions{max-height:calc(100vh - 66px);overflow-y:auto;scroll-padding:0;margin:0;padding:0;background-color:var(--background-color);list-style:none}.im-c-search-suggestions__item{margin:0;padding:calc(var(--divider-gap) + 2px) var(--primary-gap);position:relative;color:var(--secondary-text-color);border-top:1px solid var(--button-hover-color);cursor:pointer;user-select:none}@media(-ms-high-contrast: active),screen and (forced-colors: active){.im-c-search-suggestions__item{color:Highlight}}.im-c-search-suggestions__item mark{font-weight:bold;color:var(--foreground-color);background-color:rgba(0,0,0,0);pointer-events:none}@media(-ms-high-contrast: active),screen and (forced-colors: active){.im-c-search-suggestions__item mark{color:Highlight}}@media(hover: hover)and (pointer: fine){.im-c-search-suggestions__item:hover:not([aria-selected=true]){background-color:var(--button-hover-color)}}.im-c-search-suggestions__item[aria-selected=true]{background-color:var(--button-hover-color)}.im-c-search-suggestions__item[aria-selected=true] mark{color:var(--fixed-foreground-color)}@media(-ms-high-contrast: active),screen and (forced-colors: active){.im-c-search-suggestions__item[aria-selected=true] mark{color:Highlight}}.im-c-search-suggestions__item:hover:not([aria-selected=true]) .im-c-search-suggestions__label{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:2px;text-decoration-color:var(--foreground-color);text-decoration-skip-ink:none}.im-c-search-suggestions__item[aria-selected=true] .im-c-search-suggestions__label{outline:3px solid rgba(0,0,0,0);color:var(--focus-border-color);background-color:var(--focus-outline-color);box-shadow:0 -2px var(--focus-outline-color),0 4px var(--focus-border-color);text-decoration:none}@media(-ms-high-contrast: active),screen and (forced-colors: active){.im-c-search-suggestions__item[aria-selected=true] .im-c-search-suggestions__label{outline-color:Highlight;color:Highlight}}.im-c-search-suggestions__label{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.im-o-app--mobile .im-c-search-form--default-expanded .im-c-search-suggestions{box-shadow:var(--panel-box-shadow);clip-path:inset(0px 0px -20px 0px)}.im-o-app--tablet .im-c-search-suggestions,.im-o-app--desktop .im-c-search-suggestions{border-bottom-left-radius:var(--button-border-radius);border-bottom-right-radius:var(--button-border-radius)}.im-o-app--tablet .im-c-search-suggestions__item,.im-o-app--desktop .im-c-search-suggestions__item{padding:var(--divider-gap) calc(var(--divider-gap) + 2px)}:root{--search-drop-shadow: drop-shadow(0 -2px 20px rgba(0,0,0,.1)) drop-shadow(0 0 12px rgba(0,0,0,.1))}.im-c-search{display:flow-root}.im-c-search--collapsed{display:none}.im-o-app__header:has(>.im-c-search--collapsed:only-child){margin-bottom:0}.im-c-search__input-container{display:flex;position:relative;flex:1 1 auto;min-height:auto;height:var(--button-size)}.im-c-search__input-container:before{content:"";z-index:1;position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;border-radius:var(--button-border-radius);border:2px solid var(--foreground-color);pointer-events:none}@media(-ms-high-contrast: active),screen and (forced-colors: active){.im-c-search__input-container:before{border-color:ButtonText}}@media(-ms-high-contrast: active),screen and (forced-colors: active){.im-c-search__input-container:hover:not(:has(.im-c-search-close-button:hover)):before{border-color:Highlight}}.im-c-search__input-container:after{position:absolute;content:"";pointer-events:none;z-index:99;top:-1px;right:-1px;bottom:-1px;left:-1px;border:var(--focus-border-width) solid var(--focus-border-color);outline:var(--focus-box-shadow-width) solid var(--focus-outline-color);border-radius:calc(var(--button-border-radius) - 2px);opacity:0}@media(prefers-reduced-motion: no-preference){.im-c-search__input-container:after{transition:opacity var(--duration) ease}}.im-o-app .im-c-search__input{width:100%;color:var(--foreground-color);background-color:rgba(0,0,0,0);font-size:1rem;border:0;padding:var(--divider-gap) calc(var(--divider-gap) + 2px);outline:0}.im-o-app .im-c-search__input:focus{outline:3px solid rgba(0,0,0,0);box-shadow:none}@media(-ms-high-contrast: active),screen and (forced-colors: active){.im-o-app .im-c-search__input:focus{outline:none}}.im-o-app .im-c-search__input::placeholder{color:var(--foreground-color)}.im-o-app .im-c-search__input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;display:none}.im-o-app .im-c-search__input::-moz-search-clear{display:none}.im-c-search__hint{display:none}.im-o-app--exclusive-control .im-o-app__top .im-c-button-wrapper,.im-o-app--exclusive-control .im-o-app__right .im-c-button-wrapper{opacity:0;z-index:-1}.im-o-app--exclusive-control .im-c-button-wrapper--search{position:absolute;pointer-events:none}.im-o-app--exclusive-control .im-o-app__left-top .im-c-panel,.im-o-app--exclusive-control .im-o-app__left-bottom .im-c-panel,.im-o-app--exclusive-control .im-o-app__right-top .im-c-panel,.im-o-app--exclusive-control .im-o-app__right-bottom .im-c-panel{opacity:0;z-index:-1}.im-o-app--exclusive-control .im-o-app__banner{opacity:0;z-index:-1}.im-o-app--mobile .im-c-search__input-container{margin:var(--primary-gap)}@media(-ms-high-contrast: active),screen and (forced-colors: active){.im-c-search__input-container--keyboard-focus-within:before{border-color:Highlight}}.im-c-search__input-container--keyboard-focus-within:after{opacity:1}@media(-ms-high-contrast: active),screen and (forced-colors: active){.im-c-search__input-container--keyboard-focus-within:after{opacity:0}}@media(-ms-high-contrast: active),screen and (forced-colors: active){.im-c-search__input-container--keyboard-focus-within{outline:var(--focus-highlight-width) solid Highlight}}