@sepale/components 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,200 @@
+// @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 {
+    closest,
+    createElement,
+    getEl,
+    toggleClass,
+    getDecade, getParsedDate,
+    removeClass
+} from './utils.js';
+
+import consts from './consts.js';
+
+export default class DatepickerNav {
+    constructor({dp, opts}) {
+        this.dp = dp;
+        this.opts = opts;
+
+        this.init();
+    }
+
+    init() {
+        this._createElement();
+        this._buildBaseHtml();
+        this._defineDOM();
+
+        this.render();
+
+        this.handleNavStatus();
+        this._bindEvents();
+        this._bindDatepickerEvents();
+    }
+
+    _defineDOM() {
+        this.$title = getEl('.air-datepicker-nav--title', this.$el);
+        this.$prev = getEl('[data-action="prev"]', this.$el);
+        this.$next = getEl('[data-action="next"]', this.$el);
+    }
+
+    _bindEvents() {
+        this.$el.addEventListener('click', this.onClickNav);
+        this.$title.addEventListener('click', this.onClickNavTitle);
+    }
+
+    _bindDatepickerEvents() {
+        this.dp.on(consts.eventChangeViewDate, this.onChangeViewDate);
+        this.dp.on(consts.eventChangeCurrentView, this.onChangeCurrentView);
+
+        if (this.isNavIsFunction) {
+            // Wait till time is added to date
+            this.dp.on(consts.eventChangeSelectedDate, this.renderDelay);
+
+            if (this.dp.opts.timepicker) {
+                this.dp.on(consts.eventChangeTime, this.render);
+            }
+        }
+    }
+
+    destroy() {
+        this.dp.off(consts.eventChangeViewDate, this.onChangeViewDate);
+        this.dp.off(consts.eventChangeCurrentView, this.onChangeCurrentView);
+        if (this.isNavIsFunction) {
+            this.dp.off(consts.eventChangeSelectedDate, this.renderDelay);
+            if (this.dp.opts.timepicker) {
+                this.dp.off(consts.eventChangeTime, this.render);
+            }
+        }
+    }
+
+    _createElement() {
+        this.$el = createElement({
+            tagName: 'nav',
+            className: 'air-datepicker-nav'
+        });
+    }
+
+    _getTitle() {
+        let {dp, opts} = this;
+        let template = opts.navTitles[dp.currentView];
+
+        if (typeof template === 'function') {
+            return template(dp);
+        }
+
+        return dp.formatDate(dp.viewDate, template);
+    }
+
+    handleNavStatus() {
+        let {disableNavWhenOutOfRange} = this.opts;
+        let {minDate, maxDate} = this.dp;
+        if (!(minDate || maxDate) || !disableNavWhenOutOfRange) return;
+
+        let {year, month} = this.dp.parsedViewDate;
+        let minDateParsed = minDate ? getParsedDate(minDate) : false;
+        let maxDateParsed = maxDate ? getParsedDate(maxDate) : false;
+
+        switch (this.dp.currentView) {
+            case consts.days:
+                if (minDate && (minDateParsed.month >= month && minDateParsed.year >= year)) {
+                    this._disableNav('prev');
+                }
+                if (maxDate && maxDateParsed.month <= month && maxDateParsed.year <= year) {
+                    this._disableNav('next');
+                }
+                break;
+            case consts.months:
+                if (minDate && minDateParsed.year >= year) {
+                    this._disableNav('prev');
+                }
+                if (maxDate && maxDateParsed.year <= year) {
+                    this._disableNav('next');
+                }
+                break;
+            case consts.years: {
+                let decade = getDecade(this.dp.viewDate);
+                if (minDate && minDateParsed.year >= decade[0]) {
+                    this._disableNav('prev');
+                }
+                if (maxDate && maxDateParsed.year <= decade[1]) {
+                    this._disableNav('next');
+                }
+                break;
+            }
+        }
+    }
+
+    _disableNav(actionName) {
+        getEl('[data-action="' + actionName + '"]', this.$el).classList.add('-disabled-');
+    }
+
+    _resetNavStatus() {
+        removeClass(this.$el.querySelectorAll('.air-datepicker-nav--action'), '-disabled-');
+    }
+
+    onClickNav = (e) => {
+        let $item = closest(e.target, '.air-datepicker-nav--action');
+        if (!$item) return;
+
+        let actionName = $item.dataset.action;
+
+        this.dp[actionName]();
+    }
+
+    onChangeViewDate = () => {
+        this.render();
+        this._resetNavStatus();
+        this.handleNavStatus();
+    }
+
+    onChangeCurrentView = () => {
+        this.render();
+        this._resetNavStatus();
+        this.handleNavStatus();
+    }
+
+    onClickNavTitle = () => {
+        if (this.dp.isFinalView) return;
+        this.dp.up();
+    }
+
+    _buildBaseHtml() {
+        let {prevHtml, nextHtml} = this.opts;
+
+        this.$el.innerHTML = '' +
+            `<div class="air-datepicker-nav--action" data-action="prev">${prevHtml}</div>` +
+            '<div class="air-datepicker-nav--title"></div>' +
+            `<div class="air-datepicker-nav--action" data-action="next">${nextHtml}</div>`;
+    }
+
+    get isNavIsFunction() {
+        let {navTitles} = this.opts;
+
+        return Object.keys(navTitles).find((view) => {
+            return typeof navTitles[view] === 'function';
+        });
+    }
+
+    update = () => {
+        let {prevHtml, nextHtml} = this.opts;
+
+        this.$prev.innerHTML = prevHtml;
+        this.$next.innerHTML = nextHtml;
+
+        this._resetNavStatus();
+        this.render();
+        this.handleNavStatus();
+    }
+
+    renderDelay = () => {
+        setTimeout(this.render);
+    }
+
+    render = () => {
+        this.$title.innerHTML = this._getTitle();
+
+        toggleClass(this.$title, {
+            '-disabled-': this.dp.isFinalView
+        });
+    }
+}

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

@@ -0,0 +1,60 @@
+/**
+ * Timepicker
+ *
+ * How does it work:
+ * Timepicker has its own hour and minute values. At the start they will be equal to current time, or to min/max date values.
+ * When user selects date, timepicker add its values to the date (when consts.eventChangeSelectedDate is triggered).
+ * When lastSelectedDate is changed (e.g. when user clicks on already selected date in multiple dates mode or in range mode)
+ * then hour and minute values are taken from this date and stored in a timepicker instance.
+ *
+ */
+export default class DatepickerTime {
+    constructor({ opts, dp }?: {});
+    opts: any;
+    dp: any;
+    ampm: boolean | undefined;
+    init(): void;
+    bindDatepickerEvents(): void;
+    bindDOMEvents(): void;
+    createElement(): void;
+    $el: HTMLElement | undefined;
+    destroy(): void;
+    buildHtml(): void;
+    defineDOM(): void;
+    $ranges: NodeListOf<Element> | undefined;
+    $hours: any;
+    $minutes: any;
+    $hoursText: any;
+    $minutesText: any;
+    $ampm: any;
+    setTime(date: any): void;
+    addTimeToDate(date: any): void;
+    setMinMaxTime(date: any): void;
+    setCurrentTime(date: any): void;
+    set hours(val: any);
+    get hours(): any;
+    minutes: number | undefined;
+    setMinMaxTimeFromOptions(): void;
+    minHours: any;
+    minMinutes: any;
+    maxHours: any;
+    maxMinutes: any;
+    setMinTimeFromMinDate(date: any): void;
+    setMaxTimeFromMaxDate(date: any): void;
+    updateSliders(): void;
+    updateText(): void;
+    toggleTimepickerIsActive: (value: any) => void;
+    onChangeSelectedDate: ({ date, updateTime }: {
+        date: any;
+        updateTime?: boolean | undefined;
+    }) => void;
+    onChangeLastSelectedDate: (date: any) => void;
+    onChangeInputRange: (e: any) => void;
+    onMouseEnterLeave: (e: any) => void;
+    onFocus: () => void;
+    onBlur: () => void;
+    _hours: any;
+    displayHours: any;
+    dayPeriod: string | undefined;
+    render(): void;
+}

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

@@ -0,0 +1,276 @@
+// @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 {
+    addEventListener,
+    clamp,
+    classNames,
+    createElement,
+    getEl,
+    getLeadingZeroNum,
+    getParsedDate,
+    isSameDate,
+    setAttribute,
+    getWordBoundaryRegExp, getDayPeriodFromHours24,
+} from './utils.js';
+
+import consts from './consts.js';
+
+/**
+ * Timepicker
+ *
+ * How does it work:
+ * Timepicker has its own hour and minute values. At the start they will be equal to current time, or to min/max date values.
+ * When user selects date, timepicker add its values to the date (when consts.eventChangeSelectedDate is triggered).
+ * When lastSelectedDate is changed (e.g. when user clicks on already selected date in multiple dates mode or in range mode)
+ * then hour and minute values are taken from this date and stored in a timepicker instance.
+ *
+ */
+export default class DatepickerTime {
+    constructor({opts, dp} = {}) {
+        this.opts = opts;
+        this.dp = dp;
+        let {timeFormat} = this.dp.locale;
+
+        if (timeFormat && (timeFormat.match(getWordBoundaryRegExp('h')) || timeFormat.match(getWordBoundaryRegExp('hh')))) {
+            this.ampm = true;
+        }
+
+        this.init();
+    }
+
+    init() {
+        this.setTime(this.dp.lastSelectedDate || this.dp.viewDate);
+        this.createElement();
+        this.buildHtml();
+        this.defineDOM();
+        this.render();
+
+        this.bindDatepickerEvents();
+        this.bindDOMEvents();
+    }
+
+    bindDatepickerEvents() {
+        this.dp.on(consts.eventChangeSelectedDate, this.onChangeSelectedDate);
+        this.dp.on(consts.eventChangeLastSelectedDate, this.onChangeLastSelectedDate);
+    }
+
+    bindDOMEvents() {
+        let changeEvent = 'input';
+        if (navigator.userAgent.match(/trident/gi)) {
+            changeEvent = 'change';
+        }
+
+        addEventListener(this.$ranges, changeEvent, this.onChangeInputRange);
+        addEventListener(this.$ranges, 'mouseenter', this.onMouseEnterLeave);
+        addEventListener(this.$ranges, 'mouseleave', this.onMouseEnterLeave);
+        addEventListener(this.$ranges, 'focus', this.onFocus);
+        addEventListener(this.$ranges, 'mousedown', this.onFocus);
+        addEventListener(this.$ranges, 'blur', this.onBlur);
+    }
+
+    createElement() {
+        this.$el = createElement({className: classNames('air-datepicker-time', {'-am-pm-': this.dp.ampm})});
+    }
+
+    destroy() {
+        this.dp.off(consts.eventChangeSelectedDate, this.onChangeSelectedDate);
+        this.dp.off(consts.eventChangeLastSelectedDate, this.onChangeLastSelectedDate);
+        this.$el.parentNode.removeChild(this.$el);
+    }
+
+    buildHtml() {
+        let {
+            ampm, hours, displayHours, minutes, minHours, minMinutes, maxHours, maxMinutes, dayPeriod,
+            opts: {hoursStep, minutesStep}
+        } = this;
+
+        this.$el.innerHTML = '' +
+            '<div class="air-datepicker-time--current">' +
+            `   <span class="air-datepicker-time--current-hours">${getLeadingZeroNum(displayHours)}</span>` +
+            '   <span class="air-datepicker-time--current-colon">:</span>' +
+            `   <span class="air-datepicker-time--current-minutes">${getLeadingZeroNum(minutes)}</span>` +
+            `   ${ampm ? `<span class='air-datepicker-time--current-ampm'>${dayPeriod}</span>` : ''}` +
+            '</div>' +
+            '<div class="air-datepicker-time--sliders">' +
+            '   <div class="air-datepicker-time--row">' +
+            // eslint-disable-next-line max-len
+            `      <input type="range" name="hours" value="${hours}" min="${minHours}" max="${maxHours}" step="${hoursStep}"/>` +
+            '   </div>' +
+            '   <div class="air-datepicker-time--row">' +
+            // eslint-disable-next-line max-len
+            `      <input type="range" name="minutes" value="${minutes}" min="${minMinutes}" max="${maxMinutes}" step="${minutesStep}"/>` +
+            '   </div>' +
+            '</div>';
+    }
+
+    defineDOM() {
+        let getElWithContext = selector => getEl(selector, this.$el);
+
+        this.$ranges = this.$el.querySelectorAll('[type="range"]');
+        this.$hours = getElWithContext('[name="hours"]');
+        this.$minutes = getElWithContext('[name="minutes"]');
+        this.$hoursText = getElWithContext('.air-datepicker-time--current-hours');
+        this.$minutesText = getElWithContext('.air-datepicker-time--current-minutes');
+        this.$ampm = getElWithContext('.air-datepicker-time--current-ampm');
+    }
+
+
+    setTime(date) {
+        this.setMinMaxTime(date);
+        this.setCurrentTime(date);
+    }
+
+    addTimeToDate(date) {
+        if (!date) return;
+        date.setHours(this.hours);
+        date.setMinutes(this.minutes);
+    }
+
+    setMinMaxTime(date) {
+        this.setMinMaxTimeFromOptions();
+
+        if (date) {
+            let {minDate, maxDate} = this.dp;
+            if (minDate && isSameDate(date, minDate)) {
+                this.setMinTimeFromMinDate(minDate);
+            }
+            if (maxDate && isSameDate(date, maxDate)) {
+                this.setMaxTimeFromMaxDate(maxDate);
+            }
+        }
+    }
+
+    setCurrentTime(date) {
+        let {hours, minutes} = date ? getParsedDate(date) : this;
+
+        this.hours = clamp(hours, this.minHours, this.maxHours);
+        this.minutes = clamp(minutes, this.minMinutes, this.maxMinutes);
+    }
+
+    setMinMaxTimeFromOptions() {
+        let maxHoursPossible = 23,
+            maxMinutesPossible = 59,
+            {minHours, minMinutes, maxHours, maxMinutes} = this.opts;
+
+        this.minHours = clamp(minHours, 0, maxHoursPossible);
+        this.minMinutes = clamp(minMinutes, 0, maxMinutesPossible);
+        this.maxHours = clamp(maxHours, 0, maxHoursPossible);
+        this.maxMinutes = clamp(maxMinutes, 0, maxMinutesPossible);
+    }
+
+    setMinTimeFromMinDate(date) {
+        let {lastSelectedDate} = this.dp;
+
+        this.minHours = date.getHours();
+
+        if (lastSelectedDate && lastSelectedDate.getHours() > date.getHours()) {
+            this.minMinutes = this.opts.minMinutes;
+        } else {
+            this.minMinutes = date.getMinutes();
+        }
+    }
+
+    setMaxTimeFromMaxDate(date) {
+        let {lastSelectedDate} = this.dp;
+
+        this.maxHours = date.getHours();
+
+        if (lastSelectedDate && lastSelectedDate.getHours() < date.getHours()) {
+            this.maxMinutes = this.opts.maxMinutes;
+        } else {
+            this.maxMinutes = date.getMinutes();
+        }
+    }
+
+    updateSliders() {
+        setAttribute(this.$hours, {
+            min: this.minHours,
+            max: this.maxHours
+        }).value = this.hours;
+
+        setAttribute(this.$minutes, {
+            min: this.minMinutes,
+            max: this.maxMinutes
+        }).value = this.minutes;
+    }
+
+    updateText() {
+        this.$hoursText.innerHTML = getLeadingZeroNum(this.displayHours);
+        this.$minutesText.innerHTML =  getLeadingZeroNum(this.minutes);
+
+        if (this.ampm) {
+            this.$ampm.innerHTML = this.dayPeriod;
+        }
+    }
+
+    toggleTimepickerIsActive = (value) => {
+        this.dp.timepickerIsActive = value;
+    }
+
+    onChangeSelectedDate = ({date, updateTime = false}) => {
+        if (!date) return;
+
+        // Check if date is minDate or maxDate and set timepicker's time to corresponding values
+        this.setMinMaxTime(date);
+        this.setCurrentTime(updateTime ? date : false);
+
+        this.addTimeToDate(date);
+    }
+
+    onChangeLastSelectedDate = (date) => {
+        if (!date) return;
+
+        this.setTime(date);
+        this.render();
+    }
+
+    onChangeInputRange = (e) => {
+        let $target = e.target,
+            name = $target.getAttribute('name');
+
+        this[name] = $target.value;
+        this.updateText();
+
+        this.dp.trigger(consts.eventChangeTime, {
+            hours: this.hours,
+            minutes: this.minutes
+        });
+    }
+
+    onMouseEnterLeave = (e) => {
+        let name = e.target.getAttribute('name'),
+            $el = this.$minutesText;
+
+        if (name === 'hours') {
+            $el = this.$hoursText;
+        }
+
+        $el.classList.toggle('-focus-');
+    }
+
+    onFocus = () => {
+        this.toggleTimepickerIsActive(true);
+    }
+
+    onBlur = () => {
+        this.toggleTimepickerIsActive(false);
+    }
+
+    set hours(val) {
+        this._hours = val;
+
+        let {hours, dayPeriod} = getDayPeriodFromHours24(val);
+
+        this.displayHours = this.ampm ? hours : val;
+        this.dayPeriod = dayPeriod;
+    }
+
+    get hours() {
+        return this._hours;
+    }
+
+    render() {
+        this.updateSliders();
+        this.updateText();
+    }
+}

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

@@ -0,0 +1,65 @@
+declare namespace _default {
+    export let classes: string;
+    export let inline: boolean;
+    export { localeEn as locale };
+    export let startDate: Date;
+    export let firstDay: string;
+    export let weekends: number[];
+    export let dateFormat: string;
+    export let altField: string;
+    export let altFieldDateFormat: string;
+    export let toggleSelected: boolean;
+    export let keyboardNav: boolean;
+    export let selectedDates: boolean;
+    export let container: string;
+    export let isMobile: boolean;
+    export let visible: boolean;
+    export let position: string;
+    export let offset: number;
+    export let view: string;
+    export let minView: string;
+    export let showOtherMonths: boolean;
+    export let selectOtherMonths: boolean;
+    export let moveToOtherMonthsOnSelect: boolean;
+    export let showOtherYears: boolean;
+    export let selectOtherYears: boolean;
+    export let moveToOtherYearsOnSelect: boolean;
+    export let minDate: string;
+    export let maxDate: string;
+    export let disableNavWhenOutOfRange: boolean;
+    export let multipleDates: boolean;
+    export let multipleDatesSeparator: string;
+    export let range: boolean;
+    export let dynamicRange: boolean;
+    export let buttons: boolean;
+    export let monthsField: string;
+    export let showEvent: string;
+    export let autoClose: boolean;
+    export let fixedHeight: boolean;
+    export let prevHtml: string;
+    export let nextHtml: string;
+    export namespace navTitles {
+        let days: string;
+        let months: string;
+        let years: string;
+    }
+    export let timepicker: boolean;
+    export let onlyTimepicker: boolean;
+    export let dateTimeSeparator: string;
+    export let timeFormat: string;
+    export let minHours: number;
+    export let maxHours: number;
+    export let minMinutes: number;
+    export let maxMinutes: number;
+    export let hoursStep: number;
+    export let minutesStep: number;
+    export let onSelect: boolean;
+    export let onChangeViewDate: boolean;
+    export let onChangeView: boolean;
+    export let onRenderCell: boolean;
+    export let onShow: boolean;
+    export let onHide: boolean;
+    export let onClickDayName: boolean;
+}
+export default _default;
+import localeEn from './locale/en.js';

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

@@ -0,0 +1,79 @@
+// @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 localeEn from './locale/en.js';
+import consts from './consts.js';
+
+export default {
+    classes: '',
+    inline: false,
+    locale: localeEn,
+    startDate: new Date(),
+    firstDay: '',
+    weekends: [6, 0],
+    dateFormat: '',
+    altField: '',
+    altFieldDateFormat: 'T',
+    toggleSelected: true,
+    keyboardNav: true,
+    selectedDates: false,
+    container: '',
+    isMobile: false,
+    visible: false,
+
+    position: 'bottom left',
+    offset: 12,
+
+    view: consts.days,
+    minView: consts.days,
+
+    showOtherMonths: true,
+    selectOtherMonths: true,
+    moveToOtherMonthsOnSelect: true,
+
+    showOtherYears: true,
+    selectOtherYears: true,
+    moveToOtherYearsOnSelect: true,
+
+    minDate: '',
+    maxDate: '',
+    disableNavWhenOutOfRange: true,
+
+    multipleDates: false, // Boolean or Number
+    multipleDatesSeparator: ', ',
+    range: false,
+    dynamicRange: true,
+    buttons: false,
+    monthsField: 'monthsShort',
+
+    showEvent: 'focus',
+    autoClose: false,
+    fixedHeight: false,
+
+    // navigation
+    prevHtml: '<svg><path d="M 17,12 l -5,5 l 5,5"></path></svg>',
+    nextHtml: '<svg><path d="M 14,12 l 5,5 l -5,5"></path></svg>',
+    navTitles: {
+        days: 'MMMM, <i>yyyy</i>',
+        months: 'yyyy',
+        years: 'yyyy1 - yyyy2'
+    },
+
+    timepicker: false,
+    onlyTimepicker: false,
+    dateTimeSeparator: ' ',
+    timeFormat: '',
+    minHours: 0,
+    maxHours: 24,
+    minMinutes: 0,
+    maxMinutes: 59,
+    hoursStep: 1,
+    minutesStep: 1,
+
+    onSelect: false,
+    onChangeViewDate: false,
+    onChangeView: false,
+    onRenderCell: false,
+    onShow: false,
+    onHide: false,
+    onClickDayName: false,
+};