carbon-custom-elements
Version:
A Carbon Design System variant that's as easy to use as native HTML elements, with no framework tax, no framework silo.
853 lines (723 loc) • 33.5 kB
JavaScript
let _ = t => t,
_t;
function _decorate(decorators, factory, superClass, mixins) { var api = _getDecoratorsApi(); if (mixins) { for (var i = 0; i < mixins.length; i++) { api = mixins[i](api); } } var r = factory(function initialize(O) { api.initializeInstanceElements(O, decorated.elements); }, superClass); var decorated = api.decorateClass(_coalesceClassElements(r.d.map(_createElementDescriptor)), decorators); api.initializeClassElements(r.F, decorated.elements); return api.runClassFinishers(r.F, decorated.finishers); }
function _getDecoratorsApi() { _getDecoratorsApi = function () { return api; }; var api = { elementsDefinitionOrder: [["method"], ["field"]], initializeInstanceElements: function (O, elements) { ["method", "field"].forEach(function (kind) { elements.forEach(function (element) { if (element.kind === kind && element.placement === "own") { this.defineClassElement(O, element); } }, this); }, this); }, initializeClassElements: function (F, elements) { var proto = F.prototype; ["method", "field"].forEach(function (kind) { elements.forEach(function (element) { var placement = element.placement; if (element.kind === kind && (placement === "static" || placement === "prototype")) { var receiver = placement === "static" ? F : proto; this.defineClassElement(receiver, element); } }, this); }, this); }, defineClassElement: function (receiver, element) { var descriptor = element.descriptor; if (element.kind === "field") { var initializer = element.initializer; descriptor = { enumerable: descriptor.enumerable, writable: descriptor.writable, configurable: descriptor.configurable, value: initializer === void 0 ? void 0 : initializer.call(receiver) }; } Object.defineProperty(receiver, element.key, descriptor); }, decorateClass: function (elements, decorators) { var newElements = []; var finishers = []; var placements = { static: [], prototype: [], own: [] }; elements.forEach(function (element) { this.addElementPlacement(element, placements); }, this); elements.forEach(function (element) { if (!_hasDecorators(element)) return newElements.push(element); var elementFinishersExtras = this.decorateElement(element, placements); newElements.push(elementFinishersExtras.element); newElements.push.apply(newElements, elementFinishersExtras.extras); finishers.push.apply(finishers, elementFinishersExtras.finishers); }, this); if (!decorators) { return { elements: newElements, finishers: finishers }; } var result = this.decorateConstructor(newElements, decorators); finishers.push.apply(finishers, result.finishers); result.finishers = finishers; return result; }, addElementPlacement: function (element, placements, silent) { var keys = placements[element.placement]; if (!silent && keys.indexOf(element.key) !== -1) { throw new TypeError("Duplicated element (" + element.key + ")"); } keys.push(element.key); }, decorateElement: function (element, placements) { var extras = []; var finishers = []; for (var decorators = element.decorators, i = decorators.length - 1; i >= 0; i--) { var keys = placements[element.placement]; keys.splice(keys.indexOf(element.key), 1); var elementObject = this.fromElementDescriptor(element); var elementFinisherExtras = this.toElementFinisherExtras((0, decorators[i])(elementObject) || elementObject); element = elementFinisherExtras.element; this.addElementPlacement(element, placements); if (elementFinisherExtras.finisher) { finishers.push(elementFinisherExtras.finisher); } var newExtras = elementFinisherExtras.extras; if (newExtras) { for (var j = 0; j < newExtras.length; j++) { this.addElementPlacement(newExtras[j], placements); } extras.push.apply(extras, newExtras); } } return { element: element, finishers: finishers, extras: extras }; }, decorateConstructor: function (elements, decorators) { var finishers = []; for (var i = decorators.length - 1; i >= 0; i--) { var obj = this.fromClassDescriptor(elements); var elementsAndFinisher = this.toClassDescriptor((0, decorators[i])(obj) || obj); if (elementsAndFinisher.finisher !== undefined) { finishers.push(elementsAndFinisher.finisher); } if (elementsAndFinisher.elements !== undefined) { elements = elementsAndFinisher.elements; for (var j = 0; j < elements.length - 1; j++) { for (var k = j + 1; k < elements.length; k++) { if (elements[j].key === elements[k].key && elements[j].placement === elements[k].placement) { throw new TypeError("Duplicated element (" + elements[j].key + ")"); } } } } } return { elements: elements, finishers: finishers }; }, fromElementDescriptor: function (element) { var obj = { kind: element.kind, key: element.key, placement: element.placement, descriptor: element.descriptor }; var desc = { value: "Descriptor", configurable: true }; Object.defineProperty(obj, Symbol.toStringTag, desc); if (element.kind === "field") obj.initializer = element.initializer; return obj; }, toElementDescriptors: function (elementObjects) { if (elementObjects === undefined) return; return _toArray(elementObjects).map(function (elementObject) { var element = this.toElementDescriptor(elementObject); this.disallowProperty(elementObject, "finisher", "An element descriptor"); this.disallowProperty(elementObject, "extras", "An element descriptor"); return element; }, this); }, toElementDescriptor: function (elementObject) { var kind = String(elementObject.kind); if (kind !== "method" && kind !== "field") { throw new TypeError('An element descriptor\'s .kind property must be either "method" or' + ' "field", but a decorator created an element descriptor with' + ' .kind "' + kind + '"'); } var key = _toPropertyKey(elementObject.key); var placement = String(elementObject.placement); if (placement !== "static" && placement !== "prototype" && placement !== "own") { throw new TypeError('An element descriptor\'s .placement property must be one of "static",' + ' "prototype" or "own", but a decorator created an element descriptor' + ' with .placement "' + placement + '"'); } var descriptor = elementObject.descriptor; this.disallowProperty(elementObject, "elements", "An element descriptor"); var element = { kind: kind, key: key, placement: placement, descriptor: Object.assign({}, descriptor) }; if (kind !== "field") { this.disallowProperty(elementObject, "initializer", "A method descriptor"); } else { this.disallowProperty(descriptor, "get", "The property descriptor of a field descriptor"); this.disallowProperty(descriptor, "set", "The property descriptor of a field descriptor"); this.disallowProperty(descriptor, "value", "The property descriptor of a field descriptor"); element.initializer = elementObject.initializer; } return element; }, toElementFinisherExtras: function (elementObject) { var element = this.toElementDescriptor(elementObject); var finisher = _optionalCallableProperty(elementObject, "finisher"); var extras = this.toElementDescriptors(elementObject.extras); return { element: element, finisher: finisher, extras: extras }; }, fromClassDescriptor: function (elements) { var obj = { kind: "class", elements: elements.map(this.fromElementDescriptor, this) }; var desc = { value: "Descriptor", configurable: true }; Object.defineProperty(obj, Symbol.toStringTag, desc); return obj; }, toClassDescriptor: function (obj) { var kind = String(obj.kind); if (kind !== "class") { throw new TypeError('A class descriptor\'s .kind property must be "class", but a decorator' + ' created a class descriptor with .kind "' + kind + '"'); } this.disallowProperty(obj, "key", "A class descriptor"); this.disallowProperty(obj, "placement", "A class descriptor"); this.disallowProperty(obj, "descriptor", "A class descriptor"); this.disallowProperty(obj, "initializer", "A class descriptor"); this.disallowProperty(obj, "extras", "A class descriptor"); var finisher = _optionalCallableProperty(obj, "finisher"); var elements = this.toElementDescriptors(obj.elements); return { elements: elements, finisher: finisher }; }, runClassFinishers: function (constructor, finishers) { for (var i = 0; i < finishers.length; i++) { var newConstructor = (0, finishers[i])(constructor); if (newConstructor !== undefined) { if (typeof newConstructor !== "function") { throw new TypeError("Finishers must return a constructor."); } constructor = newConstructor; } } return constructor; }, disallowProperty: function (obj, name, objectType) { if (obj[name] !== undefined) { throw new TypeError(objectType + " can't have a ." + name + " property."); } } }; return api; }
function _createElementDescriptor(def) { var key = _toPropertyKey(def.key); var descriptor; if (def.kind === "method") { descriptor = { value: def.value, writable: true, configurable: true, enumerable: false }; } else if (def.kind === "get") { descriptor = { get: def.value, configurable: true, enumerable: false }; } else if (def.kind === "set") { descriptor = { set: def.value, configurable: true, enumerable: false }; } else if (def.kind === "field") { descriptor = { configurable: true, writable: true, enumerable: true }; } var element = { kind: def.kind === "field" ? "field" : "method", key: key, placement: def.static ? "static" : def.kind === "field" ? "own" : "prototype", descriptor: descriptor }; if (def.decorators) element.decorators = def.decorators; if (def.kind === "field") element.initializer = def.value; return element; }
function _coalesceGetterSetter(element, other) { if (element.descriptor.get !== undefined) { other.descriptor.get = element.descriptor.get; } else { other.descriptor.set = element.descriptor.set; } }
function _coalesceClassElements(elements) { var newElements = []; var isSameElement = function isSameElement(other) { return other.kind === "method" && other.key === element.key && other.placement === element.placement; }; for (var i = 0; i < elements.length; i++) { var element = elements[i]; var other; if (element.kind === "method" && (other = newElements.find(isSameElement))) { if (_isDataDescriptor(element.descriptor) || _isDataDescriptor(other.descriptor)) { if (_hasDecorators(element) || _hasDecorators(other)) { throw new ReferenceError("Duplicated methods (" + element.key + ") can't be decorated."); } other.descriptor = element.descriptor; } else { if (_hasDecorators(element)) { if (_hasDecorators(other)) { throw new ReferenceError("Decorators can't be placed on different accessors with for " + "the same property (" + element.key + ")."); } other.decorators = element.decorators; } _coalesceGetterSetter(element, other); } } else { newElements.push(element); } } return newElements; }
function _hasDecorators(element) { return element.decorators && element.decorators.length; }
function _isDataDescriptor(desc) { return desc !== undefined && !(desc.value === undefined && desc.writable === undefined); }
function _optionalCallableProperty(obj, name) { var value = obj[name]; if (value !== undefined && typeof value !== "function") { throw new TypeError("Expected '" + name + "' to be a function"); } return value; }
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
function _toArray(arr) { return _arrayWithHoles(arr) || _iterableToArray(arr) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
function _get(target, property, receiver) { if (typeof Reflect !== "undefined" && Reflect.get) { _get = Reflect.get; } else { _get = function _get(target, property, receiver) { var base = _superPropBase(target, property); if (!base) return; var desc = Object.getOwnPropertyDescriptor(base, property); if (desc.get) { return desc.get.call(receiver); } return desc.value; }; } return _get(target, property, receiver || target); }
function _superPropBase(object, property) { while (!Object.prototype.hasOwnProperty.call(object, property)) { object = _getPrototypeOf(object); if (object === null) break; } return object; }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
/**
* @license
*
* Copyright IBM Corp. 2019, 2020
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
import { html, property, query, customElement, LitElement } from 'lit-element';
import flatpickr from 'flatpickr';
import settings from 'carbon-components/es/globals/js/settings';
import on from 'carbon-components/es/globals/js/misc/on';
import { getISODateString, parseISODateString } from './iso-date';
import appendToPlugin from './append-to-plugin';
import cssClassPlugin from './css-class-plugin';
import fixEventsPlugin from './fix-events-plugin';
import focusPlugin from './focus-plugin';
import iconPlugin from './icon-plugin';
import monthSelectPlugin from './month-select-plugin';
import rangePlugin from './range-plugin';
import shadowDOMEventPlugin from './shadow-dom-events-plugin';
import stateHandshakePlugin from './state-handshake-plugin';
import styles from "./date-picker.css.js";
const {
prefix
} = settings;
/**
* Date picker modes.
*/
var DATE_PICKER_MODE;
/**
* Date picker.
* @element bx-date-picker
* @fires bx-date-picker-changed - The custom event fired on this element when Flatpickr updates its value.
*/
(function (DATE_PICKER_MODE) {
DATE_PICKER_MODE["SIMPLE"] = "simple";
DATE_PICKER_MODE["SINGLE"] = "single";
DATE_PICKER_MODE["RANGE"] = "range";
})(DATE_PICKER_MODE || (DATE_PICKER_MODE = {}));
let BXDatePicker = _decorate([customElement(`${prefix}-date-picker`)], function (_initialize, _LitElement) {
class BXDatePicker extends _LitElement {
constructor(...args) {
super(...args);
_initialize(this);
}
}
return {
F: BXDatePicker,
d: [{
kind: "field",
key: "_hAfterChange",
value() {
return null;
}
}, {
kind: "field",
key: "_dateInteractNode",
value() {
return null;
}
}, {
kind: "field",
decorators: [query('#floating-menu-container')],
key: "_floatingMenuContainerNode",
value: void 0
}, {
kind: "get",
key: "_mode",
value:
/**
* The handle for the listener of `${prefix}-date-picker-changed` event.
*/
/**
* The slotted `<bx-date-input kind="from">`.
*/
/**
* The element to put calendar dropdown in.
*/
/**
* @returns The effective date picker mode, determined by the child `<bx-date-picker-input>`.
*/
function _mode() {
const {
selectorInputFrom,
selectorInputTo
} = this.constructor;
if (this.querySelector(selectorInputTo)) {
return DATE_PICKER_MODE.RANGE;
}
if (this.querySelector(selectorInputFrom)) {
return DATE_PICKER_MODE.SINGLE;
}
return DATE_PICKER_MODE.SIMPLE;
}
/**
* @returns The Flatpickr plugins to use.
*/
}, {
kind: "get",
key: "_datePickerPlugins",
value: function _datePickerPlugins() {
const {
classCalendarContainer,
classMonth,
classWeekdays,
classDays,
classWeekday,
classDay,
classNoBorder,
selectorInputFrom,
selectorInputTo,
_selectorFlatpickrMonthYearContainer: selectorFlatpickrMonthYearContainer,
_selectorFlatpickrYearContainer: selectorFlatpickrYearContainer,
_selectorFlatpickrCurrentMonth: selectorFlatpickrCurrentMonth,
_selectorFlatpickrMonth: selectorFlatpickrMonth,
_selectorFlatpickrWeekdays: selectorFlatpickrWeekdays,
_selectorFlatpickrDays: selectorFlatpickrDays,
_selectorFlatpickrWeekday: selectorFlatpickrWeekday,
_selectorFlatpickrDay: selectorFlatpickrDay,
_classFlatpickrCurrentMonth: classFlatpickrCurrentMonth,
_classFlatpickrToday: classFlatpickrToday
} = this.constructor;
const {
_floatingMenuContainerNode: floatingMenuContainerNode,
_mode: mode
} = this;
const inputFrom = this.querySelector(selectorInputFrom);
const inputTo = this.querySelector(selectorInputTo);
const plugins = [appendToPlugin({
appendTo: floatingMenuContainerNode
}), cssClassPlugin({
classCalendarContainer,
classMonth,
classWeekdays,
classDays,
classWeekday,
classDay,
classNoBorder,
selectorFlatpickrMonth,
selectorFlatpickrWeekdays,
selectorFlatpickrDays,
selectorFlatpickrWeekday,
selectorFlatpickrDay,
classFlatpickrToday
}), fixEventsPlugin({
inputFrom: inputFrom,
inputTo: inputTo
}), focusPlugin({
inputFrom: inputFrom,
inputTo: inputTo
}), iconPlugin(), monthSelectPlugin({
selectorFlatpickrMonthYearContainer,
selectorFlatpickrYearContainer,
selectorFlatpickrCurrentMonth,
classFlatpickrCurrentMonth
}), shadowDOMEventPlugin(), stateHandshakePlugin(this)];
if (mode === DATE_PICKER_MODE.RANGE) {
// Flatpickr runs event handlers of last registered plugins first.
// Ensures `onValueUpdate` of `rangePlugin` runs first
// given Flatpickr puts `01/01/1970 to 01/02/1970` to from date
// where `rangePlugin` overrides it to separate them to from/to dates.
// We want to ensure our handler of `onValueUpdate` (notably one in `<bx-date-picker-input>`)
// gets the `<input>` value set by `rangePlugin` instead of Flatpickr core.
plugins.push(rangePlugin({
input: inputTo
}));
}
return plugins;
}
/**
* @returns The options to instantiate Flatpickr with.
*/
}, {
kind: "get",
key: "_datePickerOptions",
value: function _datePickerOptions() {
var _this$dateFormat;
const {
locale = this.constructor.defaultLocale,
enabledRange,
_dateInteractNode: dateInteractNode,
_datePickerPlugins: plugins,
_handleFlatpickrError: handleFlatpickrError
} = this; // We use `<bx-date-picker-input>` to communicate values/events with Flatpickr,
// but want to use `<input>` in shadow DOM to base the calendar dropdown's position on
const {
input: positionElement
} = dateInteractNode;
const [minDate = undefined, maxDate = undefined] = !enabledRange ? [] : enabledRange.split('/');
return {
allowInput: true,
dateFormat: (_this$dateFormat = this.dateFormat) !== null && _this$dateFormat !== void 0 ? _this$dateFormat : this.constructor.defaultDateFormat,
disableMobile: true,
errorHandler: handleFlatpickrError,
locale,
maxDate,
minDate,
positionElement,
plugins
};
}
/**
* Handles `${prefix}-date-picker-changed` event on this element.
*/
}, {
kind: "field",
key: "_handleChange",
value() {
return ({
detail
}) => {
this._value = detail.selectedDates.map(date => getISODateString(date)).join('/');
};
}
}, {
kind: "method",
key: "_handleSlotChange",
value:
/**
* Handles `slotchange` event in the `<slot>`.
*/
function _handleSlotChange({
target
}) {
const {
_dateInteractNode: oldDateInteractNode
} = this;
const dateInteractNode = target.assignedNodes().find(node => node.nodeType === Node.ELEMENT_NODE && node.matches(this.constructor.selectorInputFrom));
if (oldDateInteractNode !== dateInteractNode) {
this._dateInteractNode = dateInteractNode;
this._instantiateDatePicker();
}
}
/**
* Fires a custom event to notify an error in Flatpickr.
*/
}, {
kind: "field",
key: "_handleFlatpickrError",
value() {
return error => {
this.dispatchEvent(new CustomEvent(this.constructor.eventFlatpickrError, {
bubbles: true,
cancelable: false,
composed: true,
detail: {
error
}
}));
};
}
}, {
kind: "method",
key: "_instantiateDatePicker",
value:
/**
* Instantiates Flatpickr.
* @returns The Flatpickr instance.
*/
function _instantiateDatePicker() {
this._releaseDatePicker();
const {
_dateInteractNode: dateInteractNode
} = this; // `this._dateInteractNode` won't be there unless there is a slotted `<bx-date-input type="from">`,
// which means Flatpickr will never be instantiated in "simple" mode.
if (dateInteractNode && dateInteractNode.input) {
this.calendar = flatpickr(dateInteractNode, this._datePickerOptions);
}
return this.calendar;
}
/**
* Releases Flatpickr instances.
*/
}, {
kind: "method",
key: "_releaseDatePicker",
value: function _releaseDatePicker() {
if (this.calendar) {
this.calendar.destroy();
this.calendar = null;
}
return this.calendar;
}
/**
* The Flatpickr instance.
*/
}, {
kind: "field",
key: "calendar",
value() {
return null;
}
}, {
kind: "field",
decorators: [property({
attribute: 'date-format'
})],
key: "dateFormat",
value: void 0
}, {
kind: "field",
decorators: [property({
attribute: false
})],
key: "locale",
value: void 0
}, {
kind: "field",
decorators: [property({
attribute: 'enabled-range'
})],
key: "enabledRange",
value: void 0
}, {
kind: "field",
decorators: [property({
type: Boolean,
reflect: true
})],
key: "open",
value() {
return false;
}
}, {
kind: "get",
decorators: [property()],
key: "value",
value:
/**
* The date format to let Flatpickr use.
*/
/**
* The localization data.
*/
/**
* The date range that a user can pick in calendar dropdown.
*/
/**
* `true` if the date picker should be open.
*/
/**
* The date(s) in ISO8601 format (date portion only), for range mode, '/' is used for separate start/end dates.
*/
function value() {
return this._value;
}
}, {
kind: "set",
key: "value",
value: function value(_value) {
const {
_value: oldValue
} = this;
this._value = _value;
this.requestUpdate('value', oldValue);
}
}, {
kind: "method",
key: "connectedCallback",
value: function connectedCallback() {
_get(_getPrototypeOf(BXDatePicker.prototype), "connectedCallback", this).call(this);
this._instantiateDatePicker(); // Manually hooks the event listeners on the host element to make the event names configurable
this._hAfterChange = on(this, this.constructor.eventChange, this._handleChange);
}
}, {
kind: "method",
key: "disconnectedCallback",
value: function disconnectedCallback() {
if (this._hAfterChange) {
this._hAfterChange = this._hAfterChange.release();
}
this._releaseDatePicker();
_get(_getPrototypeOf(BXDatePicker.prototype), "disconnectedCallback", this).call(this);
}
}, {
kind: "method",
key: "updated",
value: function updated(changedProperties) {
const {
calendar,
open
} = this;
if (calendar && changedProperties.has('dateFormat')) {
const {
dateFormat
} = this;
calendar.set({
dateFormat
});
}
if (changedProperties.has('enabledRange')) {
const {
enabledRange
} = this;
const dates = enabledRange.split('/').map(item => !item ? undefined : parseISODateString(item)); // Allows empty start/end
if (dates.some(item => Boolean(item && isNaN(Number(item))))) {
// Allows empty start/end
throw new Error(`Wrong date format found in \`enabledRange\` property: ${enabledRange}`);
}
const [minDate, maxDate] = dates;
if (minDate && maxDate && minDate > maxDate) {
throw new Error(`In \`enabledRange\` property, the end date shouldn't be smaller than the start date. You have: ${enabledRange}`);
}
if (calendar) {
calendar.set({
minDate,
maxDate
});
}
}
if (changedProperties.has('open') && calendar) {
if (open) {
calendar.open();
} else {
calendar.close();
}
}
if (changedProperties.has('value')) {
const {
value
} = this;
const dates = value.split('/').filter(Boolean).map(item => parseISODateString(item));
if (dates.some(item => isNaN(Number(item)))) {
throw new Error(`Wrong date format found in \`value\` property: ${value}`);
}
const [startDate, endDate] = dates;
if (startDate && endDate && startDate > endDate) {
throw new Error(`In \`value\` property, the end date shouldn't be smaller than the start date. You have: ${value}`);
}
if (calendar) {
calendar.setDate(dates);
const {
selectorInputFrom,
selectorInputTo
} = this.constructor;
const inputFrom = this.querySelector(selectorInputFrom);
const inputTo = this.querySelector(selectorInputTo);
[inputFrom, inputTo].forEach((input, i) => {
if (input) {
input.value = !dates[i] ? '' : calendar.formatDate(new Date(dates[i]), calendar.config.dateFormat);
}
});
}
}
}
}, {
kind: "method",
key: "render",
value: function render() {
const {
_handleSlotChange: handleSlotChange
} = this;
return html(_t || (_t = _`
<a class="${0}--visually-hidden" href="javascript:void 0" role="navigation"></a>
<slot @slotchange="${0}"></slot>
<div id="floating-menu-container"></div>
<a class="${0}--visually-hidden" href="javascript:void 0" role="navigation"></a>
`), prefix, handleSlotChange, prefix);
}
/**
* The CSS selector for Flatpickr's month/year portion.
*/
}, {
kind: "field",
static: true,
key: "_selectorFlatpickrMonthYearContainer",
value() {
return '.flatpickr-current-month';
}
}, {
kind: "field",
static: true,
key: "_selectorFlatpickrYearContainer",
value() {
return '.numInputWrapper';
}
}, {
kind: "field",
static: true,
key: "_selectorFlatpickrCurrentMonth",
value() {
return '.cur-month';
}
}, {
kind: "field",
static: true,
key: "_selectorFlatpickrMonth",
value() {
return '.flatpickr-month';
}
}, {
kind: "field",
static: true,
key: "_selectorFlatpickrWeekdays",
value() {
return '.flatpickr-weekdays';
}
}, {
kind: "field",
static: true,
key: "_selectorFlatpickrDays",
value() {
return '.flatpickr-days';
}
}, {
kind: "field",
static: true,
key: "_selectorFlatpickrWeekday",
value() {
return '.flatpickr-weekday';
}
}, {
kind: "field",
static: true,
key: "_selectorFlatpickrDay",
value() {
return '.flatpickr-day';
}
}, {
kind: "field",
static: true,
key: "_classFlatpickrCurrentMonth",
value() {
return 'cur-month';
}
}, {
kind: "field",
static: true,
key: "_classFlatpickrToday",
value() {
return 'today';
}
}, {
kind: "get",
static: true,
key: "classCalendarContainer",
value:
/**
* The CSS selector for Flatpickr's year portion.
*/
/**
* The CSS selector for the inner element of Flatpickr's month portion.
*/
/**
* The CSS selector for Flatpickr's month navigator.
*/
/**
* The CSS selector for Flatpickr's container of the weekdays.
*/
/**
* The CSS selector for Flatpickr's container of the days.
*/
/**
* The CSS selector applied to Flatpickr's each weekdays.
*/
/**
* The CSS selector applied to Flatpickr's each days.
*/
/**
* The CSS class for the inner element of Flatpickr's month portion.
*/
/**
* The CSS class applied to Flatpickr's "today" highlight.
*/
/**
* The CSS class for the calendar dropdown.
*/
function classCalendarContainer() {
return `${prefix}--date-picker__calendar`;
}
/**
* The CSS class for the month navigator.
*/
}, {
kind: "get",
static: true,
key: "classMonth",
value: function classMonth() {
return `${prefix}--date-picker__month`;
}
/**
* The CSS class for the container of the weekdays.
*/
}, {
kind: "get",
static: true,
key: "classWeekdays",
value: function classWeekdays() {
return `${prefix}--date-picker__weekdays`;
}
/**
* The CSS class for the container of the days.
*/
}, {
kind: "get",
static: true,
key: "classDays",
value: function classDays() {
return `${prefix}--date-picker__days`;
}
/**
* The CSS class applied to each weekdays.
*/
}, {
kind: "get",
static: true,
key: "classWeekday",
value: function classWeekday() {
return `${prefix}--date-picker__weekday`;
}
/**
* The CSS class applied to each days.
*/
}, {
kind: "get",
static: true,
key: "classDay",
value: function classDay() {
return `${prefix}--date-picker__day`;
}
/**
* The CSS class applied to the "today" highlight if there are any dates selected.
*/
}, {
kind: "field",
static: true,
key: "classNoBorder",
value() {
return 'no-border';
}
}, {
kind: "field",
static: true,
key: "defaultDateFormat",
value() {
return 'm/d/Y';
}
}, {
kind: "field",
static: true,
key: "defaultLocale",
value() {
return flatpickr.l10ns.default;
}
}, {
kind: "get",
static: true,
key: "selectorInputFrom",
value:
/**
* The default date format.
*/
/**
* The default localization data.
*/
/**
* A selector that will return the `<input>` to enter starting date.
*/
function selectorInputFrom() {
return `${prefix}-date-picker-input[kind="single"],${prefix}-date-picker-input[kind="from"]`;
}
/**
* A selector that will return the `<input>` to enter end date.
*/
}, {
kind: "get",
static: true,
key: "selectorInputTo",
value: function selectorInputTo() {
return `${prefix}-date-picker-input[kind="to"]`;
}
/**
* The name of the custom event when Flatpickr throws an error.
*/
}, {
kind: "get",
static: true,
key: "eventFlatpickrError",
value: function eventFlatpickrError() {
return `${prefix}-date-picker-flatpickr-error`;
}
/**
* The name of the custom event fired on this element when Flatpickr updates its value.
*/
}, {
kind: "get",
static: true,
key: "eventChange",
value: function eventChange() {
return `${prefix}-date-picker-changed`;
}
}, {
kind: "field",
static: true,
key: "styles",
value() {
return styles;
}
}]
};
}, LitElement);
export default BXDatePicker;
//# sourceMappingURL=date-picker.js.map