flowbite-ts-test
Version:
The most popular library of interactive components built with Tailwind CSS
1,391 lines (1,234 loc) • 104 kB
JavaScript
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory();
else if(typeof define === 'function' && define.amd)
define("Flowbite", [], factory);
else if(typeof exports === 'object')
exports["Flowbite"] = factory();
else
root["Flowbite"] = factory();
})(self, function() {
return /******/ (function() { // webpackBootstrap
/******/ "use strict";
/******/ var __webpack_modules__ = ({
/***/ 482:
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "Z": function() { return /* binding */ DateRangePicker; }
/* harmony export */ });
/* harmony import */ var _lib_event_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(698);
/* harmony import */ var _lib_date_format_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(963);
/* harmony import */ var _Datepicker_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(770);
// filter out the config options inapproprite to pass to Datepicker
function filterOptions(options) {
const newOpts = Object.assign({}, options);
delete newOpts.inputs;
delete newOpts.allowOneSidedRange;
delete newOpts.maxNumberOfDates; // to ensure each datepicker handles a single date
return newOpts;
}
function setupDatepicker(rangepicker, changeDateListener, el, options) {
(0,_lib_event_js__WEBPACK_IMPORTED_MODULE_0__/* .registerListeners */ .cF)(rangepicker, [
[el, 'changeDate', changeDateListener],
]);
new _Datepicker_js__WEBPACK_IMPORTED_MODULE_2__/* ["default"] */ .Z(el, options, rangepicker);
}
function onChangeDate(rangepicker, ev) {
// to prevent both datepickers trigger the other side's update each other
if (rangepicker._updating) {
return;
}
rangepicker._updating = true;
const target = ev.target;
if (target.datepicker === undefined) {
return;
}
const datepickers = rangepicker.datepickers;
const setDateOptions = {render: false};
const changedSide = rangepicker.inputs.indexOf(target);
const otherSide = changedSide === 0 ? 1 : 0;
const changedDate = datepickers[changedSide].dates[0];
const otherDate = datepickers[otherSide].dates[0];
if (changedDate !== undefined && otherDate !== undefined) {
// if the start of the range > the end, swap them
if (changedSide === 0 && changedDate > otherDate) {
datepickers[0].setDate(otherDate, setDateOptions);
datepickers[1].setDate(changedDate, setDateOptions);
} else if (changedSide === 1 && changedDate < otherDate) {
datepickers[0].setDate(changedDate, setDateOptions);
datepickers[1].setDate(otherDate, setDateOptions);
}
} else if (!rangepicker.allowOneSidedRange) {
// to prevent the range from becoming one-sided, copy changed side's
// selection (no matter if it's empty) to the other side
if (changedDate !== undefined || otherDate !== undefined) {
setDateOptions.clear = true;
datepickers[otherSide].setDate(datepickers[changedSide].dates, setDateOptions);
}
}
datepickers[0].picker.update().render();
datepickers[1].picker.update().render();
delete rangepicker._updating;
}
/**
* Class representing a date range picker
*/
class DateRangePicker {
/**
* Create a date range picker
* @param {Element} element - element to bind a date range picker
* @param {Object} [options] - config options
*/
constructor(element, options = {}) {
const inputs = Array.isArray(options.inputs)
? options.inputs
: Array.from(element.querySelectorAll('input'));
if (inputs.length < 2) {
return;
}
element.rangepicker = this;
this.element = element;
this.inputs = inputs.slice(0, 2);
this.allowOneSidedRange = !!options.allowOneSidedRange;
const changeDateListener = onChangeDate.bind(null, this);
const cleanOptions = filterOptions(options);
// in order for initial date setup to work right when pcicLvel > 0,
// let Datepicker constructor add the instance to the rangepicker
const datepickers = [];
Object.defineProperty(this, 'datepickers', {
get() {
return datepickers;
},
});
setupDatepicker(this, changeDateListener, this.inputs[0], cleanOptions);
setupDatepicker(this, changeDateListener, this.inputs[1], cleanOptions);
Object.freeze(datepickers);
// normalize the range if inital dates are given
if (datepickers[0].dates.length > 0) {
onChangeDate(this, {target: this.inputs[0]});
} else if (datepickers[1].dates.length > 0) {
onChangeDate(this, {target: this.inputs[1]});
}
}
/**
* @type {Array} - selected date of the linked date pickers
*/
get dates() {
return this.datepickers.length === 2
? [
this.datepickers[0].dates[0],
this.datepickers[1].dates[0],
]
: undefined;
}
/**
* Set new values to the config options
* @param {Object} options - config options to update
*/
setOptions(options) {
this.allowOneSidedRange = !!options.allowOneSidedRange;
const cleanOptions = filterOptions(options);
this.datepickers[0].setOptions(cleanOptions);
this.datepickers[1].setOptions(cleanOptions);
}
/**
* Destroy the DateRangePicker instance
* @return {DateRangePicker} - the instance destroyed
*/
destroy() {
this.datepickers[0].destroy();
this.datepickers[1].destroy();
(0,_lib_event_js__WEBPACK_IMPORTED_MODULE_0__/* .unregisterListeners */ .uV)(this);
delete this.element.rangepicker;
}
/**
* Get the start and end dates of the date range
*
* The method returns Date objects by default. If format string is passed,
* it returns date strings formatted in given format.
* The result array always contains 2 items (start date/end date) and
* undefined is used for unselected side. (e.g. If none is selected,
* the result will be [undefined, undefined]. If only the end date is set
* when allowOneSidedRange config option is true, [undefined, endDate] will
* be returned.)
*
* @param {String} [format] - Format string to stringify the dates
* @return {Array} - Start and end dates
*/
getDates(format = undefined) {
const callback = format
? date => (0,_lib_date_format_js__WEBPACK_IMPORTED_MODULE_1__/* .formatDate */ .p6)(date, format, this.datepickers[0].config.locale)
: date => new Date(date);
return this.dates.map(date => date === undefined ? date : callback(date));
}
/**
* Set the start and end dates of the date range
*
* The method calls datepicker.setDate() internally using each of the
* arguments in start→end order.
*
* When a clear: true option object is passed instead of a date, the method
* clears the date.
*
* If an invalid date, the same date as the current one or an option object
* without clear: true is passed, the method considers that argument as an
* "ineffective" argument because calling datepicker.setDate() with those
* values makes no changes to the date selection.
*
* When the allowOneSidedRange config option is false, passing {clear: true}
* to clear the range works only when it is done to the last effective
* argument (in other words, passed to rangeEnd or to rangeStart along with
* ineffective rangeEnd). This is because when the date range is changed,
* it gets normalized based on the last change at the end of the changing
* process.
*
* @param {Date|Number|String|Object} rangeStart - Start date of the range
* or {clear: true} to clear the date
* @param {Date|Number|String|Object} rangeEnd - End date of the range
* or {clear: true} to clear the date
*/
setDates(rangeStart, rangeEnd) {
const [datepicker0, datepicker1] = this.datepickers;
const origDates = this.dates;
// If range normalization runs on every change, we can't set a new range
// that starts after the end of the current range correctly because the
// normalization process swaps start↔︎end right after setting the new start
// date. To prevent this, the normalization process needs to run once after
// both of the new dates are set.
this._updating = true;
datepicker0.setDate(rangeStart);
datepicker1.setDate(rangeEnd);
delete this._updating;
if (datepicker1.dates[0] !== origDates[1]) {
onChangeDate(this, {target: this.inputs[1]});
} else if (datepicker0.dates[0] !== origDates[0]) {
onChangeDate(this, {target: this.inputs[0]});
}
}
}
/***/ }),
/***/ 770:
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
// EXPORTS
__webpack_require__.d(__webpack_exports__, {
"Z": function() { return /* binding */ Datepicker; }
});
// EXTERNAL MODULE: ./node_modules/flowbite-datepicker/js/lib/utils.js
var utils = __webpack_require__(105);
// EXTERNAL MODULE: ./node_modules/flowbite-datepicker/js/lib/date.js
var lib_date = __webpack_require__(560);
// EXTERNAL MODULE: ./node_modules/flowbite-datepicker/js/lib/date-format.js
var date_format = __webpack_require__(963);
// EXTERNAL MODULE: ./node_modules/flowbite-datepicker/js/lib/event.js
var lib_event = __webpack_require__(698);
;// CONCATENATED MODULE: ./node_modules/flowbite-datepicker/js/i18n/base-locales.js
// default locales
const locales = {
en: {
days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
daysMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
today: "Today",
clear: "Clear",
titleFormat: "MM y"
}
};
;// CONCATENATED MODULE: ./node_modules/flowbite-datepicker/js/options/defaultOptions.js
// config options updatable by setOptions() and their default values
const defaultOptions = {
autohide: false,
beforeShowDay: null,
beforeShowDecade: null,
beforeShowMonth: null,
beforeShowYear: null,
calendarWeeks: false,
clearBtn: false,
dateDelimiter: ',',
datesDisabled: [],
daysOfWeekDisabled: [],
daysOfWeekHighlighted: [],
defaultViewDate: undefined, // placeholder, defaults to today() by the program
disableTouchKeyboard: false,
format: 'mm/dd/yyyy',
language: 'en',
maxDate: null,
maxNumberOfDates: 1,
maxView: 3,
minDate: null,
nextArrow: '<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>',
orientation: 'auto',
pickLevel: 0,
prevArrow: '<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd"></path></svg>',
showDaysOfWeek: true,
showOnClick: true,
showOnFocus: true,
startView: 0,
title: '',
todayBtn: false,
todayBtnMode: 0,
todayHighlight: false,
updateOnBlur: true,
weekStart: 0,
};
/* harmony default export */ var options_defaultOptions = (defaultOptions);
;// CONCATENATED MODULE: ./node_modules/flowbite-datepicker/js/lib/dom.js
const range = document.createRange();
function parseHTML(html) {
return range.createContextualFragment(html);
}
// equivalent to jQuery's :visble
function isVisible(el) {
return !!(el.offsetWidth || el.offsetHeight || el.getClientRects().length);
}
function hideElement(el) {
if (el.style.display === 'none') {
return;
}
// back up the existing display setting in data-style-display
if (el.style.display) {
el.dataset.styleDisplay = el.style.display;
}
el.style.display = 'none';
}
function showElement(el) {
if (el.style.display !== 'none') {
return;
}
if (el.dataset.styleDisplay) {
// restore backed-up dispay property
el.style.display = el.dataset.styleDisplay;
delete el.dataset.styleDisplay;
} else {
el.style.display = '';
}
}
function emptyChildNodes(el) {
if (el.firstChild) {
el.removeChild(el.firstChild);
emptyChildNodes(el);
}
}
function replaceChildNodes(el, newChildNodes) {
emptyChildNodes(el);
if (newChildNodes instanceof DocumentFragment) {
el.appendChild(newChildNodes);
} else if (typeof newChildNodes === 'string') {
el.appendChild(parseHTML(newChildNodes));
} else if (typeof newChildNodes.forEach === 'function') {
newChildNodes.forEach((node) => {
el.appendChild(node);
});
}
}
;// CONCATENATED MODULE: ./node_modules/flowbite-datepicker/js/options/processOptions.js
const {
language: defaultLang,
format: defaultFormat,
weekStart: defaultWeekStart,
} = options_defaultOptions;
// Reducer function to filter out invalid day-of-week from the input
function sanitizeDOW(dow, day) {
return dow.length < 6 && day >= 0 && day < 7
? (0,utils/* pushUnique */.$C)(dow, day)
: dow;
}
function calcEndOfWeek(startOfWeek) {
return (startOfWeek + 6) % 7;
}
// validate input date. if invalid, fallback to the original value
function validateDate(value, format, locale, origValue) {
const date = (0,date_format/* parseDate */.sG)(value, format, locale);
return date !== undefined ? date : origValue;
}
// Validate viewId. if invalid, fallback to the original value
function validateViewId(value, origValue, max = 3) {
const viewId = parseInt(value, 10);
return viewId >= 0 && viewId <= max ? viewId : origValue;
}
// Create Datepicker configuration to set
function processOptions(options, datepicker) {
const inOpts = Object.assign({}, options);
const config = {};
const locales = datepicker.constructor.locales;
let {
format,
language,
locale,
maxDate,
maxView,
minDate,
pickLevel,
startView,
weekStart,
} = datepicker.config || {};
if (inOpts.language) {
let lang;
if (inOpts.language !== language) {
if (locales[inOpts.language]) {
lang = inOpts.language;
} else {
// Check if langauge + region tag can fallback to the one without
// region (e.g. fr-CA → fr)
lang = inOpts.language.split('-')[0];
if (locales[lang] === undefined) {
lang = false;
}
}
}
delete inOpts.language;
if (lang) {
language = config.language = lang;
// update locale as well when updating language
const origLocale = locale || locales[defaultLang];
// use default language's properties for the fallback
locale = Object.assign({
format: defaultFormat,
weekStart: defaultWeekStart
}, locales[defaultLang]);
if (language !== defaultLang) {
Object.assign(locale, locales[language]);
}
config.locale = locale;
// if format and/or weekStart are the same as old locale's defaults,
// update them to new locale's defaults
if (format === origLocale.format) {
format = config.format = locale.format;
}
if (weekStart === origLocale.weekStart) {
weekStart = config.weekStart = locale.weekStart;
config.weekEnd = calcEndOfWeek(locale.weekStart);
}
}
}
if (inOpts.format) {
const hasToDisplay = typeof inOpts.format.toDisplay === 'function';
const hasToValue = typeof inOpts.format.toValue === 'function';
const validFormatString = date_format/* reFormatTokens.test */.CL.test(inOpts.format);
if ((hasToDisplay && hasToValue) || validFormatString) {
format = config.format = inOpts.format;
}
delete inOpts.format;
}
//*** dates ***//
// while min and maxDate for "no limit" in the options are better to be null
// (especially when updating), the ones in the config have to be undefined
// because null is treated as 0 (= unix epoch) when comparing with time value
let minDt = minDate;
let maxDt = maxDate;
if (inOpts.minDate !== undefined) {
minDt = inOpts.minDate === null
? (0,lib_date/* dateValue */.by)(0, 0, 1) // set 0000-01-01 to prevent negative values for year
: validateDate(inOpts.minDate, format, locale, minDt);
delete inOpts.minDate;
}
if (inOpts.maxDate !== undefined) {
maxDt = inOpts.maxDate === null
? undefined
: validateDate(inOpts.maxDate, format, locale, maxDt);
delete inOpts.maxDate;
}
if (maxDt < minDt) {
minDate = config.minDate = maxDt;
maxDate = config.maxDate = minDt;
} else {
if (minDate !== minDt) {
minDate = config.minDate = minDt;
}
if (maxDate !== maxDt) {
maxDate = config.maxDate = maxDt;
}
}
if (inOpts.datesDisabled) {
config.datesDisabled = inOpts.datesDisabled.reduce((dates, dt) => {
const date = (0,date_format/* parseDate */.sG)(dt, format, locale);
return date !== undefined ? (0,utils/* pushUnique */.$C)(dates, date) : dates;
}, []);
delete inOpts.datesDisabled;
}
if (inOpts.defaultViewDate !== undefined) {
const viewDate = (0,date_format/* parseDate */.sG)(inOpts.defaultViewDate, format, locale);
if (viewDate !== undefined) {
config.defaultViewDate = viewDate;
}
delete inOpts.defaultViewDate;
}
//*** days of week ***//
if (inOpts.weekStart !== undefined) {
const wkStart = Number(inOpts.weekStart) % 7;
if (!isNaN(wkStart)) {
weekStart = config.weekStart = wkStart;
config.weekEnd = calcEndOfWeek(wkStart);
}
delete inOpts.weekStart;
}
if (inOpts.daysOfWeekDisabled) {
config.daysOfWeekDisabled = inOpts.daysOfWeekDisabled.reduce(sanitizeDOW, []);
delete inOpts.daysOfWeekDisabled;
}
if (inOpts.daysOfWeekHighlighted) {
config.daysOfWeekHighlighted = inOpts.daysOfWeekHighlighted.reduce(sanitizeDOW, []);
delete inOpts.daysOfWeekHighlighted;
}
//*** multi date ***//
if (inOpts.maxNumberOfDates !== undefined) {
const maxNumberOfDates = parseInt(inOpts.maxNumberOfDates, 10);
if (maxNumberOfDates >= 0) {
config.maxNumberOfDates = maxNumberOfDates;
config.multidate = maxNumberOfDates !== 1;
}
delete inOpts.maxNumberOfDates;
}
if (inOpts.dateDelimiter) {
config.dateDelimiter = String(inOpts.dateDelimiter);
delete inOpts.dateDelimiter;
}
//*** pick level & view ***//
let newPickLevel = pickLevel;
if (inOpts.pickLevel !== undefined) {
newPickLevel = validateViewId(inOpts.pickLevel, 2);
delete inOpts.pickLevel;
}
if (newPickLevel !== pickLevel) {
pickLevel = config.pickLevel = newPickLevel;
}
let newMaxView = maxView;
if (inOpts.maxView !== undefined) {
newMaxView = validateViewId(inOpts.maxView, maxView);
delete inOpts.maxView;
}
// ensure max view >= pick level
newMaxView = pickLevel > newMaxView ? pickLevel : newMaxView;
if (newMaxView !== maxView) {
maxView = config.maxView = newMaxView;
}
let newStartView = startView;
if (inOpts.startView !== undefined) {
newStartView = validateViewId(inOpts.startView, newStartView);
delete inOpts.startView;
}
// ensure pick level <= start view <= max view
if (newStartView < pickLevel) {
newStartView = pickLevel;
} else if (newStartView > maxView) {
newStartView = maxView;
}
if (newStartView !== startView) {
config.startView = newStartView;
}
//*** template ***//
if (inOpts.prevArrow) {
const prevArrow = parseHTML(inOpts.prevArrow);
if (prevArrow.childNodes.length > 0) {
config.prevArrow = prevArrow.childNodes;
}
delete inOpts.prevArrow;
}
if (inOpts.nextArrow) {
const nextArrow = parseHTML(inOpts.nextArrow);
if (nextArrow.childNodes.length > 0) {
config.nextArrow = nextArrow.childNodes;
}
delete inOpts.nextArrow;
}
//*** misc ***//
if (inOpts.disableTouchKeyboard !== undefined) {
config.disableTouchKeyboard = 'ontouchstart' in document && !!inOpts.disableTouchKeyboard;
delete inOpts.disableTouchKeyboard;
}
if (inOpts.orientation) {
const orientation = inOpts.orientation.toLowerCase().split(/\s+/g);
config.orientation = {
x: orientation.find(x => (x === 'left' || x === 'right')) || 'auto',
y: orientation.find(y => (y === 'top' || y === 'bottom')) || 'auto',
};
delete inOpts.orientation;
}
if (inOpts.todayBtnMode !== undefined) {
switch(inOpts.todayBtnMode) {
case 0:
case 1:
config.todayBtnMode = inOpts.todayBtnMode;
}
delete inOpts.todayBtnMode;
}
//*** copy the rest ***//
Object.keys(inOpts).forEach((key) => {
if (inOpts[key] !== undefined && (0,utils/* hasProperty */.l$)(options_defaultOptions, key)) {
config[key] = inOpts[key];
}
});
return config;
}
;// CONCATENATED MODULE: ./node_modules/flowbite-datepicker/js/picker/templates/pickerTemplate.js
const pickerTemplate = (0,utils/* optimizeTemplateHTML */.zh)(`<div class="datepicker hidden">
<div class="datepicker-picker inline-block rounded-lg bg-white dark:bg-gray-700 shadow-lg p-4">
<div class="datepicker-header">
<div class="datepicker-title bg-white dark:bg-gray-700 dark:text-white px-2 py-3 text-center font-semibold"></div>
<div class="datepicker-controls flex justify-between mb-2">
<button type="button" class="bg-white dark:bg-gray-700 rounded-lg text-gray-500 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-600 hover:text-gray-900 dark:hover:text-white text-lg p-2.5 focus:outline-none focus:ring-2 focus:ring-gray-200 prev-btn"></button>
<button type="button" class="text-sm rounded-lg text-gray-900 dark:text-white bg-white dark:bg-gray-700 font-semibold py-2.5 px-5 hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-200 view-switch"></button>
<button type="button" class="bg-white dark:bg-gray-700 rounded-lg text-gray-500 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-600 hover:text-gray-900 dark:hover:text-white text-lg p-2.5 focus:outline-none focus:ring-2 focus:ring-gray-200 next-btn"></button>
</div>
</div>
<div class="datepicker-main p-1"></div>
<div class="datepicker-footer">
<div class="datepicker-controls flex space-x-2 mt-2">
<button type="button" class="%buttonClass% today-btn text-white bg-blue-700 dark:bg-blue-600 hover:bg-blue-800 dark:hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2 text-center w-1/2"></button>
<button type="button" class="%buttonClass% clear-btn text-gray-900 dark:text-white bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-600 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2 text-center w-1/2"></button>
</div>
</div>
</div>
</div>`);
/* harmony default export */ var templates_pickerTemplate = (pickerTemplate);
;// CONCATENATED MODULE: ./node_modules/flowbite-datepicker/js/picker/templates/daysTemplate.js
const daysTemplate = (0,utils/* optimizeTemplateHTML */.zh)(`<div class="days">
<div class="days-of-week grid grid-cols-7 mb-1">${(0,utils/* createTagRepeat */.em)('span', 7, {class: 'dow block flex-1 leading-9 border-0 rounded-lg cursor-default text-center text-gray-900 font-semibold text-sm'})}</div>
<div class="datepicker-grid w-64 grid grid-cols-7">${(0,utils/* createTagRepeat */.em)('span', 42 , {class: 'block flex-1 leading-9 border-0 rounded-lg cursor-default text-center text-gray-900 font-semibold text-sm h-6 leading-6 text-sm font-medium text-gray-500 dark:text-gray-400'})}</div>
</div>`);
/* harmony default export */ var templates_daysTemplate = (daysTemplate);
;// CONCATENATED MODULE: ./node_modules/flowbite-datepicker/js/picker/templates/calendarWeeksTemplate.js
const calendarWeeksTemplate = (0,utils/* optimizeTemplateHTML */.zh)(`<div class="calendar-weeks">
<div class="days-of-week flex"><span class="dow h-6 leading-6 text-sm font-medium text-gray-500 dark:text-gray-400"></span></div>
<div class="weeks">${(0,utils/* createTagRepeat */.em)('span', 6, {class: 'week block flex-1 leading-9 border-0 rounded-lg cursor-default text-center text-gray-900 font-semibold text-sm'})}</div>
</div>`);
/* harmony default export */ var templates_calendarWeeksTemplate = (calendarWeeksTemplate);
;// CONCATENATED MODULE: ./node_modules/flowbite-datepicker/js/picker/views/View.js
// Base class of the view classes
class View {
constructor(picker, config) {
Object.assign(this, config, {
picker,
element: parseHTML(`<div class="datepicker-view flex"></div>`).firstChild,
selected: [],
});
this.init(this.picker.datepicker.config);
}
init(options) {
if (options.pickLevel !== undefined) {
this.isMinView = this.id === options.pickLevel;
}
this.setOptions(options);
this.updateFocus();
this.updateSelection();
}
// Execute beforeShow() callback and apply the result to the element
// args:
// - current - current value on the iteration on view rendering
// - timeValue - time value of the date to pass to beforeShow()
performBeforeHook(el, current, timeValue) {
let result = this.beforeShow(new Date(timeValue));
switch (typeof result) {
case 'boolean':
result = {enabled: result};
break;
case 'string':
result = {classes: result};
}
if (result) {
if (result.enabled === false) {
el.classList.add('disabled');
(0,utils/* pushUnique */.$C)(this.disabled, current);
}
if (result.classes) {
const extraClasses = result.classes.split(/\s+/);
el.classList.add(...extraClasses);
if (extraClasses.includes('disabled')) {
(0,utils/* pushUnique */.$C)(this.disabled, current);
}
}
if (result.content) {
replaceChildNodes(el, result.content);
}
}
}
}
;// CONCATENATED MODULE: ./node_modules/flowbite-datepicker/js/picker/views/DaysView.js
class DaysView extends View {
constructor(picker) {
super(picker, {
id: 0,
name: 'days',
cellClass: 'day',
});
}
init(options, onConstruction = true) {
if (onConstruction) {
const inner = parseHTML(templates_daysTemplate).firstChild;
this.dow = inner.firstChild;
this.grid = inner.lastChild;
this.element.appendChild(inner);
}
super.init(options);
}
setOptions(options) {
let updateDOW;
if ((0,utils/* hasProperty */.l$)(options, 'minDate')) {
this.minDate = options.minDate;
}
if ((0,utils/* hasProperty */.l$)(options, 'maxDate')) {
this.maxDate = options.maxDate;
}
if (options.datesDisabled) {
this.datesDisabled = options.datesDisabled;
}
if (options.daysOfWeekDisabled) {
this.daysOfWeekDisabled = options.daysOfWeekDisabled;
updateDOW = true;
}
if (options.daysOfWeekHighlighted) {
this.daysOfWeekHighlighted = options.daysOfWeekHighlighted;
}
if (options.todayHighlight !== undefined) {
this.todayHighlight = options.todayHighlight;
}
if (options.weekStart !== undefined) {
this.weekStart = options.weekStart;
this.weekEnd = options.weekEnd;
updateDOW = true;
}
if (options.locale) {
const locale = this.locale = options.locale;
this.dayNames = locale.daysMin;
this.switchLabelFormat = locale.titleFormat;
updateDOW = true;
}
if (options.beforeShowDay !== undefined) {
this.beforeShow = typeof options.beforeShowDay === 'function'
? options.beforeShowDay
: undefined;
}
if (options.calendarWeeks !== undefined) {
if (options.calendarWeeks && !this.calendarWeeks) {
const weeksElem = parseHTML(templates_calendarWeeksTemplate).firstChild;
this.calendarWeeks = {
element: weeksElem,
dow: weeksElem.firstChild,
weeks: weeksElem.lastChild,
};
this.element.insertBefore(weeksElem, this.element.firstChild);
} else if (this.calendarWeeks && !options.calendarWeeks) {
this.element.removeChild(this.calendarWeeks.element);
this.calendarWeeks = null;
}
}
if (options.showDaysOfWeek !== undefined) {
if (options.showDaysOfWeek) {
showElement(this.dow);
if (this.calendarWeeks) {
showElement(this.calendarWeeks.dow);
}
} else {
hideElement(this.dow);
if (this.calendarWeeks) {
hideElement(this.calendarWeeks.dow);
}
}
}
// update days-of-week when locale, daysOfweekDisabled or weekStart is changed
if (updateDOW) {
Array.from(this.dow.children).forEach((el, index) => {
const dow = (this.weekStart + index) % 7;
el.textContent = this.dayNames[dow];
el.className = this.daysOfWeekDisabled.includes(dow) ? 'dow disabled text-center h-6 leading-6 text-sm font-medium text-gray-500 dark:text-gray-400 cursor-not-allowed' : 'dow text-center h-6 leading-6 text-sm font-medium text-gray-500 dark:text-gray-400';
});
}
}
// Apply update on the focused date to view's settings
updateFocus() {
const viewDate = new Date(this.picker.viewDate);
const viewYear = viewDate.getFullYear();
const viewMonth = viewDate.getMonth();
const firstOfMonth = (0,lib_date/* dateValue */.by)(viewYear, viewMonth, 1);
const start = (0,lib_date/* dayOfTheWeekOf */.fr)(firstOfMonth, this.weekStart, this.weekStart);
this.first = firstOfMonth;
this.last = (0,lib_date/* dateValue */.by)(viewYear, viewMonth + 1, 0);
this.start = start;
this.focused = this.picker.viewDate;
}
// Apply update on the selected dates to view's settings
updateSelection() {
const {dates, rangepicker} = this.picker.datepicker;
this.selected = dates;
if (rangepicker) {
this.range = rangepicker.dates;
}
}
// Update the entire view UI
render() {
// update today marker on ever render
this.today = this.todayHighlight ? (0,lib_date/* today */.Lg)() : undefined;
// refresh disabled dates on every render in order to clear the ones added
// by beforeShow hook at previous render
this.disabled = [...this.datesDisabled];
const switchLabel = (0,date_format/* formatDate */.p6)(this.focused, this.switchLabelFormat, this.locale);
this.picker.setViewSwitchLabel(switchLabel);
this.picker.setPrevBtnDisabled(this.first <= this.minDate);
this.picker.setNextBtnDisabled(this.last >= this.maxDate);
if (this.calendarWeeks) {
// start of the UTC week (Monday) of the 1st of the month
const startOfWeek = (0,lib_date/* dayOfTheWeekOf */.fr)(this.first, 1, 1);
Array.from(this.calendarWeeks.weeks.children).forEach((el, index) => {
el.textContent = (0,lib_date/* getWeek */.Qk)((0,lib_date/* addWeeks */.jh)(startOfWeek, index));
});
}
Array.from(this.grid.children).forEach((el, index) => {
const classList = el.classList;
const current = (0,lib_date/* addDays */.E4)(this.start, index);
const date = new Date(current);
const day = date.getDay();
el.className = `datepicker-cell hover:bg-gray-100 dark:hover:bg-gray-600 block flex-1 leading-9 border-0 rounded-lg cursor-pointer text-center text-gray-900 dark:text-white font-semibold text-sm ${this.cellClass}`;
el.dataset.date = current;
el.textContent = date.getDate();
if (current < this.first) {
classList.add('prev', 'text-gray-500', 'dark:text-white');
} else if (current > this.last) {
classList.add('next', 'text-gray-500', 'dark:text-white');
}
if (this.today === current) {
classList.add('today', 'bg-gray-100', 'dark:bg-gray-600');
}
if (current < this.minDate || current > this.maxDate || this.disabled.includes(current)) {
classList.add('disabled', 'cursor-not-allowed');
}
if (this.daysOfWeekDisabled.includes(day)) {
classList.add('disabled', 'cursor-not-allowed');
(0,utils/* pushUnique */.$C)(this.disabled, current);
}
if (this.daysOfWeekHighlighted.includes(day)) {
classList.add('highlighted');
}
if (this.range) {
const [rangeStart, rangeEnd] = this.range;
if (current > rangeStart && current < rangeEnd) {
classList.add('range', 'bg-gray-200', 'dark:bg-gray-600');
classList.remove('rounded-lg', 'rounded-l-lg', 'rounded-r-lg')
}
if (current === rangeStart) {
classList.add('range-start', 'bg-gray-100', 'dark:bg-gray-600', 'rounded-l-lg');
classList.remove('rounded-lg', 'rounded-r-lg');
}
if (current === rangeEnd) {
classList.add('range-end', 'bg-gray-100', 'dark:bg-gray-600', 'rounded-r-lg');
classList.remove('rounded-lg', 'rounded-l-lg');
}
}
if (this.selected.includes(current)) {
classList.add('selected', 'bg-blue-700', 'text-white', 'dark:bg-blue-600', 'dark:text-white');
classList.remove('text-gray-900', 'text-gray-500', 'hover:bg-gray-100', 'dark:text-white', 'dark:hover:bg-gray-600', 'dark:bg-gray-600', 'bg-gray-100', 'bg-gray-200');
}
if (current === this.focused) {
classList.add('focused');
}
if (this.beforeShow) {
this.performBeforeHook(el, current, current);
}
});
}
// Update the view UI by applying the changes of selected and focused items
refresh() {
const [rangeStart, rangeEnd] = this.range || [];
this.grid
.querySelectorAll('.range, .range-start, .range-end, .selected, .focused')
.forEach((el) => {
el.classList.remove('range', 'range-start', 'range-end', 'selected', 'bg-blue-700', 'text-white', 'dark:bg-blue-600', 'dark:text-white', 'focused');
el.classList.add('text-gray-900', 'rounded-lg', 'dark:text-white');
});
Array.from(this.grid.children).forEach((el) => {
const current = Number(el.dataset.date);
const classList = el.classList;
classList.remove('bg-gray-200', 'dark:bg-gray-600', 'rounded-l-lg', 'rounded-r-lg')
if (current > rangeStart && current < rangeEnd) {
classList.add('range', 'bg-gray-200', 'dark:bg-gray-600');
classList.remove('rounded-lg');
}
if (current === rangeStart) {
classList.add('range-start', 'bg-gray-200', 'dark:bg-gray-600', 'rounded-l-lg');
classList.remove('rounded-lg', 'rounded-r-lg');
}
if (current === rangeEnd) {
classList.add('range-end', 'bg-gray-200', 'dark:bg-gray-600', 'rounded-r-lg');
classList.remove('rounded-lg', 'rounded-l-lg');
}
if (this.selected.includes(current)) {
classList.add('selected', 'bg-blue-700', 'text-white', 'dark:bg-blue-600', 'dark:text-white');
classList.remove('text-gray-900', 'hover:bg-gray-100', 'dark:text-white', 'dark:hover:bg-gray-600', 'bg-gray-100', 'bg-gray-200', 'dark:bg-gray-600');
}
if (current === this.focused) {
classList.add('focused');
}
});
}
// Update the view UI by applying the change of focused item
refreshFocus() {
const index = Math.round((this.focused - this.start) / 86400000);
this.grid.querySelectorAll('.focused').forEach((el) => {
el.classList.remove('focused');
});
this.grid.children[index].classList.add('focused');
}
}
;// CONCATENATED MODULE: ./node_modules/flowbite-datepicker/js/picker/views/MonthsView.js
function computeMonthRange(range, thisYear) {
if (!range || !range[0] || !range[1]) {
return;
}
const [[startY, startM], [endY, endM]] = range;
if (startY > thisYear || endY < thisYear) {
return;
}
return [
startY === thisYear ? startM : -1,
endY === thisYear ? endM : 12,
];
}
class MonthsView extends View {
constructor(picker) {
super(picker, {
id: 1,
name: 'months',
cellClass: 'month',
});
}
init(options, onConstruction = true) {
if (onConstruction) {
this.grid = this.element;
this.element.classList.add('months', 'datepicker-grid', 'w-64', 'grid', 'grid-cols-4');
this.grid.appendChild(parseHTML((0,utils/* createTagRepeat */.em)('span', 12, {'data-month': ix => ix})));
}
super.init(options);
}
setOptions(options) {
if (options.locale) {
this.monthNames = options.locale.monthsShort;
}
if ((0,utils/* hasProperty */.l$)(options, 'minDate')) {
if (options.minDate === undefined) {
this.minYear = this.minMonth = this.minDate = undefined;
} else {
const minDateObj = new Date(options.minDate);
this.minYear = minDateObj.getFullYear();
this.minMonth = minDateObj.getMonth();
this.minDate = minDateObj.setDate(1);
}
}
if ((0,utils/* hasProperty */.l$)(options, 'maxDate')) {
if (options.maxDate === undefined) {
this.maxYear = this.maxMonth = this.maxDate = undefined;
} else {
const maxDateObj = new Date(options.maxDate);
this.maxYear = maxDateObj.getFullYear();
this.maxMonth = maxDateObj.getMonth();
this.maxDate = (0,lib_date/* dateValue */.by)(this.maxYear, this.maxMonth + 1, 0);
}
}
if (options.beforeShowMonth !== undefined) {
this.beforeShow = typeof options.beforeShowMonth === 'function'
? options.beforeShowMonth
: undefined;
}
}
// Update view's settings to reflect the viewDate set on the picker
updateFocus() {
const viewDate = new Date(this.picker.viewDate);
this.year = viewDate.getFullYear();
this.focused = viewDate.getMonth();
}
// Update view's settings to reflect the selected dates
updateSelection() {
const {dates, rangepicker} = this.picker.datepicker;
this.selected = dates.reduce((selected, timeValue) => {
const date = new Date(timeValue);
const year = date.getFullYear();
const month = date.getMonth();
if (selected[year] === undefined) {
selected[year] = [month];
} else {
(0,utils/* pushUnique */.$C)(selected[year], month);
}
return selected;
}, {});
if (rangepicker && rangepicker.dates) {
this.range = rangepicker.dates.map(timeValue => {
const date = new Date(timeValue);
return isNaN(date) ? undefined : [date.getFullYear(), date.getMonth()];
});
}
}
// Update the entire view UI
render() {
// refresh disabled months on every render in order to clear the ones added
// by beforeShow hook at previous render
this.disabled = [];
this.picker.setViewSwitchLabel(this.year);
this.picker.setPrevBtnDisabled(this.year <= this.minYear);
this.picker.setNextBtnDisabled(this.year >= this.maxYear);
const selected = this.selected[this.year] || [];
const yrOutOfRange = this.year < this.minYear || this.year > this.maxYear;
const isMinYear = this.year === this.minYear;
const isMaxYear = this.year === this.maxYear;
const range = computeMonthRange(this.range, this.year);
Array.from(this.grid.children).forEach((el, index) => {
const classList = el.classList;
const date = (0,lib_date/* dateValue */.by)(this.year, index, 1);
el.className = `datepicker-cell hover:bg-gray-100 dark:hover:bg-gray-600 block flex-1 leading-9 border-0 rounded-lg cursor-pointer text-center text-gray-900 dark:text-white font-semibold text-sm ${this.cellClass}`;
if (this.isMinView) {
el.dataset.date = date;
}
// reset text on every render to clear the custom content set
// by beforeShow hook at previous render
el.textContent = this.monthNames[index];
if (
yrOutOfRange
|| isMinYear && index < this.minMonth
|| isMaxYear && index > this.maxMonth
) {
classList.add('disabled');
}
if (range) {
const [rangeStart, rangeEnd] = range;
if (index > rangeStart && index < rangeEnd) {
classList.add('range');
}
if (index === rangeStart) {
classList.add('range-start');
}
if (index === rangeEnd) {
classList.add('range-end');
}
}
if (selected.includes(index)) {
classList.add('selected', 'bg-blue-700', 'text-white', 'dark:bg-blue-600', 'dark:text-white');
classList.remove('text-gray-900', 'hover:bg-gray-100', 'dark:text-white', 'dark:hover:bg-gray-600');
}
if (index === this.focused) {
classList.add('focused');
}
if (this.beforeShow) {
this.performBeforeHook(el, index, date);
}
});
}
// Update the view UI by applying the changes of selected and focused items
refresh() {
const selected = this.selected[this.year] || [];
const [rangeStart, rangeEnd] = computeMonthRange(this.range, this.year) || [];
this.grid
.querySelectorAll('.range, .range-start, .range-end, .selected, .focused')
.forEach((el) => {
el.classList.remove('range', 'range-start', 'range-end', 'selected', 'bg-blue-700', 'dark:bg-blue-600', 'dark:text-white', 'text-white', 'focused');
el.classList.add('text-gray-900', 'hover:bg-gray-100', 'dark:text-white', 'dark:hover:bg-gray-600');
});
Array.from(this.grid.children).forEach((el, index) => {
const classList = el.classList;
if (index > rangeStart && index < rangeEnd) {
classList.add('range');
}
if (index === rangeStart) {
classList.add('range-start');
}
if (index === rangeEnd) {
classList.add('range-end');
}
if (selected.includes(index)) {
classList.add('selected', 'bg-blue-700', 'text-white', 'dark:bg-blue-600', 'dark:text-white');
classList.remove('text-gray-900', 'hover:bg-gray-100', 'dark:text-white', 'dark:hover:bg-gray-600');
}
if (index === this.focused) {
classList.add('focused');
}
});
}
// Update the view UI by applying the change of focused item
refreshFocus() {
this.grid.querySelectorAll('.focused').forEach((el) => {
el.classList.remove('focused');
});
this.grid.children[this.focused].classList.add('focused');
}
}
;// CONCATENATED MODULE: ./node_modules/flowbite-datepicker/js/picker/views/YearsView.js
function toTitleCase(word) {
return [...word].reduce((str, ch, ix) => str += ix ? ch : ch.toUpperCase(), '');
}
// Class representing the years and decades view elements
class YearsView extends View {
constructor(picker, config) {
super(picker, config);
}
init(options, onConstruction = true) {
if (onConstruction) {
this.navStep = this.step * 10;
this.beforeShowOption = `beforeShow${toTitleCase(this.cellClass)}`;
this.grid = this.element;
this.element.classList.add(this.name, 'datepicker-grid', 'w-64', 'grid', 'grid-cols-4');
this.grid.appendChild(parseHTML((0,utils/* createTagRepeat */.em)('span', 12)));
}
super.init(options);
}
setOptions(options) {
if ((0,utils/* hasProperty */.l$)(options, 'minDate')) {
if (options.minDate === undefined) {
this.minYear = this.minDate = undefined;
} else {
this.minYear = (0,lib_date/* startOfYearPeriod */.ak)(options.minDate, this.step);
this.minDate = (0,lib_date/* dateValue */.by)(this.minYear, 0, 1);
}
}
if ((0,utils/* hasProperty */.l$)(options, 'maxDate')) {
if (options.maxDate === undefined) {
this.maxYear = this.maxDate = undefined;
} else {
this.maxYear = (0,lib_date/* startOfYearPeriod */.ak)(options.maxDate, this.step);
this.maxDate = (0,lib_date/* dateValue */.by)(this.maxYear, 11, 31);
}
}
if (options[this.beforeShowOption] !== undefined) {
const beforeShow = options[this.beforeShowOption];
this.beforeShow = typeof beforeShow === 'function' ? beforeShow : undefined;
}
}
// Update view's settings to reflect the viewDate set on the picker
updateFocus() {
const viewDate = new Date(this.picker.viewDate);
const first = (0,lib_date/* startOfYearPeriod */.ak)(viewDate, this.navStep);
const last = first + 9 * this.step;
this.first = first;
this.last = last;
this.start = first - this.step;
this.focused = (0,lib_date/* startOfYearPeriod */.ak)(viewDate, this.step);
}
// Update view's settings to reflect the selected dates
updateSelection() {
const {dates, rangepicker} = this.picker.datepicker;
this.selected = dates.reduce((years, timeValue) => {
return (0,utils/* pushUnique */.$C)(years, (0,lib_date/* startOfYearPeriod */.ak)(timeValue, this.step));
}, []);
if (rangepicker && rangepicker.dates) {
this.range = rangepicker.dates.map(timeValue => {
if (timeValue !== undefined) {
return (0,lib_date/* startOfYearPeriod */.ak)(timeValue, this.step);
}
});
}
}
// Update the entire view UI
render() {
// refresh disabled years on every render in order to clear the ones added
// by beforeShow hook at previous render
this.disabled = [];
this.picker.setViewSwitchLabel(`${this.first}-${this.last}`);
this.picker.setPrevBtnDisabled(this.first <= this.minYear);
this.picker.setNextBtnDisabled(this.last >= this.maxYear);
Array.from(this.grid.children).forEach((el, index) => {
const classList = el.classList;
const current = this.start + (index * this.step);
const date = (0,lib_date/* dateValue */.by)(current, 0, 1);
el.className = `datepicker-cell hover:bg-gray-100 dark:hover:bg-gray-600 block flex-1 leading-9 border-0 rounded-lg cursor-pointer text-center text-gray-900 dark:text-white font-semibold text-sm ${this.cellClass}`;
if (this.isMinView) {
el.dataset.date = date;
}
el.textContent = el.dataset.year = current;
if (index === 0) {
classList.add('prev');
} else if (index === 11) {
classList.add('next');
}
if (current < this.minYear || current > this.maxYear) {
classList.add('disabled');
}
if (this.range) {
const [rangeStart, rangeEnd] = this.range;
if (current > rangeStart && current < rangeEnd) {
classList.add('range');
}
if (current === rangeStart) {
classList.add('range-start');
}
if (current === rangeEnd) {
classList.add('range-end');
}
}
if (this.selected.includes(current)) {
classList.add('selected', 'bg-blue-700', 'text-white', 'dark:bg-blue-600', 'dark:text-white');
classList.remove('text-gray-900', 'hover:bg-gray-100', 'dark:text-white', 'dark:hover:bg-gray-600');
}
if (current === this.focused) {
classList.add('focused');
}
if (this.beforeShow) {
this.performBeforeHook(el, current, date);
}
});
}
// Update the view UI by applying the changes of selected and focused items
refresh() {
const [rangeStart, rangeEnd] = this.range || [];
this.grid
.querySelectorAll('.range, .range-start, .range-end, .selected, .focused')
.forEach((el) => {
el.classList.remove('range', 'range-start', 'range-end', 'selected', 'bg-blue-700', 'text-white', 'dark:bg-blue-600', 'dark:text-white', 'focused');
});
Array.from(this.grid.children).forEach((el) => {
const current = Number(el.textContent);
const classList = el.classList;
if (current > rangeStart && current < rangeEnd) {
classList.add('range');
}
if (current === rangeStart) {
classList.add('range-start');
}
if (current === rangeEnd) {
classList.add('range-end');
}
if (this.selected.includes(current)) {
classList.add('selected', 'bg-blue-700', 'text-white', 'dark:bg-blue-600', 'dark:text-white');
classList.remove('text-gray-900', 'hover:bg-gray-100', 'dark:text-white', 'dark:hover:bg-gray-600');
}
if (current === this.focused) {
classList.add('focused');
}
});
}
// Update the view UI by applying the change of focused item
refreshFocus() {
const index = Math.round((this.focused - this.start) / this.step);
this.grid.querySelectorAll('.focused').forEach((el) => {
el.classList.remove('focused');
});
this.grid.children[index].classList.add('focused');
}
}
;// CONCATENATED MODULE: ./node_modules/flowbite-datepicker/js/events/functions.js
function triggerDatepickerEvent(datepicker, type) {
const detail = {
date: datepicker.getDate(),
viewDate: new Date(datepicker.picker.viewDate),
viewId: datepicker.picker.currentView.id,
datepicker,
};
datepicker.element.dispatchEvent(new CustomEvent(type, {detail}));
}
// direction: -1 (to previous), 1 (to next)
function goToPrevOrNext(datepicker, direction) {
const {minDate, maxDate} = datepicker.config;
const {currentView, viewDate} = datepicker.picker;
let newViewDate;
switch (currentView.id) {
case 0:
newViewDate = (0,lib_date/* addMonths */.zI)(viewDate, direction);
break;
case 1:
newViewDate = (0,lib_date/* addYears */.Bc)(viewDate, direction);
break;
default:
newViewDate = (0,lib_date/* addYears */.Bc)(viewDate, direction * currentView.navStep);
}
newViewDate = (0,utils/* limitToRange */.jG)(newViewDate, minDate, maxDate);
datepicker.picker.changeFocus(newViewDate).render();
}
function switchView(datepicker) {
const viewId = datepicker.picker.currentView.id;
if (viewId === datepicker.config.maxView) {
return;