New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@coreui/coreui-pro

Package Overview
Dependencies
Maintainers
1
Versions
139
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@coreui/coreui-pro - npm Package Compare versions

Comparing version 4.6.0-beta.0 to 4.6.0

js/src/picker.js
scss/_picker.scss
scss/themes/dark.scss
scss/themes/dark/_root.scss
scss/themes/dark/_utilities.scss
scss/themes/dark/_variables.scss

2

js/dist/alert.js
/*!
* CoreUI alert.js v4.6.0-beta.0 (https://coreui.io)
* CoreUI alert.js v4.6.0 (https://coreui.io)
* Copyright 2023 The CoreUI Team (https://github.com/orgs/coreui/people)

@@ -4,0 +4,0 @@ * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)

4

js/dist/base-component.js
/*!
* CoreUI base-component.js v4.6.0-beta.0 (https://coreui.io)
* CoreUI base-component.js v4.6.0 (https://coreui.io)
* Copyright 2023 The CoreUI Team (https://github.com/orgs/coreui/people)

@@ -27,3 +27,3 @@ * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)

const VERSION = '4.6.0-beta.0';
const VERSION = '4.6.0';

@@ -30,0 +30,0 @@ /**

2

js/dist/button.js
/*!
* CoreUI button.js v4.6.0-beta.0 (https://coreui.io)
* CoreUI button.js v4.6.0 (https://coreui.io)
* Copyright 2023 The CoreUI Team (https://github.com/orgs/coreui/people)

@@ -4,0 +4,0 @@ * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)

29

js/dist/calendar.js
/*!
* CoreUI calendar.js v4.6.0-beta.0 (https://coreui.io)
* CoreUI calendar.js v4.6.0 (https://coreui.io)
* Copyright 2023 The CoreUI Team (https://github.com/orgs/coreui/people)

@@ -16,3 +16,3 @@ * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)

* CoreUI PRO calendar.js
* License (https://coreui.io/pro/license-new/)
* License (https://coreui.io/pro/license/)
* --------------------------------------------------------------------------

@@ -23,4 +23,6 @@ */

/**
* Constants
*/
* ------------------------------------------------------------------------
* Constants
* ------------------------------------------------------------------------
*/

@@ -75,4 +77,6 @@ const NAME = 'calendar';

/**
* Class definition
*/
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/

@@ -407,4 +411,6 @@ class Calendar extends BaseComponent {

/**
* Data API implementation
*/
* ------------------------------------------------------------------------
* Data Api implementation
* ------------------------------------------------------------------------
*/

@@ -418,4 +424,7 @@ EventHandler.on(window, EVENT_LOAD_DATA_API, () => {

/**
* jQuery
*/
* ------------------------------------------------------------------------
* jQuery
* ------------------------------------------------------------------------
* add .Calendar to jQuery only if jQuery is present
*/

@@ -422,0 +431,0 @@ index_js.defineJQueryPlugin(Calendar);

2

js/dist/carousel.js
/*!
* CoreUI carousel.js v4.6.0-beta.0 (https://coreui.io)
* CoreUI carousel.js v4.6.0 (https://coreui.io)
* Copyright 2023 The CoreUI Team (https://github.com/orgs/coreui/people)

@@ -4,0 +4,0 @@ * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)

2

js/dist/collapse.js
/*!
* CoreUI collapse.js v4.6.0-beta.0 (https://coreui.io)
* CoreUI collapse.js v4.6.0 (https://coreui.io)
* Copyright 2023 The CoreUI Team (https://github.com/orgs/coreui/people)

@@ -4,0 +4,0 @@ * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)

67

js/dist/date-picker.js
/*!
* CoreUI date-picker.js v4.6.0-beta.0 (https://coreui.io)
* CoreUI date-picker.js v4.6.0 (https://coreui.io)
* Copyright 2023 The CoreUI Team (https://github.com/orgs/coreui/people)

@@ -15,3 +15,3 @@ * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)

* CoreUI PRO date-picker.js
* License (https://coreui.io/pro/license-new/)
* License (https://coreui.io/pro/license/)
* --------------------------------------------------------------------------

@@ -22,4 +22,6 @@ */

/**
* Constants
*/
* ------------------------------------------------------------------------
* Constants
* ------------------------------------------------------------------------
*/

@@ -30,12 +32,5 @@ const NAME = 'date-picker';

const DATA_API_KEY = '.data-api';
const TAB_KEY = 'Tab';
const RIGHT_MOUSE_BUTTON = 2;
const EVENT_DATE_CHANGE = `dateChange${EVENT_KEY}`;
const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`;
const EVENT_KEYUP_DATA_API = `keyup${EVENT_KEY}${DATA_API_KEY}`;
const EVENT_LOAD_DATA_API = `load${EVENT_KEY}${DATA_API_KEY}`;
const CLASS_NAME_SHOW = 'show';
const SELECTOR_CALENDAR = '.calendar';
const SELECTOR_DATA_TOGGLE = '[data-coreui-toggle="date-picker"]:not(.disabled):not(:disabled)';
const SELECTOR_DATA_TOGGLE_SHOWN = `${SELECTOR_DATA_TOGGLE}.${CLASS_NAME_SHOW}`;
const SELECTOR_DATA_TOGGLE = '[data-coreui-toggle="date-picker"]';
const Default = {

@@ -54,7 +49,10 @@ ...DateRangePicker.Default,

/**
* Class definition
*/
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
class DatePicker extends DateRangePicker {
// Getters
static get Default() {

@@ -71,5 +69,6 @@ return Default;

// Overrides
_addCalendarEventListeners() {
super._addCalendarEventListeners();
for (const calendar of SelectorEngine.find(SELECTOR_CALENDAR, this._element)) {
for (const calendar of SelectorEngine.find('.calendar', this._element)) {
EventHandler.on(calendar, 'startDateChange.coreui.calendar', event => {

@@ -79,3 +78,3 @@ this._startDate = event.date;

this._startInput.value = this._setInputValue(event.date);
this._updateDateRangePickerCalendars();
this._updateCalendars();
EventHandler.trigger(this._element, EVENT_DATE_CHANGE, {

@@ -112,28 +111,9 @@ date: event.date,

}
static clearMenus(event) {
if (event.button === RIGHT_MOUSE_BUTTON || event.type === 'keyup' && event.key !== TAB_KEY) {
return;
}
const openToggles = SelectorEngine.find(SELECTOR_DATA_TOGGLE_SHOWN);
for (const toggle of openToggles) {
const context = DatePicker.getInstance(toggle);
if (!context) {
continue;
}
const composedPath = event.composedPath();
if (composedPath.includes(context._element)) {
continue;
}
({
relatedTarget: context._element
});
if (event.type === 'click') ;
context.hide();
}
}
}
/**
* Data API implementation
*/
* ------------------------------------------------------------------------
* Data Api implementation
* ------------------------------------------------------------------------
*/

@@ -146,8 +126,9 @@ EventHandler.on(window, EVENT_LOAD_DATA_API, () => {

});
EventHandler.on(document, EVENT_CLICK_DATA_API, DatePicker.clearMenus);
EventHandler.on(document, EVENT_KEYUP_DATA_API, DatePicker.clearMenus);
/**
* jQuery
*/
* ------------------------------------------------------------------------
* jQuery
* ------------------------------------------------------------------------
* add .DatePicker to jQuery only if jQuery is present
*/

@@ -154,0 +135,0 @@ index_js.defineJQueryPlugin(DatePicker);

573

js/dist/date-range-picker.js
/*!
* CoreUI date-range-picker.js v4.6.0-beta.0 (https://coreui.io)
* CoreUI date-range-picker.js v4.6.0 (https://coreui.io)
* Copyright 2023 The CoreUI Team (https://github.com/orgs/coreui/people)

@@ -7,30 +7,11 @@ * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)

(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('@popperjs/core'), require('date-fns'), require('./base-component.js'), require('./calendar.js'), require('./time-picker.js'), require('./dom/event-handler.js'), require('./dom/manipulator.js'), require('./dom/selector-engine.js'), require('./util/index.js'), require('./util/calendar.js')) :
typeof define === 'function' && define.amd ? define(['@popperjs/core', 'date-fns', './base-component', './calendar', './time-picker', './dom/event-handler', './dom/manipulator', './dom/selector-engine', './util/index', './util/calendar'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.DateRangePicker = factory(global["@popperjs/core"], global["date-fns"], global.BaseComponent, global.Calendar, global.TimePicker, global.EventHandler, global.Manipulator, global.SelectorEngine, global.Index, global.Calendar));
})(this, (function (Popper, dateFns, BaseComponent, Calendar, TimePicker, EventHandler, Manipulator, SelectorEngine, index_js, calendar_js) { 'use strict';
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('date-fns'), require('./util/index.js'), require('./dom/event-handler.js'), require('./dom/manipulator.js'), require('./dom/selector-engine.js'), require('./util/calendar.js'), require('./calendar.js'), require('./picker.js'), require('./time-picker.js')) :
typeof define === 'function' && define.amd ? define(['date-fns', './util/index', './dom/event-handler', './dom/manipulator', './dom/selector-engine', './util/calendar', './calendar', './picker', './time-picker'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.DateRangePicker = factory(global["date-fns"], global.Index, global.EventHandler, global.Manipulator, global.SelectorEngine, global.Calendar, global.Calendar, global.Picker, global.TimePicker));
})(this, (function (dateFns, index_js, EventHandler, Manipulator, SelectorEngine, calendar_js, Calendar, Picker, TimePicker) { 'use strict';
function _interopNamespaceDefault(e) {
const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
if (e) {
for (const k in e) {
if (k !== 'default') {
const d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: () => e[k]
});
}
}
}
n.default = e;
return Object.freeze(n);
}
const Popper__namespace = /*#__PURE__*/_interopNamespaceDefault(Popper);
/**
* --------------------------------------------------------------------------
* CoreUI PRO date-range-picker.js
* License (https://coreui.io/pro/license-new/)
* License (https://coreui.io/pro/license/)
* --------------------------------------------------------------------------

@@ -41,4 +22,6 @@ */

/**
* Constants
*/
* ------------------------------------------------------------------------
* Constants
* ------------------------------------------------------------------------
*/

@@ -49,48 +32,9 @@ const NAME = 'date-range-picker';

const DATA_API_KEY = '.data-api';
const TAB_KEY = 'Tab';
const RIGHT_MOUSE_BUTTON = 2;
const EVENT_CLICK = `click${EVENT_KEY}`;
const EVENT_END_DATE_CHANGE = `endDateChange${EVENT_KEY}`;
const EVENT_HIDE = `hide${EVENT_KEY}`;
const EVENT_HIDDEN = `hidden${EVENT_KEY}`;
const EVENT_INPUT = 'input';
const EVENT_RESIZE = 'resize';
const EVENT_SHOW = `show${EVENT_KEY}`;
const EVENT_SHOWN = `shown${EVENT_KEY}`;
const EVENT_SUBMIT = 'submit';
const EVENT_START_DATE_CHANGE = `startDateChange${EVENT_KEY}`;
const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`;
const EVENT_KEYUP_DATA_API = `keyup${EVENT_KEY}${DATA_API_KEY}`;
const EVENT_LOAD_DATA_API = `load${EVENT_KEY}${DATA_API_KEY}`;
const CLASS_NAME_BODY = 'date-picker-body';
const CLASS_NAME_CALENDAR = 'date-picker-calendar';
const CLASS_NAME_CALENDARS = 'date-picker-calendars';
const CLASS_NAME_CLEANER = 'date-picker-cleaner';
const CLASS_NAME_DATE_PICKER = 'date-picker';
const CLASS_NAME_DATE_RANGE_PICKER = 'date-range-picker';
const CLASS_NAME_DISABLED = 'disabled';
const CLASS_NAME_DROPDOWN = 'date-picker-dropdown';
const CLASS_NAME_INDICATOR = 'date-picker-indicator';
const CLASS_NAME_INPUT = 'date-picker-input';
const CLASS_NAME_INPUT_GROUP = 'date-picker-input-group';
const CLASS_NAME_IS_INVALID = 'is-invalid';
const CLASS_NAME_IS_VALID = 'is-valid';
const CLASS_NAME_FOOTER = 'date-picker-footer';
const CLASS_NAME_RANGES = 'date-picker-ranges';
const CLASS_NAME_SEPARATOR = 'date-picker-separator';
const CLASS_NAME_SHOW = 'show';
const CLASS_NAME_TIME_PICKER = 'time-picker';
const CLASS_NAME_TIME_PICKERS = 'date-picker-timepickers';
const CLASS_NAME_WAS_VALIDATED = 'was-validated';
const SELECTOR_CALENDAR = '.calendar';
const SELECTOR_DATA_TOGGLE = '[data-coreui-toggle="date-range-picker"]:not(.disabled):not(:disabled)';
const SELECTOR_DATA_TOGGLE_SHOWN = `${SELECTOR_DATA_TOGGLE}.${CLASS_NAME_SHOW}`;
const SELECTOR_INPUT = '.date-picker-input';
const SELECTOR_WAS_VALIDATED = 'form.was-validated';
const SELECTOR_DATA_TOGGLE = '[data-coreui-toggle="date-range-picker"]';
const Default = {
...Picker.Default,
calendars: 2,
cancelButton: 'Cancel',
cancelButtonClasses: ['btn', 'btn-sm', 'btn-ghost-primary'],
confirmButton: 'OK',
confirmButtonClasses: ['btn', 'btn-sm', 'btn-primary'],
cleaner: true,

@@ -102,5 +46,3 @@ calendarDate: null,

endDate: null,
endName: null,
firstDayOfWeek: 1,
footer: false,
format: null,

@@ -112,3 +54,2 @@ invalid: false,

minDate: null,
name: null,
placeholder: ['Start date', 'End date'],

@@ -118,7 +59,5 @@ range: true,

rangesButtonsClasses: ['btn', 'btn-ghost-secondary'],
required: true,
separator: true,
size: null,
startDate: null,
startName: null,
selectAdjacementDays: false,

@@ -133,7 +72,4 @@ selectEndDate: false,

const DefaultType = {
...Picker.DefaultType,
calendars: 'number',
cancelButton: '(boolean|string)',
cancelButtonClasses: '(array|string)',
confirmButton: '(boolean|string)',
confirmButtonClasses: '(array|string)',
cleaner: 'boolean',

@@ -145,5 +81,3 @@ calendarDate: '(date|string|null)',

endDate: '(date|string|null)',
endName: 'string',
firstDayOfWeek: 'number',
footer: 'boolean',
format: '(string|null)',

@@ -155,3 +89,2 @@ indicator: 'boolean',

minDate: '(date|string|null)',
name: 'string',
placeholder: '(array|string)',

@@ -161,7 +94,5 @@ range: 'boolean',

rangesButtonsClasses: '(array|string)',
required: 'boolean',
separator: 'boolean',
size: '(string|null)',
startDate: '(date|string|null)',
startName: 'string',
selectAdjacementDays: 'boolean',

@@ -177,6 +108,8 @@ selectEndDate: 'boolean',

/**
* Class definition
*/
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
class DateRangePicker extends BaseComponent {
class DateRangePicker extends Picker {
constructor(element, config) {

@@ -191,4 +124,5 @@ super(element);

this._mobile = window.innerWidth < 768;
this._popper = null;
this._selectEndDate = this._config.selectEndDate;
// nodes
this._calendars = null;

@@ -199,3 +133,2 @@ this._calendarStart = null;

this._endInput = null;
this._menu = null;
this._startInput = null;

@@ -205,5 +138,4 @@ this._timepickers = null;

this._timePickerStart = null;
this._togglerElement = null;
this._createDateRangePicker();
this._createDateRangePickerCalendars();
this._createCalendars();
this._addEventListeners();

@@ -214,2 +146,3 @@ this._addCalendarEventListeners();

// Getters
static get Default() {

@@ -226,37 +159,8 @@ return Default;

// Public
toggle() {
return this._isShown() ? this.hide() : this.show();
}
show() {
if (this._config.disabled || this._isShown()) {
return;
}
EventHandler.trigger(this._element, EVENT_SHOW);
this._element.classList.add(CLASS_NAME_SHOW);
this._element.setAttribute('aria-expanded', true);
EventHandler.trigger(this._element, EVENT_SHOWN);
this._createPopper();
}
hide() {
EventHandler.trigger(this._element, EVENT_HIDE);
if (this._popper) {
this._popper.destroy();
}
this._element.classList.remove(CLASS_NAME_SHOW);
this._element.setAttribute('aria-expanded', 'false');
EventHandler.trigger(this._element, EVENT_HIDDEN);
}
dispose() {
if (this._popper) {
this._popper.destroy();
}
super.dispose();
}
cancel() {
this._endDate = this._initialEndDate;
this._endInput.value = this._setInputValue(this._initialEndDate);
this._endInput.dispatchEvent(new Event('change'));
this._startDate = this._initialStartDate;
this._startInput.value = this._setInputValue(this._initialStartDate);
this._startInput.dispatchEvent(new Event('change'));
this._calendars.innerHTML = '';

@@ -266,4 +170,3 @@ if (this._config.timepicker) {

}
this.hide();
this._createDateRangePickerCalendars();
this._createCalendars();
this._addCalendarEventListeners();

@@ -274,6 +177,4 @@ }

this._endInput.value = '';
this._endInput.dispatchEvent(new Event('change'));
this._startDate = null;
this._startInput.value = '';
this._startInput.dispatchEvent(new Event('change'));
this._calendars.innerHTML = '';

@@ -283,3 +184,3 @@ if (this._config.timepicker) {

}
this._createDateRangePickerCalendars();
this._createCalendars();
this._addCalendarEventListeners();

@@ -290,6 +191,4 @@ }

this._endInput.value = this._setInputValue(this._config.endDate);
this._endInput.dispatchEvent(new Event('change'));
this._startDate = this._config.startDate;
this._startInput.value = this._setInputValue(this._config.startDate);
this._startInput.dispatchEvent(new Event('change'));
this._calendars.innerHTML = '';

@@ -299,3 +198,3 @@ if (this._config.timepicker) {

}
this._createDateRangePickerCalendars();
this._createCalendars();
this._addCalendarEventListeners();

@@ -312,3 +211,3 @@ }

this._createDateRangePicker();
this._createDateRangePickerCalendars();
this._createCalendars();
this._addEventListeners();

@@ -320,14 +219,12 @@ this._addCalendarEventListeners();

_addEventListeners() {
EventHandler.on(this._togglerElement, EVENT_CLICK, () => {
if (!this._config.disabled) {
this.show();
this._initialStartDate = new Date(this._startDate);
this._initialEndDate = new Date(this._endDate);
}
EventHandler.on(this._element, 'shown.coreui.dropdown', () => {
this._initialStartDate = new Date(this._startDate);
this._initialEndDate = new Date(this._endDate);
});
EventHandler.on(this._startInput, EVENT_CLICK, () => {
EventHandler.on(this._startInput, 'click', () => {
this._dropdown.show();
this._selectEndDate = false;
this._updateDateRangePickerCalendars();
this._updateCalendars();
});
EventHandler.on(this._startInput, EVENT_INPUT, event => {
EventHandler.on(this._startInput, 'input', event => {
const date = this._config.format ? dateFns.parseISO(event.target.value) : calendar_js.getLocalDateFromString(event.target.value, this._config.locale, this._config.timepicker);

@@ -337,27 +234,11 @@ if (date instanceof Date && date.getTime()) {

this._calendarDate = date;
this._updateDateRangePickerCalendars();
this._updateCalendars();
}
});
EventHandler.on(this._startInput.form, EVENT_SUBMIT, () => {
if (this._startInput.form.classList.contains(CLASS_NAME_WAS_VALIDATED)) {
if (this._config.range && (Number.isNaN(Date.parse(this._startInput.value)) || Number.isNaN(Date.parse(this._endInput.value)))) {
return this._element.classList.add(CLASS_NAME_IS_INVALID);
}
if (this._config.range && this._startDate instanceof Date && this._endDate instanceof Date) {
return this._element.classList.add(CLASS_NAME_IS_VALID);
}
if (!this._config.range && Number.isNaN(Date.parse(this._startInput.value))) {
return this._element.classList.add(CLASS_NAME_IS_INVALID);
}
if (!this._config.range && this._startDate instanceof Date) {
return this._element.classList.add(CLASS_NAME_IS_VALID);
}
this._element.classList.add(CLASS_NAME_IS_INVALID);
}
});
EventHandler.on(this._endInput, EVENT_CLICK, () => {
EventHandler.on(this._endInput, 'click', () => {
this._dropdown.show();
this._selectEndDate = true;
this._updateDateRangePickerCalendars();
this._updateCalendars();
});
EventHandler.on(this._endInput, EVENT_INPUT, event => {
EventHandler.on(this._endInput, 'input', event => {
const date = this._config.format ? dateFns.parseISO(event.target.value) : calendar_js.getLocalDateFromString(event.target.value, this._config.locale, this._config.timepicker);

@@ -367,6 +248,13 @@ if (date instanceof Date && date.getTime()) {

this._calendarDate = date;
this._updateDateRangePickerCalendars();
this._updateCalendars();
}
});
EventHandler.on(window, EVENT_RESIZE, () => {
EventHandler.on(this._element, 'click', '.picker-input-group-cleaner', event => {
event.stopPropagation();
this.clear();
});
EventHandler.on(this._element, 'onCancelClick.coreui.picker', () => {
this.cancel();
});
EventHandler.on(window, 'resize', () => {
this._mobile = window.innerWidth < 768;

@@ -376,3 +264,3 @@ });

_addCalendarEventListeners() {
for (const calendar of SelectorEngine.find(SELECTOR_CALENDAR, this._element)) {
for (const calendar of SelectorEngine.find('.calendar', this._element)) {
EventHandler.on(calendar, 'startDateChange.coreui.calendar', event => {

@@ -382,6 +270,5 @@ this._startDate = event.date;

this._startInput.value = this._setInputValue(event.date);
this._startInput.dispatchEvent(new Event('change'));
this._updateDateRangePickerCalendars();
this._updateCalendars();
if (!this._config.range && !this._config.footer && !this._config.timepicker) {
this.hide();
this._dropdown.hide();
}

@@ -397,6 +284,5 @@ EventHandler.trigger(this._element, EVENT_START_DATE_CHANGE, {

this._endInput.value = this._setInputValue(event.date);
this._startInput.dispatchEvent(new Event('change'));
this._updateDateRangePickerCalendars();
this._updateCalendars();
if (this._startDate && !this._config.footer && !this._config.timepicker) {
this.hide();
this._dropdown.hide();
}

@@ -417,38 +303,43 @@ EventHandler.trigger(this._element, EVENT_END_DATE_CHANGE, {

}
_createDateRangePicker() {
this._element.classList.add(CLASS_NAME_DATE_PICKER);
Manipulator.setDataAttribute(this._element, 'toggle', this._config.range ? CLASS_NAME_DATE_RANGE_PICKER : CLASS_NAME_DATE_PICKER);
if (this._config.size) {
this._element.classList.add(`date-picker-${this._config.size}`);
_convertStringToDate(date) {
return date ? date instanceof Date ? date : new Date(date) : null;
}
_createInput(name, placeholder, value) {
const inputEl = document.createElement('input');
inputEl.classList.add('form-control');
inputEl.disabled = this._config.disabled;
inputEl.placeholder = placeholder;
inputEl.readOnly = this._config.inputReadOnly || typeof this._config.format === 'string';
inputEl.type = 'text';
inputEl.value = value;
if (this._element.id) {
inputEl.name = `${name}-${this._element.id}`;
}
if (this._config.disabled) {
this._element.classList.add(CLASS_NAME_DISABLED);
}
this._element.classList.toggle(CLASS_NAME_IS_INVALID, this._config.invalid);
this._element.classList.toggle(CLASS_NAME_IS_VALID, this._config.valid);
this._element.append(this._createDateRangePickerInputGroup());
const dropdownEl = document.createElement('div');
dropdownEl.classList.add(CLASS_NAME_DROPDOWN);
dropdownEl.append(this._createDateRangePickerBody());
if (this._config.footer || this._config.timepicker) {
dropdownEl.append(this._createDateRangeFooter());
}
this._element.append(dropdownEl);
this._menu = dropdownEl;
return inputEl;
}
_createDateRangePickerInputGroup() {
_createInputGroup() {
const inputGroupEl = document.createElement('div');
inputGroupEl.classList.add(CLASS_NAME_INPUT_GROUP);
let startInputName = null;
if (this._config.name || this._config.startName || this._element.id) {
startInputName = this._config.name || this._config.startName || (this._config.range ? `date-range-picker-start-date-${this._element.id}` : `date-picker-${this._element.id}`);
inputGroupEl.classList.add('input-group', 'picker-input-group');
if (this._config.size) {
inputGroupEl.classList.add(`input-group-${this._config.size}`);
}
const startInputEl = this._createInput(startInputName, this._getPlaceholder()[0], this._setInputValue(this._startDate));
let endInputName = null;
if (this._config.endName || this._element.id) {
endInputName = this._config.endName || `date-range-picker-end-date-${this._element.id}`;
const startInputEl = this._createInput(this._config.range ? 'date-range-picker-start-date' : 'date-picker', this._getPlaceholder()[0], this._setInputValue(this._startDate));
const endInputEl = this._createInput('date-range-picker-end-date', this._getPlaceholder()[1], this._setInputValue(this._endDate));
const inputGroupTextSeparatorEl = document.createElement('span');
inputGroupTextSeparatorEl.classList.add('input-group-text');
inputGroupTextSeparatorEl.innerHTML = '<span class="picker-input-group-icon date-picker-arrow-icon"></span>';
const inputGroupTextEl = document.createElement('span');
inputGroupTextEl.classList.add('input-group-text');
if (this._config.indicator) {
inputGroupTextEl.innerHTML = `
<span class="picker-input-group-indicator">
<span class="picker-input-group-icon date-picker-input-icon"></span>
</span>`;
}
const endInputEl = this._createInput(endInputName, this._getPlaceholder()[1], this._setInputValue(this._endDate));
const inputGroupTextSeparatorEl = document.createElement('div');
inputGroupTextSeparatorEl.classList.add(CLASS_NAME_SEPARATOR);
if (this._config.cleaner) {
inputGroupTextEl.innerHTML += `
<span class="picker-input-group-cleaner" role="button">
<span class="picker-input-group-icon date-picker-cleaner-icon"></span>
</span>`;
}
this._startInput = startInputEl;

@@ -463,58 +354,10 @@ this._endInput = endInputEl;

}
if (this._config.indicator) {
const inputGroupIndicatorEl = document.createElement('div');
inputGroupIndicatorEl.classList.add(CLASS_NAME_INDICATOR);
inputGroupEl.append(inputGroupIndicatorEl);
if (this._config.indicator || this._config.cleaner) {
inputGroupEl.append(inputGroupTextEl);
}
if (this._config.cleaner) {
const inputGroupCleanerEl = document.createElement('div');
inputGroupCleanerEl.classList.add(CLASS_NAME_CLEANER);
inputGroupCleanerEl.addEventListener('click', event => {
event.stopPropagation();
this.clear();
});
inputGroupEl.append(inputGroupCleanerEl);
}
this._togglerElement = inputGroupEl;
return inputGroupEl;
}
_createDateRangePickerBody() {
const dateRangePickerBodyEl = document.createElement('div');
dateRangePickerBodyEl.classList.add(CLASS_NAME_BODY);
if (Object.keys(this._config.ranges).length) {
const dateRangePickerRangesEl = document.createElement('div');
dateRangePickerRangesEl.classList.add(CLASS_NAME_RANGES);
for (const key of Object.keys(this._config.ranges)) {
const buttonEl = document.createElement('button');
buttonEl.classList.add(...this._getButtonClasses(this._config.rangesButtonsClasses));
buttonEl.role = 'button';
buttonEl.addEventListener('click', () => {
this._startDate = this._config.ranges[key][0];
this._endDate = this._config.ranges[key][1];
this._startInput.value = this._setInputValue(this._startDate);
this._startInput.dispatchEvent(new Event('change'));
this._endInput.value = this._setInputValue(this._endDate);
this._endInput.dispatchEvent(new Event('change'));
this._updateDateRangePickerCalendars();
});
buttonEl.innerHTML = key;
dateRangePickerRangesEl.append(buttonEl);
}
dateRangePickerBodyEl.append(dateRangePickerRangesEl);
}
const calendarsEl = document.createElement('div');
calendarsEl.classList.add(CLASS_NAME_CALENDARS);
this._calendars = calendarsEl;
dateRangePickerBodyEl.append(calendarsEl);
if (this._config.timepicker) {
const timepickersEl = document.createElement('div');
timepickersEl.classList.add(CLASS_NAME_TIME_PICKERS);
this._timepickers = timepickersEl;
dateRangePickerBodyEl.append(timepickersEl);
}
return dateRangePickerBodyEl;
}
_createDateRangePickerCalendars() {
_createCalendars() {
const calendarEl = document.createElement('div');
calendarEl.classList.add(CLASS_NAME_CALENDAR);
calendarEl.classList.add('date-picker-calendar');
this._calendars.append(calendarEl);

@@ -540,3 +383,3 @@

this._calendarDate = new Date(event.date.getFullYear(), event.date.getMonth(), 1);
this._updateDateRangePickerCalendars();
this._updateCalendars();
});

@@ -546,3 +389,3 @@ if (this._config.timepicker) {

const timePickerStartEl = document.createElement('div');
timePickerStartEl.classList.add(CLASS_NAME_TIME_PICKER);
timePickerStartEl.classList.add('time-picker');

@@ -561,6 +404,6 @@ // eslint-disable-next-line no-new

this._startInput.value = this._setInputValue(this._startDate);
this._updateDateRangePickerCalendars();
this._updateCalendars();
});
const timePickerEndEl = document.createElement('div');
timePickerEndEl.classList.add(CLASS_NAME_TIME_PICKER);
timePickerEndEl.classList.add('time-picker');

@@ -579,3 +422,3 @@ // eslint-disable-next-line no-new

this._endInput.value = this._setInputValue(this._endDate);
this._updateDateRangePickerCalendars();
this._updateCalendars();
});

@@ -588,3 +431,3 @@ } else {

const timePickerEl = document.createElement('div');
timePickerEl.classList.add(CLASS_NAME_TIME_PICKER);
timePickerEl.classList.add('time-picker');

@@ -608,3 +451,3 @@ // eslint-disable-next-line no-new

}
this._updateDateRangePickerCalendars();
this._updateCalendars();
});

@@ -615,5 +458,52 @@ }

}
_createDateRangeFooter() {
const footerEl = document.createElement('div');
footerEl.classList.add(CLASS_NAME_FOOTER);
_createDateRangePicker() {
this._element.classList.add('date-picker');
this._element.classList.toggle('is-invalid', this._config.invalid);
this._element.classList.toggle('is-valid', this._config.valid);
this._dropdownToggleEl.append(this._createInputGroup());
this._dropdownMenuEl.prepend(this._createDateRangePickerBody());
}
_createDateRangePickerBody() {
const dateRangePickerBodyEl = document.createElement('div');
dateRangePickerBodyEl.classList.add('date-picker-body');
if (Object.keys(this._config.ranges).length) {
const dateRangePickerRangesEl = document.createElement('div');
dateRangePickerRangesEl.classList.add('date-picker-ranges');
for (const key of Object.keys(this._config.ranges)) {
const buttonEl = document.createElement('button');
buttonEl.classList.add(...this._getButtonClasses(this._config.rangesButtonsClasses));
buttonEl.role = 'button';
buttonEl.addEventListener('click', () => {
this._startDate = this._config.ranges[key][0];
this._endDate = this._config.ranges[key][1];
this._startInput.value = this._setInputValue(this._startDate);
this._endInput.value = this._setInputValue(this._endDate);
this._updateCalendars();
EventHandler.trigger(this._element, EVENT_START_DATE_CHANGE, {
date: this._startDate,
formatedDate: this._formatDate(this._startDate)
});
EventHandler.trigger(this._element, EVENT_END_DATE_CHANGE, {
date: this._endDate,
formatedDate: this._formatDate(this._endDate)
});
});
buttonEl.innerHTML = key;
dateRangePickerRangesEl.append(buttonEl);
}
dateRangePickerBodyEl.append(dateRangePickerRangesEl);
}
const calendarsEl = document.createElement('div');
calendarsEl.classList.add('date-picker-calendars');
this._calendars = calendarsEl;
dateRangePickerBodyEl.append(calendarsEl);
if (this._config.timepicker) {
const timepickersEl = document.createElement('div');
timepickersEl.classList.add('date-picker-timepickers');
this._timepickers = timepickersEl;
dateRangePickerBodyEl.append(timepickersEl);
}
return dateRangePickerBodyEl;
}
_createFooterContent() {
if (this._config.todayButton) {

@@ -630,106 +520,8 @@ const todayButtonEl = document.createElement('button');

this._endInput.value = this._setInputValue(date);
this._endInput.dispatchEvent(new Event('change'));
this._startInput.value = this._setInputValue(date);
this._startInput.dispatchEvent(new Event('change'));
this._updateDateRangePickerCalendars();
this._updateCalendars();
});
footerEl.append(todayButtonEl);
return todayButtonEl;
}
if (this._config.cancelButton) {
const cancelButtonEl = document.createElement('button');
cancelButtonEl.classList.add(...this._getButtonClasses(this._config.cancelButtonClasses));
cancelButtonEl.type = 'button';
cancelButtonEl.innerHTML = this._config.cancelButton;
cancelButtonEl.addEventListener('click', () => {
this.cancel();
});
footerEl.append(cancelButtonEl);
}
if (this._config.confirmButton) {
const confirmButtonEl = document.createElement('button');
confirmButtonEl.classList.add(...this._getButtonClasses(this._config.confirmButtonClasses));
confirmButtonEl.type = 'button';
confirmButtonEl.innerHTML = this._config.confirmButton;
confirmButtonEl.addEventListener('click', () => {
this.hide();
});
footerEl.append(confirmButtonEl);
}
return footerEl;
}
_updateDateRangePickerCalendars() {
this._calendars.innerHTML = '';
if (this._config.timepicker) {
this._timepickers.innerHTML = '';
}
this._createDateRangePickerCalendars();
this._addCalendarEventListeners();
}
_convertStringToDate(date) {
return date ? date instanceof Date ? date : new Date(date) : null;
}
_createInput(name, placeholder, value) {
const inputEl = document.createElement('input');
inputEl.classList.add(CLASS_NAME_INPUT);
inputEl.autocomplete = 'off';
inputEl.disabled = this._config.disabled;
inputEl.placeholder = placeholder;
inputEl.readOnly = this._config.inputReadOnly || typeof this._config.format === 'string';
inputEl.required = this._config.required;
inputEl.type = 'text';
inputEl.value = value;
if (name) {
inputEl.name = name;
}
const events = ['change', 'keyup', 'paste'];
for (const event of events) {
inputEl.addEventListener(event, ({
target
}) => {
if (target.closest(SELECTOR_WAS_VALIDATED)) {
const inputs = SelectorEngine.find(SELECTOR_INPUT, this._element);
for (const input of inputs) {
if (Number.isNaN(Date.parse(input.value))) {
this._element.classList.add(CLASS_NAME_IS_INVALID);
this._element.classList.remove(CLASS_NAME_IS_VALID);
return;
}
}
if (this._config.range && this._startDate instanceof Date && this._endDate instanceof Date) {
this._element.classList.add(CLASS_NAME_IS_VALID);
this._element.classList.remove(CLASS_NAME_IS_INVALID);
return;
}
if (!this._config.range && this._startDate instanceof Date) {
this._element.classList.add(CLASS_NAME_IS_VALID);
this._element.classList.remove(CLASS_NAME_IS_INVALID);
return;
}
this._element.classList.add(CLASS_NAME_IS_INVALID);
this._element.classList.remove(CLASS_NAME_IS_VALID);
}
});
}
return inputEl;
}
_createPopper() {
if (typeof Popper__namespace === 'undefined') {
throw new TypeError('CoreUI\'s date picker require Popper (https://popper.js.org)');
}
const popperConfig = {
modifiers: [{
name: 'preventOverflow',
options: {
boundary: 'clippingParents'
}
}, {
name: 'offset',
options: {
offset: [0, 2]
}
}],
placement: index_js.isRTL() ? 'bottom-end' : 'bottom-start'
};
this._popper = Popper__namespace.createPopper(this._togglerElement, this._menu, popperConfig);
}
_formatDate(date) {

@@ -744,8 +536,16 @@ if (this._config.format) {

}
_getButtonClasses(classes) {
if (typeof classes === 'string') {
return classes.split(' ');
_setInputValue(date) {
if (date) {
return this._formatDate(date);
}
return classes;
return '';
}
_updateCalendars() {
this._calendars.innerHTML = '';
if (this._config.timepicker) {
this._timepickers.innerHTML = '';
}
this._createCalendars();
this._addCalendarEventListeners();
}
_getConfig(config) {

@@ -768,11 +568,2 @@ config = {

}
_isShown() {
return this._element.classList.contains(CLASS_NAME_SHOW);
}
_setInputValue(date) {
if (date) {
return this._formatDate(date);
}
return '';
}

@@ -802,28 +593,9 @@ // Static

}
static clearMenus(event) {
if (event.button === RIGHT_MOUSE_BUTTON || event.type === 'keyup' && event.key !== TAB_KEY) {
return;
}
const openToggles = SelectorEngine.find(SELECTOR_DATA_TOGGLE_SHOWN);
for (const toggle of openToggles) {
const context = DateRangePicker.getInstance(toggle);
if (!context) {
continue;
}
const composedPath = event.composedPath();
if (composedPath.includes(context._element)) {
continue;
}
({
relatedTarget: context._element
});
if (event.type === 'click') ;
context.hide();
}
}
}
/**
* Data API implementation
*/
* ------------------------------------------------------------------------
* Data Api implementation
* ------------------------------------------------------------------------
*/

@@ -836,8 +608,9 @@ EventHandler.on(window, EVENT_LOAD_DATA_API, () => {

});
EventHandler.on(document, EVENT_CLICK_DATA_API, DateRangePicker.clearMenus);
EventHandler.on(document, EVENT_KEYUP_DATA_API, DateRangePicker.clearMenus);
/**
* jQuery
*/
* ------------------------------------------------------------------------
* jQuery
* ------------------------------------------------------------------------
* add .DateRangePicker to jQuery only if jQuery is present
*/

@@ -844,0 +617,0 @@ index_js.defineJQueryPlugin(DateRangePicker);

2

js/dist/dom/data.js
/*!
* CoreUI data.js v4.6.0-beta.0 (https://coreui.io)
* CoreUI data.js v4.6.0 (https://coreui.io)
* Copyright 2023 The CoreUI Team (https://github.com/orgs/coreui/people)

@@ -4,0 +4,0 @@ * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)

2

js/dist/dom/event-handler.js
/*!
* CoreUI event-handler.js v4.6.0-beta.0 (https://coreui.io)
* CoreUI event-handler.js v4.6.0 (https://coreui.io)
* Copyright 2023 The CoreUI Team (https://github.com/orgs/coreui/people)

@@ -4,0 +4,0 @@ * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)

2

js/dist/dom/manipulator.js
/*!
* CoreUI manipulator.js v4.6.0-beta.0 (https://coreui.io)
* CoreUI manipulator.js v4.6.0 (https://coreui.io)
* Copyright 2023 The CoreUI Team (https://github.com/orgs/coreui/people)

@@ -4,0 +4,0 @@ * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)

2

js/dist/dom/selector-engine.js
/*!
* CoreUI selector-engine.js v4.6.0-beta.0 (https://coreui.io)
* CoreUI selector-engine.js v4.6.0 (https://coreui.io)
* Copyright 2023 The CoreUI Team (https://github.com/orgs/coreui/people)

@@ -4,0 +4,0 @@ * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)

2

js/dist/dropdown.js
/*!
* CoreUI dropdown.js v4.6.0-beta.0 (https://coreui.io)
* CoreUI dropdown.js v4.6.0 (https://coreui.io)
* Copyright 2023 The CoreUI Team (https://github.com/orgs/coreui/people)

@@ -4,0 +4,0 @@ * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)

30

js/dist/loading-button.js
/*!
* CoreUI loading-button.js v4.6.0-beta.0 (https://coreui.io)
* CoreUI loading-button.js v4.6.0 (https://coreui.io)
* Copyright 2023 The CoreUI Team (https://github.com/orgs/coreui/people)

@@ -15,3 +15,3 @@ * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)

* CoreUI PRO loading-button.js
* License (https://coreui.io/pro/license-new/)
* License (https://coreui.io/pro/license/)
* --------------------------------------------------------------------------

@@ -22,3 +22,5 @@ */

/**
* ------------------------------------------------------------------------
* Constants
* ------------------------------------------------------------------------
*/

@@ -29,9 +31,6 @@

const EVENT_KEY = `.${DATA_KEY}`;
const DATA_API_KEY = '.data-api';
const EVENT_START = `start${EVENT_KEY}`;
const EVENT_STOP = `stop${EVENT_KEY}`;
const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`;
const CLASS_NAME_IS_LOADING = 'is-loading';
const CLASS_NAME_LOADING_BUTTON_SPINNER = 'btn-loading-spinner';
const SELECTOR_DATA_TOGGLE = '[data-coreui-toggle="loading-button"]';
const Default = {

@@ -51,3 +50,5 @@ disabledOnLoading: false,

/**
* Class definition
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/

@@ -75,2 +76,5 @@

}
static get DATA_KEY() {
return DATA_KEY;
}
static get NAME() {

@@ -165,14 +169,6 @@ return NAME;

/**
* Data API implementation
*/
EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, event => {
event.preventDefault();
const button = event.target.closest(SELECTOR_DATA_TOGGLE);
const data = LoadingButton.getOrCreateInstance(button);
data.start();
});
/**
* ------------------------------------------------------------------------
* jQuery
* ------------------------------------------------------------------------
* add .LoadingButton to jQuery only if jQuery is present
*/

@@ -179,0 +175,0 @@

2

js/dist/modal.js
/*!
* CoreUI modal.js v4.6.0-beta.0 (https://coreui.io)
* CoreUI modal.js v4.6.0 (https://coreui.io)
* Copyright 2023 The CoreUI Team (https://github.com/orgs/coreui/people)

@@ -4,0 +4,0 @@ * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)

295

js/dist/multi-select.js
/*!
* CoreUI multi-select.js v4.6.0-beta.0 (https://coreui.io)
* CoreUI multi-select.js v4.6.0 (https://coreui.io)
* Copyright 2023 The CoreUI Team (https://github.com/orgs/coreui/people)

@@ -7,30 +7,11 @@ * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)

(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('@popperjs/core'), require('./base-component.js'), require('./dom/data.js'), require('./dom/event-handler.js'), require('./dom/manipulator.js'), require('./dom/selector-engine.js'), require('./util/index.js')) :
typeof define === 'function' && define.amd ? define(['@popperjs/core', './base-component', './dom/data', './dom/event-handler', './dom/manipulator', './dom/selector-engine', './util/index'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.MultiSelect = factory(global["@popperjs/core"], global.BaseComponent, global.Data, global.EventHandler, global.Manipulator, global.SelectorEngine, global.Index));
})(this, (function (Popper, BaseComponent, Data, EventHandler, Manipulator, SelectorEngine, index_js) { 'use strict';
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('./base-component.js'), require('./dom/data.js'), require('./dom/event-handler.js'), require('./dom/manipulator.js'), require('./dom/selector-engine.js'), require('./util/index.js')) :
typeof define === 'function' && define.amd ? define(['./base-component', './dom/data', './dom/event-handler', './dom/manipulator', './dom/selector-engine', './util/index'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.MultiSelect = factory(global.BaseComponent, global.Data, global.EventHandler, global.Manipulator, global.SelectorEngine, global.Index));
})(this, (function (BaseComponent, Data, EventHandler, Manipulator, SelectorEngine, index_js) { 'use strict';
function _interopNamespaceDefault(e) {
const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
if (e) {
for (const k in e) {
if (k !== 'default') {
const d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: () => e[k]
});
}
}
}
n.default = e;
return Object.freeze(n);
}
const Popper__namespace = /*#__PURE__*/_interopNamespaceDefault(Popper);
/**
* --------------------------------------------------------------------------
* CoreUI PRO multi-select.js
* License (https://coreui.io/pro/license-new/)
* License (https://coreui.io/pro/license/)
* --------------------------------------------------------------------------

@@ -52,3 +33,3 @@ */

const RIGHT_MOUSE_BUTTON = 2;
const SELECTOR_CLEANER = '.form-multi-select-cleaner';
const SELECTOR_INPUT = '.form-multi-select-search';
const SELECTOR_OPTGROUP = '.form-multi-select-optgroup';

@@ -58,5 +39,5 @@ const SELECTOR_OPTION = '.form-multi-select-option';

const SELECTOR_OPTIONS_EMPTY = '.form-multi-select-options-empty';
const SELECTOR_SEARCH = '.form-multi-select-search';
const SELECTOR_SELECT = '.form-multi-select';
const SELECTOR_SELECTION = '.form-multi-select-selection';
const SELECTOR_SELECTION_CLEANER = '.form-multi-select-selection-cleaner';
const EVENT_CHANGED = `changed${EVENT_KEY}`;

@@ -70,12 +51,11 @@ const EVENT_CLICK = `click${EVENT_KEY}`;

const EVENT_SHOW = `show${EVENT_KEY}`;
const EVENT_SHOWN = `shown${EVENT_KEY}`;
const EVENT_SHOWN = `showN${EVENT_KEY}`;
const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`;
const EVENT_KEYUP_DATA_API = `keyup${EVENT_KEY}${DATA_API_KEY}`;
const EVENT_LOAD_DATA_API = `load${EVENT_KEY}${DATA_API_KEY}`;
const CLASS_NAME_CLEANER = 'form-multi-select-cleaner';
const CLASS_NAME_DISABLED = 'disabled';
const CLASS_NAME_INPUT_GROUP = 'form-multi-select-input-group';
const CLASS_NAME_LABEL = 'label';
const CLASS_NAME_SELECT = 'form-multi-select';
const CLASS_NAME_SELECT_DROPDOWN = 'form-multi-select-dropdown';
const CLASS_NAME_SELECT_MULTIPLE = 'form-multi-select-multiple';
const CLASS_NAME_SELECT_WITH_CLEANER = 'form-multi-select-with-cleaner';
const CLASS_NAME_SELECT_ALL = 'form-multi-select-all';

@@ -91,2 +71,3 @@ const CLASS_NAME_OPTGROUP = 'form-multi-select-optgroup';

const CLASS_NAME_SELECTION = 'form-multi-select-selection';
const CLASS_NAME_SELECTION_CLEANER = 'form-multi-select-selection-cleaner';
const CLASS_NAME_SELECTION_TAGS = 'form-multi-select-selection-tags';

@@ -96,2 +77,3 @@ const CLASS_NAME_SHOW = 'show';

const CLASS_NAME_TAG_DELETE = 'form-multi-select-tag-delete';
const CLASS_NAME_LABEL = 'label';
const Default = {

@@ -102,8 +84,6 @@ cleaner: true,

multiple: true,
name: null,
placeholder: 'Select...',
options: false,
optionsMaxHeight: 'auto',
optionsStyle: 'checkbox',
placeholder: 'Select...',
required: false,
search: false,

@@ -122,8 +102,6 @@ searchNoResultsLabel: 'No results found',

multiple: 'boolean',
name: 'string',
placeholder: 'string',
options: '(boolean|array)',
optionsMaxHeight: '(number|string)',
optionsStyle: 'string',
placeholder: 'string',
required: 'boolean',
search: 'boolean',

@@ -147,3 +125,2 @@ searchNoResultsLabel: 'string',

super(element, config);
this._indicatorElement = null;
this._selectAllElement = null;

@@ -153,10 +130,7 @@ this._selectionElement = null;

this._searchElement = null;
this._togglerElement = null;
this._optionsElement = null;
this._clone = null;
this._menu = null;
this._options = this._getOptions();
this._popper = null;
this._search = '';
this._selected = this._getSelectedOptions(this._options);
this._selection = this._getSelectedOptions(this._options);
if (this._config.options.length > 0) {

@@ -178,2 +152,5 @@ this._createNativeSelect(this._config.options);

}
static get DATA_KEY() {
return DATA_KEY;
}
static get NAME() {

@@ -184,33 +161,16 @@ return NAME;

// Public
toggle() {
return this._isShown() ? this.hide() : this.show();
}
show() {
if (this._config.disabled || this._isShown()) {
return;
}
EventHandler.trigger(this._element, EVENT_SHOW);
this._clone.classList.add(CLASS_NAME_SHOW);
this._clone.setAttribute('aria-expanded', true);
EventHandler.trigger(this._element, EVENT_SHOWN);
this._createPopper();
if (this._config.search) {
SelectorEngine.findOne(SELECTOR_SEARCH, this._clone).focus();
SelectorEngine.findOne(SELECTOR_INPUT, this._clone).focus();
}
EventHandler.trigger(this._element, EVENT_SHOWN);
}
hide() {
EventHandler.trigger(this._element, EVENT_HIDE);
if (this._popper) {
this._popper.destroy();
}
this._clone.classList.remove(CLASS_NAME_SHOW);
this._clone.setAttribute('aria-expanded', 'false');
EventHandler.trigger(this._element, EVENT_HIDDEN);
}
dispose() {
if (this._popper) {
this._popper.destroy();
}
super.dispose();
}
search(text) {

@@ -224,3 +184,3 @@ this._search = text.length > 0 ? text.toLowerCase() : text;

this._options = this._getOptions();
this._selected = this._getSelectedOptions(this._options);
this._selection = this._getSelectedOptions(this._options);
this._clone.remove();

@@ -257,3 +217,3 @@ this._element.innerHTML = '';

getValue() {
return this._selected;
return this._selection;
}

@@ -269,7 +229,2 @@

});
EventHandler.on(this._indicatorElement, EVENT_CLICK, event => {
event.preventDefault();
event.stopPropagation();
this.toggle();
});
EventHandler.on(this._searchElement, EVENT_KEYUP, () => {

@@ -283,3 +238,2 @@ this._onSearchChange(this._searchElement);

}
this._searchElement.focus();
});

@@ -307,5 +261,3 @@ EventHandler.on(this._selectAllElement, EVENT_CLICK, event => {

this._onOptionsClick(event.target);
if (this._config.search) {
SelectorEngine.findOne(SELECTOR_SEARCH, this._clone).focus();
}
SelectorEngine.findOne(SELECTOR_INPUT, this._clone).focus();
}

@@ -317,5 +269,2 @@ });

...Default,
...(this._element.disabled && {
disabled: true
}),
...Manipulator.getDataAttributes(this._element),

@@ -336,3 +285,3 @@ ...(typeof config === 'object' ? config : {})

for (const node of nodes) {
if (node.nodeName === 'OPTION' && node.value) {
if (node.nodeName === 'OPTION') {
options.push({

@@ -356,8 +305,8 @@ value: node.value,

const selected = [];
for (const option of options) {
if (typeof option.value === 'undefined') {
this._getSelectedOptions(option.options);
for (const e of options) {
if (typeof e.value === 'undefined') {
this._getSelectedOptions(e.options);
continue;
}
if (option.selected) {
if (e.selected) {
// Add only the last option if single select

@@ -368,4 +317,4 @@ if (!this._config.multiple) {

selected.push({
value: String(option.value),
text: option.text
value: String(e.value),
text: e.text
});

@@ -381,5 +330,2 @@ }

}
if (this._config.required) {
this._element.setAttribute('required', true);
}
this._createNativeOptions(this._element, data);

@@ -413,7 +359,6 @@ }

_createSelect() {
const multiSelectEl = document.createElement('div');
multiSelectEl.classList.add(CLASS_NAME_SELECT);
multiSelectEl.classList.toggle('is-invalid', this._config.invalid);
multiSelectEl.classList.toggle('is-valid', this._config.valid);
multiSelectEl.setAttribute('aria-expanded', 'false');
const div = document.createElement('div');
div.classList.add(CLASS_NAME_SELECT);
div.classList.toggle('is-invalid', this._config.invalid);
div.classList.toggle('is-valid', this._config.valid);
if (this._config.disabled) {

@@ -423,8 +368,14 @@ this._element.classList.add(CLASS_NAME_DISABLED);

for (const className of this._getClassNames()) {
multiSelectEl.classList.add(className);
div.classList.add(className);
}
this._clone = multiSelectEl;
this._element.parentNode.insertBefore(multiSelectEl, this._element.nextSibling);
if (this._config.multiple) {
div.classList.add(CLASS_NAME_SELECT_MULTIPLE);
}
if (this._config.multiple && this._config.selectionType === 'tags') {
div.classList.add(CLASS_NAME_SELECTION_TAGS);
}
this._clone = div;
this._element.parentNode.insertBefore(div, this._element.nextSibling);
this._createSelection();
this._createButtons();
this._createSelectionCleaner();
if (this._config.search) {

@@ -434,4 +385,4 @@ this._createSearchInput();

}
if (this._config.name || this._element.id || this._element.name) {
this._element.setAttribute('name', this._config.name || this._element.name || `multi-select-${this._element.id}`);
if (this._element.id) {
this._element.setAttribute('name', `multi-select-${this._element.id}`);
}

@@ -443,54 +394,19 @@ this._createOptionsContainer();

_createSelection() {
const togglerEl = document.createElement('div');
togglerEl.classList.add(CLASS_NAME_INPUT_GROUP);
this._togglerElement = togglerEl;
const selectionEl = document.createElement('div');
selectionEl.classList.add(CLASS_NAME_SELECTION);
if (this._config.multiple && this._config.selectionType === 'tags') {
selectionEl.classList.add(CLASS_NAME_SELECTION_TAGS);
}
togglerEl.append(selectionEl);
this._clone.append(togglerEl);
const span = document.createElement('span');
span.classList.add(CLASS_NAME_SELECTION);
this._clone.append(span);
this._updateSelection();
this._selectionElement = selectionEl;
this._selectionElement = span;
}
_createButtons() {
const buttons = document.createElement('div');
buttons.classList.add('form-multi-select-buttons');
_createSelectionCleaner() {
if (this._config.cleaner && this._config.multiple) {
const cleaner = document.createElement('button');
cleaner.type = 'button';
cleaner.classList.add(CLASS_NAME_CLEANER);
cleaner.classList.add(CLASS_NAME_SELECTION_CLEANER);
cleaner.style.display = 'none';
buttons.append(cleaner);
this._clone.append(cleaner);
this._clone.classList.add(CLASS_NAME_SELECT_WITH_CLEANER);
this._updateSelectionCleaner();
this._selectionCleanerElement = cleaner;
}
const indicator = document.createElement('button');
indicator.type = 'button';
indicator.classList.add('form-multi-select-indicator');
buttons.append(indicator);
this._indicatorElement = indicator;
this._togglerElement.append(buttons);
this._updateSelectionCleaner();
}
_createPopper() {
if (typeof Popper__namespace === 'undefined') {
throw new TypeError('CoreUI\'s multi select require Popper (https://popper.js.org)');
}
const popperConfig = {
modifiers: [{
name: 'preventOverflow',
options: {
boundary: 'clippingParents'
}
}, {
name: 'offset',
options: {
offset: [0, 2]
}
}],
placement: index_js.isRTL() ? 'bottom-end' : 'bottom-start'
};
this._popper = Popper__namespace.createPopper(this._togglerElement, this._menu, popperConfig);
}
_createSearchInput() {

@@ -504,3 +420,3 @@ const input = document.createElement('input');

this._updateSearchSize();
this._selectionElement.append(input);
this._clone.append(input);
}

@@ -527,3 +443,2 @@ _createOptionsContainer() {

this._optionsElement = optionsDiv;
this._menu = dropdownDiv;
}

@@ -559,3 +474,3 @@ _createOptions(parentElement, options) {

_createTag(value, text) {
const tag = document.createElement('div');
const tag = document.createElement('span');
tag.classList.add(CLASS_NAME_TAG);

@@ -565,4 +480,5 @@ tag.dataset.value = value;

const closeBtn = document.createElement('button');
closeBtn.classList.add(CLASS_NAME_TAG_DELETE);
closeBtn.classList.add(CLASS_NAME_TAG_DELETE, 'text-medium-emphasis');
closeBtn.setAttribute('aria-label', 'Close');
closeBtn.innerHTML = '<span aria-hidden="true">&times;</span>';
tag.append(closeBtn);

@@ -602,5 +518,5 @@ EventHandler.on(closeBtn, EVENT_CLICK, event => {

}
if (this._selected.filter(option => option.value === String(value)).length === 0) {
this._selected.push({
value: String(value),
if (this._selection.filter(e => e.value === value).length === 0) {
this._selection.push({
value,
text

@@ -618,3 +534,3 @@ });

EventHandler.trigger(this._element, EVENT_CHANGED, {
value: this._selected
value: this._selection
});

@@ -627,4 +543,4 @@ this._updateSelection();

_deselectOption(value) {
const selected = this._selected.filter(option => option.value !== String(value));
this._selected = selected;
const selected = this._selection.filter(e => e.value !== value);
this._selection = selected;
SelectorEngine.findOne(`option[value="${value}"]`, this._element).selected = false;

@@ -636,3 +552,3 @@ const option = SelectorEngine.findOne(`[data-value="${value}"]`, this._optionsElement);

EventHandler.trigger(this._element, EVENT_CHANGED, {
value: this._selected
value: this._selection
});

@@ -645,4 +561,4 @@ this._updateSelection();

_deselectLastOption() {
if (this._selected.length > 0) {
const last = this._selected.pop();
if (this._selection.length > 0) {
const last = this._selection.pop();
this._deselectOption(last.value);

@@ -653,28 +569,20 @@ }

const selection = SelectorEngine.findOne(SELECTOR_SELECTION, this._clone);
const search = SelectorEngine.findOne(SELECTOR_SEARCH, this._clone);
if (this._selected.length === 0 && !this._config.search) {
selection.innerHTML = `<span class="form-multi-select-placeholder">${this._config.placeholder}</span>`;
if (this._config.multiple && this._config.selectionType === 'counter') {
selection.innerHTML = `${this._selection.length} ${this._config.selectionTypeCounterText}`;
return;
}
if (this._config.multiple && this._config.selectionType === 'counter' && !this._config.search) {
selection.innerHTML = `${this._selected.length} ${this._config.selectionTypeCounterText}`;
}
if (this._config.multiple && this._config.selectionType === 'tags') {
selection.innerHTML = '';
for (const option of this._selected) {
selection.append(this._createTag(option.value, option.text));
for (const e of this._selection) {
selection.append(this._createTag(e.value, e.text));
}
return;
}
if (this._config.multiple && this._config.selectionType === 'text') {
selection.innerHTML = this._selected.map((option, index) => `<span>${option.text}${index === this._selected.length - 1 ? '' : ','}&nbsp;</span>`).join('');
selection.innerHTML = this._selection.map(e => e.text).join(', ');
return;
}
if (!this._config.multiple && this._selected.length > 0 && !this._config.search) {
selection.innerHTML = this._selected[0].text;
if (this._selection.length > 0) {
selection.innerHTML = this._selection[0].text;
}
if (search) {
selection.append(search);
}
if (this._popper) {
this._popper.update();
}
}

@@ -685,4 +593,4 @@ _updateSelectionCleaner() {

}
const selectionCleaner = SelectorEngine.findOne(SELECTOR_CLEANER, this._clone);
if (this._selected.length > 0) {
const selectionCleaner = SelectorEngine.findOne(SELECTOR_SELECTION_CLEANER, this._clone);
if (this._selection.length > 0) {
selectionCleaner.style.removeProperty('display');

@@ -697,26 +605,20 @@ return;

}
// Select single
if (!this._config.multiple && this._selected.length > 0) {
this._searchElement.placeholder = this._selected[0].text;
if (this._selection.length > 0 && !this._config.multiple) {
this._searchElement.placeholder = this._selection[0].text;
this._selectionElement.style.display = 'none';
return;
}
if (!this._config.multiple && this._selected.length === 0) {
this._searchElement.placeholder = this._config.placeholder;
return;
}
// Select multiple
if (this._config.multiple && this._selected.length > 0 && this._config.selectionType !== 'counter') {
if (this._selection.length > 0 && this._config.multiple && this._config.selectionType !== 'counter') {
this._searchElement.removeAttribute('placeholder');
this._selectionElement.style.removeProperty('display');
return;
}
if (this._config.multiple && this._selected.length === 0) {
if (this._selection.length === 0 && this._config.multiple) {
this._searchElement.placeholder = this._config.placeholder;
this._selectionElement.style.display = 'none';
return;
}
if (this._config.multiple && this._config.selectionType === 'counter') {
this._searchElement.placeholder = `${this._selected.length} item(s) selected`;
this._searchElement.placeholder = `${this._selection.length} item(s) selected`;
this._selectionElement.style.display = 'none';
}

@@ -728,7 +630,7 @@ }

}
if (this._selected.length > 0 && (this._config.selectionType === 'tags' || this._config.selectionType === 'text')) {
if (this._selection.length > 0 && (this._config.selectionType === 'tags' || this._config.selectionType === 'text')) {
this._searchElement.size = size;
return;
}
if (this._selected.length === 0 && (this._config.selectionType === 'tags' || this._config.selectionType === 'text')) {
if (this._selection.length === 0 && (this._config.selectionType === 'tags' || this._config.selectionType === 'text')) {
this._searchElement.removeAttribute('size');

@@ -758,5 +660,2 @@ }

}
_isShown() {
return this._clone.classList.contains(CLASS_NAME_SHOW);
}
_filterOptionsList() {

@@ -835,3 +734,3 @@ const options = SelectorEngine.find(SELECTOR_OPTION, this._clone);

}
context.hide();
context._clone.classList.remove(CLASS_NAME_SHOW);
EventHandler.trigger(context._element, EVENT_HIDDEN);

@@ -843,5 +742,6 @@ }

/**
* Data API implementation
* ------------------------------------------------------------------------
* Data Api implementation
* ------------------------------------------------------------------------
*/
EventHandler.on(window, EVENT_LOAD_DATA_API, () => {

@@ -858,3 +758,6 @@ for (const ms of SelectorEngine.find(SELECTOR_SELECT)) {

/**
* ------------------------------------------------------------------------
* jQuery
* ------------------------------------------------------------------------
* add .MultiSelect to jQuery only if jQuery is present
*/

@@ -861,0 +764,0 @@

2

js/dist/navigation.js
/*!
* CoreUI navigation.js v4.6.0-beta.0 (https://coreui.io)
* CoreUI navigation.js v4.6.0 (https://coreui.io)
* Copyright 2023 The CoreUI Team (https://github.com/orgs/coreui/people)

@@ -4,0 +4,0 @@ * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)

2

js/dist/offcanvas.js
/*!
* CoreUI offcanvas.js v4.6.0-beta.0 (https://coreui.io)
* CoreUI offcanvas.js v4.6.0 (https://coreui.io)
* Copyright 2023 The CoreUI Team (https://github.com/orgs/coreui/people)

@@ -4,0 +4,0 @@ * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)

17

js/dist/picker.js
/*!
* CoreUI picker.js v4.6.0-beta.0 (https://coreui.io)
* CoreUI picker.js v4.6.0 (https://coreui.io)
* Copyright 2023 The CoreUI Team (https://github.com/orgs/coreui/people)
* Licensed under MIT (https://coreui.io)
* Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)
*/
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('./dom/event-handler'), require('./dom/manipulator'), require('./base-component'), require('./dropdown')) :
typeof define === 'function' && define.amd ? define(['./dom/event-handler', './dom/manipulator', './base-component', './dropdown'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Picker = factory(global.EventHandler, global.Manipulator, global.BaseComponent, global.Dropdown));
})(this, (function (EventHandler, Manipulator, BaseComponent, Dropdown) { 'use strict';
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('./base-component.js'), require('./dropdown.js'), require('./dom/event-handler.js'), require('./dom/manipulator.js')) :
typeof define === 'function' && define.amd ? define(['./base-component', './dropdown', './dom/event-handler', './dom/manipulator'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Picker = factory(global.BaseComponent, global.Dropdown, global.EventHandler, global.Manipulator));
})(this, (function (BaseComponent, Dropdown, EventHandler, Manipulator) { 'use strict';
/**
* --------------------------------------------------------------------------
* CoreUI PRO (v4.6.0-beta.0): picker.js
* License (https://coreui.io/pro/license-new/)
* CoreUI PRO picker.js
* License (https://coreui.io/pro/license/)
* --------------------------------------------------------------------------
*/
/**

@@ -20,0 +21,0 @@ * ------------------------------------------------------------------------

2

js/dist/popover.js
/*!
* CoreUI popover.js v4.6.0-beta.0 (https://coreui.io)
* CoreUI popover.js v4.6.0 (https://coreui.io)
* Copyright 2023 The CoreUI Team (https://github.com/orgs/coreui/people)

@@ -4,0 +4,0 @@ * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)

2

js/dist/scrollspy.js
/*!
* CoreUI scrollspy.js v4.6.0-beta.0 (https://coreui.io)
* CoreUI scrollspy.js v4.6.0 (https://coreui.io)
* Copyright 2023 The CoreUI Team (https://github.com/orgs/coreui/people)

@@ -4,0 +4,0 @@ * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)

2

js/dist/sidebar.js
/*!
* CoreUI sidebar.js v4.6.0-beta.0 (https://coreui.io)
* CoreUI sidebar.js v4.6.0 (https://coreui.io)
* Copyright 2023 The CoreUI Team (https://github.com/orgs/coreui/people)

@@ -4,0 +4,0 @@ * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)

16

js/dist/tab.js
/*!
* CoreUI tab.js v4.6.0-beta.0 (https://coreui.io)
* CoreUI tab.js v4.6.0 (https://coreui.io)
* Copyright 2023 The CoreUI Team (https://github.com/orgs/coreui/people)

@@ -41,2 +41,4 @@ * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)

const ARROW_DOWN_KEY = 'ArrowDown';
const HOME_KEY = 'Home';
const END_KEY = 'End';
const CLASS_NAME_ACTIVE = 'active';

@@ -148,3 +150,3 @@ const CLASS_NAME_FADE = 'fade';

_keydown(event) {
if (![ARROW_LEFT_KEY, ARROW_RIGHT_KEY, ARROW_UP_KEY, ARROW_DOWN_KEY].includes(event.key)) {
if (![ARROW_LEFT_KEY, ARROW_RIGHT_KEY, ARROW_UP_KEY, ARROW_DOWN_KEY, HOME_KEY, END_KEY].includes(event.key)) {
return;

@@ -154,4 +156,10 @@ }

event.preventDefault();
const isNext = [ARROW_RIGHT_KEY, ARROW_DOWN_KEY].includes(event.key);
const nextActiveElement = index_js.getNextActiveElement(this._getChildren().filter(element => !index_js.isDisabled(element)), event.target, isNext, true);
const children = this._getChildren().filter(element => !index_js.isDisabled(element));
let nextActiveElement;
if ([HOME_KEY, END_KEY].includes(event.key)) {
nextActiveElement = children[event.key === HOME_KEY ? 0 : children.length - 1];
} else {
const isNext = [ARROW_RIGHT_KEY, ARROW_DOWN_KEY].includes(event.key);
nextActiveElement = index_js.getNextActiveElement(children, event.target, isNext, true);
}
if (nextActiveElement) {

@@ -158,0 +166,0 @@ nextActiveElement.focus({

497

js/dist/time-picker.js
/*!
* CoreUI time-picker.js v4.6.0-beta.0 (https://coreui.io)
* CoreUI time-picker.js v4.6.0 (https://coreui.io)
* Copyright 2023 The CoreUI Team (https://github.com/orgs/coreui/people)

@@ -7,30 +7,12 @@ * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)

(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('@popperjs/core'), require('./base-component.js'), require('./dom/event-handler.js'), require('./dom/manipulator.js'), require('./dom/selector-engine.js'), require('./util/index.js'), require('./util/time.js')) :
typeof define === 'function' && define.amd ? define(['@popperjs/core', './base-component', './dom/event-handler', './dom/manipulator', './dom/selector-engine', './util/index', './util/time'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.TimePicker = factory(global["@popperjs/core"], global.BaseComponent, global.EventHandler, global.Manipulator, global.SelectorEngine, global.Index, global.Time));
})(this, (function (Popper, BaseComponent, EventHandler, Manipulator, SelectorEngine, index_js, time_js) { 'use strict';
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('./picker.js'), require('./dom/event-handler.js'), require('./dom/manipulator.js'), require('./dom/selector-engine.js'), require('./util/index.js'), require('./util/time.js')) :
typeof define === 'function' && define.amd ? define(['./picker', './dom/event-handler', './dom/manipulator', './dom/selector-engine', './util/index', './util/time'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.TimePicker = factory(global.Picker, global.EventHandler, global.Manipulator, global.SelectorEngine, global.Index, global.Time));
})(this, (function (Picker, EventHandler, Manipulator, SelectorEngine, index_js, time_js) { 'use strict';
function _interopNamespaceDefault(e) {
const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
if (e) {
for (const k in e) {
if (k !== 'default') {
const d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: () => e[k]
});
}
}
}
n.default = e;
return Object.freeze(n);
}
const Popper__namespace = /*#__PURE__*/_interopNamespaceDefault(Popper);
/* eslint-disable indent */
/**
* --------------------------------------------------------------------------
* CoreUI PRO time-picker.js
* License (https://coreui.io/pro/license-new/)
* License (https://coreui.io/pro/license/)
* --------------------------------------------------------------------------

@@ -41,4 +23,6 @@ */

/**
* Constants
*/
* ------------------------------------------------------------------------
* Constants
* ------------------------------------------------------------------------
*/

@@ -49,42 +33,7 @@ const NAME = 'time-picker';

const DATA_API_KEY = '.data-api';
const TAB_KEY = 'Tab';
const RIGHT_MOUSE_BUTTON = 2;
const EVENT_CLICK = `click${EVENT_KEY}`;
const EVENT_HIDE = `hide${EVENT_KEY}`;
const EVENT_HIDDEN = `hidden${EVENT_KEY}`;
const EVENT_INPUT = 'input';
const EVENT_SHOW = `show${EVENT_KEY}`;
const EVENT_SHOWN = `shown${EVENT_KEY}`;
const EVENT_SUBMIT = 'submit';
const EVENT_TIME_CHANGE = `timeChange${EVENT_KEY}`;
const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`;
const EVENT_KEYUP_DATA_API = `keyup${EVENT_KEY}${DATA_API_KEY}`;
const EVENT_LOAD_DATA_API = `load${EVENT_KEY}${DATA_API_KEY}`;
const CLASS_NAME_BODY = 'time-picker-body';
const CLASS_NAME_CLEANER = 'time-picker-cleaner';
const CLASS_NAME_DISABLED = 'disabled';
const CLASS_NAME_DROPDOWN = 'time-picker-dropdown';
const CLASS_NAME_FOOTER = 'time-picker-footer';
const CLASS_NAME_INDICATOR = 'time-picker-indicator';
const CLASS_NAME_INLINE_ICON = 'time-picker-inline-icon';
const CLASS_NAME_INLINE_SELECT = 'time-picker-inline-select';
const CLASS_NAME_INPUT = 'time-picker-input';
const CLASS_NAME_INPUT_GROUP = 'time-picker-input-group';
const CLASS_NAME_IS_INVALID = 'is-invalid';
const CLASS_NAME_IS_VALID = 'is-valid';
const CLASS_NAME_ROLL = 'time-picker-roll';
const CLASS_NAME_ROLL_COL = 'time-picker-roll-col';
const CLASS_NAME_ROLL_CELL = 'time-picker-roll-cell';
const CLASS_NAME_SELECTED = 'selected';
const CLASS_NAME_SHOW = 'show';
const CLASS_NAME_TIME_PICKER = 'time-picker';
const CLASS_NAME_WAS_VALIDATED = 'was-validated';
const SELECTOR_DATA_TOGGLE = '[data-coreui-toggle="time-picker"]:not(.disabled):not(:disabled)';
const SELECTOR_DATA_TOGGLE_SHOWN = `${SELECTOR_DATA_TOGGLE}.${CLASS_NAME_SHOW}`;
const SELECTOR_WAS_VALIDATED = 'form.was-validated';
const SELECTOR_DATA_TOGGLE = '[data-coreui-toggle="time-picker"]';
const Default = {
cancelButton: 'Cancel',
cancelButtonClasses: ['btn', 'btn-sm', 'btn-ghost-primary'],
confirmButton: 'OK',
confirmButtonClasses: ['btn', 'btn-sm', 'btn-primary'],
...Picker.Default,
cleaner: true,

@@ -95,8 +44,6 @@ container: 'dropdown',

indicator: true,
invalid: false,
inputReadOnly: false,
invalid: false,
locale: 'default',
name: null,
placeholder: 'Select time',
required: true,
size: null,

@@ -108,10 +55,4 @@ time: null,

const DefaultType = {
cancelButton: '(boolean|string)',
cancelButtonClasses: '(array|string)',
confirmButton: '(boolean|string)',
confirmButtonClasses: '(array|string)',
...Picker.DefaultType,
cleaner: 'boolean',
container: 'string',
disabled: 'boolean',
footer: 'boolean',
indicator: 'boolean',

@@ -121,5 +62,3 @@ inputReadOnly: 'boolean',

locale: 'string',
name: 'string',
placeholder: 'string',
required: 'boolean',
size: '(string|null)',

@@ -132,6 +71,8 @@ time: '(date|string|null)',

/**
* Class definition
*/
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
class TimePicker extends BaseComponent {
class TimePicker extends Picker {
constructor(element, config) {

@@ -164,7 +105,6 @@ super(element);

}
this._date = new Date(_date);
if (this._input) {
this._input.value = _date.toLocaleTimeString(this._config.locale);
this._input.dispatchEvent(new Event('change'));
}
this._date = new Date(_date);
EventHandler.trigger(this._element, EVENT_TIME_CHANGE, {

@@ -180,3 +120,4 @@ timeString: _date.toTimeString(),

this._ampm = this._date ? time_js.getAmPm(new Date(this._date), this._config.locale) : 'am';
this._popper = null;
// subcomponents
this._input = null;

@@ -191,2 +132,3 @@ this._timePickerBody = null;

// Getters
static get Default() {

@@ -203,36 +145,7 @@ return Default;

// Public
toggle() {
return this._isShown() ? this.hide() : this.show();
}
show() {
if (this._config.disabled || this._isShown()) {
return;
}
EventHandler.trigger(this._element, EVENT_SHOW);
this._element.classList.add(CLASS_NAME_SHOW);
this._element.setAttribute('aria-expanded', true);
EventHandler.trigger(this._element, EVENT_SHOWN);
this._createPopper();
}
hide() {
EventHandler.trigger(this._element, EVENT_HIDE);
if (this._popper) {
this._popper.destroy();
}
this._element.classList.remove(CLASS_NAME_SHOW);
this._element.setAttribute('aria-expanded', 'false');
EventHandler.trigger(this._element, EVENT_HIDDEN);
}
dispose() {
if (this._popper) {
this._popper.destroy();
}
super.dispose();
}
cancel() {
this._date = this._initialDate;
this._input.value = this._initialDate ? this._convertStringToDate(this._initialDate).toLocaleTimeString(this._config.locale) : '';
this._input.dispatchEvent(new Event('change'));
this._timePickerBody.innerHTML = '';
this.hide();
this._createTimePickerSelection();

@@ -243,3 +156,2 @@ }

this._input.value = '';
this._input.dispatchEvent(new Event('change'));
this._timePickerBody.innerHTML = '';

@@ -251,3 +163,2 @@ this._createTimePickerSelection();

this._input.value = this._convertStringToDate(this._config.time).toLocaleTimeString(this._config.locale);
this._input.dispatchEvent(new Event('change'));
this._timePickerBody.innerHTML = '';

@@ -265,16 +176,55 @@ this._createTimePickerSelection();

}
_getPartOfTime(part) {
if (this._date === null) {
return null;
}
if (part === 'hours') {
return time_js.isAmPm(this._config.locale) ? time_js.convert24hTo12h(this._date.getHours()) : this._date.getHours();
}
if (part === 'minutes') {
return this._date.getMinutes();
}
if (part === 'seconds') {
return this._date.getSeconds();
}
if (part === 'toggle') {
return time_js.getAmPm(new Date(this._date), this._config.locale);
}
}
_setUpRolls(initial = false) {
for (const part of Array.from(['hours', 'minutes', 'seconds', 'toggle'])) {
for (const element of SelectorEngine.find(`[data-coreui-${part}]`, this._element)) {
if (this._getPartOfTime(part) === Manipulator.getDataAttribute(element, part)) {
element.classList.add('selected');
this._scrollTo(element.parentElement, element, initial);
for (const sibling of element.parentElement.children) {
// eslint-disable-next-line max-depth
if (sibling !== element) {
sibling.classList.remove('selected');
}
}
}
}
}
}
_setUpSelects() {
for (const part of Array.from(['hours', 'minutes', 'seconds', 'toggle'])) {
for (const element of SelectorEngine.find(`select.${part}`, this._element)) {
if (this._getPartOfTime(part)) {
element.value = this._getPartOfTime(part);
}
}
}
}
// Private
_addEventListeners() {
EventHandler.on(this._togglerElement, EVENT_CLICK, () => {
if (!this._config.disabled) {
this.show();
this._initialDate = new Date(this._date);
if (this._config.variant === 'roll') {
this._setUpRolls(true);
}
if (this._config.variant === 'select') {
this._setUpSelects();
}
EventHandler.on(this._element, 'shown.coreui.dropdown', () => {
this._initialDate = new Date(this._date);
if (this._config.variant === 'roll') {
this._setUpRolls(true);
}
if (this._config.variant === 'select') {
this._setUpSelects();
}
});

@@ -289,11 +239,15 @@ EventHandler.on(this._element, 'timeChange.coreui.time-picker', () => {

});
EventHandler.on(this._element, 'click', '.picker-input-group-cleaner', event => {
event.stopPropagation();
this.clear();
});
EventHandler.on(this._element, 'onCancelClick.coreui.picker', () => {
this.cancel();
});
EventHandler.on(this._input, EVENT_INPUT, event => {
EventHandler.on(this._input, 'input', event => {
if (time_js.isValidTime(event.target.value)) {
this._date = this._convertStringToDate(event.target.value);
EventHandler.trigger(this._element, EVENT_TIME_CHANGE, {
timeString: this._date ? this._date.toTimeString() : null,
localeTimeString: this._date ? this._date.toLocaleTimeString() : null,
timeString: this._date.toTimeString(),
localeTimeString: this._date.toLocaleTimeString(),
date: this._date

@@ -303,103 +257,53 @@ });

});
if (this._config.container === 'dropdown') {
EventHandler.on(this._input.form, EVENT_SUBMIT, () => {
if (this._input.form.classList.contains(CLASS_NAME_WAS_VALIDATED)) {
if (Number.isNaN(Date.parse(`1970-01-01 ${this._input.value}`))) {
return this._element.classList.add(CLASS_NAME_IS_INVALID);
}
if (this._date instanceof Date) {
return this._element.classList.add(CLASS_NAME_IS_VALID);
}
this._element.classList.add(CLASS_NAME_IS_INVALID);
}
});
}
}
_createTimePicker() {
this._element.classList.add(CLASS_NAME_TIME_PICKER);
Manipulator.setDataAttribute(this._element, 'toggle', CLASS_NAME_TIME_PICKER);
_convertStringToDate(date) {
return date ? date instanceof Date ? date : new Date(`1970-01-01 ${date}`) : null;
}
_createInputGroup() {
const inputGroupEl = document.createElement('div');
inputGroupEl.classList.add('input-group', 'picker-input-group');
if (this._config.size) {
this._element.classList.add(`time-picker-${this._config.size}`);
inputGroupEl.classList.add(`input-group-${this._config.size}`);
}
this._element.classList.toggle(CLASS_NAME_IS_VALID, this._config.valid);
if (this._config.disabled) {
this._element.classList.add(CLASS_NAME_DISABLED);
}
this._element.classList.toggle(CLASS_NAME_IS_INVALID, this._config.invalid);
if (this._config.container === 'dropdown') {
this._element.append(this._createTimePickerInputGroup());
const dropdownEl = document.createElement('div');
dropdownEl.classList.add(CLASS_NAME_DROPDOWN);
dropdownEl.append(this._createTimePickerBody());
if (this._config.footer || this._config.timepicker) {
dropdownEl.append(this._createTimePickerFooter());
}
this._element.append(dropdownEl);
this._menu = dropdownEl;
}
if (this._config.container === 'inline') {
this._element.append(this._createTimePickerBody());
}
}
_createTimePickerInputGroup() {
const inputGroupEl = document.createElement('div');
inputGroupEl.classList.add(CLASS_NAME_INPUT_GROUP);
const inputEl = document.createElement('input');
inputEl.classList.add(CLASS_NAME_INPUT);
inputEl.autocomplete = 'off';
inputEl.classList.add('form-control');
inputEl.disabled = this._config.disabled;
inputEl.placeholder = this._config.placeholder;
inputEl.readOnly = this._config.inputReadOnly;
inputEl.required = this._config.required;
inputEl.type = 'text';
inputEl.value = this._date ? this._date.toLocaleTimeString(this._config.locale) : '';
if (this._config.name || this._element.id) {
inputEl.name = this._config.name || `time-picker-${this._element.id}`;
if (this._element.id) {
inputEl.name = `time-picker-${this._element.id}`;
}
const events = ['change', 'keyup', 'paste'];
for (const event of events) {
inputEl.addEventListener(event, ({
target
}) => {
if (target.closest(SELECTOR_WAS_VALIDATED)) {
if (Number.isNaN(Date.parse(`1970-01-01 ${target.value}`))) {
this._element.classList.add(CLASS_NAME_IS_INVALID);
this._element.classList.remove(CLASS_NAME_IS_VALID);
return;
}
if (this._date instanceof Date) {
this._element.classList.add(CLASS_NAME_IS_VALID);
this._element.classList.remove(CLASS_NAME_IS_INVALID);
return;
}
this._element.classList.add(CLASS_NAME_IS_INVALID);
this._element.classList.remove(CLASS_NAME_IS_VALID);
}
});
}
inputGroupEl.append(inputEl);
const inputGroupTextEl = document.createElement('span');
inputGroupTextEl.classList.add('input-group-text');
if (this._config.indicator) {
const inputGroupIndicatorEl = document.createElement('div');
inputGroupIndicatorEl.classList.add(CLASS_NAME_INDICATOR);
inputGroupEl.append(inputGroupIndicatorEl);
inputGroupTextEl.innerHTML = `
<span class="picker-input-group-indicator">
<span class="picker-input-group-icon time-picker-input-icon"></span>
</span>`;
}
if (this._config.cleaner) {
const inputGroupCleanerEl = document.createElement('div');
inputGroupCleanerEl.classList.add(CLASS_NAME_CLEANER);
inputGroupCleanerEl.addEventListener('click', event => {
event.stopPropagation();
this.clear();
});
inputGroupEl.append(inputGroupCleanerEl);
inputGroupTextEl.innerHTML += `
<span class="picker-input-group-cleaner" role="button">
<span class="picker-input-group-icon time-picker-cleaner-icon"></span>
</span>`;
}
if (this._config.indicator || this._config.cleaner) {
inputGroupEl.append(inputGroupTextEl);
}
this._input = inputEl;
this._togglerElement = inputGroupEl;
return inputGroupEl;
}
_createTimePickerSelection() {
if (this._config.variant === 'roll') {
this._createTimePickerRoll();
_createTimePicker() {
this._element.classList.add('time-picker');
this._element.classList.toggle('is-invalid', this._config.invalid);
this._element.classList.toggle('is-valid', this._config.valid);
if (this._config.container === 'dropdown') {
this._dropdownToggleEl.append(this._createInputGroup());
this._dropdownMenuEl.prepend(this._createTimePickerBody());
}
if (this._config.variant === 'select') {
this._createTimePickerInlineSelects();
if (this._config.container === 'inline') {
this._element.append(this._createTimePickerBody());
}

@@ -409,5 +313,5 @@ }

const timePickerBodyEl = document.createElement('div');
timePickerBodyEl.classList.add(CLASS_NAME_BODY);
timePickerBodyEl.classList.add('time-picker-body');
if (this._config.variant === 'roll') {
timePickerBodyEl.classList.add(CLASS_NAME_ROLL);
timePickerBodyEl.classList.add('time-picker-roll');
}

@@ -417,5 +321,16 @@ this._timePickerBody = timePickerBodyEl;

}
_createTimePickerInlineSelect(className, options) {
_createTimePickerSelection() {
const selectedHour = this._date ? time_js.isAmPm(this._config.locale) ? time_js.convert24hTo12h(this._date.getHours()) : this._date.getHours() : null;
const selectedMinute = this._date ? this._date.getMinutes() : null;
const selectedSecond = this._date ? this._date.getSeconds() : null;
if (this._config.variant === 'roll') {
this._createTimePickerRoll(selectedHour, selectedMinute, selectedSecond);
}
if (this._config.variant === 'select') {
this._createTimePickerSelect(selectedHour, selectedMinute, selectedSecond);
}
}
_createSelect(className, options) {
const selectEl = document.createElement('select');
selectEl.classList.add(CLASS_NAME_INLINE_SELECT, className);
selectEl.classList.add('form-select', 'form-select-sm', className);
selectEl.disabled = this._config.disabled;

@@ -431,9 +346,10 @@ selectEl.addEventListener('change', event => this._handleTimeChange(className, event.target.value));

}
_createTimePickerInlineSelects() {
_createTimePickerSelect() {
const timeSeparatorEl = document.createElement('div');
timeSeparatorEl.classList.add('time-separator');
timeSeparatorEl.innerHTML = ':';
this._timePickerBody.innerHTML = `<span class="${CLASS_NAME_INLINE_ICON}"></span>`;
this._timePickerBody.append(this._createTimePickerInlineSelect('hours', time_js.getListOfHours(this._config.locale)), timeSeparatorEl.cloneNode(true), this._createTimePickerInlineSelect('minutes', time_js.getListOfMinutes(this._config.locale, true)), timeSeparatorEl, this._createTimePickerInlineSelect('seconds', time_js.getListOfSeconds(this._config.locale, true)));
this._timePickerBody.innerHTML = '<span class="time-picker-inline-icon"></span>';
this._timePickerBody.append(this._createSelect('hours', time_js.getListOfHours(this._config.locale)), timeSeparatorEl.cloneNode(true), this._createSelect('minutes', time_js.getListOfMinutes(this._config.locale, true)), timeSeparatorEl, this._createSelect('seconds', time_js.getListOfSeconds(this._config.locale, true)));
if (time_js.isAmPm(this._config.locale)) {
this._timePickerBody.append(this._createTimePickerInlineSelect('toggle', [{
this._timePickerBody.append(this._createSelect('toggle', [{
value: 'am',

@@ -461,6 +377,6 @@ label: 'AM'

const timePickerRollColEl = document.createElement('div');
timePickerRollColEl.classList.add(CLASS_NAME_ROLL_COL);
timePickerRollColEl.classList.add('time-picker-roll-col');
for (const option of options) {
const timePickerRollCellEl = document.createElement('div');
timePickerRollCellEl.classList.add(CLASS_NAME_ROLL_CELL);
timePickerRollCellEl.classList.add('time-picker-roll-cell');
timePickerRollCellEl.setAttribute('role', 'button');

@@ -476,85 +392,2 @@ timePickerRollCellEl.innerHTML = option.label;

}
_createTimePickerFooter() {
const footerEl = document.createElement('div');
footerEl.classList.add(CLASS_NAME_FOOTER);
if (this._config.cancelButton) {
const cancelButtonEl = document.createElement('button');
cancelButtonEl.classList.add(...this._getButtonClasses(this._config.cancelButtonClasses));
cancelButtonEl.type = 'button';
cancelButtonEl.innerHTML = this._config.cancelButton;
cancelButtonEl.addEventListener('click', () => {
this.cancel();
});
footerEl.append(cancelButtonEl);
}
if (this._config.confirmButton) {
const confirmButtonEl = document.createElement('button');
confirmButtonEl.classList.add(...this._getButtonClasses(this._config.confirmButtonClasses));
confirmButtonEl.type = 'button';
confirmButtonEl.innerHTML = this._config.confirmButton;
confirmButtonEl.addEventListener('click', () => {
this.hide();
});
footerEl.append(confirmButtonEl);
}
return footerEl;
}
_setUpRolls(initial = false) {
for (const part of Array.from(['hours', 'minutes', 'seconds', 'toggle'])) {
for (const element of SelectorEngine.find(`[data-coreui-${part}]`, this._element)) {
if (this._getPartOfTime(part) === Manipulator.getDataAttribute(element, part)) {
element.classList.add(CLASS_NAME_SELECTED);
this._scrollTo(element.parentElement, element, initial);
for (const sibling of element.parentElement.children) {
// eslint-disable-next-line max-depth
if (sibling !== element) {
sibling.classList.remove(CLASS_NAME_SELECTED);
}
}
}
}
}
}
_setUpSelects() {
for (const part of Array.from(['hours', 'minutes', 'seconds', 'toggle'])) {
for (const element of SelectorEngine.find(`select.${part}`, this._element)) {
if (this._getPartOfTime(part)) {
element.value = this._getPartOfTime(part);
}
}
}
}
_updateTimePicker() {
this._element.innerHTML = '';
this._createTimePicker();
}
_convertStringToDate(date) {
return date ? date instanceof Date ? date : new Date(`1970-01-01 ${date}`) : null;
}
_createPopper() {
if (typeof Popper__namespace === 'undefined') {
throw new TypeError('CoreUI\'s time picker require Popper (https://popper.js.org)');
}
const popperConfig = {
modifiers: [{
name: 'preventOverflow',
options: {
boundary: 'clippingParents'
}
}, {
name: 'offset',
options: {
offset: [0, 2]
}
}],
placement: index_js.isRTL() ? 'bottom-end' : 'bottom-start'
};
this._popper = Popper__namespace.createPopper(this._togglerElement, this._menu, popperConfig);
}
_getButtonClasses(classes) {
if (typeof classes === 'string') {
return classes.split(' ');
}
return classes;
}
_getConfig(config) {

@@ -568,22 +401,2 @@ config = {

}
_getPartOfTime(part) {
if (this._date === null) {
return null;
}
if (part === 'hours') {
return time_js.isAmPm(this._config.locale) ? time_js.convert24hTo12h(this._date.getHours()) : this._date.getHours();
}
if (part === 'minutes') {
return this._date.getMinutes();
}
if (part === 'seconds') {
return this._date.getSeconds();
}
if (part === 'toggle') {
return time_js.getAmPm(new Date(this._date), this._config.locale);
}
}
_isShown() {
return this._element.classList.contains(CLASS_NAME_SHOW);
}
_scrollTo(parent, children, initial = false) {

@@ -595,2 +408,6 @@ parent.scrollTo({

}
_updateTimePicker() {
this._element.innerHTML = '';
this._createTimePicker();
}

@@ -620,28 +437,9 @@ // Static

}
static clearMenus(event) {
if (event.button === RIGHT_MOUSE_BUTTON || event.type === 'keyup' && event.key !== TAB_KEY) {
return;
}
const openToggles = SelectorEngine.find(SELECTOR_DATA_TOGGLE_SHOWN);
for (const toggle of openToggles) {
const context = TimePicker.getInstance(toggle);
if (!context) {
continue;
}
const composedPath = event.composedPath();
if (composedPath.includes(context._element)) {
continue;
}
({
relatedTarget: context._element
});
if (event.type === 'click') ;
context.hide();
}
}
}
/**
* Data API implementation
*/
* ------------------------------------------------------------------------
* Data Api implementation
* ------------------------------------------------------------------------
*/

@@ -654,8 +452,9 @@ EventHandler.on(window, EVENT_LOAD_DATA_API, () => {

});
EventHandler.on(document, EVENT_CLICK_DATA_API, TimePicker.clearMenus);
EventHandler.on(document, EVENT_KEYUP_DATA_API, TimePicker.clearMenus);
/**
* jQuery
*/
* ------------------------------------------------------------------------
* jQuery
* ------------------------------------------------------------------------
* add .TimePicker to jQuery only if jQuery is present
*/

@@ -662,0 +461,0 @@ index_js.defineJQueryPlugin(TimePicker);

2

js/dist/toast.js
/*!
* CoreUI toast.js v4.6.0-beta.0 (https://coreui.io)
* CoreUI toast.js v4.6.0 (https://coreui.io)
* Copyright 2023 The CoreUI Team (https://github.com/orgs/coreui/people)

@@ -4,0 +4,0 @@ * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)

2

js/dist/tooltip.js
/*!
* CoreUI tooltip.js v4.6.0-beta.0 (https://coreui.io)
* CoreUI tooltip.js v4.6.0 (https://coreui.io)
* Copyright 2023 The CoreUI Team (https://github.com/orgs/coreui/people)

@@ -4,0 +4,0 @@ * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)

2

js/dist/util/backdrop.js
/*!
* CoreUI backdrop.js v4.6.0-beta.0 (https://coreui.io)
* CoreUI backdrop.js v4.6.0 (https://coreui.io)
* Copyright 2023 The CoreUI Team (https://github.com/orgs/coreui/people)

@@ -4,0 +4,0 @@ * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)

2

js/dist/util/calendar.js
/*!
* CoreUI calendar.js v4.6.0-beta.0 (https://coreui.io)
* CoreUI calendar.js v4.6.0 (https://coreui.io)
* Copyright 2023 The CoreUI Team (https://github.com/orgs/coreui/people)

@@ -4,0 +4,0 @@ * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)

2

js/dist/util/component-functions.js
/*!
* CoreUI component-functions.js v4.6.0-beta.0 (https://coreui.io)
* CoreUI component-functions.js v4.6.0 (https://coreui.io)
* Copyright 2023 The CoreUI Team (https://github.com/orgs/coreui/people)

@@ -4,0 +4,0 @@ * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)

2

js/dist/util/config.js
/*!
* CoreUI config.js v4.6.0-beta.0 (https://coreui.io)
* CoreUI config.js v4.6.0 (https://coreui.io)
* Copyright 2023 The CoreUI Team (https://github.com/orgs/coreui/people)

@@ -4,0 +4,0 @@ * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)

2

js/dist/util/focustrap.js
/*!
* CoreUI focustrap.js v4.6.0-beta.0 (https://coreui.io)
* CoreUI focustrap.js v4.6.0 (https://coreui.io)
* Copyright 2023 The CoreUI Team (https://github.com/orgs/coreui/people)

@@ -4,0 +4,0 @@ * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)

2

js/dist/util/index.js
/*!
* CoreUI index.js v4.6.0-beta.0 (https://coreui.io)
* CoreUI index.js v4.6.0 (https://coreui.io)
* Copyright 2023 The CoreUI Team (https://github.com/orgs/coreui/people)

@@ -4,0 +4,0 @@ * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)

2

js/dist/util/sanitizer.js
/*!
* CoreUI sanitizer.js v4.6.0-beta.0 (https://coreui.io)
* CoreUI sanitizer.js v4.6.0 (https://coreui.io)
* Copyright 2023 The CoreUI Team (https://github.com/orgs/coreui/people)

@@ -4,0 +4,0 @@ * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)

2

js/dist/util/scrollbar.js
/*!
* CoreUI scrollbar.js v4.6.0-beta.0 (https://coreui.io)
* CoreUI scrollbar.js v4.6.0 (https://coreui.io)
* Copyright 2023 The CoreUI Team (https://github.com/orgs/coreui/people)

@@ -4,0 +4,0 @@ * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)

2

js/dist/util/swipe.js
/*!
* CoreUI swipe.js v4.6.0-beta.0 (https://coreui.io)
* CoreUI swipe.js v4.6.0 (https://coreui.io)
* Copyright 2023 The CoreUI Team (https://github.com/orgs/coreui/people)

@@ -4,0 +4,0 @@ * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)

2

js/dist/util/template-factory.js
/*!
* CoreUI template-factory.js v4.6.0-beta.0 (https://coreui.io)
* CoreUI template-factory.js v4.6.0 (https://coreui.io)
* Copyright 2023 The CoreUI Team (https://github.com/orgs/coreui/people)

@@ -4,0 +4,0 @@ * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)

18

js/dist/util/time.js
/*!
* CoreUI time.js v4.6.0-beta.0 (https://coreui.io)
* CoreUI time.js v4.6.0 (https://coreui.io)
* Copyright 2023 The CoreUI Team (https://github.com/orgs/coreui/people)

@@ -35,8 +35,8 @@ * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)

};
const getListOfHours = (locale, ampm = 'auto') => Array.from({
length: ampm === 'auto' && isAmPm(locale) || ampm === true ? 12 : 24
const getListOfHours = locale => Array.from({
length: isAmPm(locale) ? 12 : 24
}, (_, i) => {
return {
value: ampm === 'auto' && isAmPm(locale) || ampm === true ? i + 1 : i,
label: (ampm === 'auto' && isAmPm(locale) || ampm === true ? i + 1 : i).toLocaleString(locale)
value: isAmPm(locale) ? i + 1 : i,
label: (isAmPm(locale) ? i + 1 : i).toLocaleString(locale)
};

@@ -52,5 +52,7 @@ });

label: d.toLocaleTimeString(locale, {
hour: '2-digit',
hour12: false,
minute: '2-digit',
second: '2-digit'
}).split(/[^\dA-Za-z\u06F0-\u06F9]/)[0]
}).split(':')[1]
};

@@ -66,5 +68,7 @@ });

label: d.toLocaleTimeString(locale, {
hour: '2-digit',
hour12: false,
minute: '2-digit',
second: '2-digit'
}).split(/[^\dA-Za-z\u06F0-\u06F9]/)[1]
}).split(':')[2]
};

@@ -71,0 +75,0 @@ });

2

js/src/base-component.js

@@ -20,3 +20,3 @@ /**

const VERSION = '4.6.0-beta.0'
const VERSION = '4.6.0'

@@ -23,0 +23,0 @@ /**

30

js/src/calendar.js

@@ -5,3 +5,3 @@ /* eslint-disable indent, multiline-ternary */

* CoreUI PRO calendar.js
* License (https://coreui.io/pro/license-new/)
* License (https://coreui.io/pro/license/)
* --------------------------------------------------------------------------

@@ -25,8 +25,9 @@ */

isStartDate,
isEndDate
} from './util/calendar.js'
isEndDate } from './util/calendar.js'
/**
* Constants
*/
* ------------------------------------------------------------------------
* Constants
* ------------------------------------------------------------------------
*/

@@ -86,4 +87,6 @@ const NAME = 'calendar'

/**
* Class definition
*/
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/

@@ -480,4 +483,6 @@ class Calendar extends BaseComponent {

/**
* Data API implementation
*/
* ------------------------------------------------------------------------
* Data Api implementation
* ------------------------------------------------------------------------
*/

@@ -491,4 +496,7 @@ EventHandler.on(window, EVENT_LOAD_DATA_API, () => {

/**
* jQuery
*/
* ------------------------------------------------------------------------
* jQuery
* ------------------------------------------------------------------------
* add .Calendar to jQuery only if jQuery is present
*/

@@ -495,0 +503,0 @@ defineJQueryPlugin(Calendar)

79

js/src/date-picker.js
/**
* --------------------------------------------------------------------------
* CoreUI PRO date-picker.js
* License (https://coreui.io/pro/license-new/)
* License (https://coreui.io/pro/license/)
* --------------------------------------------------------------------------

@@ -14,4 +14,6 @@ */

/**
* Constants
*/
* ------------------------------------------------------------------------
* Constants
* ------------------------------------------------------------------------
*/

@@ -23,16 +25,7 @@ const NAME = 'date-picker'

const TAB_KEY = 'Tab'
const RIGHT_MOUSE_BUTTON = 2
const EVENT_DATE_CHANGE = `dateChange${EVENT_KEY}`
const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
const EVENT_KEYUP_DATA_API = `keyup${EVENT_KEY}${DATA_API_KEY}`
const EVENT_LOAD_DATA_API = `load${EVENT_KEY}${DATA_API_KEY}`
const CLASS_NAME_SHOW = 'show'
const SELECTOR_DATA_TOGGLE = '[data-coreui-toggle="date-picker"]'
const SELECTOR_CALENDAR = '.calendar'
const SELECTOR_DATA_TOGGLE = '[data-coreui-toggle="date-picker"]:not(.disabled):not(:disabled)'
const SELECTOR_DATA_TOGGLE_SHOWN = `${SELECTOR_DATA_TOGGLE}.${CLASS_NAME_SHOW}`
const Default = {

@@ -52,7 +45,10 @@ ...DateRangePicker.Default,

/**
* Class definition
*/
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
class DatePicker extends DateRangePicker {
// Getters
static get Default() {

@@ -71,5 +67,6 @@ return Default

// Overrides
_addCalendarEventListeners() {
super._addCalendarEventListeners()
for (const calendar of SelectorEngine.find(SELECTOR_CALENDAR, this._element)) {
for (const calendar of SelectorEngine.find('.calendar', this._element)) {
EventHandler.on(calendar, 'startDateChange.coreui.calendar', event => {

@@ -79,3 +76,3 @@ this._startDate = event.date

this._startInput.value = this._setInputValue(event.date)
this._updateDateRangePickerCalendars()
this._updateCalendars()

@@ -119,39 +116,9 @@ EventHandler.trigger(this._element, EVENT_DATE_CHANGE, {

}
static clearMenus(event) {
if (event.button === RIGHT_MOUSE_BUTTON || (event.type === 'keyup' && event.key !== TAB_KEY)) {
return
}
const openToggles = SelectorEngine.find(SELECTOR_DATA_TOGGLE_SHOWN)
for (const toggle of openToggles) {
const context = DatePicker.getInstance(toggle)
if (!context) {
continue
}
const composedPath = event.composedPath()
if (
composedPath.includes(context._element)
) {
continue
}
const relatedTarget = { relatedTarget: context._element }
if (event.type === 'click') {
relatedTarget.clickEvent = event
}
context.hide()
}
}
}
/**
* Data API implementation
*/
* ------------------------------------------------------------------------
* Data Api implementation
* ------------------------------------------------------------------------
*/

@@ -165,8 +132,8 @@ EventHandler.on(window, EVENT_LOAD_DATA_API, () => {

EventHandler.on(document, EVENT_CLICK_DATA_API, DatePicker.clearMenus)
EventHandler.on(document, EVENT_KEYUP_DATA_API, DatePicker.clearMenus)
/**
* jQuery
*/
* ------------------------------------------------------------------------
* jQuery
* ------------------------------------------------------------------------
* add .DatePicker to jQuery only if jQuery is present
*/

@@ -173,0 +140,0 @@ defineJQueryPlugin(DatePicker)

631

js/src/date-range-picker.js
/**
* --------------------------------------------------------------------------
* CoreUI PRO date-range-picker.js
* License (https://coreui.io/pro/license-new/)
* License (https://coreui.io/pro/license/)
* --------------------------------------------------------------------------
*/
import * as Popper from '@popperjs/core'
import { format as dateFormat, parseISO } from 'date-fns'
import BaseComponent from './base-component.js'
import Calendar from './calendar.js'
import TimePicker from './time-picker.js'
import { defineJQueryPlugin } from './util/index.js'
import EventHandler from './dom/event-handler.js'
import Manipulator from './dom/manipulator.js'
import SelectorEngine from './dom/selector-engine.js'
import { defineJQueryPlugin, isRTL } from './util/index.js'
import { getLocalDateFromString } from './util/calendar.js'
import Calendar from './calendar.js'
import Picker from './picker.js'
import TimePicker from './time-picker.js'
/**
* Constants
*/
* ------------------------------------------------------------------------
* Constants
* ------------------------------------------------------------------------
*/

@@ -28,52 +30,11 @@ const NAME = 'date-range-picker'

const TAB_KEY = 'Tab'
const RIGHT_MOUSE_BUTTON = 2
const EVENT_CLICK = `click${EVENT_KEY}`
const EVENT_END_DATE_CHANGE = `endDateChange${EVENT_KEY}`
const EVENT_HIDE = `hide${EVENT_KEY}`
const EVENT_HIDDEN = `hidden${EVENT_KEY}`
const EVENT_INPUT = 'input'
const EVENT_RESIZE = 'resize'
const EVENT_SHOW = `show${EVENT_KEY}`
const EVENT_SHOWN = `shown${EVENT_KEY}`
const EVENT_SUBMIT = 'submit'
const EVENT_START_DATE_CHANGE = `startDateChange${EVENT_KEY}`
const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
const EVENT_KEYUP_DATA_API = `keyup${EVENT_KEY}${DATA_API_KEY}`
const EVENT_LOAD_DATA_API = `load${EVENT_KEY}${DATA_API_KEY}`
const CLASS_NAME_BODY = 'date-picker-body'
const CLASS_NAME_CALENDAR = 'date-picker-calendar'
const CLASS_NAME_CALENDARS = 'date-picker-calendars'
const CLASS_NAME_CLEANER = 'date-picker-cleaner'
const CLASS_NAME_DATE_PICKER = 'date-picker'
const CLASS_NAME_DATE_RANGE_PICKER = 'date-range-picker'
const CLASS_NAME_DISABLED = 'disabled'
const CLASS_NAME_DROPDOWN = 'date-picker-dropdown'
const CLASS_NAME_INDICATOR = 'date-picker-indicator'
const CLASS_NAME_INPUT = 'date-picker-input'
const CLASS_NAME_INPUT_GROUP = 'date-picker-input-group'
const CLASS_NAME_IS_INVALID = 'is-invalid'
const CLASS_NAME_IS_VALID = 'is-valid'
const CLASS_NAME_FOOTER = 'date-picker-footer'
const CLASS_NAME_RANGES = 'date-picker-ranges'
const CLASS_NAME_SEPARATOR = 'date-picker-separator'
const CLASS_NAME_SHOW = 'show'
const CLASS_NAME_TIME_PICKER = 'time-picker'
const CLASS_NAME_TIME_PICKERS = 'date-picker-timepickers'
const CLASS_NAME_WAS_VALIDATED = 'was-validated'
const SELECTOR_DATA_TOGGLE = '[data-coreui-toggle="date-range-picker"]'
const SELECTOR_CALENDAR = '.calendar'
const SELECTOR_DATA_TOGGLE = '[data-coreui-toggle="date-range-picker"]:not(.disabled):not(:disabled)'
const SELECTOR_DATA_TOGGLE_SHOWN = `${SELECTOR_DATA_TOGGLE}.${CLASS_NAME_SHOW}`
const SELECTOR_INPUT = '.date-picker-input'
const SELECTOR_WAS_VALIDATED = 'form.was-validated'
const Default = {
...Picker.Default,
calendars: 2,
cancelButton: 'Cancel',
cancelButtonClasses: ['btn', 'btn-sm', 'btn-ghost-primary'],
confirmButton: 'OK',
confirmButtonClasses: ['btn', 'btn-sm', 'btn-primary'],
cleaner: true,

@@ -85,5 +46,3 @@ calendarDate: null,

endDate: null,
endName: null,
firstDayOfWeek: 1,
footer: false,
format: null,

@@ -95,3 +54,2 @@ invalid: false,

minDate: null,
name: null,
placeholder: ['Start date', 'End date'],

@@ -101,7 +59,5 @@ range: true,

rangesButtonsClasses: ['btn', 'btn-ghost-secondary'],
required: true,
separator: true,
size: null,
startDate: null,
startName: null,
selectAdjacementDays: false,

@@ -117,7 +73,4 @@ selectEndDate: false,

const DefaultType = {
...Picker.DefaultType,
calendars: 'number',
cancelButton: '(boolean|string)',
cancelButtonClasses: '(array|string)',
confirmButton: '(boolean|string)',
confirmButtonClasses: '(array|string)',
cleaner: 'boolean',

@@ -129,5 +82,3 @@ calendarDate: '(date|string|null)',

endDate: '(date|string|null)',
endName: 'string',
firstDayOfWeek: 'number',
footer: 'boolean',
format: '(string|null)',

@@ -139,3 +90,2 @@ indicator: 'boolean',

minDate: '(date|string|null)',
name: 'string',
placeholder: '(array|string)',

@@ -145,7 +95,5 @@ range: 'boolean',

rangesButtonsClasses: '(array|string)',
required: 'boolean',
separator: 'boolean',
size: '(string|null)',
startDate: '(date|string|null)',
startName: 'string',
selectAdjacementDays: 'boolean',

@@ -161,6 +109,8 @@ selectEndDate: 'boolean',

/**
* Class definition
*/
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
class DateRangePicker extends BaseComponent {
class DateRangePicker extends Picker {
constructor(element, config) {

@@ -176,5 +126,5 @@ super(element)

this._mobile = window.innerWidth < 768
this._popper = null
this._selectEndDate = this._config.selectEndDate
// nodes
this._calendars = null

@@ -185,3 +135,2 @@ this._calendarStart = null

this._endInput = null
this._menu = null
this._startInput = null

@@ -191,6 +140,5 @@ this._timepickers = null

this._timePickerStart = null
this._togglerElement = null
this._createDateRangePicker()
this._createDateRangePickerCalendars()
this._createCalendars()
this._addEventListeners()

@@ -201,2 +149,3 @@ this._addCalendarEventListeners()

// Getters
static get Default() {

@@ -215,46 +164,8 @@ return Default

// Public
toggle() {
return this._isShown() ? this.hide() : this.show()
}
show() {
if (this._config.disabled || this._isShown()) {
return
}
EventHandler.trigger(this._element, EVENT_SHOW)
this._element.classList.add(CLASS_NAME_SHOW)
this._element.setAttribute('aria-expanded', true)
EventHandler.trigger(this._element, EVENT_SHOWN)
this._createPopper()
}
hide() {
EventHandler.trigger(this._element, EVENT_HIDE)
if (this._popper) {
this._popper.destroy()
}
this._element.classList.remove(CLASS_NAME_SHOW)
this._element.setAttribute('aria-expanded', 'false')
EventHandler.trigger(this._element, EVENT_HIDDEN)
}
dispose() {
if (this._popper) {
this._popper.destroy()
}
super.dispose()
}
cancel() {
this._endDate = this._initialEndDate
this._endInput.value = this._setInputValue(this._initialEndDate)
this._endInput.dispatchEvent(new Event('change'))
this._startDate = this._initialStartDate
this._startInput.value = this._setInputValue(this._initialStartDate)
this._startInput.dispatchEvent(new Event('change'))
this._calendars.innerHTML = ''

@@ -265,4 +176,3 @@ if (this._config.timepicker) {

this.hide()
this._createDateRangePickerCalendars()
this._createCalendars()
this._addCalendarEventListeners()

@@ -274,6 +184,4 @@ }

this._endInput.value = ''
this._endInput.dispatchEvent(new Event('change'))
this._startDate = null
this._startInput.value = ''
this._startInput.dispatchEvent(new Event('change'))
this._calendars.innerHTML = ''

@@ -284,3 +192,3 @@ if (this._config.timepicker) {

this._createDateRangePickerCalendars()
this._createCalendars()
this._addCalendarEventListeners()

@@ -292,6 +200,4 @@ }

this._endInput.value = this._setInputValue(this._config.endDate)
this._endInput.dispatchEvent(new Event('change'))
this._startDate = this._config.startDate
this._startInput.value = this._setInputValue(this._config.startDate)
this._startInput.dispatchEvent(new Event('change'))
this._calendars.innerHTML = ''

@@ -302,3 +208,3 @@ if (this._config.timepicker) {

this._createDateRangePickerCalendars()
this._createCalendars()
this._addCalendarEventListeners()

@@ -318,3 +224,3 @@ }

this._createDateRangePicker()
this._createDateRangePickerCalendars()
this._createCalendars()
this._addEventListeners()

@@ -326,16 +232,14 @@ this._addCalendarEventListeners()

_addEventListeners() {
EventHandler.on(this._togglerElement, EVENT_CLICK, () => {
if (!this._config.disabled) {
this.show()
this._initialStartDate = new Date(this._startDate)
this._initialEndDate = new Date(this._endDate)
}
EventHandler.on(this._element, 'shown.coreui.dropdown', () => {
this._initialStartDate = new Date(this._startDate)
this._initialEndDate = new Date(this._endDate)
})
EventHandler.on(this._startInput, EVENT_CLICK, () => {
EventHandler.on(this._startInput, 'click', () => {
this._dropdown.show()
this._selectEndDate = false
this._updateDateRangePickerCalendars()
this._updateCalendars()
})
EventHandler.on(this._startInput, EVENT_INPUT, event => {
EventHandler.on(this._startInput, 'input', event => {
const date = this._config.format ?

@@ -348,34 +252,13 @@ parseISO(event.target.value) :

this._calendarDate = date
this._updateDateRangePickerCalendars()
this._updateCalendars()
}
})
EventHandler.on(this._startInput.form, EVENT_SUBMIT, () => {
if (this._startInput.form.classList.contains(CLASS_NAME_WAS_VALIDATED)) {
if (this._config.range && (Number.isNaN(Date.parse(this._startInput.value)) || Number.isNaN(Date.parse(this._endInput.value)))) {
return this._element.classList.add(CLASS_NAME_IS_INVALID)
}
if (this._config.range && this._startDate instanceof Date && this._endDate instanceof Date) {
return this._element.classList.add(CLASS_NAME_IS_VALID)
}
if (!this._config.range && Number.isNaN(Date.parse(this._startInput.value))) {
return this._element.classList.add(CLASS_NAME_IS_INVALID)
}
if (!this._config.range && this._startDate instanceof Date) {
return this._element.classList.add(CLASS_NAME_IS_VALID)
}
this._element.classList.add(CLASS_NAME_IS_INVALID)
}
})
EventHandler.on(this._endInput, EVENT_CLICK, () => {
EventHandler.on(this._endInput, 'click', () => {
this._dropdown.show()
this._selectEndDate = true
this._updateDateRangePickerCalendars()
this._updateCalendars()
})
EventHandler.on(this._endInput, EVENT_INPUT, event => {
EventHandler.on(this._endInput, 'input', event => {
const date = this._config.format ?

@@ -387,7 +270,16 @@ parseISO(event.target.value) :

this._calendarDate = date
this._updateDateRangePickerCalendars()
this._updateCalendars()
}
})
EventHandler.on(window, EVENT_RESIZE, () => {
EventHandler.on(this._element, 'click', '.picker-input-group-cleaner', event => {
event.stopPropagation()
this.clear()
})
EventHandler.on(this._element, 'onCancelClick.coreui.picker', () => {
this.cancel()
})
EventHandler.on(window, 'resize', () => {
this._mobile = window.innerWidth < 768

@@ -398,3 +290,3 @@ })

_addCalendarEventListeners() {
for (const calendar of SelectorEngine.find(SELECTOR_CALENDAR, this._element)) {
for (const calendar of SelectorEngine.find('.calendar', this._element)) {
EventHandler.on(calendar, 'startDateChange.coreui.calendar', event => {

@@ -404,7 +296,6 @@ this._startDate = event.date

this._startInput.value = this._setInputValue(event.date)
this._startInput.dispatchEvent(new Event('change'))
this._updateDateRangePickerCalendars()
this._updateCalendars()
if (!this._config.range && (!this._config.footer && !this._config.timepicker)) {
this.hide()
this._dropdown.hide()
}

@@ -422,7 +313,6 @@

this._endInput.value = this._setInputValue(event.date)
this._startInput.dispatchEvent(new Event('change'))
this._updateDateRangePickerCalendars()
this._updateCalendars()
if (this._startDate && (!this._config.footer && !this._config.timepicker)) {
this.hide()
this._dropdown.hide()
}

@@ -447,54 +337,53 @@

_createDateRangePicker() {
this._element.classList.add(CLASS_NAME_DATE_PICKER)
_convertStringToDate(date) {
return date ? (date instanceof Date ? date : new Date(date)) : null
}
Manipulator.setDataAttribute(this._element, 'toggle', this._config.range ? CLASS_NAME_DATE_RANGE_PICKER : CLASS_NAME_DATE_PICKER)
_createInput(name, placeholder, value) {
const inputEl = document.createElement('input')
inputEl.classList.add('form-control')
inputEl.disabled = this._config.disabled
inputEl.placeholder = placeholder
inputEl.readOnly = this._config.inputReadOnly || typeof this._config.format === 'string'
inputEl.type = 'text'
inputEl.value = value
if (this._config.size) {
this._element.classList.add(`date-picker-${this._config.size}`)
if (this._element.id) {
inputEl.name = `${name}-${this._element.id}`
}
if (this._config.disabled) {
this._element.classList.add(CLASS_NAME_DISABLED)
}
this._element.classList.toggle(CLASS_NAME_IS_INVALID, this._config.invalid)
this._element.classList.toggle(CLASS_NAME_IS_VALID, this._config.valid)
this._element.append(this._createDateRangePickerInputGroup())
const dropdownEl = document.createElement('div')
dropdownEl.classList.add(CLASS_NAME_DROPDOWN)
dropdownEl.append(this._createDateRangePickerBody())
if (this._config.footer || this._config.timepicker) {
dropdownEl.append(this._createDateRangeFooter())
}
this._element.append(dropdownEl)
this._menu = dropdownEl
return inputEl
}
_createDateRangePickerInputGroup() {
_createInputGroup() {
const inputGroupEl = document.createElement('div')
inputGroupEl.classList.add(CLASS_NAME_INPUT_GROUP)
inputGroupEl.classList.add('input-group', 'picker-input-group')
let startInputName = null
if (this._config.name || this._config.startName || this._element.id) {
startInputName = this._config.name || this._config.startName || (this._config.range ? `date-range-picker-start-date-${this._element.id}` : `date-picker-${this._element.id}`)
if (this._config.size) {
inputGroupEl.classList.add(`input-group-${this._config.size}`)
}
const startInputEl = this._createInput(startInputName, this._getPlaceholder()[0], this._setInputValue(this._startDate))
const startInputEl = this._createInput(this._config.range ? 'date-range-picker-start-date' : 'date-picker', this._getPlaceholder()[0], this._setInputValue(this._startDate))
const endInputEl = this._createInput('date-range-picker-end-date', this._getPlaceholder()[1], this._setInputValue(this._endDate))
let endInputName = null
const inputGroupTextSeparatorEl = document.createElement('span')
inputGroupTextSeparatorEl.classList.add('input-group-text')
inputGroupTextSeparatorEl.innerHTML = '<span class="picker-input-group-icon date-picker-arrow-icon"></span>'
if (this._config.endName || this._element.id) {
endInputName = this._config.endName || `date-range-picker-end-date-${this._element.id}`
const inputGroupTextEl = document.createElement('span')
inputGroupTextEl.classList.add('input-group-text')
if (this._config.indicator) {
inputGroupTextEl.innerHTML = `
<span class="picker-input-group-indicator">
<span class="picker-input-group-icon date-picker-input-icon"></span>
</span>`
}
const endInputEl = this._createInput(endInputName, this._getPlaceholder()[1], this._setInputValue(this._endDate))
if (this._config.cleaner) {
inputGroupTextEl.innerHTML += `
<span class="picker-input-group-cleaner" role="button">
<span class="picker-input-group-icon date-picker-cleaner-icon"></span>
</span>`
}
const inputGroupTextSeparatorEl = document.createElement('div')
inputGroupTextSeparatorEl.classList.add(CLASS_NAME_SEPARATOR)
this._startInput = startInputEl

@@ -513,74 +402,12 @@ this._endInput = endInputEl

if (this._config.indicator) {
const inputGroupIndicatorEl = document.createElement('div')
inputGroupIndicatorEl.classList.add(CLASS_NAME_INDICATOR)
inputGroupEl.append(inputGroupIndicatorEl)
if (this._config.indicator || this._config.cleaner) {
inputGroupEl.append(inputGroupTextEl)
}
if (this._config.cleaner) {
const inputGroupCleanerEl = document.createElement('div')
inputGroupCleanerEl.classList.add(CLASS_NAME_CLEANER)
inputGroupCleanerEl.addEventListener('click', event => {
event.stopPropagation()
this.clear()
})
inputGroupEl.append(inputGroupCleanerEl)
}
this._togglerElement = inputGroupEl
return inputGroupEl
}
_createDateRangePickerBody() {
const dateRangePickerBodyEl = document.createElement('div')
dateRangePickerBodyEl.classList.add(CLASS_NAME_BODY)
if (Object.keys(this._config.ranges).length) {
const dateRangePickerRangesEl = document.createElement('div')
dateRangePickerRangesEl.classList.add(CLASS_NAME_RANGES)
for (const key of Object.keys(this._config.ranges)) {
const buttonEl = document.createElement('button')
buttonEl.classList.add(...this._getButtonClasses(this._config.rangesButtonsClasses))
buttonEl.role = 'button'
buttonEl.addEventListener('click', () => {
this._startDate = this._config.ranges[key][0]
this._endDate = this._config.ranges[key][1]
this._startInput.value = this._setInputValue(this._startDate)
this._startInput.dispatchEvent(new Event('change'))
this._endInput.value = this._setInputValue(this._endDate)
this._endInput.dispatchEvent(new Event('change'))
this._updateDateRangePickerCalendars()
})
buttonEl.innerHTML = key
dateRangePickerRangesEl.append(buttonEl)
}
dateRangePickerBodyEl.append(dateRangePickerRangesEl)
}
const calendarsEl = document.createElement('div')
calendarsEl.classList.add(CLASS_NAME_CALENDARS)
this._calendars = calendarsEl
dateRangePickerBodyEl.append(calendarsEl)
if (this._config.timepicker) {
const timepickersEl = document.createElement('div')
timepickersEl.classList.add(CLASS_NAME_TIME_PICKERS)
this._timepickers = timepickersEl
dateRangePickerBodyEl.append(timepickersEl)
}
return dateRangePickerBodyEl
}
_createDateRangePickerCalendars() {
_createCalendars() {
const calendarEl = document.createElement('div')
calendarEl.classList.add(CLASS_NAME_CALENDAR)
calendarEl.classList.add('date-picker-calendar')

@@ -616,3 +443,3 @@ this._calendars.append(calendarEl)

)
this._updateDateRangePickerCalendars()
this._updateCalendars()
})

@@ -623,3 +450,3 @@

const timePickerStartEl = document.createElement('div')
timePickerStartEl.classList.add(CLASS_NAME_TIME_PICKER)
timePickerStartEl.classList.add('time-picker')

@@ -639,7 +466,7 @@ // eslint-disable-next-line no-new

this._startInput.value = this._setInputValue(this._startDate)
this._updateDateRangePickerCalendars()
this._updateCalendars()
})
const timePickerEndEl = document.createElement('div')
timePickerEndEl.classList.add(CLASS_NAME_TIME_PICKER)
timePickerEndEl.classList.add('time-picker')

@@ -659,3 +486,3 @@ // eslint-disable-next-line no-new

this._endInput.value = this._setInputValue(this._endDate)
this._updateDateRangePickerCalendars()
this._updateCalendars()
})

@@ -666,3 +493,3 @@ } else {

const timePickerEl = document.createElement('div')
timePickerEl.classList.add(CLASS_NAME_TIME_PICKER)
timePickerEl.classList.add('time-picker')

@@ -689,3 +516,3 @@ // eslint-disable-next-line no-new

this._updateDateRangePickerCalendars()
this._updateCalendars()
})

@@ -697,140 +524,83 @@ }

_createDateRangeFooter() {
const footerEl = document.createElement('div')
footerEl.classList.add(CLASS_NAME_FOOTER)
_createDateRangePicker() {
this._element.classList.add('date-picker')
this._element.classList.toggle('is-invalid', this._config.invalid)
this._element.classList.toggle('is-valid', this._config.valid)
this._dropdownToggleEl.append(this._createInputGroup())
this._dropdownMenuEl.prepend(this._createDateRangePickerBody())
}
if (this._config.todayButton) {
const todayButtonEl = document.createElement('button')
todayButtonEl.classList.add(...this._getButtonClasses(this._config.todayButtonClasses))
todayButtonEl.type = 'button'
todayButtonEl.innerHTML = this._config.todayButton
todayButtonEl.addEventListener('click', () => {
const date = new Date()
this._calendarDate = date
this._startDate = date
this._endDate = date
this._endInput.value = this._setInputValue(date)
this._endInput.dispatchEvent(new Event('change'))
this._startInput.value = this._setInputValue(date)
this._startInput.dispatchEvent(new Event('change'))
this._updateDateRangePickerCalendars()
})
_createDateRangePickerBody() {
const dateRangePickerBodyEl = document.createElement('div')
dateRangePickerBodyEl.classList.add('date-picker-body')
footerEl.append(todayButtonEl)
}
if (Object.keys(this._config.ranges).length) {
const dateRangePickerRangesEl = document.createElement('div')
dateRangePickerRangesEl.classList.add('date-picker-ranges')
if (this._config.cancelButton) {
const cancelButtonEl = document.createElement('button')
cancelButtonEl.classList.add(...this._getButtonClasses(this._config.cancelButtonClasses))
cancelButtonEl.type = 'button'
cancelButtonEl.innerHTML = this._config.cancelButton
cancelButtonEl.addEventListener('click', () => {
this.cancel()
})
for (const key of Object.keys(this._config.ranges)) {
const buttonEl = document.createElement('button')
buttonEl.classList.add(...this._getButtonClasses(this._config.rangesButtonsClasses))
buttonEl.role = 'button'
buttonEl.addEventListener('click', () => {
this._startDate = this._config.ranges[key][0]
this._endDate = this._config.ranges[key][1]
this._startInput.value = this._setInputValue(this._startDate)
this._endInput.value = this._setInputValue(this._endDate)
this._updateCalendars()
footerEl.append(cancelButtonEl)
}
EventHandler.trigger(this._element, EVENT_START_DATE_CHANGE, {
date: this._startDate,
formatedDate: this._formatDate(this._startDate)
})
if (this._config.confirmButton) {
const confirmButtonEl = document.createElement('button')
confirmButtonEl.classList.add(...this._getButtonClasses(this._config.confirmButtonClasses))
confirmButtonEl.type = 'button'
confirmButtonEl.innerHTML = this._config.confirmButton
confirmButtonEl.addEventListener('click', () => {
this.hide()
})
EventHandler.trigger(this._element, EVENT_END_DATE_CHANGE, {
date: this._endDate,
formatedDate: this._formatDate(this._endDate)
})
})
footerEl.append(confirmButtonEl)
}
buttonEl.innerHTML = key
dateRangePickerRangesEl.append(buttonEl)
}
return footerEl
}
_updateDateRangePickerCalendars() {
this._calendars.innerHTML = ''
if (this._config.timepicker) {
this._timepickers.innerHTML = ''
dateRangePickerBodyEl.append(dateRangePickerRangesEl)
}
this._createDateRangePickerCalendars()
this._addCalendarEventListeners()
}
const calendarsEl = document.createElement('div')
calendarsEl.classList.add('date-picker-calendars')
_convertStringToDate(date) {
return date ? (date instanceof Date ? date : new Date(date)) : null
}
this._calendars = calendarsEl
_createInput(name, placeholder, value) {
const inputEl = document.createElement('input')
inputEl.classList.add(CLASS_NAME_INPUT)
inputEl.autocomplete = 'off'
inputEl.disabled = this._config.disabled
inputEl.placeholder = placeholder
inputEl.readOnly = this._config.inputReadOnly || typeof this._config.format === 'string'
inputEl.required = this._config.required
inputEl.type = 'text'
inputEl.value = value
dateRangePickerBodyEl.append(calendarsEl)
if (name) {
inputEl.name = name
}
if (this._config.timepicker) {
const timepickersEl = document.createElement('div')
timepickersEl.classList.add('date-picker-timepickers')
const events = ['change', 'keyup', 'paste']
for (const event of events) {
inputEl.addEventListener(event, ({ target }) => {
if (target.closest(SELECTOR_WAS_VALIDATED)) {
const inputs = SelectorEngine.find(SELECTOR_INPUT, this._element)
for (const input of inputs) {
if (Number.isNaN(Date.parse(input.value))) {
this._element.classList.add(CLASS_NAME_IS_INVALID)
this._element.classList.remove(CLASS_NAME_IS_VALID)
return
}
}
if (this._config.range && this._startDate instanceof Date && this._endDate instanceof Date) {
this._element.classList.add(CLASS_NAME_IS_VALID)
this._element.classList.remove(CLASS_NAME_IS_INVALID)
return
}
if (!this._config.range && this._startDate instanceof Date) {
this._element.classList.add(CLASS_NAME_IS_VALID)
this._element.classList.remove(CLASS_NAME_IS_INVALID)
return
}
this._element.classList.add(CLASS_NAME_IS_INVALID)
this._element.classList.remove(CLASS_NAME_IS_VALID)
}
})
this._timepickers = timepickersEl
dateRangePickerBodyEl.append(timepickersEl)
}
return inputEl
return dateRangePickerBodyEl
}
_createPopper() {
if (typeof Popper === 'undefined') {
throw new TypeError('CoreUI\'s date picker require Popper (https://popper.js.org)')
}
_createFooterContent() {
if (this._config.todayButton) {
const todayButtonEl = document.createElement('button')
todayButtonEl.classList.add(...this._getButtonClasses(this._config.todayButtonClasses))
todayButtonEl.type = 'button'
todayButtonEl.innerHTML = this._config.todayButton
todayButtonEl.addEventListener('click', () => {
const date = new Date()
this._calendarDate = date
this._startDate = date
this._endDate = date
this._endInput.value = this._setInputValue(date)
this._startInput.value = this._setInputValue(date)
this._updateCalendars()
})
const popperConfig = {
modifiers: [{
name: 'preventOverflow',
options: {
boundary: 'clippingParents'
}
},
{
name: 'offset',
options: {
offset: [0, 2]
}
}],
placement: isRTL() ? 'bottom-end' : 'bottom-start'
return todayButtonEl
}
this._popper = Popper.createPopper(this._togglerElement, this._menu, popperConfig)
}

@@ -850,10 +620,20 @@

_getButtonClasses(classes) {
if (typeof classes === 'string') {
return classes.split(' ')
_setInputValue(date) {
if (date) {
return this._formatDate(date)
}
return classes
return ''
}
_updateCalendars() {
this._calendars.innerHTML = ''
if (this._config.timepicker) {
this._timepickers.innerHTML = ''
}
this._createCalendars()
this._addCalendarEventListeners()
}
_getConfig(config) {

@@ -879,14 +659,2 @@ config = {

_isShown() {
return this._element.classList.contains(CLASS_NAME_SHOW)
}
_setInputValue(date) {
if (date) {
return this._formatDate(date)
}
return ''
}
// Static

@@ -921,39 +689,9 @@

}
static clearMenus(event) {
if (event.button === RIGHT_MOUSE_BUTTON || (event.type === 'keyup' && event.key !== TAB_KEY)) {
return
}
const openToggles = SelectorEngine.find(SELECTOR_DATA_TOGGLE_SHOWN)
for (const toggle of openToggles) {
const context = DateRangePicker.getInstance(toggle)
if (!context) {
continue
}
const composedPath = event.composedPath()
if (
composedPath.includes(context._element)
) {
continue
}
const relatedTarget = { relatedTarget: context._element }
if (event.type === 'click') {
relatedTarget.clickEvent = event
}
context.hide()
}
}
}
/**
* Data API implementation
*/
* ------------------------------------------------------------------------
* Data Api implementation
* ------------------------------------------------------------------------
*/

@@ -966,8 +704,9 @@ EventHandler.on(window, EVENT_LOAD_DATA_API, () => {

})
EventHandler.on(document, EVENT_CLICK_DATA_API, DateRangePicker.clearMenus)
EventHandler.on(document, EVENT_KEYUP_DATA_API, DateRangePicker.clearMenus)
/**
* jQuery
*/
* ------------------------------------------------------------------------
* jQuery
* ------------------------------------------------------------------------
* add .DateRangePicker to jQuery only if jQuery is present
*/

@@ -974,0 +713,0 @@ defineJQueryPlugin(DateRangePicker)

31

js/src/loading-button.js
/**
* --------------------------------------------------------------------------
* CoreUI PRO loading-button.js
* License (https://coreui.io/pro/license-new/)
* License (https://coreui.io/pro/license/)
* --------------------------------------------------------------------------

@@ -15,3 +15,5 @@ */

/**
* ------------------------------------------------------------------------
* Constants
* ------------------------------------------------------------------------
*/

@@ -22,7 +24,5 @@

const EVENT_KEY = `.${DATA_KEY}`
const DATA_API_KEY = '.data-api'
const EVENT_START = `start${EVENT_KEY}`
const EVENT_STOP = `stop${EVENT_KEY}`
const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`

@@ -32,4 +32,2 @@ const CLASS_NAME_IS_LOADING = 'is-loading'

const SELECTOR_DATA_TOGGLE = '[data-coreui-toggle="loading-button"]'
const Default = {

@@ -50,3 +48,5 @@ disabledOnLoading: false,

/**
* Class definition
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/

@@ -78,2 +78,6 @@

static get DATA_KEY() {
return DATA_KEY
}
static get NAME() {

@@ -184,15 +188,6 @@ return NAME

/**
* Data API implementation
*/
EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, event => {
event.preventDefault()
const button = event.target.closest(SELECTOR_DATA_TOGGLE)
const data = LoadingButton.getOrCreateInstance(button)
data.start()
})
/**
* ------------------------------------------------------------------------
* jQuery
* ------------------------------------------------------------------------
* add .LoadingButton to jQuery only if jQuery is present
*/

@@ -199,0 +194,0 @@

296

js/src/multi-select.js
/**
* --------------------------------------------------------------------------
* CoreUI PRO multi-select.js
* License (https://coreui.io/pro/license-new/)
* License (https://coreui.io/pro/license/)
* --------------------------------------------------------------------------
*/
import * as Popper from '@popperjs/core'
import BaseComponent from './base-component.js'

@@ -14,3 +13,3 @@ import Data from './dom/data.js'

import SelectorEngine from './dom/selector-engine.js'
import { defineJQueryPlugin, isRTL } from './util/index.js'
import { defineJQueryPlugin } from './util/index.js'

@@ -31,3 +30,3 @@ /**

const SELECTOR_CLEANER = '.form-multi-select-cleaner'
const SELECTOR_INPUT = '.form-multi-select-search'
const SELECTOR_OPTGROUP = '.form-multi-select-optgroup'

@@ -37,5 +36,5 @@ const SELECTOR_OPTION = '.form-multi-select-option'

const SELECTOR_OPTIONS_EMPTY = '.form-multi-select-options-empty'
const SELECTOR_SEARCH = '.form-multi-select-search'
const SELECTOR_SELECT = '.form-multi-select'
const SELECTOR_SELECTION = '.form-multi-select-selection'
const SELECTOR_SELECTION_CLEANER = '.form-multi-select-selection-cleaner'

@@ -50,3 +49,3 @@ const EVENT_CHANGED = `changed${EVENT_KEY}`

const EVENT_SHOW = `show${EVENT_KEY}`
const EVENT_SHOWN = `shown${EVENT_KEY}`
const EVENT_SHOWN = `showN${EVENT_KEY}`
const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`

@@ -56,8 +55,7 @@ const EVENT_KEYUP_DATA_API = `keyup${EVENT_KEY}${DATA_API_KEY}`

const CLASS_NAME_CLEANER = 'form-multi-select-cleaner'
const CLASS_NAME_DISABLED = 'disabled'
const CLASS_NAME_INPUT_GROUP = 'form-multi-select-input-group'
const CLASS_NAME_LABEL = 'label'
const CLASS_NAME_SELECT = 'form-multi-select'
const CLASS_NAME_SELECT_DROPDOWN = 'form-multi-select-dropdown'
const CLASS_NAME_SELECT_MULTIPLE = 'form-multi-select-multiple'
const CLASS_NAME_SELECT_WITH_CLEANER = 'form-multi-select-with-cleaner'
const CLASS_NAME_SELECT_ALL = 'form-multi-select-all'

@@ -73,2 +71,3 @@ const CLASS_NAME_OPTGROUP = 'form-multi-select-optgroup'

const CLASS_NAME_SELECTION = 'form-multi-select-selection'
const CLASS_NAME_SELECTION_CLEANER = 'form-multi-select-selection-cleaner'
const CLASS_NAME_SELECTION_TAGS = 'form-multi-select-selection-tags'

@@ -79,2 +78,4 @@ const CLASS_NAME_SHOW = 'show'

const CLASS_NAME_LABEL = 'label'
const Default = {

@@ -85,8 +86,6 @@ cleaner: true,

multiple: true,
name: null,
placeholder: 'Select...',
options: false,
optionsMaxHeight: 'auto',
optionsStyle: 'checkbox',
placeholder: 'Select...',
required: false,
search: false,

@@ -106,8 +105,6 @@ searchNoResultsLabel: 'No results found',

multiple: 'boolean',
name: 'string',
placeholder: 'string',
options: '(boolean|array)',
optionsMaxHeight: '(number|string)',
optionsStyle: 'string',
placeholder: 'string',
required: 'boolean',
search: 'boolean',

@@ -132,3 +129,2 @@ searchNoResultsLabel: 'string',

this._indicatorElement = null
this._selectAllElement = null

@@ -138,11 +134,7 @@ this._selectionElement = null

this._searchElement = null
this._togglerElement = null
this._optionsElement = null
this._clone = null
this._menu = null
this._options = this._getOptions()
this._popper = null
this._search = ''
this._selected = this._getSelectedOptions(this._options)
this._selection = this._getSelectedOptions(this._options)

@@ -168,2 +160,6 @@ if (this._config.options.length > 0) {

static get DATA_KEY() {
return DATA_KEY
}
static get NAME() {

@@ -174,21 +170,12 @@ return NAME

// Public
toggle() {
return this._isShown() ? this.hide() : this.show()
}
show() {
if (this._config.disabled || this._isShown()) {
return
}
EventHandler.trigger(this._element, EVENT_SHOW)
this._clone.classList.add(CLASS_NAME_SHOW)
this._clone.setAttribute('aria-expanded', true)
EventHandler.trigger(this._element, EVENT_SHOWN)
this._createPopper()
if (this._config.search) {
SelectorEngine.findOne(SELECTOR_SEARCH, this._clone).focus()
SelectorEngine.findOne(SELECTOR_INPUT, this._clone).focus()
}
EventHandler.trigger(this._element, EVENT_SHOWN)
}

@@ -198,20 +185,6 @@

EventHandler.trigger(this._element, EVENT_HIDE)
if (this._popper) {
this._popper.destroy()
}
this._clone.classList.remove(CLASS_NAME_SHOW)
this._clone.setAttribute('aria-expanded', 'false')
EventHandler.trigger(this._element, EVENT_HIDDEN)
}
dispose() {
if (this._popper) {
this._popper.destroy()
}
super.dispose()
}
search(text) {

@@ -226,3 +199,3 @@ this._search = text.length > 0 ? text.toLowerCase() : text

this._options = this._getOptions()
this._selected = this._getSelectedOptions(this._options)
this._selection = this._getSelectedOptions(this._options)
this._clone.remove()

@@ -266,3 +239,3 @@ this._element.innerHTML = ''

getValue() {
return this._selected
return this._selection
}

@@ -279,8 +252,2 @@

EventHandler.on(this._indicatorElement, EVENT_CLICK, event => {
event.preventDefault()
event.stopPropagation()
this.toggle()
})
EventHandler.on(this._searchElement, EVENT_KEYUP, () => {

@@ -296,4 +263,2 @@ this._onSearchChange(this._searchElement)

}
this._searchElement.focus()
})

@@ -326,5 +291,3 @@

this._onOptionsClick(event.target)
if (this._config.search) {
SelectorEngine.findOne(SELECTOR_SEARCH, this._clone).focus()
}
SelectorEngine.findOne(SELECTOR_INPUT, this._clone).focus()
}

@@ -337,3 +300,2 @@ })

...Default,
...this._element.disabled && { disabled: true },
...Manipulator.getDataAttributes(this._element),

@@ -359,3 +321,3 @@ ...(typeof config === 'object' ? config : {})

for (const node of nodes) {
if (node.nodeName === 'OPTION' && node.value) {
if (node.nodeName === 'OPTION') {
options.push({

@@ -383,9 +345,9 @@ value: node.value,

for (const option of options) {
if (typeof option.value === 'undefined') {
this._getSelectedOptions(option.options)
for (const e of options) {
if (typeof e.value === 'undefined') {
this._getSelectedOptions(e.options)
continue
}
if (option.selected) {
if (e.selected) {
// Add only the last option if single select

@@ -397,4 +359,4 @@ if (!this._config.multiple) {

selected.push({
value: String(option.value),
text: option.text
value: String(e.value),
text: e.text
})

@@ -414,6 +376,2 @@ }

if (this._config.required) {
this._element.setAttribute('required', true)
}
this._createNativeOptions(this._element, data)

@@ -453,7 +411,6 @@ }

_createSelect() {
const multiSelectEl = document.createElement('div')
multiSelectEl.classList.add(CLASS_NAME_SELECT)
multiSelectEl.classList.toggle('is-invalid', this._config.invalid)
multiSelectEl.classList.toggle('is-valid', this._config.valid)
multiSelectEl.setAttribute('aria-expanded', 'false')
const div = document.createElement('div')
div.classList.add(CLASS_NAME_SELECT)
div.classList.toggle('is-invalid', this._config.invalid)
div.classList.toggle('is-valid', this._config.valid)

@@ -465,9 +422,17 @@ if (this._config.disabled) {

for (const className of this._getClassNames()) {
multiSelectEl.classList.add(className)
div.classList.add(className)
}
this._clone = multiSelectEl
this._element.parentNode.insertBefore(multiSelectEl, this._element.nextSibling)
if (this._config.multiple) {
div.classList.add(CLASS_NAME_SELECT_MULTIPLE)
}
if (this._config.multiple && this._config.selectionType === 'tags') {
div.classList.add(CLASS_NAME_SELECTION_TAGS)
}
this._clone = div
this._element.parentNode.insertBefore(div, this._element.nextSibling)
this._createSelection()
this._createButtons()
this._createSelectionCleaner()

@@ -479,4 +444,4 @@ if (this._config.search) {

if (this._config.name || this._element.id || this._element.name) {
this._element.setAttribute('name', (this._config.name || this._element.name || `multi-select-${this._element.id}`))
if (this._element.id) {
this._element.setAttribute('name', `multi-select-${this._element.id}`)
}

@@ -490,68 +455,23 @@

_createSelection() {
const togglerEl = document.createElement('div')
togglerEl.classList.add(CLASS_NAME_INPUT_GROUP)
this._togglerElement = togglerEl
const span = document.createElement('span')
span.classList.add(CLASS_NAME_SELECTION)
this._clone.append(span)
const selectionEl = document.createElement('div')
selectionEl.classList.add(CLASS_NAME_SELECTION)
if (this._config.multiple && this._config.selectionType === 'tags') {
selectionEl.classList.add(CLASS_NAME_SELECTION_TAGS)
}
togglerEl.append(selectionEl)
this._clone.append(togglerEl)
this._updateSelection()
this._selectionElement = selectionEl
this._selectionElement = span
}
_createButtons() {
const buttons = document.createElement('div')
buttons.classList.add('form-multi-select-buttons')
_createSelectionCleaner() {
if (this._config.cleaner && this._config.multiple) {
const cleaner = document.createElement('button')
cleaner.type = 'button'
cleaner.classList.add(CLASS_NAME_CLEANER)
cleaner.classList.add(CLASS_NAME_SELECTION_CLEANER)
cleaner.style.display = 'none'
this._clone.append(cleaner)
this._clone.classList.add(CLASS_NAME_SELECT_WITH_CLEANER)
buttons.append(cleaner)
this._updateSelectionCleaner()
this._selectionCleanerElement = cleaner
}
const indicator = document.createElement('button')
indicator.type = 'button'
indicator.classList.add('form-multi-select-indicator')
buttons.append(indicator)
this._indicatorElement = indicator
this._togglerElement.append(buttons)
this._updateSelectionCleaner()
}
_createPopper() {
if (typeof Popper === 'undefined') {
throw new TypeError('CoreUI\'s multi select require Popper (https://popper.js.org)')
}
const popperConfig = {
modifiers: [{
name: 'preventOverflow',
options: {
boundary: 'clippingParents'
}
},
{
name: 'offset',
options: {
offset: [0, 2]
}
}],
placement: isRTL() ? 'bottom-end' : 'bottom-start'
}
this._popper = Popper.createPopper(this._togglerElement, this._menu, popperConfig)
}
_createSearchInput() {

@@ -568,3 +488,3 @@ const input = document.createElement('input')

this._selectionElement.append(input)
this._clone.append(input)
}

@@ -600,3 +520,2 @@

this._optionsElement = optionsDiv
this._menu = dropdownDiv
}

@@ -640,3 +559,3 @@

_createTag(value, text) {
const tag = document.createElement('div')
const tag = document.createElement('span')
tag.classList.add(CLASS_NAME_TAG)

@@ -647,4 +566,5 @@ tag.dataset.value = value

const closeBtn = document.createElement('button')
closeBtn.classList.add(CLASS_NAME_TAG_DELETE)
closeBtn.classList.add(CLASS_NAME_TAG_DELETE, 'text-medium-emphasis')
closeBtn.setAttribute('aria-label', 'Close')
closeBtn.innerHTML = '<span aria-hidden="true">&times;</span>'

@@ -694,5 +614,5 @@ tag.append(closeBtn)

if (this._selected.filter(option => option.value === String(value)).length === 0) {
this._selected.push({
value: String(value),
if (this._selection.filter(e => e.value === value).length === 0) {
this._selection.push({
value,
text

@@ -714,3 +634,3 @@ })

EventHandler.trigger(this._element, EVENT_CHANGED, {
value: this._selected
value: this._selection
})

@@ -725,4 +645,4 @@

_deselectOption(value) {
const selected = this._selected.filter(option => option.value !== String(value))
this._selected = selected
const selected = this._selection.filter(e => e.value !== value)
this._selection = selected

@@ -737,3 +657,3 @@ SelectorEngine.findOne(`option[value="${value}"]`, this._element).selected = false

EventHandler.trigger(this._element, EVENT_CHANGED, {
value: this._selected
value: this._selection
})

@@ -748,4 +668,4 @@

_deselectLastOption() {
if (this._selected.length > 0) {
const last = this._selected.pop()
if (this._selection.length > 0) {
const last = this._selection.pop()
this._deselectOption(last.value)

@@ -757,36 +677,25 @@ }

const selection = SelectorEngine.findOne(SELECTOR_SELECTION, this._clone)
const search = SelectorEngine.findOne(SELECTOR_SEARCH, this._clone)
if (this._selected.length === 0 && !this._config.search) {
selection.innerHTML = `<span class="form-multi-select-placeholder">${this._config.placeholder}</span>`
if (this._config.multiple && this._config.selectionType === 'counter') {
selection.innerHTML = `${this._selection.length} ${this._config.selectionTypeCounterText}`
return
}
if (this._config.multiple && this._config.selectionType === 'counter' && !this._config.search) {
selection.innerHTML = `${this._selected.length} ${this._config.selectionTypeCounterText}`
}
if (this._config.multiple && this._config.selectionType === 'tags') {
selection.innerHTML = ''
for (const e of this._selection) {
selection.append(this._createTag(e.value, e.text))
}
for (const option of this._selected) {
selection.append(this._createTag(option.value, option.text))
}
return
}
if (this._config.multiple && this._config.selectionType === 'text') {
selection.innerHTML = this._selected.map((option, index) => `<span>${option.text}${index === this._selected.length - 1 ? '' : ','}&nbsp;</span>`).join('')
selection.innerHTML = this._selection.map(e => e.text).join(', ')
return
}
if (!this._config.multiple && this._selected.length > 0 && !this._config.search) {
selection.innerHTML = this._selected[0].text
if (this._selection.length > 0) {
selection.innerHTML = this._selection[0].text
}
if (search) {
selection.append(search)
}
if (this._popper) {
this._popper.update()
}
}

@@ -799,5 +708,5 @@

const selectionCleaner = SelectorEngine.findOne(SELECTOR_CLEANER, this._clone)
const selectionCleaner = SelectorEngine.findOne(SELECTOR_SELECTION_CLEANER, this._clone)
if (this._selected.length > 0) {
if (this._selection.length > 0) {
selectionCleaner.style.removeProperty('display')

@@ -815,23 +724,17 @@ return

// Select single
if (!this._config.multiple && this._selected.length > 0) {
this._searchElement.placeholder = this._selected[0].text
if (this._selection.length > 0 && !this._config.multiple) {
this._searchElement.placeholder = this._selection[0].text
this._selectionElement.style.display = 'none'
return
}
if (!this._config.multiple && this._selected.length === 0) {
this._searchElement.placeholder = this._config.placeholder
return
}
// Select multiple
if (this._config.multiple && this._selected.length > 0 && this._config.selectionType !== 'counter') {
if (this._selection.length > 0 && this._config.multiple && this._config.selectionType !== 'counter') {
this._searchElement.removeAttribute('placeholder')
this._selectionElement.style.removeProperty('display')
return
}
if (this._config.multiple && this._selected.length === 0) {
if (this._selection.length === 0 && this._config.multiple) {
this._searchElement.placeholder = this._config.placeholder
this._selectionElement.style.display = 'none'
return

@@ -841,3 +744,4 @@ }

if (this._config.multiple && this._config.selectionType === 'counter') {
this._searchElement.placeholder = `${this._selected.length} item(s) selected`
this._searchElement.placeholder = `${this._selection.length} item(s) selected`
this._selectionElement.style.display = 'none'
}

@@ -851,3 +755,3 @@ }

if (this._selected.length > 0 && (this._config.selectionType === 'tags' || this._config.selectionType === 'text')) {
if (this._selection.length > 0 && (this._config.selectionType === 'tags' || this._config.selectionType === 'text')) {
this._searchElement.size = size

@@ -857,3 +761,3 @@ return

if (this._selected.length === 0 && (this._config.selectionType === 'tags' || this._config.selectionType === 'text')) {
if (this._selection.length === 0 && (this._config.selectionType === 'tags' || this._config.selectionType === 'text')) {
this._searchElement.removeAttribute('size')

@@ -889,6 +793,2 @@ }

_isShown() {
return this._clone.classList.contains(CLASS_NAME_SHOW)
}
_filterOptionsList() {

@@ -987,3 +887,3 @@ const options = SelectorEngine.find(SELECTOR_OPTION, this._clone)

context.hide()
context._clone.classList.remove(CLASS_NAME_SHOW)

@@ -996,5 +896,6 @@ EventHandler.trigger(context._element, EVENT_HIDDEN)

/**
* Data API implementation
* ------------------------------------------------------------------------
* Data Api implementation
* ------------------------------------------------------------------------
*/
EventHandler.on(window, EVENT_LOAD_DATA_API, () => {

@@ -1012,3 +913,6 @@ for (const ms of SelectorEngine.find(SELECTOR_SELECT)) {

/**
* ------------------------------------------------------------------------
* jQuery
* ------------------------------------------------------------------------
* add .MultiSelect to jQuery only if jQuery is present
*/

@@ -1015,0 +919,0 @@

16

js/src/tab.js

@@ -36,2 +36,4 @@ /**

const ARROW_DOWN_KEY = 'ArrowDown'
const HOME_KEY = 'Home'
const END_KEY = 'End'

@@ -158,3 +160,3 @@ const CLASS_NAME_ACTIVE = 'active'

_keydown(event) {
if (!([ARROW_LEFT_KEY, ARROW_RIGHT_KEY, ARROW_UP_KEY, ARROW_DOWN_KEY].includes(event.key))) {
if (!([ARROW_LEFT_KEY, ARROW_RIGHT_KEY, ARROW_UP_KEY, ARROW_DOWN_KEY, HOME_KEY, END_KEY].includes(event.key))) {
return

@@ -165,5 +167,13 @@ }

event.preventDefault()
const isNext = [ARROW_RIGHT_KEY, ARROW_DOWN_KEY].includes(event.key)
const nextActiveElement = getNextActiveElement(this._getChildren().filter(element => !isDisabled(element)), event.target, isNext, true)
const children = this._getChildren().filter(element => !isDisabled(element))
let nextActiveElement
if ([HOME_KEY, END_KEY].includes(event.key)) {
nextActiveElement = children[event.key === HOME_KEY ? 0 : children.length - 1]
} else {
const isNext = [ARROW_RIGHT_KEY, ARROW_DOWN_KEY].includes(event.key)
nextActiveElement = getNextActiveElement(children, event.target, isNext, true)
}
if (nextActiveElement) {

@@ -170,0 +180,0 @@ nextActiveElement.focus({ preventScroll: true })

553

js/src/time-picker.js
/* eslint-disable indent */
/**
* --------------------------------------------------------------------------
* CoreUI PRO time-picker.js
* License (https://coreui.io/pro/license-new/)
* License (https://coreui.io/pro/license/)
* --------------------------------------------------------------------------
*/
import * as Popper from '@popperjs/core'
import BaseComponent from './base-component.js'
import Picker from './picker.js'
import EventHandler from './dom/event-handler.js'
import Manipulator from './dom/manipulator.js'
import SelectorEngine from './dom/selector-engine.js'
import { defineJQueryPlugin, isRTL } from './util/index.js'
import { defineJQueryPlugin } from './util/index.js'
import {

@@ -27,4 +27,6 @@ convert12hTo24h,

/**
* Constants
*/
* ------------------------------------------------------------------------
* Constants
* ------------------------------------------------------------------------
*/

@@ -36,46 +38,9 @@ const NAME = 'time-picker'

const TAB_KEY = 'Tab'
const RIGHT_MOUSE_BUTTON = 2
const EVENT_CLICK = `click${EVENT_KEY}`
const EVENT_HIDE = `hide${EVENT_KEY}`
const EVENT_HIDDEN = `hidden${EVENT_KEY}`
const EVENT_INPUT = 'input'
const EVENT_SHOW = `show${EVENT_KEY}`
const EVENT_SHOWN = `shown${EVENT_KEY}`
const EVENT_SUBMIT = 'submit'
const EVENT_TIME_CHANGE = `timeChange${EVENT_KEY}`
const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
const EVENT_KEYUP_DATA_API = `keyup${EVENT_KEY}${DATA_API_KEY}`
const EVENT_LOAD_DATA_API = `load${EVENT_KEY}${DATA_API_KEY}`
const CLASS_NAME_BODY = 'time-picker-body'
const CLASS_NAME_CLEANER = 'time-picker-cleaner'
const CLASS_NAME_DISABLED = 'disabled'
const CLASS_NAME_DROPDOWN = 'time-picker-dropdown'
const CLASS_NAME_FOOTER = 'time-picker-footer'
const CLASS_NAME_INDICATOR = 'time-picker-indicator'
const CLASS_NAME_INLINE_ICON = 'time-picker-inline-icon'
const CLASS_NAME_INLINE_SELECT = 'time-picker-inline-select'
const CLASS_NAME_INPUT = 'time-picker-input'
const CLASS_NAME_INPUT_GROUP = 'time-picker-input-group'
const CLASS_NAME_IS_INVALID = 'is-invalid'
const CLASS_NAME_IS_VALID = 'is-valid'
const CLASS_NAME_ROLL = 'time-picker-roll'
const CLASS_NAME_ROLL_COL = 'time-picker-roll-col'
const CLASS_NAME_ROLL_CELL = 'time-picker-roll-cell'
const CLASS_NAME_SELECTED = 'selected'
const CLASS_NAME_SHOW = 'show'
const CLASS_NAME_TIME_PICKER = 'time-picker'
const CLASS_NAME_WAS_VALIDATED = 'was-validated'
const SELECTOR_DATA_TOGGLE = '[data-coreui-toggle="time-picker"]'
const SELECTOR_DATA_TOGGLE = '[data-coreui-toggle="time-picker"]:not(.disabled):not(:disabled)'
const SELECTOR_DATA_TOGGLE_SHOWN = `${SELECTOR_DATA_TOGGLE}.${CLASS_NAME_SHOW}`
const SELECTOR_WAS_VALIDATED = 'form.was-validated'
const Default = {
cancelButton: 'Cancel',
cancelButtonClasses: ['btn', 'btn-sm', 'btn-ghost-primary'],
confirmButton: 'OK',
confirmButtonClasses: ['btn', 'btn-sm', 'btn-primary'],
...Picker.Default,
cleaner: true,

@@ -86,8 +51,6 @@ container: 'dropdown',

indicator: true,
invalid: false,
inputReadOnly: false,
invalid: false,
locale: 'default',
name: null,
placeholder: 'Select time',
required: true,
size: null,

@@ -100,10 +63,4 @@ time: null,

const DefaultType = {
cancelButton: '(boolean|string)',
cancelButtonClasses: '(array|string)',
confirmButton: '(boolean|string)',
confirmButtonClasses: '(array|string)',
...Picker.DefaultType,
cleaner: 'boolean',
container: 'string',
disabled: 'boolean',
footer: 'boolean',
indicator: 'boolean',

@@ -113,5 +70,3 @@ inputReadOnly: 'boolean',

locale: 'string',
name: 'string',
placeholder: 'string',
required: 'boolean',
size: '(string|null)',

@@ -124,6 +79,8 @@ time: '(date|string|null)',

/**
* Class definition
*/
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
class TimePicker extends BaseComponent {
class TimePicker extends Picker {
constructor(element, config) {

@@ -136,4 +93,4 @@ super(element)

this._ampm = this._date ? getAmPm(new Date(this._date), this._config.locale) : 'am'
this._popper = null
// subcomponents
this._input = null

@@ -145,2 +102,3 @@ this._timePickerBody = null

this._addEventListeners()
this._setUpSelects()

@@ -150,2 +108,3 @@ }

// Getters
static get Default() {

@@ -164,45 +123,7 @@ return Default

// Public
toggle() {
return this._isShown() ? this.hide() : this.show()
}
show() {
if (this._config.disabled || this._isShown()) {
return
}
EventHandler.trigger(this._element, EVENT_SHOW)
this._element.classList.add(CLASS_NAME_SHOW)
this._element.setAttribute('aria-expanded', true)
EventHandler.trigger(this._element, EVENT_SHOWN)
this._createPopper()
}
hide() {
EventHandler.trigger(this._element, EVENT_HIDE)
if (this._popper) {
this._popper.destroy()
}
this._element.classList.remove(CLASS_NAME_SHOW)
this._element.setAttribute('aria-expanded', 'false')
EventHandler.trigger(this._element, EVENT_HIDDEN)
}
dispose() {
if (this._popper) {
this._popper.destroy()
}
super.dispose()
}
cancel() {
this._date = this._initialDate
this._input.value = this._initialDate ? this._convertStringToDate(this._initialDate).toLocaleTimeString(this._config.locale) : ''
this._input.dispatchEvent(new Event('change'))
this._timePickerBody.innerHTML = ''
this.hide()
this._createTimePickerSelection()

@@ -214,3 +135,2 @@ }

this._input.value = ''
this._input.dispatchEvent(new Event('change'))
this._timePickerBody.innerHTML = ''

@@ -223,3 +143,2 @@ this._createTimePickerSelection()

this._input.value = this._convertStringToDate(this._config.time).toLocaleTimeString(this._config.locale)
this._input.dispatchEvent(new Event('change'))
this._timePickerBody.innerHTML = ''

@@ -241,17 +160,64 @@ this._createTimePickerSelection()

// Private
_addEventListeners() {
EventHandler.on(this._togglerElement, EVENT_CLICK, () => {
if (!this._config.disabled) {
this.show()
this._initialDate = new Date(this._date)
_getPartOfTime(part) {
if (this._date === null) {
return null
}
if (this._config.variant === 'roll') {
this._setUpRolls(true)
if (part === 'hours') {
return isAmPm(this._config.locale) ? convert24hTo12h(this._date.getHours()) : this._date.getHours()
}
if (part === 'minutes') {
return this._date.getMinutes()
}
if (part === 'seconds') {
return this._date.getSeconds()
}
if (part === 'toggle') {
return getAmPm(new Date(this._date), this._config.locale)
}
}
_setUpRolls(initial = false) {
for (const part of Array.from(['hours', 'minutes', 'seconds', 'toggle'])) {
for (const element of SelectorEngine.find(`[data-coreui-${part}]`, this._element)) {
if (this._getPartOfTime(part) === Manipulator.getDataAttribute(element, part)) {
element.classList.add('selected')
this._scrollTo(element.parentElement, element, initial)
for (const sibling of element.parentElement.children) {
// eslint-disable-next-line max-depth
if (sibling !== element) {
sibling.classList.remove('selected')
}
}
}
}
}
}
if (this._config.variant === 'select') {
this._setUpSelects()
_setUpSelects() {
for (const part of Array.from(['hours', 'minutes', 'seconds', 'toggle'])) {
for (const element of SelectorEngine.find(`select.${part}`, this._element)) {
if (this._getPartOfTime(part)) {
element.value = this._getPartOfTime(part)
}
}
}
}
// Private
_addEventListeners() {
EventHandler.on(this._element, 'shown.coreui.dropdown', () => {
this._initialDate = new Date(this._date)
if (this._config.variant === 'roll') {
this._setUpRolls(true)
}
if (this._config.variant === 'select') {
this._setUpSelects()
}
})

@@ -269,2 +235,7 @@

EventHandler.on(this._element, 'click', '.picker-input-group-cleaner', event => {
event.stopPropagation()
this.clear()
})
EventHandler.on(this._element, 'onCancelClick.coreui.picker', () => {

@@ -274,3 +245,3 @@ this.cancel()

EventHandler.on(this._input, EVENT_INPUT, event => {
EventHandler.on(this._input, 'input', event => {
if (isValidTime(event.target.value)) {

@@ -280,4 +251,4 @@ this._date = this._convertStringToDate(event.target.value)

EventHandler.trigger(this._element, EVENT_TIME_CHANGE, {
timeString: this._date ? this._date.toTimeString() : null,
localeTimeString: this._date ? this._date.toLocaleTimeString() : null,
timeString: this._date.toTimeString(),
localeTimeString: this._date.toLocaleTimeString(),
date: this._date

@@ -287,118 +258,51 @@ })

})
}
if (this._config.container === 'dropdown') {
EventHandler.on(this._input.form, EVENT_SUBMIT, () => {
if (this._input.form.classList.contains(CLASS_NAME_WAS_VALIDATED)) {
if (Number.isNaN(Date.parse(`1970-01-01 ${this._input.value}`))) {
return this._element.classList.add(CLASS_NAME_IS_INVALID)
}
if (this._date instanceof Date) {
return this._element.classList.add(CLASS_NAME_IS_VALID)
}
this._element.classList.add(CLASS_NAME_IS_INVALID)
}
})
}
_convertStringToDate(date) {
return date ? (date instanceof Date ? date : new Date(`1970-01-01 ${date}`)) : null
}
_createTimePicker() {
this._element.classList.add(CLASS_NAME_TIME_PICKER)
_createInputGroup() {
const inputGroupEl = document.createElement('div')
inputGroupEl.classList.add('input-group', 'picker-input-group')
Manipulator.setDataAttribute(this._element, 'toggle', CLASS_NAME_TIME_PICKER)
if (this._config.size) {
this._element.classList.add(`time-picker-${this._config.size}`)
inputGroupEl.classList.add(`input-group-${this._config.size}`)
}
this._element.classList.toggle(CLASS_NAME_IS_VALID, this._config.valid)
if (this._config.disabled) {
this._element.classList.add(CLASS_NAME_DISABLED)
}
this._element.classList.toggle(CLASS_NAME_IS_INVALID, this._config.invalid)
if (this._config.container === 'dropdown') {
this._element.append(this._createTimePickerInputGroup())
const dropdownEl = document.createElement('div')
dropdownEl.classList.add(CLASS_NAME_DROPDOWN)
dropdownEl.append(this._createTimePickerBody())
if (this._config.footer || this._config.timepicker) {
dropdownEl.append(this._createTimePickerFooter())
}
this._element.append(dropdownEl)
this._menu = dropdownEl
}
if (this._config.container === 'inline') {
this._element.append(this._createTimePickerBody())
}
}
_createTimePickerInputGroup() {
const inputGroupEl = document.createElement('div')
inputGroupEl.classList.add(CLASS_NAME_INPUT_GROUP)
const inputEl = document.createElement('input')
inputEl.classList.add(CLASS_NAME_INPUT)
inputEl.autocomplete = 'off'
inputEl.classList.add('form-control')
inputEl.disabled = this._config.disabled
inputEl.placeholder = this._config.placeholder
inputEl.readOnly = this._config.inputReadOnly
inputEl.required = this._config.required
inputEl.type = 'text'
inputEl.value = this._date ? this._date.toLocaleTimeString(this._config.locale) : ''
if (this._config.name || this._element.id) {
inputEl.name = this._config.name || `time-picker-${this._element.id}`
if (this._element.id) {
inputEl.name = `time-picker-${this._element.id}`
}
const events = ['change', 'keyup', 'paste']
for (const event of events) {
inputEl.addEventListener(event, ({ target }) => {
if (target.closest(SELECTOR_WAS_VALIDATED)) {
if (Number.isNaN(Date.parse(`1970-01-01 ${target.value}`))) {
this._element.classList.add(CLASS_NAME_IS_INVALID)
this._element.classList.remove(CLASS_NAME_IS_VALID)
return
}
if (this._date instanceof Date) {
this._element.classList.add(CLASS_NAME_IS_VALID)
this._element.classList.remove(CLASS_NAME_IS_INVALID)
return
}
this._element.classList.add(CLASS_NAME_IS_INVALID)
this._element.classList.remove(CLASS_NAME_IS_VALID)
}
})
}
inputGroupEl.append(inputEl)
const inputGroupTextEl = document.createElement('span')
inputGroupTextEl.classList.add('input-group-text')
if (this._config.indicator) {
const inputGroupIndicatorEl = document.createElement('div')
inputGroupIndicatorEl.classList.add(CLASS_NAME_INDICATOR)
inputGroupEl.append(inputGroupIndicatorEl)
inputGroupTextEl.innerHTML = `
<span class="picker-input-group-indicator">
<span class="picker-input-group-icon time-picker-input-icon"></span>
</span>`
}
if (this._config.cleaner) {
const inputGroupCleanerEl = document.createElement('div')
inputGroupCleanerEl.classList.add(CLASS_NAME_CLEANER)
inputGroupCleanerEl.addEventListener('click', event => {
event.stopPropagation()
this.clear()
})
inputGroupTextEl.innerHTML += `
<span class="picker-input-group-cleaner" role="button">
<span class="picker-input-group-icon time-picker-cleaner-icon"></span>
</span>`
}
inputGroupEl.append(inputGroupCleanerEl)
if (this._config.indicator || this._config.cleaner) {
inputGroupEl.append(inputGroupTextEl)
}
this._input = inputEl
this._togglerElement = inputGroupEl

@@ -408,9 +312,14 @@ return inputGroupEl

_createTimePickerSelection() {
if (this._config.variant === 'roll') {
this._createTimePickerRoll()
_createTimePicker() {
this._element.classList.add('time-picker')
this._element.classList.toggle('is-invalid', this._config.invalid)
this._element.classList.toggle('is-valid', this._config.valid)
if (this._config.container === 'dropdown') {
this._dropdownToggleEl.append(this._createInputGroup())
this._dropdownMenuEl.prepend(this._createTimePickerBody())
}
if (this._config.variant === 'select') {
this._createTimePickerInlineSelects()
if (this._config.container === 'inline') {
this._element.append(this._createTimePickerBody())
}

@@ -421,6 +330,6 @@ }

const timePickerBodyEl = document.createElement('div')
timePickerBodyEl.classList.add(CLASS_NAME_BODY)
timePickerBodyEl.classList.add('time-picker-body')
if (this._config.variant === 'roll') {
timePickerBodyEl.classList.add(CLASS_NAME_ROLL)
timePickerBodyEl.classList.add('time-picker-roll')
}

@@ -433,5 +342,23 @@

_createTimePickerInlineSelect(className, options) {
_createTimePickerSelection() {
const selectedHour = this._date ?
(isAmPm(this._config.locale) ?
convert24hTo12h(this._date.getHours()) :
this._date.getHours()) :
null
const selectedMinute = this._date ? this._date.getMinutes() : null
const selectedSecond = this._date ? this._date.getSeconds() : null
if (this._config.variant === 'roll') {
this._createTimePickerRoll(selectedHour, selectedMinute, selectedSecond)
}
if (this._config.variant === 'select') {
this._createTimePickerSelect(selectedHour, selectedMinute, selectedSecond)
}
}
_createSelect(className, options) {
const selectEl = document.createElement('select')
selectEl.classList.add(CLASS_NAME_INLINE_SELECT, className)
selectEl.classList.add('form-select', 'form-select-sm', className)
selectEl.disabled = this._config.disabled

@@ -451,13 +378,14 @@ selectEl.addEventListener('change', event => this._handleTimeChange(className, event.target.value))

_createTimePickerInlineSelects() {
_createTimePickerSelect() {
const timeSeparatorEl = document.createElement('div')
timeSeparatorEl.classList.add('time-separator')
timeSeparatorEl.innerHTML = ':'
this._timePickerBody.innerHTML = `<span class="${CLASS_NAME_INLINE_ICON}"></span>`
this._timePickerBody.innerHTML = '<span class="time-picker-inline-icon"></span>'
this._timePickerBody.append(
this._createTimePickerInlineSelect('hours', getListOfHours(this._config.locale)),
this._createSelect('hours', getListOfHours(this._config.locale)),
timeSeparatorEl.cloneNode(true),
this._createTimePickerInlineSelect('minutes', getListOfMinutes(this._config.locale, true)),
this._createSelect('minutes', getListOfMinutes(this._config.locale, true)),
timeSeparatorEl,
this._createTimePickerInlineSelect('seconds', getListOfSeconds(this._config.locale, true))
this._createSelect('seconds', getListOfSeconds(this._config.locale, true))
)

@@ -467,3 +395,3 @@

this._timePickerBody.append(
this._createTimePickerInlineSelect('toggle', [{ value: 'am', label: 'AM' }, { value: 'pm', label: 'PM' }], '_selectAmPm', this._ampm)
this._createSelect('toggle', [{ value: 'am', label: 'AM' }, { value: 'pm', label: 'PM' }], '_selectAmPm', this._ampm)
)

@@ -489,7 +417,7 @@ }

const timePickerRollColEl = document.createElement('div')
timePickerRollColEl.classList.add(CLASS_NAME_ROLL_COL)
timePickerRollColEl.classList.add('time-picker-roll-col')
for (const option of options) {
const timePickerRollCellEl = document.createElement('div')
timePickerRollCellEl.classList.add(CLASS_NAME_ROLL_CELL)
timePickerRollCellEl.classList.add('time-picker-roll-cell')
timePickerRollCellEl.setAttribute('role', 'button')

@@ -509,102 +437,2 @@ timePickerRollCellEl.innerHTML = option.label

_createTimePickerFooter() {
const footerEl = document.createElement('div')
footerEl.classList.add(CLASS_NAME_FOOTER)
if (this._config.cancelButton) {
const cancelButtonEl = document.createElement('button')
cancelButtonEl.classList.add(...this._getButtonClasses(this._config.cancelButtonClasses))
cancelButtonEl.type = 'button'
cancelButtonEl.innerHTML = this._config.cancelButton
cancelButtonEl.addEventListener('click', () => {
this.cancel()
})
footerEl.append(cancelButtonEl)
}
if (this._config.confirmButton) {
const confirmButtonEl = document.createElement('button')
confirmButtonEl.classList.add(...this._getButtonClasses(this._config.confirmButtonClasses))
confirmButtonEl.type = 'button'
confirmButtonEl.innerHTML = this._config.confirmButton
confirmButtonEl.addEventListener('click', () => {
this.hide()
})
footerEl.append(confirmButtonEl)
}
return footerEl
}
_setUpRolls(initial = false) {
for (const part of Array.from(['hours', 'minutes', 'seconds', 'toggle'])) {
for (const element of SelectorEngine.find(`[data-coreui-${part}]`, this._element)) {
if (this._getPartOfTime(part) === Manipulator.getDataAttribute(element, part)) {
element.classList.add(CLASS_NAME_SELECTED)
this._scrollTo(element.parentElement, element, initial)
for (const sibling of element.parentElement.children) {
// eslint-disable-next-line max-depth
if (sibling !== element) {
sibling.classList.remove(CLASS_NAME_SELECTED)
}
}
}
}
}
}
_setUpSelects() {
for (const part of Array.from(['hours', 'minutes', 'seconds', 'toggle'])) {
for (const element of SelectorEngine.find(`select.${part}`, this._element)) {
if (this._getPartOfTime(part)) {
element.value = this._getPartOfTime(part)
}
}
}
}
_updateTimePicker() {
this._element.innerHTML = ''
this._createTimePicker()
}
_convertStringToDate(date) {
return date ? (date instanceof Date ? date : new Date(`1970-01-01 ${date}`)) : null
}
_createPopper() {
if (typeof Popper === 'undefined') {
throw new TypeError('CoreUI\'s time picker require Popper (https://popper.js.org)')
}
const popperConfig = {
modifiers: [{
name: 'preventOverflow',
options: {
boundary: 'clippingParents'
}
},
{
name: 'offset',
options: {
offset: [0, 2]
}
}],
placement: isRTL() ? 'bottom-end' : 'bottom-start'
}
this._popper = Popper.createPopper(this._togglerElement, this._menu, popperConfig)
}
_getButtonClasses(classes) {
if (typeof classes === 'string') {
return classes.split(' ')
}
return classes
}
_getConfig(config) {

@@ -620,24 +448,2 @@ config = {

_getPartOfTime(part) {
if (this._date === null) {
return null
}
if (part === 'hours') {
return isAmPm(this._config.locale) ? convert24hTo12h(this._date.getHours()) : this._date.getHours()
}
if (part === 'minutes') {
return this._date.getMinutes()
}
if (part === 'seconds') {
return this._date.getSeconds()
}
if (part === 'toggle') {
return getAmPm(new Date(this._date), this._config.locale)
}
}
_handleTimeChange = (set, value) => {

@@ -674,9 +480,8 @@ const _date = this._date || new Date('1970-01-01')

this._date = new Date(_date)
if (this._input) {
this._input.value = _date.toLocaleTimeString(this._config.locale)
this._input.dispatchEvent(new Event('change'))
}
this._date = new Date(_date)
EventHandler.trigger(this._element, EVENT_TIME_CHANGE, {

@@ -689,6 +494,2 @@ timeString: _date.toTimeString(),

_isShown() {
return this._element.classList.contains(CLASS_NAME_SHOW)
}
_scrollTo(parent, children, initial = false) {

@@ -698,2 +499,7 @@ parent.scrollTo({ top: children.offsetTop, behavior: initial ? 'instant' : 'smooth' })

_updateTimePicker() {
this._element.innerHTML = ''
this._createTimePicker()
}
// Static

@@ -728,39 +534,9 @@

}
static clearMenus(event) {
if (event.button === RIGHT_MOUSE_BUTTON || (event.type === 'keyup' && event.key !== TAB_KEY)) {
return
}
const openToggles = SelectorEngine.find(SELECTOR_DATA_TOGGLE_SHOWN)
for (const toggle of openToggles) {
const context = TimePicker.getInstance(toggle)
if (!context) {
continue
}
const composedPath = event.composedPath()
if (
composedPath.includes(context._element)
) {
continue
}
const relatedTarget = { relatedTarget: context._element }
if (event.type === 'click') {
relatedTarget.clickEvent = event
}
context.hide()
}
}
}
/**
* Data API implementation
*/
* ------------------------------------------------------------------------
* Data Api implementation
* ------------------------------------------------------------------------
*/

@@ -773,8 +549,9 @@ EventHandler.on(window, EVENT_LOAD_DATA_API, () => {

})
EventHandler.on(document, EVENT_CLICK_DATA_API, TimePicker.clearMenus)
EventHandler.on(document, EVENT_KEYUP_DATA_API, TimePicker.clearMenus)
/**
* jQuery
*/
* ------------------------------------------------------------------------
* jQuery
* ------------------------------------------------------------------------
* add .TimePicker to jQuery only if jQuery is present
*/

@@ -781,0 +558,0 @@ defineJQueryPlugin(TimePicker)

30

js/src/util/time.js

@@ -31,6 +31,6 @@ export const convert12hTo24h = (abbr, hour) => {

export const getListOfHours = (locale, ampm = 'auto') => Array.from({ length: (ampm === 'auto' && isAmPm(locale)) || ampm === true ? 12 : 24 }, (_, i) => {
export const getListOfHours = locale => Array.from({ length: isAmPm(locale) ? 12 : 24 }, (_, i) => {
return {
value: (ampm === 'auto' && isAmPm(locale)) || ampm === true ? i + 1 : i,
label: ((ampm === 'auto' && isAmPm(locale)) || ampm === true ? i + 1 : i).toLocaleString(locale)
value: isAmPm(locale) ? i + 1 : i,
label: (isAmPm(locale) ? i + 1 : i).toLocaleString(locale)
}

@@ -45,7 +45,9 @@ })

label: d
.toLocaleTimeString(locale, {
minute: '2-digit',
second: '2-digit'
})
.split(/[^\dA-Za-z\u06F0-\u06F9]/)[0]
.toLocaleTimeString(locale, {
hour: '2-digit',
hour12: false,
minute: '2-digit',
second: '2-digit'
})
.split(':')[1]
}

@@ -60,7 +62,9 @@ })

label: d
.toLocaleTimeString(locale, {
minute: '2-digit',
second: '2-digit'
})
.split(/[^\dA-Za-z\u06F0-\u06F9]/)[1]
.toLocaleTimeString(locale, {
hour: '2-digit',
hour12: false,
minute: '2-digit',
second: '2-digit'
})
.split(':')[2]
}

@@ -67,0 +71,0 @@ })

69

package.json
{
"name": "@coreui/coreui-pro",
"description": "The most popular front-end framework for developing responsive, mobile-first projects on the web rewritten by the CoreUI Team",
"version": "4.6.0-beta.0",
"version": "4.6.0",
"config": {

@@ -25,3 +25,3 @@ "version_short": "4.6"

"css-lint": "npm-run-all --aggregate-output --continue-on-error --parallel css-lint-*",
"css-lint-stylelint": "stylelint \"**/*.{css,scss}\" --cache --cache-location .cache/.stylelintcache",
"css-lint-stylelint": "stylelint \"**/*.{css,scss}\" --cache --cache-location .cache/.stylelintcache --rd",
"css-lint-vars": "fusv scss/ docs/assets/scss/",

@@ -34,3 +34,2 @@ "css-minify": "npm-run-all --aggregate-output --parallel css-minify-*",

"css-prefix-main": "postcss --config build/postcss.config.js --replace \"dist/css/*.css\" \"!dist/css/*.rtl*.css\" \"!dist/css/*.min.css\"",
"css-test": "jasmine --config=scss/tests/jasmine.js",
"js": "npm-run-all js-compile js-minify",

@@ -42,3 +41,3 @@ "js-compile": "npm-run-all --aggregate-output --parallel js-compile-*",

"js-compile-plugins": "node build/build-plugins.js",
"js-lint": "eslint --cache --cache-location .cache/.eslintcache --report-unused-disable-directives --ext .html,.js,.md .",
"js-lint": "eslint --cache --cache-location .cache/.eslintcache --report-unused-disable-directives --ext .html,.js .",
"js-minify": "npm-run-all --aggregate-output --parallel js-minify-*",

@@ -57,10 +56,10 @@ "js-minify-standalone": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/coreui.js.map,includeSources,url=coreui.min.js.map\" --output dist/js/coreui.min.js dist/js/coreui.js",

"docs": "npm-run-all docs-build docs-lint",
"docs-build": "hugo --cleanDestinationDir --printUnusedTemplates",
"docs-build": "hugo --cleanDestinationDir --enableGitInfo --environment production",
"docs-compile": "npm run docs-build",
"docs-vnu": "node build/vnu-jar.js",
"docs-lint": "npm run docs-vnu",
"docs-serve": "hugo server --port 9001 --disableFastRender --printUnusedTemplates",
"docs-serve": "hugo server --port 9001 --disableFastRender",
"docs-serve-only": "npx sirv-cli _gh_pages --port 9001",
"lockfile-lint": "lockfile-lint --allowed-hosts npm --allowed-schemes https: --empty-hostname false --type npm --path package-lock.json",
"update-deps": "ncu -u -x globby,jasmine,karma-browserstack-launcher,karma-rollup-preprocessor,terser && echo Manually update docs/assets/js/vendor",
"update-deps": "ncu -u -x globby,karma-browserstack-launcher,karma-rollup-preprocessor && echo Manually update site/assets/js/vendor",
"release": "npm-run-all dist release-sri docs-build release-zip*",

@@ -75,3 +74,2 @@ "release-sri": "node build/generate-sri.js",

"watch-css-docs": "nodemon --watch docs/assets/scss/ --ext scss --exec \"npm run css-lint\"",
"watch-css-test": "nodemon --watch scss/ --ext scss,js --exec \"npm run css-test\"",
"watch-js-main": "nodemon --watch js/src/ --ext js --exec \"npm-run-all js-lint js-compile\"",

@@ -93,12 +91,11 @@ "watch-js-docs": "nodemon --watch docs/assets/js/ --ext js --exec \"npm run js-lint\""

"peerDependencies": {
"@popperjs/core": "^2.11.7",
"date-fns": "^2.30.0"
"@popperjs/core": "^2.11.6"
},
"devDependencies": {
"@babel/cli": "^7.21.5",
"@babel/core": "^7.22.1",
"@babel/preset-env": "^7.22.4",
"@babel/cli": "^7.22.9",
"@babel/core": "^7.22.9",
"@babel/preset-env": "^7.22.9",
"@popperjs/core": "^2.11.8",
"@rollup/plugin-babel": "^6.0.3",
"@rollup/plugin-commonjs": "^25.0.0",
"@rollup/plugin-commonjs": "^25.0.3",
"@rollup/plugin-node-resolve": "^15.1.0",

@@ -111,14 +108,13 @@ "@rollup/plugin-replace": "^5.0.2",

"date-fns": "^2.30.0",
"eslint": "^8.41.0",
"eslint": "^8.46.0",
"eslint-config-xo": "^0.43.1",
"eslint-plugin-html": "^7.1.0",
"eslint-plugin-import": "^2.27.5",
"eslint-plugin-markdown": "^3.0.0",
"eslint-plugin-unicorn": "^47.0.0",
"eslint-plugin-import": "^2.28.0",
"eslint-plugin-markdown": "^3.0.1",
"eslint-plugin-unicorn": "^48.0.1",
"find-unused-sass-variables": "^5.0.0",
"globby": "^11.1.0",
"hammer-simulator": "0.0.1",
"hugo-bin": "^0.104.0",
"hugo-bin": "^0.112.1",
"ip": "^2.0.0",
"jasmine": "^4.6.0",
"jquery": "^3.7.0",

@@ -132,19 +128,17 @@ "karma": "^6.4.2",

"karma-jasmine": "^5.1.0",
"karma-jasmine-html-reporter": "^2.0.0",
"karma-jasmine-html-reporter": "^2.1.0",
"karma-rollup-preprocessor": "7.0.8",
"lockfile-lint": "^4.10.5",
"nodemon": "^2.0.22",
"lockfile-lint": "^4.11.0",
"nodemon": "^3.0.1",
"npm-run-all": "^4.1.5",
"postcss": "^8.4.24",
"postcss": "^8.4.27",
"postcss-cli": "^10.1.0",
"postcss-combine-duplicated-selectors": "^10.0.3",
"rollup": "^3.23.0",
"rollup": "^3.27.0",
"rollup-plugin-istanbul": "^4.0.0",
"rtlcss": "^4.1.0",
"sass": "^1.62.1",
"sass-true": "^7.0.0",
"sass": "^1.64.2",
"shelljs": "^0.8.5",
"stylelint": "^15.6.2",
"stylelint-config-twbs-bootstrap": "^10.0.0",
"terser": "5.17.6",
"stylelint": "^15.10.2",
"stylelint-config-twbs-bootstrap": "^11.0.1",
"terser": "5.19.2",
"vnu-jar": "23.4.11"

@@ -155,5 +149,3 @@ },

"js/{src,dist}/**/*.{js,map}",
"js/index.{esm,umd}.js",
"scss/**/*.scss",
"!scss/tests/**"
"scss/**/*.scss"
],

@@ -172,4 +164,3 @@ "hugo-bin": {

"deps": [
"@popperjs/core",
"date-fns"
"@popperjs/core"
]

@@ -180,6 +171,8 @@ }

"peerDependencies": {
"@popperjs/core": "^2.11.7",
"date-fns": "^2.30.0"
"@popperjs/core": "^2.11.6"
}
},
"dependencies": {
"postcss-combine-duplicated-selectors": "^10.0.3"
}
}

6

README.md

@@ -46,7 +46,7 @@ <p align="center">

- [Download the latest release](https://github.com/coreui/coreui-pro/archive/v4.6.0-beta.0.zip)
- [Download the latest release](https://github.com/coreui/coreui-pro/archive/v4.6.0.zip)
- Clone the repo: `git clone https://github.com/coreui/coreui.git`
- Install with [npm](https://www.npmjs.com/): `npm install @coreui/coreui`
- Install with [yarn](https://yarnpkg.com/): `yarn add @coreui/coreui`
- Install with [Composer](https://getcomposer.org/): `composer require coreui/coreui:4.6.0-beta.0`
- Install with [Composer](https://getcomposer.org/): `composer require coreui/coreui:4.6.0`

@@ -234,3 +234,3 @@ Read the [Getting started page](https://coreui.io/docs/getting-started/introduction/) for information on the framework contents, templates and examples, and more.

Copyright 2023 creativeLabs Łukasz Holeczek.
Copyright 2022 creativeLabs Łukasz Holeczek.
This is commercial software. To use it, you have to own a commercial license. Docs released under [Creative Commons](https://creativecommons.org/licenses/by/3.0/).
js/dist/multi-select-new.js
js/dist/multi-select-new.js.map
js/dist/multi-select-old.js
js/dist/multi-select-old.js.map
js/index.esm.js
js/index.umd.js
scss/_variables-dark.scss
scss/mixins/_color-mode.scss
dist/css/coreui-grid.css

Sorry, the diff of this file is not supported yet

dist/css/coreui-grid.css.map

Sorry, the diff of this file is not supported yet

dist/css/coreui-grid.min.css

Sorry, the diff of this file is not supported yet

dist/css/coreui-grid.min.css.map

Sorry, the diff of this file is not supported yet

dist/css/coreui-grid.rtl.css

Sorry, the diff of this file is not supported yet

dist/css/coreui-grid.rtl.css.map

Sorry, the diff of this file is not supported yet

dist/css/coreui-grid.rtl.min.css

Sorry, the diff of this file is not supported yet

dist/css/coreui-grid.rtl.min.css.map

Sorry, the diff of this file is not supported yet

dist/css/coreui-reboot.css

Sorry, the diff of this file is not supported yet

dist/css/coreui-reboot.css.map

Sorry, the diff of this file is not supported yet

dist/css/coreui-reboot.min.css

Sorry, the diff of this file is not supported yet

dist/css/coreui-reboot.min.css.map

Sorry, the diff of this file is not supported yet

dist/css/coreui-reboot.rtl.css

Sorry, the diff of this file is not supported yet

dist/css/coreui-reboot.rtl.css.map

Sorry, the diff of this file is not supported yet

dist/css/coreui-reboot.rtl.min.css

Sorry, the diff of this file is not supported yet

dist/css/coreui-reboot.rtl.min.css.map

Sorry, the diff of this file is not supported yet

dist/css/coreui-utilities.css

Sorry, the diff of this file is not supported yet

dist/css/coreui-utilities.css.map

Sorry, the diff of this file is not supported yet

dist/css/coreui-utilities.min.css

Sorry, the diff of this file is not supported yet

dist/css/coreui-utilities.min.css.map

Sorry, the diff of this file is not supported yet

dist/css/coreui-utilities.rtl.css

Sorry, the diff of this file is not supported yet

dist/css/coreui-utilities.rtl.css.map

Sorry, the diff of this file is not supported yet

dist/css/coreui-utilities.rtl.min.css

Sorry, the diff of this file is not supported yet

dist/css/coreui-utilities.rtl.min.css.map

Sorry, the diff of this file is not supported yet

dist/css/coreui.css

Sorry, the diff of this file is not supported yet

dist/css/coreui.css.map

Sorry, the diff of this file is not supported yet

dist/css/coreui.min.css

Sorry, the diff of this file is not supported yet

dist/css/coreui.min.css.map

Sorry, the diff of this file is not supported yet

dist/css/coreui.rtl.css

Sorry, the diff of this file is not supported yet

dist/css/coreui.rtl.css.map

Sorry, the diff of this file is not supported yet

dist/css/coreui.rtl.min.css

Sorry, the diff of this file is not supported yet

dist/css/coreui.rtl.min.css.map

Sorry, the diff of this file is not supported yet

dist/js/coreui.bundle.js

Sorry, the diff of this file is too big to display

dist/js/coreui.bundle.js.map

Sorry, the diff of this file is not supported yet

dist/js/coreui.bundle.min.js

Sorry, the diff of this file is too big to display

dist/js/coreui.bundle.min.js.map

Sorry, the diff of this file is not supported yet

dist/js/coreui.esm.js

Sorry, the diff of this file is too big to display

dist/js/coreui.esm.js.map

Sorry, the diff of this file is not supported yet

dist/js/coreui.esm.min.js

Sorry, the diff of this file is too big to display

dist/js/coreui.esm.min.js.map

Sorry, the diff of this file is not supported yet

dist/js/coreui.js

Sorry, the diff of this file is too big to display

dist/js/coreui.js.map

Sorry, the diff of this file is not supported yet

dist/js/coreui.min.js

Sorry, the diff of this file is too big to display

dist/js/coreui.min.js.map

Sorry, the diff of this file is not supported yet

js/dist/base-component.js.map

Sorry, the diff of this file is not supported yet

js/dist/calendar.js.map

Sorry, the diff of this file is not supported yet

js/dist/date-picker.js.map

Sorry, the diff of this file is not supported yet

js/dist/date-range-picker.js.map

Sorry, the diff of this file is not supported yet

js/dist/loading-button.js.map

Sorry, the diff of this file is not supported yet

js/dist/multi-select.js.map

Sorry, the diff of this file is not supported yet

js/dist/picker.js.map

Sorry, the diff of this file is not supported yet

js/dist/tab.js.map

Sorry, the diff of this file is not supported yet

js/dist/time-picker.js.map

Sorry, the diff of this file is not supported yet

js/dist/util/time.js.map

Sorry, the diff of this file is not supported yet

scss/_accordion.scss

Sorry, the diff of this file is not supported yet

scss/_alert.scss

Sorry, the diff of this file is not supported yet

scss/_button-group.scss

Sorry, the diff of this file is not supported yet

scss/_buttons.scss

Sorry, the diff of this file is not supported yet

scss/_calendar.scss

Sorry, the diff of this file is not supported yet

scss/_card.scss

Sorry, the diff of this file is not supported yet

scss/_carousel.scss

Sorry, the diff of this file is not supported yet

scss/_close.scss

Sorry, the diff of this file is not supported yet

scss/_date-picker.scss

Sorry, the diff of this file is not supported yet

scss/_dropdown.scss

Sorry, the diff of this file is not supported yet

scss/_functions.scss

Sorry, the diff of this file is not supported yet

scss/_list-group.scss

Sorry, the diff of this file is not supported yet

scss/_maps.scss

Sorry, the diff of this file is not supported yet

scss/_mixins.scss

Sorry, the diff of this file is not supported yet

scss/_nav.scss

Sorry, the diff of this file is not supported yet

scss/_navbar.scss

Sorry, the diff of this file is not supported yet

scss/_reboot.scss

Sorry, the diff of this file is not supported yet

scss/_root.scss

Sorry, the diff of this file is not supported yet

scss/_time-picker.scss

Sorry, the diff of this file is not supported yet

scss/_tooltip.scss

Sorry, the diff of this file is not supported yet

scss/_type.scss

Sorry, the diff of this file is not supported yet

scss/_utilities.scss

Sorry, the diff of this file is not supported yet

scss/_variables.scss

Sorry, the diff of this file is not supported yet

scss/coreui-grid.rtl.scss

Sorry, the diff of this file is not supported yet

scss/coreui-grid.scss

Sorry, the diff of this file is not supported yet

scss/coreui-reboot.rtl.scss

Sorry, the diff of this file is not supported yet

scss/coreui-reboot.scss

Sorry, the diff of this file is not supported yet

scss/coreui-utilities.rtl.scss

Sorry, the diff of this file is not supported yet

scss/coreui-utilities.scss

Sorry, the diff of this file is not supported yet

scss/coreui.rtl.scss

Sorry, the diff of this file is not supported yet

scss/coreui.scss

Sorry, the diff of this file is not supported yet

scss/forms/_floating-labels.scss

Sorry, the diff of this file is not supported yet

scss/forms/_form-check.scss

Sorry, the diff of this file is not supported yet

scss/forms/_form-control.scss

Sorry, the diff of this file is not supported yet

scss/forms/_form-multi-select.scss

Sorry, the diff of this file is not supported yet

scss/forms/_form-range.scss

Sorry, the diff of this file is not supported yet

scss/forms/_form-select.scss

Sorry, the diff of this file is not supported yet

scss/forms/_form-text.scss

Sorry, the diff of this file is not supported yet

scss/forms/_labels.scss

Sorry, the diff of this file is not supported yet

scss/helpers/_color-bg.scss

Sorry, the diff of this file is not supported yet

scss/helpers/_vr.scss

Sorry, the diff of this file is not supported yet

scss/mixins/_banner.scss

Sorry, the diff of this file is not supported yet

scss/mixins/_caret.scss

Sorry, the diff of this file is not supported yet

scss/mixins/_elevation.scss

Sorry, the diff of this file is not supported yet

scss/mixins/_gradients.scss

Sorry, the diff of this file is not supported yet

scss/mixins/_list-group.scss

Sorry, the diff of this file is not supported yet

scss/mixins/_utilities.scss

Sorry, the diff of this file is not supported yet

scss/sidebar/_sidebar.scss

Sorry, the diff of this file is not supported yet

scss/utilities/_bg-gradients.scss

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc