@postnord/pn-marketweb-components 4.3.6 → 4.3.7

package/umd/modules/@postnord/web-components/esm/pn-date-picker.entry.js

@@ -2,9 +2,9 @@
  * Built with Stencil
  * By PostNord.
  */
-import { t as transformTag, M as Mixin, r as registerInstance, c as createEvent, g as getElement, h, a as Host } from './index-CAEP792y.js';
+import { t as transformTag, M as Mixin, r as registerInstance, c as createEvent, g as getElement, f as forceUpdate, h, a as Host } from './index-XKg-ydzH.js';
 import { uuidv4, getTotalHeightOffset, getMenuWidth, awaitTopbar, en as en$2 } from './index.js';
-import { a as animateHeightFactory } from './index-CosyroON.js';
+import { a as animateHeightFactory } from './index-DyhO6xPY.js';
 import { a as arrow_left } from './arrow_left-CQaMdITw.js';
 import { a as arrow_right } from './arrow_right-D_UyW-KH.js';
 
@@ -520,20 +520,21 @@ const PnDatePicker = class extends Mixin(animateHeightFactory) {
     constructor(hostRef) {
         super();
         registerInstance(this, hostRef);
-        this.dateselection = createEvent(this, "dateselection");
-        this.dateSelection = createEvent(this, "dateSelection");
-        this.dateInvalid = createEvent(this, "dateInvalid");
-        this.toggleCalendar = createEvent(this, "toggleCalendar");
-        this.currentView = createEvent(this, "currentView");
+        this.dateselection = createEvent(this, "dateselection", 7);
+        this.dateSelection = createEvent(this, "dateSelection", 7);
+        this.dateInvalid = createEvent(this, "dateInvalid", 7);
+        this.toggleCalendar = createEvent(this, "toggleCalendar", 7);
+        this.currentView = createEvent(this, "currentView", 7);
     }
     id = `pn-date-picker-${uuidv4()}`;
-    idFrom = `${this.id}-from`;
-    idTo = `${this.id}-to`;
-    idFromButton = `${this.id}-from-button`;
-    idToButton = `${this.id}-to-button`;
+    idStart = `${this.id}-from`;
+    idEnd = `${this.id}-to`;
+    idStartButton = `${this.id}-from-button`;
+    idEndButton = `${this.id}-to-button`;
     idHelper = `${this.id}-helper`;
     idError = `${this.id}-error`;
     idCalendar = `${this.id}-calendar`;
+    mo;
     calendarElement;
     today = getToday();
     separators = [];
@@ -543,7 +544,7 @@ const PnDatePicker = class extends Mixin(animateHeightFactory) {
     get hostElement() { return getElement(this); }
     open = false;
     openUp = false;
-    selectingTo = false;
+    selectingEnd = false;
     grid;
     viewYearStart = null;
     dateViewYear;
@@ -557,72 +558,67 @@ const PnDatePicker = class extends Mixin(animateHeightFactory) {
     labelTo;
     /** Provide a helpertext for the date input. */
     helpertext;
-    /** Set a predefined value for the from date. @see {@link format} */
+    /** Manually set language; this will be inherited from the topbar. */
+    language = undefined;
+    /** Set a predefined value for the from date (input value). @see {@link format} @category Native attributes */
     start = '';
     /**
-     * Set a predefined value for the from date.
+     * Set a predefined value for the from date. (input value end)
      *
      * @see {@link range}
      * @see {@link format}
+     * @category Native attributes
      */
     end = '';
-    /**
-     * 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.}
-     */
-    format = 'YYYY-MM-DD';
-    /** Set the date picker label as compact. If used, the `placeholder` will no longer be displayed. @since v7.21.0 */
-    compact = false;
-    /** Manually set language; this will be inherited from the topbar. */
-    language = null;
-    /** Set a custom ID for the calendar. @since v7.6.0 @category HTML attributes */
-    dateId = this.id;
-    /** HTML input name @since v7.6.0 @category HTML attributes */
+    /** HTML input name @since v7.6.0 @category Native attributes*/
     name;
+    /** HTML input name @since v7.25.0 @category Native attributes */
+    nameEnd;
     /**
      * Placeholder for the input field (defaults to the format prop).
      * @see {@link format}
-     * @category HTML attributes
+     * @category Native attributes
      **/
-    placeholder = this.format;
+    placeholder;
     /**
      * Placeholder for end date (defaults to the format prop).
      * @see {@link format}
-     * @category HTML attributes
+     * @deprecated Use `placeholder-end` instead
+     * @category Native attributes
      **/
-    endPlaceholder = this.format;
-    /** Set the input `autocomplete` attribute. @category HTML attributes */
+    endPlaceholder;
+    /**
+     * Placeholder for end date (defaults to the format prop).
+     * @see {@link format}
+     * @since v7.25.0
+     * @category Native attributes
+     **/
+    placeholderEnd;
+    /** Set the input `autocomplete` attribute. @category Native attributes */
     autocomplete;
-    /** Set the input `list` attribute for the first date input. @since v7.6.0 @category HTML attributes */
+    /** Set the input `list` attribute for the first date input. @since v7.6.0 @category Native attributes */
     list;
-    /** Set the input `list` attribute for the second date input. @since v7.6.0 @category HTML attributes */
+    /** Set the input `list` attribute for the second date input. @since v7.6.0 @category Native attributes */
     listEnd;
-    /** Set the HTML pattern prop on the input elements. Make sure it matches the format. @since v7.6.0 @category HTML attributes */
+    /** Set the HTML pattern prop on the input elements. Make sure it matches the format. @since v7.6.0 @category Native attributes */
     pattern;
-    /** Allow the selection of a date range. @category Features */
-    range = false;
+    /** Set the date picker as required. @category Native attributes */
+    required = false;
+    /** Set the date picker as readonly. @since v7.6.0 @category Native attributes */
+    readonly = false;
+    /** Set the date picker as disabled. @since v7.6.0 @category Native attributes */
+    disabled = false;
     /**
-     * Set a limit on how many days one may select.
-     * By default, you can select an unlimited range.
+     * Set the date format of the value.
      *
-     * @todo Create a range limit function.
-     * @see {@link range}
+     * 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
-     * @hide true
-     **/
-    rangeLimit;
-    /** 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 = CALENDAR;
-    /** Make the calendar open upwards by default. Opens downwards if there is not enough space. @since v7.6.0 @category Features */
-    calendarUp = false;
-    /** Show weekend numbers to the left of the calendar grid. @since v7.6.0 @category Features */
-    weekNumbers = false;
+     */
+    format = 'YYYY-MM-DD';
     /** Disable the automatic insertion of separators when typing in the input. @since v7.6.0 @category Features */
     disableTypeAhead = false;
     /** Remove the option to select dates on weekends. @category Features */
@@ -636,25 +632,72 @@ const PnDatePicker = class extends Mixin(animateHeightFactory) {
      * @category Features
      **/
     disabledDates;
-    /** If you use a format with an unknown length, disable the max length. @category Features */
+    /** If you use a format with an unknown length, disable the max length. @since 7.11.3 @category Features */
     disableMaxLength = false;
-    /** Set the date picker as required. @category State */
-    required = false;
-    /** Set the date picker as readonly. @since v7.6.0 @category State */
-    readonly = false;
-    /** Set the date picker as disabled. @since v7.6.0 @category State */
-    disabled = false;
-    /** Set an error message for the date picker. Overwrites the helpertext if used at the same time. @since v7.6.0 @category Validation */
-    error;
-    /** Trigger the invalid state without an error message. @since v7.6.0 @category Validation */
+    /** Allow the selection of a date range. @category Features */
+    range = false;
+    /**
+     * 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;
+    /** Show weekend numbers to the left of the calendar grid. @since v7.6.0 @category Features */
+    weekNumbers = false;
+    /** Set the date picker label as compact. If used, the `placeholder` will no longer be displayed. @since v7.21.0 @category Features */
+    compact = false;
+    /** Make the calendar open upwards by default. Opens downwards if there is not enough space. @since v7.6.0 @category Features */
+    calendarUp = false;
+    /** 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 = 'calendar';
+    /** Trigger the invalid state without an error message. @since v7.6.0 @category Features */
     invalid = false;
+    /** Set an error message for the date picker. Overwrites the helpertext if used at the same time. @since v7.6.0 @category Features */
+    error;
+    /** 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;
+    /**
+     * 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;
+    /**
+     * 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;
+    /**
+     * 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;
+    /**
+     * 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;
+    /** Set a custom ID for the calendar. @since v7.6.0 @deprecated Use `pn-id` instead. @category HTML attributes */
+    dateId;
     /**
      * 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 Min/max date
+     * @category Features
      **/
     minDate = null;
     watchMin() {
@@ -669,7 +712,7 @@ const PnDatePicker = class extends Mixin(animateHeightFactory) {
      * Remember to use the same format that you have in the `format` prop.
      * @see {@link format}
      * @example "2024-06-25"
-     * @category Min/max date
+     * @category Features
      **/
     maxDate = null;
     watchMax() {
@@ -713,13 +756,13 @@ const PnDatePicker = class extends Mixin(animateHeightFactory) {
             .forEach((item, index) => this.separatorRegex.exec(item) && this.separators.push({ name: item, index }));
     }
     watchId() {
-        this.idFrom = `${this.dateId}-from`;
-        this.idTo = `${this.dateId}-to`;
-        this.idFromButton = `${this.id}-from-button`;
-        this.idToButton = `${this.id}-to-button`;
-        this.idHelper = `${this.dateId}-helper`;
-        this.idError = `${this.dateId}-error`;
-        this.idCalendar = `${this.dateId}-calendar`;
+        this.idStart = this.getId();
+        this.idEnd = `${this.getId()}-end`;
+        this.idStartButton = `${this.idStart}-from-button`;
+        this.idEndButton = `${this.idEnd}-to-button`;
+        this.idHelper = `${this.idStart}-helper`;
+        this.idError = `${this.idStart}-error`;
+        this.idCalendar = `${this.idStart}-calendar`;
     }
     watchView() {
         const data = this.getCurrentDateObject();
@@ -813,10 +856,18 @@ const PnDatePicker = class extends Mixin(animateHeightFactory) {
             return;
         this.toggleGrid(false);
     }
+    connectedCallback() {
+        this.mo = new MutationObserver(() => {
+            forceUpdate(this.hostElement);
+            this.handleMessage();
+        });
+        this.mo.observe(this.hostElement, { childList: true, subtree: true });
+    }
+    disconnectedCallback() {
+        if (this.mo)
+            this.mo.disconnect();
+    }
     async componentWillLoad() {
-        this.watchMin();
-        this.watchMax();
-        this.watchId();
         this.handleFormat();
         this.handleMessage();
         const valid = validateDate(this.start || this.end, this.format);
@@ -825,9 +876,29 @@ const PnDatePicker = class extends Mixin(animateHeightFactory) {
         this.setViewDate({ date: data.date || date });
         this.setViewMonth({ month: data.month || month });
         this.setViewYear({ year: data.year || year });
-        if (this.language === null)
+        if (this.language === undefined)
             await awaitTopbar(this.hostElement);
     }
+    getId() {
+        return this.pnId || this.dateId || this.id;
+    }
+    getAriaLabel(end) {
+        if (end)
+            return !this.labelTo && !this.pnAriaLabelledbyEnd ? this.pnAriaLabelEnd : null;
+        return !this.labelFrom && !this.pnAriaLabelledby ? this.pnAriaLabel : null;
+    }
+    getAriaLabelledby(end) {
+        if (end)
+            return !this.labelTo && !this.pnAriaLabelEnd ? this.pnAriaLabelledbyEnd : null;
+        return !this.labelFrom && !this.pnAriaLabel ? this.pnAriaLabelledby : null;
+    }
+    getPlaceholder(end) {
+        if (this.compact)
+            return ' ';
+        if (end)
+            return this.placeholderEnd || this.endPlaceholder || this.format;
+        return this.placeholder || this.format;
+    }
     dropdownHandler() {
         if (this.open)
             this.openDropdown(this.calendarElement);
@@ -859,7 +930,7 @@ const PnDatePicker = class extends Mixin(animateHeightFactory) {
     }
     toggleGrid(state, selecting) {
         this.open = state ?? !this.open;
-        this.selectingTo = selecting;
+        this.selectingEnd = selecting;
     }
     hasHelperText() {
         return this.helpertext?.length > 0 || this.showHelperSlot;
@@ -880,6 +951,12 @@ const PnDatePicker = class extends Mixin(animateHeightFactory) {
         const slottedError = this.hostElement.querySelector('[slot=error]')?.textContent;
         this.showErrorSlot = !!slottedError?.length;
     }
+    hideHelpertext() {
+        return this.hasErrorMessage() || !this.hasHelperText();
+    }
+    hideError() {
+        return !this.hasErrorMessage();
+    }
     viewingCalendar() {
         return this.view === CALENDAR;
     }
@@ -932,8 +1009,8 @@ const PnDatePicker = class extends Mixin(animateHeightFactory) {
     getCurrentViewDate(data = this.getCurrentDateObject()) {
         return getReadableDate(data, this.language, 'MMMM YYYY');
     }
-    isSelected(data, to = false) {
-        const value = to ? this.end : this.start;
+    isSelected(data, end = false) {
+        const value = end ? this.end : this.start;
         return selectedDate(value, this.getCurrentDateObject(data), this.format, this.viewType());
     }
     isToday(data) {
@@ -1046,24 +1123,24 @@ const PnDatePicker = class extends Mixin(animateHeightFactory) {
         }
         return value;
     }
-    inputHandler(event, to = false) {
-        const propName = to ? 'end' : 'start';
+    inputHandler(event, end = false) {
+        const propName = end ? 'end' : 'start';
         const value = this.disableTypeAhead ? event.target.value : this.handleSeparator(event);
         this[propName] = value;
     }
     setValue(date) {
         const value = getReadableDate(this.getCurrentDateObject({ date }), this.language, this.format);
-        if (this.selectingTo)
+        if (this.selectingEnd)
             this.end = value;
         else
             this.start = value;
         this.setViewDate({ date });
-        if (!this.range || this.selectingTo) {
+        if (!this.range || this.selectingEnd) {
             this.toggleGrid(false);
             this.focusToggleCalendarButton();
         }
-        if (this.range && !this.selectingTo)
-            this.selectingTo = true;
+        if (this.range && !this.selectingEnd)
+            this.selectingEnd = true;
     }
     getDayAttributes(dateObject, blank) {
         const data = this.getCurrentDateObject(dateObject);
@@ -1118,7 +1195,7 @@ const PnDatePicker = class extends Mixin(animateHeightFactory) {
     /** Focus the button toggling the calendar. Handles the start/from date on its own. */
     focusToggleCalendarButton() {
         requestAnimationFrame(() => {
-            const id = this.range ? this.idToButton : this.idFromButton;
+            const id = this.range ? this.idEndButton : this.idStartButton;
             this.hostElement.querySelector(`#${id}`).focus({ preventScroll: true });
         });
     }
@@ -1200,37 +1277,39 @@ const PnDatePicker = class extends Mixin(animateHeightFactory) {
     renderYearGrid() {
         return (h("ul", { class: "pn-date-picker-list" }, this.getYearGrid()?.map(year => (h("li", { key: year, class: "pn-date-picker-item", "data-item": "year" }, h("button", { type: "button", class: "pn-date-picker-button", ...this.getDayAttributes({ year }, false) }, h("span", null, year)))))));
     }
-    renderLabel(to = false) {
-        const id = to ? this.idTo : this.idFrom;
-        const label = to ? this.labelTo : this.labelFrom;
+    renderLabel(end = false) {
+        const id = end ? this.idEnd : this.idStart;
+        const label = end ? this.labelTo : this.labelFrom;
+        if (!label)
+            return null;
         return (h("label", { class: "pn-date-picker-label", htmlFor: id, "data-compact": this.compact }, h("span", null, label)));
     }
-    renderInput({ to = false } = {}) {
-        const id = to ? this.idTo : this.idFrom;
-        const idButton = to ? this.idToButton : this.idFromButton;
-        const value = to ? this.end : this.start;
-        const placeholder = to ? this.endPlaceholder : this.placeholder;
-        const list = to ? this.listEnd : this.list;
-        const editing = this.open ? (this.selectingTo ? to : !to) : false;
+    renderInput({ end = false } = {}) {
+        const id = end ? this.idEnd : this.idStart;
+        const idButton = end ? this.idEndButton : this.idStartButton;
+        const value = end ? this.end : this.start;
+        const list = end ? this.listEnd : this.list;
+        const name = end ? this.nameEnd : this.name;
+        const editing = this.open ? (this.selectingEnd ? end : !end) : false;
         const defaultText = this.translate('SELECT_DATE');
-        const textProp = this.range ? (to ? 'END_' : 'START_') : '';
+        const textProp = this.range ? (end ? 'END_' : 'START_') : '';
         const dateText = this.translate(`SELECTED_${textProp}DATE`);
         let textButton = defaultText;
         if (value) {
             textButton += `, ${dateText.replace('{date}', value)}`;
         }
         const showButton = !(this.disabled || this.readonly);
-        return (h("div", { class: "pn-date-picker-container", "data-error": this.hasError() }, !this.compact && this.renderLabel(to), h("div", { class: "pn-date-picker-field" }, h("input", { type: "text", id: id, class: "pn-date-picker-input", name: this.name, placeholder: this.compact ? ' ' : placeholder, autocomplete: this.autocomplete, maxlength: this.disableMaxLength ? null : this.format.length, list: list, pattern: this.pattern, value: value, disabled: this.disabled, required: this.required, readonly: this.readonly, "aria-describedby": this.ariaDescribedby(), "aria-invalid": this.hasError()?.toString(), "data-active": editing, "data-compact": this.compact, onInput: e => this.inputHandler(e, to) }), this.compact && this.renderLabel(to), showButton && (h("pn-button", { class: "pn-date-picker-toggle", buttonId: idButton, icon: calendar, iconOnly: true, appearance: "light", arialabel: textButton, ariaexpanded: this.open.toString(), ariacontrols: this.idCalendar, "data-active": this.open, "data-input": true, small: true, onPnClick: () => this.toggleGrid(null, to), onKeyDown: e => this.handleButtonBlur(e) })))));
+        return (h("div", { class: "pn-date-picker-container", "data-error": this.hasError() }, !this.compact && this.renderLabel(end), h("div", { class: "pn-date-picker-field" }, h("input", { type: "text", id: id, class: "pn-date-picker-input", name: name, placeholder: this.getPlaceholder(end), autocomplete: this.autocomplete, maxlength: this.disableMaxLength ? null : this.format.length, list: list, pattern: this.pattern, value: value, disabled: this.disabled, required: this.required, readonly: this.readonly, "aria-label": this.getAriaLabel(end), "aria-labelledby": this.getAriaLabelledby(end), "aria-describedby": this.ariaDescribedby(), "aria-invalid": this.hasError()?.toString(), "data-active": editing, "data-compact": this.compact, onInput: e => this.inputHandler(e, end) }), this.compact && this.renderLabel(end), showButton && (h("pn-button", { class: "pn-date-picker-toggle", buttonId: idButton, icon: calendar, iconOnly: true, appearance: "light", arialabel: textButton, ariaexpanded: this.open.toString(), ariacontrols: this.idCalendar, "data-active": this.open, "data-input": true, small: true, onPnClick: () => this.toggleGrid(null, end), onKeyDown: e => this.handleButtonBlur(e) })))));
     }
     render() {
-        return (h(Host, { key: '0485d508d1df7d71009ab2c22096384928750697' }, h("div", { key: '31514c4b9c216ca227ac91c90e82846992df283c', class: "pn-date-picker" }, this.renderInput(), this.range && (h("div", { key: '2d924b59e6f7e41364413935b08640db0aa1622e', class: "pn-date-picker-range-icon test" }, h("pn-icon", { key: '51ec54178bbf69c66fe17228017aeb8985e551fc', icon: arrow_right }))), this.range && this.renderInput({ to: this.range })), h("div", { key: '16d60d86b8d9c01b7732a3c7b773d1157eedbd2b', id: this.idCalendar, class: "pn-date-picker-calendar", role: "dialog", "aria-label": this.translate('CALENDAR_NAVIGATION'), "data-open": this.open, "data-direction": this.openUp ? 'top' : 'bottom', "data-range": this.range, style: { height: '0px' }, ref: el => (this.calendarElement = el), onKeyDown: e => this.handleCalendarTabEsc(e) }, h("div", { key: '703d253840d5e9943750469c9495c3151b85f08c', class: "pn-date-picker-wrapper" }, h("nav", { key: 'e25723946681d630dffeeddbf814b3a720c9685c', class: "pn-date-picker-nav", "aria-labelledby": this.idCalendar }, h("pn-button", { key: '9dec68c96c3ab4f8ca0c29783cd1e693e43281e1', hidden: this.viewingMonth(), small: true, appearance: "light", arialabel: this.translate(`PREVIOUS_${this.viewType().toUpperCase()}`), icon: arrow_left, iconOnly: true, onPnClick: () => this.setNavView({ minus: true }) }), h("pn-button", { key: '33dfc7f288f489eb814f27f61869793bf718fb6a', hidden: !this.viewingCalendar(), small: true, appearance: "light", onPnClick: () => this.setView(MONTHS) }, h("span", { key: '67b029ff5dae525732dc78d1be4a3c706848078c', class: "pn-date-picker-month", "data-full": true }, this.translateDateText({ date: 1 }, 'MMMM')), h("span", { key: '82b2346a120e52d3f55d40eae85d191673c4e906', class: "pn-date-picker-month", "data-abbr": true }, this.translateDateText({ date: 1 }, 'MMM'))), h("h2", { key: '64c4b74c742c62370e8fe74b7ffd0c8e10c8c8d7', hidden: this.viewingCalendar(), class: "pn-date-picker-title" }, this.translate(`SELECT_${this.viewType().toUpperCase()}`)), h("pn-button", { key: '065dcdbccfaf4f4b3eeae1bba9772a8bce804b66', hidden: !this.viewingCalendar(), small: true, appearance: "light", onPnClick: () => this.setView(YEARS) }, h("span", { key: '2c0b032610650aa43701a3f52052defad495569d' }, this.dateViewYear)), h("pn-button", { key: 'feb54d3c95595a39aa93eb2c74c7582a82b3031a', hidden: this.viewingMonth(), small: true, appearance: "light", arialabel: this.translate(`NEXT_${this.viewType().toUpperCase()}`), icon: arrow_right, iconOnly: true, onPnClick: () => this.setNavView({ plus: true }) })), this.viewingYears() && this.renderYearGrid(), this.viewingMonth() && this.renderMonthGrid(), this.viewingCalendar() && this.renderDateGrid(), h("aside", { key: '1d1aa223f4314d714db6e994a7f87f3f0004f472', class: "pn-date-picker-chips" }, h("slot", { key: '1239efd56b8aa01558c9671e3a1c198af8cdec28', name: "chips" })), h("nav", { key: '0410b4a1a92b1ccb56dee901be8df49933301142', class: "pn-date-picker-bottom", hidden: this.viewingCalendar() }, h("pn-button", { key: 'ec803a3af2c22f05f1416e0f62424b3341256d0f', appearance: "light", variant: "outlined", small: true, icon: pn_return, onPnClick: () => this.setView(CALENDAR) }, h("span", { key: '76b1889719347c417b5366bc511f48604aad35e1' }, this.translate('GO_CALENDAR')))))), h("p", { key: 'efb966a5373f0a1b0e300999af60a1f8b9194429', id: this.idHelper, class: "pn-date-picker-helpertext", hidden: !this.hasHelperText() || this.hasError() }, h("span", { key: 'cf169a86e1a4c9ca46d835a536971306dba5224f' }, this.helpertext), h("slot", { key: '858470af2c9febb68a7beffa3014485d91297893', name: "helpertext" })), h("p", { key: '219d57d13eebcb6d6621fe8e1a717fedcc39e641', id: this.idError, class: "pn-date-picker-error", role: "alert", hidden: !this.hasErrorMessage() }, h("span", { key: '92b84f913d27642f9487f6316040f95478a75373' }, this.error), h("slot", { key: '31a3de009f3b54f775f558ae6a9aa17ebb2bbc88', name: "error" }))));
+        return (h(Host, { key: 'dbe09316ddf6365ad119afe9fd01a363aa3cf9bf' }, h("div", { key: 'b6aa1c922859c282529ff9e1297aacc79111a0f9', class: "pn-date-picker" }, this.renderInput(), this.range && (h("div", { key: '48d050a834a2df16b33759bbe117a5c378dfa069', class: "pn-date-picker-range-icon test" }, h("pn-icon", { key: '6b6507409ba5eaf3de232dff28785d9c7c0a85f0', icon: arrow_right }))), this.range && this.renderInput({ end: this.range })), h("div", { key: '9a9d31f221aabbf0927bcc8ae602d1330d75b4d3', id: this.idCalendar, class: "pn-date-picker-calendar", role: "dialog", "aria-label": this.translate('CALENDAR_NAVIGATION'), "data-open": this.open, "data-direction": this.openUp ? 'top' : 'bottom', "data-range": this.range, style: { height: '0px' }, ref: el => (this.calendarElement = el), onKeyDown: e => this.handleCalendarTabEsc(e) }, h("div", { key: '56137ab966418bda3abd61bbcc12ff004feca5c0', class: "pn-date-picker-wrapper" }, h("nav", { key: '67a2fea072a8e4953fa9803e77d0245760b7195a', class: "pn-date-picker-nav", "aria-labelledby": this.idCalendar }, h("pn-button", { key: '9d9d0aa471baa6d6183a4b3b920cf8d05737e8a1', hidden: this.viewingMonth(), small: true, appearance: "light", arialabel: this.translate(`PREVIOUS_${this.viewType().toUpperCase()}`), icon: arrow_left, iconOnly: true, onPnClick: () => this.setNavView({ minus: true }) }), h("pn-button", { key: '57988169fdd38cb05c18c6d4f8e71ded23f97f5f', hidden: !this.viewingCalendar(), small: true, appearance: "light", onPnClick: () => this.setView(MONTHS) }, h("span", { key: '93c98b9aeabdc4b08e59afdaf8655dfe3c440b13', class: "pn-date-picker-month", "data-full": true }, this.translateDateText({ date: 1 }, 'MMMM')), h("span", { key: '9c0b0c3378f00755ef84e5e87426c1a9bedb0651', class: "pn-date-picker-month", "data-abbr": true }, this.translateDateText({ date: 1 }, 'MMM'))), h("h2", { key: '02d40d1aa03dd69f5b344295713ec9c45431b3e9', hidden: this.viewingCalendar(), class: "pn-date-picker-title" }, this.translate(`SELECT_${this.viewType().toUpperCase()}`)), h("pn-button", { key: '4f953719a89967b10c98472b24f732c42cd61e3c', hidden: !this.viewingCalendar(), small: true, appearance: "light", onPnClick: () => this.setView(YEARS) }, h("span", { key: 'a91a0dd940b94d0f71d887508644d6acfa3ef098' }, this.dateViewYear)), h("pn-button", { key: '3eabe547992de22014f3e229c9e7e17eab395d56', hidden: this.viewingMonth(), small: true, appearance: "light", arialabel: this.translate(`NEXT_${this.viewType().toUpperCase()}`), icon: arrow_right, iconOnly: true, onPnClick: () => this.setNavView({ plus: true }) })), this.viewingYears() && this.renderYearGrid(), this.viewingMonth() && this.renderMonthGrid(), this.viewingCalendar() && this.renderDateGrid(), h("aside", { key: '6eaefead16141908688578834b1e6a2ba87e8161', class: "pn-date-picker-chips" }, h("slot", { key: '43bcfa9bb50d6dbd912ae8cfee339b642b9363a5', name: "chips" })), h("nav", { key: 'b22d7112ba5d3d012f5d2617586bd251547f4ed7', class: "pn-date-picker-bottom", hidden: this.viewingCalendar() }, h("pn-button", { key: '41031640dbac5130b3fb9029b36c5e732068c78f', appearance: "light", variant: "outlined", small: true, icon: pn_return, onPnClick: () => this.setView(CALENDAR) }, h("span", { key: '08568a439547db8728c3f110c00854d49ec7eb77' }, this.translate('GO_CALENDAR')))))), h("p", { key: 'e890351198e9eaa85e9db3bcc55bc8bdd48f3538', id: this.idHelper, class: "pn-date-picker-helpertext", hidden: this.hideHelpertext() }, h("span", { key: '0b776595b33ed64cb73b5060d023eb89421ad758' }, this.helpertext), h("slot", { key: 'e9ef3797e3baae78dca7efc2313e1b6cf9c7efd7', name: "helpertext" })), h("p", { key: 'aa43fb6eaf42251bb7dadab0f724edee0e6d42b2', id: this.idError, class: "pn-date-picker-error", role: "alert", hidden: this.hideError() }, h("span", { key: '556bfbb5e5ba697234734eb601445150b23ddcf2' }, this.error), h("slot", { key: '21dd12fd2c3f1ac814699f4785ece567136cedd2', name: "error" }))));
     }
     static get watchers() { return {
         "minDate": [{
-                "watchMin": 0
+                "watchMin": 1
             }],
         "maxDate": [{
-                "watchMax": 0
+                "watchMax": 1
             }],
         "start": [{
                 "watchValue": 0
@@ -1241,9 +1320,12 @@ const PnDatePicker = class extends Mixin(animateHeightFactory) {
         "format": [{
                 "handleFormat": 0
             }],
-        "id": [{
+        "dateId": [{
                 "watchId": 0
             }],
+        "pnId": [{
+                "watchId": 1
+            }],
         "dateViewYear": [{
                 "watchView": 0
             }],

package/umd/modules/@postnord/web-components/esm/pn-fieldset.entry.js

@@ -2,12 +2,12 @@
  * Built with Stencil
  * By PostNord.
  */
-import { t as transformTag, r as registerInstance, g as getElement, f as forceUpdate, h, a as Host } from './index-CAEP792y.js';
+import { t as transformTag, r as registerInstance, g as getElement, f as forceUpdate, h, a as Host } from './index-XKg-ydzH.js';
 import { uuidv4 } from './index.js';
 import { a as alert_exclamation_circle } from './alert_exclamation_circle-B88w-Zxn.js';
 import { a as alert_info_circle } from './alert_info_circle-BTqkgfeH.js';
 
-const pnFieldsetCss = () => `${transformTag("pn-fieldset")}{display:inline-block}${transformTag("pn-fieldset")} .pn-fieldset{border:0;padding:0;margin:0;color:#2d2013;display:flex;flex-direction:column;font-size:1em}${transformTag("pn-fieldset")} .pn-fieldset-legend{float:left;font-weight:500;line-height:1.4;padding:0}${transformTag("pn-fieldset")} .pn-fieldset-helpertext{color:#5e554a;margin:0}${transformTag("pn-fieldset")} .pn-fieldset-items{padding:0.75em 0;display:flex;flex-direction:column;gap:0.75em}${transformTag("pn-fieldset")} .pn-fieldset-message-wrapper{display:flex;gap:0.75em;color:#2d2013;line-height:1.4;font-weight:400}${transformTag("pn-fieldset")} .pn-fieldset-message-wrapper[hidden]{display:none}${transformTag("pn-fieldset")} .pn-fieldset-message{margin:0}${transformTag("pn-fieldset")} .pn-fieldset[aria-invalid=true]>.pn-fieldset-legend,${transformTag("pn-fieldset")} .pn-fieldset[aria-invalid=true]>.pn-fieldset-helpertext,${transformTag("pn-fieldset")} .pn-fieldset[aria-invalid=true]>.pn-fieldset-message-wrapper{color:#a70707}${transformTag("pn-fieldset")} .pn-fieldset[aria-invalid=true]>.pn-fieldset-legend>${transformTag("pn-icon")} .pn-icon-svg>path,${transformTag("pn-fieldset")} .pn-fieldset[aria-invalid=true]>.pn-fieldset-helpertext>${transformTag("pn-icon")} .pn-icon-svg>path,${transformTag("pn-fieldset")} .pn-fieldset[aria-invalid=true]>.pn-fieldset-message-wrapper>${transformTag("pn-icon")} .pn-icon-svg>path{fill:#a70707}${transformTag("pn-fieldset")} .pn-fieldset:disabled>.pn-fieldset-legend,${transformTag("pn-fieldset")} .pn-fieldset:disabled>.pn-fieldset-helpertext,${transformTag("pn-fieldset")} .pn-fieldset:disabled>.pn-fieldset-message,${transformTag("pn-fieldset")} .pn-fieldset:disabled>.pn-fieldset-message-wrapper{color:#2d2013}${transformTag("pn-fieldset")} .pn-fieldset:disabled>.pn-fieldset-legend>${transformTag("pn-icon")} .pn-icon-svg>path,${transformTag("pn-fieldset")} .pn-fieldset:disabled>.pn-fieldset-helpertext>${transformTag("pn-icon")} .pn-icon-svg>path,${transformTag("pn-fieldset")} .pn-fieldset:disabled>.pn-fieldset-message>${transformTag("pn-icon")} .pn-icon-svg>path,${transformTag("pn-fieldset")} .pn-fieldset:disabled>.pn-fieldset-message-wrapper>${transformTag("pn-icon")} .pn-icon-svg>path{fill:#2d2013}`;
+const pnFieldsetCss = () => `${transformTag("pn-fieldset")}{display:inline-block}${transformTag("pn-fieldset")} .pn-fieldset{border:0;padding:0;margin:0;color:#2d2013;display:flex;flex-direction:column;font-size:1em}${transformTag("pn-fieldset")} .pn-fieldset-legend{float:left;font-weight:500;line-height:1.4;padding:0}${transformTag("pn-fieldset")} .pn-fieldset-message{color:#5e554a;font-size:0.875em;font-weight:400;margin:0.25em 0 0 0;display:flex;flex-direction:column;gap:0.25em}${transformTag("pn-fieldset")} .pn-fieldset-message[hidden]{display:none}${transformTag("pn-fieldset")} .pn-fieldset-error{display:flex;flex-direction:row;flex-wrap:nowrap;gap:0.25em}${transformTag("pn-fieldset")} .pn-fieldset-error[hidden]{display:none}${transformTag("pn-fieldset")} .pn-fieldset-error>.pn-fieldset-message{color:#a70707}${transformTag("pn-fieldset")} .pn-fieldset-items{padding:0.75em 0;display:flex;flex-direction:column;gap:0.75em}${transformTag("pn-fieldset")} .pn-fieldset[aria-invalid=true]>.pn-fieldset-legend,${transformTag("pn-fieldset")} .pn-fieldset[aria-invalid=true]>.pn-fieldset-message-wrapper{color:#a70707}${transformTag("pn-fieldset")} .pn-fieldset[aria-invalid=true]>.pn-fieldset-legend>${transformTag("pn-icon")} .pn-icon-svg>path,${transformTag("pn-fieldset")} .pn-fieldset[aria-invalid=true]>.pn-fieldset-message-wrapper>${transformTag("pn-icon")} .pn-icon-svg>path{fill:#a70707}${transformTag("pn-fieldset")} .pn-fieldset:disabled>.pn-fieldset-legend,${transformTag("pn-fieldset")} .pn-fieldset:disabled>.pn-fieldset-helpertext,${transformTag("pn-fieldset")} .pn-fieldset:disabled>.pn-fieldset-message,${transformTag("pn-fieldset")} .pn-fieldset:disabled>.pn-fieldset-message-wrapper{color:#2d2013}${transformTag("pn-fieldset")} .pn-fieldset:disabled>.pn-fieldset-legend>${transformTag("pn-icon")} .pn-icon-svg>path,${transformTag("pn-fieldset")} .pn-fieldset:disabled>.pn-fieldset-helpertext>${transformTag("pn-icon")} .pn-icon-svg>path,${transformTag("pn-fieldset")} .pn-fieldset:disabled>.pn-fieldset-message>${transformTag("pn-icon")} .pn-icon-svg>path,${transformTag("pn-fieldset")} .pn-fieldset:disabled>.pn-fieldset-message-wrapper>${transformTag("pn-icon")} .pn-icon-svg>path{fill:#2d2013}`;
 
 const PnFieldset = class {
     constructor(hostRef) {
@@ -24,57 +24,63 @@ const PnFieldset = class {
     legend;
     /** Text message underneath the legend for more instruction or hints on how to fill in controls correctly. */
     helpertext;
-    /** Give the fieldset a custom HTML id. */
-    fieldsetId = this.id;
+    /** Give the fieldset a HTML name. @category Native attributes */
+    name;
     /**
      * 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;
-    /** Give the fieldset a HTML name. */
-    name;
-    /** Disable all of the inputs inside of the fieldset. */
+    /** Disable all of the inputs inside of the fieldset. @category Native attributes */
     disabled = false;
-    /** Set the fieldset as `invalid`, will add red error styles. */
+    /** Set the fieldset as `invalid`, will add red error styles. @category Features */
     invalid = false;
-    /** Error message, applies warning styles and icon. */
+    /** Error message, applies warning styles and icon. @category Features */
     error;
+    /** Set a custom ID for the fieldset. @since v7.25.0 @category HTML attributes  */
+    pnId = this.id;
+    /** Set a custom ID for the fieldset. @deprecated Use `pn-id` instead. @category HTML attributes */
+    fieldsetId = this.id;
     handleId() {
-        this.idHelpertext = `${this.fieldsetId}-helpertext`;
+        this.idHelpertext = `${this.getId()}-helpertext`;
     }
-    componentWillLoad() {
-        this.handleId();
+    connectedCallback() {
+        this.mo = new MutationObserver(() => forceUpdate(this.hostElement));
+        this.mo.observe(this.hostElement, { childList: true, subtree: true });
     }
-    componentDidLoad() {
+    disconnectedCallback() {
         if (this.mo)
             this.mo.disconnect();
-        this.mo = new MutationObserver(() => forceUpdate(this.hostElement));
-        this.mo.observe(this.hostElement.querySelector('.pn-fieldset'), { childList: true, subtree: true });
     }
-    componentDidRender() {
-        /**
-         * Stencil has a known problem about rendering the `form` attribute.
-         * Setting it via setAttribute solves it for now.
-         * https://github.com/ionic-team/stencil/issues/2703
-         **/
-        if (this.form) {
-            this.hostElement.querySelector('fieldset')?.setAttribute('form', this.form);
-        }
+    getId() {
+        return this.pnId || this.fieldsetId || this.id;
+    }
+    hasHelpertext() {
+        const helpertextSlot = this.hostElement.querySelector('[slot="helpertext"]');
+        return !!this.helpertext || helpertextSlot?.textContent?.trim().length > 0;
     }
     hasError() {
-        return this.invalid || !!this.error;
+        const errorSlot = this.hostElement.querySelector('[slot="error"]');
+        return !!this.error || errorSlot?.textContent?.trim().length > 0;
+    }
+    isInvalid() {
+        return this.invalid || this.hasError();
     }
-    getSymbol() {
+    getIcon() {
         if (this.disabled)
             return alert_info_circle;
         return alert_exclamation_circle;
     }
     render() {
-        return (h(Host, { key: '4eac26b9a4c9095888cbe548f30eddcbed3efcdf' }, h("fieldset", { key: '341684c752c43382f37d0d95f9ea8c0d2d170ef1', id: this.fieldsetId, class: "pn-fieldset", disabled: this.disabled, "aria-describedby": this.helpertext && this.idHelpertext, "aria-invalid": this.hasError().toString() }, h("legend", { key: '3f98ab3a56288cebb07cce9c49b6e1bebd2096f2', class: "pn-fieldset-legend" }, this.legend), this.helpertext && (h("p", { key: '979b9b47ae0baa2f84bf19de877149773bfd63b9', id: this.idHelpertext, class: "pn-fieldset-helpertext" }, this.helpertext)), h("div", { key: 'a67905a01003d767e26061ff8fa3af86a0900c27', class: "pn-fieldset-items" }, h("slot", { key: 'a2a02e54157e39e43cf03839c8bb2a561533eb39' })), h("div", { key: '4c618709e6a3cbaa20761368acc70b6d2e964930', class: "pn-fieldset-message-wrapper", role: "alert", hidden: !this.error }, h("pn-icon", { key: 'db1b62bccada153943c62195242e66b62d9cc2c3', icon: this.getSymbol() }), h("p", { key: '9b94853b5064d9563e39c20491d7139eead83f56', class: "pn-fieldset-message" }, this.error)))));
+        return (h(Host, { key: '908a403f3fb8b4779393f4ca0a4f17f518ba53a7' }, h("fieldset", { key: '97b321f776944a0d27f1b1096a967b2c9d9c9fcd', id: this.getId(), name: this.name, form: this.form, class: "pn-fieldset", disabled: this.disabled, "aria-describedby": this.hasHelpertext() ? this.idHelpertext : undefined, "aria-invalid": this.isInvalid().toString() }, h("legend", { key: 'a230416f33f787624f90977054c6492f1516dba6', class: "pn-fieldset-legend" }, this.legend), h("p", { key: '6911c6e63588c36bc0e314d7b3c8b81df2282579', id: this.idHelpertext, class: "pn-fieldset-message", hidden: !this.hasHelpertext() }, h("span", { key: '3370e13a7cf93741a4aa76880533b11c320aea03' }, this.helpertext), h("slot", { key: '0365489d121f3fcfa1211e3c2dcf2881f849940d', name: "helpertext" })), h("div", { key: '23d806e61d39d509ad07f0f68c002a1962332bf4', class: "pn-fieldset-items" }, h("slot", { key: 'a2ead121001e5f751f779957fbbb44716e64274c' })), h("div", { key: '075c709c13a8363be1b1a0b661e3621419a69333', class: "pn-fieldset-error", role: "alert", hidden: !this.hasError() }, h("pn-icon", { key: '0c4e969436033de98814135853e51388862e0812', icon: this.getIcon(), color: "warning" }), h("p", { key: 'd94095bee0a7e4fdc3962db9666dd4ffba7dfa50', class: "pn-fieldset-message" }, h("span", { key: '0c3808a66242f11afdc1ea5053517e965eeb3a93' }, this.error), h("slot", { key: 'ad9604de305ce00ef164cc999562707e923bdd83', name: "error" }))))));
     }
     static get watchers() { return {
         "fieldsetId": [{
                 "handleId": 0
+            }],
+        "pnId": [{
+                "handleId": 1
             }]
     }; }
 };