@postnord/pn-marketweb-components 4.1.0 → 4.1.2

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

@@ -63,6 +63,12 @@ export interface ShadowRootOptions {
      * focusable part is given focus, and the shadow host is given any available `:focus` styling.
      */
     delegatesFocus?: boolean;
+    /**
+     * Sets the slot assignment mode for the shadow root. When set to `'manual'`, enables imperative
+     * slotting using the `HTMLSlotElement.assign()` method. Defaults to `'named'` for standard
+     * declarative slotting behavior.
+     */
+    slotAssignment?: 'manual' | 'named';
 }
 export interface ModeStyles {
     [modeName: string]: string | string[];
@@ -125,6 +131,9 @@ export interface AttachInternalsDecorator {
 export interface ListenDecorator {
     (eventName: string, opts?: ListenOptions): CustomMethodDecorator<any>;
 }
+export interface ResolveVarFunction {
+    <T>(variable: T): string;
+}
 export interface ListenOptions {
     /**
      * Handlers can also be registered for an event other than the host itself.
@@ -153,7 +162,9 @@ export interface StateDecorator {
     (): PropertyDecorator;
 }
 export interface WatchDecorator {
-    (propName: any): CustomMethodDecorator<(newValue?: any, oldValue?: any, propName?: any, ...args: any[]) => any | void>;
+    (propName: any, watchOptions?: {
+        immediate?: boolean;
+    }): CustomMethodDecorator<(newValue?: any, oldValue?: any, propName?: any, ...args: any[]) => any | void>;
 }
 export interface PropSerializeDecorator {
     (propName: any): CustomMethodDecorator<(newValue?: any, propName?: string, ...args: any[]) => string | null>;
@@ -208,6 +219,24 @@ export declare const AttachInternals: AttachInternalsDecorator;
  * https://stenciljs.com/docs/events#listen-decorator
  */
 export declare const Listen: ListenDecorator;
+/**
+ * The `resolveVar()` function is a compile-time utility that resolves const variables
+ * and object properties to their string literal values. This allows variables to be
+ * used in `@Listen` and `@Event` decorators instead of hardcoded strings.
+ *
+ * @example
+ * ```ts
+ * const MY_EVENT = 'myEvent';
+ * @Listen(resolveVar(MY_EVENT))
+ * ```
+ *
+ * @example
+ * ```ts
+ * const EVENTS = { MY_EVENT: 'myEvent' } as const;
+ * @Event({ eventName: resolveVar(EVENTS.MY_EVENT) })
+ * ```
+ */
+export declare const resolveVar: ResolveVarFunction;
 /**
  * The `@Method()` decorator is used to expose methods on the public API.
  * Class methods decorated with the @Method() decorator can be called directly
@@ -365,6 +394,27 @@ export declare function readTask(task: RafCallback): void;
  * Unhandled exception raised while rendering, during event handling, or lifecycles will trigger the custom event handler.
  */
 export declare const setErrorHandler: (handler: ErrorHandler) => void;
+export type TagTransformer = (tag: string) => string;
+/**
+ * Sets a tag transformer to be used when rendering your custom elements.
+ * ```ts
+ * setTagTransformer((tag) => {
+ *  if (tag.startsWith('my-')) return `new-${tag}`
+ *  return tag;
+ * });
+ * ```
+ * Will mean all your components that start with `my-` are defined instead with `new-my-` prefix.
+ *
+ * @param transformer the transformer function to use which must return a string.
+ */
+export declare function setTagTransformer(transformer: TagTransformer): void;
+/**
+ * Transforms a tag name using a transformer set via `setTagTransformer`
+ *
+ * @param tag - the tag to transform e.g. `my-tag`
+ * @returns the transformed tag e.g. `new-my-tag`
+ */
+export declare function transformTag(tag: string): string;
 /**
  * @deprecated - Use `MixedInCtor` instead:
  * ```ts
@@ -568,7 +618,7 @@ export interface FunctionalUtilities {
     map: (children: VNode[], cb: (vnode: ChildNode, index: number, array: ChildNode[]) => ChildNode) => VNode[];
 }
 export interface FunctionalComponent<T = {}> {
-    (props: T, children: VNode[], utils: FunctionalUtilities): VNode | VNode[];
+    (props: T, children: VNode[], utils: FunctionalUtilities): VNode | VNode[] | null;
 }
 /**
  * A Child VDOM node
@@ -623,6 +673,35 @@ 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;
+/**
+ * Automatic JSX runtime functions for TypeScript's react-jsx mode.
+ * These functions are called automatically by TypeScript when using "jsx": "react-jsx".
+ * @param type type of node
+ * @param props properties of node
+ * @param key optional key for the node
+ * @returns a jsx vnode
+ */
+export declare function jsx(type: any, props: any, key?: string): VNode;
+/**
+ * Automatic JSX runtime functions for TypeScript's react-jsxmode with multiple children.
+ * @param type type of node
+ * @param props properties of node
+ * @param key optional key for the node
+ * @returns a jsx vnode
+ */
+export declare function jsxs(type: any, props: any, key?: string): VNode;
+/**
+ * Automatic JSX runtime functions for TypeScript's react-jsxdev mode.
+ * These functions are called automatically by TypeScript when using "jsx": "react-jsxdev".
+ * @param type type of node
+ * @param props properties of node
+ * @param key optional key for the node
+ * @param isStaticChildren indicates if the children are static
+ * @param source source information
+ * @param self reference to the component instance
+ * @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
@@ -653,7 +732,7 @@ declare namespace LocalJSX {
 export { LocalJSX as JSX };
 export declare namespace JSXBase {
     interface IntrinsicElements {
-        slot: JSXBase.SlotAttributes;
+        slot: JSXBase.SlotAttributes<HTMLSlotElement>;
         a: JSXBase.AnchorHTMLAttributes<HTMLAnchorElement>;
         abbr: JSXBase.HTMLAttributes;
         address: JSXBase.HTMLAttributes;
@@ -823,7 +902,7 @@ export declare namespace JSXBase {
         use: JSXBase.SVGAttributes;
         view: JSXBase.SVGAttributes;
     }
-    interface SlotAttributes extends JSXAttributes {
+    interface SlotAttributes<T = HTMLSlotElement> extends JSXAttributes<T> {
         name?: string;
         slot?: string;
         onSlotchange?: (event: Event) => void;
@@ -879,6 +958,9 @@ export declare namespace JSXBase {
         popoverTargetAction?: string;
         popoverTargetElement?: Element | null;
         popoverTarget?: string;
+        command?: string;
+        commandFor?: string;
+        commandfor?: string;
     }
     interface CanvasHTMLAttributes<T> extends HTMLAttributes<T> {
         height?: number | string;
@@ -1747,6 +1829,7 @@ export interface CustomElementsDefineOptions {
     exclude?: string[];
     resourcesUrl?: string;
     syncQueue?: boolean;
+    /** @deprecated in-favour of `setTagTransformer` and `transformTag` */
     transformTagName?: (tagName: string) => string;
     jmp?: (c: Function) => any;
     raf?: (c: FrameRequestCallback) => number;

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

@@ -484,6 +484,10 @@
         "value": "The `pn-counter` is an input with a button on each side that can be used to increase and decrease the input value."
       },
       "attributes": [
+        {
+          "name": "compact",
+          "description": "Use the compact label variant."
+        },
         {
           "name": "counterid",
           "description": "Set a unique HTML ID for the counter"
@@ -586,6 +590,10 @@
           "name": "calendar-up",
           "description": "Make the calendar open upwards by default. Opens downwards if there is not enough space."
         },
+        {
+          "name": "compact",
+          "description": "Set the date picker label as compact. If used, the `placeholder` will no longer be displayed."
+        },
         {
           "name": "date-id",
           "description": "Set a custom ID for the calendar."
@@ -961,112 +969,112 @@
           "description": "Color the icon with one of the follwing colors from our library.",
           "values": [
             {
-              "name": "warning"
+              "name": "black"
             },
             {
-              "name": "black"
+              "name": "blue200"
             },
             {
-              "name": "gray900"
+              "name": "blue25"
             },
             {
-              "name": "gray700"
+              "name": "blue400"
             },
             {
-              "name": "gray400"
+              "name": "blue50"
             },
             {
-              "name": "gray200"
+              "name": "blue700"
             },
             {
-              "name": "gray100"
+              "name": "blue900"
             },
             {
-              "name": "gray50"
+              "name": "coral200"
             },
             {
-              "name": "gray25"
+              "name": "coral25"
             },
             {
-              "name": "white"
+              "name": "coral400"
             },
             {
-              "name": "blue900"
+              "name": "coral50"
             },
             {
-              "name": "blue700"
+              "name": "coral700"
             },
             {
-              "name": "blue400"
+              "name": "coral900"
             },
             {
-              "name": "blue200"
+              "name": "gray100"
             },
             {
-              "name": "blue50"
+              "name": "gray200"
             },
             {
-              "name": "blue25"
+              "name": "gray25"
             },
             {
-              "name": "coral900"
+              "name": "gray400"
             },
             {
-              "name": "coral700"
+              "name": "gray50"
             },
             {
-              "name": "coral400"
+              "name": "gray700"
             },
             {
-              "name": "coral200"
+              "name": "gray900"
             },
             {
-              "name": "coral50"
+              "name": "green200"
             },
             {
-              "name": "coral25"
+              "name": "green25"
             },
             {
-              "name": "orange900"
+              "name": "green400"
             },
             {
-              "name": "orange700"
+              "name": "green50"
             },
             {
-              "name": "orange500"
+              "name": "green500"
             },
             {
-              "name": "orange400"
+              "name": "green700"
             },
             {
-              "name": "orange200"
+              "name": "green900"
             },
             {
-              "name": "orange50"
+              "name": "orange200"
             },
             {
               "name": "orange25"
             },
             {
-              "name": "green900"
+              "name": "orange400"
             },
             {
-              "name": "green700"
+              "name": "orange50"
             },
             {
-              "name": "green500"
+              "name": "orange500"
             },
             {
-              "name": "green400"
+              "name": "orange700"
             },
             {
-              "name": "green200"
+              "name": "orange900"
             },
             {
-              "name": "green50"
+              "name": "warning"
             },
             {
-              "name": "green25"
+              "name": "white"
             }
           ]
         },
@@ -1124,6 +1132,10 @@
           "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."
         },
+        {
+          "name": "compact",
+          "description": "Use the compact label variant. The `placeholder` you provide will not be visible if used at the same time."
+        },
         {
           "name": "disabled",
           "description": "Set the input as `disabled`."
@@ -1365,6 +1377,10 @@
           "name": "bottom",
           "description": "Force the dropdown to always open downwards."
         },
+        {
+          "name": "compact",
+          "description": "Set the date picker label as compact. If used, the `placeholder` will no longer be displayed."
+        },
         {
           "name": "disabled",
           "description": "Disable the select."
@@ -1809,6 +1825,107 @@
         }
       ]
     },
+    {
+      "name": "pn-range",
+      "description": {
+        "kind": "markdown",
+        "value": "Allow the user to use the slider to set a number value. Its built on the native `input[type=range]` element and\nhas support for most attributes."
+      },
+      "attributes": [
+        {
+          "name": "disabled",
+          "description": "Disable the range input."
+        },
+        {
+          "name": "error",
+          "description": "Set an error message for the range input."
+        },
+        {
+          "name": "helpertext",
+          "description": "Set a helpertext for the range input."
+        },
+        {
+          "name": "icon",
+          "description": "Set an icon for the range/input field."
+        },
+        {
+          "name": "icon-end",
+          "description": "Set an icon at the end of the range or for the second input field when using `multiple`."
+        },
+        {
+          "name": "input",
+          "description": "Display an input for the range value.\nAllowing the user to type or use the slider to set the value."
+        },
+        {
+          "name": "invalid",
+          "description": "Set the error visual for the range input, same as `error`, but without a message."
+        },
+        {
+          "name": "label",
+          "description": "Label for the range input."
+        },
+        {
+          "name": "label-end",
+          "description": "Label for the range end input."
+        },
+        {
+          "name": "max",
+          "description": "The range input max value."
+        },
+        {
+          "name": "min",
+          "description": "The range input min value."
+        },
+        {
+          "name": "multiple",
+          "description": "Allow multiple values to be selected"
+        },
+        {
+          "name": "name",
+          "description": "The range input name."
+        },
+        {
+          "name": "name-end",
+          "description": "The range input name."
+        },
+        {
+          "name": "pn-id",
+          "description": "Set a custom HTML id."
+        },
+        {
+          "name": "pn-id-end",
+          "description": "Set a custom HTML id."
+        },
+        {
+          "name": "step",
+          "description": "Set a step value for the range input."
+        },
+        {
+          "name": "text-prefix",
+          "description": "Set a prefix for the range/input field."
+        },
+        {
+          "name": "text-suffix",
+          "description": "Set a suffix for the range/input field."
+        },
+        {
+          "name": "tooltip-hide",
+          "description": "Hide the tooltip."
+        },
+        {
+          "name": "tooltip-template",
+          "description": "Range tooltip label template. Default is simply the value of the range input."
+        },
+        {
+          "name": "value",
+          "description": "The range input value."
+        },
+        {
+          "name": "value-end",
+          "description": "The range end input value."
+        }
+      ]
+    },
     {
       "name": "pn-read-only-button",
       "description": {
@@ -2026,6 +2143,10 @@
           "name": "autocomplete",
           "description": "HTML autocomplete."
         },
+        {
+          "name": "compact",
+          "description": "Use the compact label variant."
+        },
         {
           "name": "disabled",
           "description": "Disable the select."
@@ -2338,6 +2459,10 @@
           "name": "cols",
           "description": "Set the col count for the textarea."
         },
+        {
+          "name": "compact",
+          "description": "Use the compact label variant."
+        },
         {
           "name": "disabled",
           "description": "Disable the textarea."

package/vscode-data.json

@@ -600,10 +600,18 @@
           "name": "input-limit-warning",
           "description": ""
         },
+        {
+          "name": "input-low-error",
+          "description": ""
+        },
         {
           "name": "language-code",
           "description": ""
         },
+        {
+          "name": "minimum-input-limit",
+          "description": ""
+        },
         {
           "name": "row-delete-button-text",
           "description": ""
@@ -1181,15 +1189,7 @@
         },
         {
           "name": "open",
-          "description": "",
-          "values": [
-            {
-              "name": "close"
-            },
-            {
-              "name": "open"
-            }
-          ]
+          "description": ""
         },
         {
           "name": "outdated-q-r-message",