@postnord/pn-marketweb-components 4.3.6 → 4.3.8

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

@@ -30,7 +30,9 @@ export declare class PnModal {
     helpertext?: string;
     /** Set the language. @since v7.14.0 */
     language?: PnLanguages;
-    /** Bind to this property if you want to control the visibility of the modal from your own data. @category Features */
+    /** Set a custom HTML id. @since v7.24.0 */
+    pnId?: string;
+    /** Use this prop if you want to control the visibility of the modal programmatically. @category Features */
     open?: boolean;
     /**
      * Prevent users from closing the modal by clicking on the backdrop or the `ESC` key.
@@ -39,19 +41,20 @@ export declare class PnModal {
      */
     persistent?: boolean;
     /**
-     * Hide the close button. If you disable this, make sure you build your own cancel button.
+     * Hide the close button. If you enable this, make sure you build your own cancel button.
      * @since v7.14.0
      * @category Features
      */
     hideClose?: boolean;
     /**
-     * Allow overflow if possible. When the modal opens, it will check scrollHeight > offsetHeight.
-     * Do not use if you have a lot of conditional rendering inside the modal.
+     * Allow overflow *when* it is possible.
+     * Do not use if you have a lot of conditional rendering inside the modal as it can cause layout shifts.
      * @since v7.14.0
+     * @category Features
      */
     allowOverflow?: boolean;
     /**
-     * Use the `sheet` visual. Aligns the modal to the right.
+     * Use the `sheet` visual. Aligns the modal to the right instead of the center.
      * @since v7.14.0
      * @category Visual
      */
@@ -69,7 +72,15 @@ export declare class PnModal {
     modalToggle: EventEmitter<{
         open: boolean;
     }>;
-    /** This event is dispatched after the opening/closing animation has finished playing. {@since v7.14.0} */
+    /** This event is dispatched after the opening/closing animation has finished playing. {@since v7.22.0} */
+    modalVisibility: EventEmitter<{
+        visible: boolean;
+    }>;
+    /**
+     * This event is dispatched after the opening/closing animation has finished playing.
+     * @since v7.14.0
+     * @deprecated v7.22.0. Use `modalVisibility` instead due to typo.
+     */
     modalVisiblity: EventEmitter<{
         visible: boolean;
     }>;

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

@@ -0,0 +1,100 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import type { PnLanguages } from "../../../index";
+declare const PnToast_base: abstract new (...args: any[]) => {
+    animation: Animation;
+    animationDurationDefault: number;
+    animationDuration: number;
+    isClosing: boolean;
+    isExpanding: boolean;
+    animateDropdown(element: HTMLElement, open: boolean, startHeight: string, endHeight: string): void;
+    openDropdown(element: HTMLElement, heightOverride?: number): void;
+    closeDropdown(element: HTMLElement, heightOverride?: number): void;
+    animationFinish(element: HTMLElement): void;
+    cancelAnimations(): void;
+    setAnimationDuration(): void;
+    isMoving(): boolean;
+};
+/**
+ * This component is able to fill many roles of a classic toast.
+ * It has 4 different colors, a temporary state, hide button, icon and illustration support.
+ *
+ * The `pn-toast` will expand to its parent containers full width.
+ * Either limit the parent width or set a CSS rule to your specific width if needed.
+ */
+export declare class PnToast extends PnToast_base {
+    toast: HTMLDivElement;
+    button: HTMLButtonElement;
+    hostElement: HTMLElement;
+    hasSlottedContent: boolean;
+    /**
+     * Set a title for the toast. Requires the `text` prop in order to work.
+     * @description Can be used together with slotted content.
+     */
+    heading?: string;
+    /**
+     * Set a paragraph of text for the toast.
+     * @description Can be used together with slotted content.
+     */
+    text?: string;
+    /** Give the toast a HTML ID. */
+    toastId?: string;
+    /**
+     * Default color is blue, you also have the option of success (green), warning (orange) and error (red).
+     * @category Visual
+     */
+    appearance?: '' | 'success' | 'warning' | 'error';
+    /**
+     * This will apply a shadow and border to the toast.
+     * @category Visual
+     */
+    temporary: boolean;
+    /**
+     * Set an SVG icon.
+     * @category Visual
+     */
+    icon?: string;
+    /**
+     * Set an SVG illustration.
+     * @category Visual
+     */
+    illustration?: string;
+    /**
+     * Control the visibility of the toast. If the `closable` prop is active, the toast will set the `hide` prop on its own.
+     * @see {@link closable}
+     * @category Features
+     */
+    hide: boolean;
+    /**
+     * Show close button.
+     * @category Features
+     */
+    closable: boolean;
+    /**
+     * Manually set the language, only needed if the `closable` prop is enabled.
+     * @see {@link closable}
+     * @category Features
+     */
+    language?: PnLanguages;
+    handleHide(): void;
+    /** Event fired when the close button is pressed. */
+    close: EventEmitter<boolean>;
+    /**
+     * This event is fired when the toast is fully hidden after the animation is finished.
+     * Triggers from the close button or if the prop `hide` is set to true.
+     * @since v7.6.0
+     **/
+    hidden: EventEmitter<boolean>;
+    componentWillLoad(): Promise<void>;
+    componentDidLoad(): void;
+    private toggleToastVisibility;
+    private handleClick;
+    private getIcon;
+    private getRole;
+    private showIcon;
+    private showIllustration;
+    private showTitle;
+    private translate;
+    private hideToast;
+    render(): any;
+}
+export {};

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

@@ -41,6 +41,8 @@ export declare class PnWizard {
     step: number;
     /**
      * The list of querySelectors that the wizards will highlight.
+     * If a selector is invalid or empty, the wizard will be centered on the screen.
+     *
      * Recommended maximum of 7 steps.
      * @category Wizard steps
      **/
@@ -92,6 +94,7 @@ export declare class PnWizard {
     componentDidRender(): void;
     private getRect;
     private translate;
+    private runStepLogic;
     private handleDisplayOverflow;
     /** Is the step within the valid range of available {@link steps}. */
     private isActive;
@@ -111,15 +114,17 @@ export declare class PnWizard {
     private showBackButton;
     private showNextButton;
     private showFinishButton;
-    private runStepLogic;
     private nextStep;
     private prevStep;
     private endWizard;
     private getNextLabel;
     private getHighlightTarget;
     private getHighlightRect;
+    private isInViewport;
     private scrollToElement;
     private highlightElement;
+    private resetToCenter;
+    private getWizardContentRect;
     private positionModal;
     private setHighlightVars;
     private setModalVars;

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

@@ -0,0 +1,124 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+declare const PnCheckbox_base: abstract new (...args: any[]) => {
+    animation: Animation;
+    animationDurationDefault: number;
+    animationDuration: number;
+    isClosing: boolean;
+    isExpanding: boolean;
+    animateDropdown(element: HTMLElement, open: boolean, startHeight: string, endHeight: string): void;
+    openDropdown(element: HTMLElement, heightOverride?: number): void;
+    closeDropdown(element: HTMLElement, heightOverride?: number): void;
+    animationFinish(element: HTMLElement): void;
+    cancelAnimations(): void;
+    setAnimationDuration(): void;
+    isMoving(): boolean;
+};
+/**
+ * The `pn-checkbox` is built with a native `input[type="checkbox"]` in the background.
+ * This means you can use native events to listen to the changes.
+ *
+ * @nativeChange Use the `change` event to listen when the checkbox state is being toggled.
+ *
+ * @slot - The default slot for adding custom HTML under the label/helpertext. {@since v7.17.0}
+ * @slot helpertext - Use this slot to add custom HTML inside of the helpertext element.
+ * Only recommended if you need a link without the `tile` prop. {@since v7.17.0}
+ * @slot content - When using the `tile` and `expand` props, this slot will be revealed when the input is checked. {@since v7.17.0}
+ */
+export declare class PnCheckbox extends PnCheckbox_base {
+    private readonly id;
+    private idHelpertext;
+    private contentArea;
+    hostElement: HTMLElement;
+    /** The checkbox label, this is required for the checkbox to be 100% accessible out of the box. */
+    label?: string;
+    /** This adds an optional helpertext under the label. */
+    helpertext?: string;
+    /** This will be emitted on change and input events. @category Native attributes  */
+    value: string;
+    /** The name of the checkbox group. @category Native attributes  */
+    name?: string;
+    /** Programmatically check the input. @category Native attributes  */
+    checked?: boolean;
+    /** Set the checkbox as required. @category Native attributes */
+    required?: boolean;
+    /** Disable the checkbox. @category Native attributes */
+    disabled?: boolean;
+    /**
+     * If set to true, color scheme will turn red, indicating that there is an issue related to the checkbox.
+     * @category Native attributes
+     */
+    invalid?: boolean;
+    /**
+     * Sets the checkbox to an indeterminate state, allowing for a mixed or intermediate checkbox state.
+     * @category Native attributes
+     */
+    indeterminate: boolean;
+    /**
+     * Turn the checkbox into a clickable tile. A border and padding is added.
+     *
+     * **Do not** use interactive elements (links/buttons) inside of the slots when using this prop.
+     * An exception is made when using the `tile` + `expand` props together,
+     * which allows you to use interactive elements.
+     *
+     * @category Features
+     */
+    tile?: boolean;
+    /**
+     * Allow the checkbox to control the slot area "content".
+     * When checked, the area is visible, when unchecked, the area is hidden.
+     *
+     * The prop `tile` must be used at the same time.
+     * @see {@link tile}
+     * @since v7.17.0
+     * @category Features
+     */
+    expand?: boolean;
+    /**
+     * Add an icon on the right of your checkbox tile. The `tile` prop must be `true` for the icon to work.
+     * @see {@link tile}
+     * @category Features
+     */
+    icon?: string;
+    /** A unique HTML ID for the checkbox. @since v7.25.0 @category HTML attributes */
+    pnId?: string;
+    /**
+     * Provide the label via an aria attribute.
+     * We strongly recommend you use the `label` prop instead.
+     * @since v7.25.0
+     * @category HTML attributes
+     */
+    pnAriaLabel?: string;
+    /**
+     * Provide the label from another element via its ID.
+     * We strongly recommend you use the `label` prop instead.
+     * @since v7.25.0
+     * @category HTML attributes
+     */
+    pnAriaLabelledby?: string;
+    /** A unique HTML ID for the checkbox. @deprecated Use `pn-id` instead. @category HTML attributes */
+    checkboxid?: string;
+    handleId(): void;
+    handleChecked(): void;
+    /**
+     * This is the same as the native `change` event, but without bubbling.
+     * This is useful when you want to listen to the event directly on the `pn-checkbox` element without
+     * having to worry about catching events from nested pn-checkboxes.
+     *
+     * @since v7.25.0
+     **/
+    pnCheckboxChange: EventEmitter<Event>;
+    componentDidLoad(): void;
+    private getId;
+    private handleChange;
+    private isInvalid;
+    private displayText;
+    private displayLabel;
+    private displayHelpertext;
+    private displayIcon;
+    /** Allow the checkbox to expand and control the slot area "content". */
+    private displayContent;
+    private getAriaLabel;
+    private getAriaLabelledby;
+    render(): any;
+}
+export {};

package/umd/modules/@postnord/web-components/types/components/input/pn-choice-chip/pn-choice-chip.d.ts

@@ -5,29 +5,45 @@
  * @nativeChange Use the `change` event to listen when the choice chip state is being toggled. Works for both checkbox/radio variant.
  */
 export declare class PnChoiceChip {
+    private readonly id;
     hostElement: HTMLElement;
-    moving: boolean;
-    /** The choice chip label */
+    /** The choice chip label. This is required for the component to be accessible. */
     label: string;
-    /** This will be emitted on change and input */
+    /** This will be emitted on change and input. @category Native attributes */
     value: string;
-    /** The name of the checkbox group */
+    /** The name of the checkbox group. This is required if you use the `radio` prop. @category Native attributes */
     name?: string;
-    /** Precheck the choice chip */
+    /** Programatically check the input. @category Native attributes */
     checked?: boolean;
-    /** Make the choice chip a radio */
-    radio: boolean;
-    /** A unique HTML id */
-    choiceid: string;
-    /** Include an icon */
-    icon?: string;
-    /** Set the choice chip as required. @category State */
+    /** Set the input as required. @category Native attributes */
     required: boolean;
-    /** Disable the choice chip. @category State */
+    /** Disable the input. @category Native attributes */
     disabled: boolean;
-    /** Set the size to small. @category Size */
+    /**
+     * Make the choice chip a radio input. By default, it behaves as a checkbox.
+     * You must assign a `name` for the radio to work.
+     *  @category Features
+     */
+    radio: boolean;
+    /** Add an icon to the choice chip. @category Features */
+    icon?: string;
+    /** Use the small size for the choice chip. @category Features */
     small: boolean;
-    /** Set the size to large. @category Size */
+    /** Use the large size for the choice chip. @category Features*/
     large: boolean;
+    /**
+     * A unique HTML ID for the choice chip
+     * @since v7.25.0
+     * @category HTML attributes
+     */
+    pnId?: string;
+    /**
+     * A unique HTML ID for the choice chip.
+     * @deprecated Use the `pn-id` prop instead.
+     * @category HTML attributes
+     */
+    choiceid?: string;
+    private inputType;
+    private getId;
     render(): any;
 }

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

@@ -3,6 +3,8 @@ import { PnLanguages } from "../../../globals/types";
 /**
  * The `pn-counter` is an input with a button on each side that can be used to increase and decrease the input value.
  *
+ * @slot helpertext - Use this slot to add custom HTML inside of the helpertext element. Recommended if you need a link. {@since v7.25.0}
+ *
  * @nativeInput Use the `input` event to listen to content being modified by the user. It is emitted everytime a user writes or removes content in the input.
  * @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).
  */
@@ -18,42 +20,60 @@ export declare class PnCounter {
     /** Prevent double events when reaching min/max values. */
     private lastDispatchedValue;
     private interactType;
-    /** Label for the counter */
-    label: string;
+    /** Label for the counter. This is required for the counter to be 100% accessible out of the box. */
+    label?: string;
     /** Set a helpertext for the counter. */
     helpertext?: string;
-    /** Set a predefined value */
-    value: number;
-    /** Set a unique HTML ID for the counter */
-    counterid: string;
-    /** Use the compact label variant. @since v7.21.0 */
-    compact?: boolean;
-    /** Set the language manually for the built in translations. */
+    /** Set the language manually for the built in translations.  */
     language?: PnLanguages;
-    /** Text for the decrease button. Default is "Decrease". @category Translation */
-    labelDecrease?: string;
-    /** Text for the increase button. Default is "Increase". @category Translation */
-    labelIncrease?: string;
-    /** Set a message that shows below input when user wants to set a value that is below `min`. Default is "Minimum value is x" @category Translation */
-    minMessage?: string;
-    /** Set a message that shows below input when user wants to set a value that is above `max`. Default is "Maximum value is x"  @category Translation */
-    maxMessage?: string;
-    /** HTML input name. @category HTML input */
+    /** Set a predefined value. @category Native attributes */
+    value: number;
+    /** HTML input name. @category Native attributes */
     name?: string;
-    /** Minimum value. @category HTML input */
-    min: number;
-    /** Maximum value. @category HTML input */
-    max: number;
-    /** Increase/decrease the value in steps, default is 1. @category HTML input */
+    /** Minimum value. @category Native attributes */
+    min?: number;
+    /** Maximum value. @category Native attributes */
+    max?: number;
+    /** Increase/decrease the value in steps, default is 1. @category Native attributes */
     step: number;
-    /** Suggest values for the counter input. @category HTML input */
+    /** Suggest values for the counter input. @category Native attributes */
     list?: string;
-    /** Set the counter as required. @category State */
+    /** Set the counter as required. @category Native attributes */
     required: boolean;
-    /** Set the counter as readonly. @category State */
+    /** Set the counter as readonly. @category Native attributes */
     readonly: boolean;
-    /** Set the counter as disabled. @category State */
+    /** Set the counter as disabled. @category Native attributes */
     disabled: boolean;
+    /** Use the compact label variant. @since v7.21.0 @category Features */
+    compact?: boolean;
+    /** Text for the decrease button. Default is "Decrease". @category Features */
+    labelDecrease?: string;
+    /** Text for the increase button. Default is "Increase". @category Features */
+    labelIncrease?: string;
+    /** Hide the tooltips for the increase/decrease button. @since v7.25.0 @category Features */
+    hideTooltips?: boolean;
+    /** Set a message that shows below input when user wants to set a value that is below `min`. Default is "Minimum value is x" @category Features */
+    minMessage?: string;
+    /** Set a message that shows below input when user wants to set a value that is above `max`. Default is "Maximum value is x"  @category Features */
+    maxMessage?: string;
+    /** Set a unique HTML ID for the counter. @since v7.25.0 @category HTML attributes */
+    pnId?: string;
+    /**
+     * Provide the label via an aria attribute.
+     * We strongly recommend you use the `label` prop instead.
+     * @since v7.25.0
+     * @category HTML attributes
+     */
+    pnAriaLabel?: string;
+    /**
+     * Provide the label from another element via its ID.
+     * We strongly recommend you use the `label` prop instead.
+     * @since v7.25.0
+     * @category HTML attributes
+     */
+    pnAriaLabelledby?: string;
+    /** Set a unique HTML ID for the counter. @deprecated Use `pn-id` instead. @category HTML attributes */
+    counterid?: string;
     /**
      * Instead of listening to multiple input, change and/or click events, we bundled them into one.
      * - `value` is the current counter value.
@@ -70,17 +90,21 @@ export declare class PnCounter {
     watchValue(): void;
     handleId(): void;
     componentWillLoad(): Promise<void>;
+    private getId;
     private setVal;
     private setMin;
     private setMax;
     private hasMin;
     private hasMax;
+    private getAriaLabel;
+    private getAriaLabelledby;
     private decreaseAmount;
     private increaseAmount;
     private keyBoardInput;
     private showSrContent;
     private toggleMinMaxMessage;
     private getTextMessage;
+    private hideHelpertext;
     private describedbyIds;
     private translate;
     private noButtons;