@swisspost/design-system-components 1.3.10 → 1.5.0

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

@@ -0,0 +1,49 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { AlertType } from './alert-types';
+export declare class PostAlert {
+  host: HTMLPostAlertElement;
+  alertId: `${string}-${string}-${string}-${string}-${string}`;
+  classes: string;
+  hasActions: boolean;
+  hasHeading: boolean;
+  onDismissButtonClick: () => Promise<void>;
+  /**
+   * If `true`, a close button (×) is displayed and the alert can be dismissed by the user.
+   */
+  readonly dismissible: boolean;
+  validateDismissible(isDismissible?: boolean): void;
+  /**
+   * The label to use for the close button of a dismissible alert.
+   */
+  readonly dismissLabel: string;
+  validateDismissLabel(dismissLabel?: string): void;
+  /**
+   * If `true`, the alert is positioned at the bottom of the window, from edge to edge.
+   */
+  readonly fixed: boolean;
+  validateFixed(isFixed?: boolean): void;
+  /**
+   * The icon to display in the alert. By default, the icon depends on the alert type.
+   *
+   * If `none`, no icon is displayed.
+   */
+  readonly icon: string;
+  validateIcon(icon?: string): void;
+  /**
+   * The type of the alert.
+   */
+  readonly type: AlertType;
+  validateType(type?: "info" | "success" | "primary" | "danger" | "warning" | "gray"): void;
+  /**
+   * An event emitted when the alert element is dismissed, after the transition.
+   * It has no payload and only relevant for dismissible alerts.
+   */
+  dismissed: EventEmitter<void>;
+  connectedCallback(): void;
+  componentWillRender(): void;
+  /**
+   * Triggers alert dismissal programmatically (same as clicking on the close button (×)).
+   */
+  dismiss(): Promise<void>;
+  render(): any;
+}

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

@@ -0,0 +1,11 @@
+export declare class PostTabHeader {
+  host: HTMLPostTabHeaderElement;
+  tabId: string;
+  /**
+   * The name of the panel controlled by the tab header.
+   */
+  readonly panel: HTMLPostTabPanelElement['name'];
+  validateFor(newValue: HTMLPostTabPanelElement['name']): void;
+  componentWillLoad(): void;
+  render(): any;
+}

package/dist/types/components/post-tab-panel/post-tab-panel.d.ts

@@ -0,0 +1,10 @@
+export declare class PostTabPanel {
+  host: HTMLPostTabPanelElement;
+  panelId: string;
+  /**
+   * The name of the panel, used to associate it with a tab header.
+   */
+  readonly name: string;
+  componentWillLoad(): void;
+  render(): any;
+}

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

@@ -0,0 +1,34 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class PostTabs {
+  private activeTab;
+  private showing;
+  private hiding;
+  private isLoaded;
+  private get tabs();
+  host: HTMLPostTabsElement;
+  /**
+   * The name of the panel that is initially shown.
+   * If not specified, it defaults to the panel associated with the first tab.
+   *
+   * **Changing this value after initialization has no effect.**
+   */
+  readonly 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.
+   */
+  tabChange: EventEmitter<HTMLPostTabPanelElement['name']>;
+  componentDidLoad(): void;
+  /**
+   * 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>;
+  private moveMisplacedTabs;
+  private enableTabs;
+  private activateTab;
+  private hidePanel;
+  private showSelectedPanel;
+  private getPanel;
+  render(): any;
+}

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

@@ -0,0 +1,66 @@
+import { Placement } from '@floating-ui/dom';
+import '@oddbird/popover-polyfill';
+import 'long-press-event';
+import { BackgroundColor } from './types';
+export declare class PostTooltip {
+  private tooltipRef;
+  private arrowRef;
+  private clearAutoUpdate;
+  private readonly localShowTooltip;
+  private readonly localHideTooltip;
+  private readonly localToggleTooltip;
+  private eventTarget;
+  host: HTMLPostTooltipElement;
+  tooltipClasses: string;
+  /**
+   * Defines the background color of the tooltip.
+   * Choose the one that provides the best contrast in your scenario.
+   */
+  readonly backgroundColor?: BackgroundColor;
+  /**
+   * Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement.
+   * Tooltips 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.
+   */
+  readonly placement?: Placement;
+  validateBackgroundColor(newValue?: "primary" | "yellow"): void;
+  constructor();
+  componentWillLoad(): void;
+  connectedCallback(): void;
+  /**
+   * Remove a bunch of event listeners if the tooltip gets removed from the DOM
+   */
+  disconnectedCallback(): void;
+  componentDidLoad(): boolean;
+  /**
+   * Programmatically display the tooltip
+   * @param target An element with [data-tooltip-target="id"] where the tooltip should be shown
+   */
+  show(target: HTMLElement): Promise<void>;
+  /**
+   * Programmatically hide this tooltip
+   */
+  hide(): Promise<void>;
+  /**
+   * Toggle tooltip display
+   * @param target An element with [data-tooltip-target="id"] where the tooltip should be shown
+   * @param force Pass true to always show or false to always hide
+   */
+  toggle(target: HTMLElement, force?: boolean): Promise<void>;
+  private get triggers();
+  private patchPopoverTargetActionInterest;
+  /**
+   * Start or stop auto updates based on tooltip events.
+   * Tooltips 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
+   */
+  private handleToggle;
+  /**
+   * Start listening for DOM updates, scroll events etc. that have
+   * an influence on tooltip positioning
+   */
+  private startAutoupdates;
+  private positionTooltip;
+  render(): any;
+}

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

@@ -0,0 +1,2 @@
+export declare const BACKGROUND_COLOR: readonly ["primary", "yellow"];
+export type BackgroundColor = (typeof BACKGROUND_COLOR)[number];

package/dist/types/components.d.ts

@@ -5,7 +5,39 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
+import { AlertType } from "./components/post-alert/alert-types";
+import { BackgroundColor } from "./components/post-tooltip/types";
+import { Placement } from "@floating-ui/dom";
+export { AlertType } from "./components/post-alert/alert-types";
+export { BackgroundColor } from "./components/post-tooltip/types";
+export { Placement } from "@floating-ui/dom";
 export namespace Components {
+    interface PostAlert {
+        /**
+          * Triggers alert dismissal programmatically (same as clicking on the close button (×)).
+         */
+        "dismiss": () => Promise<void>;
+        /**
+          * The label to use for the close button of a dismissible alert.
+         */
+        "dismissLabel": string;
+        /**
+          * If `true`, a close button (×) is displayed and the alert can be dismissed by the user.
+         */
+        "dismissible": boolean;
+        /**
+          * If `true`, the alert is positioned at the bottom of the window, from edge to edge.
+         */
+        "fixed": boolean;
+        /**
+          * The icon to display in the alert. By default, the icon depends on the alert type.  If `none`, no icon is displayed.
+         */
+        "icon": string;
+        /**
+          * The type of the alert.
+         */
+        "type": AlertType;
+    }
     interface PostCollapsible {
         /**
           * If `true`, the element is initially collapsed otherwise it is displayed.
@@ -53,8 +85,69 @@ export namespace Components {
          */
         "scale"?: number | null;
     }
+    interface PostTabHeader {
+        /**
+          * The name of the panel controlled by the tab header.
+         */
+        "panel": HTMLPostTabPanelElement['name'];
+    }
+    interface PostTabPanel {
+        /**
+          * The name of the panel, used to associate it with a tab header.
+         */
+        "name": string;
+    }
+    interface PostTabs {
+        /**
+          * The name of the panel that is initially shown. If not specified, it defaults to the panel associated with the first tab.  **Changing this value after initialization has no effect.**
+         */
+        "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 PostTooltip {
+        /**
+          * Defines the background color of the tooltip. Choose the one that provides the best contrast in your scenario.
+         */
+        "backgroundColor"?: BackgroundColor;
+        /**
+          * Programmatically hide this tooltip
+         */
+        "hide": () => Promise<void>;
+        /**
+          * Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement. Tooltips 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"?: Placement;
+        /**
+          * Programmatically display the tooltip
+          * @param target An element with [data-tooltip-target="id"] where the tooltip should be shown
+         */
+        "show": (target: HTMLElement) => Promise<void>;
+        /**
+          * Toggle tooltip display
+          * @param target An element with [data-tooltip-target="id"] where the tooltip should be shown
+          * @param force Pass true to always show or false to always hide
+         */
+        "toggle": (target: HTMLElement, force?: boolean) => Promise<void>;
+    }
+}
+export interface PostAlertCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLPostAlertElement;
+}
+export interface PostTabsCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLPostTabsElement;
 }
 declare global {
+    interface HTMLPostAlertElement extends Components.PostAlert, HTMLStencilElement {
+    }
+    var HTMLPostAlertElement: {
+        prototype: HTMLPostAlertElement;
+        new (): HTMLPostAlertElement;
+    };
     interface HTMLPostCollapsibleElement extends Components.PostCollapsible, HTMLStencilElement {
     }
     var HTMLPostCollapsibleElement: {
@@ -70,12 +163,67 @@ declare global {
         prototype: HTMLPostIconElement;
         new (): HTMLPostIconElement;
     };
+    interface HTMLPostTabHeaderElement extends Components.PostTabHeader, HTMLStencilElement {
+    }
+    var HTMLPostTabHeaderElement: {
+        prototype: HTMLPostTabHeaderElement;
+        new (): HTMLPostTabHeaderElement;
+    };
+    interface HTMLPostTabPanelElement extends Components.PostTabPanel, HTMLStencilElement {
+    }
+    var HTMLPostTabPanelElement: {
+        prototype: HTMLPostTabPanelElement;
+        new (): HTMLPostTabPanelElement;
+    };
+    interface HTMLPostTabsElement extends Components.PostTabs, HTMLStencilElement {
+    }
+    var HTMLPostTabsElement: {
+        prototype: HTMLPostTabsElement;
+        new (): HTMLPostTabsElement;
+    };
+    interface HTMLPostTooltipElement extends Components.PostTooltip, HTMLStencilElement {
+    }
+    var HTMLPostTooltipElement: {
+        prototype: HTMLPostTooltipElement;
+        new (): HTMLPostTooltipElement;
+    };
     interface HTMLElementTagNameMap {
+        "post-alert": HTMLPostAlertElement;
         "post-collapsible": HTMLPostCollapsibleElement;
         "post-icon": HTMLPostIconElement;
+        "post-tab-header": HTMLPostTabHeaderElement;
+        "post-tab-panel": HTMLPostTabPanelElement;
+        "post-tabs": HTMLPostTabsElement;
+        "post-tooltip": HTMLPostTooltipElement;
     }
 }
 declare namespace LocalJSX {
+    interface PostAlert {
+        /**
+          * The label to use for the close button of a dismissible alert.
+         */
+        "dismissLabel"?: string;
+        /**
+          * If `true`, a close button (×) is displayed and the alert can be dismissed by the user.
+         */
+        "dismissible"?: boolean;
+        /**
+          * If `true`, the alert is positioned at the bottom of the window, from edge to edge.
+         */
+        "fixed"?: boolean;
+        /**
+          * The icon to display in the alert. By default, the icon depends on the alert type.  If `none`, no icon is displayed.
+         */
+        "icon"?: string;
+        /**
+          * An event emitted when the alert element is dismissed, after the transition. It has no payload and only relevant for dismissible alerts.
+         */
+        "onDismissed"?: (event: PostAlertCustomEvent<void>) => void;
+        /**
+          * The type of the alert.
+         */
+        "type"?: AlertType;
+    }
     interface PostCollapsible {
         /**
           * If `true`, the element is initially collapsed otherwise it is displayed.
@@ -119,20 +267,62 @@ declare namespace LocalJSX {
          */
         "scale"?: number | null;
     }
+    interface PostTabHeader {
+        /**
+          * The name of the panel controlled by the tab header.
+         */
+        "panel"?: HTMLPostTabPanelElement['name'];
+    }
+    interface PostTabPanel {
+        /**
+          * The name of the panel, used to associate it with a tab header.
+         */
+        "name"?: string;
+    }
+    interface PostTabs {
+        /**
+          * The name of the panel that is initially shown. If not specified, it defaults to the panel associated with the first tab.  **Changing this value after initialization has no effect.**
+         */
+        "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.
+         */
+        "onTabChange"?: (event: PostTabsCustomEvent<HTMLPostTabPanelElement['name']>) => void;
+    }
+    interface PostTooltip {
+        /**
+          * Defines the background color of the tooltip. Choose the one that provides the best contrast in your scenario.
+         */
+        "backgroundColor"?: BackgroundColor;
+        /**
+          * Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement. Tooltips 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"?: Placement;
+    }
     interface IntrinsicElements {
+        "post-alert": PostAlert;
         "post-collapsible": PostCollapsible;
         "post-icon": PostIcon;
+        "post-tab-header": PostTabHeader;
+        "post-tab-panel": PostTabPanel;
+        "post-tabs": PostTabs;
+        "post-tooltip": PostTooltip;
     }
 }
 export { LocalJSX as JSX };
 declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
+            "post-alert": LocalJSX.PostAlert & JSXBase.HTMLAttributes<HTMLPostAlertElement>;
             "post-collapsible": LocalJSX.PostCollapsible & JSXBase.HTMLAttributes<HTMLPostCollapsibleElement>;
             /**
              * @class PostIcon - representing a stencil component
              */
             "post-icon": LocalJSX.PostIcon & JSXBase.HTMLAttributes<HTMLPostIconElement>;
+            "post-tab-header": LocalJSX.PostTabHeader & JSXBase.HTMLAttributes<HTMLPostTabHeaderElement>;
+            "post-tab-panel": LocalJSX.PostTabPanel & JSXBase.HTMLAttributes<HTMLPostTabPanelElement>;
+            "post-tabs": LocalJSX.PostTabs & JSXBase.HTMLAttributes<HTMLPostTabsElement>;
+            "post-tooltip": LocalJSX.PostTooltip & JSXBase.HTMLAttributes<HTMLPostTooltipElement>;
         }
     }
 }

package/dist/types/utils/property-checkers/check-one-of.d.ts

@@ -1 +1 @@
-export declare function checkOneOf<T>(value: T, possibleValues: T[], error: string): void;
+export declare function checkOneOf<T>(value: T, possibleValues: readonly T[], error: string): void;

package/dist/types/utils/property-checkers/check-pattern.d.ts

@@ -0,0 +1 @@
+export declare function checkPattern(value: unknown, pattern: RegExp, errorMessage: string): void;

package/dist/types/utils/property-checkers/index.d.ts

@@ -1,5 +1,7 @@
-export declare const checkEmptyOrOneOf: <T>(value: T, possibleValues: T[], error: string) => void;
+export declare const checkEmptyOrOneOf: <T>(value: T, possibleValues: readonly T[], error: string) => void;
+export declare const checkEmptyOrPattern: (value: unknown, pattern: RegExp, errorMessage: string) => void;
 export declare const checkEmptyOrType: (value: unknown, type: import("./check-type").PropertyType, error: string) => void;
 export * from './check-non-empty';
 export * from './check-one-of';
+export * from './check-pattern';
 export * from './check-type';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-components",
-  "version": "1.3.10",
+  "version": "1.5.0",
   "description": "A collection of web components built with Stencil JS for the Swiss Post Design System.",
   "license": "Apache-2.0",
   "main": "loader/index.cjs.js",
@@ -24,28 +24,32 @@
     "linkDirectory": true
   },
   "dependencies": {
+    "@floating-ui/dom": "1.5.1",
+    "@oddbird/popover-polyfill": "0.2.2",
     "@stencil/core": "3.4.2",
-    "@swisspost/design-system-styles": "6.3.0"
+    "@swisspost/design-system-styles": "6.4.1",
+    "ally.js": "1.4.1",
+    "long-press-event": "2.4.6"
   },
   "devDependencies": {
-    "@percy/cli": "1.26.3",
+    "@percy/cli": "1.27.2",
     "@percy/cypress": "3.1.2",
-    "@stencil-community/eslint-plugin": "^0.5.0",
+    "@stencil-community/eslint-plugin": "0.5.0",
     "@stencil/react-output-target": "0.5.3",
     "@stencil/sass": "3.0.5",
     "@types/jest": "27.5.2",
     "@typescript-eslint/eslint-plugin": "5.62.0",
     "@typescript-eslint/parser": "5.62.0",
-    "bootstrap": "5.3.1",
-    "cypress": "12.17.3",
+    "bootstrap": "5.3.2",
+    "cypress": "13.2.0",
     "cypress-storybook": "0.5.1",
-    "eslint": "8.47.0",
-    "eslint-plugin-react": "7.33.1",
+    "eslint": "8.50.0",
+    "eslint-plugin-react": "7.33.2",
     "jest": "27.5.1",
     "jest-cli": "27.5.1",
     "npm-run-all": "4.1.5",
     "rimraf": "5.0.1",
-    "sass": "1.65.1",
+    "sass": "1.68.0",
     "typescript": "4.9.5"
   },
   "scripts": {