@sepale/components 0.0.0-stage → 0.1.0

package/dist/vendor/air-datepicker/datepickerCell.js

@@ -0,0 +1,297 @@
+// @ts-nocheck — vendored code, typed by index.d.ts; not ours to check.
+// air-datepicker 3.6.0 (MIT, Timofey Marochkin) — see LICENSE.md and README.md.
+import consts from './consts.js';
+import {
+    createElement,
+    classNames,
+    getParsedDate,
+    isSameDate,
+    isDateSmaller,
+    isDateBigger,
+    isDateBetween,
+} from './utils.js';
+
+
+export default class DatepickerCell {
+    constructor({type, date, dp, opts, body} = {}) {
+        this.type = type;
+        this.singleType = this.type.slice(0, -1); // days -> day etc.'`
+        this.date = date;
+        this.dp = dp;
+        this.opts = opts;
+        this.body = body;
+        this.customData = false;
+
+        this.init();
+    }
+
+    init() {
+        let {onRenderCell} = this.opts;
+
+        if (onRenderCell) {
+            this.customData = onRenderCell({
+                date: this.date,
+                cellType: this.singleType,
+                datepicker: this.dp,
+            });
+        }
+
+        this._createElement();
+        this._bindDatepickerEvents();
+
+        if (this.customData?.disabled) {
+            this.dp.disableDate(this.date);
+        } else if (this.customData?.disabled === false) {
+            this.dp.enableDate(this.date);
+        }
+    }
+
+    _bindDatepickerEvents() {
+        this.dp.on(consts.eventChangeSelectedDate, this.onChangeSelectedDate);
+        this.dp.on(consts.eventChangeFocusDate, this.onChangeFocusDate);
+    }
+
+    unbindDatepickerEvents() {
+        this.dp.off(consts.eventChangeSelectedDate, this.onChangeSelectedDate);
+        this.dp.off(consts.eventChangeFocusDate, this.onChangeFocusDate);
+    }
+
+    _createElement() {
+        let {year, month, fullMonth, date, fullDate} = getParsedDate(this.date);
+        let extraAttrs = this.customData?.attrs || {};
+
+        this.$cell = createElement({
+            attrs: {
+                'data-year': year,
+                'data-month': month,
+                'data-date': date,
+                'data-iso-date': `${year}-${fullMonth}-${fullDate}`,
+                ...extraAttrs,
+            }
+        });
+        this.$cell.adpCell = this;
+    }
+
+    _getClassName() {
+        let currentDate = new Date();
+        let {selectOtherMonths, selectOtherYears} = this.opts;
+        let {minDate, maxDate, isDateDisabled} = this.dp;
+        let {day} = getParsedDate(this.date);
+        let isOutOfMinMaxRange = this._isOutOfMinMaxRange();
+        let isDisabled = isDateDisabled(this.date);
+
+        let classNameCommon = classNames(
+            'air-datepicker-cell',
+            `-${this.singleType}-`, // days -> day etc.'`
+            {
+                '-current-': isSameDate(currentDate, this.date, this.type),
+                '-min-date-': minDate && isSameDate(minDate, this.date, this.type),
+                '-max-date-': maxDate && isSameDate(maxDate, this.date, this.type),
+            }
+        );
+        let classNameType = '';
+
+        switch (this.type) {
+            case consts.days:
+                classNameType = classNames({
+                    '-weekend-': this.dp.isWeekend(day),
+                    '-other-month-': this.isOtherMonth,
+                    '-disabled-': this.isOtherMonth && !selectOtherMonths || isOutOfMinMaxRange || isDisabled
+                });
+                break;
+            case consts.months:
+                classNameType = classNames({
+                    '-disabled-': isOutOfMinMaxRange
+                });
+                break;
+            case consts.years:
+                classNameType = classNames({
+                    '-other-decade-': this.isOtherDecade,
+                    '-disabled-': isOutOfMinMaxRange || (this.isOtherDecade && !selectOtherYears)
+                });
+                break;
+        }
+
+        return classNames(classNameCommon, classNameType, this.customData?.classes).split(' ');
+    }
+
+    _getHtml() {
+        let {year, month, date} = getParsedDate(this.date);
+        let {showOtherMonths, showOtherYears} = this.opts;
+
+        if (this.customData?.html) {
+            return this.customData.html;
+        }
+
+        switch (this.type) {
+            case consts.days:
+                return !showOtherMonths && this.isOtherMonth ? '' : date;
+            case consts.months:
+                return this.dp.locale[this.opts.monthsField][month];
+            case consts.years:
+                return !showOtherYears && this.isOtherDecade ? '' : year;
+        }
+    }
+
+    _isOutOfMinMaxRange() {
+        let {minDate, maxDate} = this.dp;
+        let {type, date: cellDate} = this;
+        let {month, year, date} = getParsedDate(cellDate);
+        let isDay = type === consts.days;
+        let isYear = type === consts.years;
+
+        //Since in months cells date is set to the first day of month we should change it value to from min or max dates
+        //to be able to mark cell as disabled correctly
+        //Same goes to year cells
+        let cellMinDate = minDate
+            ? new Date(year, isYear ? minDate.getMonth() : month, isDay ? date : minDate.getDate())
+            : false;
+        let cellMaxDate = maxDate
+            ? new Date(year, isYear ? maxDate.getMonth() : month, isDay ? date : maxDate.getDate())
+            : false;
+
+        if (minDate && maxDate) {
+            return isDateSmaller(cellMinDate, minDate) || isDateBigger(cellMaxDate, maxDate);
+        }
+
+        if (minDate) {
+            return isDateSmaller(cellMinDate, minDate);
+        }
+
+        if (maxDate) {
+            return isDateBigger(cellMaxDate, maxDate);
+        }
+    }
+
+    destroy() {
+        this.unbindDatepickerEvents();
+    }
+
+    focus = () => {
+        this.$cell.classList.add('-focus-');
+        this.focused = true;
+    }
+
+    removeFocus = () => {
+        this.$cell.classList.remove('-focus-');
+        this.focused = false;
+    }
+
+    select = () => {
+        this.$cell.classList.add('-selected-');
+        this.selected = true;
+    }
+
+    removeSelect = () => {
+        this.$cell.classList.remove('-selected-', '-range-from-', '-range-to-');
+        this.selected = false;
+    }
+
+    _handleRangeStatus() {
+        const {selectedDates, focusDate, rangeDateTo, rangeDateFrom} = this.dp;
+        const selectedDatesLen = selectedDates.length;
+
+        this.$cell.classList.remove('-range-from-', '-range-to-', '-in-range-');
+
+        if (!selectedDatesLen) return;
+
+        let from = rangeDateFrom;
+        let to = rangeDateTo;
+
+        if (selectedDatesLen === 1 && focusDate) {
+            const focusDateIsLargerThenSelected = isDateBigger(focusDate, selectedDates[0]);
+
+            from =  focusDateIsLargerThenSelected ? selectedDates[0] : focusDate;
+            to = focusDateIsLargerThenSelected ? focusDate : selectedDates[0];
+        }
+
+        let classes = classNames({
+            '-in-range-': from && to && isDateBetween(this.date, from, to),
+            '-range-from-': from && isSameDate(this.date, from, this.type),
+            '-range-to-': to && isSameDate(this.date, to, this.type)
+        });
+
+        if (classes) {
+            this.$cell.classList.add(...classes.split(' '));
+        }
+    }
+
+    _handleSelectedStatus() {
+        let selected = this.dp._checkIfDateIsSelected(this.date, this.type);
+        if (selected) {
+            this.select();
+        } else if (!selected && this.selected) {
+            this.removeSelect();
+        }
+    }
+
+    _handleInitialFocusStatus() {
+        let datesAreSame = isSameDate(this.dp.focusDate, this.date, this.type);
+
+        if (datesAreSame) {
+            this.focus();
+        }
+    }
+
+    _handleClasses() {
+        this.$cell.setAttribute('class', '');
+        this._handleInitialFocusStatus();
+        if (this.dp.hasSelectedDates) {
+            this._handleSelectedStatus();
+            if (this.dp.opts.range) {
+                this._handleRangeStatus();
+            }
+        }
+        this.$cell.classList.add(...this._getClassName());
+    }
+
+    get isDisabled() {
+        return this.$cell.matches('.-disabled-');
+    }
+
+    get isOtherMonth() {
+        return this.dp.isOtherMonth(this.date);
+    }
+
+    get isOtherDecade() {
+        return this.dp.isOtherDecade(this.date);
+    }
+
+    onChangeSelectedDate = () => {
+        if (this.isDisabled) return;
+
+        this._handleSelectedStatus();
+        if (this.opts.range) {
+            this._handleRangeStatus();
+        }
+    }
+
+    onChangeFocusDate = (date) => {
+        if (!date) {
+            if (this.focused) {
+                this.removeFocus();
+            }
+            return;
+        }
+
+        let datesAreSame = isSameDate(date, this.date, this.type);
+
+        if (datesAreSame) {
+            this.focus();
+        } else if (!datesAreSame && this.focused) {
+            this.removeFocus();
+        }
+
+        if (this.opts.range) {
+            this._handleRangeStatus();
+        }
+    }
+
+    render = () => {
+        this.$cell.innerHTML = this._getHtml();
+
+        this._handleClasses();
+
+        return this.$cell;
+    }
+}

package/dist/vendor/air-datepicker/datepickerKeyboard.d.ts

@@ -0,0 +1,26 @@
+export default class DatepickerKeyboard {
+    constructor({ dp, opts }: {
+        dp: any;
+        opts: any;
+    });
+    pressedKeys: Set<any>;
+    hotKeys: Map<string[] | string[][], (dateParts: any, dp: any) => any>;
+    dp: any;
+    opts: any;
+    init(): void;
+    bindKeyboardEvents(): void;
+    destroy(): void;
+    getInitialFocusDate(): any;
+    focusNextCell(keyName: any): void;
+    registerKey(keyName: any): void;
+    removeKey(keyName: any): void;
+    handleHotKey: (combination: any) => void;
+    /**
+     * Checks if one of hot key is pressed. If so, then returns array of matched combinations
+      * @return {boolean | Array}
+     */
+    isHotKeyPressed: () => boolean | any[];
+    isArrow: (keyCode: any) => boolean;
+    onKeyDown: (e: any) => void;
+    onKeyUp: (e: any) => void;
+}

package/dist/vendor/air-datepicker/datepickerKeyboard.js

@@ -0,0 +1,207 @@
+// @ts-nocheck — vendored code, typed by index.d.ts; not ours to check.
+// air-datepicker 3.6.0 (MIT, Timofey Marochkin) — see LICENSE.md and README.md.
+import consts from './consts.js';
+import {getParsedDate, getDaysCount} from './utils.js';
+
+export default class DatepickerKeyboard {
+    pressedKeys = new Set();
+
+    hotKeys = new Map(
+        [
+            [[['Control', 'ArrowRight'], ['Control', 'ArrowUp']], dateParts =>  dateParts.month++],
+            [[['Control', 'ArrowLeft'], ['Control', 'ArrowDown']], dateParts =>  dateParts.month--],
+            [[['Shift', 'ArrowRight'], ['Shift', 'ArrowUp']], dateParts =>  dateParts.year++],
+            [[['Shift', 'ArrowLeft'], ['Shift', 'ArrowDown']], dateParts =>  dateParts.year--],
+            [[['Alt', 'ArrowRight'], ['Alt', 'ArrowUp']], dateParts =>  dateParts.year += 10],
+            [[['Alt', 'ArrowLeft'], ['Alt', 'ArrowDown']], dateParts =>  dateParts.year -= 10],
+            [['Control', 'Shift', 'ArrowUp'], (dateParts, dp) =>  dp.up()],
+        ]
+    )
+
+    constructor({dp, opts}) {
+        this.dp = dp;
+        this.opts = opts;
+
+        this.init();
+    }
+
+    init() {
+        this.bindKeyboardEvents();
+    }
+
+    bindKeyboardEvents() {
+        let {$el} = this.dp;
+
+        $el.addEventListener('keydown', this.onKeyDown);
+        $el.addEventListener('keyup', this.onKeyUp);
+    }
+
+    destroy() {
+        let {$el} = this.dp;
+
+        $el.removeEventListener('keydown', this.onKeyDown);
+        $el.removeEventListener('keyup', this.onKeyUp);
+        this.hotKeys = null;
+        this.pressedKeys = null;
+    }
+
+    getInitialFocusDate() {
+        let {focusDate, currentView, selectedDates, parsedViewDate: {year, month}} = this.dp;
+        let potentialFocused  = focusDate || selectedDates[selectedDates.length - 1];
+
+        if (!potentialFocused) {
+            switch (currentView) {
+                case consts.days:
+                    potentialFocused = new Date(year, month, new Date().getDate());
+                    break;
+                case consts.months:
+                    potentialFocused = new Date(year, month, 1);
+                    break;
+                case consts.years:
+                    potentialFocused = new Date(year, 0, 1);
+                    break;
+            }
+        }
+
+        return potentialFocused;
+    }
+
+    focusNextCell(keyName) {
+        let initialFocusDate = this.getInitialFocusDate(),
+            {currentView} = this.dp,
+            {days, months, years} = consts,
+            parsedFocusDate = getParsedDate(initialFocusDate),
+            y = parsedFocusDate.year,
+            m = parsedFocusDate.month,
+            d = parsedFocusDate.date;
+
+        switch (keyName) {
+            case 'ArrowLeft':
+                currentView === days ? (d -= 1) : '';
+                currentView === months ? (m -= 1) : '';
+                currentView === years ? (y -= 1) : '';
+                break;
+            case 'ArrowUp':
+                currentView === days ? (d -= 7) : '';
+                currentView === months ? (m -= 3) : '';
+                currentView === years ? (y -= 4) : '';
+                break;
+            case 'ArrowRight':
+                currentView === days ? (d += 1) : '';
+                currentView === months ? (m += 1) : '';
+                currentView === years ? (y += 1) : '';
+                break;
+            case 'ArrowDown':
+                currentView === days ? (d += 7) : '';
+                currentView === months ? (m += 3) : '';
+                currentView === years ? (y += 4) : '';
+                break;
+        }
+
+        let newFocusedDate = this.dp.getClampedDate(new Date(y, m, d));
+        this.dp.setFocusDate(newFocusedDate, {viewDateTransition: true});
+    }
+
+    registerKey(keyName) {
+        this.pressedKeys.add(keyName);
+    }
+
+    removeKey(keyName) {
+        this.pressedKeys.delete(keyName);
+    }
+
+    handleHotKey = (combination) => {
+        let fn = this.hotKeys.get(combination),
+            dateParts = getParsedDate(this.getInitialFocusDate());
+
+        fn(dateParts, this.dp);
+
+        let {year, month, date} = dateParts;
+
+        let totalDaysInNextMonth = getDaysCount(new Date(year, month));
+
+        if (totalDaysInNextMonth < date) {
+            date = totalDaysInNextMonth;
+        }
+
+        let newFocusedDate = this.dp.getClampedDate(new Date(year, month, date));
+
+        this.dp.setFocusDate(newFocusedDate, {viewDateTransition: true});
+    }
+
+    /**
+     * Checks if one of hot key is pressed. If so, then returns array of matched combinations
+      * @return {boolean | Array}
+     */
+    isHotKeyPressed = () => {
+        let hotKeyIsPressed = false;
+        let pressedKeysLength = this.pressedKeys.size;
+        let isAllKeysArePressed = key => this.pressedKeys.has(key);
+
+        for (let [combinations] of this.hotKeys) {
+            if (hotKeyIsPressed) break;
+            if (Array.isArray(combinations[0])) {
+                combinations.forEach((combination) => {
+                    if (hotKeyIsPressed || pressedKeysLength !== combination.length) return;
+                    hotKeyIsPressed = combination.every(isAllKeysArePressed) && combinations;
+                });
+            } else {
+                if (pressedKeysLength !== combinations.length) continue;
+                hotKeyIsPressed = combinations.every(isAllKeysArePressed) && combinations;
+            }
+        }
+
+        return hotKeyIsPressed;
+    }
+
+    isArrow = (keyCode) => {
+        return keyCode >= 37 && keyCode <= 40;
+    }
+
+    onKeyDown = (e) => {
+        if (!this.dp.visible && !this.dp.treatAsInline) return;
+
+        let {key, which} = e;
+        let {dp, dp: {focusDate}, opts} = this;
+
+        this.registerKey(key);
+
+        let pressedHotKey = this.isHotKeyPressed();
+
+        if (pressedHotKey) {
+            e.preventDefault();
+            this.handleHotKey(pressedHotKey);
+            return;
+        }
+
+        if (this.isArrow(which)) {
+            e.preventDefault();
+            this.focusNextCell(key);
+            return;
+        }
+
+        if (key === 'Enter') {
+            if (dp.currentView !== opts.minView) {
+                dp.down();
+                return;
+            }
+            if (focusDate) {
+                let alreadySelectedDate = dp._checkIfDateIsSelected(focusDate);
+                if (!alreadySelectedDate) {
+                    dp.selectDate(focusDate);
+                } else {
+                    dp._handleAlreadySelectedDates(alreadySelectedDate, focusDate);
+                }
+                return;
+            }
+        }
+
+        if (key === 'Escape') {
+            this.dp.hide();
+        }
+    }
+
+    onKeyUp = (e) => {
+        this.removeKey(e.key);
+    }
+}

package/dist/vendor/air-datepicker/datepickerNav.d.ts

@@ -0,0 +1,31 @@
+export default class DatepickerNav {
+    constructor({ dp, opts }: {
+        dp: any;
+        opts: any;
+    });
+    dp: any;
+    opts: any;
+    init(): void;
+    _defineDOM(): void;
+    $title: any;
+    $prev: any;
+    $next: any;
+    _bindEvents(): void;
+    _bindDatepickerEvents(): void;
+    destroy(): void;
+    _createElement(): void;
+    $el: HTMLElement | undefined;
+    _getTitle(): any;
+    handleNavStatus(): void;
+    _disableNav(actionName: any): void;
+    _resetNavStatus(): void;
+    onClickNav: (e: any) => void;
+    onChangeViewDate: () => void;
+    onChangeCurrentView: () => void;
+    onClickNavTitle: () => void;
+    _buildBaseHtml(): void;
+    get isNavIsFunction(): string | undefined;
+    update: () => void;
+    renderDelay: () => void;
+    render: () => void;
+}