@postnord/pn-marketweb-components 4.1.0 → 4.1.2

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

@@ -537,6 +537,12 @@ export namespace Components {
      * @nativeChange The `change` event is emitted when the input loses focus, the user clicks `Enter` or makes a selection (such as auto complete or suggestions).
      */
     interface PnCounter {
+        /**
+          * Use the compact label variant.
+          * @since v7.21.0
+          * @default false
+         */
+        "compact"?: boolean;
         /**
           * Set a unique HTML ID for the counter
           * @default this.id
@@ -645,6 +651,12 @@ export namespace Components {
           * @default false
          */
         "calendarUp": boolean;
+        /**
+          * Set the date picker label as compact. If used, the `placeholder` will no longer be displayed.
+          * @since v7.21.0
+          * @default false
+         */
+        "compact"?: boolean;
         /**
           * Set a custom ID for the calendar.
           * @since v7.6.0
@@ -1080,6 +1092,12 @@ export namespace Components {
           * @category HTML input
          */
         "autocomplete"?: string;
+        /**
+          * Use the compact label variant. The `placeholder` you provide will not be visible if used at the same time.
+          * @since v7.21.0
+          * @default false
+         */
+        "compact"?: boolean;
         /**
           * Set the input as `disabled`.
           * @category State
@@ -1295,6 +1313,12 @@ export namespace Components {
           * @default false
          */
         "bottom"?: boolean;
+        /**
+          * Set the date picker label as compact. If used, the `placeholder` will no longer be displayed.
+          * @since v7.21.0
+          * @default false
+         */
+        "compact"?: boolean;
         /**
           * Disable the select.
           * @category Validation
@@ -1712,6 +1736,146 @@ export namespace Components {
          */
         "value": string;
     }
+    /**
+     * Allow the user to use the slider to set a number value. Its built on the native `input[type=range]` element and
+     * has support for most attributes.
+     * @nativeInput Use the `input` event to listen to the range / input value being modified by the user. It is emitted everytime the user changes the value.
+     * @nativeChange The `change` event is emitted when the user makes a final selection (letting go of the range/input).
+     * @since v7.20.0
+     */
+    interface PnRange {
+        /**
+          * Disable the range input.
+          * @category State
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * Set an error message for the range input.
+          * @category State
+          * @default null
+         */
+        "error"?: string;
+        /**
+          * Set a helpertext for the range input.
+          * @default null
+         */
+        "helpertext"?: string;
+        /**
+          * Set an icon for the range/input field.
+          * @default null
+         */
+        "icon"?: string;
+        /**
+          * Set an icon at the end of the range or for the second input field when using `multiple`.
+          * @default null
+         */
+        "iconEnd"?: string;
+        /**
+          * Display an input for the range value. Allowing the user to type or use the slider to set the value.
+          * @category Features
+          * @default false
+         */
+        "input"?: boolean;
+        /**
+          * Set the error visual for the range input, same as `error`, but without a message.
+          * @category State
+          * @default false
+         */
+        "invalid"?: boolean;
+        /**
+          * Label for the range input.
+         */
+        "label": string;
+        /**
+          * Label for the range end input.
+         */
+        "labelEnd": string;
+        /**
+          * Add markers. This will also render a `datalist` element with `options`. Omitting the `label` for a marker will use the `value` as label instead. Set `label` to `null` or `''` to hide it completely.
+          * @default []
+         */
+        "markers"?: { value: number; label?: string }[];
+        /**
+          * The range input max value.
+          * @category HTML Attributes
+          * @default 100
+         */
+        "max"?: number;
+        /**
+          * The range input min value.
+          * @category HTML Attributes
+          * @default 0
+         */
+        "min"?: number;
+        /**
+          * Allow multiple values to be selected
+          * @category Features
+          * @default false
+         */
+        "multiple"?: boolean;
+        /**
+          * The range input name.
+          * @category HTML Attributes
+         */
+        "name"?: string;
+        /**
+          * The range input name.
+          * @category HTML Attributes
+         */
+        "nameEnd"?: string;
+        /**
+          * Set a custom HTML id.
+          * @default this.id
+         */
+        "pnId"?: string;
+        /**
+          * Set a custom HTML id.
+          * @default this.idEnd
+         */
+        "pnIdEnd"?: string;
+        /**
+          * Set a step value for the range input.
+          * @category HTML Attributes
+          * @default ''
+         */
+        "step"?: HTMLInputElement['step'];
+        /**
+          * Set a prefix for the range/input field.
+          * @default null
+         */
+        "textPrefix"?: string;
+        /**
+          * Set a suffix for the range/input field.
+          * @default null
+         */
+        "textSuffix"?: string;
+        /**
+          * Hide the tooltip.
+          * @category Features
+          * @default false
+         */
+        "tooltipHide"?: boolean;
+        /**
+          * Range tooltip label template. Default is simply the value of the range input.
+          * @example // Show a suffixed '%' in the tooltip with '{value} %'. <pn-range tooltip-template="{value} %" value="25" />
+          * @category Features
+          * @default this.tooltipDefault
+         */
+        "tooltipTemplate"?: string;
+        /**
+          * The range input value.
+          * @category HTML Attributes
+          * @default 0
+         */
+        "value"?: number;
+        /**
+          * The range end input value.
+          * @category HTML Attributes
+          * @default 0
+         */
+        "valueEnd"?: number;
+    }
     /**
      * There are no events or features other than the `icon`, `small` and `language` prop.
      * Our rule is to not have disabled buttons.
@@ -1895,6 +2059,12 @@ export namespace Components {
           * @category HTML
          */
         "autocomplete": string;
+        /**
+          * Use the compact label variant.
+          * @since v7.21.0
+          * @default false
+         */
+        "compact"?: boolean;
         /**
           * Disable the select.
           * @category Validation
@@ -2183,6 +2353,12 @@ export namespace Components {
           * @default 20
          */
         "cols"?: number;
+        /**
+          * Use the compact label variant.
+          * @since v7.21.0
+          * @default false
+         */
+        "compact"?: boolean;
         /**
           * Disable the textarea.
           * @category State
@@ -2651,6 +2827,10 @@ export interface PnProgressIndicatorStepCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLPnProgressIndicatorStepElement;
 }
+export interface PnRangeCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLPnRangeElement;
+}
 export interface PnSearchFieldCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLPnSearchFieldElement;
@@ -3201,6 +3381,38 @@ declare global {
         prototype: HTMLPnRadioButtonElement;
         new (): HTMLPnRadioButtonElement;
     };
+    interface HTMLPnRangeElementEventMap {
+        "rangeSelected": {
+    value: number;
+    /* The end value when using `multiple`. */
+    valueEnd?: number;
+    /* The selected percentage of the range input. */
+    percentage: number;
+    /* The difference between `value` and `valueEnd`. */
+    difference?: number;
+  };
+    }
+    /**
+     * Allow the user to use the slider to set a number value. Its built on the native `input[type=range]` element and
+     * has support for most attributes.
+     * @nativeInput Use the `input` event to listen to the range / input value being modified by the user. It is emitted everytime the user changes the value.
+     * @nativeChange The `change` event is emitted when the user makes a final selection (letting go of the range/input).
+     * @since v7.20.0
+     */
+    interface HTMLPnRangeElement extends Components.PnRange, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLPnRangeElementEventMap>(type: K, listener: (this: HTMLPnRangeElement, ev: PnRangeCustomEvent<HTMLPnRangeElementEventMap[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 HTMLPnRangeElementEventMap>(type: K, listener: (this: HTMLPnRangeElement, ev: PnRangeCustomEvent<HTMLPnRangeElementEventMap[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 HTMLPnRangeElement: {
+        prototype: HTMLPnRangeElement;
+        new (): HTMLPnRangeElement;
+    };
     /**
      * There are no events or features other than the `icon`, `small` and `language` prop.
      * Our rule is to not have disabled buttons.
@@ -3524,6 +3736,7 @@ declare global {
         "pn-progress-indicator-step": HTMLPnProgressIndicatorStepElement;
         "pn-progress-stepper": HTMLPnProgressStepperElement;
         "pn-radio-button": HTMLPnRadioButtonElement;
+        "pn-range": HTMLPnRangeElement;
         "pn-read-only-button": HTMLPnReadOnlyButtonElement;
         "pn-search-field": HTMLPnSearchFieldElement;
         "pn-segment": HTMLPnSegmentElement;
@@ -4102,6 +4315,12 @@ declare namespace LocalJSX {
      * @nativeChange The `change` event is emitted when the input loses focus, the user clicks `Enter` or makes a selection (such as auto complete or suggestions).
      */
     interface PnCounter {
+        /**
+          * Use the compact label variant.
+          * @since v7.21.0
+          * @default false
+         */
+        "compact"?: boolean;
         /**
           * Set a unique HTML ID for the counter
           * @default this.id
@@ -4214,6 +4433,12 @@ declare namespace LocalJSX {
           * @default false
          */
         "calendarUp"?: boolean;
+        /**
+          * Set the date picker label as compact. If used, the `placeholder` will no longer be displayed.
+          * @since v7.21.0
+          * @default false
+         */
+        "compact"?: boolean;
         /**
           * Set a custom ID for the calendar.
           * @since v7.6.0
@@ -4690,6 +4915,12 @@ declare namespace LocalJSX {
           * @category HTML input
          */
         "autocomplete"?: string;
+        /**
+          * Use the compact label variant. The `placeholder` you provide will not be visible if used at the same time.
+          * @since v7.21.0
+          * @default false
+         */
+        "compact"?: boolean;
         /**
           * Set the input as `disabled`.
           * @category State
@@ -4918,6 +5149,12 @@ declare namespace LocalJSX {
           * @default false
          */
         "bottom"?: boolean;
+        /**
+          * Set the date picker label as compact. If used, the `placeholder` will no longer be displayed.
+          * @since v7.21.0
+          * @default false
+         */
+        "compact"?: boolean;
         /**
           * Disable the select.
           * @category Validation
@@ -5388,6 +5625,158 @@ declare namespace LocalJSX {
          */
         "value": string;
     }
+    /**
+     * Allow the user to use the slider to set a number value. Its built on the native `input[type=range]` element and
+     * has support for most attributes.
+     * @nativeInput Use the `input` event to listen to the range / input value being modified by the user. It is emitted everytime the user changes the value.
+     * @nativeChange The `change` event is emitted when the user makes a final selection (letting go of the range/input).
+     * @since v7.20.0
+     */
+    interface PnRange {
+        /**
+          * Disable the range input.
+          * @category State
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * Set an error message for the range input.
+          * @category State
+          * @default null
+         */
+        "error"?: string;
+        /**
+          * Set a helpertext for the range input.
+          * @default null
+         */
+        "helpertext"?: string;
+        /**
+          * Set an icon for the range/input field.
+          * @default null
+         */
+        "icon"?: string;
+        /**
+          * Set an icon at the end of the range or for the second input field when using `multiple`.
+          * @default null
+         */
+        "iconEnd"?: string;
+        /**
+          * Display an input for the range value. Allowing the user to type or use the slider to set the value.
+          * @category Features
+          * @default false
+         */
+        "input"?: boolean;
+        /**
+          * Set the error visual for the range input, same as `error`, but without a message.
+          * @category State
+          * @default false
+         */
+        "invalid"?: boolean;
+        /**
+          * Label for the range input.
+         */
+        "label": string;
+        /**
+          * Label for the range end input.
+         */
+        "labelEnd"?: string;
+        /**
+          * Add markers. This will also render a `datalist` element with `options`. Omitting the `label` for a marker will use the `value` as label instead. Set `label` to `null` or `''` to hide it completely.
+          * @default []
+         */
+        "markers"?: { value: number; label?: string }[];
+        /**
+          * The range input max value.
+          * @category HTML Attributes
+          * @default 100
+         */
+        "max"?: number;
+        /**
+          * The range input min value.
+          * @category HTML Attributes
+          * @default 0
+         */
+        "min"?: number;
+        /**
+          * Allow multiple values to be selected
+          * @category Features
+          * @default false
+         */
+        "multiple"?: boolean;
+        /**
+          * The range input name.
+          * @category HTML Attributes
+         */
+        "name"?: string;
+        /**
+          * The range input name.
+          * @category HTML Attributes
+         */
+        "nameEnd"?: string;
+        /**
+          * Emitted as the user makes any changes to the range/input value.
+         */
+        "onRangeSelected"?: (event: PnRangeCustomEvent<{
+    value: number;
+    /* The end value when using `multiple`. */
+    valueEnd?: number;
+    /* The selected percentage of the range input. */
+    percentage: number;
+    /* The difference between `value` and `valueEnd`. */
+    difference?: number;
+  }>) => void;
+        /**
+          * Set a custom HTML id.
+          * @default this.id
+         */
+        "pnId"?: string;
+        /**
+          * Set a custom HTML id.
+          * @default this.idEnd
+         */
+        "pnIdEnd"?: string;
+        /**
+          * Set a step value for the range input.
+          * @category HTML Attributes
+          * @default ''
+         */
+        "step"?: HTMLInputElement['step'];
+        /**
+          * Set a prefix for the range/input field.
+          * @default null
+         */
+        "textPrefix"?: string;
+        /**
+          * Set a suffix for the range/input field.
+          * @default null
+         */
+        "textSuffix"?: string;
+        /**
+          * Hide the tooltip.
+          * @category Features
+          * @default false
+         */
+        "tooltipHide"?: boolean;
+        /**
+          * Range tooltip label template. Default is simply the value of the range input.
+          * @example // Show a suffixed '%' in the tooltip with '{value} %'. <pn-range tooltip-template="{value} %" value="25" />
+          * @category Features
+          * @default this.tooltipDefault
+         */
+        "tooltipTemplate"?: string;
+        /**
+          * The range input value.
+          * @category HTML Attributes
+          * @default 0
+         */
+        "value"?: number;
+        /**
+          * The range end input value.
+          * @category HTML Attributes
+          * @default 0
+         */
+        "valueEnd"?: number;
+    }
     /**
      * There are no events or features other than the `icon`, `small` and `language` prop.
      * Our rule is to not have disabled buttons.
@@ -5583,6 +5972,12 @@ declare namespace LocalJSX {
           * @category HTML
          */
         "autocomplete"?: string;
+        /**
+          * Use the compact label variant.
+          * @since v7.21.0
+          * @default false
+         */
+        "compact"?: boolean;
         /**
           * Disable the select.
           * @category Validation
@@ -5887,6 +6282,12 @@ declare namespace LocalJSX {
           * @default 20
          */
         "cols"?: number;
+        /**
+          * Use the compact label variant.
+          * @since v7.21.0
+          * @default false
+         */
+        "compact"?: boolean;
         /**
           * Disable the textarea.
           * @category State
@@ -6354,6 +6755,7 @@ declare namespace LocalJSX {
         "pn-progress-indicator-step": PnProgressIndicatorStep;
         "pn-progress-stepper": PnProgressStepper;
         "pn-radio-button": PnRadioButton;
+        "pn-range": PnRange;
         "pn-read-only-button": PnReadOnlyButton;
         "pn-search-field": PnSearchField;
         "pn-segment": PnSegment;
@@ -6545,6 +6947,14 @@ declare module "@stencil/core" {
              * @nativeChange Use the `change` event to listen when the radio state is being changed.
              */
             "pn-radio-button": LocalJSX.PnRadioButton & JSXBase.HTMLAttributes<HTMLPnRadioButtonElement>;
+            /**
+             * Allow the user to use the slider to set a number value. Its built on the native `input[type=range]` element and
+             * has support for most attributes.
+             * @nativeInput Use the `input` event to listen to the range / input value being modified by the user. It is emitted everytime the user changes the value.
+             * @nativeChange The `change` event is emitted when the user makes a final selection (letting go of the range/input).
+             * @since v7.20.0
+             */
+            "pn-range": LocalJSX.PnRange & JSXBase.HTMLAttributes<HTMLPnRangeElement>;
             /**
              * There are no events or features other than the `icon`, `small` and `language` prop.
              * Our rule is to not have disabled buttons.

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

@@ -1,3 +1,4 @@
 export { Components, JSX } from './components';
 export * from './globals/types';
 export * from './globals/helpers';
+export { setTagTransformer } from './stencil-public-runtime';