@six-group/ui-library 0.0.0-insider.d833923 → 0.0.0-insider.d89f9dc

package/dist/components/six-datepicker.js

@@ -1,18 +1,19 @@
-import { h, proxyCustomElement, HTMLElement, createEvent } from '@stencil/core/internal/client';
-import { E as EventListeners } from './event-listeners.js';
-import { D as DEFAULT_DEBOUNCE_FAST, d as debounceEvent, a as debounce } from './execution-control.js';
-import { h as hasSlot } from './slot.js';
-import { m as movePopup, c as calcIsDropDownContentUp, a as adjustPopupForHoisting, b as adjustPopupForSmallScreens, d as defineCustomElement$2 } from './six-timepicker2.js';
-import { d as defineCustomElement$6 } from './six-error2.js';
-import { d as defineCustomElement$5 } from './six-icon2.js';
-import { d as defineCustomElement$4 } from './six-input2.js';
-import { d as defineCustomElement$3 } from './six-item-picker2.js';
+import { h, p as proxyCustomElement, H, c as createEvent } from './p-Cy1zyYSA.js';
+import { E as EventListeners } from './p-C4h4qpGl.js';
+import { D as DEFAULT_DEBOUNCE_FAST, a as debounceEvent, d as debounce } from './p-ltzGzaAu.js';
+import { h as hasSlot } from './p-j3oIB5oT.js';
+import { m as movePopup, c as calcIsDropDownContentUp, a as adjustPopupForHoisting, b as adjustPopupForSmallScreens, d as defineCustomElement$2 } from './p-AIpSwpED.js';
+import { d as defineCustomElement$6 } from './p-Ca6q_xWY.js';
+import { d as defineCustomElement$5 } from './p-CUHXUlFv.js';
+import { d as defineCustomElement$4 } from './p-DDGLl92O.js';
+import { d as defineCustomElement$3 } from './p-ChuJoONk.js';
 
 const isString = (value) => typeof value === 'string';
 // only use '==' instead of '===' to also catch undefined and void
 const isNil = (value) => value == null;
 
 /* eslint-disable */
+// @ts-nocheck
 const i18nDate = {
     en: {
         months: [
@@ -607,8 +608,7 @@ const YearSelection = (yearSelectionParams) => {
         })))))));
 };
 
-const sixDatepickerCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:block;font-family:var(--six-font-family)}.datepicker__container{position:relative}.datepicker__popup{min-width:400px;background-color:white;padding:0.5em 0.5em 1.5em;box-shadow:0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);user-select:none;position:absolute;z-index:var(--six-z-index-dropdown);right:0;left:0}.datepicker__popup--is-up{bottom:100%;min-height:382px}.datepicker__popup--is-inline{position:initial;box-shadow:none;border:1px solid var(--six-color-web-rock-400)}.datepicker-header{display:flex;justify-content:space-between;border-bottom:1px solid var(--six-color-web-rock-400);padding:0.5em;margin-bottom:1em}.datepicker-header svg{fill:var(--six-color-web-rock-900);stroke:none}.datepicker-header__btn{cursor:pointer;width:2.5em;height:2.5em;display:flex;vertical-align:middle;align-items:center;justify-content:center}.datepicker-header__btn:hover{background-color:var(--six-color-web-rock-100);border-radius:100%}.datepicker-header__label{display:flex}.datepicker-header__label>div{cursor:pointer;padding:0.5em;display:flex;vertical-align:middle;align-items:center;justify-content:center}.datepicker-header__label>div:hover{background-color:var(--six-color-web-rock-100)}.datepicker-table{width:100%}.datepicker-table__cell{text-align:center;width:2.5rem;height:2.5rem;cursor:pointer}.datepicker-table__cell:hover{background-color:var(--six-color-web-rock-100)}.datepicker-table__cell--is-today{border:1px solid var(--six-color-web-rock-400)}.datepicker-table__cell--is-selected{background-color:var(--six-color-red);color:var(--six-color-white)}.datepicker-table__cell--is-disabled{background-color:var(--six-color-web-rock-200);cursor:initial}.datepicker-table__cell--is-disabled:hover{background-color:var(--six-color-web-rock-200)}.datepicker-table__cell--is-outdated{color:var(--six-color-web-rock-400)}.datepicker-clear{display:inline-flex;align-items:center;font-size:inherit;color:var(--six-input-icon-color);border:none;background:none;padding:0;transition:var(--six-transition-fast) color;cursor:pointer}.datepicker-clear:hover{color:var(--six-input-icon-color-hover)}.datepicker-clear:focus{outline:none}.datepicker-clear--right{right:0;position:absolute}.datepicker-clear--left{right:35px;position:absolute}.input--empty .datepicker-clear{visibility:hidden}.prefix{cursor:pointer}.prefix--right{right:0;display:inline-flex;position:absolute;font-size:inherit;color:var(--six-input-icon-color);border:none;background:none;margin-right:var(--six-input-spacing-medium);transition:var(--six-transition-fast) color}six-timepicker::part(popup){border:none;padding:0.5em 0.5em 0;min-height:0}";
-const SixDatepickerStyle0 = sixDatepickerCss;
+const sixDatepickerCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host{display:block;font-family:var(--six-font-family)}.datepicker__container{position:relative}.datepicker__popup{min-width:400px;background-color:white;padding:0.5em 0.5em 1.5em;box-shadow:0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);user-select:none;position:absolute;z-index:var(--six-z-index-dropdown);right:0;left:0}.datepicker__popup--is-up{bottom:100%;min-height:382px}.datepicker__popup--is-inline{position:initial;box-shadow:none;border:1px solid var(--six-color-web-rock-400)}.datepicker-header{display:flex;justify-content:space-between;border-bottom:1px solid var(--six-color-web-rock-400);padding:0.5em;margin-bottom:1em}.datepicker-header svg{fill:var(--six-color-web-rock-900);stroke:none}.datepicker-header__btn{cursor:pointer;width:2.5em;height:2.5em;display:flex;vertical-align:middle;align-items:center;justify-content:center}.datepicker-header__btn:hover{background-color:var(--six-color-web-rock-100);border-radius:100%}.datepicker-header__label{display:flex}.datepicker-header__label>div{cursor:pointer;padding:0.5em;display:flex;vertical-align:middle;align-items:center;justify-content:center}.datepicker-header__label>div:hover{background-color:var(--six-color-web-rock-100)}.datepicker-table{width:100%}.datepicker-table__cell{text-align:center;width:2.5rem;height:2.5rem;cursor:pointer}.datepicker-table__cell:hover{background-color:var(--six-color-web-rock-100)}.datepicker-table__cell--is-today{border:1px solid var(--six-color-web-rock-400)}.datepicker-table__cell--is-selected{background-color:var(--six-color-red);color:var(--six-color-white)}.datepicker-table__cell--is-disabled{background-color:var(--six-color-web-rock-200);cursor:initial}.datepicker-table__cell--is-disabled:hover{background-color:var(--six-color-web-rock-200)}.datepicker-table__cell--is-outdated{color:var(--six-color-web-rock-400)}.datepicker-clear{display:inline-flex;align-items:center;font-size:inherit;color:var(--six-input-icon-color);border:none;background:none;padding:0;transition:var(--six-transition-fast) color;cursor:pointer}.datepicker-clear:hover{color:var(--six-input-icon-color-hover)}.datepicker-clear:focus{outline:none}.datepicker-clear--right{right:0;position:absolute}.datepicker-clear--left{right:35px;position:absolute}.input--empty .datepicker-clear{visibility:hidden}.prefix{cursor:pointer}.prefix--right{right:0;display:inline-flex;position:absolute;font-size:inherit;color:var(--six-input-icon-color);border:none;background:none;margin-right:var(--six-input-spacing-medium);transition:var(--six-transition-fast) color}six-timepicker::part(popup){border:none;padding:0.5em 0.5em 0;min-height:0}";
 
 const NUMBER_OF_YEARS_SHOWN = 25;
 const MIN_POPUP_HEIGHT = 400;
@@ -618,15 +618,89 @@ var SelectionMode;
     SelectionMode["MONTH"] = "month";
     SelectionMode["YEAR"] = "year";
 })(SelectionMode || (SelectionMode = {}));
-const SixDatepicker$1 = /*@__PURE__*/ proxyCustomElement(class SixDatepicker extends HTMLElement {
+const SixDatepicker$1 = /*@__PURE__*/ proxyCustomElement(class SixDatepicker extends H {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.sixSelect = createEvent(this, "six-datepicker-select", 7);
-        this.sixClear = createEvent(this, "six-datepicker-clear", 7);
-        this.sixBlur = createEvent(this, "six-datepicker-blur", 7);
+        this.sixSelect = createEvent(this, "six-datepicker-select");
+        this.sixClear = createEvent(this, "six-datepicker-clear");
+        this.sixBlur = createEvent(this, "six-datepicker-blur");
         this.eventListeners = new EventListeners();
+        this.pointerDate = SixDatepicker.getCurrentDateAsPointer();
+        this.selectionMode = SelectionMode.DAY;
+        this.isDropDownContentUp = false;
+        /**
+         * Set the type.
+         */
+        this.type = 'date';
+        /**
+         * The language used to render the weekdays and months.
+         */
+        this.locale = 'en';
+        /** Indicates whether or not the calendar dropdown is open on startup. You can use this in lieu of the show/hide methods. */
+        this.open = false;
+        /** Indicates whether or not the calendar should be shown as an inline (always open) component */
+        this.inline = false;
+        /**
+         * If `true` the user can only select a date via the component in the popup, but not directly edit the input field.
+         */
+        this.readonly = false;
+        /**
+         * If `true` the component is disabled.
+         */
+        this.disabled = false;
+        /**
+         * Callback to determine which date in the datepicker should be selectable.
+         * the callback function will get a datestring as an argument, e.g. '2021-07-04'
+         *
+         * Usage e.g.:
+         * const datepicker = document.getElementById('allowed-date-picker');
+         * datepicker.allowedDates = datestring => parseInt(datestring.split('-')[2], 10) % 2 === 0;
+         */
+        this.allowedDates = () => true;
+        /**
+         * Closes the datepicker dropdown after selection
+         */
+        this.closeOnSelect = this.type === 'date';
+        /** Datepicker size. */
+        this.size = 'medium';
+        /** Set to true to show an asterisk beneath the label. */
+        this.required = false;
+        /** The label text. */
+        this.label = '';
+        /** The error message shown, if `invalid` is set to true.  */
+        this.errorText = '';
+        /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */
+        this.invalid = false;
+        /** Define the dateFormat. Valid formats are:
+         * 'dd.mm.yyyy'
+         * 'yyyy-mm-dd'
+         * 'dd-mm-yyyy'
+         * 'dd/mm/yyyy'
+         * 'yyyy/mm/dd'
+         * 'dd.mm.yy'
+         * 'yy-mm-dd'
+         * 'dd-mm-yy'
+         * 'dd/mm/yy'
+         * 'yy/mm/dd'
+         * */
+        this.dateFormat = SixDateFormats.DDMMYYY_DOT;
+        /**
+         * Set the amount of time, in milliseconds, to wait to trigger the `dateChange` event after each keystroke.
+         */
+        this.debounce = DEFAULT_DEBOUNCE_FAST;
+        /** The input's name attribute. */
+        this.name = '';
+        /** Set to true to add a clear button when the input is populated. */
+        this.clearable = false;
+        /** Set the position of the icon */
+        this.iconPosition = 'left';
+        /**
+         * Enable this option to prevent the panel from being clipped when the component is placed inside a container with
+         * `overflow: auto|scroll`.
+         */
+        this.hoist = false;
         this.previousUnit = () => {
             if (this.selectionMode === SelectionMode.DAY) {
                 this.previousMonth();
@@ -733,52 +807,24 @@ const SixDatepicker$1 = /*@__PURE__*/ proxyCustomElement(class SixDatepicker ext
             }
         };
         this.handleOnBlur = (event) => {
-            var _a, _b;
+            var _a, _b, _c;
+            event.stopPropagation();
             // clear the value if the user deleted the date
             if (((_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.value) === '' && isValidDate(this.value)) {
                 this.value = undefined;
                 this.sixSelect.emit(this.value);
             }
-            event.stopPropagation();
-            const inputValue = (_b = this.inputElement) === null || _b === void 0 ? void 0 : _b.value;
-            const inputValueDate = toDate(inputValue, this.dateFormat);
-            const formattedDate = formatDate(this.value, this.dateFormat);
-            if (this.inputElement != null && inputValueDate != null && inputValue !== formattedDate) {
-                // properly format date if necessary
-                this.inputElement.value = formattedDate;
+            const currentDate = toDate((_b = this.inputElement) === null || _b === void 0 ? void 0 : _b.value, this.dateFormat);
+            if (isValidDate(currentDate) && ((_c = this.value) === null || _c === void 0 ? void 0 : _c.getTime()) !== (currentDate === null || currentDate === void 0 ? void 0 : currentDate.getTime())) {
+                // Set the value if the input field's value has changed. This can happen if the blur occurs
+                // before the change event had a chance to fire due to its debouncing.
+                this.value = currentDate;
+            }
+            if (this.inputElement != null) {
+                this.inputElement.value = formatDate(this.value, this.dateFormat);
             }
             this.sixBlur.emit(this.value);
         };
-        this.pointerDate = SixDatepicker.getCurrentDateAsPointer();
-        this.selectionMode = SelectionMode.DAY;
-        this.isDropDownContentUp = false;
-        this.type = 'date';
-        this.locale = 'en';
-        this.open = false;
-        this.inline = false;
-        this.readonly = false;
-        this.disabled = false;
-        this.allowedDates = () => true;
-        this.min = undefined;
-        this.max = undefined;
-        this.closeOnSelect = this.type === 'date';
-        this.placement = undefined;
-        this.size = 'medium';
-        this.required = false;
-        this.defaultDate = undefined;
-        this.placeholder = undefined;
-        this.value = undefined;
-        this.label = '';
-        this.errorText = '';
-        this.errorTextCount = undefined;
-        this.invalid = false;
-        this.containingElement = undefined;
-        this.dateFormat = SixDateFormats.DDMMYYY_DOT;
-        this.debounce = DEFAULT_DEBOUNCE_FAST;
-        this.name = '';
-        this.clearable = false;
-        this.iconPosition = 'left';
-        this.hoist = false;
     }
     debounceChanged() {
         this.sixSelect = debounceEvent(this.sixSelect, this.debounce);
@@ -824,7 +870,6 @@ const SixDatepicker$1 = /*@__PURE__*/ proxyCustomElement(class SixDatepicker ext
             firstDateOfBox: this.firstDateOfBox,
             allowedDates: this.allowedDates,
             dateFormat: this.dateFormat,
-            locale: this.locale,
             selectedDate: this.selectedDate,
             minDate: this.min,
             maxDate: this.max,
@@ -1011,15 +1056,15 @@ const SixDatepicker$1 = /*@__PURE__*/ proxyCustomElement(class SixDatepicker ext
     render() {
         var _a, _b, _c;
         this.adjustPopupPosition();
-        return (h("div", { key: 'dbe321672b79845093aa8c3186be30cb5819f09d', ref: (el) => (this.wrapper = el), class: "datepicker__container" }, h("six-input", { key: '9ba0be60aaacd602d68d298aedcd0694302ba553', part: "base", value: formatDate(this.value, this.dateFormat), ref: (el) => (this.inputElement = el), placeholder: this.placeholder, readonly: this.readonly, disabled: this.disabled, name: this.name, label: this.label, required: this.required, errorText: this.errorText, errorTextCount: this.errorTextCount, invalid: this.invalid, onClick: () => this.openCalendar(), size: this.size, class: { 'input--empty': this.value == null } }, this.renderCustomIcon(), this.renderClearable(), hasSlot(this.host, 'label') ? (h("span", { slot: "label" }, h("slot", { name: "label" }))) : null, hasSlot(this.host, 'error-text') ? (h("span", { slot: "error-text" }, h("slot", { name: "error-text" }))) : null), this.open && (h("div", { part: "popup", ref: (el) => (this.popup = el), class: {
+        return (h("div", { key: 'b5ba1d95babef5f6f47bd176f607756df09f293b', ref: (el) => (this.wrapper = el), class: "datepicker__container" }, h("six-input", { key: 'bbc7941bb975cb5e66eda215fea89dc3455724a3', part: "base", value: formatDate(this.value, this.dateFormat), ref: (el) => (this.inputElement = el), placeholder: this.placeholder, readonly: this.readonly, disabled: this.disabled, name: this.name, label: this.label, required: this.required, errorText: this.errorText, errorTextCount: this.errorTextCount, invalid: this.invalid, onClick: () => this.openCalendar(), size: this.size, class: { 'input--empty': this.value == null } }, this.renderCustomIcon(), this.renderClearable(), hasSlot(this.host, 'label') ? (h("span", { slot: "label" }, h("slot", { name: "label" }))) : null, hasSlot(this.host, 'error-text') ? (h("span", { slot: "error-text" }, h("slot", { name: "error-text" }))) : null), this.open && (h("div", { key: 'ceaf12686b514b8708e1b254e8ed8990c519e19b', part: "popup", ref: (el) => (this.popup = el), class: {
                 datepicker__popup: true,
                 'datepicker__popup--is-up': this.placement != null ? this.placement === 'top' : this.isDropDownContentUp,
                 'datepicker__popup--is-inline': this.inline,
-            } }, this.renderHeader(), this.renderBody(), this.type === 'date-time' && (h("six-timepicker", { inline: true, "onSix-timepicker-change-debounced": (event) => this.onTimepickerChange(event), value: ((_a = this.selectedDate) === null || _a === void 0 ? void 0 : _a.getHours()) +
+            } }, this.renderHeader(), this.renderBody(), this.type === 'date-time' && (h("six-timepicker", { key: 'c978d4bf39f7b212eb6f4f37acbfc2f5533e2ebc', debounce: this.debounce, inline: true, "onSix-timepicker-change-debounced": (event) => this.onTimepickerChange(event), value: ((_a = this.selectedDate) === null || _a === void 0 ? void 0 : _a.getHours()) +
                 ':' +
                 ((_b = this.selectedDate) === null || _b === void 0 ? void 0 : _b.getMinutes()) +
                 ':' +
-                ((_c = this.selectedDate) === null || _c === void 0 ? void 0 : _c.getSeconds()) })), h("div", { class: "datepicker__footer" }, h("slot", null))))));
+                ((_c = this.selectedDate) === null || _c === void 0 ? void 0 : _c.getSeconds()) })), h("div", { key: 'ffaec9fff60951e6f8134437f31b359d93b3b91e', class: "datepicker__footer" }, h("slot", { key: '58655ebaf55d53e2524eee16e87ecf629fe9eb29' }))))));
     }
     adjustPopupPosition() {
         adjustPopupForHoisting(this.hoist, this.popup, this.inputElement, this.wrapper, MIN_POPUP_HEIGHT, (isUp) => (this.isDropDownContentUp = isUp));
@@ -1047,7 +1092,7 @@ const SixDatepicker$1 = /*@__PURE__*/ proxyCustomElement(class SixDatepicker ext
         "debounce": ["debounceChanged"],
         "value": ["valueChanged"]
     }; }
-    static get style() { return SixDatepickerStyle0; }
+    static get style() { return sixDatepickerCss; }
 }, [1, "six-datepicker", {
         "type": [1],
         "locale": [1],
@@ -1128,5 +1173,6 @@ const SixDatepicker = SixDatepicker$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { SixDatepicker, defineCustomElement };
+//# sourceMappingURL=six-datepicker.js.map
 
 //# sourceMappingURL=six-datepicker.js.map