@swisspost/design-system-components 10.0.0-next.42 → 10.0.0-next.44

package/dist/post-components/post-components.esm.js

@@ -1 +1 @@
-import{p as e,g as a,b as l}from"./p-CVhzhVv0.js";export{s as setNonce}from"./p-CVhzhVv0.js";(()=>{const a=import.meta.url,l={};return""!==a&&(l.resourcesUrl=new URL(".",a).href),e(l)})().then((async e=>(await a(),l([["p-a2847d8c",[[1,"post-language-switch",{caption:[1],description:[1],variant:[1],activeLang:[32]},[[0,"postChange","handlePostChange"],[0,"postLanguageOptionInitiallyActive","handleInitiallyActive"]],{caption:["validateCaption"],description:["validateDescription"],variant:["validateVariant"]}],[1,"post-closebutton"],[4,"post-mainnavigation",{canScrollLeft:[32],canScrollRight:[32]},[[9,"mouseup","stopScrolling"],[9,"mouseleave","stopScrolling"]]],[1,"post-header",{device:[32],mobileMenuExtended:[32],megadropdownOpen:[32],toggleMobileMenu:[64]},null,{device:["lockBody"],mobileMenuExtended:["lockBody"]}],[4,"post-language-option",{code:[1],active:[1540],variant:[1],name:[1],url:[1],select:[64]},null,{code:["validateCode"],variant:["validateVariant"],name:["validateName"],url:["validateUrl"]}],[4,"post-list",{titleHidden:[4,"title-hidden"],horizontal:[516],titleId:[32]}],[1,"post-list-item"],[1,"post-logo",{url:[1]},null,{url:["validateUrl"]}],[4,"post-megadropdown",{device:[32],isVisible:[32],animationClass:[32],toggle:[64],show:[64],hide:[64],focusFirst:[64]}],[4,"post-megadropdown-trigger",{for:[1],ariaExpanded:[32]},null,{for:["validateControlFor"]}],[1,"post-togglebutton",{toggled:[1028]}],[1,"post-menu",{placement:[1],isVisible:[32],toggle:[64],show:[64],hide:[64]},null,{placement:["validatePlacement"]}],[4,"post-menu-trigger",{for:[513],ariaExpanded:[32]},null,{for:["validateControlFor"]}],[4,"post-popovercontainer",{placement:[1],edgeGap:[2,"edge-gap"],animation:[1],arrow:[4],manualClose:[4,"manual-close"],safeSpace:[513,"safe-space"],show:[64],hide:[64],toggle:[64]},null,{placement:["validatePlacement"],edgeGap:["validateEdgeGap"],safeSpace:["validateSafeSpace"]}],[1,"post-icon",{animation:[1],base:[1],flipH:[4,"flip-h"],flipV:[4,"flip-v"],name:[513],rotate:[2],scale:[2]},null,{animation:["validateAnimation"],base:["validateBase"],name:["validateName"],rotate:["validateRotate"],scale:["validateScale"]}]]],["p-9a814dc9",[[1,"post-breadcrumbs",{homeUrl:[1,"home-url"],homeText:[1,"home-text"],breadcrumbItems:[32],isConcatenated:[32],lastWindowWidth:[32]},null,{homeUrl:["validateHomeUrl"],homeText:["validateHomeText"]}]]],["p-7ff04db9",[[1,"post-footer",{label:[1],device:[32],gridSlotDisplayed:[32]},null,{label:["validateLabel"]}]]],["p-bd16c322",[[1,"post-back-to-top",{label:[513],belowFold:[32]},null,{label:["validateLabel"],belowFold:["watchBelowFold"]}]]],["p-d9e33696",[[1,"post-banner",{dismissible:[4],dismissLabel:[1,"dismiss-label"],icon:[1],type:[1],bannerId:[32],classes:[32],hasActions:[32],hasHeading:[32],onDismissButtonClick:[32],dismiss:[64]},null,{dismissible:["checkDismissible"],icon:["validateIcon"],type:["validateType"]}]]],["p-4c44a7b6",[[65,"post-card-control",{label:[513],description:[1],type:[1],name:[1],value:[1],checked:[1028],disabled:[1028],validity:[1028],icon:[1],focused:[32],reset:[64],groupReset:[64]},null,{label:["validateControlLabel"],description:["validateControlDescription"],type:["validateControlType"],name:["validateControlName"],value:["validateControlValue"],icon:["validateControlIcon"],checked:["updateControlChecked"],disabled:["updateControlDisabled"]}]]],["p-e5f6c467",[[1,"post-popover",{placement:[1],closeButtonCaption:[1,"close-button-caption"],arrow:[4],show:[64],hide:[64],toggle:[64]},null,{placement:["validatePlacement"],closeButtonCaption:["validateCloseButtonCaption"]}]]],["p-8036d63d",[[1,"post-rating",{label:[1],stars:[2],currentRating:[1026,"current-rating"],readonly:[4],hoveredIndex:[32]},null,{label:["validateLabel"],stars:["validateStars"],currentRating:["validateCurrentRating"]}]]],["p-d1db269a",[[1,"post-tag",{variant:[1],size:[1],icon:[1],classes:[32]},null,{variant:["variantChanged"],size:["sizeChanged"],icon:["validateName"]}]]],["p-65b70b56",[[1,"post-tooltip",{placement:[1],arrow:[4],animation:[1],open:[1540],show:[64],hide:[64],toggle:[64]},null,{placement:["validatePlacement"]}]]],["p-f06866d2",[[1,"post-avatar",{firstname:[513],lastname:[1],userid:[1],email:[1],slottedImage:[32],avatarType:[32],imageUrl:[32],imageAlt:[32],initials:[32]},null,{firstname:["validateFirstname"],lastname:["validateLastname"],userid:["validateUserid"],email:["validateEmail"]}]]],["p-b62dfb1e",[[1,"post-linkarea"]]],["p-c949f699",[[1,"post-tab-header",{panel:[513],tabId:[32]},null,{panel:["validateFor"]}]]],["p-3b0fdc33",[[1,"post-tab-panel",{name:[513],panelId:[32]},null,{name:["validateName"]}]]],["p-1a2f3472",[[1,"post-tabs",{activePanel:[1,"active-panel"],show:[64]}]]],["p-ecfbdd8d",[[1,"post-tooltip-trigger",{for:[513],delay:[2]},null,{for:["validateControlFor"]}]]],["p-79551aa5",[[1,"post-collapsible",{collapsed:[1028],toggle:[64]},null,{collapsed:["collapsedChange"]}],[1,"post-collapsible-trigger",{for:[513],update:[64]},null,{for:["validateAriaAttributes"]}]]],["p-c25faa09",[[1,"post-accordion-item",{collapsed:[1028],headingLevel:[2,"heading-level"],id:[32],slottedLogo:[32],toggle:[64]},[[2,"postToggle","onCollapseToggle"]],{headingLevel:["validateHeadingLevel"]}],[1,"post-accordion",{headingLevel:[2,"heading-level"],multiple:[4],toggle:[64],expandAll:[64],collapseAll:[64]},[[0,"postToggle","collapseToggleHandler"]],{headingLevel:["validateHeadingLevel"]}]]],["p-16a44ba9",[[1,"post-breadcrumb-item",{url:[1],fullUrl:[32]},null,{url:["validateUrl"]}],[4,"post-menu-item"]]]],e))));
+import{p as e,g as a,b as l}from"./p-C8a0ddDa.js";export{s as setNonce}from"./p-C8a0ddDa.js";(()=>{const a=import.meta.url,l={};return""!==a&&(l.resourcesUrl=new URL(".",a).href),e(l)})().then((async e=>(await a(),l([["p-0bf2c2a2",[[1,"post-breadcrumbs",{homeUrl:[1,"home-url"],homeText:[1,"home-text"],breadcrumbItems:[32],isConcatenated:[32],lastWindowWidth:[32]},null,{homeUrl:["validateHomeUrl"],homeText:["validateHomeText"]}]]],["p-8bd78b58",[[1,"post-footer",{label:[1],device:[32],gridSlotDisplayed:[32]},null,{label:["validateLabel"]}]]],["p-6768ff84",[[1,"post-back-to-top",{label:[513],belowFold:[32]},null,{label:["validateLabel"],belowFold:["watchBelowFold"]}]]],["p-0cbafde4",[[1,"post-banner",{dismissible:[4],dismissLabel:[1,"dismiss-label"],icon:[1],type:[1],bannerId:[32],classes:[32],hasActions:[32],hasHeading:[32],onDismissButtonClick:[32],dismiss:[64]},null,{dismissible:["checkDismissible"],icon:["validateIcon"],type:["validateType"]}]]],["p-7f0533f7",[[65,"post-card-control",{label:[513],description:[1],type:[1],name:[1],value:[1],checked:[1028],disabled:[1028],validity:[1028],icon:[1],focused:[32],reset:[64],groupReset:[64]},null,{label:["validateControlLabel"],description:["validateControlDescription"],type:["validateControlType"],name:["validateControlName"],value:["validateControlValue"],icon:["validateControlIcon"],checked:["updateControlChecked"],disabled:["updateControlDisabled"]}]]],["p-a4316d9b",[[1,"post-popover",{placement:[1],closeButtonCaption:[1,"close-button-caption"],arrow:[4],show:[64],hide:[64],toggle:[64]},null,{placement:["validatePlacement"],closeButtonCaption:["validateCloseButtonCaption"]}]]],["p-5482dc25",[[1,"post-rating",{label:[1],stars:[2],currentRating:[1026,"current-rating"],readonly:[4],hoveredIndex:[32]},null,{label:["validateLabel"],stars:["validateStars"],currentRating:["validateCurrentRating"]}]]],["p-098030c2",[[1,"post-tooltip",{placement:[1],arrow:[4],animation:[1],open:[1540],show:[64],hide:[64],toggle:[64]},null,{placement:["validatePlacement"]}]]],["p-c3e0dca4",[[1,"post-avatar",{firstname:[513],lastname:[1],userid:[1],email:[1],slottedImage:[32],avatarType:[32],imageUrl:[32],imageAlt:[32],initials:[32]},null,{firstname:["validateFirstname"],lastname:["validateLastname"],userid:["validateUserid"],email:["validateEmail"]}]]],["p-2942dfc0",[[1,"post-linkarea"]]],["p-c936d457",[[1,"post-tab-header",{panel:[513],tabId:[32]},null,{panel:["validateFor"]}]]],["p-542e8506",[[1,"post-tab-panel",{name:[513],panelId:[32]},null,{name:["validateName"]}]]],["p-c0028958",[[1,"post-tabs",{activePanel:[1,"active-panel"],fullWidth:[516,"full-width"],show:[64]}]]],["p-33a028ca",[[1,"post-tooltip-trigger",{for:[513],delay:[2]},null,{for:["validateControlFor"]}]]],["p-16597bb9",[[1,"post-collapsible",{collapsed:[1028],toggle:[64]},null,{collapsed:["collapsedChange"]}],[1,"post-collapsible-trigger",{for:[513],update:[64]},null,{for:["validateAriaAttributes"]}]]],["p-86b6298e",[[1,"post-language-switch",{caption:[1],description:[1],variant:[1],activeLang:[32]},[[0,"postChange","handlePostChange"],[0,"postLanguageOptionInitiallyActive","handleInitiallyActive"]],{caption:["validateCaption"],description:["validateDescription"],variant:["validateVariant"]}],[1,"post-closebutton"],[4,"post-mainnavigation",{canScrollLeft:[32],canScrollRight:[32]},[[9,"mouseup","stopScrolling"],[9,"mouseleave","stopScrolling"]]],[1,"post-header",{device:[32],hasNavigation:[32],mobileMenuExtended:[32],megadropdownOpen:[32],toggleMobileMenu:[64]},null,{device:["lockBody"],mobileMenuExtended:["lockBody"]}],[4,"post-language-option",{code:[1],active:[1540],variant:[1],name:[1],url:[1],select:[64]},null,{code:["validateCode"],variant:["validateVariant"],name:["validateName"],url:["validateUrl"]}],[4,"post-list",{titleHidden:[4,"title-hidden"],horizontal:[516],titleId:[32]}],[1,"post-list-item"],[1,"post-logo",{url:[1]},null,{url:["validateUrl"]}],[4,"post-megadropdown",{device:[32],isVisible:[32],animationClass:[32],toggle:[64],show:[64],hide:[64],focusFirst:[64]}],[4,"post-megadropdown-trigger",{for:[1],ariaExpanded:[32]},null,{for:["validateControlFor"]}],[1,"post-togglebutton",{toggled:[1028]}],[1,"post-menu",{placement:[1],isVisible:[32],toggle:[64],show:[64],hide:[64]},null,{placement:["validatePlacement"]}],[4,"post-menu-trigger",{for:[513],ariaExpanded:[32]},null,{for:["validateControlFor"]}],[4,"post-popovercontainer",{placement:[1],edgeGap:[2,"edge-gap"],animation:[1],arrow:[4],manualClose:[4,"manual-close"],safeSpace:[513,"safe-space"],show:[64],hide:[64],toggle:[64]},null,{placement:["validatePlacement"],edgeGap:["validateEdgeGap"],safeSpace:["validateSafeSpace"]}],[1,"post-icon",{animation:[1],base:[1],flipH:[4,"flip-h"],flipV:[4,"flip-v"],name:[513],rotate:[2],scale:[2]},null,{animation:["validateAnimation"],base:["validateBase"],name:["validateName"],rotate:["validateRotate"],scale:["validateScale"]}]]],["p-2399c6ff",[[1,"post-accordion-item",{collapsed:[1028],headingLevel:[2,"heading-level"],id:[32],slottedLogo:[32],toggle:[64]},[[2,"postToggle","onCollapseToggle"]],{headingLevel:["validateHeadingLevel"]}],[1,"post-accordion",{headingLevel:[2,"heading-level"],multiple:[4],toggle:[64],expandAll:[64],collapseAll:[64]},[[0,"postToggle","collapseToggleHandler"]],{headingLevel:["validateHeadingLevel"]}]]],["p-b7f64972",[[1,"post-breadcrumb-item",{url:[1],fullUrl:[32]},null,{url:["validateUrl"]}],[4,"post-menu-item"]]]],e))));

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

@@ -1,3 +1,4 @@
+import { Device } from "../../utils/index";
 /**
  * @slot grid-{1|2|3|4}-title - Slot for the accordion headers (mobile).
  * @slot grid-{1|2|3|4} - Slot for the accordion bodies (mobile) and the grid cells (tablet, desktop).
@@ -13,7 +14,7 @@ export declare class PostFooter {
      * The label to add to the footer (visually hidden).
      */
     readonly label: string;
-    device: string;
+    device: Device;
     gridSlotDisplayed: Record<string, boolean>;
     validateLabel(): void;
     constructor();

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

@@ -1,3 +1,4 @@
+import { Device } from "../../utils/breakpoints";
 /**
  * @slot post-logo - Should be used together with the `<post-logo>` component.
  * @slot meta-navigation - Holds an `<ul>` with meta navigation links.
@@ -6,6 +7,7 @@
  * @slot title - Holds the application title.
  * @slot default - Custom controls or content, right aligned in the local header.
  * @slot post-mainnavigation - Has a default slot because it's only meant to be used in the `<post-header>`.
+ * @slot target-group - Holds the list of buttons to choose the target group.
  */
 export declare class PostHeader {
     private firstFocusableEl;
@@ -15,9 +17,11 @@ export declare class PostHeader {
     private readonly throttledResize;
     private scrollParentResizeObserver;
     private localHeaderResizeObserver;
+    private get hasMobileMenu();
     get scrollParent(): HTMLElement;
     host: HTMLPostHeaderElement;
-    device: string;
+    device: Device;
+    hasNavigation: boolean;
     mobileMenuExtended: boolean;
     megadropdownOpen: boolean;
     lockBody(newValue: boolean | string, _oldValue: boolean | string, propName: string): void;
@@ -28,6 +32,7 @@ export declare class PostHeader {
     componentDidRender(): void;
     componentDidLoad(): void;
     disconnectedCallback(): void;
+    private checkNavigationExistence;
     private closeMobileMenu;
     /**
      * Toggles the mobile navigation.
@@ -37,6 +42,7 @@ export declare class PostHeader {
     private getFocusableElements;
     private getMenuButton;
     private keyboardHandler;
+    private closeAllMegadropdowns;
     private handleScrollEvent;
     private updateLocalHeaderHeight;
     private updateScrollParentHeight;

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

@@ -22,7 +22,6 @@ export declare class PostMainnavigation {
      * Hack to fix the layout shift due to bold text on active elements
      */
     private fixLayoutShift;
-    private handleBackButtonClick;
     /**
      * Returns whether scrolling is enabled in either the left or right direction.
      */

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

@@ -1,8 +1,9 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+import { Device } from "../../utils/breakpoints";
 export declare class PostMegadropdown {
     private firstFocusableEl;
     private lastFocusableEl;
-    device: string;
+    device: Device;
     host: HTMLPostMegadropdownElement;
     /** Tracks the currently active dropdown instance. */
     private static activeDropdown;

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

@@ -19,6 +19,11 @@ export declare class PostTabs {
      * **Changing this value after initialization has no effect.**
      */
     readonly activePanel?: HTMLPostTabPanelElement['name'];
+    /**
+     * When set to true, this property allows the tabs container to span the
+     * full width of the screen, from edge to edge.
+     */
+    fullWidth: boolean;
     /**
      * An event emitted after the active tab changes, when the fade in transition of its associated panel is finished.
      * The payload is the name of the newly shown panel.

package/dist/types/components.d.ts

@@ -473,23 +473,14 @@ export namespace Components {
          */
         "activePanel"?: HTMLPostTabPanelElement['name'];
         /**
-          * Shows the panel with the given name and selects its associated tab. Any other panel that was previously shown becomes hidden and its associated tab is unselected.
-         */
-        "show": (panelName: string) => Promise<void>;
-    }
-    interface PostTag {
-        /**
-          * Defines the icon `name` inside of the component. <span className="banner banner-sm banner-info">If not set the icon will not show up.</span> To learn which icons are available, please visit our <a href="/?path=/docs/0dcfe3c0-bfc0-4107-b43b-7e9d825b805f--docs">icon library</a>.
-         */
-        "icon"?: string;
-        /**
-          * Defines the size of the component.
+          * When set to true, this property allows the tabs container to span the full width of the screen, from edge to edge.
+          * @default false
          */
-        "size"?: 'sm';
+        "fullWidth": boolean;
         /**
-          * Defines the color variant of the component.
+          * Shows the panel with the given name and selects its associated tab. Any other panel that was previously shown becomes hidden and its associated tab is unselected.
          */
-        "variant"?: 'white' | 'info' | 'success' | 'error' | 'warning' | 'yellow';
+        "show": (panelName: string) => Promise<void>;
     }
     interface PostTogglebutton {
         /**
@@ -883,12 +874,6 @@ declare global {
         prototype: HTMLPostTabsElement;
         new (): HTMLPostTabsElement;
     };
-    interface HTMLPostTagElement extends Components.PostTag, HTMLStencilElement {
-    }
-    var HTMLPostTagElement: {
-        prototype: HTMLPostTagElement;
-        new (): HTMLPostTagElement;
-    };
     interface HTMLPostTogglebuttonElement extends Components.PostTogglebutton, HTMLStencilElement {
     }
     var HTMLPostTogglebuttonElement: {
@@ -940,7 +925,6 @@ declare global {
         "post-tab-header": HTMLPostTabHeaderElement;
         "post-tab-panel": HTMLPostTabPanelElement;
         "post-tabs": HTMLPostTabsElement;
-        "post-tag": HTMLPostTagElement;
         "post-togglebutton": HTMLPostTogglebuttonElement;
         "post-tooltip": HTMLPostTooltipElement;
         "post-tooltip-trigger": HTMLPostTooltipTriggerElement;
@@ -1347,23 +1331,14 @@ declare namespace LocalJSX {
          */
         "activePanel"?: HTMLPostTabPanelElement['name'];
         /**
-          * An event emitted after the active tab changes, when the fade in transition of its associated panel is finished. The payload is the name of the newly shown panel.
-         */
-        "onPostChange"?: (event: PostTabsCustomEvent<string>) => void;
-    }
-    interface PostTag {
-        /**
-          * Defines the icon `name` inside of the component. <span className="banner banner-sm banner-info">If not set the icon will not show up.</span> To learn which icons are available, please visit our <a href="/?path=/docs/0dcfe3c0-bfc0-4107-b43b-7e9d825b805f--docs">icon library</a>.
-         */
-        "icon"?: string;
-        /**
-          * Defines the size of the component.
+          * When set to true, this property allows the tabs container to span the full width of the screen, from edge to edge.
+          * @default false
          */
-        "size"?: 'sm';
+        "fullWidth"?: boolean;
         /**
-          * Defines the color variant of the component.
+          * An event emitted after the active tab changes, when the fade in transition of its associated panel is finished. The payload is the name of the newly shown panel.
          */
-        "variant"?: 'white' | 'info' | 'success' | 'error' | 'warning' | 'yellow';
+        "onPostChange"?: (event: PostTabsCustomEvent<string>) => void;
     }
     interface PostTogglebutton {
         /**
@@ -1437,7 +1412,6 @@ declare namespace LocalJSX {
         "post-tab-header": PostTabHeader;
         "post-tab-panel": PostTabPanel;
         "post-tabs": PostTabs;
-        "post-tag": PostTag;
         "post-togglebutton": PostTogglebutton;
         "post-tooltip": PostTooltip;
         "post-tooltip-trigger": PostTooltipTrigger;
@@ -1485,7 +1459,6 @@ declare module "@stencil/core" {
             "post-tab-header": LocalJSX.PostTabHeader & JSXBase.HTMLAttributes<HTMLPostTabHeaderElement>;
             "post-tab-panel": LocalJSX.PostTabPanel & JSXBase.HTMLAttributes<HTMLPostTabPanelElement>;
             "post-tabs": LocalJSX.PostTabs & JSXBase.HTMLAttributes<HTMLPostTabsElement>;
-            "post-tag": LocalJSX.PostTag & JSXBase.HTMLAttributes<HTMLPostTagElement>;
             "post-togglebutton": LocalJSX.PostTogglebutton & JSXBase.HTMLAttributes<HTMLPostTogglebuttonElement>;
             "post-tooltip": LocalJSX.PostTooltip & JSXBase.HTMLAttributes<HTMLPostTooltipElement>;
             "post-tooltip-trigger": LocalJSX.PostTooltipTrigger & JSXBase.HTMLAttributes<HTMLPostTooltipTriggerElement>;

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

@@ -1,14 +1,16 @@
+export type Device = 'desktop' | 'tablet' | 'mobile';
+export type BreakpointKey = 'xl' | 'lg' | 'md' | 'sm' | 'xs';
+export type BreakpointMinWidth = 1280 | 1024 | 780 | 600 | 0;
 interface BreakpointDefinition {
-    key: string;
-    device: string;
-    minWidth: number;
+    device: Device;
+    key: BreakpointKey;
+    minWidth: BreakpointMinWidth;
 }
 type BreakpointProperty = keyof BreakpointDefinition;
 declare class Breakpoint {
     private readonly breakpoints;
     private currentBreakpoint;
     constructor();
-    private getValues;
     private updateCurrentBreakpoint;
     private dispatchEvent;
     get<T extends BreakpointProperty>(property: T): BreakpointDefinition[T];