@postnord/pn-marketweb-components 4.3.6 → 4.3.8

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

@@ -3,8 +3,8 @@ import { EventEmitter } from '../../../stencil-public-runtime';
  * 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.
  *
- * @slot helpertext - Set the helpertext via a slot instead of prop. Wrap the content like this: `<span slot="helpertext">`.
- * @slot error - Set the error message via a slot instead of prop. Wrap the content like this: `<span slot="error">`.
+ * @slot helpertext - Set the helpertext via a slot instead of prop. Wrap the content like this: `<span slot="helpertext" />`.
+ * @slot error - Set the error message via a slot instead of prop. Wrap the content like this: `<span slot="error" />`.
  *
  * @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).
@@ -31,59 +31,43 @@ export declare class PnRange {
     /** When using `multiple`, decide which control is being pressed. */
     private pressControl?;
     /** Label for the range input. */
-    label: string;
+    label?: string;
     /** Label for the range end input. */
-    labelEnd: string;
+    labelEnd?: string;
     /** Set a helpertext for the range input. */
     helpertext?: string;
+    /** The range input value. @category Native attributes */
+    value?: number;
+    /** The range end input value. @category Native attributes */
+    valueEnd?: number;
+    /** The range input name. @category Native attributes */
+    name?: string;
+    /** The range input name. @category Native attributes */
+    nameEnd?: string;
+    /** The range input min value. @category Native attributes */
+    min?: number;
+    /** The range input max value. @category Native attributes */
+    max?: number;
+    /** Set a step value for the range input. @category Native attributes */
+    step?: HTMLInputElement['step'];
+    /** Disable the range input. @category Native attributes */
+    disabled?: boolean;
     /**
      * 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.
+     * @category Features
      */
     markers?: {
         value: number;
         label?: string;
     }[];
-    /** Set a prefix for the range/input field. */
-    textPrefix?: string;
-    /** Set a suffix for the range/input field. */
-    textSuffix?: string;
-    /** Set an icon for the range/input field. */
-    icon?: string;
-    /** Set an icon at the end of the range or for the second input field when using `multiple`. */
-    iconEnd?: string;
-    /** Set a custom HTML id. */
-    pnId?: string;
-    /** Set a custom HTML id. */
-    pnIdEnd?: string;
-    /** The range input name. @category HTML Attributes */
-    name?: string;
-    /** The range input name. @category HTML Attributes */
-    nameEnd?: string;
-    /** The range input min value. @category HTML Attributes */
-    min?: number;
-    /** The range input max value. @category HTML Attributes */
-    max?: number;
-    /** The range input value. @category HTML Attributes */
-    value?: number;
-    /** The range end input value. @category HTML Attributes */
-    valueEnd?: number;
-    /** Set a step value for the range input. @category HTML Attributes */
-    step?: HTMLInputElement['step'];
-    /**
-     * Allow multiple values to be selected
-     * @category Features
-     */
-    multiple?: boolean;
     /**
      * Display an input for the range value.
      * Allowing the user to type or use the slider to set the value.
      * @category Features
      */
     input?: boolean;
-    /** Hide the tooltip. @category Features */
-    tooltipHide?: boolean;
     /**
      * Range tooltip label template. Default is simply the value of the range input.
      * @example
@@ -92,12 +76,57 @@ export declare class PnRange {
      * @category Features
      */
     tooltipTemplate?: string;
-    /** Disable the range input. @category State */
-    disabled?: boolean;
-    /** Set an error message for the range input. @category State */
-    error?: string;
-    /** Set the error visual for the range input, same as `error`, but without a message. @category State */
+    /** Hide the tooltip. @category Features */
+    tooltipHide?: boolean;
+    /** Set a prefix for the range/input field. @category Features */
+    textPrefix?: string;
+    /** Set a suffix for the range/input field. @category Features */
+    textSuffix?: string;
+    /** Set an icon for the range/input field. @category Features */
+    icon?: string;
+    /** Set an icon at the end of the range or for the second input field when using `multiple`. @category Features */
+    iconEnd?: string;
+    /**
+     * Allow multiple values to be selected
+     * @category Features
+     */
+    multiple?: boolean;
+    /** Set the error visual for the range input, same as `error`, but without a message. @category Features */
     invalid?: boolean;
+    /** Set an error message for the range input. @category Features */
+    error?: string;
+    /** Set a custom ID for the input. @category HTML attributes */
+    pnId?: string;
+    /** Set a custom ID for the end input. @category HTML attributes */
+    pnIdEnd?: 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 for the end input via an aria attribute.
+     * We strongly recommend you use the `label-end` prop instead.
+     * @since v7.25.0
+     * @category HTML attributes
+     */
+    pnAriaLabelEnd?: 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;
+    /**
+     * Provide the label for the end input from another element via its ID.
+     * We strongly recommend you use the `label-end` prop instead.
+     * @since v7.25.0
+     * @category HTML attributes
+     */
+    pnAriaLabelledbyEnd?: string;
     handleValue(): void;
     handleValueEnd(): void;
     handleId(): void;
@@ -112,6 +141,8 @@ export declare class PnRange {
     }>;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    private getAriaLabel;
+    private getAriaLabelledby;
     private tooltipDirection;
     private isActiveMarker;
     private hasHelperText;

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

@@ -7,30 +7,27 @@ import type { PnLanguages, PnSearchFieldButton } from "../../../globals/types";
  * @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).
  */
 export declare class PnSearchField {
-    id: string;
-    searchElement: HTMLInputElement;
+    private readonly id;
     hostElement: HTMLElement;
     /** Provide an aria-label for the search field. */
-    label: string;
-    /** Set the value of the search field. */
+    label?: string;
+    /** Override the pntopbar language. */
+    language?: PnLanguages;
+    /** Set the value of the search field. @category Native attributes */
     value: string;
-    /** Set a search field placeholder. This is no replacement for a `label`. */
-    placeholder?: string;
-    /** Set a unique ID for the search input. */
-    searchid: string;
-    /** Set HTML name of the search input. */
+    /** Set HTML name of the search input. @category Native attributes */
     name?: string;
-    /** Allow the browser to autocomplete the search field. */
+    /** Set a search field placeholder. @category Native attributes */
+    placeholder?: string;
+    /** Allow the browser to autocomplete the search field. @category Native attributes */
     autocomplete?: string;
-    /** Point to a datalist element with this id. */
+    /** Point to a datalist element with this id. @category Native attributes */
     list?: string;
-    /** Override the pntopbar language. */
-    language?: PnLanguages;
-    /** Disable the search field. @category State */
-    disabled: boolean;
-    /** Set the search field as required. @category State */
+    /** Set the search field as required. @category Native attributes */
     required: boolean;
-    /** Display loading animation. @category State */
+    /** Disable the search field. @category Native attributes */
+    disabled: boolean;
+    /** Display loading animation. @category Features */
     loading: boolean;
     /**
      * Button variant changes the visual of the search field:
@@ -41,30 +38,44 @@ export declare class PnSearchField {
      *
      * @since v7.18.0: Use `''`, `simple`, `auto` or `jumbo`.
      *
-     * @category Button
+     * @category Features
      */
     button: PnSearchFieldButton;
-    /** Label for the button element. @category Button */
+    /** Label for the button element. @category Features */
     buttonLabel?: string;
-    /** Add a tooltip to the search button. @category Button */
+    /** Add a tooltip to the search button. @category Features */
     buttonTooltip?: string;
     /**
      * Light instead of dark search button.
      *
      * @deprecated The color is now set automatically based on the button prop.
-     * @category Button
+     * @category Features
      */
     buttonLight: boolean;
+    /** Set a custom ID for the search input. @since v7.25.0 @category HTML attributes */
+    pnId?: 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 ID for the search input. @deprecated Use `pn-id` instead. @category HTML attributes  */
+    searchid?: string;
     /** This is emitted on search submission both with keyboard and mouse. */
     search: EventEmitter<string>;
     /** Custom event that handles both clearing and input to have the option of just binding listeners to one event instead of two. */
     update: EventEmitter<string>;
     inputHandler(): void;
     componentWillLoad(): Promise<void>;
+    private getId;
     private translate;
     private emitSearch;
     private setVal;
     private clearInput;
+    private displayLabel;
+    private getAriaLabelledby;
     private getButtonLabel;
     /** icon === simple-search */
     private searchSimple;

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

@@ -5,31 +5,32 @@
  * @nativeChange Use the `change` event to listen when the segment state is being changed.
  */
 export declare class PnSegmentedControl {
-    mo: MutationObserver;
-    segmentContainer: HTMLDivElement;
-    segments: HTMLPnSegmentElement[];
-    activeBg: HTMLDivElement;
-    hoverBg: HTMLDivElement;
-    scrollRegistered: boolean;
+    private mo;
+    private segmentContainer;
+    private segments;
+    private activeBg;
+    private hoverBg;
+    private scrollRegistered;
     hostElement: HTMLElement;
-    showScrollArrows: boolean;
-    showLeftArrow: boolean;
-    showRightArrow: boolean;
+    private showScrollArrows;
+    private showLeftArrow;
+    private showRightArrow;
     /** This is the name of the radio buttons inside the controller. @deprecated Set the name in the nested `pn-segment` components. */
-    name: string;
+    name?: string;
     /** Currently active segment value. */
-    value: string;
+    value?: string;
     valueHandler(): void;
     changeHandler(event: InputEvent): void;
     handleResize(): void;
     handleHover(event: CustomEvent): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     componentDidLoad(): void;
-    setSegments(): void;
-    setActiveSegment(): void;
-    rerender(): void;
-    calcHighlight(element?: HTMLElement, hover?: boolean): void;
-    scrollArrowRender(): void;
-    scroll(val: number): void;
-    scrollArrowClasses(): string;
+    private setSegments;
+    private setActiveSegment;
+    private rerender;
+    private calcHighlight;
+    private scrollArrowRender;
+    private scroll;
     render(): any;
 }

package/umd/modules/@postnord/web-components/types/components/input/pn-segmented-control/segment/pn-segment.d.ts

@@ -4,24 +4,27 @@ import { EventEmitter } from '../../../../stencil-public-runtime';
  * Do not listen to events on the `pn-segment`, but on the `pn-segmented-control` instead.
  */
 export declare class PnSegment {
-    id: string;
+    private readonly id;
     hostElement: HTMLElement;
     /** The segment label, same as the slot. @since v7.7.0 */
     label?: string;
-    /** The segment controller name. */
-    name: string;
-    /** The segment value. */
+    /** The segment value. @category Native attributes */
     value: string;
+    /** The segment controller name. @category Native attributes */
+    name: string;
+    /** Disable the segment. @since v7.7.0 @category Native attributes */
+    disabled: boolean;
     /** Set the segment as selected. Used by the `pn-segmented-control`. **Do not use manually**. @hide true */
     selected: boolean;
-    /** A unique HTML id. */
-    segmentid: string;
-    /** The SVG content of the icon you want. */
+    /** The SVG content of the icon you want. @category Features */
     icon?: string;
-    /** Disable the segment. @since v7.7.0 */
-    disabled: boolean;
+    /** Set a custom ID for the segment. @since v7.25.0 @category HTML attributes */
+    pnId?: string;
+    /** Set a custom ID for the segment. @deprecated Use `pn-id` instead. @category HTML attributes */
+    segmentid?: string;
     /** This event is used by the `pn-segmented-control` component. Do not use manually. */
     segmentHover: EventEmitter<MouseEvent>;
     handleHover(mouse: MouseEvent): void;
+    private getId;
     render(): any;
 }

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

@@ -5,54 +5,74 @@
  * Just like a regular `select`, you can use the `selected` prop on the nested option elements to preselect an option.
  *
  * @slot - This is the default slot, where the `option` elements go.
+ * @slot helpertext - You can use this slot instead of the prop `helpertext`. Recommended, only if you need to include additional HTML markup. Such as a `pn-text-link`. Use a `span` element to wrap the text and link. {@since v7.25.0}
+ * @slot error - You can use this slot instead of the prop `error`. Recommended, only if you need to include additional HTML markup. Such as a `pn-text-link`. Use a `span` element to wrap the text and link. {@since v7.25.0}
  *
  * @nativeChange Use the `change` event to listen to changes on the select element.
  */
 export declare class PnSelect {
-    id: string;
-    idHelpertext: string;
-    select: HTMLSelectElement;
-    mo: MutationObserver;
+    private readonly id;
+    private idHelper;
+    private idError;
+    private mo;
     hostElement: HTMLElement;
     /** Label placed above the select. */
-    label: string;
+    label?: string;
     /** Display a helper text underneath the select. */
     helpertext?: string;
-    /** Select HTML id */
-    selectId: string;
-    /** Display an icon to the left of the select input. */
-    icon?: string;
-    /** Use the compact label variant. @since v7.21.0 */
-    compact?: boolean;
-    /** HTML select name. @category HTML */
+    /** HTML select name. @category Native attributes */
     name: string;
-    /** HTML form name. @category HTML */
+    /** HTML form name. @category Native attributes */
     form: string;
-    /** HTML autocomplete. @category HTML */
+    /** HTML autocomplete. @category Native attributes */
     autocomplete: string;
-    /**
-     * Set the select as required.
-     * @category Validation
-     */
+    /** Set the select as required. @category Native attributes */
     required?: boolean;
-    /**
-     * Disable the select.
-     * @category Validation
-     */
+    /** Disable the select. @category Native attributes */
     disabled?: boolean;
+    /** Use the compact label variant. @since v7.21.0 @category Features */
+    compact?: boolean;
+    /** Display an icon to the left of the select input. @category Features */
+    icon?: string;
+    /** Trigger the invalid state. @category Features */
+    invalid?: boolean;
+    /** Display an error message and trigger the invalid state. @category Features */
+    error?: string;
+    /** Set a custom ID for the select. @since v7.25.0 @category HTML attributes */
+    pnId?: string;
     /**
-     * Trigger the invalid state.
-     * @category Validation
+     * Provide the label via an aria attribute.
+     * We strongly recommend you use the `label` prop instead.
+     * @since v7.25.0
+     * @category HTML attributes
      */
-    invalid?: boolean;
+    pnAriaLabel?: string;
     /**
-     * Display an error message and trigger the invalid state.
-     * @category Validation
+     * 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
      */
-    error?: string;
-    componentDidLoad(): void;
-    hasError(): boolean;
-    hasMessage(): boolean;
+    pnAriaLabelledby?: string;
+    /** Set a custom ID for the select. @deprecated Use `pn-id` instead. @category HTML attributes */
+    selectId?: string;
+    handleId(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private hasHelperText;
+    /** If any `error` text is present, either via prop/slot. */
+    private hasErrorMessage;
+    /** If any `error` is active, either via the prop `invalid` or `error` prop/slot. */
+    private hasError;
+    private checkSlottedHelper;
+    private checkSlottedError;
+    private hideHelpertext;
+    private hideError;
+    private getId;
+    private displayLabel;
+    private getAriaLabel;
+    private getAriaLabelledby;
+    private getAriaDescribedby;
     private renderLabel;
     render(): any;
 }

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

@@ -3,58 +3,89 @@
  * This means you can use native events to listen to the input.
  *
  * @nativeInput Use the `input` event to listen to content being modified by the user.
+ *
+ * @slot helpertext - You can use this slot instead of the prop `helpertext`. Recommended, only if you need to include additional HTML markup. Such as a `pn-text-link`. Use a `span` element to wrap the text and link. {@since v7.25.0}
+ * @slot error - You can use this slot instead of the prop `error`. Recommended, only if you need to include additional HTML markup. Such as a `pn-text-link`. Use a `span` element to wrap the text and link. {@since v7.25.0}
  */
 export declare class PnTextarea {
     private readonly id;
     private idHelper;
+    private idError;
     hostElement: HTMLElement;
     /** The label describing the textarea. */
-    label: string;
-    /** The textarea content, do not provide slotted content. */
-    value: string;
+    label?: string;
     /** Helper text that will appear underneath the textarea. Will be overwritten if you set an `error` string */
     helpertext?: string;
-    /** Use the compact label variant. @since v7.21.0 */
-    compact?: boolean;
-    /** A unique ID connecting the element to the label. @category HTML Textarea */
-    textareaid?: string;
-    /** HTML name. @category HTML Textarea */
+    /** The textarea content, do not provide slotted content. @category Native attributes */
+    value: string;
+    /** HTML name. @category Native attributes */
     name?: string;
-    /** Set the associated form. @category HTML Textarea*/
+    /** Placeholder for the textarea. @category Native attributes */
+    placeholder?: string;
+    /** Set the associated form. @category Native attributes */
     form?: string;
-    /** Set the row count for the textarea. @category HTML Textarea */
+    /** Set the row count for the textarea. @category Native attributes */
     rows?: number;
-    /** Set the col count for the textarea. @category HTML Textarea */
+    /** Set the col count for the textarea. @category Native attributes */
     cols?: number;
-    /** Set the wrap control. @category HTML Textarea */
+    /** Set the wrap control. @category Native attributes */
     wrap?: string;
-    /** The maximum number of characters the user should be able to add, also adds a visible counter. @category HTML Textarea */
+    /** The maximum number of characters the user should be able to add, also adds a visible counter. @category Native attributes */
     maxlength?: number;
-    /** Allow the browser to autocomplete the textarea. @category HTML Textarea */
+    /** Allow the browser to autocomplete the textarea. @category Native attributes */
     autocomplete?: string;
-    /** Allow the browser to spellcheck the textarea. @category HTML Textarea */
+    /** Allow the browser to spellcheck the textarea. @category Native attributes */
     spellcheck: boolean;
-    /** Placeholder for the textarea. @category HTML Textarea */
-    placeholder?: string;
-    /** Allow the user to resize the textarea vertically. Handle width in your own layout. @category HTML Textarea */
+    /** Allow the user to resize the textarea vertically. Handle width in your own layout. @category Native attributes */
     resize?: boolean;
-    /** Make the textarea required. @category HTML Textarea */
+    /** Make the textarea required. @category Native attributes */
     required?: boolean;
-    /** Set the textarea as `valid`, will make the Label and focus rings green. @category State */
+    /** Disable the textarea. @category Native attributes */
+    disabled?: boolean;
+    /** Make the textarea readonly. @category Native attributes */
+    readonly?: boolean;
+    /** Use the compact label variant. @since v7.21.0 @category Features */
+    compact?: boolean;
+    /** Set the textarea as `valid`, will make the Label and focus rings green. @category Features */
     valid?: boolean;
-    /** Set the textarea as `invalid`, will make the Label and focus rings red. @category State */
+    /** Set the textarea as `invalid`, will make the Label and focus rings red. @category Features */
     invalid?: boolean;
-    /** Same as `invalid`, but will display the string as an error message under the textarea. @category State */
+    /** Same as `invalid`, but will display the string as an error message under the textarea. @category Features */
     error?: string;
-    /** Disable the textarea. @category State */
-    disabled?: boolean;
-    /** Make the textarea readonly. @category State */
-    readonly?: boolean;
+    /** Set a custom ID for the textarea. @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 custom ID for the textarea. @deprecated Use `pn-id` instead. @category HTML attributes */
+    textareaid?: string;
     handleId(): void;
     private setVal;
+    private hasHelperText;
+    /** If any `error` text is present, either via prop/slot. */
+    private hasErrorMessage;
+    /** If any `error` is active, either via the prop `invalid` or `error` prop/slot. */
     private hasError;
-    private hasMessage;
+    private checkSlottedHelper;
+    private checkSlottedError;
+    private hideHelpertext;
+    private hideError;
     private getId;
+    private displayLabel;
+    private getAriaLabel;
+    private getAriaLabelledby;
+    private getAriaDescribedby;
     private renderLabel;
     render(): any;
 }

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

@@ -12,30 +12,52 @@ export declare class PnToggleSwitch {
     private idHelper;
     hostElement: HTMLElement;
     /** A label for the toggle switch. */
-    label: string;
+    label?: string;
     /** Provide a helpertext for the toggle switch. */
     helpertext?: string;
-    /** Precheck the toggle. */
-    checked: boolean;
-    /** Set a unique HTML id. */
-    toggleid: string;
-    /** HTML toggle name. @category HTML */
-    name?: string;
-    /** HTML toggle value. @category HTML */
+    /** HTML toggle value. @category Native attributes  */
     value?: string;
-    /** Make the toggle smaller. @category Visual */
+    /** HTML toggle name. @category Native attributes  */
+    name?: string;
+    /** Precheck the toggle. @category Native attributes  */
+    checked: boolean;
+    /** Set the switch as required. @since v7.25.0 @category Native attributes */
+    required: boolean;
+    /** Disable the toggle. @category Native attributes */
+    disabled: boolean;
+    /** Make the toggle smaller. @category Features */
     small: boolean;
-    /** Make the toggle larger. @category Visual */
+    /** Make the toggle larger. @category Features */
     large: boolean;
-    /** Disable the toggle. @category State */
-    disabled: boolean;
-    /** Set the loading state. @category State */
+    /** Set the loading state. @category Features */
     loading: boolean;
+    /** Set a custom ID for the switch. @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 custom ID for the switch. @deprecated Use `pn-id` instead. @category HTML attributes */
+    toggleid?: string;
     handleHelperId(): void;
-    componentWillLoad(): void;
+    private getId;
+    private getSpinnerSize;
     private hasHelpertextProp;
     private hasHelpertextSlot;
     private showHelpertext;
     private describedBy;
+    private displayLabel;
+    private getAriaLabel;
+    private getAriaLabelledby;
     render(): any;
 }