Popup

shadow

wje-popup is a low-level overlay used by components such as wje-dropdown and wje-select. In addition to a classic floating panel anchored to a trigger, it supports a responsive mobile bottom sheet presentation.

Mobile bottom sheet

Set mobile-presentation="bottom-sheet" and mobile-break-point when the popup should render as a sheet from the bottom below the configured width. In this mode, the popup moves content into a portal, shows a backdrop, and disables Floating UI positioning so the panel stays attached to the bottom of the viewport.

<wje-popup mobile-presentation="bottom-sheet" mobile-break-point="768">
  <wje-button slot="anchor">Open</wje-button>
  <wje-menu variant="context">
    <wje-menu-item>Confirm</wje-menu-item>
    <wje-menu-item>Cancel</wje-menu-item>
  </wje-menu>
</wje-popup>

The backdrop is available through ::part(backdrop) and the panel through ::part(native). Mobile sheet styling uses --wje-popup-backdrop-background, --wje-popup-backdrop-opacity, --wje-popup-mobile-background, --wje-popup-mobile-border-radius, --wje-popup-mobile-box-shadow, --wje-popup-mobile-max-height, --wje-popup-mobile-transition-duration, and --wje-popup-mobile-transition-easing.

When a popup has size, it normally stays locked to the anchor width. Components that need wider loading content can internally enable contentAwareSize so the popup grows to fit its content.

When to use

Use wje-popup when you build a custom overlay tied to a trigger or need the shared base for a menu, select, or contextual panel.

When not to use

Don't use multiple competing feedback channels at the same time for one event.

Accessibility

The trigger needs a clear accessible name, and menu-like content should set appropriate roles on nested items. In mobile sheet mode, make sure backdrop dismiss is not the only way to close the overlay.

Recommended practices

• For common dropdown scenarios, prefer higher-level components such as wje-dropdown or wje-select.
• In portal mode, verify that events and router links remain bound after content is moved.
• In mobile sheet mode, tune the backdrop and max-height with CSS variables for the concrete layout.

Attributes and properties

loader

Popis	Určuje, či je voľba loader zapnutá a ovplyvňuje správanie komponentu.
Atribút	loader
Typ	boolean
Predvolené	false

manual

Popis	Určuje, či je voľba manual zapnutá a ovplyvňuje správanie komponentu.
Atribút	manual
Typ	boolean
Predvolené	false

mobileBreakPoint

Popis	Nastavuje textovú hodnotu uloženú vo voľbe mobile-break-point.
Atribút	mobile-break-point
Typ	string
Predvolené	768

mobilePresentation

Popis	Nastavuje textovú hodnotu uloženú vo voľbe mobile-presentation.
Atribút	mobile-presentation
Typ	string
Predvolené	-

portal

Popis	Určuje, či je voľba portal zapnutá a ovplyvňuje správanie komponentu.
Atribút	portal
Typ	boolean
Predvolené	false

Events

Názov	Popis
wje-portal:restored	Vyvolá sa pri odoslaní udalosti wje-portal:restored.
wje-popup:reposition	Vyvolá sa pri odoslaní udalosti wje-popup:reposition.
wje-popup:show	Vyvolá sa pri odoslaní udalosti wje-popup:show.
wje-popup:hide	Vyvolá sa pri odoslaní udalosti wje-popup:hide.
wje-popup:beforeshow	Vyvolá sa pri odoslaní udalosti wje-popup:beforeshow.
wje-popup:aftershow	Vyvolá sa pri odoslaní udalosti wje-popup:aftershow.
wje-router:rebind	Vyvolá sa pri odoslaní udalosti wje-router:rebind.
wje-popup:opened	Vyvolá sa pri otvorení komponentu.

Methods

setAnchor

Popis	Nastaví anchor a aplikuje súvisiace zmeny stavu.
Signatúra	() => void

clearBottomSheetRestoreTimeout

Popis	Vyčistí bottom sheet restore timeout a obnoví súvisiace hodnoty.
Signatúra	() => void

isBottomSheetActive

Popis	Overí, či je bottom sheet active aktuálne pravda.
Signatúra	() => void

setBottomSheetState

Popis	Nastaví bottom sheet state a aplikuje súvisiace zmeny stavu.
Signatúra	(isActive: any) => void

clearBottomSheetState

Popis	Vyčistí bottom sheet state a obnoví súvisiace hodnoty.
Signatúra	() => void

rebindPortaledRouter

Popis	Spustí metódu rebindPortaledRouter na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	() => void

syncResponsivePresentation

Popis	Synchronizuje responsive presentation s externým alebo interným zdrojom stavu.
Signatúra	() => void

getBottomSheetTransitionDurationMs

Popis	Vráti bottom sheet transition duration ms z aktuálneho stavu komponentu.
Signatúra	() => void

show

Popis	Zobrazí show v používateľskom rozhraní komponentu.
Signatúra	(dispatchEvent?: boolean) => void

hide

Popis	Skryje hide v používateľskom rozhraní komponentu.
Signatúra	(dispatchEvent: any) => void

CSS shadow parts

Názov	Popis
native	Štýluje koreňovú shadow časť komponentu.
backdrop	Štýluje shadow časť backdrop.

CSS custom variables

Názov	Popis
--wje-popup-backdrop-background	Vlastná CSS premenná na štýlovanie komponentu (backdrop background).
--wje-popup-backdrop-opacity	Vlastná CSS premenná, ktorá riadi úroveň priehľadnosti.
--wje-popup-mobile-background	Vlastná CSS premenná na štýlovanie komponentu (mobile background).
--wje-popup-mobile-border-radius	Vlastná CSS premenná, ktorá riadi zaoblenie rohov.
--wje-popup-mobile-box-shadow	Vlastná CSS premenná, ktorá riadi tieň.
--wje-popup-mobile-max-height	Vlastná CSS premenná, ktorá riadi mobile max height.
--wje-popup-mobile-transition-duration	Vlastná CSS premenná, ktorá riadi časovanie animácie a prechodov.
--wje-popup-mobile-transition-easing	Vlastná CSS premenná, ktorá riadi časovanie animácie a prechodov.
--wje-popup-loader-inset	Vlastná CSS premenná na štýlovanie komponentu (loader inset).

Slots

Názov	Popis
anchor	Slot pre kotviaci alebo referenčný prvok.
arrow	Slot pre vlastný prvok šípky.
default	Predvolený slot pre hlavný obsah komponentu.