@six-group/ui-library 4.3.3 → 5.0.0-rc.1

package/dist/esm/six-datepicker.entry.js

@@ -1,14 +1,15 @@
-import { h, r as registerInstance, c as createEvent, g as getElement } from './index-a7bee415.js';
-import { E as EventListeners } from './event-listeners-706d4309.js';
-import { D as DEFAULT_DEBOUNCE_FAST, d as debounceEvent, a as debounce } from './execution-control-2ebaf4ef.js';
-import { h as hasSlot } from './slot-56531341.js';
-import { m as movePopup, c as calcIsDropDownContentUp, a as adjustPopupForHoisting, b as adjustPopupForSmallScreens } from './popup-7209e9d5.js';
+import { h, r as registerInstance, c as createEvent, g as getElement } from './index-JoG9I7EO.js';
+import { E as EventListeners } from './event-listeners-C4h4qpGl.js';
+import { D as DEFAULT_DEBOUNCE_FAST, d as debounceEvent, a as debounce } from './execution-control-CKhg9ibv.js';
+import { h as hasSlot } from './slot-j3oIB5oT.js';
+import { m as movePopup, c as calcIsDropDownContentUp, a as adjustPopupForHoisting, b as adjustPopupForSmallScreens } from './popup-Dd6pdO8C.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: [
@@ -603,8 +604,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;
@@ -617,10 +617,84 @@ var SelectionMode;
 const SixDatepicker = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        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();
@@ -745,36 +819,6 @@ const SixDatepicker = class {
             }
             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);
@@ -820,7 +864,6 @@ const SixDatepicker = class {
             firstDateOfBox: this.firstDateOfBox,
             allowedDates: this.allowedDates,
             dateFormat: this.dateFormat,
-            locale: this.locale,
             selectedDate: this.selectedDate,
             minDate: this.min,
             maxDate: this.max,
@@ -1044,8 +1087,9 @@ const SixDatepicker = class {
         "value": ["valueChanged"]
     }; }
 };
-SixDatepicker.style = SixDatepickerStyle0;
+SixDatepicker.style = sixDatepickerCss;
 
 export { SixDatepicker as six_datepicker };
+//# sourceMappingURL=six-datepicker.entry.js.map
 
 //# sourceMappingURL=six-datepicker.entry.js.map