@postnord/pn-marketweb-components 4.3.6 → 4.3.7

package/umd/modules/@postnord/web-components/types/globals/mixins/index.d.ts

@@ -0,0 +1,21 @@
+import { MixedInCtor } from '../../stencil-public-runtime';
+/** Import the State and functions needed to easily animate the height of an element. */
+declare function animateHeightFactory<B extends MixedInCtor>(Base: B): {
+    new (...args: any[]): {
+        animation: Animation;
+        animationDurationDefault: number;
+        animationDuration: number;
+        isClosing: boolean;
+        isExpanding: boolean;
+        animateDropdown(element: HTMLElement, open: boolean, startHeight: string, endHeight: string): void;
+        /** Open the dropdown by assigning the HTML element you want to animate. */
+        openDropdown(element: HTMLElement, heightOverride?: number): void;
+        /** Close the dropdown by assigning the HTML element you want to animate. */
+        closeDropdown(element: HTMLElement, heightOverride?: number): void;
+        animationFinish(element: HTMLElement): void;
+        cancelAnimations(): void;
+        setAnimationDuration(): void;
+        isMoving(): boolean;
+    };
+} & B;
+export { animateHeightFactory };

package/umd/modules/@postnord/web-components/types/stencil-public-runtime.d.ts

@@ -125,8 +125,27 @@ export interface EventOptions {
      */
     composed?: boolean;
 }
+export interface AttachInternalsOptions {
+    /**
+     * Initial custom states to set on the ElementInternals.states CustomStateSet.
+     * Each key is the state name and the value is the initial boolean state.
+     *
+     * These states can be targeted with the CSS `:state()` pseudo-class.
+     *
+     * @example
+     * ```tsx
+     * @AttachInternals({ states: { open: true, active: false } })
+     * internals: ElementInternals;
+     * ```
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/CustomStateSet
+     */
+    states?: {
+        [stateName: string]: boolean;
+    };
+}
 export interface AttachInternalsDecorator {
-    (): PropertyDecorator;
+    (opts?: AttachInternalsOptions): PropertyDecorator;
 }
 export interface ListenDecorator {
     (eventName: string, opts?: ListenOptions): CustomMethodDecorator<any>;
@@ -660,6 +679,7 @@ export declare namespace h {
     function h(sel: any, data: VNodeData | null, text: string): VNode;
     function h(sel: any, data: VNodeData | null, children: Array<VNode | undefined | null>): VNode;
     function h(sel: any, data: VNodeData | null, children: VNode): VNode;
+    function h(sel: any, data: VNodeData | null, ...children: (VNode | string | number)[]): VNode;
     namespace JSX {
         interface IntrinsicElements extends LocalJSX.IntrinsicElements, JSXBase.IntrinsicElements {
             [tagName: string]: any;
@@ -673,6 +693,8 @@ export declare function h(sel: any, text: string): VNode;
 export declare function h(sel: any, children: Array<VNode | undefined | null>): VNode;
 export declare function h(sel: any, data: VNodeData | null, text: string): VNode;
 export declare function h(sel: any, data: VNodeData | null, children: Array<VNode | undefined | null>): VNode;
+export declare function h(sel: any, data: VNodeData | null, children: VNode): VNode;
+export declare function h(sel: any, data: VNodeData | null, ...children: (VNode | string | number)[]): VNode;
 /**
  * Automatic JSX runtime functions for TypeScript's react-jsx mode.
  * These functions are called automatically by TypeScript when using "jsx": "react-jsx".
@@ -702,7 +724,6 @@ export declare function jsxs(type: any, props: any, key?: string): VNode;
  * @returns a jsx vnode
  */
 export declare function jsxDEV(type: any, props: any, key?: string | number, isStaticChildren?: boolean, source?: any, self?: any): VNode;
-export declare function h(sel: any, data: VNodeData | null, children: VNode): VNode;
 /**
  * A virtual DOM node
  */

package/umd/modules/@postnord/web-components/vscode-data.json

@@ -376,7 +376,7 @@
         },
         {
           "name": "checked",
-          "description": "Check the checkbox."
+          "description": "Programmatically check the input."
         },
         {
           "name": "disabled",
@@ -400,16 +400,28 @@
         },
         {
           "name": "invalid",
-          "description": "If set to true, color scheme will turn red, indicating that there is an issue or incorrect input related the checkbox."
+          "description": "If set to true, color scheme will turn red, indicating that there is an issue related to the checkbox."
         },
         {
           "name": "label",
-          "description": "The checkbox label"
+          "description": "The checkbox label, this is required for the checkbox to be 100% accessible out of the box."
         },
         {
           "name": "name",
           "description": "The name of the checkbox group."
         },
+        {
+          "name": "pn-aria-label",
+          "description": "Provide the label via an aria attribute.\nWe strongly recommend you use the `label` prop instead."
+        },
+        {
+          "name": "pn-aria-labelledby",
+          "description": "Provide the label from another element via its ID.\nWe strongly recommend you use the `label` prop instead."
+        },
+        {
+          "name": "pn-id",
+          "description": "A unique HTML ID for the checkbox."
+        },
         {
           "name": "required",
           "description": "Set the checkbox as required."
@@ -433,47 +445,51 @@
       "attributes": [
         {
           "name": "checked",
-          "description": "Precheck the choice chip"
+          "description": "Programatically check the input."
         },
         {
           "name": "choiceid",
-          "description": "A unique HTML id"
+          "description": "A unique HTML ID for the choice chip."
         },
         {
           "name": "disabled",
-          "description": "Disable the choice chip."
+          "description": "Disable the input."
         },
         {
           "name": "icon",
-          "description": "Include an icon"
+          "description": "Add an icon to the choice chip."
         },
         {
           "name": "label",
-          "description": "The choice chip label"
+          "description": "The choice chip label. This is required for the component to be accessible."
         },
         {
           "name": "large",
-          "description": "Set the size to large."
+          "description": "Use the large size for the choice chip."
         },
         {
           "name": "name",
-          "description": "The name of the checkbox group"
+          "description": "The name of the checkbox group. This is required if you use the `radio` prop."
+        },
+        {
+          "name": "pn-id",
+          "description": "A unique HTML ID for the choice chip"
         },
         {
           "name": "radio",
-          "description": "Make the choice chip a radio"
+          "description": "Make the choice chip a radio input. By default, it behaves as a checkbox.\nYou must assign a `name` for the radio to work."
         },
         {
           "name": "required",
-          "description": "Set the choice chip as required."
+          "description": "Set the input as required."
         },
         {
           "name": "small",
-          "description": "Set the size to small."
+          "description": "Use the small size for the choice chip."
         },
         {
           "name": "value",
-          "description": "This will be emitted on change and input"
+          "description": "This will be emitted on change and input."
         }
       ]
     },
@@ -490,7 +506,7 @@
         },
         {
           "name": "counterid",
-          "description": "Set a unique HTML ID for the counter"
+          "description": "Set a unique HTML ID for the counter."
         },
         {
           "name": "disabled",
@@ -500,9 +516,13 @@
           "name": "helpertext",
           "description": "Set a helpertext for the counter."
         },
+        {
+          "name": "hide-tooltips",
+          "description": "Hide the tooltips for the increase/decrease button."
+        },
         {
           "name": "label",
-          "description": "Label for the counter"
+          "description": "Label for the counter. This is required for the counter to be 100% accessible out of the box."
         },
         {
           "name": "label-decrease",
@@ -557,6 +577,18 @@
           "name": "name",
           "description": "HTML input name."
         },
+        {
+          "name": "pn-aria-label",
+          "description": "Provide the label via an aria attribute.\nWe strongly recommend you use the `label` prop instead."
+        },
+        {
+          "name": "pn-aria-labelledby",
+          "description": "Provide the label from another element via its ID.\nWe strongly recommend you use the `label` prop instead."
+        },
+        {
+          "name": "pn-id",
+          "description": "Set a unique HTML ID for the counter."
+        },
         {
           "name": "readonly",
           "description": "Set the counter as readonly."
@@ -571,7 +603,7 @@
         },
         {
           "name": "value",
-          "description": "Set a predefined value"
+          "description": "Set a predefined value."
         }
       ]
     },
@@ -620,7 +652,7 @@
         },
         {
           "name": "end",
-          "description": "Set a predefined value for the from date."
+          "description": "Set a predefined value for the from date. (input value end)"
         },
         {
           "name": "end-placeholder",
@@ -691,6 +723,10 @@
           "name": "name",
           "description": "HTML input name"
         },
+        {
+          "name": "name-end",
+          "description": "HTML input name"
+        },
         {
           "name": "pattern",
           "description": "Set the HTML pattern prop on the input elements. Make sure it matches the format."
@@ -699,6 +735,30 @@
           "name": "placeholder",
           "description": "Placeholder for the input field (defaults to the format prop)."
         },
+        {
+          "name": "placeholder-end",
+          "description": "Placeholder for end date (defaults to the format prop)."
+        },
+        {
+          "name": "pn-aria-label",
+          "description": "Provide the label via an aria attribute.\nWe strongly recommend you use the `label-from` prop instead."
+        },
+        {
+          "name": "pn-aria-label-end",
+          "description": "Provide the label for the end input via an aria attribute.\nWe strongly recommend you use the `label-to` prop instead."
+        },
+        {
+          "name": "pn-aria-labelledby",
+          "description": "Provide the label from another element via its ID.\nWe strongly recommend you use the `label-from` prop instead."
+        },
+        {
+          "name": "pn-aria-labelledby-end",
+          "description": "Provide the label for the end input from another element via its ID.\nWe strongly recommend you use the `label-to` prop instead."
+        },
+        {
+          "name": "pn-id",
+          "description": "Set a custom ID for the calendar. If you use `range`, the end input will use `${pn-id}-end`."
+        },
         {
           "name": "range",
           "description": "Allow the selection of a date range."
@@ -717,7 +777,7 @@
         },
         {
           "name": "start",
-          "description": "Set a predefined value for the from date."
+          "description": "Set a predefined value for the from date (input value)."
         },
         {
           "name": "view",
@@ -757,7 +817,7 @@
         },
         {
           "name": "fieldset-id",
-          "description": "Give the fieldset a custom HTML id."
+          "description": "Set a custom ID for the fieldset."
         },
         {
           "name": "form",
@@ -778,6 +838,10 @@
         {
           "name": "name",
           "description": "Give the fieldset a HTML name."
+        },
+        {
+          "name": "pn-id",
+          "description": "Set a custom ID for the fieldset."
         }
       ]
     },
@@ -857,6 +921,10 @@
           "name": "name",
           "description": "Set a HTML name."
         },
+        {
+          "name": "pn-id",
+          "description": "Set a custom ID for the file upload."
+        },
         {
           "name": "required",
           "description": "Set the input as required."
@@ -966,7 +1034,7 @@
       "attributes": [
         {
           "name": "color",
-          "description": "Color the icon with one of the follwing colors from our library.",
+          "description": "Color the icon with one of the following colors from our library.\nHas no effects if you use flags from our library.",
           "values": [
             {
               "name": "black"
@@ -1080,7 +1148,7 @@
         },
         {
           "name": "icon",
-          "description": "The SVG content of the icon you want to use.\n\nFlags cannot be colored."
+          "description": "The SVG content of the icon you want to use."
         },
         {
           "name": "small",
@@ -1092,7 +1160,7 @@
       "name": "pn-illustration",
       "description": {
         "kind": "markdown",
-        "value": ""
+        "value": "The `pn-illustration` is a wrapper for an SVG string.\nThe component will look at the viewBox property of the SVG to determine the default width and height,\nbut you can also set these manually with the `width` and `height` props.\nSetting the `fill` prop will make the illustration fill its parent container, which is useful for responsive designs."
       },
       "attributes": [
         {
@@ -1130,7 +1198,7 @@
         },
         {
           "name": "autocomplete",
-          "description": "Let the browser know what type of autocorrects the input should use.\nWorks much better if a `name` and `inputid` is supplied."
+          "description": "Let the browser know what type of autocorrects the input should use.\nWorks much better if a `name` and `pn-id` is supplied."
         },
         {
           "name": "compact",
@@ -1154,7 +1222,7 @@
         },
         {
           "name": "inputid",
-          "description": "Provide a unique HTML id to connect the input with the label.\nA unique uuid ID will be generated if this field is left empty."
+          "description": "Set a custom ID for the input (default is a generated UUID)."
         },
         {
           "name": "inputmode",
@@ -1243,6 +1311,22 @@
           "name": "placeholder",
           "description": "Provide a placeholder text. Remember that this is no replacement for a label.\nThe placeholder should be a nice addition to the label/helpertext, not important information."
         },
+        {
+          "name": "pn-aria-controls",
+          "description": "Set the ID of what this input controls."
+        },
+        {
+          "name": "pn-aria-label",
+          "description": "Provide the label via an aria attribute.\nWe strongly recommend you use the `label` prop instead."
+        },
+        {
+          "name": "pn-aria-labelledby",
+          "description": "Provide the label from another element via its ID.\nWe strongly recommend you use the `label` prop instead."
+        },
+        {
+          "name": "pn-id",
+          "description": "Set a custom ID for the input (default is a generated UUID)."
+        },
         {
           "name": "readonly",
           "description": "Set the input as `readonly`."
@@ -1309,7 +1393,7 @@
       "attributes": [
         {
           "name": "allow-overflow",
-          "description": "Allow overflow if possible. When the modal opens, it will check scrollHeight > offsetHeight.\nDo not use if you have a lot of conditional rendering inside the modal."
+          "description": "Allow overflow *when* it is possible.\nDo not use if you have a lot of conditional rendering inside the modal as it can cause layout shifts."
         },
         {
           "name": "helpertext",
@@ -1317,7 +1401,7 @@
         },
         {
           "name": "hide-close",
-          "description": "Hide the close button. If you disable this, make sure you build your own cancel button."
+          "description": "Hide the close button. If you enable this, make sure you build your own cancel button."
         },
         {
           "name": "label",
@@ -1350,15 +1434,19 @@
         },
         {
           "name": "open",
-          "description": "Bind to this property if you want to control the visibility of the modal from your own data."
+          "description": "Use this prop if you want to control the visibility of the modal programmatically."
         },
         {
           "name": "persistent",
           "description": "Prevent users from closing the modal by clicking on the backdrop or the `ESC` key."
         },
+        {
+          "name": "pn-id",
+          "description": "Set a custom HTML id."
+        },
         {
           "name": "sheet",
-          "description": "Use the `sheet` visual. Aligns the modal to the right."
+          "description": "Use the `sheet` visual. Aligns the modal to the right instead of the center."
         }
       ]
     },
@@ -1432,7 +1520,7 @@
         },
         {
           "name": "max-height",
-          "description": "Use a custom max-height for the dropdown list."
+          "description": "The component will automatically set the max height of the dropdown list on its own.\nIt takes the `pn-topbar` into account and will open in the direction that fits best.\nUse this prop to override this behaviour and use a custom max-height."
         },
         {
           "name": "name",
@@ -1442,6 +1530,18 @@
           "name": "placeholder",
           "description": "This is what will be shown on load if no value is used.\nThe `placeholder` will override the default text used if you have the `search` prop active."
         },
+        {
+          "name": "pn-aria-label",
+          "description": "Provide the label via an aria attribute.\nWe strongly recommend you use the `label` prop instead."
+        },
+        {
+          "name": "pn-aria-labelledby",
+          "description": "Provide the label from another element via its ID.\nWe strongly recommend you use the `label` prop instead."
+        },
+        {
+          "name": "pn-id",
+          "description": "Set a custom ID for the select."
+        },
         {
           "name": "required",
           "description": "Set the select as required."
@@ -1777,7 +1877,7 @@
       "attributes": [
         {
           "name": "checked",
-          "description": "Check the radio."
+          "description": "Programmatically check the input."
         },
         {
           "name": "disabled",
@@ -1807,6 +1907,18 @@
           "name": "name",
           "description": "The name of the radio group."
         },
+        {
+          "name": "pn-aria-label",
+          "description": "Provide the label via an aria attribute.\nWe strongly recommend you use the `label` prop instead."
+        },
+        {
+          "name": "pn-aria-labelledby",
+          "description": "Provide the label from another element via its ID.\nWe strongly recommend you use the `label` prop instead."
+        },
+        {
+          "name": "pn-id",
+          "description": "A unique HTML ID for the radio."
+        },
         {
           "name": "radioid",
           "description": "A unique HTML ID for the radio."
@@ -1888,13 +2000,29 @@
           "name": "name-end",
           "description": "The range input name."
         },
+        {
+          "name": "pn-aria-label",
+          "description": "Provide the label via an aria attribute.\nWe strongly recommend you use the `label` prop instead."
+        },
+        {
+          "name": "pn-aria-label-end",
+          "description": "Provide the label for the end input via an aria attribute.\nWe strongly recommend you use the `label-end` prop instead."
+        },
+        {
+          "name": "pn-aria-labelledby",
+          "description": "Provide the label from another element via its ID.\nWe strongly recommend you use the `label` prop instead."
+        },
+        {
+          "name": "pn-aria-labelledby-end",
+          "description": "Provide the label for the end input from another element via its ID.\nWe strongly recommend you use the `label-end` prop instead."
+        },
         {
           "name": "pn-id",
-          "description": "Set a custom HTML id."
+          "description": "Set a custom ID for the input."
         },
         {
           "name": "pn-id-end",
-          "description": "Set a custom HTML id."
+          "description": "Set a custom ID for the end input."
         },
         {
           "name": "step",
@@ -2062,7 +2190,15 @@
         },
         {
           "name": "placeholder",
-          "description": "Set a search field placeholder. This is no replacement for a `label`."
+          "description": "Set a search field placeholder."
+        },
+        {
+          "name": "pn-aria-labelledby",
+          "description": "Provide the label from another element via its ID.\nWe strongly recommend you use the `label` prop instead."
+        },
+        {
+          "name": "pn-id",
+          "description": "Set a custom ID for the search input."
         },
         {
           "name": "required",
@@ -2101,9 +2237,13 @@
           "name": "name",
           "description": "The segment controller name."
         },
+        {
+          "name": "pn-id",
+          "description": "Set a custom ID for the segment."
+        },
         {
           "name": "segmentid",
-          "description": "A unique HTML id."
+          "description": "Set a custom ID for the segment."
         },
         {
           "name": "selected",
@@ -2179,13 +2319,25 @@
           "name": "name",
           "description": "HTML select name."
         },
+        {
+          "name": "pn-aria-label",
+          "description": "Provide the label via an aria attribute.\nWe strongly recommend you use the `label` prop instead."
+        },
+        {
+          "name": "pn-aria-labelledby",
+          "description": "Provide the label from another element via its ID.\nWe strongly recommend you use the `label` prop instead."
+        },
+        {
+          "name": "pn-id",
+          "description": "Set a custom ID for the select."
+        },
         {
           "name": "required",
           "description": "Set the select as required."
         },
         {
           "name": "select-id",
-          "description": "Select HTML id"
+          "description": "Set a custom ID for the select."
         }
       ]
     },
@@ -2499,6 +2651,18 @@
           "name": "placeholder",
           "description": "Placeholder for the textarea."
         },
+        {
+          "name": "pn-aria-label",
+          "description": "Provide the label via an aria attribute.\nWe strongly recommend you use the `label` prop instead."
+        },
+        {
+          "name": "pn-aria-labelledby",
+          "description": "Provide the label from another element via its ID.\nWe strongly recommend you use the `label` prop instead."
+        },
+        {
+          "name": "pn-id",
+          "description": "Set a custom ID for the textarea."
+        },
         {
           "name": "readonly",
           "description": "Make the textarea readonly."
@@ -2521,7 +2685,7 @@
         },
         {
           "name": "textareaid",
-          "description": "A unique ID connecting the element to the label."
+          "description": "Set a custom ID for the textarea."
         },
         {
           "name": "valid",
@@ -2690,13 +2854,29 @@
           "name": "name",
           "description": "HTML toggle name."
         },
+        {
+          "name": "pn-aria-label",
+          "description": "Provide the label via an aria attribute.\nWe strongly recommend you use the `label` prop instead."
+        },
+        {
+          "name": "pn-aria-labelledby",
+          "description": "Provide the label from another element via its ID.\nWe strongly recommend you use the `label` prop instead."
+        },
+        {
+          "name": "pn-id",
+          "description": "Set a custom ID for the switch."
+        },
+        {
+          "name": "required",
+          "description": "Set the switch as required."
+        },
         {
           "name": "small",
           "description": "Make the toggle smaller."
         },
         {
           "name": "toggleid",
-          "description": "Set a unique HTML id."
+          "description": "Set a custom ID for the switch."
         },
         {
           "name": "value",