@swisspost/design-system-components 10.6.0 → 10.8.0

package/dist/types/components/post-popovercontainer/post-popovercontainer.d.ts

@@ -1,66 +1,64 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { Placement } from '@floating-ui/dom';
-import { popIn } from "../../animations/pop-in";
-interface PopoverElement {
-    showPopover: () => void;
-    hidePopover: () => void;
-    togglePopover: (force?: boolean) => boolean;
-}
-declare const ANIMATIONS: {
-    readonly 'pop-in': typeof popIn;
-};
-export type AnimationName = keyof typeof ANIMATIONS;
-export type PostPopoverElement = HTMLElement & PopoverElement;
+import { Side } from '@floating-ui/utils';
 /**
- * @slot - Default slot for placing content inside the popovercontainer.
+ * @slot - Default slot for placing content inside the popover.
  */
 export declare class PostPopovercontainer {
-    private static readonly STATIC_SIDES;
-    private static readonly PROPERTIES_TO_CLEAR;
-    host: HTMLPostPopovercontainerElement;
+    /** The element the popover is anchored to */
+    private anchorRef;
     private arrowRef;
-    private eventTarget;
-    private clearAutoUpdate;
+    private hasBeenOpened;
     private toggleTimeoutId;
-    private hasOpenedOnce;
-    private boundMouseTrackingHandler;
-    constructor();
+    private runningAnimation;
+    private stopAutoUpdate;
+    host: HTMLPostPopovercontainerElement;
     /**
-     * Fires whenever the popovercontainer is about to be shown, passing in event.detail a `first` boolean, which is true if it is to be shown for the first time.
+     * Emitted just before the popover is shown.
+     *
+     * The payload contains a `first` boolean, that is set to `true` when the popover is about to be
+     * shown for the first time.
      */
     postBeforeShow: EventEmitter<{
         first?: boolean;
     }>;
     /**
-     * Fires whenever the popovercontainer is shown, passing in event.detail a `first` boolean, which is true if it is shown for the first time.
+     * Emitted just after the popover is shown.
+     *
+     * The payload contains a `first` boolean, that is set to `true` when the popover is shown for the
+     * first time.
      */
     postShow: EventEmitter<{
         first?: boolean;
     }>;
     /**
-     * Fires whenever the popovercontainer is hidden.
+     * Emitted just after the popover is hidden.
      */
     postHide: EventEmitter;
     /**
-     * Fires whenever the popovercontainer is about to be shown or hidden, passing in event.detail a `willOpen` boolean, which is true if the popovercontainer is about to be opened and false if it is about to be closed.
+     * Emitted just before the popover's state changes.
+     *
+     * The payload contains a `willOpen` boolean, that is set to `true` when the popover is about to
+     * be shown, `false` when it is about to be hidden.
      */
     postBeforeToggle: EventEmitter<{
         willOpen: boolean;
     }>;
     /**
-     * Fires whenever the popovercontainer gets shown or hidden, passing in event.detail an object containing a `isOpen`boolean, which is true if the popovercontainer was opened and false if it was closed.
+     * Emitted just after the popover's state changes.
+     *
+     * The payload contains a `isOpen` boolean, that is set to `true` when the popover is shown,
+     * `false` when it is hidden.
      */
     postToggle: EventEmitter<{
         isOpen: boolean;
     }>;
     /**
-     * Defines the placement of the popovercontainer according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement.
-     * Popovercontainers are automatically flipped to the opposite side if there is not enough available space and are shifted
-     * towards the viewport if they would overlap edge boundaries.
+     * Placement of the popover according to the floating-ui options.
      */
     readonly placement?: Placement;
     /**
-     * Gap between the edge of the page and the popovercontainer
+     * Gap between the edge of the viewport and the popover.
      */
     readonly edgeGap?: number;
     /**
@@ -68,77 +66,84 @@ export declare class PostPopovercontainer {
      */
     readonly offset?: number;
     /**
-     * Whether or not to display a little pointer arrow
+     * Show a little indicator arrow
      */
     readonly arrow?: boolean;
-    dynamicPlacement?: string;
     /**
-     * Enables a safespace through which the cursor can be moved without the popover being disabled
+     * Whether to add a space through which the mouse can move without the popover being hidden.
      */
-    readonly safeSpace?: 'triangle' | 'trapezoid';
+    readonly safeSpace?: boolean;
     /**
-     * Whether to automatically hide the popover when the target moves outside the scrollport.
+     * Whether to automatically hide the popover when the anchor moves outside the scrollport.
      *
-     * If the `post-header` can cover the target, the popover will also be hidden as soon as the
-     * target scrolls behind it.
+     * If the `post-header` can cover the anchor, the popover will also be hidden as soon as the
+     * anchor scrolls behind it.
      */
     readonly autoHide?: boolean;
     /**
-     * Animation style
-     */
-    private readonly animation;
-    /**
-     * Updates cursor position for safe space feature when popover is open.
-     * Sets CSS custom properties for dynamic styling of safe area.
-     * @param event MouseEvent with cursor position
+     * Whether to keep resizing the popover while it is open.
+     *
+     * Every popover is sized once when it opens: the space available around the anchor, minus the
+     * `edgeGap`, becomes the maximum width and height of the popover. The placement is then
+     * recalculated for that size.
+     *
+     * With `autoResize`, the popover's size is recalculated on every position update, for example
+     * when the anchor moves while scrolling.
      */
-    private mouseTrackingHandler;
-    private currentAnimation;
+    readonly autoResize?: boolean;
+    side: Side;
     connectedCallback(): void;
     componentDidLoad(): void;
     disconnectedCallback(): void;
+    private cleanup;
+    private isOpen;
+    private getContent;
+    private getContentMinSize;
     /**
-     * Programmatically display the popovercontainer
-     * @param target The element that invokes the popover and to which it is visually anchored.
+     * Shows the popover.
+     * @param anchor the element that the popover is visually anchored to.
      */
-    show(target: HTMLElement): Promise<void>;
+    show(anchor: HTMLElement): Promise<void>;
     /**
-     * Programmatically hide the popovercontainer
+     * Hides the popover.
      */
     hide(): Promise<void>;
     /**
-     * Toggle popovercontainer display
-     * @param target The element that invokes the popover and to which it is visually anchored.
-     * @param force Pass true to always show or false to always hide
+     * Toggles the popover's state from hidden to showing and vice versa.
+     *
+     * If `state` is specified, the popover is forced to be shown if the is set to `true`, or hidden
+     * if it is set to `false`.
+     *
+     * @param anchor the element that the popover is visually anchored to.
+     * @param force the next state of the popover.
+     * @returns the new state of the popover: `true` if it is shown, `false` if it is hidden.
      */
-    toggle(target: HTMLElement, force?: boolean): Promise<boolean>;
+    toggle(anchor: HTMLElement, force?: boolean): Promise<boolean>;
     /**
-     * Handles the popover opening process and emits related events.
+     * Handles the popover's state transition from hidden to showing and vice versa.
      */
-    private open;
+    private handleToggle;
     /**
-     * Handles the popover closing process and emits related events.
+     * Handles the popover's state transition from hidden to showing, emitting related events.
      */
-    private close;
+    private handleOpen;
     /**
-     * Runs the animation and emits the toggle/show/hide events in the correct timing
+     * Run the open animation for the popover.
      */
     private runOpenAnimation;
     /**
-     * Start or stop auto updates based on popovercontainer events.
-     * Popovercontainers can be closed or opened with other methods than class members,
-     * therefore listening to the toggle event is safer for cleaning up.
-     * @param e ToggleEvent
+     * Handles the popover's state transition from showing to hidden, emitting related events.
      */
-    private handleToggle;
+    private handleClose;
+    /**
+     * Listen for changes that affect the popover's position and update it accordingly.
+     */
+    private startAutoUpdate;
     /**
-     * Start listening for DOM updates, scroll events etc. that have
-     * an influence on popovercontainer positioning
+     * Updates the position of the popover based on the anchor's position and the specified placement.
+     * @param withSize whether to resize the popover based on the available space.
      */
-    private startAutoupdates;
     private updatePosition;
-    private calculatePosition;
-    private updateSafeSpaceBoundaries;
+    private computePosition;
     render(): any;
 }
-export {};

package/dist/types/components.d.ts

@@ -579,21 +579,25 @@ export namespace Components {
     }
     interface PostPopovercontainer {
         /**
-          * Whether or not to display a little pointer arrow
+          * Show a little indicator arrow
           * @default false
          */
         "arrow"?: boolean;
         /**
-          * Whether to automatically hide the popover when the target moves outside the scrollport.  If the `post-header` can cover the target, the popover will also be hidden as soon as the target scrolls behind it.
+          * Whether to automatically hide the popover when the anchor moves outside the scrollport.  If the `post-header` can cover the anchor, the popover will also be hidden as soon as the anchor scrolls behind it.
          */
         "autoHide"?: boolean;
         /**
-          * Gap between the edge of the page and the popovercontainer
+          * Whether to keep resizing the popover while it is open.  Every popover is sized once when it opens: the space available around the anchor, minus the `edgeGap`, becomes the maximum width and height of the popover. The placement is then recalculated for that size.  With `autoResize`, the popover's size is recalculated on every position update, for example when the anchor moves while scrolling.
+         */
+        "autoResize"?: boolean;
+        /**
+          * Gap between the edge of the viewport and the popover.
           * @default 8
          */
         "edgeGap"?: number;
         /**
-          * Programmatically hide the popovercontainer
+          * Hides the popover.
          */
         "hide": () => Promise<void>;
         /**
@@ -601,25 +605,26 @@ export namespace Components {
          */
         "offset"?: number;
         /**
-          * Defines the placement of the popovercontainer according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement. Popovercontainers are automatically flipped to the opposite side if there is not enough available space and are shifted towards the viewport if they would overlap edge boundaries.
+          * Placement of the popover according to the floating-ui options.
           * @default 'top'
          */
         "placement"?: Placement1;
         /**
-          * Enables a safespace through which the cursor can be moved without the popover being disabled
+          * Whether to add a space through which the mouse can move without the popover being hidden.
          */
-        "safeSpace"?: 'triangle' | 'trapezoid';
+        "safeSpace"?: boolean;
         /**
-          * Programmatically display the popovercontainer
-          * @param target The element that invokes the popover and to which it is visually anchored.
+          * Shows the popover.
+          * @param anchor the element that the popover is visually anchored to.
          */
-        "show": (target: HTMLElement) => Promise<void>;
+        "show": (anchor: HTMLElement) => Promise<void>;
         /**
-          * Toggle popovercontainer display
-          * @param target The element that invokes the popover and to which it is visually anchored.
-          * @param force Pass true to always show or false to always hide
+          * Toggles the popover's state from hidden to showing and vice versa.  If `state` is specified, the popover is forced to be shown if the is set to `true`, or hidden if it is set to `false`.
+          * @param anchor the element that the popover is visually anchored to.
+          * @param force the next state of the popover.
+          * @returns the new state of the popover: `true` if it is shown, `false` if it is hidden.
          */
-        "toggle": (target: HTMLElement, force?: boolean) => Promise<boolean>;
+        "toggle": (anchor: HTMLElement, force?: boolean) => Promise<boolean>;
     }
     interface PostProgressbar {
         /**
@@ -1640,6 +1645,9 @@ declare namespace LocalJSX {
         "url"?: string;
     }
     interface PostLanguageMenu {
+        /**
+          * An event emitted when the active language changes. The payload is the ISO 639 code of the newly active language.
+         */
         "onPostChange"?: (event: PostLanguageMenuCustomEvent<string>) => void;
         /**
           * A title for the list of language options
@@ -1846,16 +1854,20 @@ declare namespace LocalJSX {
     }
     interface PostPopovercontainer {
         /**
-          * Whether or not to display a little pointer arrow
+          * Show a little indicator arrow
           * @default false
          */
         "arrow"?: boolean;
         /**
-          * Whether to automatically hide the popover when the target moves outside the scrollport.  If the `post-header` can cover the target, the popover will also be hidden as soon as the target scrolls behind it.
+          * Whether to automatically hide the popover when the anchor moves outside the scrollport.  If the `post-header` can cover the anchor, the popover will also be hidden as soon as the anchor scrolls behind it.
          */
         "autoHide"?: boolean;
         /**
-          * Gap between the edge of the page and the popovercontainer
+          * Whether to keep resizing the popover while it is open.  Every popover is sized once when it opens: the space available around the anchor, minus the `edgeGap`, becomes the maximum width and height of the popover. The placement is then recalculated for that size.  With `autoResize`, the popover's size is recalculated on every position update, for example when the anchor moves while scrolling.
+         */
+        "autoResize"?: boolean;
+        /**
+          * Gap between the edge of the viewport and the popover.
           * @default 8
          */
         "edgeGap"?: number;
@@ -1864,34 +1876,34 @@ declare namespace LocalJSX {
          */
         "offset"?: number;
         /**
-          * Fires whenever the popovercontainer is about to be shown, passing in event.detail a `first` boolean, which is true if it is to be shown for the first time.
+          * Emitted just before the popover is shown.  The payload contains a `first` boolean, that is set to `true` when the popover is about to be shown for the first time.
          */
         "onPostBeforeShow"?: (event: PostPopovercontainerCustomEvent<{ first?: boolean }>) => void;
         /**
-          * Fires whenever the popovercontainer is about to be shown or hidden, passing in event.detail a `willOpen` boolean, which is true if the popovercontainer is about to be opened and false if it is about to be closed.
+          * Emitted just before the popover's state changes.  The payload contains a `willOpen` boolean, that is set to `true` when the popover is about to be shown, `false` when it is about to be hidden.
          */
         "onPostBeforeToggle"?: (event: PostPopovercontainerCustomEvent<{ willOpen: boolean }>) => void;
         /**
-          * Fires whenever the popovercontainer is hidden.
+          * Emitted just after the popover is hidden.
          */
         "onPostHide"?: (event: PostPopovercontainerCustomEvent<any>) => void;
         /**
-          * Fires whenever the popovercontainer is shown, passing in event.detail a `first` boolean, which is true if it is shown for the first time.
+          * Emitted just after the popover is shown.  The payload contains a `first` boolean, that is set to `true` when the popover is shown for the first time.
          */
         "onPostShow"?: (event: PostPopovercontainerCustomEvent<{ first?: boolean }>) => void;
         /**
-          * Fires whenever the popovercontainer gets shown or hidden, passing in event.detail an object containing a `isOpen`boolean, which is true if the popovercontainer was opened and false if it was closed.
+          * Emitted just after the popover's state changes.  The payload contains a `isOpen` boolean, that is set to `true` when the popover is shown, `false` when it is hidden.
          */
         "onPostToggle"?: (event: PostPopovercontainerCustomEvent<{ isOpen: boolean }>) => void;
         /**
-          * Defines the placement of the popovercontainer according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement. Popovercontainers are automatically flipped to the opposite side if there is not enough available space and are shifted towards the viewport if they would overlap edge boundaries.
+          * Placement of the popover according to the floating-ui options.
           * @default 'top'
          */
         "placement"?: Placement1;
         /**
-          * Enables a safespace through which the cursor can be moved without the popover being disabled
+          * Whether to add a space through which the mouse can move without the popover being hidden.
          */
-        "safeSpace"?: 'triangle' | 'trapezoid';
+        "safeSpace"?: boolean;
     }
     interface PostProgressbar {
         /**
@@ -2212,8 +2224,9 @@ declare namespace LocalJSX {
         "edgeGap": number;
         "offset": number;
         "arrow": boolean;
-        "safeSpace": 'triangle' | 'trapezoid';
+        "safeSpace": boolean;
         "autoHide": boolean;
+        "autoResize": boolean;
     }
     interface PostProgressbarAttributes {
         "min": number;

package/dist/types/utils/floating-ui/middleware/flip.d.ts

@@ -0,0 +1,14 @@
+import { Derivable, DetectOverflowOptions, Middleware } from '@floating-ui/dom';
+import { Dimensions } from '@floating-ui/utils';
+export declare const FLIP_MIDDLEWARE = "post-flip";
+export type FlipOptions = Omit<DetectOverflowOptions, 'elementContext'> & {
+    minSize?: Partial<Dimensions>;
+};
+/**
+ * Changes the placement of the floating element to keep it in view.
+ *
+ * Unlike the Floating UI `flip` middleware, placements are measured against `minSize` rather than
+ * against the current size of the floating element, and the placement with the smallest deficit is
+ * used when none of them fits.
+ */
+export declare function flip(options?: FlipOptions | Derivable<FlipOptions>): Middleware;

package/dist/types/utils/floating-ui/middleware/safe-space.d.ts

@@ -0,0 +1,10 @@
+import { Middleware } from '@floating-ui/dom';
+export declare const SAFE_SPACE_MIDDLEWARE = "post-safe-space";
+export interface SafeSpaceData {
+    polygon: string;
+}
+/**
+ * Computes the safe space, the area the pointer can travel through to get from the reference to
+ * the floating element.
+ */
+export declare function safeSpace(): Middleware;

package/dist/types/utils/floating-ui/util.d.ts

@@ -0,0 +1,4 @@
+import { Side } from '@floating-ui/utils';
+export declare const getNextSide: (side: Side) => Side;
+export declare const getOppositeSide: (side: Side) => Side;
+export declare const getPreviousSide: (side: Side) => Side;

package/dist/types/utils/index.d.ts

@@ -8,6 +8,7 @@ export * from './event-from';
 export * from './get-focusable-children';
 export * from './get-root';
 export * from './get-slotted-element';
+export * from './is-focus-visible';
 export * from './is-iso-date';
 export * from './is-motion-reduced';
 export * from './is-value-empty';

package/dist/types/utils/is-focus-visible.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Checks whether an element currently matches `:focus-visible`, i.e. whether
+ * it was focused via keyboard rather than mouse/touch interaction.
+ */
+export declare function isFocusVisible(element: Element | null): boolean;

package/dist/vrt/helpers/header-test-config.js

@@ -113,5 +113,6 @@ export const TEST_MATRIX = {
     'jobs-loggedout': stateComposeHelper(SCROLLED_ONLY, BURGER_FLOW_NO_SECOND),
     'jobs-loggedin': stateComposeHelper(LOGGED_IN),
     'onepager': stateComposeHelper(SCROLLED_ONLY, LANGUAGE_AND_SCROLL),
-    'application': stateComposeHelper(SCROLLED_ONLY, LANGUAGE_AND_SCROLL),
+    'application-compact': stateComposeHelper(SCROLLED_ONLY, LANGUAGE_AND_SCROLL),
+    'application-condensed': stateComposeHelper(SCROLLED_ONLY, LANGUAGE_AND_SCROLL),
 };