@paperless/core 2.0.1-beta.4 → 2.0.1-beta.41

package/dist/collection/components/molecules/datepicker/datepicker.component.js

@@ -1,609 +1,720 @@
 import { h, Host, } from "@stencil/core";
-import { format, isAfter, isBefore, isSameDay, isValid, parse, startOfDay, } from "date-fns";
-import { childOf } from "../../../utils";
+import { format, isAfter, isBefore, isSameDay, isValid, isWeekend, parse, startOfDay, startOfMonth, startOfYear, } from "date-fns";
+import { childOf, isMobileBrowser } from "../../../utils";
 export class Datepicker {
-  constructor() {
-    this._defaultFormats = {
-      year: 'yyyy',
-      month: 'LLLL, yyyy',
-      day: 'dd-MM-yyyy',
-    };
-    this.placeholder = undefined;
-    this.value = undefined;
-    this.preselectToday = false;
-    this.disabledDates = undefined;
-    this.minDate = undefined;
-    this.maxDate = undefined;
-    this.disableWeekends = false;
-    this.mode = 'day';
-    this.format = 'dd-MM-yyyy';
-    this.hideIconWhenFilled = false;
-    this.size = 'medium';
-    this.prefix = undefined;
-    this.label = undefined;
-    this.helper = undefined;
-    this.required = undefined;
-    this.error = undefined;
-    this.disabled = false;
-    this.strategy = 'absolute';
-    this.placement = 'bottom-start';
-    this._showDropdown = false;
-    this._value = undefined;
-    this._minDate = undefined;
-    this._maxDate = undefined;
-    this._disabledDates = [];
-  }
-  parseValue(value) {
-    if (!value && this.preselectToday) {
-      value = new Date();
-    }
-    if (typeof value === 'string') {
-      value = new Date(value);
-    }
-    this._setValue(value);
-  }
-  parseMinDate(minDate) {
-    if (typeof minDate === 'string') {
-      minDate = new Date(minDate);
+    constructor() {
+        this.placeholder = undefined;
+        this.value = undefined;
+        this.preselectToday = false;
+        this.enableNativePicker = true;
+        this.disabledDates = undefined;
+        this.minDate = undefined;
+        this.maxDate = undefined;
+        this.disableWeekends = false;
+        this.mode = 'day';
+        this.format = 'dd-MM-yyyy';
+        this.hideIconWhenFilled = false;
+        this.size = 'base';
+        this.prefix = undefined;
+        this.label = undefined;
+        this.helper = undefined;
+        this.required = undefined;
+        this.error = undefined;
+        this.disabled = false;
+        this.strategy = 'absolute';
+        this.placement = 'bottom-start';
+        this._showDropdown = false;
+        this._value = undefined;
+        this._minDate = undefined;
+        this._maxDate = undefined;
+        this._disabledDates = [];
+        this._isMobileBrowser = false;
     }
-    if (!isValid(minDate)) {
-      return;
-    }
-    this._minDate = minDate;
-    if (isBefore(this._value, this._minDate)) {
-      this._setValue(null);
+    /**
+     * Event when the value changes
+     */
+    valueChange;
+    /**
+     * The host element
+     */
+    _el;
+    _onInputTimeout;
+    _inputRef;
+    _dateInputRef;
+    _defaultFormats = {
+        year: 'yyyy',
+        month: 'LLLL, yyyy',
+        day: 'dd-MM-yyyy',
+    };
+    parseValue(value) {
+        if (!value && this.preselectToday) {
+            value = new Date();
+        }
+        if (typeof value === 'string') {
+            value = new Date(value);
+        }
+        this._setValue(value);
     }
-  }
-  parseMaxDate(maxDate) {
-    if (typeof maxDate === 'string') {
-      maxDate = new Date(maxDate);
+    parseMinDate(minDate) {
+        if (typeof minDate === 'string') {
+            minDate = new Date(minDate);
+        }
+        if (!isValid(minDate)) {
+            return;
+        }
+        this._minDate = minDate;
+        if (isBefore(this._value, this._minDate)) {
+            this._setValue(null);
+        }
     }
-    if (!isValid(maxDate)) {
-      return;
+    parseMaxDate(maxDate) {
+        if (typeof maxDate === 'string') {
+            maxDate = new Date(maxDate);
+        }
+        if (!isValid(maxDate)) {
+            return;
+        }
+        this._maxDate = maxDate;
+        if (isAfter(this._value, this._maxDate)) {
+            this._setValue(null);
+        }
     }
-    this._maxDate = maxDate;
-    if (isAfter(this._value, this._maxDate)) {
-      this._setValue(null);
+    parseDisabledDates(disabledDates) {
+        if (typeof disabledDates === 'string') {
+            disabledDates = JSON.parse(disabledDates);
+        }
+        if (!disabledDates || !Array.isArray(disabledDates)) {
+            return;
+        }
+        // normalize all to date
+        this._disabledDates = disabledDates
+            .map(date => {
+            if (typeof date === 'string') {
+                return new Date(date);
+            }
+            return date;
+        })
+            .filter(date => isValid(date));
+        if (this._isDisabledDay(this._value)) {
+            this._setValue(null);
+        }
     }
-  }
-  parseDisabledDates(disabledDates) {
-    if (typeof disabledDates === 'string') {
-      disabledDates = JSON.parse(disabledDates);
+    componentWillLoad() {
+        if (this.disabledDates) {
+            this.parseDisabledDates(this.disabledDates);
+        }
+        if (this.minDate) {
+            this.parseMinDate(this.minDate);
+        }
+        if (this.maxDate) {
+            this.parseMaxDate(this.maxDate);
+        }
+        if (this.mode !== 'day' && this.format === this._defaultFormats['day']) {
+            this.format = this._defaultFormats[this.mode];
+        }
+        this._isMobileBrowser = isMobileBrowser();
+        this.parseValue(this.value);
     }
-    if (!disabledDates || !Array.isArray(disabledDates)) {
-      return;
+    render() {
+        return (h(Host, { key: '859b876921f336859ff7e95b5c78517c74d795f7', class: 'p-datepicker' }, h("p-dropdown", { key: '4f89918eee02180a5a5e75618c01949c37259a01', strategy: this.strategy, placement: this.placement, disableTriggerClick: true, applyMaxWidth: false, applyFullWidth: false, insideClick: true, show: this._showDropdown }, h("p-field", { key: '70bac67fc5253c58b8a9ea85458decc98680c789', slot: 'trigger', icon: this.hideIconWhenFilled && !!this._value ? null : 'calendar-multi', iconPosition: 'start', size: this.size, prefix: this.prefix, label: this.label, helper: this.helper, required: this.required, error: this.error, disabled: this.disabled, focused: this._showDropdown, value: this._getFormattedDate(), placeholder: this.placeholder, onFocus: () => this._onFocus(), onBlur: () => this._onBlur(), onValueChange: ev => this._onValueChange(ev.detail), onInputRefChange: ev => (this._inputRef = ev.detail) }), this.enableNativePicker && this._isMobileBrowser && (h("input", { key: 'fbb07a9c49a08e16c741839eab8020ab7b520d7d', slot: 'trigger', type: this.mode === 'day' ? 'date' : 'month', class: 'h-0 overflow-hidden' // we use h-0 here so location dependent pickers can correctly place itself
+            ,
+            onInput: ev => this._onNativeInput(ev), ref: ref => (this._dateInputRef = ref), value: this._value && format(this._value, 'yyyy-MM-dd'), min: this.minDate && format(new Date(this.minDate), 'yyyy-MM-dd'), max: this.maxDate && format(new Date(this.maxDate), 'yyyy-MM-dd') })), h("div", { key: '932e4d12ff014bd5c87fcf4eabf2f4a8ca8d7855', slot: 'items' }, h("p-calendar", { key: '54e2aecf8ec972795cbba708075e26561b7b4ea5', variant: 'embedded', value: this._value, onValueChange: ({ detail }) => (this.value = detail), preselectToday: this.preselectToday, disabledDates: this.disabledDates, minDate: this.minDate, maxDate: this.maxDate, disableWeekends: this.disableWeekends, mode: this.mode })))));
     }
-    // normalize all to date
-    this._disabledDates = disabledDates
-      .map(date => {
-      if (typeof date === 'string') {
-        return new Date(date);
-      }
-      return date;
-    })
-      .filter(date => isValid(date));
-    if (this._isDisabledDay(this._value)) {
-      this._setValue(null);
+    documentClickHandler({ target }) {
+        if (!this._showDropdown || childOf(target, this._el)) {
+            return;
+        }
+        this._showDropdown = false;
     }
-  }
-  componentWillLoad() {
-    if (this.disabledDates) {
-      this.parseDisabledDates(this.disabledDates);
+    _onFocus() {
+        if (this._isMobileBrowser && this._dateInputRef) {
+            this._dateInputRef.showPicker();
+            this._inputRef.blur();
+            return;
+        }
+        this._showDropdown = true;
     }
-    if (this.minDate) {
-      this.parseMinDate(this.minDate);
+    _onBlur() {
+        if (this._isMobileBrowser && this._dateInputRef) {
+            return;
+        }
+        const target = this._inputRef;
+        if (target.value === null) {
+            return;
+        }
+        const value = parse(target.value, this.format, new Date());
+        if (value === this._value) {
+            return;
+        }
+        if (!isValid(value) || this._isDisabledDay(value)) {
+            target.value = this._getFormattedDate();
+            return;
+        }
+        this._setValue(value, false);
     }
-    if (this.maxDate) {
-      this.parseMaxDate(this.maxDate);
+    _onValueChange(value) {
+        if (this._onInputTimeout) {
+            clearTimeout(this._onInputTimeout);
+            this._onInputTimeout = null;
+        }
+        this._onInputTimeout = setTimeout(() => {
+            const parsedValue = parse(value, this.format, new Date());
+            if (!isValid(parsedValue)) {
+                return;
+            }
+            this._setValue(parsedValue, false);
+        }, 300);
     }
-    if (this.mode !== 'day' && this.format === this._defaultFormats['day']) {
-      this.format = this._defaultFormats[this.mode];
+    _onNativeInput(ev) {
+        if (!ev.target) {
+            return;
+        }
+        if (this._onInputTimeout) {
+            clearTimeout(this._onInputTimeout);
+            this._onInputTimeout = null;
+        }
+        this._onInputTimeout = setTimeout(() => {
+            this._setValue(ev.target.value === '' ? null : new Date(ev.target.value), false);
+        });
     }
-    this.parseValue(this.value);
-  }
-  render() {
-    return (h(Host, { class: 'p-datepicker' }, h("p-dropdown", { strategy: this.strategy, placement: this.placement, disableTriggerClick: true, applyMaxWidth: false, applyFullWidth: false, insideClick: true, show: this._showDropdown }, h("p-input-group", { slot: 'trigger', icon: this.hideIconWhenFilled && !!this._value ? null : 'calendar', iconPosition: 'start', size: this.size, prefix: this.prefix, label: this.label, helper: this.helper, required: this.required, error: this.error, disabled: this.disabled, focused: this._showDropdown }, h("input", { slot: 'input', type: 'text', placeholder: this.placeholder, value: this._getFormattedDate(), class: 'p-input cursor-pointer', onFocus: () => this._onFocus(), onBlur: ev => this._onBlur(ev), onInput: ev => this._onInput(ev) })), h("div", { slot: 'items' }, h("p-calendar", { variant: 'embedded', value: this._value, onValueChange: ({ detail }) => (this.value = detail), preselectToday: this.preselectToday, disabledDates: this.disabledDates, minDate: this.minDate, maxDate: this.maxDate, disableWeekends: this.disableWeekends, mode: this.mode })))));
-  }
-  documentClickHandler({ target }) {
-    if (!this._showDropdown || childOf(target, this._el)) {
-      return;
+    _setValue(value, hideDropdown = true) {
+        if (value === null) {
+            this._value = null;
+            this.valueChange.emit(null);
+            return;
+        }
+        if (!isValid(value)) {
+            return;
+        }
+        if (this._isDisabledDay(value)) {
+            if (!!this._dateInputRef?.value) {
+                this._dateInputRef.value = this._value
+                    ? format(this._value, 'yyyy-MM-dd')
+                    : null;
+            }
+            return;
+        }
+        value =
+            this.mode === 'day'
+                ? startOfDay(value)
+                : this.mode === 'month'
+                    ? startOfMonth(value)
+                    : startOfYear(value);
+        const isSameValue = isSameDay(value, this._value);
+        if (isSameValue) {
+            return;
+        }
+        if (hideDropdown) {
+            this._showDropdown = false;
+        }
+        this._value = value;
+        this.valueChange.emit(value);
     }
-    this._showDropdown = false;
-  }
-  _onFocus() {
-    this._showDropdown = true;
-  }
-  _onBlur(ev) {
-    if (ev.target.value === null) {
-      return;
+    _isDisabledDay(day) {
+        return ((this.disableWeekends && isWeekend(day)) ||
+            (isBefore(day, this._minDate) && !isSameDay(day, this._minDate)) ||
+            (isAfter(day, this._maxDate) && !isSameDay(day, this._maxDate)) ||
+            this._disabledDates.findIndex(date => isSameDay(date, day)) >= 0);
     }
-    const value = parse(ev.target.value, this.format, new Date());
-    if (!isValid(value) || this._isDisabledDay(value)) {
-      ev.target.value = this._getFormattedDate();
-      return;
+    _getFormattedDate() {
+        if (!this._value) {
+            return '';
+        }
+        return format(this._value, this.format);
     }
-  }
-  _onInput(ev) {
-    if (this._onInputTimeout) {
-      clearTimeout(this._onInputTimeout);
-      this._onInputTimeout = null;
+    static get is() { return "p-datepicker"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["datepicker.component.css"]
+        };
     }
-    this._onInputTimeout = setTimeout(() => {
-      const value = parse(ev.target.value, this.format, new Date());
-      if (!isValid(value)) {
-        return;
-      }
-      this._setValue(value, false);
-    }, 250);
-  }
-  _setValue(value, hideDropdown = true) {
-    if (value === null) {
-      this._value = null;
-      this.valueChange.emit(null);
-      return;
+    static get styleUrls() {
+        return {
+            "$": ["datepicker.component.css"]
+        };
     }
-    if (!isValid(value)) {
-      return;
+    static get properties() {
+        return {
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The placeholder of the input"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "placeholder",
+                "reflect": false
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Date | string | null | undefined",
+                    "resolved": "Date | string",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The current value"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "value",
+                "reflect": false
+            },
+            "preselectToday": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Wethter to automatically preselect today"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "preselect-today",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "enableNativePicker": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable native picker for mobile devices"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "enable-native-picker",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "disabledDates": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Array<Date | string> | string",
+                    "resolved": "(string | Date)[] | string",
+                    "references": {
+                        "Array": {
+                            "location": "global",
+                            "id": "global::Array"
+                        },
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Disabled dates"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled-dates",
+                "reflect": false
+            },
+            "minDate": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Date | string",
+                    "resolved": "Date | string",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Min date"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "min-date",
+                "reflect": false
+            },
+            "maxDate": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Date | string",
+                    "resolved": "Date | string",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Max date"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "max-date",
+                "reflect": false
+            },
+            "disableWeekends": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Wether to disable the weekends"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disable-weekends",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "mode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'year' | 'month' | 'day'",
+                    "resolved": "\"day\" | \"month\" | \"year\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The mode of the datepicker"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "mode",
+                "reflect": false,
+                "defaultValue": "'day'"
+            },
+            "format": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The display & parse format to use"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "format",
+                "reflect": false,
+                "defaultValue": "'dd-MM-yyyy'"
+            },
+            "hideIconWhenFilled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hides the icon when filled"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "hide-icon-when-filled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'sm' | 'base'",
+                    "resolved": "\"base\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the input group used by the datepicker"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'base'"
+            },
+            "prefix": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The prefix of the input group used by the datepicker"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "prefix",
+                "reflect": false
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The label of the input group used by the datepicker"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label",
+                "reflect": false
+            },
+            "helper": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The helper of the input group used by the datepicker"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "helper",
+                "reflect": false
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Wether the field is required"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "required",
+                "reflect": true
+            },
+            "error": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The helper of the input group used by the datepicker"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "error",
+                "reflect": true
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Wether the input group is disabled used by the datepicker"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "strategy": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Strategy",
+                    "resolved": "\"absolute\" | \"fixed\"",
+                    "references": {
+                        "Strategy": {
+                            "location": "import",
+                            "path": "@floating-ui/dom",
+                            "id": "../../node_modules/@floating-ui/dom/dist/floating-ui.dom.d.ts::Strategy"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The strategy of the dropdown placement"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "strategy",
+                "reflect": false,
+                "defaultValue": "'absolute'"
+            },
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Placement",
+                    "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+                    "references": {
+                        "Placement": {
+                            "location": "import",
+                            "path": "@floating-ui/dom",
+                            "id": "../../node_modules/@floating-ui/dom/dist/floating-ui.dom.d.ts::Placement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The placement of the dropdown"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "placement",
+                "reflect": true,
+                "defaultValue": "'bottom-start'"
+            }
+        };
     }
-    if (this._isDisabledDay(value)) {
-      return;
+    static get states() {
+        return {
+            "_showDropdown": {},
+            "_value": {},
+            "_minDate": {},
+            "_maxDate": {},
+            "_disabledDates": {},
+            "_isMobileBrowser": {}
+        };
     }
-    value = startOfDay(value);
-    const isSameValue = isSameDay(value, this._value);
-    if (isSameValue) {
-      return;
+    static get events() {
+        return [{
+                "method": "valueChange",
+                "name": "valueChange",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event when the value changes"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
     }
-    if (hideDropdown) {
-      this._showDropdown = false;
+    static get elementRef() { return "_el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "parseValue"
+            }, {
+                "propName": "minDate",
+                "methodName": "parseMinDate"
+            }, {
+                "propName": "maxDate",
+                "methodName": "parseMaxDate"
+            }, {
+                "propName": "disabledDates",
+                "methodName": "parseDisabledDates"
+            }];
     }
-    this._value = value;
-    this.valueChange.emit(value);
-  }
-  _isDisabledDay(day) {
-    return ((isBefore(day, this._minDate) && !isSameDay(day, this._minDate)) ||
-      (isAfter(day, this._maxDate) && !isSameDay(day, this._maxDate)) ||
-      this._disabledDates.findIndex(date => isSameDay(date, day)) >= 0);
-  }
-  _getFormattedDate() {
-    if (!this._value) {
-      return '';
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "documentClickHandler",
+                "target": "document",
+                "capture": true,
+                "passive": false
+            }];
     }
-    return format(this._value, this.format);
-  }
-  static get is() { return "p-datepicker"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["datepicker.component.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["datepicker.component.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "placeholder": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The placeholder of the input"
-        },
-        "attribute": "placeholder",
-        "reflect": false
-      },
-      "value": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "Date | string | null | undefined",
-          "resolved": "Date | string",
-          "references": {
-            "Date": {
-              "location": "global",
-              "id": "global::Date"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The current value"
-        },
-        "attribute": "value",
-        "reflect": false
-      },
-      "preselectToday": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Wethter to automatically preselect today"
-        },
-        "attribute": "preselect-today",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "disabledDates": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "Array<Date | string> | string",
-          "resolved": "(string | Date)[] | string",
-          "references": {
-            "Array": {
-              "location": "global",
-              "id": "global::Array"
-            },
-            "Date": {
-              "location": "global",
-              "id": "global::Date"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Disabled dates"
-        },
-        "attribute": "disabled-dates",
-        "reflect": false
-      },
-      "minDate": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "Date | string",
-          "resolved": "Date | string",
-          "references": {
-            "Date": {
-              "location": "global",
-              "id": "global::Date"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Min date"
-        },
-        "attribute": "min-date",
-        "reflect": false
-      },
-      "maxDate": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "Date | string",
-          "resolved": "Date | string",
-          "references": {
-            "Date": {
-              "location": "global",
-              "id": "global::Date"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Max date"
-        },
-        "attribute": "max-date",
-        "reflect": false
-      },
-      "disableWeekends": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Wether to disable the weekends"
-        },
-        "attribute": "disable-weekends",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "mode": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'year' | 'month' | 'day'",
-          "resolved": "\"day\" | \"month\" | \"year\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The mode of the datepicker"
-        },
-        "attribute": "mode",
-        "reflect": false,
-        "defaultValue": "'day'"
-      },
-      "format": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The display & parse format to use"
-        },
-        "attribute": "format",
-        "reflect": false,
-        "defaultValue": "'dd-MM-yyyy'"
-      },
-      "hideIconWhenFilled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Hides the icon when filled"
-        },
-        "attribute": "hide-icon-when-filled",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'small' | 'medium'",
-          "resolved": "\"medium\" | \"small\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The size of the input group used by the datepicker"
-        },
-        "attribute": "size",
-        "reflect": false,
-        "defaultValue": "'medium'"
-      },
-      "prefix": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The prefix of the input group used by the datepicker"
-        },
-        "attribute": "prefix",
-        "reflect": false
-      },
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The label of the input group used by the datepicker"
-        },
-        "attribute": "label",
-        "reflect": false
-      },
-      "helper": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The helper of the input group used by the datepicker"
-        },
-        "attribute": "helper",
-        "reflect": false
-      },
-      "required": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Wether the field is required"
-        },
-        "attribute": "required",
-        "reflect": true
-      },
-      "error": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The helper of the input group used by the datepicker"
-        },
-        "attribute": "error",
-        "reflect": true
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Wether the input group is disabled used by the datepicker"
-        },
-        "attribute": "disabled",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "strategy": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "Strategy",
-          "resolved": "\"absolute\" | \"fixed\"",
-          "references": {
-            "Strategy": {
-              "location": "import",
-              "path": "@floating-ui/dom",
-              "id": "../../node_modules/@floating-ui/dom/index.d.ts::Strategy"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The strategy of the dropdown placement"
-        },
-        "attribute": "strategy",
-        "reflect": false,
-        "defaultValue": "'absolute'"
-      },
-      "placement": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "Placement",
-          "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
-          "references": {
-            "Placement": {
-              "location": "import",
-              "path": "@floating-ui/dom",
-              "id": "../../node_modules/@floating-ui/dom/index.d.ts::Placement"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The placement of the dropdown"
-        },
-        "attribute": "placement",
-        "reflect": true,
-        "defaultValue": "'bottom-start'"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "_showDropdown": {},
-      "_value": {},
-      "_minDate": {},
-      "_maxDate": {},
-      "_disabledDates": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "valueChange",
-        "name": "valueChange",
-        "bubbles": false,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event when the value changes"
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }];
-  }
-  static get elementRef() { return "_el"; }
-  static get watchers() {
-    return [{
-        "propName": "value",
-        "methodName": "parseValue"
-      }, {
-        "propName": "minDate",
-        "methodName": "parseMinDate"
-      }, {
-        "propName": "maxDate",
-        "methodName": "parseMaxDate"
-      }, {
-        "propName": "disabledDates",
-        "methodName": "parseDisabledDates"
-      }];
-  }
-  static get listeners() {
-    return [{
-        "name": "click",
-        "method": "documentClickHandler",
-        "target": "document",
-        "capture": true,
-        "passive": false
-      }];
-  }
 }
 //# sourceMappingURL=datepicker.component.js.map