@postnord/pn-marketweb-components 2.4.16 → 2.4.17

package/collection/components/input/pn-date-and-time/pn-date-and-time.js

@@ -0,0 +1,349 @@
+import { h, Host } from '@stencil/core';
+export class PnDateAndTime {
+  constructor() {
+    this.pnDatePicker = null;
+    this.pnTimeFromHourDropdown = null;
+    this.pnTimeFromMinuteDropdown = null;
+    this.pnTimeToHourDropdown = null;
+    this.pnTimeToMinuteDropdown = null;
+    this.languageCode = null;
+    this.dateAndTimeLabel = '';
+    this.dateDaysFromToday = 0;
+    this.validTimeRangeMinutes = 0;
+    this.errorMessage = '';
+    this.dateHelperText = '';
+    this.timeHelperText = '';
+    this.disableWeekends = false;
+    this.datePlacehodler = '';
+    this.language = null;
+    this.hourArr = null;
+    this.minuteArr = null;
+    this.formValue = null;
+    this.invalidTimespan = false;
+    this.selectedDate = null;
+    this.selectedFromHour = null;
+    this.selectedFromMin = null;
+    this.selectedToHour = null;
+    this.selectedToMin = null;
+    this.firstValidDateString = '';
+    this.lastValidDateString = '';
+  }
+  componentWillLoad() {
+    this.setInitialValues();
+  }
+  componentDidLoad() {
+    this.setDefaultHiddenValue();
+    this.addEventHandlers();
+  }
+  async setInitialValues() {
+    this.setLangugaeCode();
+    this.setFirstValidDate();
+    this.hourArr = this.getNumbersAsStringArr(6, 22, 1);
+    this.minuteArr = this.getNumbersAsStringArr(0, 50, 10);
+  }
+  setFirstValidDate() {
+    var _a;
+    const date = new Date();
+    date.setDate((_a = date.getDate() + this.dateDaysFromToday) !== null && _a !== void 0 ? _a : 0);
+    const year = date.getFullYear();
+    const month = (date.getMonth() + 1).toString().padStart(2, '0');
+    const day = date.getDate().toString().padStart(2, '0');
+    const endYear = year + 2;
+    this.firstValidDateString = `${year.toString()}-${month}-${day}`;
+    this.lastValidDateString = `${endYear.toString()}-${month}-${day}`;
+  }
+  setLangugaeCode() {
+    if (typeof this.languageCode === 'string' && this.languageCode.trim() === '') {
+      this.language = document.querySelector('html').lang;
+    }
+    else {
+      this.language = this.languageCode;
+    }
+  }
+  setDefaultHiddenValue() {
+    this.selectedFromHour = parseInt(this.hourArr[8]);
+    this.selectedFromMin = 0;
+    this.selectedToHour = parseInt(this.hourArr[12]);
+    this.selectedToMin = 0;
+    this.updateHiddenValue();
+  }
+  addEventHandlers() {
+    this.pnDatePicker.addEventListener('dateselection', this.handleChange.bind(this));
+    this.pnTimeFromHourDropdown.addEventListener('selectchange', this.handleChange.bind(this));
+    this.pnTimeFromMinuteDropdown.addEventListener('selectchange', this.handleChange.bind(this));
+    this.pnTimeToHourDropdown.addEventListener('selectchange', this.handleChange.bind(this));
+    this.pnTimeToMinuteDropdown.addEventListener('selectchange', this.handleChange.bind(this));
+  }
+  handleChange(e) {
+    const target = e.target;
+    if (target === this.pnDatePicker) {
+      this.selectedDate = e.detail;
+    }
+    if (target === this.pnTimeFromHourDropdown || target === this.pnTimeFromMinuteDropdown || target === this.pnTimeToHourDropdown || target === this.pnTimeToMinuteDropdown) {
+      this.handleTimeChange();
+    }
+    this.updateHiddenValue();
+  }
+  handleTimeChange() {
+    var _a, _b, _c, _d;
+    const fromHourString = (_a = this.pnTimeFromHourDropdown.querySelector('.current-selection .pn-option-content')) === null || _a === void 0 ? void 0 : _a.textContent;
+    const fromMinString = (_b = this.pnTimeFromMinuteDropdown.querySelector('.current-selection .pn-option-content')) === null || _b === void 0 ? void 0 : _b.textContent;
+    const toHourString = (_c = this.pnTimeToHourDropdown.querySelector('.current-selection .pn-option-content')) === null || _c === void 0 ? void 0 : _c.textContent;
+    const toMinString = (_d = this.pnTimeToMinuteDropdown.querySelector('.current-selection .pn-option-content')) === null || _d === void 0 ? void 0 : _d.textContent;
+    this.selectedFromHour = parseInt(fromHourString);
+    this.selectedFromMin = parseInt(fromMinString);
+    this.selectedToHour = parseInt(toHourString);
+    this.selectedToMin = parseInt(toMinString);
+  }
+  updateHiddenValue() {
+    const date = new Date();
+    const dateFrom = new Date(date.getFullYear(), date.getMonth(), date.getDate(), this.selectedFromHour, this.selectedFromMin, 0, 0);
+    const dateTo = new Date(date.getFullYear(), date.getMonth(), date.getDate(), this.selectedToHour, this.selectedToMin, 0, 0);
+    this.validateTimeRange(dateFrom.getTime(), dateTo.getTime());
+    if (this.invalidTimespan || !this.selectedDate) {
+      this.formValue = '';
+    }
+    else {
+      const fromMin = this.selectedFromMin.toString().padStart(2, '0');
+      const toMin = this.selectedToMin.toString().padStart(2, '0');
+      this.formValue = `${this.selectedDate}, ${this.selectedFromHour}:${fromMin}-${this.selectedToHour}:${toMin}`;
+    }
+    this.dateandtimerange.emit(this.formValue);
+  }
+  validateTimeRange(from, to) {
+    let differenceValue = (to - from) / 1000;
+    differenceValue /= 60;
+    this.invalidTimespan = differenceValue < this.validTimeRangeMinutes ? true : false;
+  }
+  getNumbersAsStringArr(start, stop, step) {
+    const arr = Array.from({ length: (stop - start) / step + 1 }, (_, index) => start + index * step);
+    const result = [];
+    arr.forEach(item => {
+      const itemAsString = item.toString().padStart(2, '0');
+      result.push(itemAsString);
+    });
+    return result;
+  }
+  removePnOptionSelected() {
+    const selectOptions = this.hostElement.querySelectorAll('pn-option');
+    selectOptions.forEach(elm => {
+      elm.removeAttribute('selected');
+    });
+  }
+  render() {
+    var _a, _b, _c, _d;
+    return (h(Host, null, h("div", { class: "date-and-time-group" }, this.dateAndTimeLabel ? (h("div", { class: "date-and-time-row" }, h("label", null, this.dateAndTimeLabel))) : null, h("div", { class: "date-and-time-row" }, h("pn-date-picker", { ref: el => (this.pnDatePicker = el), range: "false", "disable-weekends": this.disableWeekends, "min-date": this.firstValidDateString, "max-date": this.lastValidDateString, language: this.language, placeholder: this.datePlacehodler })), this.dateHelperText ? h("small", { class: "date-and-time-row helper-text" }, this.dateHelperText) : null), h("div", { class: "date-and-time-group" }, h("div", { class: "date-and-time-row" }, h("pn-select", { ref: el => (this.pnTimeFromHourDropdown = el), name: "date-and-time-from-houre", placeholder: this.hourArr[8], class: "date-and-time-dropdown--time", invalid: this.invalidTimespan }, (_a = this.hourArr) === null || _a === void 0 ? void 0 : _a.map((hour) => (h("pn-option", null, hour)))), h("pn-select", { ref: el => (this.pnTimeFromMinuteDropdown = el), name: "date-and-time-from-minute", placeholder: this.minuteArr[0], class: "date-and-time-dropdown--time", invalid: this.invalidTimespan }, (_b = this.minuteArr) === null || _b === void 0 ? void 0 : _b.map((minute) => (h("pn-option", null, minute)))), h("div", { class: "time-separator" }, h("span", null, "-")), h("pn-select", { ref: el => (this.pnTimeToHourDropdown = el), name: "date-and-time-to-hour", placeholder: this.hourArr[12], class: "date-and-time-dropdown--time", invalid: this.invalidTimespan }, (_c = this.hourArr) === null || _c === void 0 ? void 0 : _c.map((hour) => (h("pn-option", null, hour)))), h("pn-select", { ref: el => (this.pnTimeToMinuteDropdown = el), name: "date-and-time-to-minute", placeholder: this.minuteArr[0], class: "date-and-time-dropdown--time", invalid: this.invalidTimespan }, (_d = this.minuteArr) === null || _d === void 0 ? void 0 : _d.map((minute) => (h("pn-option", null, minute))))), this.timeHelperText ? h("small", { class: "date-and-time-row helper-text" }, this.timeHelperText) : null, this.invalidTimespan && this.errorMessage ? (h("small", { class: "date-and-time-row error-message" }, h("pn-icon", { symbol: "alert-info-circle", small: "false", color: "warning" }), this.errorMessage)) : null)));
+  }
+  static get is() { return "pn-date-and-time"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["pn-date-and-time.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["pn-date-and-time.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "languageCode": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "language-code",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "dateAndTimeLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "date-and-time-label",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "dateDaysFromToday": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "date-days-from-today",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "validTimeRangeMinutes": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "valid-time-range-minutes",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "errorMessage": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "error-message",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "dateHelperText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "date-helper-text",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "timeHelperText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "time-helper-text",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "disableWeekends": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disable-weekends",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "datePlacehodler": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "date-placehodler",
+        "reflect": false,
+        "defaultValue": "''"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "language": {},
+      "hourArr": {},
+      "minuteArr": {},
+      "formValue": {},
+      "invalidTimespan": {},
+      "selectedDate": {},
+      "selectedFromHour": {},
+      "selectedFromMin": {},
+      "selectedToHour": {},
+      "selectedToMin": {},
+      "firstValidDateString": {},
+      "lastValidDateString": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "dateandtimerange",
+        "name": "dateandtimerange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "hostElement"; }
+}

package/collection/components/input/pn-date-and-time/pn-date-and-time.stories.js

@@ -0,0 +1,39 @@
+import readme from './readme.md';
+
+export default {
+  title: 'input/Date and Time',
+  parameters: {
+    notes: readme,
+    layout: 'centered',
+  },
+};
+
+const Template = ({ ...args }) => {
+  return `
+    <pn-date-and-time 
+      language-code="${args.languageCode}"
+      date-and-time-label="${args.dateAndTimeLabel}"
+      date-days-from-today="${args.dateDaysFromToday}"
+      valid-time-range-minutes="${args.validTimeRangeMinutes}"
+      error-message="${args.errorMessage}"
+      date-helper-text="${args.dateHelpertext}"
+      time-helper-text="${args.timeHelpertext}"
+      disable-weekends="${args.disableWeekends}"
+      date-placehodler="${args.datePlacehodler}"
+      >
+    </pn-date-and-time>
+    `;
+};
+
+export const Primary = Template.bind({});
+Primary.args = {
+  languageCode: 'sv',
+  dateAndTimeLabel: 'Label Text',
+  dateDaysFromToday: 1,
+  validTimeRangeMinutes: 30,
+  errorMessage: 'Error message',
+  dateHelpertext: 'Date helpertext',
+  timeHelpertext: 'Time helpertext',
+  disableWeekends: 'true',
+  datePlacehodler: 'YYYY-MM-DD',
+};

package/components/index.d.ts

@@ -8,6 +8,7 @@ export { PnChartsCard as PnChartsCard } from '../types/components/charts/pn-char
 export { PnChoiceButton as PnChoiceButton } from '../types/components/input/pn-choice-button/pn-choice-button';
 export { PnCustomernumberSelector as PnCustomernumberSelector } from '../types/components/profile/pn-customernumber-selector/pn-customernumber-selector';
 export { PnProfileSelectorOption as PnCustomernumberSelectorOption } from '../types/components/profile/pn-customernumber-selector/pn-customernumber-selector-option';
+export { PnDateAndTime as PnDateAndTime } from '../types/components/input/pn-date-and-time/pn-date-and-time';
 export { PnFilterCheckbox as PnFilterCheckbox } from '../types/components/input/pn-filter-checkbox/pn-filter-checkbox';
 export { PnfindPrice as PnFindPrice } from '../types/components/widgets/pn-find-price/pn-find-price';
 export { PnfindPriceResult as PnFindPriceResult } from '../types/components/widgets/pn-find-price/pn-find-price-result';

package/components/index.js

@@ -8,6 +8,7 @@ export { PnChartsCard, defineCustomElement as defineCustomElementPnChartsCard }
 export { PnChoiceButton, defineCustomElement as defineCustomElementPnChoiceButton } from './pn-choice-button.js';
 export { PnCustomernumberSelector, defineCustomElement as defineCustomElementPnCustomernumberSelector } from './pn-customernumber-selector.js';
 export { PnCustomernumberSelectorOption, defineCustomElement as defineCustomElementPnCustomernumberSelectorOption } from './pn-customernumber-selector-option.js';
+export { PnDateAndTime, defineCustomElement as defineCustomElementPnDateAndTime } from './pn-date-and-time.js';
 export { PnFilterCheckbox, defineCustomElement as defineCustomElementPnFilterCheckbox } from './pn-filter-checkbox.js';
 export { PnFindPrice, defineCustomElement as defineCustomElementPnFindPrice } from './pn-find-price.js';
 export { PnFindPriceResult, defineCustomElement as defineCustomElementPnFindPriceResult } from './pn-find-price-result.js';

package/components/pn-date-and-time.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PnDateAndTime extends Components.PnDateAndTime, HTMLElement {}
+export const PnDateAndTime: {
+  prototype: PnDateAndTime;
+  new (): PnDateAndTime;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/pn-date-and-time.js

@@ -0,0 +1,186 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+
+const pnDateAndTimeCss = "pn-date-and-time label{color:#5E554A;font-size:1.4rem}pn-date-and-time .time-separator{margin:auto}pn-date-and-time .date-and-time-group{margin-bottom:1rem}pn-date-and-time .date-and-time-row{display:-ms-flexbox;display:flex;gap:1rem}pn-date-and-time .helper-text{margin-top:0.2rem;color:#5E554A;display:block}pn-date-and-time .error-message{color:#a70707}";
+
+const PnDateAndTime$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.dateandtimerange = createEvent(this, "dateandtimerange", 7);
+    this.pnDatePicker = null;
+    this.pnTimeFromHourDropdown = null;
+    this.pnTimeFromMinuteDropdown = null;
+    this.pnTimeToHourDropdown = null;
+    this.pnTimeToMinuteDropdown = null;
+    this.languageCode = null;
+    this.dateAndTimeLabel = '';
+    this.dateDaysFromToday = 0;
+    this.validTimeRangeMinutes = 0;
+    this.errorMessage = '';
+    this.dateHelperText = '';
+    this.timeHelperText = '';
+    this.disableWeekends = false;
+    this.datePlacehodler = '';
+    this.language = null;
+    this.hourArr = null;
+    this.minuteArr = null;
+    this.formValue = null;
+    this.invalidTimespan = false;
+    this.selectedDate = null;
+    this.selectedFromHour = null;
+    this.selectedFromMin = null;
+    this.selectedToHour = null;
+    this.selectedToMin = null;
+    this.firstValidDateString = '';
+    this.lastValidDateString = '';
+  }
+  componentWillLoad() {
+    this.setInitialValues();
+  }
+  componentDidLoad() {
+    this.setDefaultHiddenValue();
+    this.addEventHandlers();
+  }
+  async setInitialValues() {
+    this.setLangugaeCode();
+    this.setFirstValidDate();
+    this.hourArr = this.getNumbersAsStringArr(6, 22, 1);
+    this.minuteArr = this.getNumbersAsStringArr(0, 50, 10);
+  }
+  setFirstValidDate() {
+    var _a;
+    const date = new Date();
+    date.setDate((_a = date.getDate() + this.dateDaysFromToday) !== null && _a !== void 0 ? _a : 0);
+    const year = date.getFullYear();
+    const month = (date.getMonth() + 1).toString().padStart(2, '0');
+    const day = date.getDate().toString().padStart(2, '0');
+    const endYear = year + 2;
+    this.firstValidDateString = `${year.toString()}-${month}-${day}`;
+    this.lastValidDateString = `${endYear.toString()}-${month}-${day}`;
+  }
+  setLangugaeCode() {
+    if (typeof this.languageCode === 'string' && this.languageCode.trim() === '') {
+      this.language = document.querySelector('html').lang;
+    }
+    else {
+      this.language = this.languageCode;
+    }
+  }
+  setDefaultHiddenValue() {
+    this.selectedFromHour = parseInt(this.hourArr[8]);
+    this.selectedFromMin = 0;
+    this.selectedToHour = parseInt(this.hourArr[12]);
+    this.selectedToMin = 0;
+    this.updateHiddenValue();
+  }
+  addEventHandlers() {
+    this.pnDatePicker.addEventListener('dateselection', this.handleChange.bind(this));
+    this.pnTimeFromHourDropdown.addEventListener('selectchange', this.handleChange.bind(this));
+    this.pnTimeFromMinuteDropdown.addEventListener('selectchange', this.handleChange.bind(this));
+    this.pnTimeToHourDropdown.addEventListener('selectchange', this.handleChange.bind(this));
+    this.pnTimeToMinuteDropdown.addEventListener('selectchange', this.handleChange.bind(this));
+  }
+  handleChange(e) {
+    const target = e.target;
+    if (target === this.pnDatePicker) {
+      this.selectedDate = e.detail;
+    }
+    if (target === this.pnTimeFromHourDropdown || target === this.pnTimeFromMinuteDropdown || target === this.pnTimeToHourDropdown || target === this.pnTimeToMinuteDropdown) {
+      this.handleTimeChange();
+    }
+    this.updateHiddenValue();
+  }
+  handleTimeChange() {
+    var _a, _b, _c, _d;
+    const fromHourString = (_a = this.pnTimeFromHourDropdown.querySelector('.current-selection .pn-option-content')) === null || _a === void 0 ? void 0 : _a.textContent;
+    const fromMinString = (_b = this.pnTimeFromMinuteDropdown.querySelector('.current-selection .pn-option-content')) === null || _b === void 0 ? void 0 : _b.textContent;
+    const toHourString = (_c = this.pnTimeToHourDropdown.querySelector('.current-selection .pn-option-content')) === null || _c === void 0 ? void 0 : _c.textContent;
+    const toMinString = (_d = this.pnTimeToMinuteDropdown.querySelector('.current-selection .pn-option-content')) === null || _d === void 0 ? void 0 : _d.textContent;
+    this.selectedFromHour = parseInt(fromHourString);
+    this.selectedFromMin = parseInt(fromMinString);
+    this.selectedToHour = parseInt(toHourString);
+    this.selectedToMin = parseInt(toMinString);
+  }
+  updateHiddenValue() {
+    const date = new Date();
+    const dateFrom = new Date(date.getFullYear(), date.getMonth(), date.getDate(), this.selectedFromHour, this.selectedFromMin, 0, 0);
+    const dateTo = new Date(date.getFullYear(), date.getMonth(), date.getDate(), this.selectedToHour, this.selectedToMin, 0, 0);
+    this.validateTimeRange(dateFrom.getTime(), dateTo.getTime());
+    if (this.invalidTimespan || !this.selectedDate) {
+      this.formValue = '';
+    }
+    else {
+      const fromMin = this.selectedFromMin.toString().padStart(2, '0');
+      const toMin = this.selectedToMin.toString().padStart(2, '0');
+      this.formValue = `${this.selectedDate}, ${this.selectedFromHour}:${fromMin}-${this.selectedToHour}:${toMin}`;
+    }
+    this.dateandtimerange.emit(this.formValue);
+  }
+  validateTimeRange(from, to) {
+    let differenceValue = (to - from) / 1000;
+    differenceValue /= 60;
+    this.invalidTimespan = differenceValue < this.validTimeRangeMinutes ? true : false;
+  }
+  getNumbersAsStringArr(start, stop, step) {
+    const arr = Array.from({ length: (stop - start) / step + 1 }, (_, index) => start + index * step);
+    const result = [];
+    arr.forEach(item => {
+      const itemAsString = item.toString().padStart(2, '0');
+      result.push(itemAsString);
+    });
+    return result;
+  }
+  removePnOptionSelected() {
+    const selectOptions = this.hostElement.querySelectorAll('pn-option');
+    selectOptions.forEach(elm => {
+      elm.removeAttribute('selected');
+    });
+  }
+  render() {
+    var _a, _b, _c, _d;
+    return (h(Host, null, h("div", { class: "date-and-time-group" }, this.dateAndTimeLabel ? (h("div", { class: "date-and-time-row" }, h("label", null, this.dateAndTimeLabel))) : null, h("div", { class: "date-and-time-row" }, h("pn-date-picker", { ref: el => (this.pnDatePicker = el), range: "false", "disable-weekends": this.disableWeekends, "min-date": this.firstValidDateString, "max-date": this.lastValidDateString, language: this.language, placeholder: this.datePlacehodler })), this.dateHelperText ? h("small", { class: "date-and-time-row helper-text" }, this.dateHelperText) : null), h("div", { class: "date-and-time-group" }, h("div", { class: "date-and-time-row" }, h("pn-select", { ref: el => (this.pnTimeFromHourDropdown = el), name: "date-and-time-from-houre", placeholder: this.hourArr[8], class: "date-and-time-dropdown--time", invalid: this.invalidTimespan }, (_a = this.hourArr) === null || _a === void 0 ? void 0 : _a.map((hour) => (h("pn-option", null, hour)))), h("pn-select", { ref: el => (this.pnTimeFromMinuteDropdown = el), name: "date-and-time-from-minute", placeholder: this.minuteArr[0], class: "date-and-time-dropdown--time", invalid: this.invalidTimespan }, (_b = this.minuteArr) === null || _b === void 0 ? void 0 : _b.map((minute) => (h("pn-option", null, minute)))), h("div", { class: "time-separator" }, h("span", null, "-")), h("pn-select", { ref: el => (this.pnTimeToHourDropdown = el), name: "date-and-time-to-hour", placeholder: this.hourArr[12], class: "date-and-time-dropdown--time", invalid: this.invalidTimespan }, (_c = this.hourArr) === null || _c === void 0 ? void 0 : _c.map((hour) => (h("pn-option", null, hour)))), h("pn-select", { ref: el => (this.pnTimeToMinuteDropdown = el), name: "date-and-time-to-minute", placeholder: this.minuteArr[0], class: "date-and-time-dropdown--time", invalid: this.invalidTimespan }, (_d = this.minuteArr) === null || _d === void 0 ? void 0 : _d.map((minute) => (h("pn-option", null, minute))))), this.timeHelperText ? h("small", { class: "date-and-time-row helper-text" }, this.timeHelperText) : null, this.invalidTimespan && this.errorMessage ? (h("small", { class: "date-and-time-row error-message" }, h("pn-icon", { symbol: "alert-info-circle", small: "false", color: "warning" }), this.errorMessage)) : null)));
+  }
+  get hostElement() { return this; }
+  static get style() { return pnDateAndTimeCss; }
+}, [0, "pn-date-and-time", {
+    "languageCode": [1, "language-code"],
+    "dateAndTimeLabel": [1, "date-and-time-label"],
+    "dateDaysFromToday": [2, "date-days-from-today"],
+    "validTimeRangeMinutes": [2, "valid-time-range-minutes"],
+    "errorMessage": [1, "error-message"],
+    "dateHelperText": [1, "date-helper-text"],
+    "timeHelperText": [1, "time-helper-text"],
+    "disableWeekends": [4, "disable-weekends"],
+    "datePlacehodler": [1, "date-placehodler"],
+    "language": [32],
+    "hourArr": [32],
+    "minuteArr": [32],
+    "formValue": [32],
+    "invalidTimespan": [32],
+    "selectedDate": [32],
+    "selectedFromHour": [32],
+    "selectedFromMin": [32],
+    "selectedToHour": [32],
+    "selectedToMin": [32],
+    "firstValidDateString": [32],
+    "lastValidDateString": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-date-and-time"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-date-and-time":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PnDateAndTime$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const PnDateAndTime = PnDateAndTime$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnDateAndTime, defineCustomElement };

package/esm/{index-7f77b0ba.js → index-b71e0f8e.js}

@@ -1,4 +1,4 @@
-import { c as getRenderingRef, f as forceUpdate } from './index-c118284d.js';
+import { e as getRenderingRef, f as forceUpdate } from './index-ee44c065.js';
 
 const appendToMap = (map, propName, value) => {
     const items = map.get(propName);

package/esm/{index-c118284d.js → index-ee44c065.js}

@@ -2133,6 +2133,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './pn-customernumber-selector-option.entry.js').then(processMod, consoleError);
+        case 'pn-date-and-time':
+          return import(
+            /* webpackMode: "lazy" */
+            './pn-date-and-time.entry.js').then(processMod, consoleError);
         case 'pn-filter-checkbox':
           return import(
             /* webpackMode: "lazy" */
@@ -2411,4 +2415,4 @@ const flush = () => {
 const nextTick = /*@__PURE__*/ (cb) => promiseResolve().then(cb);
 const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
 
-export { H, NAMESPACE as N, Host as a, bootstrapLazy as b, getRenderingRef as c, doc as d, createEvent as e, forceUpdate as f, getElement as g, h, promiseResolve as p, registerInstance as r, setNonce as s, win as w };
+export { H, NAMESPACE as N, Host as a, bootstrapLazy as b, createEvent as c, doc as d, getRenderingRef as e, forceUpdate as f, getElement as g, h, promiseResolve as p, registerInstance as r, setNonce as s, win as w };