@swisspost/design-system-components 1.4.0 → 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-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.
@@ -75,12 +107,47 @@ export namespace Components {
          */
         "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: {
@@ -114,15 +181,49 @@ declare global {
         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.
@@ -188,18 +289,31 @@ declare namespace LocalJSX {
          */
         "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
@@ -208,6 +322,7 @@ 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-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.4.0",
+  "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.4.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.4",
+    "bootstrap": "5.3.2",
+    "cypress": "13.2.0",
     "cypress-storybook": "0.5.1",
-    "eslint": "8.48.0",
+    "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.66.1",
+    "sass": "1.68.0",
     "typescript": "4.9.5"
   },
   "scripts": {

package/dist/cjs/check-type-f24cf91d.js.map

@@ -1 +0,0 @@
-{"file":"check-type-f24cf91d.js","mappings":";;SAAgB,UAAU,CAAI,KAAQ,EAAE,cAAmB,EAAE,KAAa;EACxE,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,KAAK,CAAC;IAAE,MAAM,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC;AAC9D;;SCMgB,SAAS,CAAC,KAAc,EAAE,IAAkB,EAAE,KAAa;EACzE,MAAM,WAAW,GAAG,IAAI,KAAK,OAAO,CAAC;EACrC,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;EAE1C,IAAI,WAAW,IAAI,YAAY,EAAE;IAC/B,IAAI,YAAY,KAAK,WAAW;MAAE,MAAM,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC;GAC1D;OAAM;IACL,IAAI,OAAO,KAAK,KAAK,IAAI;MAAE,MAAM,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC;GACnD;AACH;;;;;","names":[],"sources":["./src/utils/property-checkers/check-one-of.ts","./src/utils/property-checkers/check-type.ts"],"sourcesContent":["export function checkOneOf<T>(value: T, possibleValues: T[], error: string) {\n  if (!possibleValues.includes(value)) throw new Error(error);\n}\n","export type PropertyType =\n  | 'boolean'\n  | 'number'\n  | 'string'\n  | 'array'\n  | 'object'\n  | 'function';\n\nexport function checkType(value: unknown, type: PropertyType, error: string) {\n  const typeIsArray = type === 'array';\n  const valueIsArray = Array.isArray(value);\n\n  if (typeIsArray || valueIsArray) {\n    if (valueIsArray !== typeIsArray) throw new Error(error);\n  } else {\n    if (typeof value !== type) throw new Error(error);\n  }\n}\n"],"version":3}