@postnord/pn-marketweb-components 4.3.5 → 4.3.7

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

@@ -13,85 +13,52 @@ import { PnLanguages } from "../../../index";
  */
 export declare class PnInput {
     private readonly id;
-    private idMessage;
+    private idHelper;
+    private idError;
     private prefix;
     private suffix;
     private mo;
     hostElement: HTMLElement;
     offsetLeft: number;
     offsetRight: number;
-    showHelperSlot: boolean;
-    showErrorSlot: boolean;
     showPassword: boolean;
     togglePassword(): void;
     /** Text label placed above the input field. */
-    label: string;
+    label?: string;
     /** Text message placed underneath the input field. */
     helpertext?: string;
-    /**
-     * Provide a unique HTML id to connect the input with the label.
-     * A unique uuid ID will be generated if this field is left empty.
-     **/
-    inputid: string;
-    /** Set the value of the input. */
-    value: string;
     /**
      * Set the language manually for the translations of show/hide/clear button text.
      * Not needed if you have the pntopbar on the page.
      **/
     language?: PnLanguages;
-    /** Use the compact label variant. The `placeholder` you provide will not be visible if used at the same time. @since v7.21.0 */
-    compact?: boolean;
-    /**
-     * Select an icon to display before the input field value.
-     * `icon` takes precedence over the `text-prefix` prop.
-     *
-     * @see {@link textPrefix}
-     * @category Visual
-     **/
-    icon: string;
-    /**
-     * Set a small text before the input field value.
-     * Cannot be used together with an `icon` at the same time.
-     *
-     * @see {@link icon}
-     * @see {@link textSuffix}
-     * @category Visual
-     **/
-    textPrefix: string;
-    /**
-     * Set a small text after the input field value.
-     * Cannot be used with the `text-prefix` prop at the same time.
-     *
-     * @see {@link textPrefix}
-     * @category Visual
-     **/
-    textSuffix: string;
-    /** pn-input supports: `text`, `password`, `url`, `tel`, `search`, `number` & `email`. @category HTML input */
+    /** Set the value of the input. @category Native attributes */
+    value: string;
+    /** pn-input supports: `text`, `password`, `url`, `tel`, `search`, `number` & `email`. @category Native attributes */
     type?: 'text' | 'password' | 'url' | 'tel' | 'search' | 'number' | 'email' | '';
     /**
      * HTML input name. Setting a name will help the browser understand what type of data the input have
      * and can better assist with autofill data based on previous entires much better.
-     *
-     * @category HTML input
+     * @category Native attributes
      **/
     name?: string;
     /**
      * Provide a placeholder text. Remember that this is no replacement for a label.
      * The placeholder should be a nice addition to the label/helpertext, not important information.
      *
-     * @category HTML input
+     * @category Native attributes
      **/
     placeholder?: string;
     /**
      * Let the browser know what type of autocorrects the input should use.
-     * Works much better if a `name` and `inputid` is supplied.
+     * Works much better if a `name` and `pn-id` is supplied.
      * @see {@link name}
      * @see {@link inputid}
      *
-     * @category HTML input */
+     * @category Native attributes
+     */
     autocomplete?: string;
-    /** The maximum number of characters the user should be able to add, also adds a visible counter. @category HTML input */
+    /** The maximum number of characters the user should be able to add, also adds a visible counter. @category Native attributes */
     maxlength: number;
     /**
      * Hint the browser about what type of virtual keyboard should be used.
@@ -100,35 +67,62 @@ export declare class PnInput {
      *
      * Leave empty or with a `''` value if you want the browsers default behaviour (`text`).
      *
-     * @category HTML input
+     * @category Native attributes
      **/
     inputmode?: 'text' | 'none' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
-    /** Point to a datalist element for this input. @category HTML input */
+    /** Point to a datalist element for this input. @category Native attributes */
     list?: string;
-    /** Pattern prop. @category HTML input*/
+    /** Pattern prop. @category Native attributes */
     pattern?: string;
-    /** Set the `min` value of the `number` input. @category HTML input */
+    /** Set the `min` value of the `number` input. @category Native attributes */
     min?: number | string;
-    /** Set the `max` value of the `number` input. @category HTML input */
+    /** Set the `max` value of the `number` input. @category Native attributes */
     max?: number | string;
-    /** Set a `step` for the number input. @category HTML input */
+    /** Set a `step` for the number input. @category Native attributes */
     step?: number | string;
-    /** While you can use the `aria-label`, using a `label` is far more accessible. @category HTML input */
-    arialabel?: string;
-    /** Set the ID of what this input controls. @category HTML input */
-    ariacontrols?: string;
-    /** Set the input as `required`. @category State */
+    /** Set the input as `required`. @category Native attributes */
     required: boolean;
-    /** Set the input as `disabled`. @category State */
-    disabled: boolean;
-    /** Set the input as `readonly`. @category State */
+    /** Set the input as `readonly`. @category Native attributes */
     readonly: boolean;
-    /** Set the input as `valid`. Provides a green color and a check icon. @category Validation */
+    /** Set the input as `disabled`. @category Native attributes */
+    disabled: boolean;
+    /**
+     * Use the compact label variant. The `placeholder` you provide will not be visible if used at the same time.
+     * @since v7.21.0
+     * @category Features
+     */
+    compact?: boolean;
+    /**
+     * Select an icon to display before the input field value.
+     * `icon` takes precedence over the `text-prefix` prop.
+     *
+     * @see {@link textPrefix}
+     * @category Features
+     **/
+    icon: string;
+    /**
+     * Set a small text before the input field value.
+     * Cannot be used together with an `icon` at the same time.
+     *
+     * @see {@link icon}
+     * @see {@link textSuffix}
+     * @category Features
+     **/
+    textPrefix: string;
+    /**
+     * Set a small text after the input field value.
+     * Cannot be used with the `text-prefix` prop at the same time.
+     *
+     * @see {@link textPrefix}
+     * @category Features
+     **/
+    textSuffix: string;
+    /** Set the input as `valid`. Provides a green color and a check icon. @category Features */
     valid?: boolean;
     /**
      * Set the input as `invalid`. Provides a red color and red warning icon.
      * @see{@link error Provide an error message.}
-     * @category Validation
+     * @category Features
      **/
     invalid: boolean;
     /**
@@ -136,15 +130,40 @@ export declare class PnInput {
      *
      * Error message; will take precedence over helpertext if both are provided.
      * @see{@link invalid Set invalid without an error message.}
-     * @category Validation
+     * @category Features
      **/
     error?: string;
+    /** Set a custom ID for the input (default is a generated UUID). @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 the ID of what this input controls. @since v7.25.0 @category HTML attributes */
+    pnAriaControls?: string;
+    /** Set a custom ID for the input (default is a generated UUID). @deprecated Use `pn-id` instead. @category HTML attributes */
+    inputid?: string;
+    /** While you can use the `aria-label`, using a `label` is far more accessible. @deprecated Use `pn-aria-label` instead. @category HTML attributes */
+    arialabel?: string;
+    /** Set the ID of what this input controls. @deprecated Use `pn-aria-controls` instead. @category HTML attributes */
+    ariacontrols?: string;
     handleOffset(): void;
-    handleMessage(): void;
+    handleId(): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
     componentWillLoad(): Promise<void>;
     componentDidLoad(): void;
+    private getId;
     private setVal;
     private clearVal;
     private translate;
@@ -152,8 +171,8 @@ export declare class PnInput {
     private hasErrorMessage;
     /** If any error is active, either via the prop `invalid` or `error` prop/slot. */
     private hasError;
-    /** If any helpertext or error message is active. Checks both props and slots. */
-    private hasMessage;
+    private hideHelpertext;
+    private hideError;
     private checkSlottedHelper;
     private checkSlottedError;
     private getInputType;
@@ -179,6 +198,10 @@ export declare class PnInput {
     private useLabel;
     /** Compact label must be positioned after the input element in order to work. */
     private useCompactLabel;
+    private displayLabel;
+    private getAriaLabel;
+    private getAriaLabelledby;
+    private getAriaDescribedby;
     private renderLabel;
-    render(): HTMLPnInputElement;
+    render(): any;
 }

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

@@ -0,0 +1,265 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import type { PnLanguages, PnMultiselectOption } from "../../../index";
+declare const PnMultiselect_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-multiselect` gets its options via javascript.
+ *
+ * Native HTML does not accept arrays of objects. Most frameworks solves this automatically (Vue, react, etc...),
+ * but keep this in mind if you use this component outside of a framework environment.
+ *
+ * @nativeChange The `pn-multiselect` is built with `input[type=checkbox]` elements, so the `change` event works. However, we recommend the customEvents described above.
+ *
+ * @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}
+ *
+ * @see {@link https://portal.postnord.com/web-components/?path=/docs/components-input-multiselect--docs#pn-multiselect%20(options) Options documentation}
+ */
+export declare class PnMultiselect extends PnMultiselect_base {
+    private readonly id;
+    private idLegend;
+    private idButton;
+    private idOptions;
+    private idHelper;
+    private idError;
+    private idChips;
+    private idSr;
+    private elGroup;
+    private elButton;
+    private elInput;
+    private elList;
+    private elChips;
+    private srTimer;
+    hostElement: HTMLElement;
+    private isSearching;
+    /** Layout state. */
+    private open;
+    private upwards;
+    private srMessage?;
+    /** Label placed above the select */
+    label?: string;
+    /** Display a helper text underneath the select */
+    helpertext?: string;
+    /** Manually set the language, not needed if you have the pnTopbar available */
+    language?: PnLanguages;
+    /** HTML name of the checkbox elements. Used for each checkbox inside the multiselect. @category Native attributes */
+    name?: string;
+    /** HTML name of the input element. @category Native attributes*/
+    selectName?: string;
+    /**
+     * This is what will be shown on load if no value is used.
+     * The `placeholder` will override the default text used if you have the `search` prop active.
+     * @category Native attributes
+     */
+    placeholder?: string;
+    /** Set the select as required. @category Native attributes */
+    required?: boolean;
+    /** Disable the select. @category Native attributes */
+    disabled?: boolean;
+    /**
+     * The array of `PnMultiselectOption` objects.
+     * @see {@link PnMultiselectOption} for the option object properties.
+     * @category Features
+     **/
+    options: PnMultiselectOption[];
+    /** Set the date picker label as compact. If used, the `placeholder` will no longer be displayed. @since v7.21.0 @category Features */
+    compact?: boolean;
+    /** Display an icon to the left of the select input @category Features */
+    icon?: string;
+    /**
+     * Adds a "Select all" option into the list.
+     * If you use the search feature at the same time, clicking this option will only toggle the options found.
+     * @see {@link search}
+     * @category Features
+     **/
+    selectAll?: boolean;
+    /**
+     * Set a custom value for the "Select all value" option.
+     * @see {@link selectAll}
+     * @category Features
+     */
+    allValue?: string;
+    /**
+     * Allow the user to search among the options.
+     * The selected options will now display underneath the multiselect element.
+     *
+     * @category Features
+     **/
+    search?: boolean;
+    /** Set the search query of the multiselect.
+     *
+     * @see {@link search}
+     * @category Features
+     */
+    searchQuery?: string;
+    /**
+     * Decide how many items should be shown before ellipsis. Requires the `search` prop to work.
+     *
+     * @see {@link search}
+     * @category Features
+     **/
+    itemCount?: number;
+    /**
+     * The component will automatically set the max height of the dropdown list on its own.
+     * It takes the `pn-topbar` into account and will open in the direction that fits best.
+     * Use this prop to override this behaviour and use a custom max-height.
+     * @category Features
+     **/
+    maxHeight?: string;
+    /**
+     * Force the dropdown to always open upwards.
+     * @category Features
+     **/
+    top?: boolean;
+    /**
+     * Force the dropdown to always open downwards.
+     * @category Features
+     **/
+    bottom?: boolean;
+    /** 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;
+    /**
+     * 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;
+    /** Select HTML id @deprecated Use `pn-id` instead. @category HTML attributes */
+    selectId?: string;
+    handleOpen(): void;
+    handleSearch(): void;
+    handleSearchQuery(): void;
+    handleSelectId(): void;
+    /**
+     * If the select is open and you resize the window.
+     * Remove all css props and disable the animations entierly.
+     **/
+    handleResize(): void;
+    /** Dispatched everytime the multiselect is opened or closed. */
+    toggleSelect: EventEmitter<{
+        open: boolean;
+    }>;
+    /** This event contains the entire options array with the new props. Dispatched everytime you make changes to any option. */
+    allOptions: EventEmitter<PnMultiselectOption[]>;
+    /** Dispatched when you toggle an option. Includes all the props of the option. */
+    selectedOption: EventEmitter<PnMultiselectOption>;
+    /**
+     * This event is dispatched when the user toggles the "Choose all options" box.
+     * Also triggers when you click the "Select {number} options" if you are performing a search at the same time.
+     **/
+    selectedAllOptions: EventEmitter<{
+        checked: boolean;
+        searching: boolean;
+        query?: string;
+        found?: PnMultiselectOption[];
+    }>;
+    /**
+     * Contains the search text and the options found for that query.
+     * Dispacthed everytime you change the search query.
+     **/
+    searchInput: EventEmitter<{
+        query: string;
+        found?: PnMultiselectOption[];
+    }>;
+    componentWillLoad(): Promise<void>;
+    componentDidLoad(): void;
+    private getId;
+    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 globalEvents;
+    private addGlobalEventListeners;
+    private removeGlobalEventListeners;
+    private dropdownHandler;
+    private emitEvents;
+    private optionsChecked;
+    private optionsTotal;
+    private optionsIndex;
+    private optionsCheckedTotal;
+    private optionsCheckedPreview;
+    private optionsCheckedLabels;
+    private optionsSearch;
+    private noResults;
+    private isIndeterminate;
+    private optionSelect;
+    private optionSelectAll;
+    private optionSelected;
+    private translate;
+    private getRect;
+    private ripple;
+    private handleSrMesssage;
+    private handleDirection;
+    private handleMaxHeight;
+    private handleOffset;
+    private setFocus;
+    private toggleOpen;
+    private handleInputKeyboard;
+    private setSearchQuery;
+    private handleInputSearch;
+    private getListItem;
+    private getOptionIndex;
+    private checkboxNav;
+    private handleBlur;
+    private handleLabel;
+    /** Check if there are no options in the list. */
+    private isEmpty;
+    private showSelectAll;
+    /** Check if the empty/nothing found should be visible. */
+    private showEmptyOption;
+    private getPlaceholder;
+    private handleChange;
+    /** Display the "X more selected options" text. */
+    private additonalOptions;
+    private displayLabel;
+    private getAriaLabel;
+    /**
+     * If you use a label (technically a legend), use the `idLegend` to point to it.
+     * If not, make sure there is no pnAriaLabel and use pnAriaLabelledby.
+     * This is to make sure there are no double label/labelledby.
+     */
+    private getAriaLabelledby;
+    private describedBy;
+    /**
+     * This is to prevent a rare issue with rendering flag icons.
+     * Flags use a set ID to identify gradient colors. If the icon is rendered while the dropdown is closed,
+     * the ID is not unique and the icon will not be rendered for other pn-icons using it.
+     * This is a temp fix to address the root issue which is how the flags SVG styling is built.
+     */
+    private renderItemIcon;
+    private renderOption;
+    private renderOptions;
+    private renderChips;
+    private renderLabel;
+    render(): any;
+}
+export {};

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

@@ -0,0 +1,124 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+declare const PnRadioButton_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-radio-button` is built with a native `input[type="radio"]` in the background.
+ * This means you can use native events to listen to the changes.
+ *
+ * @nativeChange Use the `change` event to listen when the radio state is being changed.
+ *
+ * @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 PnRadioButton extends PnRadioButton_base {
+    private readonly id;
+    private idHelpertext;
+    private contentArea;
+    private radioInput;
+    hostElement: HTMLElement;
+    /** The radio label */
+    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 radio group. @category Native attributes */
+    name?: string;
+    /** Programmatically check the input. @category Native attributes */
+    checked?: boolean;
+    /** Set the radio as required. @category Native attributes */
+    required?: boolean;
+    /** Disable the radio. @category Native attributes */
+    disabled?: boolean;
+    /**
+     * Turn the radio 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 radio 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 radio tile. The `tile` prop must be `true` for the icon to work.
+     * @see {@link tile}
+     * @category Features
+     */
+    icon?: string;
+    /**
+     * If set to true, color scheme will turn red, indicating that there is an issue or incorrect input related the radio.
+     * @category Features
+     */
+    invalid?: boolean;
+    /** A unique HTML ID for the radio. @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 radio.
+     * @deprecated Use `pn-id` instead.
+     * @category HTML attributes
+     */
+    radioid?: string;
+    handleId(): void;
+    handleChecked(checked?: boolean): void;
+    handleChange(e: Event): 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-radio-button` element without
+     * having to worry about catching events from nested pn-radio-buttons.
+     *
+     * @since v7.25.0
+     **/
+    pnRadioChange: EventEmitter<Event>;
+    componentDidLoad(): void;
+    private getId;
+    private uncheckOtherRadios;
+    private isInvalid;
+    private displayText;
+    private displayLabel;
+    private displayHelpertext;
+    private displayIcon;
+    private displayContent;
+    private getAriaLabel;
+    private getAriaLabelledby;
+    render(): any;
+}
+export {};