@swisspost/design-system-components 1.6.2 → 1.7.0

package/dist/types/components.d.ts

@@ -7,11 +7,9 @@
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { AlertType } from "./components/post-alert/alert-types";
 import { HeadingLevel } from "./components/post-collapsible/heading-levels";
-import { BackgroundColor } from "./components/post-tooltip/types";
 import { Placement } from "@floating-ui/dom";
 export { AlertType } from "./components/post-alert/alert-types";
 export { HeadingLevel } from "./components/post-collapsible/heading-levels";
-export { BackgroundColor } from "./components/post-tooltip/types";
 export { Placement } from "@floating-ui/dom";
 export namespace Components {
     interface PostAccordion {
@@ -105,6 +103,60 @@ export namespace Components {
          */
         "scale"?: number | null;
     }
+    interface PostPopover {
+        /**
+          * Show a little indicator arrow
+         */
+        "arrow"?: boolean;
+        /**
+          * Define the caption of the close button for assistive technology
+         */
+        "closeButtonCaption": string;
+        /**
+          * Programmatically hide this popover
+         */
+        "hide": () => Promise<void>;
+        /**
+          * Defines the placement of the popover according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement. Popoverss 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 popover
+          * @param target An element with [data-popover-target="id"] where the popover should be shown
+         */
+        "show": (target: HTMLElement) => Promise<void>;
+        /**
+          * Toggle popover display
+          * @param target An element with [data-popover-target="id"] where the popover should be anchored to
+          * @param force Pass true to always show or false to always hide
+         */
+        "toggle": (target: HTMLElement, force?: boolean) => Promise<void>;
+    }
+    interface PostPopovercontainer {
+        /**
+          * Wheter or not to display a little pointer arrow
+         */
+        "arrow"?: boolean;
+        /**
+          * 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<boolean>;
+    }
     interface PostTabHeader {
         /**
           * The name of the panel controlled by the tab header.
@@ -128,10 +180,6 @@ 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
          */
@@ -161,6 +209,10 @@ export interface PostCollapsibleCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLPostCollapsibleElement;
 }
+export interface PostPopovercontainerCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLPostPopovercontainerElement;
+}
 export interface PostTabsCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLPostTabsElement;
@@ -215,6 +267,29 @@ declare global {
         prototype: HTMLPostIconElement;
         new (): HTMLPostIconElement;
     };
+    interface HTMLPostPopoverElement extends Components.PostPopover, HTMLStencilElement {
+    }
+    var HTMLPostPopoverElement: {
+        prototype: HTMLPostPopoverElement;
+        new (): HTMLPostPopoverElement;
+    };
+    interface HTMLPostPopovercontainerElementEventMap {
+        "postPopoverToggled": boolean;
+    }
+    interface HTMLPostPopovercontainerElement extends Components.PostPopovercontainer, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLPostPopovercontainerElementEventMap>(type: K, listener: (this: HTMLPostPopovercontainerElement, ev: PostPopovercontainerCustomEvent<HTMLPostPopovercontainerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLPostPopovercontainerElementEventMap>(type: K, listener: (this: HTMLPostPopovercontainerElement, ev: PostPopovercontainerCustomEvent<HTMLPostPopovercontainerElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLPostPopovercontainerElement: {
+        prototype: HTMLPostPopovercontainerElement;
+        new (): HTMLPostPopovercontainerElement;
+    };
     interface HTMLPostTabHeaderElement extends Components.PostTabHeader, HTMLStencilElement {
     }
     var HTMLPostTabHeaderElement: {
@@ -255,6 +330,8 @@ declare global {
         "post-alert": HTMLPostAlertElement;
         "post-collapsible": HTMLPostCollapsibleElement;
         "post-icon": HTMLPostIconElement;
+        "post-popover": HTMLPostPopoverElement;
+        "post-popovercontainer": HTMLPostPopovercontainerElement;
         "post-tab-header": HTMLPostTabHeaderElement;
         "post-tab-panel": HTMLPostTabPanelElement;
         "post-tabs": HTMLPostTabsElement;
@@ -341,6 +418,34 @@ declare namespace LocalJSX {
          */
         "scale"?: number | null;
     }
+    interface PostPopover {
+        /**
+          * Show a little indicator arrow
+         */
+        "arrow"?: boolean;
+        /**
+          * Define the caption of the close button for assistive technology
+         */
+        "closeButtonCaption": string;
+        /**
+          * Defines the placement of the popover according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement. Popoverss 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 PostPopovercontainer {
+        /**
+          * Wheter or not to display a little pointer arrow
+         */
+        "arrow"?: boolean;
+        /**
+          * Fires whenever the popover gets shown or hidden, passing the new state in event.details as a boolean
+         */
+        "onPostPopoverToggled"?: (event: PostPopovercontainerCustomEvent<boolean>) => 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;
+    }
     interface PostTabHeader {
         /**
           * The name of the panel controlled by the tab header.
@@ -364,10 +469,6 @@ 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.
          */
@@ -378,6 +479,8 @@ declare namespace LocalJSX {
         "post-alert": PostAlert;
         "post-collapsible": PostCollapsible;
         "post-icon": PostIcon;
+        "post-popover": PostPopover;
+        "post-popovercontainer": PostPopovercontainer;
         "post-tab-header": PostTabHeader;
         "post-tab-panel": PostTabPanel;
         "post-tabs": PostTabs;
@@ -395,6 +498,8 @@ declare module "@stencil/core" {
              * @class PostIcon - representing a stencil component
              */
             "post-icon": LocalJSX.PostIcon & JSXBase.HTMLAttributes<HTMLPostIconElement>;
+            "post-popover": LocalJSX.PostPopover & JSXBase.HTMLAttributes<HTMLPostPopoverElement>;
+            "post-popovercontainer": LocalJSX.PostPopovercontainer & JSXBase.HTMLAttributes<HTMLPostPopovercontainerElement>;
             "post-tab-header": LocalJSX.PostTabHeader & JSXBase.HTMLAttributes<HTMLPostTabHeaderElement>;
             "post-tab-panel": LocalJSX.PostTabPanel & JSXBase.HTMLAttributes<HTMLPostTabPanelElement>;
             "post-tabs": LocalJSX.PostTabs & JSXBase.HTMLAttributes<HTMLPostTabsElement>;

package/dist/types/index.d.ts

@@ -1,7 +1,10 @@
 export { Components, JSX } from './components';
+export { PostAccordion } from './components/post-accordion/post-accordion';
 export { PostAlert } from './components/post-alert/post-alert';
 export { PostCollapsible } from './components/post-collapsible/post-collapsible';
 export { PostIcon } from './components/post-icon/post-icon';
+export { PostPopover } from './components/post-popover/post-popover';
+export { PostPopovercontainer } from './components/post-popovercontainer/post-popovercontainer';
 export { PostTabs } from './components/post-tabs/post-tabs';
 export { PostTabHeader } from './components/post-tab-header/post-tab-header';
 export { PostTabPanel } from './components/post-tab-panel/post-tab-panel';

package/dist/types/stencil-public-runtime.d.ts

@@ -810,6 +810,9 @@ export declare namespace JSXBase {
         name?: string;
         type?: string;
         value?: string | string[] | number;
+        popoverTargetAction?: string;
+        popoverTargetElement?: Element | null;
+        popoverTarget?: string;
     }
     interface CanvasHTMLAttributes<T> extends HTMLAttributes<T> {
         height?: number | string;
@@ -971,6 +974,9 @@ export declare namespace JSXBase {
         webkitdirectory?: boolean;
         webkitEntries?: any;
         width?: number | string;
+        popoverTargetAction?: string;
+        popoverTargetElement?: Element | null;
+        popoverTarget?: string;
     }
     interface KeygenHTMLAttributes<T> extends HTMLAttributes<T> {
         autoFocus?: boolean;
@@ -1223,6 +1229,7 @@ export declare namespace JSXBase {
         draggable?: boolean;
         hidden?: boolean;
         id?: string;
+        inert?: boolean;
         lang?: string;
         spellcheck?: 'true' | 'false' | any;
         style?: {
@@ -1231,6 +1238,7 @@ export declare namespace JSXBase {
         tabIndex?: number;
         tabindex?: number | string;
         title?: string;
+        popover?: string | null;
         inputMode?: string;
         inputmode?: string;
         enterKeyHint?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-components",
-  "version": "1.6.2",
+  "version": "1.7.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,32 +24,34 @@
     "linkDirectory": true
   },
   "dependencies": {
-    "@floating-ui/dom": "1.5.3",
-    "@oddbird/popover-polyfill": "0.3.1",
-    "@stencil/core": "4.7.0",
-    "@swisspost/design-system-styles": "6.4.4",
+    "@floating-ui/dom": "1.5.4",
+    "@oddbird/popover-polyfill": "0.2.3",
+    "@swisspost/design-system-styles": "6.5.1",
     "ally.js": "1.4.1",
     "long-press-event": "2.4.6"
   },
   "devDependencies": {
-    "@percy/cli": "1.27.4",
+    "@percy/cli": "1.27.7",
     "@percy/cypress": "3.1.2",
-    "@stencil-community/eslint-plugin": "0.6.0",
+    "@stencil-community/eslint-plugin": "0.7.1",
+    "@stencil/core": "4.9.0",
     "@stencil/react-output-target": "0.5.3",
-    "@stencil/sass": "3.0.7",
-    "@types/jest": "27.5.2",
+    "@stencil/sass": "3.0.8",
+    "@types/jest": "29.5.11",
     "@typescript-eslint/eslint-plugin": "5.62.0",
     "@typescript-eslint/parser": "5.62.0",
     "bootstrap": "5.3.2",
-    "cypress": "13.4.0",
+    "cypress": "13.6.2",
     "cypress-storybook": "0.5.1",
-    "eslint": "8.53.0",
+    "eslint": "8.56.0",
     "eslint-plugin-react": "7.33.2",
-    "jest": "27.5.1",
-    "jest-cli": "27.5.1",
+    "jest": "29.7.0",
+    "jest-cli": "29.7.0",
+    "jest-environment-jsdom": "29.7.0",
     "npm-run-all": "4.1.5",
     "rimraf": "5.0.5",
-    "sass": "1.69.5",
+    "sass": "1.69.7",
+    "ts-jest": "29.1.1",
     "typescript": "4.9.5"
   },
   "scripts": {

package/dist/cjs/check-non-empty-ae713942.js.map

@@ -1 +0,0 @@
-{"file":"check-non-empty-ae713942.js","mappings":";;;;SAEgB,aAAa,CAAC,KAAc,EAAE,KAAa;EACzD,IAAIA,sBAAY,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK,KAAK,CAAC,EAAE;IACvC,MAAM,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC;GACxB;AACH;;;;","names":["EMPTY_VALUES"],"sources":["src/utils/property-checkers/check-non-empty.ts"],"sourcesContent":["import { EMPTY_VALUES } from './constants';\n\nexport function checkNonEmpty(value: unknown, error: string) {\n  if (EMPTY_VALUES.some(v => v === value)) {\n    throw new Error(error);\n  }\n}\n"],"version":3}

package/dist/cjs/check-one-of-27ad3154.js

@@ -1,10 +0,0 @@
-'use strict';
-
-function checkOneOf(value, possibleValues, error) {
-  if (!possibleValues.includes(value))
-    throw new Error(error);
-}
-
-exports.checkOneOf = checkOneOf;
-
-//# sourceMappingURL=check-one-of-27ad3154.js.map

package/dist/cjs/check-one-of-27ad3154.js.map

@@ -1 +0,0 @@
-{"file":"check-one-of-27ad3154.js","mappings":";;SAAgB,UAAU,CAAI,KAAQ,EAAE,cAA4B,EAAE,KAAa;EACjF,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,KAAK,CAAC;IAAE,MAAM,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC;AAC9D;;;;","names":[],"sources":["src/utils/property-checkers/check-one-of.ts"],"sourcesContent":["export function checkOneOf<T>(value: T, possibleValues: readonly T[], error: string) {\n  if (!possibleValues.includes(value)) throw new Error(error);\n}\n"],"version":3}

package/dist/cjs/index-b38a23e0.js

@@ -1,41 +0,0 @@
-'use strict';
-
-const constants = require('./constants-238701d3.js');
-const checkOneOf = require('./check-one-of-27ad3154.js');
-
-function emptyOr(check) {
-  return (...args) => {
-    const value = args[0];
-    if (!constants.EMPTY_VALUES.some(v => v === value))
-      check(...args);
-  };
-}
-
-function checkPattern(value, pattern, errorMessage) {
-  if (typeof value !== 'string' || !pattern.test(value))
-    throw new Error(errorMessage);
-}
-
-function checkType(value, type, error) {
-  const typeIsArray = type === 'array';
-  const valueIsArray = Array.isArray(value);
-  if (typeIsArray || valueIsArray) {
-    if (valueIsArray !== typeIsArray)
-      throw new Error(error);
-  }
-  else {
-    if (typeof value !== type)
-      throw new Error(error);
-  }
-}
-
-const checkEmptyOrOneOf = emptyOr(checkOneOf.checkOneOf);
-const checkEmptyOrPattern = emptyOr(checkPattern);
-const checkEmptyOrType = emptyOr(checkType);
-
-exports.checkEmptyOrOneOf = checkEmptyOrOneOf;
-exports.checkEmptyOrPattern = checkEmptyOrPattern;
-exports.checkEmptyOrType = checkEmptyOrType;
-exports.checkType = checkType;
-
-//# sourceMappingURL=index-b38a23e0.js.map

package/dist/cjs/index-b38a23e0.js.map

@@ -1 +0,0 @@
-{"file":"index-b38a23e0.js","mappings":";;;;;SAEgB,OAAO,CAAsB,KAA2B;EACtE,OAAO,CAAC,GAAG,IAAO;IAChB,MAAM,KAAK,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC;IACtB,IAAI,CAACA,sBAAY,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK,KAAK,CAAC;MAAE,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC;GAC1D,CAAC;AACJ;;SCPgB,YAAY,CAAC,KAAc,EAAE,OAAe,EAAE,YAAoB;EAChF,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;IAAE,MAAM,IAAI,KAAK,CAAC,YAAY,CAAC,CAAC;AACvF;;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;;MCZa,iBAAiB,GAAG,OAAO,CAACC,qBAAU,EAAE;MACxC,mBAAmB,GAAG,OAAO,CAAC,YAAY,EAAE;MAC5C,gBAAgB,GAAG,OAAO,CAAC,SAAS;;;;;;;","names":["EMPTY_VALUES","checkOneOf"],"sources":["src/utils/property-checkers/empty-or.ts","src/utils/property-checkers/check-pattern.ts","src/utils/property-checkers/check-type.ts","src/utils/property-checkers/index.ts"],"sourcesContent":["import { EMPTY_VALUES } from './constants';\n\nexport function emptyOr<T extends unknown[]>(check: (...args: T) => void) {\n  return (...args: T) => {\n    const value = args[0];\n    if (!EMPTY_VALUES.some(v => v === value)) check(...args);\n  };\n}\n","export function checkPattern(value: unknown, pattern: RegExp, errorMessage: string) {\n  if (typeof value !== 'string' || !pattern.test(value)) throw new Error(errorMessage);\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","import { emptyOr } from './empty-or';\nimport { checkOneOf } from './check-one-of';\nimport { checkPattern } from './check-pattern';\nimport { checkType } from './check-type';\n\nexport const checkEmptyOrOneOf = emptyOr(checkOneOf);\nexport const checkEmptyOrPattern = emptyOr(checkPattern);\nexport const checkEmptyOrType = emptyOr(checkType);\n\nexport * from './check-non-empty';\nexport * from './check-one-of';\nexport * from './check-pattern';\nexport * from './check-type';\n"],"version":3}