@swisspost/design-system-components 1.7.1 → 2.0.1

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

@@ -1,28 +1,31 @@
+/**
+ * @slot default - Slot for placing post-accordion-item components.
+ */
 export declare class PostAccordion {
-    private collapsibles;
-    private expandedCollapsibles;
+    private accordionItems;
+    private expandedItems;
     host: HTMLPostAccordionElement;
     /**
-     * If `true`, multiple `post-collapsible` can be open at the same time.
+     * If `true`, multiple `post-accordion-item` can be open at the same time.
      */
     readonly multiple: boolean;
     componentWillLoad(): void;
     /**
-     * Toggles the `post-collapsible` children with the given id.
+     * Toggles the `post-accordion-item` with the given id.
      */
     toggle(id: string): Promise<void>;
-    collapseChangeHandler(event: CustomEvent): void;
+    collapseChangeHandler(event: CustomEvent<boolean>): void;
     /**
-     * Expands all `post-collapsible` children.
+     * Expands all `post-accordion-item`.
      *
      * If `close-others` is `true` and all items are closed, it will open the first one.
      * Otherwise, it will keep the opened one.
      */
     expandAll(): Promise<void>;
     /**
-     * Collapses all `post-collapsible` children.
+     * Collapses all `post-accordion-item`.
      */
     collapseAll(): Promise<void>;
-    private registerCollapsibles;
+    private registerAccordionItems;
     render(): any;
 }

package/dist/types/components/post-accordion-item/post-accordion-item.d.ts

@@ -0,0 +1,28 @@
+import { HeadingLevel } from './heading-levels';
+/**
+ * @slot header - Slot for placing custom content within the accordion item's header.
+ * @slot default - Slot for placing content within the accordion item's body.
+ */
+export declare class PostAccordionItem {
+    private collapsible;
+    host: HTMLPostAccordionItemElement;
+    id: string;
+    isOpen: boolean;
+    /**
+     * If `true`, the element is initially collapsed otherwise it is displayed.
+     */
+    readonly collapsed?: boolean;
+    /**
+     * Defines the hierarchical level of the accordion item header within the headings structure.
+     */
+    readonly headingLevel?: HeadingLevel;
+    validateHeadingLevel(newValue?: 1 | 2 | 3 | 4 | 5 | 6): void;
+    connectedCallback(): void;
+    componentWillLoad(): void;
+    onCollapseChange(event: CustomEvent<boolean>): void;
+    /**
+     * Triggers the collapse programmatically.
+     */
+    toggle(force?: boolean): Promise<boolean>;
+    render(): any;
+}

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

@@ -1,5 +1,10 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { AlertType } from './alert-types';
+/**
+ * @slot heading - Slot for placing custom content within the alert's heading.
+ * @slot actions - Slot for placing custom actions (buttons, links, etc.) within the alert.
+ * @slot default - Slot for placing the main content/message of the alert.
+ */
 export declare class PostAlert {
     host: HTMLPostAlertElement;
     alertId: `${string}-${string}-${string}-${string}-${string}`;

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

@@ -1,27 +1,24 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { HeadingLevel } from './heading-levels';
+/**
+ * @slot default - Slot for placing content within the collapsible element.
+ */
 export declare class PostCollapsible {
     private isLoaded;
     private collapsible;
     host: HTMLPostCollapsibleElement;
     id: string;
     isOpen: boolean;
-    hasHeader: boolean;
-    headingTag: string;
     /**
      * If `true`, the element is initially collapsed otherwise it is displayed.
      */
     readonly collapsed?: boolean;
     validateCollapsed(newValue?: boolean): void;
     /**
-     * Defines the hierarchical level of the collapsible header within the headings structure.
-     */
-    readonly headingLevel?: HeadingLevel;
-    validateHeadingLevel(newValue?: 6 | 1 | 2 | 3 | 4 | 5): void;
-    /**
-     * An event emitted when the collapse element is shown or hidden, before the transition. It has no payload.
+     * An event emitted when the collapse element is shown or hidden, before the transition.
+     *
+     * The event payload is a boolean: `true` if the collapsible was opened, `false` if it was closed.
      */
-    collapseChange: EventEmitter<void>;
+    collapseChange: EventEmitter<boolean>;
     connectedCallback(): void;
     componentWillRender(): void;
     componentDidLoad(): void;

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

@@ -1,4 +1,7 @@
 import { Placement } from '@floating-ui/dom';
+/**
+ * @slot default - Slot for placing content inside the popover.
+ */
 export declare class PostPopover {
     private popoverRef;
     private localTogglePopover;

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

@@ -7,6 +7,9 @@ interface PopoverElement {
     togglePopover: (force?: boolean) => boolean;
 }
 export type PostPopoverElement = HTMLElement & PopoverElement;
+/**
+ * @slot - Default slot for placing content inside the popovercontainer.
+ */
 export declare class PostPopovercontainer {
     host: HTMLPostPopovercontainerElement;
     private popoverRef;

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

@@ -1,3 +1,6 @@
+/**
+ * @slot default - Slot for the content of the tab header.
+ */
 export declare class PostTabHeader {
     host: HTMLPostTabHeaderElement;
     tabId: string;

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

@@ -1,3 +1,6 @@
+/**
+ * @slot default - Slot for placing the content of the tab panel.
+ */
 export declare class PostTabPanel {
     host: HTMLPostTabPanelElement;
     panelId: string;

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

@@ -1,4 +1,8 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @slot tabs - Slot for placing tab headers. Each tab header should be a <post-tab-header> element.
+ * @slot default - Slot for placing tab panels. Each tab panel should be a <post-tab-panel> element.
+ */
 export declare class PostTabs {
     private activeTab;
     private showing;

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

@@ -1,5 +1,8 @@
 import { Placement } from '@floating-ui/dom';
 import 'long-press-event';
+/**
+ * @slot default - Slot for the content of the tooltip.
+ */
 export declare class PostTooltip {
     private popoverRef;
     private readonly localShowTooltip;
@@ -11,6 +14,10 @@ export declare class PostTooltip {
      * towards the viewport if they would overlap edge boundaries.
      */
     readonly placement?: Placement;
+    /**
+     * Wheter or not to display a little pointer arrow
+     */
+    readonly arrow?: boolean;
     constructor();
     connectedCallback(): void;
     /**

package/dist/types/components.d.ts

@@ -5,31 +5,45 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
+import { HeadingLevel } from "./components/post-accordion-item/heading-levels";
 import { AlertType } from "./components/post-alert/alert-types";
-import { HeadingLevel } from "./components/post-collapsible/heading-levels";
 import { Placement } from "@floating-ui/dom";
+export { HeadingLevel } from "./components/post-accordion-item/heading-levels";
 export { AlertType } from "./components/post-alert/alert-types";
-export { HeadingLevel } from "./components/post-collapsible/heading-levels";
 export { Placement } from "@floating-ui/dom";
 export namespace Components {
     interface PostAccordion {
         /**
-          * Collapses all `post-collapsible` children.
+          * Collapses all `post-accordion-item`.
          */
         "collapseAll": () => Promise<void>;
         /**
-          * Expands all `post-collapsible` children.  If `close-others` is `true` and all items are closed, it will open the first one. Otherwise, it will keep the opened one.
+          * Expands all `post-accordion-item`.  If `close-others` is `true` and all items are closed, it will open the first one. Otherwise, it will keep the opened one.
          */
         "expandAll": () => Promise<void>;
         /**
-          * If `true`, multiple `post-collapsible` can be open at the same time.
+          * If `true`, multiple `post-accordion-item` can be open at the same time.
          */
         "multiple": boolean;
         /**
-          * Toggles the `post-collapsible` children with the given id.
+          * Toggles the `post-accordion-item` with the given id.
          */
         "toggle": (id: string) => Promise<void>;
     }
+    interface PostAccordionItem {
+        /**
+          * If `true`, the element is initially collapsed otherwise it is displayed.
+         */
+        "collapsed"?: boolean;
+        /**
+          * Defines the hierarchical level of the accordion item header within the headings structure.
+         */
+        "headingLevel"?: HeadingLevel;
+        /**
+          * Triggers the collapse programmatically.
+         */
+        "toggle": (force?: boolean) => Promise<boolean>;
+    }
     interface PostAlert {
         /**
           * Triggers alert dismissal programmatically (same as clicking on the close button (×)).
@@ -61,10 +75,6 @@ export namespace Components {
           * If `true`, the element is initially collapsed otherwise it is displayed.
          */
         "collapsed"?: boolean;
-        /**
-          * Defines the hierarchical level of the collapsible header within the headings structure.
-         */
-        "headingLevel"?: HeadingLevel;
         /**
           * Triggers the collapse programmatically.  If there is a collapsing transition running already, it will be reversed.
          */
@@ -180,6 +190,10 @@ export namespace Components {
         "show": (panelName: string) => Promise<void>;
     }
     interface PostTooltip {
+        /**
+          * Wheter or not to display a little pointer arrow
+         */
+        "arrow"?: boolean;
         /**
           * Programmatically hide this tooltip
          */
@@ -224,6 +238,12 @@ declare global {
         prototype: HTMLPostAccordionElement;
         new (): HTMLPostAccordionElement;
     };
+    interface HTMLPostAccordionItemElement extends Components.PostAccordionItem, HTMLStencilElement {
+    }
+    var HTMLPostAccordionItemElement: {
+        prototype: HTMLPostAccordionItemElement;
+        new (): HTMLPostAccordionItemElement;
+    };
     interface HTMLPostAlertElementEventMap {
         "dismissed": void;
     }
@@ -242,7 +262,7 @@ declare global {
         new (): HTMLPostAlertElement;
     };
     interface HTMLPostCollapsibleElementEventMap {
-        "collapseChange": void;
+        "collapseChange": boolean;
     }
     interface HTMLPostCollapsibleElement extends Components.PostCollapsible, HTMLStencilElement {
         addEventListener<K extends keyof HTMLPostCollapsibleElementEventMap>(type: K, listener: (this: HTMLPostCollapsibleElement, ev: PostCollapsibleCustomEvent<HTMLPostCollapsibleElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -327,6 +347,7 @@ declare global {
     };
     interface HTMLElementTagNameMap {
         "post-accordion": HTMLPostAccordionElement;
+        "post-accordion-item": HTMLPostAccordionItemElement;
         "post-alert": HTMLPostAlertElement;
         "post-collapsible": HTMLPostCollapsibleElement;
         "post-icon": HTMLPostIconElement;
@@ -341,10 +362,20 @@ declare global {
 declare namespace LocalJSX {
     interface PostAccordion {
         /**
-          * If `true`, multiple `post-collapsible` can be open at the same time.
+          * If `true`, multiple `post-accordion-item` can be open at the same time.
          */
         "multiple"?: boolean;
     }
+    interface PostAccordionItem {
+        /**
+          * If `true`, the element is initially collapsed otherwise it is displayed.
+         */
+        "collapsed"?: boolean;
+        /**
+          * Defines the hierarchical level of the accordion item header within the headings structure.
+         */
+        "headingLevel"?: HeadingLevel;
+    }
     interface PostAlert {
         /**
           * The label to use for the close button of a dismissible alert.
@@ -377,13 +408,9 @@ declare namespace LocalJSX {
          */
         "collapsed"?: boolean;
         /**
-          * Defines the hierarchical level of the collapsible header within the headings structure.
-         */
-        "headingLevel"?: HeadingLevel;
-        /**
-          * An event emitted when the collapse element is shown or hidden, before the transition. It has no payload.
+          * An event emitted when the collapse element is shown or hidden, before the transition.  The event payload is a boolean: `true` if the collapsible was opened, `false` if it was closed.
          */
-        "onCollapseChange"?: (event: PostCollapsibleCustomEvent<void>) => void;
+        "onCollapseChange"?: (event: PostCollapsibleCustomEvent<boolean>) => void;
     }
     /**
      * @class PostIcon - representing a stencil component
@@ -469,6 +496,10 @@ declare namespace LocalJSX {
         "onTabChange"?: (event: PostTabsCustomEvent<HTMLPostTabPanelElement['name']>) => void;
     }
     interface PostTooltip {
+        /**
+          * Wheter or not to display a little pointer arrow
+         */
+        "arrow"?: boolean;
         /**
           * 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.
          */
@@ -476,6 +507,7 @@ declare namespace LocalJSX {
     }
     interface IntrinsicElements {
         "post-accordion": PostAccordion;
+        "post-accordion-item": PostAccordionItem;
         "post-alert": PostAlert;
         "post-collapsible": PostCollapsible;
         "post-icon": PostIcon;
@@ -492,6 +524,7 @@ declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
             "post-accordion": LocalJSX.PostAccordion & JSXBase.HTMLAttributes<HTMLPostAccordionElement>;
+            "post-accordion-item": LocalJSX.PostAccordionItem & JSXBase.HTMLAttributes<HTMLPostAccordionItemElement>;
             "post-alert": LocalJSX.PostAlert & JSXBase.HTMLAttributes<HTMLPostAlertElement>;
             "post-collapsible": LocalJSX.PostCollapsible & JSXBase.HTMLAttributes<HTMLPostCollapsibleElement>;
             /**

package/dist/types/index.d.ts

@@ -1,5 +1,6 @@
 export { Components, JSX } from './components';
 export { PostAccordion } from './components/post-accordion/post-accordion';
+export { PostAccordionItem } from './components/post-accordion-item/post-accordion-item';
 export { PostAlert } from './components/post-alert/post-alert';
 export { PostCollapsible } from './components/post-collapsible/post-collapsible';
 export { PostIcon } from './components/post-icon/post-icon';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-components",
-  "version": "1.7.1",
+  "version": "2.0.1",
   "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,9 +24,9 @@
     "linkDirectory": true
   },
   "dependencies": {
-    "@floating-ui/dom": "1.5.4",
-    "@oddbird/popover-polyfill": "0.2.3",
-    "@swisspost/design-system-styles": "6.5.1",
+    "@floating-ui/dom": "1.6.1",
+    "@oddbird/popover-polyfill": "0.3.7",
+    "@swisspost/design-system-styles": "6.6.1",
     "ally.js": "1.4.1",
     "long-press-event": "2.4.6"
   },
@@ -34,26 +34,33 @@
     "@percy/cli": "1.27.7",
     "@percy/cypress": "3.1.2",
     "@stencil-community/eslint-plugin": "0.7.1",
-    "@stencil/core": "4.9.0",
+    "@stencil/angular-output-target": "0.8.4",
+    "@stencil/core": "4.12.0",
     "@stencil/react-output-target": "0.5.3",
-    "@stencil/sass": "3.0.8",
-    "@types/jest": "29.5.11",
+    "@stencil/sass": "3.0.9",
+    "@types/jest": "29.5.12",
+    "@types/node": "20.11.16",
     "@typescript-eslint/eslint-plugin": "5.62.0",
     "@typescript-eslint/parser": "5.62.0",
     "bootstrap": "5.3.2",
-    "cypress": "13.6.2",
+    "cypress": "13.6.4",
     "cypress-storybook": "0.5.1",
     "eslint": "8.56.0",
     "eslint-plugin-react": "7.33.2",
-    "jest": "29.7.0",
-    "jest-cli": "29.7.0",
-    "jest-environment-jsdom": "29.7.0",
-    "npm-run-all": "4.1.5",
+    "npm-run-all2": "5.0.2",
     "rimraf": "5.0.5",
-    "sass": "1.69.7",
-    "ts-jest": "29.1.1",
+    "sass": "1.70.0",
+    "ts-jest": "29.1.2",
     "typescript": "4.9.5"
   },
+  "keywords": [
+    "components",
+    "web-components",
+    "stencil",
+    "design-system",
+    "ui",
+    "frontend"
+  ],
   "scripts": {
     "dev": "stencil build --serve --port 9200 --watch --docs-readme",
     "start": "stencil build --watch --docs-readme",

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

@@ -1 +0,0 @@
-{"file":"check-non-empty-eeaa8f77.js","mappings":";;;;SAEgB,aAAa,CAAC,KAAc,EAAE,KAAa;IACzD,IAAIA,sBAAY,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK,KAAK,CAAC,EAAE;QACvC,MAAM,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC;KACxB;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/constants-238701d3.js.map

@@ -1 +0,0 @@
-{"file":"constants-238701d3.js","mappings":";;MAAa,YAAY,GAAG,CAAC,SAAS,EAAE,IAAI,EAAE,EAAE;;;;","names":[],"sources":["src/utils/property-checkers/constants.ts"],"sourcesContent":["export const EMPTY_VALUES = [undefined, null, ''];\n"],"version":3}

package/dist/cjs/fade-35a3633a.js.map

@@ -1 +0,0 @@
-{"file":"fade-35a3633a.js","mappings":";;AAAA,MAAM,YAAY,GAAG,GAAG,CAAC;AACzB,MAAM,gBAAgB,GAAa,EAAC,OAAO,EAAE,GAAG,EAAC,CAAC;AAClD,MAAM,eAAe,GAAa,EAAC,OAAO,EAAE,GAAG,EAAC,CAAC;MAEpC,MAAM,GAAG,CAAC,EAAW,KAAgB,EAAE,CAAC,OAAO,CAC1D,CAAE,gBAAgB,EAAE,eAAe,CAAE,EACrC,EAAE,QAAQ,EAAE,YAAY,EAAE,EAC1B;MAEW,OAAO,GAAG,CAAC,EAAW,KAAgB,EAAE,CAAC,OAAO,CAC3D,CAAE,eAAe,EAAE,gBAAgB,CAAE,EACrC,EAAE,QAAQ,EAAE,YAAY,EAAE;;;;;","names":[],"sources":["src/animations/fade.ts"],"sourcesContent":["const fadeDuration = 200;\nconst fadedOutKeyframe: Keyframe = {opacity: '0'};\nconst fadedInKeyframe: Keyframe = {opacity: '1'};\n\nexport const fadeIn = (el: Element): Animation => el.animate(\n  [ fadedOutKeyframe, fadedInKeyframe ],\n  { duration: fadeDuration }\n);\n\nexport const fadeOut = (el: Element): Animation => el.animate(\n  [ fadedInKeyframe, fadedOutKeyframe ],\n  { duration: fadeDuration }\n);\n"],"version":3}

package/dist/cjs/index-8c288b1a.js.map

@@ -1 +0,0 @@
-{"file":"index-8c288b1a.js","mappings":";;;;SAEgB,OAAO,CAAsB,KAA2B;IACtE,OAAO,CAAC,GAAG,IAAO;QAChB,MAAM,KAAK,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC;QACtB,IAAI,CAACA,sBAAY,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK,KAAK,CAAC;YAAE,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC;KAC1D,CAAC;AACJ;;SCPgB,UAAU,CAAI,KAAQ,EAAE,cAA4B,EAAE,KAAa;IACjF,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,KAAK,CAAC;QAAE,MAAM,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC;AAC9D;;SCFgB,YAAY,CAAC,KAAc,EAAE,OAAe,EAAE,YAAoB;IAChF,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;QAAE,MAAM,IAAI,KAAK,CAAC,YAAY,CAAC,CAAC;AACvF;;SCMgB,SAAS,CAAC,KAAc,EAAE,IAAkB,EAAE,KAAa;IACzE,MAAM,WAAW,GAAG,IAAI,KAAK,OAAO,CAAC;IACrC,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;IAE1C,IAAI,WAAW,IAAI,YAAY,EAAE;QAC/B,IAAI,YAAY,KAAK,WAAW;YAAE,MAAM,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC;KAC1D;SAAM;QACL,IAAI,OAAO,KAAK,KAAK,IAAI;YAAE,MAAM,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC;KACnD;AACH;;MCZa,iBAAiB,GAAG,OAAO,CAAC,UAAU,EAAE;MACxC,mBAAmB,GAAG,OAAO,CAAC,YAAY,EAAE;MAC5C,gBAAgB,GAAG,OAAO,CAAC,SAAS;;;;;;;","names":["EMPTY_VALUES"],"sources":["src/utils/property-checkers/empty-or.ts","src/utils/property-checkers/check-one-of.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 checkOneOf<T>(value: T, possibleValues: readonly T[], error: string) {\n  if (!possibleValues.includes(value)) throw new Error(error);\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}