@postnord/pn-marketweb-components 4.3.6 → 4.3.7

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

@@ -0,0 +1,338 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { PnLanguages } from "../../../index";
+import type { GridDate, CalendarView, PnDatePickerSelectEvent } from "../../../globals/date/index";
+declare const PnDatePicker_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 date picker allows a single or a range of dates to be selected.
+ *
+ * Based on the `format` prop, separators will automatically be added if you type the date.
+ *
+ * You can navigate the calendar grid with your keyboard.
+ *
+ * @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).
+ *
+ * @slot chips - Introduce some quick date selectors underneath the calendar grid. Use the `pn-choice-chip` component. {@since v7.6.0}
+ * @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.6.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.6.0}
+ */
+export declare class PnDatePicker extends PnDatePicker_base {
+    private id;
+    private idStart;
+    private idEnd;
+    private idStartButton;
+    private idEndButton;
+    private idHelper;
+    private idError;
+    private idCalendar;
+    private mo;
+    private calendarElement;
+    private today;
+    private separators;
+    private separatorRegex;
+    private listMonths;
+    private listWeek;
+    hostElement: HTMLElement;
+    open: boolean;
+    openUp: boolean;
+    selectingEnd: boolean;
+    grid: GridDate;
+    viewYearStart: number;
+    dateViewYear: number;
+    dateViewMonth: number;
+    dateViewDate: number;
+    showHelperSlot: boolean;
+    showErrorSlot: boolean;
+    /** Set a label for the from date. */
+    labelFrom?: string;
+    /** Set a label for the to date. @see {@link range} */
+    labelTo?: string;
+    /** Provide a helpertext for the date input. */
+    helpertext?: string;
+    /** Manually set language; this will be inherited from the topbar. */
+    language?: PnLanguages;
+    /** Set a predefined value for the from date (input value). @see {@link format} @category Native attributes */
+    start: string;
+    /**
+     * Set a predefined value for the from date. (input value end)
+     *
+     * @see {@link range}
+     * @see {@link format}
+     * @category Native attributes
+     */
+    end: string;
+    /** HTML input name @since v7.6.0 @category Native attributes*/
+    name?: string;
+    /** HTML input name @since v7.25.0 @category Native attributes */
+    nameEnd?: string;
+    /**
+     * Placeholder for the input field (defaults to the format prop).
+     * @see {@link format}
+     * @category Native attributes
+     **/
+    placeholder?: string;
+    /**
+     * Placeholder for end date (defaults to the format prop).
+     * @see {@link format}
+     * @deprecated Use `placeholder-end` instead
+     * @category Native attributes
+     **/
+    endPlaceholder?: string;
+    /**
+     * Placeholder for end date (defaults to the format prop).
+     * @see {@link format}
+     * @since v7.25.0
+     * @category Native attributes
+     **/
+    placeholderEnd?: string;
+    /** Set the input `autocomplete` attribute. @category Native attributes */
+    autocomplete?: string;
+    /** Set the input `list` attribute for the first date input. @since v7.6.0 @category Native attributes */
+    list?: string;
+    /** Set the input `list` attribute for the second date input. @since v7.6.0 @category Native attributes */
+    listEnd?: string;
+    /** Set the HTML pattern prop on the input elements. Make sure it matches the format. @since v7.6.0 @category Native attributes */
+    pattern?: string;
+    /** Set the date picker as required. @category Native attributes */
+    required: boolean;
+    /** Set the date picker as readonly. @since v7.6.0 @category Native attributes */
+    readonly: boolean;
+    /** Set the date picker as disabled. @since v7.6.0 @category Native attributes */
+    disabled: boolean;
+    /**
+     * Set the date format of the value.
+     *
+     * While you can set any date value from the Dayjs documentation,
+     * we strongly recommend you pick a simple format that you can also type manually.
+     *
+     * @since v7.6.0
+     * @see {@link https://day.js.org/docs/en/display/format Day.js format documentation.}
+     * @category Features
+     */
+    format: string;
+    /** Disable the automatic insertion of separators when typing in the input. @since v7.6.0 @category Features */
+    disableTypeAhead: boolean;
+    /** Remove the option to select dates on weekends. @category Features */
+    disableWeekends: boolean;
+    /**
+     * Individual dates you want to disable. Use a comma separated string.
+     *
+     * Remember to use the same format that you have in the `format` prop.
+     * @see {@link format}
+     * @example "YYYY-MM-DD,YYYY-MM-DD"
+     * @category Features
+     **/
+    disabledDates?: string;
+    /** If you use a format with an unknown length, disable the max length. @since 7.11.3 @category Features */
+    disableMaxLength?: boolean;
+    /** Allow the selection of a date range. @category Features */
+    range: boolean;
+    /**
+     * Set a limit on how many days one may select.
+     * By default, you can select an unlimited range.
+     *
+     * @todo Create a range limit function.
+     * @see {@link range}
+     *
+     * @category Features
+     * @hide true
+     **/
+    rangeLimit?: number;
+    /** Show weekend numbers to the left of the calendar grid. @since v7.6.0 @category Features */
+    weekNumbers: boolean;
+    /** Set the date picker label as compact. If used, the `placeholder` will no longer be displayed. @since v7.21.0 @category Features */
+    compact?: boolean;
+    /** Make the calendar open upwards by default. Opens downwards if there is not enough space. @since v7.6.0 @category Features */
+    calendarUp: boolean;
+    /** The calendar grid is shown as default. You can set either `months` or `years` as your first choice. @since v7.6.0 @category Features */
+    view: CalendarView;
+    /** Trigger the invalid state without an error message. @since v7.6.0 @category Features */
+    invalid: boolean;
+    /** Set an error message for the date picker. Overwrites the helpertext if used at the same time. @since v7.6.0 @category Features */
+    error?: string;
+    /** Set a custom ID for the calendar. If you use `range`, the end input will use `${pn-id}-end`. @since v7.25.0 @category HTML attributes */
+    pnId?: string;
+    /**
+     * Provide the label via an aria attribute.
+     * We strongly recommend you use the `label-from` 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-to` 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-from` 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-to` prop instead.
+     * @since v7.25.0
+     * @category HTML attributes
+     */
+    pnAriaLabelledbyEnd?: string;
+    /** Set a custom ID for the calendar. @since v7.6.0 @deprecated Use `pn-id` instead. @category HTML attributes */
+    dateId?: string;
+    /**
+     * Earliest date possible, this will determine how many years back the date picker will show.
+     *
+     * Remember to use the same format that you have in the `format` prop.
+     * @see {@link format}
+     * @example "2024-05-25"
+     * @category Features
+     **/
+    minDate?: string;
+    watchMin(): void;
+    /**
+     * Latest date possible, this will determine how many years forward the date picker will show.
+     *
+     * Remember to use the same format that you have in the `format` prop.
+     * @see {@link format}
+     * @example "2024-06-25"
+     * @category Features
+     **/
+    maxDate?: string;
+    watchMax(): void;
+    watchValue(): CustomEvent<{
+        start?: string;
+        end?: string;
+    }>;
+    watchValueTo(): CustomEvent<{
+        start?: string;
+        end?: string;
+    }>;
+    handleFormat(): void;
+    watchId(): void;
+    watchView(): void;
+    watchOpen(): void;
+    handleMessage(): void;
+    handleView(): void;
+    /**
+     * Use the new `dateSelection`. Its here for compatibility. Will be removed in v8.
+     * @deprecated Use the new `dateSelection`. Will be removed in v8.
+     **/
+    dateselection: EventEmitter<PnDatePickerSelectEvent>;
+    /**
+     * Emits on valid date selection. Either if the user selects a date in the calendar or writes it manually.
+     * @since v7.6.0
+     */
+    dateSelection: EventEmitter<PnDatePickerSelectEvent>;
+    emitSelection(): void;
+    /** Emitted when an invalid value is set. This can only be done if the user writes in the input itself. @since v7.6.0 */
+    dateInvalid: EventEmitter<{
+        start?: string;
+        end?: string;
+    }>;
+    /** Emitted when the calendar is toggled. @since v7.6.0 */
+    toggleCalendar: EventEmitter<boolean>;
+    /** Emmitted when you select a new view. @since v7.6.0 */
+    currentView: EventEmitter<CalendarView>;
+    /**
+     * If the select is open and you resize the window.
+     * Remove all css props and disable the animations entierly.
+     **/
+    handleResize(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    componentWillLoad(): Promise<void>;
+    private getId;
+    private getAriaLabel;
+    private getAriaLabelledby;
+    private getPlaceholder;
+    private dropdownHandler;
+    private globalEvents;
+    private addGlobalEventListeners;
+    private removeGlobalEventListeners;
+    private translate;
+    private translateDateText;
+    private getRect;
+    private toggleGrid;
+    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 viewingCalendar;
+    private viewingMonth;
+    private viewingYears;
+    private viewType;
+    private isBeforeMax;
+    private isAfterMin;
+    private isDisabledWeekend;
+    private isDisabledDate;
+    private isDisabled;
+    private updateGrid;
+    private getCurrentViewDate;
+    private isSelected;
+    private isToday;
+    private getCurrentDateObject;
+    /** Handle keyboard navigation in the calendar grid. */
+    private calendarKeyboardNavigation;
+    private navDirection;
+    private getYearGrid;
+    /** Defaults to the calendar view. */
+    private setView;
+    private setNavView;
+    private setViewYear;
+    private setViewMonth;
+    private setViewDate;
+    private handleSeparator;
+    private inputHandler;
+    private setValue;
+    private getDayAttributes;
+    /** Focus the button toggling the calendar. Handles the start/from date on its own. */
+    private focusToggleCalendarButton;
+    private focusCalendar;
+    private resetFocus;
+    private handleButtonBlur;
+    /**
+     * This function queries all tabbable elements inside the calendar popup.
+     * Since we allow slotted content it important that we have a function that takes all elements into account.
+     * With the `first` and `grid` argument, you can decide which one you want to get.
+     * There are fallbacks so you should never get an empty list of elements.
+     */
+    private calendarTabElement;
+    /**
+     * We need to listen to the `Esc` and `Tab` key for the entire calendar popup.
+     * Regardless if you focus the grid, the nav buttons or slotted content,
+     * the popup will close if you press `Esc`. We also need to reset the focus when the user tabs.
+     */
+    private handleCalendarTabEsc;
+    private ariaDescribedby;
+    /** Renders the date calendar grid.  */
+    private renderDateGrid;
+    /** Renders the month calendar grid.  */
+    private renderMonthGrid;
+    /** Renders the year calendar grid.  */
+    private renderYearGrid;
+    private renderLabel;
+    private renderInput;
+    render(): any;
+}
+export {};

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

@@ -1,11 +1,15 @@
 /**
  * The fielset is a wrapper to give context and information about inputs. Most commonly, a set of radio/checkboxes.
  * However, you may include any type of input such as textareas, toggles and selects.
+ *
+ * @slot - Default slot is the content of the fieldset, where you can add your inputs.
+ * @slot helpertext - Use this slot to add custom HTML inside of the helpertext element. {@since v7.25.0}
+ * @slot error - Use this slot to add custom HTML inside of the `error` element. {@since v7.25.0}
  */
 export declare class PnFieldset {
-    mo: MutationObserver;
-    id: string;
-    idHelpertext: string;
+    private mo;
+    private readonly id;
+    private idHelpertext;
     hostElement: HTMLElement;
     /**
      * The legend provides a caption for the fieldset group.
@@ -14,26 +18,31 @@ export declare class PnFieldset {
     legend: string;
     /** Text message underneath the legend for more instruction or hints on how to fill in controls correctly. */
     helpertext?: string;
-    /** Give the fieldset a custom HTML id. */
-    fieldsetId: string;
+    /** Give the fieldset a HTML name. @category Native attributes */
+    name?: string;
     /**
      * The id of the form you want the fieldset to be part of.
      * If you want the inputs inside to be associated with a specific form, you need to set on those elements directly.
+     * @category Native attributes
      */
     form?: string;
-    /** Give the fieldset a HTML name. */
-    name?: string;
-    /** Disable all of the inputs inside of the fieldset. */
+    /** Disable all of the inputs inside of the fieldset. @category Native attributes */
     disabled: boolean;
-    /** Set the fieldset as `invalid`, will add red error styles. */
+    /** Set the fieldset as `invalid`, will add red error styles. @category Features */
     invalid: boolean;
-    /** Error message, applies warning styles and icon. */
+    /** Error message, applies warning styles and icon. @category Features */
     error?: string;
+    /** Set a custom ID for the fieldset. @since v7.25.0 @category HTML attributes  */
+    pnId: string;
+    /** Set a custom ID for the fieldset. @deprecated Use `pn-id` instead. @category HTML attributes */
+    fieldsetId: string;
     handleId(): void;
-    componentWillLoad(): void;
-    componentDidLoad(): void;
-    componentDidRender(): void;
-    hasError(): boolean;
-    getSymbol(): string;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private getId;
+    private hasHelpertext;
+    private hasError;
+    private isInvalid;
+    private getIcon;
     render(): any;
 }

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

@@ -10,16 +10,16 @@ import { PnColors, PnLanguages, PnUploadFileItem } from "../../../globals/types"
  * Either via clicking on the "Cancel" button or pressing `ESC`.
  * */
 export declare class PnFileUpload {
-    id: string;
-    idFileUpload: string;
-    idHelpertext: string;
-    idAccepttext: string;
-    fileInputElement: HTMLInputElement;
-    invalid: boolean;
-    maxSizeInBytes: number;
-    hostElement: HTMLElement;
-    files: PnUploadFileItem[];
-    isHovering: boolean;
+    private readonly id;
+    private idHelpertext;
+    private idAccepttext;
+    private fileInputElement;
+    private invalid;
+    private maxSizeInBytes;
+    private readonly rippleClass;
+    private hostElement;
+    private files;
+    private isHovering;
     /** The default label is "Click or drag a file here". @since v7.1.0 */
     label?: string;
     /**
@@ -28,38 +28,45 @@ export declare class PnFileUpload {
      * @since v7.1.0
      **/
     helpertext?: string;
-    /** Manually set the language. @category Features */
+    /** Manually set the language. @since v7.1.0 */
     language?: PnLanguages;
-    /** Always hide the progress bar, even when upload has begun. @category Features  */
-    hideProgress: boolean;
     /**
      * Set a HTML name.
      * @since v7.1.0
-     * @category HTML attributes
+     * @category Native attributes
      */
     name: string;
-    /** Set which file types the input accepts. Ex: .docs,.xml @category HTML attributes */
+    /** Set which file types the input accepts. Ex: .docs,.xml @category Native attributes */
     accept: string;
-    /** Set the maximum upload size. @category HTML attributes */
-    maxSize: string;
     /**
      * Use the capture mode.
      * @since v7.1.0
-     * @category HTML attributes
+     * @category Native attributes
      */
     capture?: '' | 'user' | 'environment';
+    /** Allow multiple files to be selected. Will be overwritten to true, if `limit` is above 1. @category Native attributes */
+    multiple: boolean;
+    /** Set the input as required. @category Native attributes */
+    required?: boolean;
+    /** Disable the input. @category Native attributes */
+    disabled: boolean;
     /**
      * Set maximum amount of files to be selected.
      * Any value above 1 will force the `multiple` to be `true`.
-     * @category HTML attributes
+     * @category Features
      **/
     limit: number;
-    /** Allow multiple files to be selected. Will be overwritten to true, if `limit` is above 1. @category HTML attributes */
-    multiple: boolean;
-    /** Set the input as required. @category HTML attributes */
-    required?: boolean;
-    /** Disable the input. @category HTML attributes */
-    disabled: boolean;
+    /** Set the maximum upload size. @category Features */
+    maxSize: string;
+    /**
+     * Always hide the progress bar, even when upload has begun.
+     * @since v7.1.0
+     * @category Features
+     */
+    hideProgress: boolean;
+    /** Set a custom ID for the file upload. @since v7.25.0 @category HTML attributes */
+    pnId: string;
+    handleId(): void;
     handleLimit(): void;
     handleMaxBytes(): void;
     /** This event is emitted when you add files. Either via drag and drop or using the file explorer. */
@@ -84,6 +91,7 @@ export declare class PnFileUpload {
     /** Emitted once the upload is finished. */
     uploadCompleted: EventEmitter<PnUploadFileItem[]>;
     componentWillLoad(): Promise<void>;
+    private getId;
     /** Start the upload of all selected files (excludes invalid files). */
     startUpload(): Promise<void>;
     /** Clear the selected files, state and input value. */
@@ -107,9 +115,10 @@ export declare class PnFileUpload {
     private _emitUpdateEvent;
     translate(prop: string): string;
     isLoading(file: PnUploadFileItem): boolean;
-    getFileItemClass: (file: PnUploadFileItem) => string;
     getFileIcon(file: PnUploadFileItem): string;
     getFileColor(file: PnUploadFileItem): PnColors;
-    describedBy(): string;
+    private describedBy;
+    private showAcceptText;
+    private getAcceptText;
     render(): any;
 }

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

@@ -27,4 +27,11 @@ export declare const translations: {
         fi: string;
         no: string;
     };
+    LIMIT: {
+        sv: string;
+        en: string;
+        da: string;
+        fi: string;
+        no: string;
+    };
 };