@xplortech/apollo-core 0.3.0 → 0.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +9 -0
- package/build/style.css +2934 -417
- package/dist/apollo-core/apollo-core.css +6 -4
- package/dist/apollo-core/apollo-core.esm.js +1 -1
- package/dist/apollo-core/p-0027c582.entry.js +1 -0
- package/dist/apollo-core/p-2c551f4d.entry.js +1 -0
- package/dist/apollo-core/{p-43013b35.entry.js → p-2f90296c.js} +2 -3
- package/dist/apollo-core/p-6081e432.entry.js +1 -0
- package/dist/apollo-core/p-612984e5.entry.js +1 -0
- package/dist/apollo-core/p-63ea199d.entry.js +1 -0
- package/dist/apollo-core/p-650f6416.entry.js +1 -0
- package/dist/apollo-core/p-6ad97405.entry.js +1 -0
- package/dist/apollo-core/{p-21872e0f.entry.js → p-9b9511e4.entry.js} +1 -1
- package/dist/apollo-core/p-ad90fe4d.js +1 -0
- package/dist/apollo-core/p-c6fec744.entry.js +1 -0
- package/dist/apollo-core/p-ea8e0991.js +1 -0
- package/dist/apollo-core/p-ed04cedd.entry.js +1 -0
- package/dist/apollo-core/p-eec5a0f1.entry.js +1 -0
- package/dist/apollo-core/p-f4f646d9.entry.js +1 -0
- package/dist/cjs/apollo-core.cjs.js +2 -2
- package/dist/cjs/{index-716d8f57.js → index-9662f096.js} +134 -35
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/regular-872f5226.js +16043 -0
- package/dist/cjs/v4-14140ff3.js +77 -0
- package/dist/cjs/xpl-avatar_14.cjs.entry.js +30 -16122
- package/dist/cjs/xpl-button-row.cjs.entry.js +24 -0
- package/dist/cjs/xpl-choicelist.cjs.entry.js +22 -2
- package/dist/cjs/xpl-divider.cjs.entry.js +18 -0
- package/dist/cjs/xpl-grid-item.cjs.entry.js +25 -0
- package/dist/cjs/xpl-grid.cjs.entry.js +35 -0
- package/dist/cjs/xpl-input.cjs.entry.js +2527 -0
- package/dist/cjs/xpl-list.cjs.entry.js +63 -0
- package/dist/cjs/xpl-pagination.cjs.entry.js +1 -1
- package/dist/cjs/xpl-select.cjs.entry.js +623 -0
- package/dist/cjs/xpl-tag.cjs.entry.js +21 -0
- package/dist/cjs/xpl-toggle.cjs.entry.js +34 -0
- package/dist/collection/collection-manifest.json +9 -0
- package/dist/collection/components/xpl-button-row/xpl-button-row.js +119 -0
- package/dist/collection/components/xpl-checkbox/xpl-checkbox.js +51 -5
- package/dist/collection/components/xpl-choicelist/xpl-choicelist.js +138 -4
- package/dist/collection/components/xpl-divider/xpl-divider.js +30 -0
- package/dist/collection/components/xpl-dropdown/xpl-dropdown.js +32 -0
- package/dist/collection/components/xpl-grid/xpl-grid.js +26 -0
- package/dist/collection/components/xpl-grid-item/xpl-grid-item.js +93 -0
- package/dist/collection/components/xpl-input/xpl-input.js +471 -0
- package/dist/collection/components/xpl-list/xpl-list.js +93 -0
- package/dist/collection/components/xpl-radio/xpl-radio.js +51 -5
- package/dist/collection/components/xpl-select/xpl-select.js +311 -0
- package/dist/collection/components/xpl-table/xpl-table.js +6 -6
- package/dist/collection/components/xpl-tag/xpl-tag.js +30 -0
- package/dist/collection/components/xpl-toggle/xpl-toggle.js +157 -0
- package/dist/custom-elements/index.d.ts +54 -0
- package/dist/custom-elements/index.js +3447 -77
- package/dist/esm/apollo-core.js +2 -2
- package/dist/esm/{index-4c8962a5.js → index-619763f9.js} +133 -36
- package/dist/esm/loader.js +2 -2
- package/dist/esm/regular-86225e9d.js +16041 -0
- package/dist/esm/v4-929670b7.js +75 -0
- package/dist/esm/xpl-avatar_14.entry.js +28 -16120
- package/dist/esm/xpl-button-row.entry.js +20 -0
- package/dist/esm/xpl-choicelist.entry.js +22 -2
- package/dist/esm/xpl-divider.entry.js +14 -0
- package/dist/esm/xpl-grid-item.entry.js +21 -0
- package/dist/esm/xpl-grid.entry.js +31 -0
- package/dist/esm/xpl-input.entry.js +2523 -0
- package/dist/esm/xpl-list.entry.js +59 -0
- package/dist/esm/xpl-pagination.entry.js +1 -1
- package/dist/esm/xpl-select.entry.js +619 -0
- package/dist/esm/xpl-tag.entry.js +17 -0
- package/dist/esm/xpl-toggle.entry.js +30 -0
- package/dist/stories/button-row.stories.js +64 -0
- package/dist/stories/checkbox.stories.js +16 -6
- package/dist/stories/choicelist.stories.js +112 -0
- package/dist/stories/divider.stories.js +34 -0
- package/dist/stories/grid.stories.js +100 -0
- package/dist/stories/input.stories.js +252 -0
- package/dist/stories/list.stories.js +134 -0
- package/dist/stories/radio.stories.js +16 -6
- package/dist/stories/select.stories.js +111 -0
- package/dist/stories/toggle.stories.js +80 -0
- package/dist/types/Users/fernandogelin/Projects/apollo/.stencil/stories/button-row.stories.d.ts +49 -0
- package/dist/types/Users/{awentt/Sites → fernandogelin/Projects}/apollo/.stencil/stories/checkbox.stories.d.ts +10 -2
- package/dist/types/Users/fernandogelin/Projects/apollo/.stencil/stories/choicelist.stories.d.ts +41 -0
- package/dist/types/Users/fernandogelin/Projects/apollo/.stencil/stories/divider.stories.d.ts +40 -0
- package/dist/types/Users/fernandogelin/Projects/apollo/.stencil/stories/grid.stories.d.ts +150 -0
- package/dist/types/Users/fernandogelin/Projects/apollo/.stencil/stories/input.stories.d.ts +190 -0
- package/dist/types/Users/fernandogelin/Projects/apollo/.stencil/stories/list.stories.d.ts +71 -0
- package/dist/types/Users/{awentt/Sites → fernandogelin/Projects}/apollo/.stencil/stories/radio.stories.d.ts +10 -2
- package/dist/types/Users/fernandogelin/Projects/apollo/.stencil/stories/select.stories.d.ts +74 -0
- package/dist/types/Users/fernandogelin/Projects/apollo/.stencil/stories/toggle.stories.d.ts +74 -0
- package/dist/types/components/xpl-button-row/xpl-button-row.d.ts +35 -0
- package/dist/types/components/xpl-checkbox/xpl-checkbox.d.ts +5 -0
- package/dist/types/components/xpl-choicelist/choice.d.ts +6 -0
- package/dist/types/components/xpl-choicelist/xpl-choicelist.d.ts +31 -0
- package/dist/types/components/xpl-divider/xpl-divider.d.ts +9 -0
- package/dist/types/components/xpl-dropdown/dropdownchoice.d.ts +6 -0
- package/dist/types/components/xpl-dropdown/xpl-dropdown.d.ts +10 -0
- package/dist/types/components/xpl-grid/xpl-grid.d.ts +5 -0
- package/dist/types/components/xpl-grid-item/xpl-grid-item.d.ts +7 -0
- package/dist/types/components/xpl-input/xpl-input.d.ts +87 -0
- package/dist/types/components/xpl-list/listitem.d.ts +16 -0
- package/dist/types/components/xpl-list/xpl-list.d.ts +28 -0
- package/dist/types/components/xpl-radio/xpl-radio.d.ts +4 -0
- package/dist/types/components/xpl-select/xpl-select.d.ts +52 -0
- package/dist/types/components/xpl-table/xpl-table.d.ts +6 -6
- package/dist/types/components/xpl-tag/xpl-tag.d.ts +5 -0
- package/dist/types/components/xpl-toggle/xpl-toggle.d.ts +23 -0
- package/dist/types/components.d.ts +447 -5
- package/package.json +3 -2
- package/dist/apollo-core/p-00996870.js +0 -1
- package/dist/apollo-core/p-d8ea7d80.entry.js +0 -1
- /package/dist/types/Users/{awentt/Sites → fernandogelin/Projects}/apollo/.stencil/stories/avatar.stories.d.ts +0 -0
- /package/dist/types/Users/{awentt/Sites → fernandogelin/Projects}/apollo/.stencil/stories/backdrop.stories.d.ts +0 -0
- /package/dist/types/Users/{awentt/Sites → fernandogelin/Projects}/apollo/.stencil/stories/badge.stories.d.ts +0 -0
- /package/dist/types/Users/{awentt/Sites → fernandogelin/Projects}/apollo/.stencil/stories/breadcrumbs.stories.d.ts +0 -0
- /package/dist/types/Users/{awentt/Sites → fernandogelin/Projects}/apollo/.stencil/stories/button.stories.d.ts +0 -0
- /package/dist/types/Users/{awentt/Sites → fernandogelin/Projects}/apollo/.stencil/stories/content-area.stories.d.ts +0 -0
- /package/dist/types/Users/{awentt/Sites → fernandogelin/Projects}/apollo/.stencil/stories/main-nav.stories.d.ts +0 -0
- /package/dist/types/Users/{awentt/Sites → fernandogelin/Projects}/apollo/.stencil/stories/pagination.stories.d.ts +0 -0
- /package/dist/types/Users/{awentt/Sites → fernandogelin/Projects}/apollo/.stencil/stories/secondary-nav.stories.d.ts +0 -0
- /package/dist/types/Users/{awentt/Sites → fernandogelin/Projects}/apollo/.stencil/stories/table.stories.d.ts +0 -0
- /package/dist/types/Users/{awentt/Sites → fernandogelin/Projects}/apollo/.stencil/stories/tabs.stories.d.ts +0 -0
- /package/dist/types/Users/{awentt/Sites → fernandogelin/Projects}/apollo/.stencil/stories/utility-bar.stories.d.ts +0 -0
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { h, Host,
|
|
1
|
+
import { h, Host, createEvent, Fragment, proxyCustomElement } from '@stencil/core/internal/client';
|
|
2
2
|
export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
|
|
3
3
|
|
|
4
4
|
const XplAvatar$1 = class extends HTMLElement {
|
|
@@ -16143,6 +16143,24 @@ const XplButton$1 = class extends HTMLElement {
|
|
|
16143
16143
|
}
|
|
16144
16144
|
};
|
|
16145
16145
|
|
|
16146
|
+
const XplButtonRow$1 = class extends HTMLElement {
|
|
16147
|
+
constructor() {
|
|
16148
|
+
super();
|
|
16149
|
+
this.__registerHost();
|
|
16150
|
+
this.clickPrimary = createEvent(this, "clickPrimary", 7);
|
|
16151
|
+
this.clickSecondary = createEvent(this, "clickSecondary", 7);
|
|
16152
|
+
this.clickTertiary = createEvent(this, "clickTertiary", 7);
|
|
16153
|
+
this.onPrimary = () => this.clickPrimary.emit();
|
|
16154
|
+
this.onSecondary = () => this.clickSecondary.emit();
|
|
16155
|
+
this.onTertiary = () => this.clickTertiary.emit();
|
|
16156
|
+
}
|
|
16157
|
+
render() {
|
|
16158
|
+
return (h(Host, { class: "xpl-button-row" }, h("div", { class: "xpl-button-row-inner" }, h("div", { class: "xpl-button-row__left" }, this.secondary &&
|
|
16159
|
+
h("xpl-button", { variant: "secondary", type: "button", onClick: this.onSecondary }, this.secondary)), h("div", { class: "xpl-button-row__right" }, this.tertiary && h("xpl-button", { variant: "subtle", type: "button", onClick: this.onTertiary }, this.tertiary), this.secondary &&
|
|
16160
|
+
h("xpl-button", { variant: "secondary", type: "button", onClick: this.onSecondary }, this.secondary), this.primary && h("xpl-button", { class: "xpl-button-row__primary", onClick: this.onPrimary }, this.primary)))));
|
|
16161
|
+
}
|
|
16162
|
+
};
|
|
16163
|
+
|
|
16146
16164
|
// Unique ID creation requires a high quality random # generator. In the browser we therefore
|
|
16147
16165
|
// require the crypto API and do not support built-in fallback to lower quality random number
|
|
16148
16166
|
// generators (like Math.random()).
|
|
@@ -16158,98 +16176,2763 @@ function rng() {
|
|
|
16158
16176
|
if (!getRandomValues) {
|
|
16159
16177
|
throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');
|
|
16160
16178
|
}
|
|
16161
|
-
}
|
|
16162
|
-
|
|
16163
|
-
return getRandomValues(rnds8);
|
|
16164
|
-
}
|
|
16165
|
-
|
|
16166
|
-
const REGEX = /^(?:[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}|00000000-0000-0000-0000-000000000000)$/i;
|
|
16167
|
-
|
|
16168
|
-
function validate(uuid) {
|
|
16169
|
-
return typeof uuid === 'string' && REGEX.test(uuid);
|
|
16179
|
+
}
|
|
16180
|
+
|
|
16181
|
+
return getRandomValues(rnds8);
|
|
16182
|
+
}
|
|
16183
|
+
|
|
16184
|
+
const REGEX = /^(?:[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}|00000000-0000-0000-0000-000000000000)$/i;
|
|
16185
|
+
|
|
16186
|
+
function validate(uuid) {
|
|
16187
|
+
return typeof uuid === 'string' && REGEX.test(uuid);
|
|
16188
|
+
}
|
|
16189
|
+
|
|
16190
|
+
/**
|
|
16191
|
+
* Convert array of 16 byte values to UUID string format of the form:
|
|
16192
|
+
* XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
|
|
16193
|
+
*/
|
|
16194
|
+
|
|
16195
|
+
var byteToHex = [];
|
|
16196
|
+
|
|
16197
|
+
for (var i = 0; i < 256; ++i) {
|
|
16198
|
+
byteToHex.push((i + 0x100).toString(16).substr(1));
|
|
16199
|
+
}
|
|
16200
|
+
|
|
16201
|
+
function stringify(arr) {
|
|
16202
|
+
var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
|
|
16203
|
+
// Note: Be careful editing this code! It's been tuned for performance
|
|
16204
|
+
// and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434
|
|
16205
|
+
var uuid = (byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]]).toLowerCase(); // Consistency check for valid UUID. If this throws, it's likely due to one
|
|
16206
|
+
// of the following:
|
|
16207
|
+
// - One or more input array values don't map to a hex octet (leading to
|
|
16208
|
+
// "undefined" in the uuid)
|
|
16209
|
+
// - Invalid input values for the RFC `version` or `variant` fields
|
|
16210
|
+
|
|
16211
|
+
if (!validate(uuid)) {
|
|
16212
|
+
throw TypeError('Stringified UUID is invalid');
|
|
16213
|
+
}
|
|
16214
|
+
|
|
16215
|
+
return uuid;
|
|
16216
|
+
}
|
|
16217
|
+
|
|
16218
|
+
function v4(options, buf, offset) {
|
|
16219
|
+
options = options || {};
|
|
16220
|
+
var rnds = options.random || (options.rng || rng)(); // Per 4.4, set bits for version and `clock_seq_hi_and_reserved`
|
|
16221
|
+
|
|
16222
|
+
rnds[6] = rnds[6] & 0x0f | 0x40;
|
|
16223
|
+
rnds[8] = rnds[8] & 0x3f | 0x80; // Copy bytes to buffer, if provided
|
|
16224
|
+
|
|
16225
|
+
if (buf) {
|
|
16226
|
+
offset = offset || 0;
|
|
16227
|
+
|
|
16228
|
+
for (var i = 0; i < 16; ++i) {
|
|
16229
|
+
buf[offset + i] = rnds[i];
|
|
16230
|
+
}
|
|
16231
|
+
|
|
16232
|
+
return buf;
|
|
16233
|
+
}
|
|
16234
|
+
|
|
16235
|
+
return stringify(rnds);
|
|
16236
|
+
}
|
|
16237
|
+
|
|
16238
|
+
const XplCheckbox$1 = class extends HTMLElement {
|
|
16239
|
+
constructor() {
|
|
16240
|
+
super();
|
|
16241
|
+
this.__registerHost();
|
|
16242
|
+
this.checkboxChange = createEvent(this, "checkboxChange", 7);
|
|
16243
|
+
this.id = v4();
|
|
16244
|
+
}
|
|
16245
|
+
render() {
|
|
16246
|
+
return (h(Host, { class: {
|
|
16247
|
+
"xpl-checkbox-radio-container": true,
|
|
16248
|
+
"styled": this.styled,
|
|
16249
|
+
"disabled": this.disabled,
|
|
16250
|
+
} }, h("input", { class: "xpl-checkbox", type: "checkbox", checked: this.checked, disabled: this.disabled, id: this.id, indeterminate: this.indeterminate, onChange: () => this.checkboxChange.emit(this.input.checked), name: this.name, ref: (el) => (this.input = el), required: this.required, value: this.value }), h("label", { class: {
|
|
16251
|
+
"xpl-label": true,
|
|
16252
|
+
"xpl-label--disabled": this.disabled
|
|
16253
|
+
}, htmlFor: this.id }, h("slot", null), this.description && h("small", { class: {
|
|
16254
|
+
"xpl-description": true,
|
|
16255
|
+
"xpl-description--disabled": this.disabled
|
|
16256
|
+
} }, this.description))));
|
|
16257
|
+
}
|
|
16258
|
+
};
|
|
16259
|
+
|
|
16260
|
+
const XplChoicelist$1 = class extends HTMLElement {
|
|
16261
|
+
constructor() {
|
|
16262
|
+
super();
|
|
16263
|
+
this.__registerHost();
|
|
16264
|
+
}
|
|
16265
|
+
componentWillLoad() {
|
|
16266
|
+
this.selected = this.choices !== undefined && this.choices !== null && this.choices.length > 0 ? this.choices.map(() => false) : [];
|
|
16267
|
+
}
|
|
16268
|
+
render() {
|
|
16269
|
+
let className = "xpl-choicelist";
|
|
16270
|
+
if (this.styled)
|
|
16271
|
+
className += " xpl-choicelist--styled";
|
|
16272
|
+
return (h(Host, { class: "xpl-choicelist-container" }, this.heading !== undefined || this.description !== undefined ? h("div", { class: "xpl-choicelist-heading" }, this.heading && h("h3", null, this.heading), this.description && h("p", null, this.description)) : null, this.choices && (h("ul", { class: className }, this.choices.map(({ children, description, label }, i) => {
|
|
16273
|
+
const inner = this.multi ? (h("xpl-checkbox", { description: description, name: this.name, onCheckboxChange: (e) => {
|
|
16274
|
+
const { detail } = e;
|
|
16275
|
+
this.selected = this.selected.map((v, j) => i === j ? detail : v);
|
|
16276
|
+
} }, label)) : (h("xpl-radio", { description: description, name: this.name, onRadioChange: () => {
|
|
16277
|
+
// TypeScript errors since `v` isn't used
|
|
16278
|
+
// @ts-expect-error
|
|
16279
|
+
this.selected = this.selected.map((v, j) => i === j);
|
|
16280
|
+
} }, label));
|
|
16281
|
+
let className = this.styled && this.selected[i] ? "selected" : "";
|
|
16282
|
+
return (h("li", { class: className }, inner, children && h("ul", null, children.map((child) => {
|
|
16283
|
+
const childInner = this.multi ? (h("xpl-checkbox", { description: child.description }, child.label)) : (h("xpl-radio", { description: child.description }, child.label));
|
|
16284
|
+
return h("li", null, childInner);
|
|
16285
|
+
}))));
|
|
16286
|
+
})))));
|
|
16287
|
+
}
|
|
16288
|
+
};
|
|
16289
|
+
|
|
16290
|
+
const XplContentArea$1 = class extends HTMLElement {
|
|
16291
|
+
constructor() {
|
|
16292
|
+
super();
|
|
16293
|
+
this.__registerHost();
|
|
16294
|
+
/**
|
|
16295
|
+
* @property {string} size - The content-area size.
|
|
16296
|
+
*/
|
|
16297
|
+
this.size = "wide";
|
|
16298
|
+
}
|
|
16299
|
+
render() {
|
|
16300
|
+
return (h(Host, null, h("main", { class: `xpl-content-area-wrapper xpl-content-area-wrapper__${this.size}` }, h("div", { class: "xpl-content-area" }, h("slot", null)))));
|
|
16301
|
+
}
|
|
16302
|
+
};
|
|
16303
|
+
|
|
16304
|
+
const XplDivider$1 = class extends HTMLElement {
|
|
16305
|
+
constructor() {
|
|
16306
|
+
super();
|
|
16307
|
+
this.__registerHost();
|
|
16308
|
+
}
|
|
16309
|
+
render() {
|
|
16310
|
+
let className = "xpl-divider";
|
|
16311
|
+
className += ` xpl-divider--${this.tier}`;
|
|
16312
|
+
return (h(Host, { class: className }, h("span", null, h("slot", null))));
|
|
16313
|
+
}
|
|
16314
|
+
};
|
|
16315
|
+
|
|
16316
|
+
const XplGrid$1 = class extends HTMLElement {
|
|
16317
|
+
constructor() {
|
|
16318
|
+
super();
|
|
16319
|
+
this.__registerHost();
|
|
16320
|
+
}
|
|
16321
|
+
componentDidLoad() {
|
|
16322
|
+
const items = Array.from(this.container.querySelectorAll(".xpl-grid-item"));
|
|
16323
|
+
let lgCounter = 0, mdCounter = 0, smCounter = 0, xsCounter = 0;
|
|
16324
|
+
items.forEach(item => {
|
|
16325
|
+
lgCounter += +item.getAttribute("lg") || 6;
|
|
16326
|
+
mdCounter += +item.getAttribute("md") || 6;
|
|
16327
|
+
smCounter += +item.getAttribute("sm") || 6;
|
|
16328
|
+
xsCounter += +item.getAttribute("xs") || 6;
|
|
16329
|
+
if (lgCounter % 6 === 0)
|
|
16330
|
+
item.classList.add("xpl-grid-item-lg-last");
|
|
16331
|
+
if (mdCounter % 6 === 0)
|
|
16332
|
+
item.classList.add("xpl-grid-item-md-last");
|
|
16333
|
+
if (smCounter % 6 === 0)
|
|
16334
|
+
item.classList.add("xpl-grid-item-sm-last");
|
|
16335
|
+
if (xsCounter % 6 === 0)
|
|
16336
|
+
item.classList.add("xpl-grid-item-xs-last");
|
|
16337
|
+
});
|
|
16338
|
+
}
|
|
16339
|
+
render() {
|
|
16340
|
+
return (h(Host, { class: "xpl-grid" }));
|
|
16341
|
+
}
|
|
16342
|
+
get container() { return this; }
|
|
16343
|
+
};
|
|
16344
|
+
|
|
16345
|
+
const XplGridItem$1 = class extends HTMLElement {
|
|
16346
|
+
constructor() {
|
|
16347
|
+
super();
|
|
16348
|
+
this.__registerHost();
|
|
16349
|
+
this.xs = 6;
|
|
16350
|
+
this.sm = 6;
|
|
16351
|
+
this.md = 6;
|
|
16352
|
+
this.lg = 6;
|
|
16353
|
+
}
|
|
16354
|
+
render() {
|
|
16355
|
+
let className = "xpl-grid-item";
|
|
16356
|
+
className += ` xpl-grid-item-xs-${this.xs}`;
|
|
16357
|
+
className += ` xpl-grid-item-sm-${this.sm}`;
|
|
16358
|
+
className += ` xpl-grid-item-md-${this.md}`;
|
|
16359
|
+
className += ` xpl-grid-item-lg-${this.lg}`;
|
|
16360
|
+
return (h(Host, { class: className }, h("slot", null)));
|
|
16361
|
+
}
|
|
16362
|
+
};
|
|
16363
|
+
|
|
16364
|
+
const HOOKS = [
|
|
16365
|
+
"onChange",
|
|
16366
|
+
"onClose",
|
|
16367
|
+
"onDayCreate",
|
|
16368
|
+
"onDestroy",
|
|
16369
|
+
"onKeyDown",
|
|
16370
|
+
"onMonthChange",
|
|
16371
|
+
"onOpen",
|
|
16372
|
+
"onParseConfig",
|
|
16373
|
+
"onReady",
|
|
16374
|
+
"onValueUpdate",
|
|
16375
|
+
"onYearChange",
|
|
16376
|
+
"onPreCalendarPosition",
|
|
16377
|
+
];
|
|
16378
|
+
const defaults = {
|
|
16379
|
+
_disable: [],
|
|
16380
|
+
allowInput: false,
|
|
16381
|
+
allowInvalidPreload: false,
|
|
16382
|
+
altFormat: "F j, Y",
|
|
16383
|
+
altInput: false,
|
|
16384
|
+
altInputClass: "form-control input",
|
|
16385
|
+
animate: typeof window === "object" &&
|
|
16386
|
+
window.navigator.userAgent.indexOf("MSIE") === -1,
|
|
16387
|
+
ariaDateFormat: "F j, Y",
|
|
16388
|
+
autoFillDefaultTime: true,
|
|
16389
|
+
clickOpens: true,
|
|
16390
|
+
closeOnSelect: true,
|
|
16391
|
+
conjunction: ", ",
|
|
16392
|
+
dateFormat: "Y-m-d",
|
|
16393
|
+
defaultHour: 12,
|
|
16394
|
+
defaultMinute: 0,
|
|
16395
|
+
defaultSeconds: 0,
|
|
16396
|
+
disable: [],
|
|
16397
|
+
disableMobile: false,
|
|
16398
|
+
enableSeconds: false,
|
|
16399
|
+
enableTime: false,
|
|
16400
|
+
errorHandler: (err) => typeof console !== "undefined" && console.warn(err),
|
|
16401
|
+
getWeek: (givenDate) => {
|
|
16402
|
+
const date = new Date(givenDate.getTime());
|
|
16403
|
+
date.setHours(0, 0, 0, 0);
|
|
16404
|
+
date.setDate(date.getDate() + 3 - ((date.getDay() + 6) % 7));
|
|
16405
|
+
var week1 = new Date(date.getFullYear(), 0, 4);
|
|
16406
|
+
return (1 +
|
|
16407
|
+
Math.round(((date.getTime() - week1.getTime()) / 86400000 -
|
|
16408
|
+
3 +
|
|
16409
|
+
((week1.getDay() + 6) % 7)) /
|
|
16410
|
+
7));
|
|
16411
|
+
},
|
|
16412
|
+
hourIncrement: 1,
|
|
16413
|
+
ignoredFocusElements: [],
|
|
16414
|
+
inline: false,
|
|
16415
|
+
locale: "default",
|
|
16416
|
+
minuteIncrement: 5,
|
|
16417
|
+
mode: "single",
|
|
16418
|
+
monthSelectorType: "dropdown",
|
|
16419
|
+
nextArrow: "<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 17 17'><g></g><path d='M13.207 8.472l-7.854 7.854-0.707-0.707 7.146-7.146-7.146-7.148 0.707-0.707 7.854 7.854z' /></svg>",
|
|
16420
|
+
noCalendar: false,
|
|
16421
|
+
now: new Date(),
|
|
16422
|
+
onChange: [],
|
|
16423
|
+
onClose: [],
|
|
16424
|
+
onDayCreate: [],
|
|
16425
|
+
onDestroy: [],
|
|
16426
|
+
onKeyDown: [],
|
|
16427
|
+
onMonthChange: [],
|
|
16428
|
+
onOpen: [],
|
|
16429
|
+
onParseConfig: [],
|
|
16430
|
+
onReady: [],
|
|
16431
|
+
onValueUpdate: [],
|
|
16432
|
+
onYearChange: [],
|
|
16433
|
+
onPreCalendarPosition: [],
|
|
16434
|
+
plugins: [],
|
|
16435
|
+
position: "auto",
|
|
16436
|
+
positionElement: undefined,
|
|
16437
|
+
prevArrow: "<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 17 17'><g></g><path d='M5.207 8.471l7.146 7.147-0.707 0.707-7.853-7.854 7.854-7.853 0.707 0.707-7.147 7.146z' /></svg>",
|
|
16438
|
+
shorthandCurrentMonth: false,
|
|
16439
|
+
showMonths: 1,
|
|
16440
|
+
static: false,
|
|
16441
|
+
time_24hr: false,
|
|
16442
|
+
weekNumbers: false,
|
|
16443
|
+
wrap: false,
|
|
16444
|
+
};
|
|
16445
|
+
|
|
16446
|
+
const english = {
|
|
16447
|
+
weekdays: {
|
|
16448
|
+
shorthand: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
|
|
16449
|
+
longhand: [
|
|
16450
|
+
"Sunday",
|
|
16451
|
+
"Monday",
|
|
16452
|
+
"Tuesday",
|
|
16453
|
+
"Wednesday",
|
|
16454
|
+
"Thursday",
|
|
16455
|
+
"Friday",
|
|
16456
|
+
"Saturday",
|
|
16457
|
+
],
|
|
16458
|
+
},
|
|
16459
|
+
months: {
|
|
16460
|
+
shorthand: [
|
|
16461
|
+
"Jan",
|
|
16462
|
+
"Feb",
|
|
16463
|
+
"Mar",
|
|
16464
|
+
"Apr",
|
|
16465
|
+
"May",
|
|
16466
|
+
"Jun",
|
|
16467
|
+
"Jul",
|
|
16468
|
+
"Aug",
|
|
16469
|
+
"Sep",
|
|
16470
|
+
"Oct",
|
|
16471
|
+
"Nov",
|
|
16472
|
+
"Dec",
|
|
16473
|
+
],
|
|
16474
|
+
longhand: [
|
|
16475
|
+
"January",
|
|
16476
|
+
"February",
|
|
16477
|
+
"March",
|
|
16478
|
+
"April",
|
|
16479
|
+
"May",
|
|
16480
|
+
"June",
|
|
16481
|
+
"July",
|
|
16482
|
+
"August",
|
|
16483
|
+
"September",
|
|
16484
|
+
"October",
|
|
16485
|
+
"November",
|
|
16486
|
+
"December",
|
|
16487
|
+
],
|
|
16488
|
+
},
|
|
16489
|
+
daysInMonth: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
|
|
16490
|
+
firstDayOfWeek: 0,
|
|
16491
|
+
ordinal: (nth) => {
|
|
16492
|
+
const s = nth % 100;
|
|
16493
|
+
if (s > 3 && s < 21)
|
|
16494
|
+
return "th";
|
|
16495
|
+
switch (s % 10) {
|
|
16496
|
+
case 1:
|
|
16497
|
+
return "st";
|
|
16498
|
+
case 2:
|
|
16499
|
+
return "nd";
|
|
16500
|
+
case 3:
|
|
16501
|
+
return "rd";
|
|
16502
|
+
default:
|
|
16503
|
+
return "th";
|
|
16504
|
+
}
|
|
16505
|
+
},
|
|
16506
|
+
rangeSeparator: " to ",
|
|
16507
|
+
weekAbbreviation: "Wk",
|
|
16508
|
+
scrollTitle: "Scroll to increment",
|
|
16509
|
+
toggleTitle: "Click to toggle",
|
|
16510
|
+
amPM: ["AM", "PM"],
|
|
16511
|
+
yearAriaLabel: "Year",
|
|
16512
|
+
monthAriaLabel: "Month",
|
|
16513
|
+
hourAriaLabel: "Hour",
|
|
16514
|
+
minuteAriaLabel: "Minute",
|
|
16515
|
+
time_24hr: false,
|
|
16516
|
+
};
|
|
16517
|
+
|
|
16518
|
+
const pad = (number, length = 2) => `000${number}`.slice(length * -1);
|
|
16519
|
+
const int = (bool) => (bool === true ? 1 : 0);
|
|
16520
|
+
function debounce$1(fn, wait) {
|
|
16521
|
+
let t;
|
|
16522
|
+
return function () {
|
|
16523
|
+
clearTimeout(t);
|
|
16524
|
+
t = setTimeout(() => fn.apply(this, arguments), wait);
|
|
16525
|
+
};
|
|
16526
|
+
}
|
|
16527
|
+
const arrayify = (obj) => obj instanceof Array ? obj : [obj];
|
|
16528
|
+
|
|
16529
|
+
function toggleClass(elem, className, bool) {
|
|
16530
|
+
if (bool === true)
|
|
16531
|
+
return elem.classList.add(className);
|
|
16532
|
+
elem.classList.remove(className);
|
|
16533
|
+
}
|
|
16534
|
+
function createElement(tag, className, content) {
|
|
16535
|
+
const e = window.document.createElement(tag);
|
|
16536
|
+
className = className || "";
|
|
16537
|
+
content = content || "";
|
|
16538
|
+
e.className = className;
|
|
16539
|
+
if (content !== undefined)
|
|
16540
|
+
e.textContent = content;
|
|
16541
|
+
return e;
|
|
16542
|
+
}
|
|
16543
|
+
function clearNode(node) {
|
|
16544
|
+
while (node.firstChild)
|
|
16545
|
+
node.removeChild(node.firstChild);
|
|
16546
|
+
}
|
|
16547
|
+
function findParent(node, condition) {
|
|
16548
|
+
if (condition(node))
|
|
16549
|
+
return node;
|
|
16550
|
+
else if (node.parentNode)
|
|
16551
|
+
return findParent(node.parentNode, condition);
|
|
16552
|
+
return undefined;
|
|
16553
|
+
}
|
|
16554
|
+
function createNumberInput(inputClassName, opts) {
|
|
16555
|
+
const wrapper = createElement("div", "numInputWrapper"), numInput = createElement("input", "numInput " + inputClassName), arrowUp = createElement("span", "arrowUp"), arrowDown = createElement("span", "arrowDown");
|
|
16556
|
+
if (navigator.userAgent.indexOf("MSIE 9.0") === -1) {
|
|
16557
|
+
numInput.type = "number";
|
|
16558
|
+
}
|
|
16559
|
+
else {
|
|
16560
|
+
numInput.type = "text";
|
|
16561
|
+
numInput.pattern = "\\d*";
|
|
16562
|
+
}
|
|
16563
|
+
if (opts !== undefined)
|
|
16564
|
+
for (const key in opts)
|
|
16565
|
+
numInput.setAttribute(key, opts[key]);
|
|
16566
|
+
wrapper.appendChild(numInput);
|
|
16567
|
+
wrapper.appendChild(arrowUp);
|
|
16568
|
+
wrapper.appendChild(arrowDown);
|
|
16569
|
+
return wrapper;
|
|
16570
|
+
}
|
|
16571
|
+
function getEventTarget(event) {
|
|
16572
|
+
try {
|
|
16573
|
+
if (typeof event.composedPath === "function") {
|
|
16574
|
+
const path = event.composedPath();
|
|
16575
|
+
return path[0];
|
|
16576
|
+
}
|
|
16577
|
+
return event.target;
|
|
16578
|
+
}
|
|
16579
|
+
catch (error) {
|
|
16580
|
+
return event.target;
|
|
16581
|
+
}
|
|
16582
|
+
}
|
|
16583
|
+
|
|
16584
|
+
const doNothing = () => undefined;
|
|
16585
|
+
const monthToStr = (monthNumber, shorthand, locale) => locale.months[shorthand ? "shorthand" : "longhand"][monthNumber];
|
|
16586
|
+
const revFormat = {
|
|
16587
|
+
D: doNothing,
|
|
16588
|
+
F: function (dateObj, monthName, locale) {
|
|
16589
|
+
dateObj.setMonth(locale.months.longhand.indexOf(monthName));
|
|
16590
|
+
},
|
|
16591
|
+
G: (dateObj, hour) => {
|
|
16592
|
+
dateObj.setHours(parseFloat(hour));
|
|
16593
|
+
},
|
|
16594
|
+
H: (dateObj, hour) => {
|
|
16595
|
+
dateObj.setHours(parseFloat(hour));
|
|
16596
|
+
},
|
|
16597
|
+
J: (dateObj, day) => {
|
|
16598
|
+
dateObj.setDate(parseFloat(day));
|
|
16599
|
+
},
|
|
16600
|
+
K: (dateObj, amPM, locale) => {
|
|
16601
|
+
dateObj.setHours((dateObj.getHours() % 12) +
|
|
16602
|
+
12 * int(new RegExp(locale.amPM[1], "i").test(amPM)));
|
|
16603
|
+
},
|
|
16604
|
+
M: function (dateObj, shortMonth, locale) {
|
|
16605
|
+
dateObj.setMonth(locale.months.shorthand.indexOf(shortMonth));
|
|
16606
|
+
},
|
|
16607
|
+
S: (dateObj, seconds) => {
|
|
16608
|
+
dateObj.setSeconds(parseFloat(seconds));
|
|
16609
|
+
},
|
|
16610
|
+
U: (_, unixSeconds) => new Date(parseFloat(unixSeconds) * 1000),
|
|
16611
|
+
W: function (dateObj, weekNum, locale) {
|
|
16612
|
+
const weekNumber = parseInt(weekNum);
|
|
16613
|
+
const date = new Date(dateObj.getFullYear(), 0, 2 + (weekNumber - 1) * 7, 0, 0, 0, 0);
|
|
16614
|
+
date.setDate(date.getDate() - date.getDay() + locale.firstDayOfWeek);
|
|
16615
|
+
return date;
|
|
16616
|
+
},
|
|
16617
|
+
Y: (dateObj, year) => {
|
|
16618
|
+
dateObj.setFullYear(parseFloat(year));
|
|
16619
|
+
},
|
|
16620
|
+
Z: (_, ISODate) => new Date(ISODate),
|
|
16621
|
+
d: (dateObj, day) => {
|
|
16622
|
+
dateObj.setDate(parseFloat(day));
|
|
16623
|
+
},
|
|
16624
|
+
h: (dateObj, hour) => {
|
|
16625
|
+
dateObj.setHours(parseFloat(hour));
|
|
16626
|
+
},
|
|
16627
|
+
i: (dateObj, minutes) => {
|
|
16628
|
+
dateObj.setMinutes(parseFloat(minutes));
|
|
16629
|
+
},
|
|
16630
|
+
j: (dateObj, day) => {
|
|
16631
|
+
dateObj.setDate(parseFloat(day));
|
|
16632
|
+
},
|
|
16633
|
+
l: doNothing,
|
|
16634
|
+
m: (dateObj, month) => {
|
|
16635
|
+
dateObj.setMonth(parseFloat(month) - 1);
|
|
16636
|
+
},
|
|
16637
|
+
n: (dateObj, month) => {
|
|
16638
|
+
dateObj.setMonth(parseFloat(month) - 1);
|
|
16639
|
+
},
|
|
16640
|
+
s: (dateObj, seconds) => {
|
|
16641
|
+
dateObj.setSeconds(parseFloat(seconds));
|
|
16642
|
+
},
|
|
16643
|
+
u: (_, unixMillSeconds) => new Date(parseFloat(unixMillSeconds)),
|
|
16644
|
+
w: doNothing,
|
|
16645
|
+
y: (dateObj, year) => {
|
|
16646
|
+
dateObj.setFullYear(2000 + parseFloat(year));
|
|
16647
|
+
},
|
|
16648
|
+
};
|
|
16649
|
+
const tokenRegex = {
|
|
16650
|
+
D: "(\\w+)",
|
|
16651
|
+
F: "(\\w+)",
|
|
16652
|
+
G: "(\\d\\d|\\d)",
|
|
16653
|
+
H: "(\\d\\d|\\d)",
|
|
16654
|
+
J: "(\\d\\d|\\d)\\w+",
|
|
16655
|
+
K: "",
|
|
16656
|
+
M: "(\\w+)",
|
|
16657
|
+
S: "(\\d\\d|\\d)",
|
|
16658
|
+
U: "(.+)",
|
|
16659
|
+
W: "(\\d\\d|\\d)",
|
|
16660
|
+
Y: "(\\d{4})",
|
|
16661
|
+
Z: "(.+)",
|
|
16662
|
+
d: "(\\d\\d|\\d)",
|
|
16663
|
+
h: "(\\d\\d|\\d)",
|
|
16664
|
+
i: "(\\d\\d|\\d)",
|
|
16665
|
+
j: "(\\d\\d|\\d)",
|
|
16666
|
+
l: "(\\w+)",
|
|
16667
|
+
m: "(\\d\\d|\\d)",
|
|
16668
|
+
n: "(\\d\\d|\\d)",
|
|
16669
|
+
s: "(\\d\\d|\\d)",
|
|
16670
|
+
u: "(.+)",
|
|
16671
|
+
w: "(\\d\\d|\\d)",
|
|
16672
|
+
y: "(\\d{2})",
|
|
16673
|
+
};
|
|
16674
|
+
const formats = {
|
|
16675
|
+
Z: (date) => date.toISOString(),
|
|
16676
|
+
D: function (date, locale, options) {
|
|
16677
|
+
return locale.weekdays.shorthand[formats.w(date, locale, options)];
|
|
16678
|
+
},
|
|
16679
|
+
F: function (date, locale, options) {
|
|
16680
|
+
return monthToStr(formats.n(date, locale, options) - 1, false, locale);
|
|
16681
|
+
},
|
|
16682
|
+
G: function (date, locale, options) {
|
|
16683
|
+
return pad(formats.h(date, locale, options));
|
|
16684
|
+
},
|
|
16685
|
+
H: (date) => pad(date.getHours()),
|
|
16686
|
+
J: function (date, locale) {
|
|
16687
|
+
return locale.ordinal !== undefined
|
|
16688
|
+
? date.getDate() + locale.ordinal(date.getDate())
|
|
16689
|
+
: date.getDate();
|
|
16690
|
+
},
|
|
16691
|
+
K: (date, locale) => locale.amPM[int(date.getHours() > 11)],
|
|
16692
|
+
M: function (date, locale) {
|
|
16693
|
+
return monthToStr(date.getMonth(), true, locale);
|
|
16694
|
+
},
|
|
16695
|
+
S: (date) => pad(date.getSeconds()),
|
|
16696
|
+
U: (date) => date.getTime() / 1000,
|
|
16697
|
+
W: function (date, _, options) {
|
|
16698
|
+
return options.getWeek(date);
|
|
16699
|
+
},
|
|
16700
|
+
Y: (date) => pad(date.getFullYear(), 4),
|
|
16701
|
+
d: (date) => pad(date.getDate()),
|
|
16702
|
+
h: (date) => (date.getHours() % 12 ? date.getHours() % 12 : 12),
|
|
16703
|
+
i: (date) => pad(date.getMinutes()),
|
|
16704
|
+
j: (date) => date.getDate(),
|
|
16705
|
+
l: function (date, locale) {
|
|
16706
|
+
return locale.weekdays.longhand[date.getDay()];
|
|
16707
|
+
},
|
|
16708
|
+
m: (date) => pad(date.getMonth() + 1),
|
|
16709
|
+
n: (date) => date.getMonth() + 1,
|
|
16710
|
+
s: (date) => date.getSeconds(),
|
|
16711
|
+
u: (date) => date.getTime(),
|
|
16712
|
+
w: (date) => date.getDay(),
|
|
16713
|
+
y: (date) => String(date.getFullYear()).substring(2),
|
|
16714
|
+
};
|
|
16715
|
+
|
|
16716
|
+
const createDateFormatter = ({ config = defaults, l10n = english, isMobile = false, }) => (dateObj, frmt, overrideLocale) => {
|
|
16717
|
+
const locale = overrideLocale || l10n;
|
|
16718
|
+
if (config.formatDate !== undefined && !isMobile) {
|
|
16719
|
+
return config.formatDate(dateObj, frmt, locale);
|
|
16720
|
+
}
|
|
16721
|
+
return frmt
|
|
16722
|
+
.split("")
|
|
16723
|
+
.map((c, i, arr) => formats[c] && arr[i - 1] !== "\\"
|
|
16724
|
+
? formats[c](dateObj, locale, config)
|
|
16725
|
+
: c !== "\\"
|
|
16726
|
+
? c
|
|
16727
|
+
: "")
|
|
16728
|
+
.join("");
|
|
16729
|
+
};
|
|
16730
|
+
const createDateParser = ({ config = defaults, l10n = english }) => (date, givenFormat, timeless, customLocale) => {
|
|
16731
|
+
if (date !== 0 && !date)
|
|
16732
|
+
return undefined;
|
|
16733
|
+
const locale = customLocale || l10n;
|
|
16734
|
+
let parsedDate;
|
|
16735
|
+
const dateOrig = date;
|
|
16736
|
+
if (date instanceof Date)
|
|
16737
|
+
parsedDate = new Date(date.getTime());
|
|
16738
|
+
else if (typeof date !== "string" &&
|
|
16739
|
+
date.toFixed !== undefined)
|
|
16740
|
+
parsedDate = new Date(date);
|
|
16741
|
+
else if (typeof date === "string") {
|
|
16742
|
+
const format = givenFormat || (config || defaults).dateFormat;
|
|
16743
|
+
const datestr = String(date).trim();
|
|
16744
|
+
if (datestr === "today") {
|
|
16745
|
+
parsedDate = new Date();
|
|
16746
|
+
timeless = true;
|
|
16747
|
+
}
|
|
16748
|
+
else if (/Z$/.test(datestr) ||
|
|
16749
|
+
/GMT$/.test(datestr))
|
|
16750
|
+
parsedDate = new Date(date);
|
|
16751
|
+
else if (config && config.parseDate)
|
|
16752
|
+
parsedDate = config.parseDate(date, format);
|
|
16753
|
+
else {
|
|
16754
|
+
parsedDate =
|
|
16755
|
+
!config || !config.noCalendar
|
|
16756
|
+
? new Date(new Date().getFullYear(), 0, 1, 0, 0, 0, 0)
|
|
16757
|
+
: new Date(new Date().setHours(0, 0, 0, 0));
|
|
16758
|
+
let matched, ops = [];
|
|
16759
|
+
for (let i = 0, matchIndex = 0, regexStr = ""; i < format.length; i++) {
|
|
16760
|
+
const token = format[i];
|
|
16761
|
+
const isBackSlash = token === "\\";
|
|
16762
|
+
const escaped = format[i - 1] === "\\" || isBackSlash;
|
|
16763
|
+
if (tokenRegex[token] && !escaped) {
|
|
16764
|
+
regexStr += tokenRegex[token];
|
|
16765
|
+
const match = new RegExp(regexStr).exec(date);
|
|
16766
|
+
if (match && (matched = true)) {
|
|
16767
|
+
ops[token !== "Y" ? "push" : "unshift"]({
|
|
16768
|
+
fn: revFormat[token],
|
|
16769
|
+
val: match[++matchIndex],
|
|
16770
|
+
});
|
|
16771
|
+
}
|
|
16772
|
+
}
|
|
16773
|
+
else if (!isBackSlash)
|
|
16774
|
+
regexStr += ".";
|
|
16775
|
+
ops.forEach(({ fn, val }) => (parsedDate = fn(parsedDate, val, locale) || parsedDate));
|
|
16776
|
+
}
|
|
16777
|
+
parsedDate = matched ? parsedDate : undefined;
|
|
16778
|
+
}
|
|
16779
|
+
}
|
|
16780
|
+
if (!(parsedDate instanceof Date && !isNaN(parsedDate.getTime()))) {
|
|
16781
|
+
config.errorHandler(new Error(`Invalid date provided: ${dateOrig}`));
|
|
16782
|
+
return undefined;
|
|
16783
|
+
}
|
|
16784
|
+
if (timeless === true)
|
|
16785
|
+
parsedDate.setHours(0, 0, 0, 0);
|
|
16786
|
+
return parsedDate;
|
|
16787
|
+
};
|
|
16788
|
+
function compareDates(date1, date2, timeless = true) {
|
|
16789
|
+
if (timeless !== false) {
|
|
16790
|
+
return (new Date(date1.getTime()).setHours(0, 0, 0, 0) -
|
|
16791
|
+
new Date(date2.getTime()).setHours(0, 0, 0, 0));
|
|
16792
|
+
}
|
|
16793
|
+
return date1.getTime() - date2.getTime();
|
|
16794
|
+
}
|
|
16795
|
+
const isBetween = (ts, ts1, ts2) => {
|
|
16796
|
+
return ts > Math.min(ts1, ts2) && ts < Math.max(ts1, ts2);
|
|
16797
|
+
};
|
|
16798
|
+
const duration = {
|
|
16799
|
+
DAY: 86400000,
|
|
16800
|
+
};
|
|
16801
|
+
function getDefaultHours(config) {
|
|
16802
|
+
let hours = config.defaultHour;
|
|
16803
|
+
let minutes = config.defaultMinute;
|
|
16804
|
+
let seconds = config.defaultSeconds;
|
|
16805
|
+
if (config.minDate !== undefined) {
|
|
16806
|
+
const minHour = config.minDate.getHours();
|
|
16807
|
+
const minMinutes = config.minDate.getMinutes();
|
|
16808
|
+
const minSeconds = config.minDate.getSeconds();
|
|
16809
|
+
if (hours < minHour) {
|
|
16810
|
+
hours = minHour;
|
|
16811
|
+
}
|
|
16812
|
+
if (hours === minHour && minutes < minMinutes) {
|
|
16813
|
+
minutes = minMinutes;
|
|
16814
|
+
}
|
|
16815
|
+
if (hours === minHour && minutes === minMinutes && seconds < minSeconds)
|
|
16816
|
+
seconds = config.minDate.getSeconds();
|
|
16817
|
+
}
|
|
16818
|
+
if (config.maxDate !== undefined) {
|
|
16819
|
+
const maxHr = config.maxDate.getHours();
|
|
16820
|
+
const maxMinutes = config.maxDate.getMinutes();
|
|
16821
|
+
hours = Math.min(hours, maxHr);
|
|
16822
|
+
if (hours === maxHr)
|
|
16823
|
+
minutes = Math.min(maxMinutes, minutes);
|
|
16824
|
+
if (hours === maxHr && minutes === maxMinutes)
|
|
16825
|
+
seconds = config.maxDate.getSeconds();
|
|
16826
|
+
}
|
|
16827
|
+
return { hours, minutes, seconds };
|
|
16828
|
+
}
|
|
16829
|
+
|
|
16830
|
+
if (typeof Object.assign !== "function") {
|
|
16831
|
+
Object.assign = function (target, ...args) {
|
|
16832
|
+
if (!target) {
|
|
16833
|
+
throw TypeError("Cannot convert undefined or null to object");
|
|
16834
|
+
}
|
|
16835
|
+
for (const source of args) {
|
|
16836
|
+
if (source) {
|
|
16837
|
+
Object.keys(source).forEach((key) => (target[key] = source[key]));
|
|
16838
|
+
}
|
|
16839
|
+
}
|
|
16840
|
+
return target;
|
|
16841
|
+
};
|
|
16842
|
+
}
|
|
16843
|
+
|
|
16844
|
+
const DEBOUNCED_CHANGE_MS = 300;
|
|
16845
|
+
function FlatpickrInstance(element, instanceConfig) {
|
|
16846
|
+
const self = {
|
|
16847
|
+
config: Object.assign(Object.assign({}, defaults), flatpickr.defaultConfig),
|
|
16848
|
+
l10n: english,
|
|
16849
|
+
};
|
|
16850
|
+
self.parseDate = createDateParser({ config: self.config, l10n: self.l10n });
|
|
16851
|
+
self._handlers = [];
|
|
16852
|
+
self.pluginElements = [];
|
|
16853
|
+
self.loadedPlugins = [];
|
|
16854
|
+
self._bind = bind;
|
|
16855
|
+
self._setHoursFromDate = setHoursFromDate;
|
|
16856
|
+
self._positionCalendar = positionCalendar;
|
|
16857
|
+
self.changeMonth = changeMonth;
|
|
16858
|
+
self.changeYear = changeYear;
|
|
16859
|
+
self.clear = clear;
|
|
16860
|
+
self.close = close;
|
|
16861
|
+
self._createElement = createElement;
|
|
16862
|
+
self.destroy = destroy;
|
|
16863
|
+
self.isEnabled = isEnabled;
|
|
16864
|
+
self.jumpToDate = jumpToDate;
|
|
16865
|
+
self.open = open;
|
|
16866
|
+
self.redraw = redraw;
|
|
16867
|
+
self.set = set;
|
|
16868
|
+
self.setDate = setDate;
|
|
16869
|
+
self.toggle = toggle;
|
|
16870
|
+
function setupHelperFunctions() {
|
|
16871
|
+
self.utils = {
|
|
16872
|
+
getDaysInMonth(month = self.currentMonth, yr = self.currentYear) {
|
|
16873
|
+
if (month === 1 && ((yr % 4 === 0 && yr % 100 !== 0) || yr % 400 === 0))
|
|
16874
|
+
return 29;
|
|
16875
|
+
return self.l10n.daysInMonth[month];
|
|
16876
|
+
},
|
|
16877
|
+
};
|
|
16878
|
+
}
|
|
16879
|
+
function init() {
|
|
16880
|
+
self.element = self.input = element;
|
|
16881
|
+
self.isOpen = false;
|
|
16882
|
+
parseConfig();
|
|
16883
|
+
setupLocale();
|
|
16884
|
+
setupInputs();
|
|
16885
|
+
setupDates();
|
|
16886
|
+
setupHelperFunctions();
|
|
16887
|
+
if (!self.isMobile)
|
|
16888
|
+
build();
|
|
16889
|
+
bindEvents();
|
|
16890
|
+
if (self.selectedDates.length || self.config.noCalendar) {
|
|
16891
|
+
if (self.config.enableTime) {
|
|
16892
|
+
setHoursFromDate(self.config.noCalendar ? self.latestSelectedDateObj : undefined);
|
|
16893
|
+
}
|
|
16894
|
+
updateValue(false);
|
|
16895
|
+
}
|
|
16896
|
+
setCalendarWidth();
|
|
16897
|
+
const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
|
|
16898
|
+
if (!self.isMobile && isSafari) {
|
|
16899
|
+
positionCalendar();
|
|
16900
|
+
}
|
|
16901
|
+
triggerEvent("onReady");
|
|
16902
|
+
}
|
|
16903
|
+
function bindToInstance(fn) {
|
|
16904
|
+
return fn.bind(self);
|
|
16905
|
+
}
|
|
16906
|
+
function setCalendarWidth() {
|
|
16907
|
+
const config = self.config;
|
|
16908
|
+
if (config.weekNumbers === false && config.showMonths === 1) {
|
|
16909
|
+
return;
|
|
16910
|
+
}
|
|
16911
|
+
else if (config.noCalendar !== true) {
|
|
16912
|
+
window.requestAnimationFrame(function () {
|
|
16913
|
+
if (self.calendarContainer !== undefined) {
|
|
16914
|
+
self.calendarContainer.style.visibility = "hidden";
|
|
16915
|
+
self.calendarContainer.style.display = "block";
|
|
16916
|
+
}
|
|
16917
|
+
if (self.daysContainer !== undefined) {
|
|
16918
|
+
const daysWidth = (self.days.offsetWidth + 1) * config.showMonths;
|
|
16919
|
+
self.daysContainer.style.width = daysWidth + "px";
|
|
16920
|
+
self.calendarContainer.style.width =
|
|
16921
|
+
daysWidth +
|
|
16922
|
+
(self.weekWrapper !== undefined
|
|
16923
|
+
? self.weekWrapper.offsetWidth
|
|
16924
|
+
: 0) +
|
|
16925
|
+
"px";
|
|
16926
|
+
self.calendarContainer.style.removeProperty("visibility");
|
|
16927
|
+
self.calendarContainer.style.removeProperty("display");
|
|
16928
|
+
}
|
|
16929
|
+
});
|
|
16930
|
+
}
|
|
16931
|
+
}
|
|
16932
|
+
function updateTime(e) {
|
|
16933
|
+
if (self.selectedDates.length === 0) {
|
|
16934
|
+
const defaultDate = self.config.minDate === undefined ||
|
|
16935
|
+
compareDates(new Date(), self.config.minDate) >= 0
|
|
16936
|
+
? new Date()
|
|
16937
|
+
: new Date(self.config.minDate.getTime());
|
|
16938
|
+
const defaults = getDefaultHours(self.config);
|
|
16939
|
+
defaultDate.setHours(defaults.hours, defaults.minutes, defaults.seconds, defaultDate.getMilliseconds());
|
|
16940
|
+
self.selectedDates = [defaultDate];
|
|
16941
|
+
self.latestSelectedDateObj = defaultDate;
|
|
16942
|
+
}
|
|
16943
|
+
if (e !== undefined && e.type !== "blur") {
|
|
16944
|
+
timeWrapper(e);
|
|
16945
|
+
}
|
|
16946
|
+
const prevValue = self._input.value;
|
|
16947
|
+
setHoursFromInputs();
|
|
16948
|
+
updateValue();
|
|
16949
|
+
if (self._input.value !== prevValue) {
|
|
16950
|
+
self._debouncedChange();
|
|
16951
|
+
}
|
|
16952
|
+
}
|
|
16953
|
+
function ampm2military(hour, amPM) {
|
|
16954
|
+
return (hour % 12) + 12 * int(amPM === self.l10n.amPM[1]);
|
|
16955
|
+
}
|
|
16956
|
+
function military2ampm(hour) {
|
|
16957
|
+
switch (hour % 24) {
|
|
16958
|
+
case 0:
|
|
16959
|
+
case 12:
|
|
16960
|
+
return 12;
|
|
16961
|
+
default:
|
|
16962
|
+
return hour % 12;
|
|
16963
|
+
}
|
|
16964
|
+
}
|
|
16965
|
+
function setHoursFromInputs() {
|
|
16966
|
+
if (self.hourElement === undefined || self.minuteElement === undefined)
|
|
16967
|
+
return;
|
|
16968
|
+
let hours = (parseInt(self.hourElement.value.slice(-2), 10) || 0) % 24, minutes = (parseInt(self.minuteElement.value, 10) || 0) % 60, seconds = self.secondElement !== undefined
|
|
16969
|
+
? (parseInt(self.secondElement.value, 10) || 0) % 60
|
|
16970
|
+
: 0;
|
|
16971
|
+
if (self.amPM !== undefined) {
|
|
16972
|
+
hours = ampm2military(hours, self.amPM.textContent);
|
|
16973
|
+
}
|
|
16974
|
+
const limitMinHours = self.config.minTime !== undefined ||
|
|
16975
|
+
(self.config.minDate &&
|
|
16976
|
+
self.minDateHasTime &&
|
|
16977
|
+
self.latestSelectedDateObj &&
|
|
16978
|
+
compareDates(self.latestSelectedDateObj, self.config.minDate, true) ===
|
|
16979
|
+
0);
|
|
16980
|
+
const limitMaxHours = self.config.maxTime !== undefined ||
|
|
16981
|
+
(self.config.maxDate &&
|
|
16982
|
+
self.maxDateHasTime &&
|
|
16983
|
+
self.latestSelectedDateObj &&
|
|
16984
|
+
compareDates(self.latestSelectedDateObj, self.config.maxDate, true) ===
|
|
16985
|
+
0);
|
|
16986
|
+
if (limitMaxHours) {
|
|
16987
|
+
const maxTime = self.config.maxTime !== undefined
|
|
16988
|
+
? self.config.maxTime
|
|
16989
|
+
: self.config.maxDate;
|
|
16990
|
+
hours = Math.min(hours, maxTime.getHours());
|
|
16991
|
+
if (hours === maxTime.getHours())
|
|
16992
|
+
minutes = Math.min(minutes, maxTime.getMinutes());
|
|
16993
|
+
if (minutes === maxTime.getMinutes())
|
|
16994
|
+
seconds = Math.min(seconds, maxTime.getSeconds());
|
|
16995
|
+
}
|
|
16996
|
+
if (limitMinHours) {
|
|
16997
|
+
const minTime = self.config.minTime !== undefined
|
|
16998
|
+
? self.config.minTime
|
|
16999
|
+
: self.config.minDate;
|
|
17000
|
+
hours = Math.max(hours, minTime.getHours());
|
|
17001
|
+
if (hours === minTime.getHours() && minutes < minTime.getMinutes())
|
|
17002
|
+
minutes = minTime.getMinutes();
|
|
17003
|
+
if (minutes === minTime.getMinutes())
|
|
17004
|
+
seconds = Math.max(seconds, minTime.getSeconds());
|
|
17005
|
+
}
|
|
17006
|
+
setHours(hours, minutes, seconds);
|
|
17007
|
+
}
|
|
17008
|
+
function setHoursFromDate(dateObj) {
|
|
17009
|
+
const date = dateObj || self.latestSelectedDateObj;
|
|
17010
|
+
if (date) {
|
|
17011
|
+
setHours(date.getHours(), date.getMinutes(), date.getSeconds());
|
|
17012
|
+
}
|
|
17013
|
+
}
|
|
17014
|
+
function setHours(hours, minutes, seconds) {
|
|
17015
|
+
if (self.latestSelectedDateObj !== undefined) {
|
|
17016
|
+
self.latestSelectedDateObj.setHours(hours % 24, minutes, seconds || 0, 0);
|
|
17017
|
+
}
|
|
17018
|
+
if (!self.hourElement || !self.minuteElement || self.isMobile)
|
|
17019
|
+
return;
|
|
17020
|
+
self.hourElement.value = pad(!self.config.time_24hr
|
|
17021
|
+
? ((12 + hours) % 12) + 12 * int(hours % 12 === 0)
|
|
17022
|
+
: hours);
|
|
17023
|
+
self.minuteElement.value = pad(minutes);
|
|
17024
|
+
if (self.amPM !== undefined)
|
|
17025
|
+
self.amPM.textContent = self.l10n.amPM[int(hours >= 12)];
|
|
17026
|
+
if (self.secondElement !== undefined)
|
|
17027
|
+
self.secondElement.value = pad(seconds);
|
|
17028
|
+
}
|
|
17029
|
+
function onYearInput(event) {
|
|
17030
|
+
const eventTarget = getEventTarget(event);
|
|
17031
|
+
const year = parseInt(eventTarget.value) + (event.delta || 0);
|
|
17032
|
+
if (year / 1000 > 1 ||
|
|
17033
|
+
(event.key === "Enter" && !/[^\d]/.test(year.toString()))) {
|
|
17034
|
+
changeYear(year);
|
|
17035
|
+
}
|
|
17036
|
+
}
|
|
17037
|
+
function bind(element, event, handler, options) {
|
|
17038
|
+
if (event instanceof Array)
|
|
17039
|
+
return event.forEach((ev) => bind(element, ev, handler, options));
|
|
17040
|
+
if (element instanceof Array)
|
|
17041
|
+
return element.forEach((el) => bind(el, event, handler, options));
|
|
17042
|
+
element.addEventListener(event, handler, options);
|
|
17043
|
+
self._handlers.push({
|
|
17044
|
+
remove: () => element.removeEventListener(event, handler),
|
|
17045
|
+
});
|
|
17046
|
+
}
|
|
17047
|
+
function triggerChange() {
|
|
17048
|
+
triggerEvent("onChange");
|
|
17049
|
+
}
|
|
17050
|
+
function bindEvents() {
|
|
17051
|
+
if (self.config.wrap) {
|
|
17052
|
+
["open", "close", "toggle", "clear"].forEach((evt) => {
|
|
17053
|
+
Array.prototype.forEach.call(self.element.querySelectorAll(`[data-${evt}]`), (el) => bind(el, "click", self[evt]));
|
|
17054
|
+
});
|
|
17055
|
+
}
|
|
17056
|
+
if (self.isMobile) {
|
|
17057
|
+
setupMobile();
|
|
17058
|
+
return;
|
|
17059
|
+
}
|
|
17060
|
+
const debouncedResize = debounce$1(onResize, 50);
|
|
17061
|
+
self._debouncedChange = debounce$1(triggerChange, DEBOUNCED_CHANGE_MS);
|
|
17062
|
+
if (self.daysContainer && !/iPhone|iPad|iPod/i.test(navigator.userAgent))
|
|
17063
|
+
bind(self.daysContainer, "mouseover", (e) => {
|
|
17064
|
+
if (self.config.mode === "range")
|
|
17065
|
+
onMouseOver(getEventTarget(e));
|
|
17066
|
+
});
|
|
17067
|
+
bind(window.document.body, "keydown", onKeyDown);
|
|
17068
|
+
if (!self.config.inline && !self.config.static)
|
|
17069
|
+
bind(window, "resize", debouncedResize);
|
|
17070
|
+
if (window.ontouchstart !== undefined)
|
|
17071
|
+
bind(window.document, "touchstart", documentClick);
|
|
17072
|
+
else
|
|
17073
|
+
bind(window.document, "mousedown", documentClick);
|
|
17074
|
+
bind(window.document, "focus", documentClick, { capture: true });
|
|
17075
|
+
if (self.config.clickOpens === true) {
|
|
17076
|
+
bind(self._input, "focus", self.open);
|
|
17077
|
+
bind(self._input, "click", self.open);
|
|
17078
|
+
}
|
|
17079
|
+
if (self.daysContainer !== undefined) {
|
|
17080
|
+
bind(self.monthNav, "click", onMonthNavClick);
|
|
17081
|
+
bind(self.monthNav, ["keyup", "increment"], onYearInput);
|
|
17082
|
+
bind(self.daysContainer, "click", selectDate);
|
|
17083
|
+
}
|
|
17084
|
+
if (self.timeContainer !== undefined &&
|
|
17085
|
+
self.minuteElement !== undefined &&
|
|
17086
|
+
self.hourElement !== undefined) {
|
|
17087
|
+
const selText = (e) => getEventTarget(e).select();
|
|
17088
|
+
bind(self.timeContainer, ["increment"], updateTime);
|
|
17089
|
+
bind(self.timeContainer, "blur", updateTime, { capture: true });
|
|
17090
|
+
bind(self.timeContainer, "click", timeIncrement);
|
|
17091
|
+
bind([self.hourElement, self.minuteElement], ["focus", "click"], selText);
|
|
17092
|
+
if (self.secondElement !== undefined)
|
|
17093
|
+
bind(self.secondElement, "focus", () => self.secondElement && self.secondElement.select());
|
|
17094
|
+
if (self.amPM !== undefined) {
|
|
17095
|
+
bind(self.amPM, "click", (e) => {
|
|
17096
|
+
updateTime(e);
|
|
17097
|
+
triggerChange();
|
|
17098
|
+
});
|
|
17099
|
+
}
|
|
17100
|
+
}
|
|
17101
|
+
if (self.config.allowInput) {
|
|
17102
|
+
bind(self._input, "blur", onBlur);
|
|
17103
|
+
}
|
|
17104
|
+
}
|
|
17105
|
+
function jumpToDate(jumpDate, triggerChange) {
|
|
17106
|
+
const jumpTo = jumpDate !== undefined
|
|
17107
|
+
? self.parseDate(jumpDate)
|
|
17108
|
+
: self.latestSelectedDateObj ||
|
|
17109
|
+
(self.config.minDate && self.config.minDate > self.now
|
|
17110
|
+
? self.config.minDate
|
|
17111
|
+
: self.config.maxDate && self.config.maxDate < self.now
|
|
17112
|
+
? self.config.maxDate
|
|
17113
|
+
: self.now);
|
|
17114
|
+
const oldYear = self.currentYear;
|
|
17115
|
+
const oldMonth = self.currentMonth;
|
|
17116
|
+
try {
|
|
17117
|
+
if (jumpTo !== undefined) {
|
|
17118
|
+
self.currentYear = jumpTo.getFullYear();
|
|
17119
|
+
self.currentMonth = jumpTo.getMonth();
|
|
17120
|
+
}
|
|
17121
|
+
}
|
|
17122
|
+
catch (e) {
|
|
17123
|
+
e.message = "Invalid date supplied: " + jumpTo;
|
|
17124
|
+
self.config.errorHandler(e);
|
|
17125
|
+
}
|
|
17126
|
+
if (triggerChange && self.currentYear !== oldYear) {
|
|
17127
|
+
triggerEvent("onYearChange");
|
|
17128
|
+
buildMonthSwitch();
|
|
17129
|
+
}
|
|
17130
|
+
if (triggerChange &&
|
|
17131
|
+
(self.currentYear !== oldYear || self.currentMonth !== oldMonth)) {
|
|
17132
|
+
triggerEvent("onMonthChange");
|
|
17133
|
+
}
|
|
17134
|
+
self.redraw();
|
|
17135
|
+
}
|
|
17136
|
+
function timeIncrement(e) {
|
|
17137
|
+
const eventTarget = getEventTarget(e);
|
|
17138
|
+
if (~eventTarget.className.indexOf("arrow"))
|
|
17139
|
+
incrementNumInput(e, eventTarget.classList.contains("arrowUp") ? 1 : -1);
|
|
17140
|
+
}
|
|
17141
|
+
function incrementNumInput(e, delta, inputElem) {
|
|
17142
|
+
const target = e && getEventTarget(e);
|
|
17143
|
+
const input = inputElem ||
|
|
17144
|
+
(target && target.parentNode && target.parentNode.firstChild);
|
|
17145
|
+
const event = createEvent("increment");
|
|
17146
|
+
event.delta = delta;
|
|
17147
|
+
input && input.dispatchEvent(event);
|
|
17148
|
+
}
|
|
17149
|
+
function build() {
|
|
17150
|
+
const fragment = window.document.createDocumentFragment();
|
|
17151
|
+
self.calendarContainer = createElement("div", "flatpickr-calendar");
|
|
17152
|
+
self.calendarContainer.tabIndex = -1;
|
|
17153
|
+
if (!self.config.noCalendar) {
|
|
17154
|
+
fragment.appendChild(buildMonthNav());
|
|
17155
|
+
self.innerContainer = createElement("div", "flatpickr-innerContainer");
|
|
17156
|
+
if (self.config.weekNumbers) {
|
|
17157
|
+
const { weekWrapper, weekNumbers } = buildWeeks();
|
|
17158
|
+
self.innerContainer.appendChild(weekWrapper);
|
|
17159
|
+
self.weekNumbers = weekNumbers;
|
|
17160
|
+
self.weekWrapper = weekWrapper;
|
|
17161
|
+
}
|
|
17162
|
+
self.rContainer = createElement("div", "flatpickr-rContainer");
|
|
17163
|
+
self.rContainer.appendChild(buildWeekdays());
|
|
17164
|
+
if (!self.daysContainer) {
|
|
17165
|
+
self.daysContainer = createElement("div", "flatpickr-days");
|
|
17166
|
+
self.daysContainer.tabIndex = -1;
|
|
17167
|
+
}
|
|
17168
|
+
buildDays();
|
|
17169
|
+
self.rContainer.appendChild(self.daysContainer);
|
|
17170
|
+
self.innerContainer.appendChild(self.rContainer);
|
|
17171
|
+
fragment.appendChild(self.innerContainer);
|
|
17172
|
+
}
|
|
17173
|
+
if (self.config.enableTime) {
|
|
17174
|
+
fragment.appendChild(buildTime());
|
|
17175
|
+
}
|
|
17176
|
+
toggleClass(self.calendarContainer, "rangeMode", self.config.mode === "range");
|
|
17177
|
+
toggleClass(self.calendarContainer, "animate", self.config.animate === true);
|
|
17178
|
+
toggleClass(self.calendarContainer, "multiMonth", self.config.showMonths > 1);
|
|
17179
|
+
self.calendarContainer.appendChild(fragment);
|
|
17180
|
+
const customAppend = self.config.appendTo !== undefined &&
|
|
17181
|
+
self.config.appendTo.nodeType !== undefined;
|
|
17182
|
+
if (self.config.inline || self.config.static) {
|
|
17183
|
+
self.calendarContainer.classList.add(self.config.inline ? "inline" : "static");
|
|
17184
|
+
if (self.config.inline) {
|
|
17185
|
+
if (!customAppend && self.element.parentNode)
|
|
17186
|
+
self.element.parentNode.insertBefore(self.calendarContainer, self._input.nextSibling);
|
|
17187
|
+
else if (self.config.appendTo !== undefined)
|
|
17188
|
+
self.config.appendTo.appendChild(self.calendarContainer);
|
|
17189
|
+
}
|
|
17190
|
+
if (self.config.static) {
|
|
17191
|
+
const wrapper = createElement("div", "flatpickr-wrapper");
|
|
17192
|
+
if (self.element.parentNode)
|
|
17193
|
+
self.element.parentNode.insertBefore(wrapper, self.element);
|
|
17194
|
+
wrapper.appendChild(self.element);
|
|
17195
|
+
if (self.altInput)
|
|
17196
|
+
wrapper.appendChild(self.altInput);
|
|
17197
|
+
wrapper.appendChild(self.calendarContainer);
|
|
17198
|
+
}
|
|
17199
|
+
}
|
|
17200
|
+
if (!self.config.static && !self.config.inline)
|
|
17201
|
+
(self.config.appendTo !== undefined
|
|
17202
|
+
? self.config.appendTo
|
|
17203
|
+
: window.document.body).appendChild(self.calendarContainer);
|
|
17204
|
+
}
|
|
17205
|
+
function createDay(className, date, dayNumber, i) {
|
|
17206
|
+
const dateIsEnabled = isEnabled(date, true), dayElement = createElement("span", "flatpickr-day " + className, date.getDate().toString());
|
|
17207
|
+
dayElement.dateObj = date;
|
|
17208
|
+
dayElement.$i = i;
|
|
17209
|
+
dayElement.setAttribute("aria-label", self.formatDate(date, self.config.ariaDateFormat));
|
|
17210
|
+
if (className.indexOf("hidden") === -1 &&
|
|
17211
|
+
compareDates(date, self.now) === 0) {
|
|
17212
|
+
self.todayDateElem = dayElement;
|
|
17213
|
+
dayElement.classList.add("today");
|
|
17214
|
+
dayElement.setAttribute("aria-current", "date");
|
|
17215
|
+
}
|
|
17216
|
+
if (dateIsEnabled) {
|
|
17217
|
+
dayElement.tabIndex = -1;
|
|
17218
|
+
if (isDateSelected(date)) {
|
|
17219
|
+
dayElement.classList.add("selected");
|
|
17220
|
+
self.selectedDateElem = dayElement;
|
|
17221
|
+
if (self.config.mode === "range") {
|
|
17222
|
+
toggleClass(dayElement, "startRange", self.selectedDates[0] &&
|
|
17223
|
+
compareDates(date, self.selectedDates[0], true) === 0);
|
|
17224
|
+
toggleClass(dayElement, "endRange", self.selectedDates[1] &&
|
|
17225
|
+
compareDates(date, self.selectedDates[1], true) === 0);
|
|
17226
|
+
if (className === "nextMonthDay")
|
|
17227
|
+
dayElement.classList.add("inRange");
|
|
17228
|
+
}
|
|
17229
|
+
}
|
|
17230
|
+
}
|
|
17231
|
+
else {
|
|
17232
|
+
dayElement.classList.add("flatpickr-disabled");
|
|
17233
|
+
}
|
|
17234
|
+
if (self.config.mode === "range") {
|
|
17235
|
+
if (isDateInRange(date) && !isDateSelected(date))
|
|
17236
|
+
dayElement.classList.add("inRange");
|
|
17237
|
+
}
|
|
17238
|
+
if (self.weekNumbers &&
|
|
17239
|
+
self.config.showMonths === 1 &&
|
|
17240
|
+
className !== "prevMonthDay" &&
|
|
17241
|
+
dayNumber % 7 === 1) {
|
|
17242
|
+
self.weekNumbers.insertAdjacentHTML("beforeend", "<span class='flatpickr-day'>" + self.config.getWeek(date) + "</span>");
|
|
17243
|
+
}
|
|
17244
|
+
triggerEvent("onDayCreate", dayElement);
|
|
17245
|
+
return dayElement;
|
|
17246
|
+
}
|
|
17247
|
+
function focusOnDayElem(targetNode) {
|
|
17248
|
+
targetNode.focus();
|
|
17249
|
+
if (self.config.mode === "range")
|
|
17250
|
+
onMouseOver(targetNode);
|
|
17251
|
+
}
|
|
17252
|
+
function getFirstAvailableDay(delta) {
|
|
17253
|
+
const startMonth = delta > 0 ? 0 : self.config.showMonths - 1;
|
|
17254
|
+
const endMonth = delta > 0 ? self.config.showMonths : -1;
|
|
17255
|
+
for (let m = startMonth; m != endMonth; m += delta) {
|
|
17256
|
+
const month = self.daysContainer.children[m];
|
|
17257
|
+
const startIndex = delta > 0 ? 0 : month.children.length - 1;
|
|
17258
|
+
const endIndex = delta > 0 ? month.children.length : -1;
|
|
17259
|
+
for (let i = startIndex; i != endIndex; i += delta) {
|
|
17260
|
+
const c = month.children[i];
|
|
17261
|
+
if (c.className.indexOf("hidden") === -1 && isEnabled(c.dateObj))
|
|
17262
|
+
return c;
|
|
17263
|
+
}
|
|
17264
|
+
}
|
|
17265
|
+
return undefined;
|
|
17266
|
+
}
|
|
17267
|
+
function getNextAvailableDay(current, delta) {
|
|
17268
|
+
const givenMonth = current.className.indexOf("Month") === -1
|
|
17269
|
+
? current.dateObj.getMonth()
|
|
17270
|
+
: self.currentMonth;
|
|
17271
|
+
const endMonth = delta > 0 ? self.config.showMonths : -1;
|
|
17272
|
+
const loopDelta = delta > 0 ? 1 : -1;
|
|
17273
|
+
for (let m = givenMonth - self.currentMonth; m != endMonth; m += loopDelta) {
|
|
17274
|
+
const month = self.daysContainer.children[m];
|
|
17275
|
+
const startIndex = givenMonth - self.currentMonth === m
|
|
17276
|
+
? current.$i + delta
|
|
17277
|
+
: delta < 0
|
|
17278
|
+
? month.children.length - 1
|
|
17279
|
+
: 0;
|
|
17280
|
+
const numMonthDays = month.children.length;
|
|
17281
|
+
for (let i = startIndex; i >= 0 && i < numMonthDays && i != (delta > 0 ? numMonthDays : -1); i += loopDelta) {
|
|
17282
|
+
const c = month.children[i];
|
|
17283
|
+
if (c.className.indexOf("hidden") === -1 &&
|
|
17284
|
+
isEnabled(c.dateObj) &&
|
|
17285
|
+
Math.abs(current.$i - i) >= Math.abs(delta))
|
|
17286
|
+
return focusOnDayElem(c);
|
|
17287
|
+
}
|
|
17288
|
+
}
|
|
17289
|
+
self.changeMonth(loopDelta);
|
|
17290
|
+
focusOnDay(getFirstAvailableDay(loopDelta), 0);
|
|
17291
|
+
return undefined;
|
|
17292
|
+
}
|
|
17293
|
+
function focusOnDay(current, offset) {
|
|
17294
|
+
const dayFocused = isInView(document.activeElement || document.body);
|
|
17295
|
+
const startElem = current !== undefined
|
|
17296
|
+
? current
|
|
17297
|
+
: dayFocused
|
|
17298
|
+
? document.activeElement
|
|
17299
|
+
: self.selectedDateElem !== undefined && isInView(self.selectedDateElem)
|
|
17300
|
+
? self.selectedDateElem
|
|
17301
|
+
: self.todayDateElem !== undefined && isInView(self.todayDateElem)
|
|
17302
|
+
? self.todayDateElem
|
|
17303
|
+
: getFirstAvailableDay(offset > 0 ? 1 : -1);
|
|
17304
|
+
if (startElem === undefined) {
|
|
17305
|
+
self._input.focus();
|
|
17306
|
+
}
|
|
17307
|
+
else if (!dayFocused) {
|
|
17308
|
+
focusOnDayElem(startElem);
|
|
17309
|
+
}
|
|
17310
|
+
else {
|
|
17311
|
+
getNextAvailableDay(startElem, offset);
|
|
17312
|
+
}
|
|
17313
|
+
}
|
|
17314
|
+
function buildMonthDays(year, month) {
|
|
17315
|
+
const firstOfMonth = (new Date(year, month, 1).getDay() - self.l10n.firstDayOfWeek + 7) % 7;
|
|
17316
|
+
const prevMonthDays = self.utils.getDaysInMonth((month - 1 + 12) % 12, year);
|
|
17317
|
+
const daysInMonth = self.utils.getDaysInMonth(month, year), days = window.document.createDocumentFragment(), isMultiMonth = self.config.showMonths > 1, prevMonthDayClass = isMultiMonth ? "prevMonthDay hidden" : "prevMonthDay", nextMonthDayClass = isMultiMonth ? "nextMonthDay hidden" : "nextMonthDay";
|
|
17318
|
+
let dayNumber = prevMonthDays + 1 - firstOfMonth, dayIndex = 0;
|
|
17319
|
+
for (; dayNumber <= prevMonthDays; dayNumber++, dayIndex++) {
|
|
17320
|
+
days.appendChild(createDay(prevMonthDayClass, new Date(year, month - 1, dayNumber), dayNumber, dayIndex));
|
|
17321
|
+
}
|
|
17322
|
+
for (dayNumber = 1; dayNumber <= daysInMonth; dayNumber++, dayIndex++) {
|
|
17323
|
+
days.appendChild(createDay("", new Date(year, month, dayNumber), dayNumber, dayIndex));
|
|
17324
|
+
}
|
|
17325
|
+
for (let dayNum = daysInMonth + 1; dayNum <= 42 - firstOfMonth &&
|
|
17326
|
+
(self.config.showMonths === 1 || dayIndex % 7 !== 0); dayNum++, dayIndex++) {
|
|
17327
|
+
days.appendChild(createDay(nextMonthDayClass, new Date(year, month + 1, dayNum % daysInMonth), dayNum, dayIndex));
|
|
17328
|
+
}
|
|
17329
|
+
const dayContainer = createElement("div", "dayContainer");
|
|
17330
|
+
dayContainer.appendChild(days);
|
|
17331
|
+
return dayContainer;
|
|
17332
|
+
}
|
|
17333
|
+
function buildDays() {
|
|
17334
|
+
if (self.daysContainer === undefined) {
|
|
17335
|
+
return;
|
|
17336
|
+
}
|
|
17337
|
+
clearNode(self.daysContainer);
|
|
17338
|
+
if (self.weekNumbers)
|
|
17339
|
+
clearNode(self.weekNumbers);
|
|
17340
|
+
const frag = document.createDocumentFragment();
|
|
17341
|
+
for (let i = 0; i < self.config.showMonths; i++) {
|
|
17342
|
+
const d = new Date(self.currentYear, self.currentMonth, 1);
|
|
17343
|
+
d.setMonth(self.currentMonth + i);
|
|
17344
|
+
frag.appendChild(buildMonthDays(d.getFullYear(), d.getMonth()));
|
|
17345
|
+
}
|
|
17346
|
+
self.daysContainer.appendChild(frag);
|
|
17347
|
+
self.days = self.daysContainer.firstChild;
|
|
17348
|
+
if (self.config.mode === "range" && self.selectedDates.length === 1) {
|
|
17349
|
+
onMouseOver();
|
|
17350
|
+
}
|
|
17351
|
+
}
|
|
17352
|
+
function buildMonthSwitch() {
|
|
17353
|
+
if (self.config.showMonths > 1 ||
|
|
17354
|
+
self.config.monthSelectorType !== "dropdown")
|
|
17355
|
+
return;
|
|
17356
|
+
const shouldBuildMonth = function (month) {
|
|
17357
|
+
if (self.config.minDate !== undefined &&
|
|
17358
|
+
self.currentYear === self.config.minDate.getFullYear() &&
|
|
17359
|
+
month < self.config.minDate.getMonth()) {
|
|
17360
|
+
return false;
|
|
17361
|
+
}
|
|
17362
|
+
return !(self.config.maxDate !== undefined &&
|
|
17363
|
+
self.currentYear === self.config.maxDate.getFullYear() &&
|
|
17364
|
+
month > self.config.maxDate.getMonth());
|
|
17365
|
+
};
|
|
17366
|
+
self.monthsDropdownContainer.tabIndex = -1;
|
|
17367
|
+
self.monthsDropdownContainer.innerHTML = "";
|
|
17368
|
+
for (let i = 0; i < 12; i++) {
|
|
17369
|
+
if (!shouldBuildMonth(i))
|
|
17370
|
+
continue;
|
|
17371
|
+
const month = createElement("option", "flatpickr-monthDropdown-month");
|
|
17372
|
+
month.value = new Date(self.currentYear, i).getMonth().toString();
|
|
17373
|
+
month.textContent = monthToStr(i, self.config.shorthandCurrentMonth, self.l10n);
|
|
17374
|
+
month.tabIndex = -1;
|
|
17375
|
+
if (self.currentMonth === i) {
|
|
17376
|
+
month.selected = true;
|
|
17377
|
+
}
|
|
17378
|
+
self.monthsDropdownContainer.appendChild(month);
|
|
17379
|
+
}
|
|
17380
|
+
}
|
|
17381
|
+
function buildMonth() {
|
|
17382
|
+
const container = createElement("div", "flatpickr-month");
|
|
17383
|
+
const monthNavFragment = window.document.createDocumentFragment();
|
|
17384
|
+
let monthElement;
|
|
17385
|
+
if (self.config.showMonths > 1 ||
|
|
17386
|
+
self.config.monthSelectorType === "static") {
|
|
17387
|
+
monthElement = createElement("span", "cur-month");
|
|
17388
|
+
}
|
|
17389
|
+
else {
|
|
17390
|
+
self.monthsDropdownContainer = createElement("select", "flatpickr-monthDropdown-months");
|
|
17391
|
+
self.monthsDropdownContainer.setAttribute("aria-label", self.l10n.monthAriaLabel);
|
|
17392
|
+
bind(self.monthsDropdownContainer, "change", (e) => {
|
|
17393
|
+
const target = getEventTarget(e);
|
|
17394
|
+
const selectedMonth = parseInt(target.value, 10);
|
|
17395
|
+
self.changeMonth(selectedMonth - self.currentMonth);
|
|
17396
|
+
triggerEvent("onMonthChange");
|
|
17397
|
+
});
|
|
17398
|
+
buildMonthSwitch();
|
|
17399
|
+
monthElement = self.monthsDropdownContainer;
|
|
17400
|
+
}
|
|
17401
|
+
const yearInput = createNumberInput("cur-year", { tabindex: "-1" });
|
|
17402
|
+
const yearElement = yearInput.getElementsByTagName("input")[0];
|
|
17403
|
+
yearElement.setAttribute("aria-label", self.l10n.yearAriaLabel);
|
|
17404
|
+
if (self.config.minDate) {
|
|
17405
|
+
yearElement.setAttribute("min", self.config.minDate.getFullYear().toString());
|
|
17406
|
+
}
|
|
17407
|
+
if (self.config.maxDate) {
|
|
17408
|
+
yearElement.setAttribute("max", self.config.maxDate.getFullYear().toString());
|
|
17409
|
+
yearElement.disabled =
|
|
17410
|
+
!!self.config.minDate &&
|
|
17411
|
+
self.config.minDate.getFullYear() === self.config.maxDate.getFullYear();
|
|
17412
|
+
}
|
|
17413
|
+
const currentMonth = createElement("div", "flatpickr-current-month");
|
|
17414
|
+
currentMonth.appendChild(monthElement);
|
|
17415
|
+
currentMonth.appendChild(yearInput);
|
|
17416
|
+
monthNavFragment.appendChild(currentMonth);
|
|
17417
|
+
container.appendChild(monthNavFragment);
|
|
17418
|
+
return {
|
|
17419
|
+
container,
|
|
17420
|
+
yearElement,
|
|
17421
|
+
monthElement,
|
|
17422
|
+
};
|
|
17423
|
+
}
|
|
17424
|
+
function buildMonths() {
|
|
17425
|
+
clearNode(self.monthNav);
|
|
17426
|
+
self.monthNav.appendChild(self.prevMonthNav);
|
|
17427
|
+
if (self.config.showMonths) {
|
|
17428
|
+
self.yearElements = [];
|
|
17429
|
+
self.monthElements = [];
|
|
17430
|
+
}
|
|
17431
|
+
for (let m = self.config.showMonths; m--;) {
|
|
17432
|
+
const month = buildMonth();
|
|
17433
|
+
self.yearElements.push(month.yearElement);
|
|
17434
|
+
self.monthElements.push(month.monthElement);
|
|
17435
|
+
self.monthNav.appendChild(month.container);
|
|
17436
|
+
}
|
|
17437
|
+
self.monthNav.appendChild(self.nextMonthNav);
|
|
17438
|
+
}
|
|
17439
|
+
function buildMonthNav() {
|
|
17440
|
+
self.monthNav = createElement("div", "flatpickr-months");
|
|
17441
|
+
self.yearElements = [];
|
|
17442
|
+
self.monthElements = [];
|
|
17443
|
+
self.prevMonthNav = createElement("span", "flatpickr-prev-month");
|
|
17444
|
+
self.prevMonthNav.innerHTML = self.config.prevArrow;
|
|
17445
|
+
self.nextMonthNav = createElement("span", "flatpickr-next-month");
|
|
17446
|
+
self.nextMonthNav.innerHTML = self.config.nextArrow;
|
|
17447
|
+
buildMonths();
|
|
17448
|
+
Object.defineProperty(self, "_hidePrevMonthArrow", {
|
|
17449
|
+
get: () => self.__hidePrevMonthArrow,
|
|
17450
|
+
set(bool) {
|
|
17451
|
+
if (self.__hidePrevMonthArrow !== bool) {
|
|
17452
|
+
toggleClass(self.prevMonthNav, "flatpickr-disabled", bool);
|
|
17453
|
+
self.__hidePrevMonthArrow = bool;
|
|
17454
|
+
}
|
|
17455
|
+
},
|
|
17456
|
+
});
|
|
17457
|
+
Object.defineProperty(self, "_hideNextMonthArrow", {
|
|
17458
|
+
get: () => self.__hideNextMonthArrow,
|
|
17459
|
+
set(bool) {
|
|
17460
|
+
if (self.__hideNextMonthArrow !== bool) {
|
|
17461
|
+
toggleClass(self.nextMonthNav, "flatpickr-disabled", bool);
|
|
17462
|
+
self.__hideNextMonthArrow = bool;
|
|
17463
|
+
}
|
|
17464
|
+
},
|
|
17465
|
+
});
|
|
17466
|
+
self.currentYearElement = self.yearElements[0];
|
|
17467
|
+
updateNavigationCurrentMonth();
|
|
17468
|
+
return self.monthNav;
|
|
17469
|
+
}
|
|
17470
|
+
function buildTime() {
|
|
17471
|
+
self.calendarContainer.classList.add("hasTime");
|
|
17472
|
+
if (self.config.noCalendar)
|
|
17473
|
+
self.calendarContainer.classList.add("noCalendar");
|
|
17474
|
+
const defaults = getDefaultHours(self.config);
|
|
17475
|
+
self.timeContainer = createElement("div", "flatpickr-time");
|
|
17476
|
+
self.timeContainer.tabIndex = -1;
|
|
17477
|
+
const separator = createElement("span", "flatpickr-time-separator", ":");
|
|
17478
|
+
const hourInput = createNumberInput("flatpickr-hour", {
|
|
17479
|
+
"aria-label": self.l10n.hourAriaLabel,
|
|
17480
|
+
});
|
|
17481
|
+
self.hourElement = hourInput.getElementsByTagName("input")[0];
|
|
17482
|
+
const minuteInput = createNumberInput("flatpickr-minute", {
|
|
17483
|
+
"aria-label": self.l10n.minuteAriaLabel,
|
|
17484
|
+
});
|
|
17485
|
+
self.minuteElement = minuteInput.getElementsByTagName("input")[0];
|
|
17486
|
+
self.hourElement.tabIndex = self.minuteElement.tabIndex = -1;
|
|
17487
|
+
self.hourElement.value = pad(self.latestSelectedDateObj
|
|
17488
|
+
? self.latestSelectedDateObj.getHours()
|
|
17489
|
+
: self.config.time_24hr
|
|
17490
|
+
? defaults.hours
|
|
17491
|
+
: military2ampm(defaults.hours));
|
|
17492
|
+
self.minuteElement.value = pad(self.latestSelectedDateObj
|
|
17493
|
+
? self.latestSelectedDateObj.getMinutes()
|
|
17494
|
+
: defaults.minutes);
|
|
17495
|
+
self.hourElement.setAttribute("step", self.config.hourIncrement.toString());
|
|
17496
|
+
self.minuteElement.setAttribute("step", self.config.minuteIncrement.toString());
|
|
17497
|
+
self.hourElement.setAttribute("min", self.config.time_24hr ? "0" : "1");
|
|
17498
|
+
self.hourElement.setAttribute("max", self.config.time_24hr ? "23" : "12");
|
|
17499
|
+
self.hourElement.setAttribute("maxlength", "2");
|
|
17500
|
+
self.minuteElement.setAttribute("min", "0");
|
|
17501
|
+
self.minuteElement.setAttribute("max", "59");
|
|
17502
|
+
self.minuteElement.setAttribute("maxlength", "2");
|
|
17503
|
+
self.timeContainer.appendChild(hourInput);
|
|
17504
|
+
self.timeContainer.appendChild(separator);
|
|
17505
|
+
self.timeContainer.appendChild(minuteInput);
|
|
17506
|
+
if (self.config.time_24hr)
|
|
17507
|
+
self.timeContainer.classList.add("time24hr");
|
|
17508
|
+
if (self.config.enableSeconds) {
|
|
17509
|
+
self.timeContainer.classList.add("hasSeconds");
|
|
17510
|
+
const secondInput = createNumberInput("flatpickr-second");
|
|
17511
|
+
self.secondElement = secondInput.getElementsByTagName("input")[0];
|
|
17512
|
+
self.secondElement.value = pad(self.latestSelectedDateObj
|
|
17513
|
+
? self.latestSelectedDateObj.getSeconds()
|
|
17514
|
+
: defaults.seconds);
|
|
17515
|
+
self.secondElement.setAttribute("step", self.minuteElement.getAttribute("step"));
|
|
17516
|
+
self.secondElement.setAttribute("min", "0");
|
|
17517
|
+
self.secondElement.setAttribute("max", "59");
|
|
17518
|
+
self.secondElement.setAttribute("maxlength", "2");
|
|
17519
|
+
self.timeContainer.appendChild(createElement("span", "flatpickr-time-separator", ":"));
|
|
17520
|
+
self.timeContainer.appendChild(secondInput);
|
|
17521
|
+
}
|
|
17522
|
+
if (!self.config.time_24hr) {
|
|
17523
|
+
self.amPM = createElement("span", "flatpickr-am-pm", self.l10n.amPM[int((self.latestSelectedDateObj
|
|
17524
|
+
? self.hourElement.value
|
|
17525
|
+
: self.config.defaultHour) > 11)]);
|
|
17526
|
+
self.amPM.title = self.l10n.toggleTitle;
|
|
17527
|
+
self.amPM.tabIndex = -1;
|
|
17528
|
+
self.timeContainer.appendChild(self.amPM);
|
|
17529
|
+
}
|
|
17530
|
+
return self.timeContainer;
|
|
17531
|
+
}
|
|
17532
|
+
function buildWeekdays() {
|
|
17533
|
+
if (!self.weekdayContainer)
|
|
17534
|
+
self.weekdayContainer = createElement("div", "flatpickr-weekdays");
|
|
17535
|
+
else
|
|
17536
|
+
clearNode(self.weekdayContainer);
|
|
17537
|
+
for (let i = self.config.showMonths; i--;) {
|
|
17538
|
+
const container = createElement("div", "flatpickr-weekdaycontainer");
|
|
17539
|
+
self.weekdayContainer.appendChild(container);
|
|
17540
|
+
}
|
|
17541
|
+
updateWeekdays();
|
|
17542
|
+
return self.weekdayContainer;
|
|
17543
|
+
}
|
|
17544
|
+
function updateWeekdays() {
|
|
17545
|
+
if (!self.weekdayContainer) {
|
|
17546
|
+
return;
|
|
17547
|
+
}
|
|
17548
|
+
const firstDayOfWeek = self.l10n.firstDayOfWeek;
|
|
17549
|
+
let weekdays = [...self.l10n.weekdays.shorthand];
|
|
17550
|
+
if (firstDayOfWeek > 0 && firstDayOfWeek < weekdays.length) {
|
|
17551
|
+
weekdays = [
|
|
17552
|
+
...weekdays.splice(firstDayOfWeek, weekdays.length),
|
|
17553
|
+
...weekdays.splice(0, firstDayOfWeek),
|
|
17554
|
+
];
|
|
17555
|
+
}
|
|
17556
|
+
for (let i = self.config.showMonths; i--;) {
|
|
17557
|
+
self.weekdayContainer.children[i].innerHTML = `
|
|
17558
|
+
<span class='flatpickr-weekday'>
|
|
17559
|
+
${weekdays.join("</span><span class='flatpickr-weekday'>")}
|
|
17560
|
+
</span>
|
|
17561
|
+
`;
|
|
17562
|
+
}
|
|
17563
|
+
}
|
|
17564
|
+
function buildWeeks() {
|
|
17565
|
+
self.calendarContainer.classList.add("hasWeeks");
|
|
17566
|
+
const weekWrapper = createElement("div", "flatpickr-weekwrapper");
|
|
17567
|
+
weekWrapper.appendChild(createElement("span", "flatpickr-weekday", self.l10n.weekAbbreviation));
|
|
17568
|
+
const weekNumbers = createElement("div", "flatpickr-weeks");
|
|
17569
|
+
weekWrapper.appendChild(weekNumbers);
|
|
17570
|
+
return {
|
|
17571
|
+
weekWrapper,
|
|
17572
|
+
weekNumbers,
|
|
17573
|
+
};
|
|
17574
|
+
}
|
|
17575
|
+
function changeMonth(value, isOffset = true) {
|
|
17576
|
+
const delta = isOffset ? value : value - self.currentMonth;
|
|
17577
|
+
if ((delta < 0 && self._hidePrevMonthArrow === true) ||
|
|
17578
|
+
(delta > 0 && self._hideNextMonthArrow === true))
|
|
17579
|
+
return;
|
|
17580
|
+
self.currentMonth += delta;
|
|
17581
|
+
if (self.currentMonth < 0 || self.currentMonth > 11) {
|
|
17582
|
+
self.currentYear += self.currentMonth > 11 ? 1 : -1;
|
|
17583
|
+
self.currentMonth = (self.currentMonth + 12) % 12;
|
|
17584
|
+
triggerEvent("onYearChange");
|
|
17585
|
+
buildMonthSwitch();
|
|
17586
|
+
}
|
|
17587
|
+
buildDays();
|
|
17588
|
+
triggerEvent("onMonthChange");
|
|
17589
|
+
updateNavigationCurrentMonth();
|
|
17590
|
+
}
|
|
17591
|
+
function clear(triggerChangeEvent = true, toInitial = true) {
|
|
17592
|
+
self.input.value = "";
|
|
17593
|
+
if (self.altInput !== undefined)
|
|
17594
|
+
self.altInput.value = "";
|
|
17595
|
+
if (self.mobileInput !== undefined)
|
|
17596
|
+
self.mobileInput.value = "";
|
|
17597
|
+
self.selectedDates = [];
|
|
17598
|
+
self.latestSelectedDateObj = undefined;
|
|
17599
|
+
if (toInitial === true) {
|
|
17600
|
+
self.currentYear = self._initialDate.getFullYear();
|
|
17601
|
+
self.currentMonth = self._initialDate.getMonth();
|
|
17602
|
+
}
|
|
17603
|
+
if (self.config.enableTime === true) {
|
|
17604
|
+
const { hours, minutes, seconds } = getDefaultHours(self.config);
|
|
17605
|
+
setHours(hours, minutes, seconds);
|
|
17606
|
+
}
|
|
17607
|
+
self.redraw();
|
|
17608
|
+
if (triggerChangeEvent)
|
|
17609
|
+
triggerEvent("onChange");
|
|
17610
|
+
}
|
|
17611
|
+
function close() {
|
|
17612
|
+
self.isOpen = false;
|
|
17613
|
+
if (!self.isMobile) {
|
|
17614
|
+
if (self.calendarContainer !== undefined) {
|
|
17615
|
+
self.calendarContainer.classList.remove("open");
|
|
17616
|
+
}
|
|
17617
|
+
if (self._input !== undefined) {
|
|
17618
|
+
self._input.classList.remove("active");
|
|
17619
|
+
}
|
|
17620
|
+
}
|
|
17621
|
+
triggerEvent("onClose");
|
|
17622
|
+
}
|
|
17623
|
+
function destroy() {
|
|
17624
|
+
if (self.config !== undefined)
|
|
17625
|
+
triggerEvent("onDestroy");
|
|
17626
|
+
for (let i = self._handlers.length; i--;) {
|
|
17627
|
+
self._handlers[i].remove();
|
|
17628
|
+
}
|
|
17629
|
+
self._handlers = [];
|
|
17630
|
+
if (self.mobileInput) {
|
|
17631
|
+
if (self.mobileInput.parentNode)
|
|
17632
|
+
self.mobileInput.parentNode.removeChild(self.mobileInput);
|
|
17633
|
+
self.mobileInput = undefined;
|
|
17634
|
+
}
|
|
17635
|
+
else if (self.calendarContainer && self.calendarContainer.parentNode) {
|
|
17636
|
+
if (self.config.static && self.calendarContainer.parentNode) {
|
|
17637
|
+
const wrapper = self.calendarContainer.parentNode;
|
|
17638
|
+
wrapper.lastChild && wrapper.removeChild(wrapper.lastChild);
|
|
17639
|
+
if (wrapper.parentNode) {
|
|
17640
|
+
while (wrapper.firstChild)
|
|
17641
|
+
wrapper.parentNode.insertBefore(wrapper.firstChild, wrapper);
|
|
17642
|
+
wrapper.parentNode.removeChild(wrapper);
|
|
17643
|
+
}
|
|
17644
|
+
}
|
|
17645
|
+
else
|
|
17646
|
+
self.calendarContainer.parentNode.removeChild(self.calendarContainer);
|
|
17647
|
+
}
|
|
17648
|
+
if (self.altInput) {
|
|
17649
|
+
self.input.type = "text";
|
|
17650
|
+
if (self.altInput.parentNode)
|
|
17651
|
+
self.altInput.parentNode.removeChild(self.altInput);
|
|
17652
|
+
delete self.altInput;
|
|
17653
|
+
}
|
|
17654
|
+
if (self.input) {
|
|
17655
|
+
self.input.type = self.input._type;
|
|
17656
|
+
self.input.classList.remove("flatpickr-input");
|
|
17657
|
+
self.input.removeAttribute("readonly");
|
|
17658
|
+
}
|
|
17659
|
+
[
|
|
17660
|
+
"_showTimeInput",
|
|
17661
|
+
"latestSelectedDateObj",
|
|
17662
|
+
"_hideNextMonthArrow",
|
|
17663
|
+
"_hidePrevMonthArrow",
|
|
17664
|
+
"__hideNextMonthArrow",
|
|
17665
|
+
"__hidePrevMonthArrow",
|
|
17666
|
+
"isMobile",
|
|
17667
|
+
"isOpen",
|
|
17668
|
+
"selectedDateElem",
|
|
17669
|
+
"minDateHasTime",
|
|
17670
|
+
"maxDateHasTime",
|
|
17671
|
+
"days",
|
|
17672
|
+
"daysContainer",
|
|
17673
|
+
"_input",
|
|
17674
|
+
"_positionElement",
|
|
17675
|
+
"innerContainer",
|
|
17676
|
+
"rContainer",
|
|
17677
|
+
"monthNav",
|
|
17678
|
+
"todayDateElem",
|
|
17679
|
+
"calendarContainer",
|
|
17680
|
+
"weekdayContainer",
|
|
17681
|
+
"prevMonthNav",
|
|
17682
|
+
"nextMonthNav",
|
|
17683
|
+
"monthsDropdownContainer",
|
|
17684
|
+
"currentMonthElement",
|
|
17685
|
+
"currentYearElement",
|
|
17686
|
+
"navigationCurrentMonth",
|
|
17687
|
+
"selectedDateElem",
|
|
17688
|
+
"config",
|
|
17689
|
+
].forEach((k) => {
|
|
17690
|
+
try {
|
|
17691
|
+
delete self[k];
|
|
17692
|
+
}
|
|
17693
|
+
catch (_) { }
|
|
17694
|
+
});
|
|
17695
|
+
}
|
|
17696
|
+
function isCalendarElem(elem) {
|
|
17697
|
+
if (self.config.appendTo && self.config.appendTo.contains(elem))
|
|
17698
|
+
return true;
|
|
17699
|
+
return self.calendarContainer.contains(elem);
|
|
17700
|
+
}
|
|
17701
|
+
function documentClick(e) {
|
|
17702
|
+
if (self.isOpen && !self.config.inline) {
|
|
17703
|
+
const eventTarget = getEventTarget(e);
|
|
17704
|
+
const isCalendarElement = isCalendarElem(eventTarget);
|
|
17705
|
+
const isInput = eventTarget === self.input ||
|
|
17706
|
+
eventTarget === self.altInput ||
|
|
17707
|
+
self.element.contains(eventTarget) ||
|
|
17708
|
+
(e.path &&
|
|
17709
|
+
e.path.indexOf &&
|
|
17710
|
+
(~e.path.indexOf(self.input) ||
|
|
17711
|
+
~e.path.indexOf(self.altInput)));
|
|
17712
|
+
const lostFocus = e.type === "blur"
|
|
17713
|
+
? isInput &&
|
|
17714
|
+
e.relatedTarget &&
|
|
17715
|
+
!isCalendarElem(e.relatedTarget)
|
|
17716
|
+
: !isInput &&
|
|
17717
|
+
!isCalendarElement &&
|
|
17718
|
+
!isCalendarElem(e.relatedTarget);
|
|
17719
|
+
const isIgnored = !self.config.ignoredFocusElements.some((elem) => elem.contains(eventTarget));
|
|
17720
|
+
if (lostFocus && isIgnored) {
|
|
17721
|
+
if (self.timeContainer !== undefined &&
|
|
17722
|
+
self.minuteElement !== undefined &&
|
|
17723
|
+
self.hourElement !== undefined &&
|
|
17724
|
+
self.input.value !== "" &&
|
|
17725
|
+
self.input.value !== undefined) {
|
|
17726
|
+
updateTime();
|
|
17727
|
+
}
|
|
17728
|
+
self.close();
|
|
17729
|
+
if (self.config &&
|
|
17730
|
+
self.config.mode === "range" &&
|
|
17731
|
+
self.selectedDates.length === 1) {
|
|
17732
|
+
self.clear(false);
|
|
17733
|
+
self.redraw();
|
|
17734
|
+
}
|
|
17735
|
+
}
|
|
17736
|
+
}
|
|
17737
|
+
}
|
|
17738
|
+
function changeYear(newYear) {
|
|
17739
|
+
if (!newYear ||
|
|
17740
|
+
(self.config.minDate && newYear < self.config.minDate.getFullYear()) ||
|
|
17741
|
+
(self.config.maxDate && newYear > self.config.maxDate.getFullYear()))
|
|
17742
|
+
return;
|
|
17743
|
+
const newYearNum = newYear, isNewYear = self.currentYear !== newYearNum;
|
|
17744
|
+
self.currentYear = newYearNum || self.currentYear;
|
|
17745
|
+
if (self.config.maxDate &&
|
|
17746
|
+
self.currentYear === self.config.maxDate.getFullYear()) {
|
|
17747
|
+
self.currentMonth = Math.min(self.config.maxDate.getMonth(), self.currentMonth);
|
|
17748
|
+
}
|
|
17749
|
+
else if (self.config.minDate &&
|
|
17750
|
+
self.currentYear === self.config.minDate.getFullYear()) {
|
|
17751
|
+
self.currentMonth = Math.max(self.config.minDate.getMonth(), self.currentMonth);
|
|
17752
|
+
}
|
|
17753
|
+
if (isNewYear) {
|
|
17754
|
+
self.redraw();
|
|
17755
|
+
triggerEvent("onYearChange");
|
|
17756
|
+
buildMonthSwitch();
|
|
17757
|
+
}
|
|
17758
|
+
}
|
|
17759
|
+
function isEnabled(date, timeless = true) {
|
|
17760
|
+
var _a;
|
|
17761
|
+
const dateToCheck = self.parseDate(date, undefined, timeless);
|
|
17762
|
+
if ((self.config.minDate &&
|
|
17763
|
+
dateToCheck &&
|
|
17764
|
+
compareDates(dateToCheck, self.config.minDate, timeless !== undefined ? timeless : !self.minDateHasTime) < 0) ||
|
|
17765
|
+
(self.config.maxDate &&
|
|
17766
|
+
dateToCheck &&
|
|
17767
|
+
compareDates(dateToCheck, self.config.maxDate, timeless !== undefined ? timeless : !self.maxDateHasTime) > 0))
|
|
17768
|
+
return false;
|
|
17769
|
+
if (!self.config.enable && self.config.disable.length === 0)
|
|
17770
|
+
return true;
|
|
17771
|
+
if (dateToCheck === undefined)
|
|
17772
|
+
return false;
|
|
17773
|
+
const bool = !!self.config.enable, array = (_a = self.config.enable) !== null && _a !== void 0 ? _a : self.config.disable;
|
|
17774
|
+
for (let i = 0, d; i < array.length; i++) {
|
|
17775
|
+
d = array[i];
|
|
17776
|
+
if (typeof d === "function" &&
|
|
17777
|
+
d(dateToCheck))
|
|
17778
|
+
return bool;
|
|
17779
|
+
else if (d instanceof Date &&
|
|
17780
|
+
dateToCheck !== undefined &&
|
|
17781
|
+
d.getTime() === dateToCheck.getTime())
|
|
17782
|
+
return bool;
|
|
17783
|
+
else if (typeof d === "string") {
|
|
17784
|
+
const parsed = self.parseDate(d, undefined, true);
|
|
17785
|
+
return parsed && parsed.getTime() === dateToCheck.getTime()
|
|
17786
|
+
? bool
|
|
17787
|
+
: !bool;
|
|
17788
|
+
}
|
|
17789
|
+
else if (typeof d === "object" &&
|
|
17790
|
+
dateToCheck !== undefined &&
|
|
17791
|
+
d.from &&
|
|
17792
|
+
d.to &&
|
|
17793
|
+
dateToCheck.getTime() >= d.from.getTime() &&
|
|
17794
|
+
dateToCheck.getTime() <= d.to.getTime())
|
|
17795
|
+
return bool;
|
|
17796
|
+
}
|
|
17797
|
+
return !bool;
|
|
17798
|
+
}
|
|
17799
|
+
function isInView(elem) {
|
|
17800
|
+
if (self.daysContainer !== undefined)
|
|
17801
|
+
return (elem.className.indexOf("hidden") === -1 &&
|
|
17802
|
+
elem.className.indexOf("flatpickr-disabled") === -1 &&
|
|
17803
|
+
self.daysContainer.contains(elem));
|
|
17804
|
+
return false;
|
|
17805
|
+
}
|
|
17806
|
+
function onBlur(e) {
|
|
17807
|
+
const isInput = e.target === self._input;
|
|
17808
|
+
if (isInput &&
|
|
17809
|
+
(self.selectedDates.length > 0 || self._input.value.length > 0) &&
|
|
17810
|
+
!(e.relatedTarget && isCalendarElem(e.relatedTarget))) {
|
|
17811
|
+
self.setDate(self._input.value, true, e.target === self.altInput
|
|
17812
|
+
? self.config.altFormat
|
|
17813
|
+
: self.config.dateFormat);
|
|
17814
|
+
}
|
|
17815
|
+
}
|
|
17816
|
+
function onKeyDown(e) {
|
|
17817
|
+
const eventTarget = getEventTarget(e);
|
|
17818
|
+
const isInput = self.config.wrap
|
|
17819
|
+
? element.contains(eventTarget)
|
|
17820
|
+
: eventTarget === self._input;
|
|
17821
|
+
const allowInput = self.config.allowInput;
|
|
17822
|
+
const allowKeydown = self.isOpen && (!allowInput || !isInput);
|
|
17823
|
+
const allowInlineKeydown = self.config.inline && isInput && !allowInput;
|
|
17824
|
+
if (e.keyCode === 13 && isInput) {
|
|
17825
|
+
if (allowInput) {
|
|
17826
|
+
self.setDate(self._input.value, true, eventTarget === self.altInput
|
|
17827
|
+
? self.config.altFormat
|
|
17828
|
+
: self.config.dateFormat);
|
|
17829
|
+
return eventTarget.blur();
|
|
17830
|
+
}
|
|
17831
|
+
else {
|
|
17832
|
+
self.open();
|
|
17833
|
+
}
|
|
17834
|
+
}
|
|
17835
|
+
else if (isCalendarElem(eventTarget) ||
|
|
17836
|
+
allowKeydown ||
|
|
17837
|
+
allowInlineKeydown) {
|
|
17838
|
+
const isTimeObj = !!self.timeContainer &&
|
|
17839
|
+
self.timeContainer.contains(eventTarget);
|
|
17840
|
+
switch (e.keyCode) {
|
|
17841
|
+
case 13:
|
|
17842
|
+
if (isTimeObj) {
|
|
17843
|
+
e.preventDefault();
|
|
17844
|
+
updateTime();
|
|
17845
|
+
focusAndClose();
|
|
17846
|
+
}
|
|
17847
|
+
else
|
|
17848
|
+
selectDate(e);
|
|
17849
|
+
break;
|
|
17850
|
+
case 27:
|
|
17851
|
+
e.preventDefault();
|
|
17852
|
+
focusAndClose();
|
|
17853
|
+
break;
|
|
17854
|
+
case 8:
|
|
17855
|
+
case 46:
|
|
17856
|
+
if (isInput && !self.config.allowInput) {
|
|
17857
|
+
e.preventDefault();
|
|
17858
|
+
self.clear();
|
|
17859
|
+
}
|
|
17860
|
+
break;
|
|
17861
|
+
case 37:
|
|
17862
|
+
case 39:
|
|
17863
|
+
if (!isTimeObj && !isInput) {
|
|
17864
|
+
e.preventDefault();
|
|
17865
|
+
if (self.daysContainer !== undefined &&
|
|
17866
|
+
(allowInput === false ||
|
|
17867
|
+
(document.activeElement && isInView(document.activeElement)))) {
|
|
17868
|
+
const delta = e.keyCode === 39 ? 1 : -1;
|
|
17869
|
+
if (!e.ctrlKey)
|
|
17870
|
+
focusOnDay(undefined, delta);
|
|
17871
|
+
else {
|
|
17872
|
+
e.stopPropagation();
|
|
17873
|
+
changeMonth(delta);
|
|
17874
|
+
focusOnDay(getFirstAvailableDay(1), 0);
|
|
17875
|
+
}
|
|
17876
|
+
}
|
|
17877
|
+
}
|
|
17878
|
+
else if (self.hourElement)
|
|
17879
|
+
self.hourElement.focus();
|
|
17880
|
+
break;
|
|
17881
|
+
case 38:
|
|
17882
|
+
case 40:
|
|
17883
|
+
e.preventDefault();
|
|
17884
|
+
const delta = e.keyCode === 40 ? 1 : -1;
|
|
17885
|
+
if ((self.daysContainer &&
|
|
17886
|
+
eventTarget.$i !== undefined) ||
|
|
17887
|
+
eventTarget === self.input ||
|
|
17888
|
+
eventTarget === self.altInput) {
|
|
17889
|
+
if (e.ctrlKey) {
|
|
17890
|
+
e.stopPropagation();
|
|
17891
|
+
changeYear(self.currentYear - delta);
|
|
17892
|
+
focusOnDay(getFirstAvailableDay(1), 0);
|
|
17893
|
+
}
|
|
17894
|
+
else if (!isTimeObj)
|
|
17895
|
+
focusOnDay(undefined, delta * 7);
|
|
17896
|
+
}
|
|
17897
|
+
else if (eventTarget === self.currentYearElement) {
|
|
17898
|
+
changeYear(self.currentYear - delta);
|
|
17899
|
+
}
|
|
17900
|
+
else if (self.config.enableTime) {
|
|
17901
|
+
if (!isTimeObj && self.hourElement)
|
|
17902
|
+
self.hourElement.focus();
|
|
17903
|
+
updateTime(e);
|
|
17904
|
+
self._debouncedChange();
|
|
17905
|
+
}
|
|
17906
|
+
break;
|
|
17907
|
+
case 9:
|
|
17908
|
+
if (isTimeObj) {
|
|
17909
|
+
const elems = [
|
|
17910
|
+
self.hourElement,
|
|
17911
|
+
self.minuteElement,
|
|
17912
|
+
self.secondElement,
|
|
17913
|
+
self.amPM,
|
|
17914
|
+
]
|
|
17915
|
+
.concat(self.pluginElements)
|
|
17916
|
+
.filter((x) => x);
|
|
17917
|
+
const i = elems.indexOf(eventTarget);
|
|
17918
|
+
if (i !== -1) {
|
|
17919
|
+
const target = elems[i + (e.shiftKey ? -1 : 1)];
|
|
17920
|
+
e.preventDefault();
|
|
17921
|
+
(target || self._input).focus();
|
|
17922
|
+
}
|
|
17923
|
+
}
|
|
17924
|
+
else if (!self.config.noCalendar &&
|
|
17925
|
+
self.daysContainer &&
|
|
17926
|
+
self.daysContainer.contains(eventTarget) &&
|
|
17927
|
+
e.shiftKey) {
|
|
17928
|
+
e.preventDefault();
|
|
17929
|
+
self._input.focus();
|
|
17930
|
+
}
|
|
17931
|
+
break;
|
|
17932
|
+
}
|
|
17933
|
+
}
|
|
17934
|
+
if (self.amPM !== undefined && eventTarget === self.amPM) {
|
|
17935
|
+
switch (e.key) {
|
|
17936
|
+
case self.l10n.amPM[0].charAt(0):
|
|
17937
|
+
case self.l10n.amPM[0].charAt(0).toLowerCase():
|
|
17938
|
+
self.amPM.textContent = self.l10n.amPM[0];
|
|
17939
|
+
setHoursFromInputs();
|
|
17940
|
+
updateValue();
|
|
17941
|
+
break;
|
|
17942
|
+
case self.l10n.amPM[1].charAt(0):
|
|
17943
|
+
case self.l10n.amPM[1].charAt(0).toLowerCase():
|
|
17944
|
+
self.amPM.textContent = self.l10n.amPM[1];
|
|
17945
|
+
setHoursFromInputs();
|
|
17946
|
+
updateValue();
|
|
17947
|
+
break;
|
|
17948
|
+
}
|
|
17949
|
+
}
|
|
17950
|
+
if (isInput || isCalendarElem(eventTarget)) {
|
|
17951
|
+
triggerEvent("onKeyDown", e);
|
|
17952
|
+
}
|
|
17953
|
+
}
|
|
17954
|
+
function onMouseOver(elem) {
|
|
17955
|
+
if (self.selectedDates.length !== 1 ||
|
|
17956
|
+
(elem &&
|
|
17957
|
+
(!elem.classList.contains("flatpickr-day") ||
|
|
17958
|
+
elem.classList.contains("flatpickr-disabled"))))
|
|
17959
|
+
return;
|
|
17960
|
+
const hoverDate = elem
|
|
17961
|
+
? elem.dateObj.getTime()
|
|
17962
|
+
: self.days.firstElementChild.dateObj.getTime(), initialDate = self.parseDate(self.selectedDates[0], undefined, true).getTime(), rangeStartDate = Math.min(hoverDate, self.selectedDates[0].getTime()), rangeEndDate = Math.max(hoverDate, self.selectedDates[0].getTime());
|
|
17963
|
+
let containsDisabled = false;
|
|
17964
|
+
let minRange = 0, maxRange = 0;
|
|
17965
|
+
for (let t = rangeStartDate; t < rangeEndDate; t += duration.DAY) {
|
|
17966
|
+
if (!isEnabled(new Date(t), true)) {
|
|
17967
|
+
containsDisabled =
|
|
17968
|
+
containsDisabled || (t > rangeStartDate && t < rangeEndDate);
|
|
17969
|
+
if (t < initialDate && (!minRange || t > minRange))
|
|
17970
|
+
minRange = t;
|
|
17971
|
+
else if (t > initialDate && (!maxRange || t < maxRange))
|
|
17972
|
+
maxRange = t;
|
|
17973
|
+
}
|
|
17974
|
+
}
|
|
17975
|
+
for (let m = 0; m < self.config.showMonths; m++) {
|
|
17976
|
+
const month = self.daysContainer.children[m];
|
|
17977
|
+
for (let i = 0, l = month.children.length; i < l; i++) {
|
|
17978
|
+
const dayElem = month.children[i], date = dayElem.dateObj;
|
|
17979
|
+
const timestamp = date.getTime();
|
|
17980
|
+
const outOfRange = (minRange > 0 && timestamp < minRange) ||
|
|
17981
|
+
(maxRange > 0 && timestamp > maxRange);
|
|
17982
|
+
if (outOfRange) {
|
|
17983
|
+
dayElem.classList.add("notAllowed");
|
|
17984
|
+
["inRange", "startRange", "endRange"].forEach((c) => {
|
|
17985
|
+
dayElem.classList.remove(c);
|
|
17986
|
+
});
|
|
17987
|
+
continue;
|
|
17988
|
+
}
|
|
17989
|
+
else if (containsDisabled && !outOfRange)
|
|
17990
|
+
continue;
|
|
17991
|
+
["startRange", "inRange", "endRange", "notAllowed"].forEach((c) => {
|
|
17992
|
+
dayElem.classList.remove(c);
|
|
17993
|
+
});
|
|
17994
|
+
if (elem !== undefined) {
|
|
17995
|
+
elem.classList.add(hoverDate <= self.selectedDates[0].getTime()
|
|
17996
|
+
? "startRange"
|
|
17997
|
+
: "endRange");
|
|
17998
|
+
if (initialDate < hoverDate && timestamp === initialDate)
|
|
17999
|
+
dayElem.classList.add("startRange");
|
|
18000
|
+
else if (initialDate > hoverDate && timestamp === initialDate)
|
|
18001
|
+
dayElem.classList.add("endRange");
|
|
18002
|
+
if (timestamp >= minRange &&
|
|
18003
|
+
(maxRange === 0 || timestamp <= maxRange) &&
|
|
18004
|
+
isBetween(timestamp, initialDate, hoverDate))
|
|
18005
|
+
dayElem.classList.add("inRange");
|
|
18006
|
+
}
|
|
18007
|
+
}
|
|
18008
|
+
}
|
|
18009
|
+
}
|
|
18010
|
+
function onResize() {
|
|
18011
|
+
if (self.isOpen && !self.config.static && !self.config.inline)
|
|
18012
|
+
positionCalendar();
|
|
18013
|
+
}
|
|
18014
|
+
function open(e, positionElement = self._positionElement) {
|
|
18015
|
+
if (self.isMobile === true) {
|
|
18016
|
+
if (e) {
|
|
18017
|
+
e.preventDefault();
|
|
18018
|
+
const eventTarget = getEventTarget(e);
|
|
18019
|
+
if (eventTarget) {
|
|
18020
|
+
eventTarget.blur();
|
|
18021
|
+
}
|
|
18022
|
+
}
|
|
18023
|
+
if (self.mobileInput !== undefined) {
|
|
18024
|
+
self.mobileInput.focus();
|
|
18025
|
+
self.mobileInput.click();
|
|
18026
|
+
}
|
|
18027
|
+
triggerEvent("onOpen");
|
|
18028
|
+
return;
|
|
18029
|
+
}
|
|
18030
|
+
else if (self._input.disabled || self.config.inline) {
|
|
18031
|
+
return;
|
|
18032
|
+
}
|
|
18033
|
+
const wasOpen = self.isOpen;
|
|
18034
|
+
self.isOpen = true;
|
|
18035
|
+
if (!wasOpen) {
|
|
18036
|
+
self.calendarContainer.classList.add("open");
|
|
18037
|
+
self._input.classList.add("active");
|
|
18038
|
+
triggerEvent("onOpen");
|
|
18039
|
+
positionCalendar(positionElement);
|
|
18040
|
+
}
|
|
18041
|
+
if (self.config.enableTime === true && self.config.noCalendar === true) {
|
|
18042
|
+
if (self.config.allowInput === false &&
|
|
18043
|
+
(e === undefined ||
|
|
18044
|
+
!self.timeContainer.contains(e.relatedTarget))) {
|
|
18045
|
+
setTimeout(() => self.hourElement.select(), 50);
|
|
18046
|
+
}
|
|
18047
|
+
}
|
|
18048
|
+
}
|
|
18049
|
+
function minMaxDateSetter(type) {
|
|
18050
|
+
return (date) => {
|
|
18051
|
+
const dateObj = (self.config[`_${type}Date`] = self.parseDate(date, self.config.dateFormat));
|
|
18052
|
+
const inverseDateObj = self.config[`_${type === "min" ? "max" : "min"}Date`];
|
|
18053
|
+
if (dateObj !== undefined) {
|
|
18054
|
+
self[type === "min" ? "minDateHasTime" : "maxDateHasTime"] =
|
|
18055
|
+
dateObj.getHours() > 0 ||
|
|
18056
|
+
dateObj.getMinutes() > 0 ||
|
|
18057
|
+
dateObj.getSeconds() > 0;
|
|
18058
|
+
}
|
|
18059
|
+
if (self.selectedDates) {
|
|
18060
|
+
self.selectedDates = self.selectedDates.filter((d) => isEnabled(d));
|
|
18061
|
+
if (!self.selectedDates.length && type === "min")
|
|
18062
|
+
setHoursFromDate(dateObj);
|
|
18063
|
+
updateValue();
|
|
18064
|
+
}
|
|
18065
|
+
if (self.daysContainer) {
|
|
18066
|
+
redraw();
|
|
18067
|
+
if (dateObj !== undefined)
|
|
18068
|
+
self.currentYearElement[type] = dateObj.getFullYear().toString();
|
|
18069
|
+
else
|
|
18070
|
+
self.currentYearElement.removeAttribute(type);
|
|
18071
|
+
self.currentYearElement.disabled =
|
|
18072
|
+
!!inverseDateObj &&
|
|
18073
|
+
dateObj !== undefined &&
|
|
18074
|
+
inverseDateObj.getFullYear() === dateObj.getFullYear();
|
|
18075
|
+
}
|
|
18076
|
+
};
|
|
18077
|
+
}
|
|
18078
|
+
function parseConfig() {
|
|
18079
|
+
const boolOpts = [
|
|
18080
|
+
"wrap",
|
|
18081
|
+
"weekNumbers",
|
|
18082
|
+
"allowInput",
|
|
18083
|
+
"allowInvalidPreload",
|
|
18084
|
+
"clickOpens",
|
|
18085
|
+
"time_24hr",
|
|
18086
|
+
"enableTime",
|
|
18087
|
+
"noCalendar",
|
|
18088
|
+
"altInput",
|
|
18089
|
+
"shorthandCurrentMonth",
|
|
18090
|
+
"inline",
|
|
18091
|
+
"static",
|
|
18092
|
+
"enableSeconds",
|
|
18093
|
+
"disableMobile",
|
|
18094
|
+
];
|
|
18095
|
+
const userConfig = Object.assign(Object.assign({}, JSON.parse(JSON.stringify(element.dataset || {}))), instanceConfig);
|
|
18096
|
+
const formats = {};
|
|
18097
|
+
self.config.parseDate = userConfig.parseDate;
|
|
18098
|
+
self.config.formatDate = userConfig.formatDate;
|
|
18099
|
+
Object.defineProperty(self.config, "enable", {
|
|
18100
|
+
get: () => self.config._enable,
|
|
18101
|
+
set: (dates) => {
|
|
18102
|
+
self.config._enable = parseDateRules(dates);
|
|
18103
|
+
},
|
|
18104
|
+
});
|
|
18105
|
+
Object.defineProperty(self.config, "disable", {
|
|
18106
|
+
get: () => self.config._disable,
|
|
18107
|
+
set: (dates) => {
|
|
18108
|
+
self.config._disable = parseDateRules(dates);
|
|
18109
|
+
},
|
|
18110
|
+
});
|
|
18111
|
+
const timeMode = userConfig.mode === "time";
|
|
18112
|
+
if (!userConfig.dateFormat && (userConfig.enableTime || timeMode)) {
|
|
18113
|
+
const defaultDateFormat = flatpickr.defaultConfig.dateFormat || defaults.dateFormat;
|
|
18114
|
+
formats.dateFormat =
|
|
18115
|
+
userConfig.noCalendar || timeMode
|
|
18116
|
+
? "H:i" + (userConfig.enableSeconds ? ":S" : "")
|
|
18117
|
+
: defaultDateFormat + " H:i" + (userConfig.enableSeconds ? ":S" : "");
|
|
18118
|
+
}
|
|
18119
|
+
if (userConfig.altInput &&
|
|
18120
|
+
(userConfig.enableTime || timeMode) &&
|
|
18121
|
+
!userConfig.altFormat) {
|
|
18122
|
+
const defaultAltFormat = flatpickr.defaultConfig.altFormat || defaults.altFormat;
|
|
18123
|
+
formats.altFormat =
|
|
18124
|
+
userConfig.noCalendar || timeMode
|
|
18125
|
+
? "h:i" + (userConfig.enableSeconds ? ":S K" : " K")
|
|
18126
|
+
: defaultAltFormat + ` h:i${userConfig.enableSeconds ? ":S" : ""} K`;
|
|
18127
|
+
}
|
|
18128
|
+
Object.defineProperty(self.config, "minDate", {
|
|
18129
|
+
get: () => self.config._minDate,
|
|
18130
|
+
set: minMaxDateSetter("min"),
|
|
18131
|
+
});
|
|
18132
|
+
Object.defineProperty(self.config, "maxDate", {
|
|
18133
|
+
get: () => self.config._maxDate,
|
|
18134
|
+
set: minMaxDateSetter("max"),
|
|
18135
|
+
});
|
|
18136
|
+
const minMaxTimeSetter = (type) => (val) => {
|
|
18137
|
+
self.config[type === "min" ? "_minTime" : "_maxTime"] = self.parseDate(val, "H:i:S");
|
|
18138
|
+
};
|
|
18139
|
+
Object.defineProperty(self.config, "minTime", {
|
|
18140
|
+
get: () => self.config._minTime,
|
|
18141
|
+
set: minMaxTimeSetter("min"),
|
|
18142
|
+
});
|
|
18143
|
+
Object.defineProperty(self.config, "maxTime", {
|
|
18144
|
+
get: () => self.config._maxTime,
|
|
18145
|
+
set: minMaxTimeSetter("max"),
|
|
18146
|
+
});
|
|
18147
|
+
if (userConfig.mode === "time") {
|
|
18148
|
+
self.config.noCalendar = true;
|
|
18149
|
+
self.config.enableTime = true;
|
|
18150
|
+
}
|
|
18151
|
+
Object.assign(self.config, formats, userConfig);
|
|
18152
|
+
for (let i = 0; i < boolOpts.length; i++)
|
|
18153
|
+
self.config[boolOpts[i]] =
|
|
18154
|
+
self.config[boolOpts[i]] === true ||
|
|
18155
|
+
self.config[boolOpts[i]] === "true";
|
|
18156
|
+
HOOKS.filter((hook) => self.config[hook] !== undefined).forEach((hook) => {
|
|
18157
|
+
self.config[hook] = arrayify(self.config[hook] || []).map(bindToInstance);
|
|
18158
|
+
});
|
|
18159
|
+
self.isMobile =
|
|
18160
|
+
!self.config.disableMobile &&
|
|
18161
|
+
!self.config.inline &&
|
|
18162
|
+
self.config.mode === "single" &&
|
|
18163
|
+
!self.config.disable.length &&
|
|
18164
|
+
!self.config.enable &&
|
|
18165
|
+
!self.config.weekNumbers &&
|
|
18166
|
+
/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
|
|
18167
|
+
for (let i = 0; i < self.config.plugins.length; i++) {
|
|
18168
|
+
const pluginConf = self.config.plugins[i](self) || {};
|
|
18169
|
+
for (const key in pluginConf) {
|
|
18170
|
+
if (HOOKS.indexOf(key) > -1) {
|
|
18171
|
+
self.config[key] = arrayify(pluginConf[key])
|
|
18172
|
+
.map(bindToInstance)
|
|
18173
|
+
.concat(self.config[key]);
|
|
18174
|
+
}
|
|
18175
|
+
else if (typeof userConfig[key] === "undefined")
|
|
18176
|
+
self.config[key] = pluginConf[key];
|
|
18177
|
+
}
|
|
18178
|
+
}
|
|
18179
|
+
if (!userConfig.altInputClass) {
|
|
18180
|
+
self.config.altInputClass =
|
|
18181
|
+
getInputElem().className + " " + self.config.altInputClass;
|
|
18182
|
+
}
|
|
18183
|
+
triggerEvent("onParseConfig");
|
|
18184
|
+
}
|
|
18185
|
+
function getInputElem() {
|
|
18186
|
+
return self.config.wrap
|
|
18187
|
+
? element.querySelector("[data-input]")
|
|
18188
|
+
: element;
|
|
18189
|
+
}
|
|
18190
|
+
function setupLocale() {
|
|
18191
|
+
if (typeof self.config.locale !== "object" &&
|
|
18192
|
+
typeof flatpickr.l10ns[self.config.locale] === "undefined")
|
|
18193
|
+
self.config.errorHandler(new Error(`flatpickr: invalid locale ${self.config.locale}`));
|
|
18194
|
+
self.l10n = Object.assign(Object.assign({}, flatpickr.l10ns.default), (typeof self.config.locale === "object"
|
|
18195
|
+
? self.config.locale
|
|
18196
|
+
: self.config.locale !== "default"
|
|
18197
|
+
? flatpickr.l10ns[self.config.locale]
|
|
18198
|
+
: undefined));
|
|
18199
|
+
tokenRegex.K = `(${self.l10n.amPM[0]}|${self.l10n.amPM[1]}|${self.l10n.amPM[0].toLowerCase()}|${self.l10n.amPM[1].toLowerCase()})`;
|
|
18200
|
+
const userConfig = Object.assign(Object.assign({}, instanceConfig), JSON.parse(JSON.stringify(element.dataset || {})));
|
|
18201
|
+
if (userConfig.time_24hr === undefined &&
|
|
18202
|
+
flatpickr.defaultConfig.time_24hr === undefined) {
|
|
18203
|
+
self.config.time_24hr = self.l10n.time_24hr;
|
|
18204
|
+
}
|
|
18205
|
+
self.formatDate = createDateFormatter(self);
|
|
18206
|
+
self.parseDate = createDateParser({ config: self.config, l10n: self.l10n });
|
|
18207
|
+
}
|
|
18208
|
+
function positionCalendar(customPositionElement) {
|
|
18209
|
+
if (typeof self.config.position === "function") {
|
|
18210
|
+
return void self.config.position(self, customPositionElement);
|
|
18211
|
+
}
|
|
18212
|
+
if (self.calendarContainer === undefined)
|
|
18213
|
+
return;
|
|
18214
|
+
triggerEvent("onPreCalendarPosition");
|
|
18215
|
+
const positionElement = customPositionElement || self._positionElement;
|
|
18216
|
+
const calendarHeight = Array.prototype.reduce.call(self.calendarContainer.children, ((acc, child) => acc + child.offsetHeight), 0), calendarWidth = self.calendarContainer.offsetWidth, configPos = self.config.position.split(" "), configPosVertical = configPos[0], configPosHorizontal = configPos.length > 1 ? configPos[1] : null, inputBounds = positionElement.getBoundingClientRect(), distanceFromBottom = window.innerHeight - inputBounds.bottom, showOnTop = configPosVertical === "above" ||
|
|
18217
|
+
(configPosVertical !== "below" &&
|
|
18218
|
+
distanceFromBottom < calendarHeight &&
|
|
18219
|
+
inputBounds.top > calendarHeight);
|
|
18220
|
+
const top = window.pageYOffset +
|
|
18221
|
+
inputBounds.top +
|
|
18222
|
+
(!showOnTop ? positionElement.offsetHeight + 2 : -calendarHeight - 2);
|
|
18223
|
+
toggleClass(self.calendarContainer, "arrowTop", !showOnTop);
|
|
18224
|
+
toggleClass(self.calendarContainer, "arrowBottom", showOnTop);
|
|
18225
|
+
if (self.config.inline)
|
|
18226
|
+
return;
|
|
18227
|
+
let left = window.pageXOffset + inputBounds.left;
|
|
18228
|
+
let isCenter = false;
|
|
18229
|
+
let isRight = false;
|
|
18230
|
+
if (configPosHorizontal === "center") {
|
|
18231
|
+
left -= (calendarWidth - inputBounds.width) / 2;
|
|
18232
|
+
isCenter = true;
|
|
18233
|
+
}
|
|
18234
|
+
else if (configPosHorizontal === "right") {
|
|
18235
|
+
left -= calendarWidth - inputBounds.width;
|
|
18236
|
+
isRight = true;
|
|
18237
|
+
}
|
|
18238
|
+
toggleClass(self.calendarContainer, "arrowLeft", !isCenter && !isRight);
|
|
18239
|
+
toggleClass(self.calendarContainer, "arrowCenter", isCenter);
|
|
18240
|
+
toggleClass(self.calendarContainer, "arrowRight", isRight);
|
|
18241
|
+
const right = window.document.body.offsetWidth -
|
|
18242
|
+
(window.pageXOffset + inputBounds.right);
|
|
18243
|
+
const rightMost = left + calendarWidth > window.document.body.offsetWidth;
|
|
18244
|
+
const centerMost = right + calendarWidth > window.document.body.offsetWidth;
|
|
18245
|
+
toggleClass(self.calendarContainer, "rightMost", rightMost);
|
|
18246
|
+
if (self.config.static)
|
|
18247
|
+
return;
|
|
18248
|
+
self.calendarContainer.style.top = `${top}px`;
|
|
18249
|
+
if (!rightMost) {
|
|
18250
|
+
self.calendarContainer.style.left = `${left}px`;
|
|
18251
|
+
self.calendarContainer.style.right = "auto";
|
|
18252
|
+
}
|
|
18253
|
+
else if (!centerMost) {
|
|
18254
|
+
self.calendarContainer.style.left = "auto";
|
|
18255
|
+
self.calendarContainer.style.right = `${right}px`;
|
|
18256
|
+
}
|
|
18257
|
+
else {
|
|
18258
|
+
const doc = getDocumentStyleSheet();
|
|
18259
|
+
if (doc === undefined)
|
|
18260
|
+
return;
|
|
18261
|
+
const bodyWidth = window.document.body.offsetWidth;
|
|
18262
|
+
const centerLeft = Math.max(0, bodyWidth / 2 - calendarWidth / 2);
|
|
18263
|
+
const centerBefore = ".flatpickr-calendar.centerMost:before";
|
|
18264
|
+
const centerAfter = ".flatpickr-calendar.centerMost:after";
|
|
18265
|
+
const centerIndex = doc.cssRules.length;
|
|
18266
|
+
const centerStyle = `{left:${inputBounds.left}px;right:auto;}`;
|
|
18267
|
+
toggleClass(self.calendarContainer, "rightMost", false);
|
|
18268
|
+
toggleClass(self.calendarContainer, "centerMost", true);
|
|
18269
|
+
doc.insertRule(`${centerBefore},${centerAfter}${centerStyle}`, centerIndex);
|
|
18270
|
+
self.calendarContainer.style.left = `${centerLeft}px`;
|
|
18271
|
+
self.calendarContainer.style.right = "auto";
|
|
18272
|
+
}
|
|
18273
|
+
}
|
|
18274
|
+
function getDocumentStyleSheet() {
|
|
18275
|
+
let editableSheet = null;
|
|
18276
|
+
for (let i = 0; i < document.styleSheets.length; i++) {
|
|
18277
|
+
const sheet = document.styleSheets[i];
|
|
18278
|
+
editableSheet = sheet;
|
|
18279
|
+
break;
|
|
18280
|
+
}
|
|
18281
|
+
return editableSheet != null ? editableSheet : createStyleSheet();
|
|
18282
|
+
}
|
|
18283
|
+
function createStyleSheet() {
|
|
18284
|
+
const style = document.createElement("style");
|
|
18285
|
+
document.head.appendChild(style);
|
|
18286
|
+
return style.sheet;
|
|
18287
|
+
}
|
|
18288
|
+
function redraw() {
|
|
18289
|
+
if (self.config.noCalendar || self.isMobile)
|
|
18290
|
+
return;
|
|
18291
|
+
buildMonthSwitch();
|
|
18292
|
+
updateNavigationCurrentMonth();
|
|
18293
|
+
buildDays();
|
|
18294
|
+
}
|
|
18295
|
+
function focusAndClose() {
|
|
18296
|
+
self._input.focus();
|
|
18297
|
+
if (window.navigator.userAgent.indexOf("MSIE") !== -1 ||
|
|
18298
|
+
navigator.msMaxTouchPoints !== undefined) {
|
|
18299
|
+
setTimeout(self.close, 0);
|
|
18300
|
+
}
|
|
18301
|
+
else {
|
|
18302
|
+
self.close();
|
|
18303
|
+
}
|
|
18304
|
+
}
|
|
18305
|
+
function selectDate(e) {
|
|
18306
|
+
e.preventDefault();
|
|
18307
|
+
e.stopPropagation();
|
|
18308
|
+
const isSelectable = (day) => day.classList &&
|
|
18309
|
+
day.classList.contains("flatpickr-day") &&
|
|
18310
|
+
!day.classList.contains("flatpickr-disabled") &&
|
|
18311
|
+
!day.classList.contains("notAllowed");
|
|
18312
|
+
const t = findParent(getEventTarget(e), isSelectable);
|
|
18313
|
+
if (t === undefined)
|
|
18314
|
+
return;
|
|
18315
|
+
const target = t;
|
|
18316
|
+
const selectedDate = (self.latestSelectedDateObj = new Date(target.dateObj.getTime()));
|
|
18317
|
+
const shouldChangeMonth = (selectedDate.getMonth() < self.currentMonth ||
|
|
18318
|
+
selectedDate.getMonth() >
|
|
18319
|
+
self.currentMonth + self.config.showMonths - 1) &&
|
|
18320
|
+
self.config.mode !== "range";
|
|
18321
|
+
self.selectedDateElem = target;
|
|
18322
|
+
if (self.config.mode === "single")
|
|
18323
|
+
self.selectedDates = [selectedDate];
|
|
18324
|
+
else if (self.config.mode === "multiple") {
|
|
18325
|
+
const selectedIndex = isDateSelected(selectedDate);
|
|
18326
|
+
if (selectedIndex)
|
|
18327
|
+
self.selectedDates.splice(parseInt(selectedIndex), 1);
|
|
18328
|
+
else
|
|
18329
|
+
self.selectedDates.push(selectedDate);
|
|
18330
|
+
}
|
|
18331
|
+
else if (self.config.mode === "range") {
|
|
18332
|
+
if (self.selectedDates.length === 2) {
|
|
18333
|
+
self.clear(false, false);
|
|
18334
|
+
}
|
|
18335
|
+
self.latestSelectedDateObj = selectedDate;
|
|
18336
|
+
self.selectedDates.push(selectedDate);
|
|
18337
|
+
if (compareDates(selectedDate, self.selectedDates[0], true) !== 0)
|
|
18338
|
+
self.selectedDates.sort((a, b) => a.getTime() - b.getTime());
|
|
18339
|
+
}
|
|
18340
|
+
setHoursFromInputs();
|
|
18341
|
+
if (shouldChangeMonth) {
|
|
18342
|
+
const isNewYear = self.currentYear !== selectedDate.getFullYear();
|
|
18343
|
+
self.currentYear = selectedDate.getFullYear();
|
|
18344
|
+
self.currentMonth = selectedDate.getMonth();
|
|
18345
|
+
if (isNewYear) {
|
|
18346
|
+
triggerEvent("onYearChange");
|
|
18347
|
+
buildMonthSwitch();
|
|
18348
|
+
}
|
|
18349
|
+
triggerEvent("onMonthChange");
|
|
18350
|
+
}
|
|
18351
|
+
updateNavigationCurrentMonth();
|
|
18352
|
+
buildDays();
|
|
18353
|
+
updateValue();
|
|
18354
|
+
if (!shouldChangeMonth &&
|
|
18355
|
+
self.config.mode !== "range" &&
|
|
18356
|
+
self.config.showMonths === 1)
|
|
18357
|
+
focusOnDayElem(target);
|
|
18358
|
+
else if (self.selectedDateElem !== undefined &&
|
|
18359
|
+
self.hourElement === undefined) {
|
|
18360
|
+
self.selectedDateElem && self.selectedDateElem.focus();
|
|
18361
|
+
}
|
|
18362
|
+
if (self.hourElement !== undefined)
|
|
18363
|
+
self.hourElement !== undefined && self.hourElement.focus();
|
|
18364
|
+
if (self.config.closeOnSelect) {
|
|
18365
|
+
const single = self.config.mode === "single" && !self.config.enableTime;
|
|
18366
|
+
const range = self.config.mode === "range" &&
|
|
18367
|
+
self.selectedDates.length === 2 &&
|
|
18368
|
+
!self.config.enableTime;
|
|
18369
|
+
if (single || range) {
|
|
18370
|
+
focusAndClose();
|
|
18371
|
+
}
|
|
18372
|
+
}
|
|
18373
|
+
triggerChange();
|
|
18374
|
+
}
|
|
18375
|
+
const CALLBACKS = {
|
|
18376
|
+
locale: [setupLocale, updateWeekdays],
|
|
18377
|
+
showMonths: [buildMonths, setCalendarWidth, buildWeekdays],
|
|
18378
|
+
minDate: [jumpToDate],
|
|
18379
|
+
maxDate: [jumpToDate],
|
|
18380
|
+
clickOpens: [
|
|
18381
|
+
() => {
|
|
18382
|
+
if (self.config.clickOpens === true) {
|
|
18383
|
+
bind(self._input, "focus", self.open);
|
|
18384
|
+
bind(self._input, "click", self.open);
|
|
18385
|
+
}
|
|
18386
|
+
else {
|
|
18387
|
+
self._input.removeEventListener("focus", self.open);
|
|
18388
|
+
self._input.removeEventListener("click", self.open);
|
|
18389
|
+
}
|
|
18390
|
+
},
|
|
18391
|
+
],
|
|
18392
|
+
};
|
|
18393
|
+
function set(option, value) {
|
|
18394
|
+
if (option !== null && typeof option === "object") {
|
|
18395
|
+
Object.assign(self.config, option);
|
|
18396
|
+
for (const key in option) {
|
|
18397
|
+
if (CALLBACKS[key] !== undefined)
|
|
18398
|
+
CALLBACKS[key].forEach((x) => x());
|
|
18399
|
+
}
|
|
18400
|
+
}
|
|
18401
|
+
else {
|
|
18402
|
+
self.config[option] = value;
|
|
18403
|
+
if (CALLBACKS[option] !== undefined)
|
|
18404
|
+
CALLBACKS[option].forEach((x) => x());
|
|
18405
|
+
else if (HOOKS.indexOf(option) > -1)
|
|
18406
|
+
self.config[option] = arrayify(value);
|
|
18407
|
+
}
|
|
18408
|
+
self.redraw();
|
|
18409
|
+
updateValue(true);
|
|
18410
|
+
}
|
|
18411
|
+
function setSelectedDate(inputDate, format) {
|
|
18412
|
+
let dates = [];
|
|
18413
|
+
if (inputDate instanceof Array)
|
|
18414
|
+
dates = inputDate.map((d) => self.parseDate(d, format));
|
|
18415
|
+
else if (inputDate instanceof Date || typeof inputDate === "number")
|
|
18416
|
+
dates = [self.parseDate(inputDate, format)];
|
|
18417
|
+
else if (typeof inputDate === "string") {
|
|
18418
|
+
switch (self.config.mode) {
|
|
18419
|
+
case "single":
|
|
18420
|
+
case "time":
|
|
18421
|
+
dates = [self.parseDate(inputDate, format)];
|
|
18422
|
+
break;
|
|
18423
|
+
case "multiple":
|
|
18424
|
+
dates = inputDate
|
|
18425
|
+
.split(self.config.conjunction)
|
|
18426
|
+
.map((date) => self.parseDate(date, format));
|
|
18427
|
+
break;
|
|
18428
|
+
case "range":
|
|
18429
|
+
dates = inputDate
|
|
18430
|
+
.split(self.l10n.rangeSeparator)
|
|
18431
|
+
.map((date) => self.parseDate(date, format));
|
|
18432
|
+
break;
|
|
18433
|
+
}
|
|
18434
|
+
}
|
|
18435
|
+
else
|
|
18436
|
+
self.config.errorHandler(new Error(`Invalid date supplied: ${JSON.stringify(inputDate)}`));
|
|
18437
|
+
self.selectedDates = (self.config.allowInvalidPreload
|
|
18438
|
+
? dates
|
|
18439
|
+
: dates.filter((d) => d instanceof Date && isEnabled(d, false)));
|
|
18440
|
+
if (self.config.mode === "range")
|
|
18441
|
+
self.selectedDates.sort((a, b) => a.getTime() - b.getTime());
|
|
18442
|
+
}
|
|
18443
|
+
function setDate(date, triggerChange = false, format = self.config.dateFormat) {
|
|
18444
|
+
if ((date !== 0 && !date) || (date instanceof Array && date.length === 0))
|
|
18445
|
+
return self.clear(triggerChange);
|
|
18446
|
+
setSelectedDate(date, format);
|
|
18447
|
+
self.latestSelectedDateObj =
|
|
18448
|
+
self.selectedDates[self.selectedDates.length - 1];
|
|
18449
|
+
self.redraw();
|
|
18450
|
+
jumpToDate(undefined, triggerChange);
|
|
18451
|
+
setHoursFromDate();
|
|
18452
|
+
if (self.selectedDates.length === 0) {
|
|
18453
|
+
self.clear(false);
|
|
18454
|
+
}
|
|
18455
|
+
updateValue(triggerChange);
|
|
18456
|
+
if (triggerChange)
|
|
18457
|
+
triggerEvent("onChange");
|
|
18458
|
+
}
|
|
18459
|
+
function parseDateRules(arr) {
|
|
18460
|
+
return arr
|
|
18461
|
+
.slice()
|
|
18462
|
+
.map((rule) => {
|
|
18463
|
+
if (typeof rule === "string" ||
|
|
18464
|
+
typeof rule === "number" ||
|
|
18465
|
+
rule instanceof Date) {
|
|
18466
|
+
return self.parseDate(rule, undefined, true);
|
|
18467
|
+
}
|
|
18468
|
+
else if (rule &&
|
|
18469
|
+
typeof rule === "object" &&
|
|
18470
|
+
rule.from &&
|
|
18471
|
+
rule.to)
|
|
18472
|
+
return {
|
|
18473
|
+
from: self.parseDate(rule.from, undefined),
|
|
18474
|
+
to: self.parseDate(rule.to, undefined),
|
|
18475
|
+
};
|
|
18476
|
+
return rule;
|
|
18477
|
+
})
|
|
18478
|
+
.filter((x) => x);
|
|
18479
|
+
}
|
|
18480
|
+
function setupDates() {
|
|
18481
|
+
self.selectedDates = [];
|
|
18482
|
+
self.now = self.parseDate(self.config.now) || new Date();
|
|
18483
|
+
const preloadedDate = self.config.defaultDate ||
|
|
18484
|
+
((self.input.nodeName === "INPUT" ||
|
|
18485
|
+
self.input.nodeName === "TEXTAREA") &&
|
|
18486
|
+
self.input.placeholder &&
|
|
18487
|
+
self.input.value === self.input.placeholder
|
|
18488
|
+
? null
|
|
18489
|
+
: self.input.value);
|
|
18490
|
+
if (preloadedDate)
|
|
18491
|
+
setSelectedDate(preloadedDate, self.config.dateFormat);
|
|
18492
|
+
self._initialDate =
|
|
18493
|
+
self.selectedDates.length > 0
|
|
18494
|
+
? self.selectedDates[0]
|
|
18495
|
+
: self.config.minDate &&
|
|
18496
|
+
self.config.minDate.getTime() > self.now.getTime()
|
|
18497
|
+
? self.config.minDate
|
|
18498
|
+
: self.config.maxDate &&
|
|
18499
|
+
self.config.maxDate.getTime() < self.now.getTime()
|
|
18500
|
+
? self.config.maxDate
|
|
18501
|
+
: self.now;
|
|
18502
|
+
self.currentYear = self._initialDate.getFullYear();
|
|
18503
|
+
self.currentMonth = self._initialDate.getMonth();
|
|
18504
|
+
if (self.selectedDates.length > 0)
|
|
18505
|
+
self.latestSelectedDateObj = self.selectedDates[0];
|
|
18506
|
+
if (self.config.minTime !== undefined)
|
|
18507
|
+
self.config.minTime = self.parseDate(self.config.minTime, "H:i");
|
|
18508
|
+
if (self.config.maxTime !== undefined)
|
|
18509
|
+
self.config.maxTime = self.parseDate(self.config.maxTime, "H:i");
|
|
18510
|
+
self.minDateHasTime =
|
|
18511
|
+
!!self.config.minDate &&
|
|
18512
|
+
(self.config.minDate.getHours() > 0 ||
|
|
18513
|
+
self.config.minDate.getMinutes() > 0 ||
|
|
18514
|
+
self.config.minDate.getSeconds() > 0);
|
|
18515
|
+
self.maxDateHasTime =
|
|
18516
|
+
!!self.config.maxDate &&
|
|
18517
|
+
(self.config.maxDate.getHours() > 0 ||
|
|
18518
|
+
self.config.maxDate.getMinutes() > 0 ||
|
|
18519
|
+
self.config.maxDate.getSeconds() > 0);
|
|
18520
|
+
}
|
|
18521
|
+
function setupInputs() {
|
|
18522
|
+
self.input = getInputElem();
|
|
18523
|
+
if (!self.input) {
|
|
18524
|
+
self.config.errorHandler(new Error("Invalid input element specified"));
|
|
18525
|
+
return;
|
|
18526
|
+
}
|
|
18527
|
+
self.input._type = self.input.type;
|
|
18528
|
+
self.input.type = "text";
|
|
18529
|
+
self.input.classList.add("flatpickr-input");
|
|
18530
|
+
self._input = self.input;
|
|
18531
|
+
if (self.config.altInput) {
|
|
18532
|
+
self.altInput = createElement(self.input.nodeName, self.config.altInputClass);
|
|
18533
|
+
self._input = self.altInput;
|
|
18534
|
+
self.altInput.placeholder = self.input.placeholder;
|
|
18535
|
+
self.altInput.disabled = self.input.disabled;
|
|
18536
|
+
self.altInput.required = self.input.required;
|
|
18537
|
+
self.altInput.tabIndex = self.input.tabIndex;
|
|
18538
|
+
self.altInput.type = "text";
|
|
18539
|
+
self.input.setAttribute("type", "hidden");
|
|
18540
|
+
if (!self.config.static && self.input.parentNode)
|
|
18541
|
+
self.input.parentNode.insertBefore(self.altInput, self.input.nextSibling);
|
|
18542
|
+
}
|
|
18543
|
+
if (!self.config.allowInput)
|
|
18544
|
+
self._input.setAttribute("readonly", "readonly");
|
|
18545
|
+
self._positionElement = self.config.positionElement || self._input;
|
|
18546
|
+
}
|
|
18547
|
+
function setupMobile() {
|
|
18548
|
+
const inputType = self.config.enableTime
|
|
18549
|
+
? self.config.noCalendar
|
|
18550
|
+
? "time"
|
|
18551
|
+
: "datetime-local"
|
|
18552
|
+
: "date";
|
|
18553
|
+
self.mobileInput = createElement("input", self.input.className + " flatpickr-mobile");
|
|
18554
|
+
self.mobileInput.tabIndex = 1;
|
|
18555
|
+
self.mobileInput.type = inputType;
|
|
18556
|
+
self.mobileInput.disabled = self.input.disabled;
|
|
18557
|
+
self.mobileInput.required = self.input.required;
|
|
18558
|
+
self.mobileInput.placeholder = self.input.placeholder;
|
|
18559
|
+
self.mobileFormatStr =
|
|
18560
|
+
inputType === "datetime-local"
|
|
18561
|
+
? "Y-m-d\\TH:i:S"
|
|
18562
|
+
: inputType === "date"
|
|
18563
|
+
? "Y-m-d"
|
|
18564
|
+
: "H:i:S";
|
|
18565
|
+
if (self.selectedDates.length > 0) {
|
|
18566
|
+
self.mobileInput.defaultValue = self.mobileInput.value = self.formatDate(self.selectedDates[0], self.mobileFormatStr);
|
|
18567
|
+
}
|
|
18568
|
+
if (self.config.minDate)
|
|
18569
|
+
self.mobileInput.min = self.formatDate(self.config.minDate, "Y-m-d");
|
|
18570
|
+
if (self.config.maxDate)
|
|
18571
|
+
self.mobileInput.max = self.formatDate(self.config.maxDate, "Y-m-d");
|
|
18572
|
+
if (self.input.getAttribute("step"))
|
|
18573
|
+
self.mobileInput.step = String(self.input.getAttribute("step"));
|
|
18574
|
+
self.input.type = "hidden";
|
|
18575
|
+
if (self.altInput !== undefined)
|
|
18576
|
+
self.altInput.type = "hidden";
|
|
18577
|
+
try {
|
|
18578
|
+
if (self.input.parentNode)
|
|
18579
|
+
self.input.parentNode.insertBefore(self.mobileInput, self.input.nextSibling);
|
|
18580
|
+
}
|
|
18581
|
+
catch (_a) { }
|
|
18582
|
+
bind(self.mobileInput, "change", (e) => {
|
|
18583
|
+
self.setDate(getEventTarget(e).value, false, self.mobileFormatStr);
|
|
18584
|
+
triggerEvent("onChange");
|
|
18585
|
+
triggerEvent("onClose");
|
|
18586
|
+
});
|
|
18587
|
+
}
|
|
18588
|
+
function toggle(e) {
|
|
18589
|
+
if (self.isOpen === true)
|
|
18590
|
+
return self.close();
|
|
18591
|
+
self.open(e);
|
|
18592
|
+
}
|
|
18593
|
+
function triggerEvent(event, data) {
|
|
18594
|
+
if (self.config === undefined)
|
|
18595
|
+
return;
|
|
18596
|
+
const hooks = self.config[event];
|
|
18597
|
+
if (hooks !== undefined && hooks.length > 0) {
|
|
18598
|
+
for (let i = 0; hooks[i] && i < hooks.length; i++)
|
|
18599
|
+
hooks[i](self.selectedDates, self.input.value, self, data);
|
|
18600
|
+
}
|
|
18601
|
+
if (event === "onChange") {
|
|
18602
|
+
self.input.dispatchEvent(createEvent("change"));
|
|
18603
|
+
self.input.dispatchEvent(createEvent("input"));
|
|
18604
|
+
}
|
|
18605
|
+
}
|
|
18606
|
+
function createEvent(name) {
|
|
18607
|
+
const e = document.createEvent("Event");
|
|
18608
|
+
e.initEvent(name, true, true);
|
|
18609
|
+
return e;
|
|
18610
|
+
}
|
|
18611
|
+
function isDateSelected(date) {
|
|
18612
|
+
for (let i = 0; i < self.selectedDates.length; i++) {
|
|
18613
|
+
if (compareDates(self.selectedDates[i], date) === 0)
|
|
18614
|
+
return "" + i;
|
|
18615
|
+
}
|
|
18616
|
+
return false;
|
|
18617
|
+
}
|
|
18618
|
+
function isDateInRange(date) {
|
|
18619
|
+
if (self.config.mode !== "range" || self.selectedDates.length < 2)
|
|
18620
|
+
return false;
|
|
18621
|
+
return (compareDates(date, self.selectedDates[0]) >= 0 &&
|
|
18622
|
+
compareDates(date, self.selectedDates[1]) <= 0);
|
|
18623
|
+
}
|
|
18624
|
+
function updateNavigationCurrentMonth() {
|
|
18625
|
+
if (self.config.noCalendar || self.isMobile || !self.monthNav)
|
|
18626
|
+
return;
|
|
18627
|
+
self.yearElements.forEach((yearElement, i) => {
|
|
18628
|
+
const d = new Date(self.currentYear, self.currentMonth, 1);
|
|
18629
|
+
d.setMonth(self.currentMonth + i);
|
|
18630
|
+
if (self.config.showMonths > 1 ||
|
|
18631
|
+
self.config.monthSelectorType === "static") {
|
|
18632
|
+
self.monthElements[i].textContent =
|
|
18633
|
+
monthToStr(d.getMonth(), self.config.shorthandCurrentMonth, self.l10n) + " ";
|
|
18634
|
+
}
|
|
18635
|
+
else {
|
|
18636
|
+
self.monthsDropdownContainer.value = d.getMonth().toString();
|
|
18637
|
+
}
|
|
18638
|
+
yearElement.value = d.getFullYear().toString();
|
|
18639
|
+
});
|
|
18640
|
+
self._hidePrevMonthArrow =
|
|
18641
|
+
self.config.minDate !== undefined &&
|
|
18642
|
+
(self.currentYear === self.config.minDate.getFullYear()
|
|
18643
|
+
? self.currentMonth <= self.config.minDate.getMonth()
|
|
18644
|
+
: self.currentYear < self.config.minDate.getFullYear());
|
|
18645
|
+
self._hideNextMonthArrow =
|
|
18646
|
+
self.config.maxDate !== undefined &&
|
|
18647
|
+
(self.currentYear === self.config.maxDate.getFullYear()
|
|
18648
|
+
? self.currentMonth + 1 > self.config.maxDate.getMonth()
|
|
18649
|
+
: self.currentYear > self.config.maxDate.getFullYear());
|
|
18650
|
+
}
|
|
18651
|
+
function getDateStr(format) {
|
|
18652
|
+
return self.selectedDates
|
|
18653
|
+
.map((dObj) => self.formatDate(dObj, format))
|
|
18654
|
+
.filter((d, i, arr) => self.config.mode !== "range" ||
|
|
18655
|
+
self.config.enableTime ||
|
|
18656
|
+
arr.indexOf(d) === i)
|
|
18657
|
+
.join(self.config.mode !== "range"
|
|
18658
|
+
? self.config.conjunction
|
|
18659
|
+
: self.l10n.rangeSeparator);
|
|
18660
|
+
}
|
|
18661
|
+
function updateValue(triggerChange = true) {
|
|
18662
|
+
if (self.mobileInput !== undefined && self.mobileFormatStr) {
|
|
18663
|
+
self.mobileInput.value =
|
|
18664
|
+
self.latestSelectedDateObj !== undefined
|
|
18665
|
+
? self.formatDate(self.latestSelectedDateObj, self.mobileFormatStr)
|
|
18666
|
+
: "";
|
|
18667
|
+
}
|
|
18668
|
+
self.input.value = getDateStr(self.config.dateFormat);
|
|
18669
|
+
if (self.altInput !== undefined) {
|
|
18670
|
+
self.altInput.value = getDateStr(self.config.altFormat);
|
|
18671
|
+
}
|
|
18672
|
+
if (triggerChange !== false)
|
|
18673
|
+
triggerEvent("onValueUpdate");
|
|
18674
|
+
}
|
|
18675
|
+
function onMonthNavClick(e) {
|
|
18676
|
+
const eventTarget = getEventTarget(e);
|
|
18677
|
+
const isPrevMonth = self.prevMonthNav.contains(eventTarget);
|
|
18678
|
+
const isNextMonth = self.nextMonthNav.contains(eventTarget);
|
|
18679
|
+
if (isPrevMonth || isNextMonth) {
|
|
18680
|
+
changeMonth(isPrevMonth ? -1 : 1);
|
|
18681
|
+
}
|
|
18682
|
+
else if (self.yearElements.indexOf(eventTarget) >= 0) {
|
|
18683
|
+
eventTarget.select();
|
|
18684
|
+
}
|
|
18685
|
+
else if (eventTarget.classList.contains("arrowUp")) {
|
|
18686
|
+
self.changeYear(self.currentYear + 1);
|
|
18687
|
+
}
|
|
18688
|
+
else if (eventTarget.classList.contains("arrowDown")) {
|
|
18689
|
+
self.changeYear(self.currentYear - 1);
|
|
18690
|
+
}
|
|
18691
|
+
}
|
|
18692
|
+
function timeWrapper(e) {
|
|
18693
|
+
e.preventDefault();
|
|
18694
|
+
const isKeyDown = e.type === "keydown", eventTarget = getEventTarget(e), input = eventTarget;
|
|
18695
|
+
if (self.amPM !== undefined && eventTarget === self.amPM) {
|
|
18696
|
+
self.amPM.textContent =
|
|
18697
|
+
self.l10n.amPM[int(self.amPM.textContent === self.l10n.amPM[0])];
|
|
18698
|
+
}
|
|
18699
|
+
const min = parseFloat(input.getAttribute("min")), max = parseFloat(input.getAttribute("max")), step = parseFloat(input.getAttribute("step")), curValue = parseInt(input.value, 10), delta = e.delta ||
|
|
18700
|
+
(isKeyDown ? (e.which === 38 ? 1 : -1) : 0);
|
|
18701
|
+
let newValue = curValue + step * delta;
|
|
18702
|
+
if (typeof input.value !== "undefined" && input.value.length === 2) {
|
|
18703
|
+
const isHourElem = input === self.hourElement, isMinuteElem = input === self.minuteElement;
|
|
18704
|
+
if (newValue < min) {
|
|
18705
|
+
newValue =
|
|
18706
|
+
max +
|
|
18707
|
+
newValue +
|
|
18708
|
+
int(!isHourElem) +
|
|
18709
|
+
(int(isHourElem) && int(!self.amPM));
|
|
18710
|
+
if (isMinuteElem)
|
|
18711
|
+
incrementNumInput(undefined, -1, self.hourElement);
|
|
18712
|
+
}
|
|
18713
|
+
else if (newValue > max) {
|
|
18714
|
+
newValue =
|
|
18715
|
+
input === self.hourElement ? newValue - max - int(!self.amPM) : min;
|
|
18716
|
+
if (isMinuteElem)
|
|
18717
|
+
incrementNumInput(undefined, 1, self.hourElement);
|
|
18718
|
+
}
|
|
18719
|
+
if (self.amPM &&
|
|
18720
|
+
isHourElem &&
|
|
18721
|
+
(step === 1
|
|
18722
|
+
? newValue + curValue === 23
|
|
18723
|
+
: Math.abs(newValue - curValue) > step)) {
|
|
18724
|
+
self.amPM.textContent =
|
|
18725
|
+
self.l10n.amPM[int(self.amPM.textContent === self.l10n.amPM[0])];
|
|
18726
|
+
}
|
|
18727
|
+
input.value = pad(newValue);
|
|
18728
|
+
}
|
|
18729
|
+
}
|
|
18730
|
+
init();
|
|
18731
|
+
return self;
|
|
16170
18732
|
}
|
|
16171
|
-
|
|
16172
|
-
|
|
16173
|
-
|
|
16174
|
-
|
|
16175
|
-
|
|
16176
|
-
|
|
16177
|
-
|
|
16178
|
-
|
|
16179
|
-
|
|
16180
|
-
|
|
18733
|
+
function _flatpickr(nodeList, config) {
|
|
18734
|
+
const nodes = Array.prototype.slice
|
|
18735
|
+
.call(nodeList)
|
|
18736
|
+
.filter((x) => x instanceof HTMLElement);
|
|
18737
|
+
const instances = [];
|
|
18738
|
+
for (let i = 0; i < nodes.length; i++) {
|
|
18739
|
+
const node = nodes[i];
|
|
18740
|
+
try {
|
|
18741
|
+
if (node.getAttribute("data-fp-omit") !== null)
|
|
18742
|
+
continue;
|
|
18743
|
+
if (node._flatpickr !== undefined) {
|
|
18744
|
+
node._flatpickr.destroy();
|
|
18745
|
+
node._flatpickr = undefined;
|
|
18746
|
+
}
|
|
18747
|
+
node._flatpickr = FlatpickrInstance(node, config || {});
|
|
18748
|
+
instances.push(node._flatpickr);
|
|
18749
|
+
}
|
|
18750
|
+
catch (e) {
|
|
18751
|
+
console.error(e);
|
|
18752
|
+
}
|
|
18753
|
+
}
|
|
18754
|
+
return instances.length === 1 ? instances[0] : instances;
|
|
16181
18755
|
}
|
|
16182
|
-
|
|
16183
|
-
|
|
16184
|
-
|
|
16185
|
-
|
|
16186
|
-
|
|
16187
|
-
|
|
16188
|
-
|
|
16189
|
-
|
|
16190
|
-
|
|
16191
|
-
// - Invalid input values for the RFC `version` or `variant` fields
|
|
16192
|
-
|
|
16193
|
-
if (!validate(uuid)) {
|
|
16194
|
-
throw TypeError('Stringified UUID is invalid');
|
|
16195
|
-
}
|
|
16196
|
-
|
|
16197
|
-
return uuid;
|
|
18756
|
+
if (typeof HTMLElement !== "undefined" &&
|
|
18757
|
+
typeof HTMLCollection !== "undefined" &&
|
|
18758
|
+
typeof NodeList !== "undefined") {
|
|
18759
|
+
HTMLCollection.prototype.flatpickr = NodeList.prototype.flatpickr = function (config) {
|
|
18760
|
+
return _flatpickr(this, config);
|
|
18761
|
+
};
|
|
18762
|
+
HTMLElement.prototype.flatpickr = function (config) {
|
|
18763
|
+
return _flatpickr([this], config);
|
|
18764
|
+
};
|
|
16198
18765
|
}
|
|
16199
|
-
|
|
16200
|
-
|
|
16201
|
-
|
|
16202
|
-
var rnds = options.random || (options.rng || rng)(); // Per 4.4, set bits for version and `clock_seq_hi_and_reserved`
|
|
16203
|
-
|
|
16204
|
-
rnds[6] = rnds[6] & 0x0f | 0x40;
|
|
16205
|
-
rnds[8] = rnds[8] & 0x3f | 0x80; // Copy bytes to buffer, if provided
|
|
16206
|
-
|
|
16207
|
-
if (buf) {
|
|
16208
|
-
offset = offset || 0;
|
|
16209
|
-
|
|
16210
|
-
for (var i = 0; i < 16; ++i) {
|
|
16211
|
-
buf[offset + i] = rnds[i];
|
|
18766
|
+
var flatpickr = function (selector, config) {
|
|
18767
|
+
if (typeof selector === "string") {
|
|
18768
|
+
return _flatpickr(window.document.querySelectorAll(selector), config);
|
|
16212
18769
|
}
|
|
16213
|
-
|
|
16214
|
-
|
|
16215
|
-
|
|
16216
|
-
|
|
16217
|
-
|
|
18770
|
+
else if (selector instanceof Node) {
|
|
18771
|
+
return _flatpickr([selector], config);
|
|
18772
|
+
}
|
|
18773
|
+
else {
|
|
18774
|
+
return _flatpickr(selector, config);
|
|
18775
|
+
}
|
|
18776
|
+
};
|
|
18777
|
+
flatpickr.defaultConfig = {};
|
|
18778
|
+
flatpickr.l10ns = {
|
|
18779
|
+
en: Object.assign({}, english),
|
|
18780
|
+
default: Object.assign({}, english),
|
|
18781
|
+
};
|
|
18782
|
+
flatpickr.localize = (l10n) => {
|
|
18783
|
+
flatpickr.l10ns.default = Object.assign(Object.assign({}, flatpickr.l10ns.default), l10n);
|
|
18784
|
+
};
|
|
18785
|
+
flatpickr.setDefaults = (config) => {
|
|
18786
|
+
flatpickr.defaultConfig = Object.assign(Object.assign({}, flatpickr.defaultConfig), config);
|
|
18787
|
+
};
|
|
18788
|
+
flatpickr.parseDate = createDateParser({});
|
|
18789
|
+
flatpickr.formatDate = createDateFormatter({});
|
|
18790
|
+
flatpickr.compareDates = compareDates;
|
|
18791
|
+
if (typeof jQuery !== "undefined" && typeof jQuery.fn !== "undefined") {
|
|
18792
|
+
jQuery.fn.flatpickr = function (config) {
|
|
18793
|
+
return _flatpickr(this, config);
|
|
18794
|
+
};
|
|
18795
|
+
}
|
|
18796
|
+
Date.prototype.fp_incr = function (days) {
|
|
18797
|
+
return new Date(this.getFullYear(), this.getMonth(), this.getDate() + (typeof days === "string" ? parseInt(days, 10) : days));
|
|
18798
|
+
};
|
|
18799
|
+
if (typeof window !== "undefined") {
|
|
18800
|
+
window.flatpickr = flatpickr;
|
|
16218
18801
|
}
|
|
16219
18802
|
|
|
16220
|
-
const
|
|
18803
|
+
const arrowSvg = (rotate = false) => `<svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="${rotate ? 'M0.557948 5.6813L6.06209 0.132167C6.23831 -0.0440556 6.52327 -0.0440556 6.69949 0.132167L7.44187 0.874551C7.61809 1.05077 7.61809 1.33573 7.44187 1.51195L2.99882 6L7.44187 10.488C7.61809 10.6643 7.61809 10.9492 7.44187 11.1254L6.69949 11.8678C6.52327 12.0441 6.23831 12.0441 6.06209 11.8678L0.557948 6.3187C0.381726 6.14248 0.381726 5.85752 0.557948 5.6813Z' : 'M7.44187 6.3187L1.93773 11.8678C1.76151 12.0441 1.47655 12.0441 1.30033 11.8678L0.557948 11.1254C0.381726 10.9492 0.381726 10.6643 0.557948 10.488L5.001 6L0.557948 1.51195C0.381726 1.33573 0.381726 1.05077 0.557948 0.874551L1.30033 0.132167C1.47655 -0.0440556 1.76151 -0.0440556 1.93773 0.132167L7.44187 5.6813C7.6181 5.85752 7.6181 6.14248 7.44187 6.3187Z'}" /></svg>`;
|
|
18804
|
+
const XplInput$1 = class extends HTMLElement {
|
|
16221
18805
|
constructor() {
|
|
16222
18806
|
super();
|
|
16223
18807
|
this.__registerHost();
|
|
16224
|
-
|
|
18808
|
+
/**
|
|
18809
|
+
* See https://flatpickr.js.org/formatting/
|
|
18810
|
+
*/
|
|
18811
|
+
this.dateFormat = "Y-m-d";
|
|
18812
|
+
/**
|
|
18813
|
+
* For datepicker inputs, whether to allow only a single
|
|
18814
|
+
* date or a range of dates. (Multiple non-consecutive
|
|
18815
|
+
* dates planned to be supported in the future.)
|
|
18816
|
+
*/
|
|
18817
|
+
this.mode = "single";
|
|
18818
|
+
/**
|
|
18819
|
+
* Whether to render as a singleline text input or
|
|
18820
|
+
* as a multiline textarea. (If `true`, `pre` and `post`
|
|
18821
|
+
* values will be ignored, if present.)
|
|
18822
|
+
*/
|
|
18823
|
+
this.multiline = false;
|
|
18824
|
+
this.type = "text";
|
|
18825
|
+
this.characterCount = 0;
|
|
18826
|
+
this.passwordVisible = false;
|
|
16225
18827
|
}
|
|
16226
|
-
|
|
16227
|
-
|
|
18828
|
+
updateCharacterCount() {
|
|
18829
|
+
this.characterCount = this.input.value.length;
|
|
16228
18830
|
}
|
|
16229
|
-
|
|
16230
|
-
|
|
16231
|
-
|
|
16232
|
-
|
|
16233
|
-
|
|
16234
|
-
|
|
16235
|
-
|
|
18831
|
+
componentWillLoad() {
|
|
18832
|
+
if (this._id === undefined || this._id === null || this._id === "")
|
|
18833
|
+
this._id = v4();
|
|
18834
|
+
if (this.multiline && this.maxCharacterCount !== undefined) {
|
|
18835
|
+
this.characterCount = this.value !== undefined ? this.value.length : 0;
|
|
18836
|
+
}
|
|
18837
|
+
}
|
|
18838
|
+
componentDidLoad() {
|
|
18839
|
+
if (this.type === "date") {
|
|
18840
|
+
flatpickr(this.input, {
|
|
18841
|
+
allowInput: true,
|
|
18842
|
+
dateFormat: this.dateFormat,
|
|
18843
|
+
defaultDate: this.value,
|
|
18844
|
+
maxDate: this.max,
|
|
18845
|
+
minDate: this.min,
|
|
18846
|
+
mode: this.mode,
|
|
18847
|
+
nextArrow: arrowSvg(),
|
|
18848
|
+
prevArrow: arrowSvg(true)
|
|
18849
|
+
});
|
|
18850
|
+
}
|
|
16236
18851
|
}
|
|
16237
18852
|
render() {
|
|
16238
|
-
|
|
18853
|
+
let className = "xpl-input";
|
|
18854
|
+
if (this.disabled)
|
|
18855
|
+
className += " xpl-input--disabled";
|
|
18856
|
+
let hasError = false;
|
|
18857
|
+
if (this.error !== undefined)
|
|
18858
|
+
hasError = true;
|
|
18859
|
+
if (this.multiline && this.maxCharacterCount !== undefined && this.characterCount > this.maxCharacterCount)
|
|
18860
|
+
hasError = true;
|
|
18861
|
+
if (hasError)
|
|
18862
|
+
className += " xpl-input--error";
|
|
18863
|
+
let type = this.type;
|
|
18864
|
+
if (type === "password" && this.passwordVisible) {
|
|
18865
|
+
type = "text";
|
|
18866
|
+
}
|
|
18867
|
+
return (h(Host, { class: className }, h("label", { class: "xpl-input-label", htmlFor: this._id }, this.label, this.description && h("small", null, this.description)), h("div", { class: "xpl-input-wrapper" }, this.pre && !this.multiline && h("label", { class: "xpl-input-pre", htmlFor: this._id }, this.pre), !this.multiline ?
|
|
18868
|
+
h("input", { autocomplete: this.type === "date" ? "off" : this.autocomplete, disabled: this.disabled, id: this._id, max: this.max, min: this.min, name: this.name, placeholder: this.placeholder, readonly: this.readonly, ref: (el) => {
|
|
18869
|
+
this.input = el;
|
|
18870
|
+
}, required: this.required, step: this.step, type: type, value: this.value }) :
|
|
18871
|
+
h("textarea", { disabled: this.disabled, id: this._id, name: this.name, onInput: () => this.updateCharacterCount(), placeholder: this.placeholder, readonly: this.readonly, ref: (el) => {
|
|
18872
|
+
this.input = el;
|
|
18873
|
+
}, required: this.required }, this.value), this.type === "date" && h("span", { class: "xpl-input-calendar" }, h("i", { class: "far fa-calendar-alt" })), this.type === "password" && h("button", { class: "xpl-input-password", onClick: () => {
|
|
18874
|
+
this.passwordVisible = !this.passwordVisible;
|
|
18875
|
+
}, role: "presentation" }, h("span", { class: "sr-only" }, "Toggle password visibility"), h("i", { class: "far fa-eye", style: {
|
|
18876
|
+
display: this.passwordVisible ? "none" : "block"
|
|
18877
|
+
} }), h("i", { class: "far fa-eye-slash", style: {
|
|
18878
|
+
display: this.passwordVisible ? "block" : "none"
|
|
18879
|
+
} })), this.post && !this.multiline && h("label", { class: "xpl-input-post", htmlFor: this._id }, this.post), this.multiline && this.maxCharacterCount !== undefined && h("span", { class: "xpl-input-characters" }, this.characterCount, "/", this.maxCharacterCount)), this.error !== undefined && this.error.length > 0 && h("label", { class: "xpl-input-error", htmlFor: this._id }, h("svg", { width: "10", height: "11", viewBox: "0 0 10 11", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M9.84375 5.25C9.84375 2.59375 7.65625 0.40625 5 0.40625C2.32422 0.40625 0.15625 2.59375 0.15625 5.25C0.15625 7.92578 2.32422 10.0938 5 10.0938C7.65625 10.0938 9.84375 7.92578 9.84375 5.25ZM5 6.22656C5.48828 6.22656 5.89844 6.63672 5.89844 7.125C5.89844 7.63281 5.48828 8.02344 5 8.02344C4.49219 8.02344 4.10156 7.63281 4.10156 7.125C4.10156 6.63672 4.49219 6.22656 5 6.22656ZM4.14062 3.00391C4.12109 2.86719 4.23828 2.75 4.375 2.75H5.60547C5.74219 2.75 5.85938 2.86719 5.83984 3.00391L5.70312 5.66016C5.68359 5.79688 5.58594 5.875 5.46875 5.875H4.51172C4.39453 5.875 4.29688 5.79688 4.27734 5.66016L4.14062 3.00391Z" })), this.error)));
|
|
16239
18880
|
}
|
|
16240
18881
|
};
|
|
16241
18882
|
|
|
16242
|
-
const
|
|
18883
|
+
const ListItemCpt = ({ avatar, avatars, badges, href, title, subtext, metadata }) => {
|
|
18884
|
+
const hasRight = avatars || badges || subtext;
|
|
18885
|
+
const inner = (h(Fragment, null, avatar && (avatar.slice(0, 1) === "/" || avatar.slice(0, 4) === "http" ?
|
|
18886
|
+
h("xpl-avatar", { src: avatar, name: title }) :
|
|
18887
|
+
h("xpl-avatar", { name: title }, avatar)), h("div", { class: "xpl-list-item-content" }, h("div", { class: "xpl-list-left" }, h("div", null, h("h4", null, title), metadata && (h("ul", { class: "xpl-list-item-metadata" }, metadata.map(d => {
|
|
18888
|
+
if (typeof d === "string") {
|
|
18889
|
+
return h("li", null, d);
|
|
18890
|
+
}
|
|
18891
|
+
else {
|
|
18892
|
+
return h("li", null, h("span", { class: `far fa-${d.icon}` }), " ", d.text);
|
|
18893
|
+
}
|
|
18894
|
+
}))))), hasRight && (h("div", { class: "xpl-list-right" }, subtext && h("div", { class: "xpl-list-item-subtext" }, subtext), avatars && (h("div", { class: "xpl-avatar-group xpl-avatar-group--s" }, avatars.map(a => h("img", { src: a, alt: "" })))), badges && badges.map(b => {
|
|
18895
|
+
if (typeof b === "string") {
|
|
18896
|
+
return h("xpl-badge", null, b);
|
|
18897
|
+
}
|
|
18898
|
+
else {
|
|
18899
|
+
return h("xpl-badge", { dot: b.dot, variant: b.variant }, b.text);
|
|
18900
|
+
}
|
|
18901
|
+
}))))));
|
|
18902
|
+
return href ?
|
|
18903
|
+
h("a", { class: "xpl-list-item", href: href }, inner) :
|
|
18904
|
+
h("div", { class: "xpl-list-item" }, inner);
|
|
18905
|
+
};
|
|
18906
|
+
const XplList$1 = class extends HTMLElement {
|
|
16243
18907
|
constructor() {
|
|
16244
18908
|
super();
|
|
16245
18909
|
this.__registerHost();
|
|
16246
18910
|
/**
|
|
16247
|
-
|
|
16248
|
-
|
|
16249
|
-
|
|
18911
|
+
* `items` should be an array of objects with the following signature:
|
|
18912
|
+
* {
|
|
18913
|
+
* avatar?: string; // The URL of the avatar, or the placeholder initials (ex. "SPD").
|
|
18914
|
+
* avatars?: string[]; // The URLs of multiple avatars to be displayed in a group on the right.
|
|
18915
|
+
* badges?: string[] | { // An array of strings or badge-like objects to be displayed as badges
|
|
18916
|
+
* dot?: boolean; // in a group on the right. See <xpl-badge> for more details.
|
|
18917
|
+
* text: string;
|
|
18918
|
+
* variant?: string;
|
|
18919
|
+
* }[];
|
|
18920
|
+
* href?: string; // A URL, if this list item is meant to link somewhere.
|
|
18921
|
+
* title: string; // The text to be displayed for the list item.
|
|
18922
|
+
* metadata?: string[] | { // An array of strings or strings with icons (reference the allowed
|
|
18923
|
+
* icon: string; // Font Awesome icons) to be displayed as metadata below the title.
|
|
18924
|
+
* text: string;
|
|
18925
|
+
* }[];
|
|
18926
|
+
* subtext?: string; // Subtext to be displayed on the right.
|
|
18927
|
+
* }
|
|
18928
|
+
*
|
|
18929
|
+
* - Note that you should *only use one of* `avatars`, `badges`, or `subtext`, to avoid cluttering
|
|
18930
|
+
* the right-hand side of the list item.
|
|
18931
|
+
*/
|
|
18932
|
+
this.items = [];
|
|
16250
18933
|
}
|
|
16251
18934
|
render() {
|
|
16252
|
-
return (h(Host, null,
|
|
18935
|
+
return (h(Host, null, this.items.map(item => h(ListItemCpt, Object.assign({}, item)))));
|
|
16253
18936
|
}
|
|
16254
18937
|
};
|
|
16255
18938
|
|
|
@@ -16351,10 +19034,21 @@ const XplRadio$1 = class extends HTMLElement {
|
|
|
16351
19034
|
constructor() {
|
|
16352
19035
|
super();
|
|
16353
19036
|
this.__registerHost();
|
|
19037
|
+
this.radioChange = createEvent(this, "radioChange", 7);
|
|
16354
19038
|
this.id = v4();
|
|
16355
19039
|
}
|
|
16356
19040
|
render() {
|
|
16357
|
-
return (h(Host, { class:
|
|
19041
|
+
return (h(Host, { class: {
|
|
19042
|
+
"xpl-checkbox-radio-container": true,
|
|
19043
|
+
"styled": this.styled,
|
|
19044
|
+
"disabled": this.disabled,
|
|
19045
|
+
} }, h("input", { class: "xpl-radio", type: "radio", checked: this.checked, disabled: this.disabled, id: this.id, name: this.name, required: this.required, value: this.value, onChange: () => this.radioChange.emit(true) }), h("label", { class: {
|
|
19046
|
+
"xpl-label": true,
|
|
19047
|
+
"xpl-label--disabled": this.disabled
|
|
19048
|
+
}, htmlFor: this.id }, h("slot", null), this.description && h("small", { class: {
|
|
19049
|
+
"xpl-description": true,
|
|
19050
|
+
"xpl-description--disabled": this.disabled
|
|
19051
|
+
} }, this.description))));
|
|
16358
19052
|
}
|
|
16359
19053
|
};
|
|
16360
19054
|
|
|
@@ -16368,6 +19062,622 @@ const XplSecondaryNav$1 = class extends HTMLElement {
|
|
|
16368
19062
|
}
|
|
16369
19063
|
};
|
|
16370
19064
|
|
|
19065
|
+
/// <reference path="./dropdownchoice.d.ts"></reference>
|
|
19066
|
+
const XplDropdown = ({ active, choices, mode, selected, update, }) => {
|
|
19067
|
+
return (h("div", { class: {
|
|
19068
|
+
"xpl-dropdown": true,
|
|
19069
|
+
"xpl-dropdown--multi": mode === "multi",
|
|
19070
|
+
"active": active,
|
|
19071
|
+
} },
|
|
19072
|
+
h("ul", null, choices.map(({ label, isGroupHeading }, i) => {
|
|
19073
|
+
return isGroupHeading ?
|
|
19074
|
+
h("span", null, label) :
|
|
19075
|
+
h("li", null,
|
|
19076
|
+
h("button", { class: {
|
|
19077
|
+
selected: selected[i]
|
|
19078
|
+
}, onClick: () => {
|
|
19079
|
+
let newSelected;
|
|
19080
|
+
if (mode === "single") {
|
|
19081
|
+
// @ts-expect-error
|
|
19082
|
+
newSelected = selected.map((v, j) => {
|
|
19083
|
+
return i === j ? !selected[i] : false;
|
|
19084
|
+
});
|
|
19085
|
+
active = false;
|
|
19086
|
+
}
|
|
19087
|
+
else if (mode === "multi") {
|
|
19088
|
+
newSelected = selected.map((v, j) => {
|
|
19089
|
+
return i === j ? !selected[i] : v;
|
|
19090
|
+
});
|
|
19091
|
+
}
|
|
19092
|
+
update(newSelected);
|
|
19093
|
+
}, tabIndex: active ? 0 : -1 }, label));
|
|
19094
|
+
}))));
|
|
19095
|
+
};
|
|
19096
|
+
|
|
19097
|
+
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
|
|
19098
|
+
|
|
19099
|
+
/**
|
|
19100
|
+
* lodash (Custom Build) <https://lodash.com/>
|
|
19101
|
+
* Build: `lodash modularize exports="npm" -o ./`
|
|
19102
|
+
* Copyright jQuery Foundation and other contributors <https://jquery.org/>
|
|
19103
|
+
* Released under MIT license <https://lodash.com/license>
|
|
19104
|
+
* Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
|
|
19105
|
+
* Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
|
|
19106
|
+
*/
|
|
19107
|
+
|
|
19108
|
+
/** Used as the `TypeError` message for "Functions" methods. */
|
|
19109
|
+
var FUNC_ERROR_TEXT = 'Expected a function';
|
|
19110
|
+
|
|
19111
|
+
/** Used as references for various `Number` constants. */
|
|
19112
|
+
var NAN = 0 / 0;
|
|
19113
|
+
|
|
19114
|
+
/** `Object#toString` result references. */
|
|
19115
|
+
var symbolTag = '[object Symbol]';
|
|
19116
|
+
|
|
19117
|
+
/** Used to match leading and trailing whitespace. */
|
|
19118
|
+
var reTrim = /^\s+|\s+$/g;
|
|
19119
|
+
|
|
19120
|
+
/** Used to detect bad signed hexadecimal string values. */
|
|
19121
|
+
var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;
|
|
19122
|
+
|
|
19123
|
+
/** Used to detect binary string values. */
|
|
19124
|
+
var reIsBinary = /^0b[01]+$/i;
|
|
19125
|
+
|
|
19126
|
+
/** Used to detect octal string values. */
|
|
19127
|
+
var reIsOctal = /^0o[0-7]+$/i;
|
|
19128
|
+
|
|
19129
|
+
/** Built-in method references without a dependency on `root`. */
|
|
19130
|
+
var freeParseInt = parseInt;
|
|
19131
|
+
|
|
19132
|
+
/** Detect free variable `global` from Node.js. */
|
|
19133
|
+
var freeGlobal = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
|
|
19134
|
+
|
|
19135
|
+
/** Detect free variable `self`. */
|
|
19136
|
+
var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
|
|
19137
|
+
|
|
19138
|
+
/** Used as a reference to the global object. */
|
|
19139
|
+
var root = freeGlobal || freeSelf || Function('return this')();
|
|
19140
|
+
|
|
19141
|
+
/** Used for built-in method references. */
|
|
19142
|
+
var objectProto = Object.prototype;
|
|
19143
|
+
|
|
19144
|
+
/**
|
|
19145
|
+
* Used to resolve the
|
|
19146
|
+
* [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
|
|
19147
|
+
* of values.
|
|
19148
|
+
*/
|
|
19149
|
+
var objectToString = objectProto.toString;
|
|
19150
|
+
|
|
19151
|
+
/* Built-in method references for those with the same name as other `lodash` methods. */
|
|
19152
|
+
var nativeMax = Math.max,
|
|
19153
|
+
nativeMin = Math.min;
|
|
19154
|
+
|
|
19155
|
+
/**
|
|
19156
|
+
* Gets the timestamp of the number of milliseconds that have elapsed since
|
|
19157
|
+
* the Unix epoch (1 January 1970 00:00:00 UTC).
|
|
19158
|
+
*
|
|
19159
|
+
* @static
|
|
19160
|
+
* @memberOf _
|
|
19161
|
+
* @since 2.4.0
|
|
19162
|
+
* @category Date
|
|
19163
|
+
* @returns {number} Returns the timestamp.
|
|
19164
|
+
* @example
|
|
19165
|
+
*
|
|
19166
|
+
* _.defer(function(stamp) {
|
|
19167
|
+
* console.log(_.now() - stamp);
|
|
19168
|
+
* }, _.now());
|
|
19169
|
+
* // => Logs the number of milliseconds it took for the deferred invocation.
|
|
19170
|
+
*/
|
|
19171
|
+
var now = function() {
|
|
19172
|
+
return root.Date.now();
|
|
19173
|
+
};
|
|
19174
|
+
|
|
19175
|
+
/**
|
|
19176
|
+
* Creates a debounced function that delays invoking `func` until after `wait`
|
|
19177
|
+
* milliseconds have elapsed since the last time the debounced function was
|
|
19178
|
+
* invoked. The debounced function comes with a `cancel` method to cancel
|
|
19179
|
+
* delayed `func` invocations and a `flush` method to immediately invoke them.
|
|
19180
|
+
* Provide `options` to indicate whether `func` should be invoked on the
|
|
19181
|
+
* leading and/or trailing edge of the `wait` timeout. The `func` is invoked
|
|
19182
|
+
* with the last arguments provided to the debounced function. Subsequent
|
|
19183
|
+
* calls to the debounced function return the result of the last `func`
|
|
19184
|
+
* invocation.
|
|
19185
|
+
*
|
|
19186
|
+
* **Note:** If `leading` and `trailing` options are `true`, `func` is
|
|
19187
|
+
* invoked on the trailing edge of the timeout only if the debounced function
|
|
19188
|
+
* is invoked more than once during the `wait` timeout.
|
|
19189
|
+
*
|
|
19190
|
+
* If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
|
|
19191
|
+
* until to the next tick, similar to `setTimeout` with a timeout of `0`.
|
|
19192
|
+
*
|
|
19193
|
+
* See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
|
|
19194
|
+
* for details over the differences between `_.debounce` and `_.throttle`.
|
|
19195
|
+
*
|
|
19196
|
+
* @static
|
|
19197
|
+
* @memberOf _
|
|
19198
|
+
* @since 0.1.0
|
|
19199
|
+
* @category Function
|
|
19200
|
+
* @param {Function} func The function to debounce.
|
|
19201
|
+
* @param {number} [wait=0] The number of milliseconds to delay.
|
|
19202
|
+
* @param {Object} [options={}] The options object.
|
|
19203
|
+
* @param {boolean} [options.leading=false]
|
|
19204
|
+
* Specify invoking on the leading edge of the timeout.
|
|
19205
|
+
* @param {number} [options.maxWait]
|
|
19206
|
+
* The maximum time `func` is allowed to be delayed before it's invoked.
|
|
19207
|
+
* @param {boolean} [options.trailing=true]
|
|
19208
|
+
* Specify invoking on the trailing edge of the timeout.
|
|
19209
|
+
* @returns {Function} Returns the new debounced function.
|
|
19210
|
+
* @example
|
|
19211
|
+
*
|
|
19212
|
+
* // Avoid costly calculations while the window size is in flux.
|
|
19213
|
+
* jQuery(window).on('resize', _.debounce(calculateLayout, 150));
|
|
19214
|
+
*
|
|
19215
|
+
* // Invoke `sendMail` when clicked, debouncing subsequent calls.
|
|
19216
|
+
* jQuery(element).on('click', _.debounce(sendMail, 300, {
|
|
19217
|
+
* 'leading': true,
|
|
19218
|
+
* 'trailing': false
|
|
19219
|
+
* }));
|
|
19220
|
+
*
|
|
19221
|
+
* // Ensure `batchLog` is invoked once after 1 second of debounced calls.
|
|
19222
|
+
* var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 });
|
|
19223
|
+
* var source = new EventSource('/stream');
|
|
19224
|
+
* jQuery(source).on('message', debounced);
|
|
19225
|
+
*
|
|
19226
|
+
* // Cancel the trailing debounced invocation.
|
|
19227
|
+
* jQuery(window).on('popstate', debounced.cancel);
|
|
19228
|
+
*/
|
|
19229
|
+
function debounce(func, wait, options) {
|
|
19230
|
+
var lastArgs,
|
|
19231
|
+
lastThis,
|
|
19232
|
+
maxWait,
|
|
19233
|
+
result,
|
|
19234
|
+
timerId,
|
|
19235
|
+
lastCallTime,
|
|
19236
|
+
lastInvokeTime = 0,
|
|
19237
|
+
leading = false,
|
|
19238
|
+
maxing = false,
|
|
19239
|
+
trailing = true;
|
|
19240
|
+
|
|
19241
|
+
if (typeof func != 'function') {
|
|
19242
|
+
throw new TypeError(FUNC_ERROR_TEXT);
|
|
19243
|
+
}
|
|
19244
|
+
wait = toNumber(wait) || 0;
|
|
19245
|
+
if (isObject(options)) {
|
|
19246
|
+
leading = !!options.leading;
|
|
19247
|
+
maxing = 'maxWait' in options;
|
|
19248
|
+
maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait;
|
|
19249
|
+
trailing = 'trailing' in options ? !!options.trailing : trailing;
|
|
19250
|
+
}
|
|
19251
|
+
|
|
19252
|
+
function invokeFunc(time) {
|
|
19253
|
+
var args = lastArgs,
|
|
19254
|
+
thisArg = lastThis;
|
|
19255
|
+
|
|
19256
|
+
lastArgs = lastThis = undefined;
|
|
19257
|
+
lastInvokeTime = time;
|
|
19258
|
+
result = func.apply(thisArg, args);
|
|
19259
|
+
return result;
|
|
19260
|
+
}
|
|
19261
|
+
|
|
19262
|
+
function leadingEdge(time) {
|
|
19263
|
+
// Reset any `maxWait` timer.
|
|
19264
|
+
lastInvokeTime = time;
|
|
19265
|
+
// Start the timer for the trailing edge.
|
|
19266
|
+
timerId = setTimeout(timerExpired, wait);
|
|
19267
|
+
// Invoke the leading edge.
|
|
19268
|
+
return leading ? invokeFunc(time) : result;
|
|
19269
|
+
}
|
|
19270
|
+
|
|
19271
|
+
function remainingWait(time) {
|
|
19272
|
+
var timeSinceLastCall = time - lastCallTime,
|
|
19273
|
+
timeSinceLastInvoke = time - lastInvokeTime,
|
|
19274
|
+
result = wait - timeSinceLastCall;
|
|
19275
|
+
|
|
19276
|
+
return maxing ? nativeMin(result, maxWait - timeSinceLastInvoke) : result;
|
|
19277
|
+
}
|
|
19278
|
+
|
|
19279
|
+
function shouldInvoke(time) {
|
|
19280
|
+
var timeSinceLastCall = time - lastCallTime,
|
|
19281
|
+
timeSinceLastInvoke = time - lastInvokeTime;
|
|
19282
|
+
|
|
19283
|
+
// Either this is the first call, activity has stopped and we're at the
|
|
19284
|
+
// trailing edge, the system time has gone backwards and we're treating
|
|
19285
|
+
// it as the trailing edge, or we've hit the `maxWait` limit.
|
|
19286
|
+
return (lastCallTime === undefined || (timeSinceLastCall >= wait) ||
|
|
19287
|
+
(timeSinceLastCall < 0) || (maxing && timeSinceLastInvoke >= maxWait));
|
|
19288
|
+
}
|
|
19289
|
+
|
|
19290
|
+
function timerExpired() {
|
|
19291
|
+
var time = now();
|
|
19292
|
+
if (shouldInvoke(time)) {
|
|
19293
|
+
return trailingEdge(time);
|
|
19294
|
+
}
|
|
19295
|
+
// Restart the timer.
|
|
19296
|
+
timerId = setTimeout(timerExpired, remainingWait(time));
|
|
19297
|
+
}
|
|
19298
|
+
|
|
19299
|
+
function trailingEdge(time) {
|
|
19300
|
+
timerId = undefined;
|
|
19301
|
+
|
|
19302
|
+
// Only invoke if we have `lastArgs` which means `func` has been
|
|
19303
|
+
// debounced at least once.
|
|
19304
|
+
if (trailing && lastArgs) {
|
|
19305
|
+
return invokeFunc(time);
|
|
19306
|
+
}
|
|
19307
|
+
lastArgs = lastThis = undefined;
|
|
19308
|
+
return result;
|
|
19309
|
+
}
|
|
19310
|
+
|
|
19311
|
+
function cancel() {
|
|
19312
|
+
if (timerId !== undefined) {
|
|
19313
|
+
clearTimeout(timerId);
|
|
19314
|
+
}
|
|
19315
|
+
lastInvokeTime = 0;
|
|
19316
|
+
lastArgs = lastCallTime = lastThis = timerId = undefined;
|
|
19317
|
+
}
|
|
19318
|
+
|
|
19319
|
+
function flush() {
|
|
19320
|
+
return timerId === undefined ? result : trailingEdge(now());
|
|
19321
|
+
}
|
|
19322
|
+
|
|
19323
|
+
function debounced() {
|
|
19324
|
+
var time = now(),
|
|
19325
|
+
isInvoking = shouldInvoke(time);
|
|
19326
|
+
|
|
19327
|
+
lastArgs = arguments;
|
|
19328
|
+
lastThis = this;
|
|
19329
|
+
lastCallTime = time;
|
|
19330
|
+
|
|
19331
|
+
if (isInvoking) {
|
|
19332
|
+
if (timerId === undefined) {
|
|
19333
|
+
return leadingEdge(lastCallTime);
|
|
19334
|
+
}
|
|
19335
|
+
if (maxing) {
|
|
19336
|
+
// Handle invocations in a tight loop.
|
|
19337
|
+
timerId = setTimeout(timerExpired, wait);
|
|
19338
|
+
return invokeFunc(lastCallTime);
|
|
19339
|
+
}
|
|
19340
|
+
}
|
|
19341
|
+
if (timerId === undefined) {
|
|
19342
|
+
timerId = setTimeout(timerExpired, wait);
|
|
19343
|
+
}
|
|
19344
|
+
return result;
|
|
19345
|
+
}
|
|
19346
|
+
debounced.cancel = cancel;
|
|
19347
|
+
debounced.flush = flush;
|
|
19348
|
+
return debounced;
|
|
19349
|
+
}
|
|
19350
|
+
|
|
19351
|
+
/**
|
|
19352
|
+
* Creates a throttled function that only invokes `func` at most once per
|
|
19353
|
+
* every `wait` milliseconds. The throttled function comes with a `cancel`
|
|
19354
|
+
* method to cancel delayed `func` invocations and a `flush` method to
|
|
19355
|
+
* immediately invoke them. Provide `options` to indicate whether `func`
|
|
19356
|
+
* should be invoked on the leading and/or trailing edge of the `wait`
|
|
19357
|
+
* timeout. The `func` is invoked with the last arguments provided to the
|
|
19358
|
+
* throttled function. Subsequent calls to the throttled function return the
|
|
19359
|
+
* result of the last `func` invocation.
|
|
19360
|
+
*
|
|
19361
|
+
* **Note:** If `leading` and `trailing` options are `true`, `func` is
|
|
19362
|
+
* invoked on the trailing edge of the timeout only if the throttled function
|
|
19363
|
+
* is invoked more than once during the `wait` timeout.
|
|
19364
|
+
*
|
|
19365
|
+
* If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
|
|
19366
|
+
* until to the next tick, similar to `setTimeout` with a timeout of `0`.
|
|
19367
|
+
*
|
|
19368
|
+
* See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
|
|
19369
|
+
* for details over the differences between `_.throttle` and `_.debounce`.
|
|
19370
|
+
*
|
|
19371
|
+
* @static
|
|
19372
|
+
* @memberOf _
|
|
19373
|
+
* @since 0.1.0
|
|
19374
|
+
* @category Function
|
|
19375
|
+
* @param {Function} func The function to throttle.
|
|
19376
|
+
* @param {number} [wait=0] The number of milliseconds to throttle invocations to.
|
|
19377
|
+
* @param {Object} [options={}] The options object.
|
|
19378
|
+
* @param {boolean} [options.leading=true]
|
|
19379
|
+
* Specify invoking on the leading edge of the timeout.
|
|
19380
|
+
* @param {boolean} [options.trailing=true]
|
|
19381
|
+
* Specify invoking on the trailing edge of the timeout.
|
|
19382
|
+
* @returns {Function} Returns the new throttled function.
|
|
19383
|
+
* @example
|
|
19384
|
+
*
|
|
19385
|
+
* // Avoid excessively updating the position while scrolling.
|
|
19386
|
+
* jQuery(window).on('scroll', _.throttle(updatePosition, 100));
|
|
19387
|
+
*
|
|
19388
|
+
* // Invoke `renewToken` when the click event is fired, but not more than once every 5 minutes.
|
|
19389
|
+
* var throttled = _.throttle(renewToken, 300000, { 'trailing': false });
|
|
19390
|
+
* jQuery(element).on('click', throttled);
|
|
19391
|
+
*
|
|
19392
|
+
* // Cancel the trailing throttled invocation.
|
|
19393
|
+
* jQuery(window).on('popstate', throttled.cancel);
|
|
19394
|
+
*/
|
|
19395
|
+
function throttle(func, wait, options) {
|
|
19396
|
+
var leading = true,
|
|
19397
|
+
trailing = true;
|
|
19398
|
+
|
|
19399
|
+
if (typeof func != 'function') {
|
|
19400
|
+
throw new TypeError(FUNC_ERROR_TEXT);
|
|
19401
|
+
}
|
|
19402
|
+
if (isObject(options)) {
|
|
19403
|
+
leading = 'leading' in options ? !!options.leading : leading;
|
|
19404
|
+
trailing = 'trailing' in options ? !!options.trailing : trailing;
|
|
19405
|
+
}
|
|
19406
|
+
return debounce(func, wait, {
|
|
19407
|
+
'leading': leading,
|
|
19408
|
+
'maxWait': wait,
|
|
19409
|
+
'trailing': trailing
|
|
19410
|
+
});
|
|
19411
|
+
}
|
|
19412
|
+
|
|
19413
|
+
/**
|
|
19414
|
+
* Checks if `value` is the
|
|
19415
|
+
* [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
|
|
19416
|
+
* of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
|
|
19417
|
+
*
|
|
19418
|
+
* @static
|
|
19419
|
+
* @memberOf _
|
|
19420
|
+
* @since 0.1.0
|
|
19421
|
+
* @category Lang
|
|
19422
|
+
* @param {*} value The value to check.
|
|
19423
|
+
* @returns {boolean} Returns `true` if `value` is an object, else `false`.
|
|
19424
|
+
* @example
|
|
19425
|
+
*
|
|
19426
|
+
* _.isObject({});
|
|
19427
|
+
* // => true
|
|
19428
|
+
*
|
|
19429
|
+
* _.isObject([1, 2, 3]);
|
|
19430
|
+
* // => true
|
|
19431
|
+
*
|
|
19432
|
+
* _.isObject(_.noop);
|
|
19433
|
+
* // => true
|
|
19434
|
+
*
|
|
19435
|
+
* _.isObject(null);
|
|
19436
|
+
* // => false
|
|
19437
|
+
*/
|
|
19438
|
+
function isObject(value) {
|
|
19439
|
+
var type = typeof value;
|
|
19440
|
+
return !!value && (type == 'object' || type == 'function');
|
|
19441
|
+
}
|
|
19442
|
+
|
|
19443
|
+
/**
|
|
19444
|
+
* Checks if `value` is object-like. A value is object-like if it's not `null`
|
|
19445
|
+
* and has a `typeof` result of "object".
|
|
19446
|
+
*
|
|
19447
|
+
* @static
|
|
19448
|
+
* @memberOf _
|
|
19449
|
+
* @since 4.0.0
|
|
19450
|
+
* @category Lang
|
|
19451
|
+
* @param {*} value The value to check.
|
|
19452
|
+
* @returns {boolean} Returns `true` if `value` is object-like, else `false`.
|
|
19453
|
+
* @example
|
|
19454
|
+
*
|
|
19455
|
+
* _.isObjectLike({});
|
|
19456
|
+
* // => true
|
|
19457
|
+
*
|
|
19458
|
+
* _.isObjectLike([1, 2, 3]);
|
|
19459
|
+
* // => true
|
|
19460
|
+
*
|
|
19461
|
+
* _.isObjectLike(_.noop);
|
|
19462
|
+
* // => false
|
|
19463
|
+
*
|
|
19464
|
+
* _.isObjectLike(null);
|
|
19465
|
+
* // => false
|
|
19466
|
+
*/
|
|
19467
|
+
function isObjectLike(value) {
|
|
19468
|
+
return !!value && typeof value == 'object';
|
|
19469
|
+
}
|
|
19470
|
+
|
|
19471
|
+
/**
|
|
19472
|
+
* Checks if `value` is classified as a `Symbol` primitive or object.
|
|
19473
|
+
*
|
|
19474
|
+
* @static
|
|
19475
|
+
* @memberOf _
|
|
19476
|
+
* @since 4.0.0
|
|
19477
|
+
* @category Lang
|
|
19478
|
+
* @param {*} value The value to check.
|
|
19479
|
+
* @returns {boolean} Returns `true` if `value` is a symbol, else `false`.
|
|
19480
|
+
* @example
|
|
19481
|
+
*
|
|
19482
|
+
* _.isSymbol(Symbol.iterator);
|
|
19483
|
+
* // => true
|
|
19484
|
+
*
|
|
19485
|
+
* _.isSymbol('abc');
|
|
19486
|
+
* // => false
|
|
19487
|
+
*/
|
|
19488
|
+
function isSymbol(value) {
|
|
19489
|
+
return typeof value == 'symbol' ||
|
|
19490
|
+
(isObjectLike(value) && objectToString.call(value) == symbolTag);
|
|
19491
|
+
}
|
|
19492
|
+
|
|
19493
|
+
/**
|
|
19494
|
+
* Converts `value` to a number.
|
|
19495
|
+
*
|
|
19496
|
+
* @static
|
|
19497
|
+
* @memberOf _
|
|
19498
|
+
* @since 4.0.0
|
|
19499
|
+
* @category Lang
|
|
19500
|
+
* @param {*} value The value to process.
|
|
19501
|
+
* @returns {number} Returns the number.
|
|
19502
|
+
* @example
|
|
19503
|
+
*
|
|
19504
|
+
* _.toNumber(3.2);
|
|
19505
|
+
* // => 3.2
|
|
19506
|
+
*
|
|
19507
|
+
* _.toNumber(Number.MIN_VALUE);
|
|
19508
|
+
* // => 5e-324
|
|
19509
|
+
*
|
|
19510
|
+
* _.toNumber(Infinity);
|
|
19511
|
+
* // => Infinity
|
|
19512
|
+
*
|
|
19513
|
+
* _.toNumber('3.2');
|
|
19514
|
+
* // => 3.2
|
|
19515
|
+
*/
|
|
19516
|
+
function toNumber(value) {
|
|
19517
|
+
if (typeof value == 'number') {
|
|
19518
|
+
return value;
|
|
19519
|
+
}
|
|
19520
|
+
if (isSymbol(value)) {
|
|
19521
|
+
return NAN;
|
|
19522
|
+
}
|
|
19523
|
+
if (isObject(value)) {
|
|
19524
|
+
var other = typeof value.valueOf == 'function' ? value.valueOf() : value;
|
|
19525
|
+
value = isObject(other) ? (other + '') : other;
|
|
19526
|
+
}
|
|
19527
|
+
if (typeof value != 'string') {
|
|
19528
|
+
return value === 0 ? value : +value;
|
|
19529
|
+
}
|
|
19530
|
+
value = value.replace(reTrim, '');
|
|
19531
|
+
var isBinary = reIsBinary.test(value);
|
|
19532
|
+
return (isBinary || reIsOctal.test(value))
|
|
19533
|
+
? freeParseInt(value.slice(2), isBinary ? 2 : 8)
|
|
19534
|
+
: (reIsBadHex.test(value) ? NAN : +value);
|
|
19535
|
+
}
|
|
19536
|
+
|
|
19537
|
+
var lodash_throttle = throttle;
|
|
19538
|
+
|
|
19539
|
+
function tagWidth(text) {
|
|
19540
|
+
const context = document.createElement("canvas").getContext("2d");
|
|
19541
|
+
context.font = "14px apple-system, system-ui, 'Segoe UI', Arial, Helvetica, Roboto, sans-serif";
|
|
19542
|
+
return context.measureText(text).width + 44; // = text + l/r padding + margin-right
|
|
19543
|
+
}
|
|
19544
|
+
const XplSelect$1 = class extends HTMLElement {
|
|
19545
|
+
constructor() {
|
|
19546
|
+
super();
|
|
19547
|
+
this.__registerHost();
|
|
19548
|
+
/**
|
|
19549
|
+
* An array of choices for the user to choose from.
|
|
19550
|
+
* Each choice should be of the form:
|
|
19551
|
+
* {
|
|
19552
|
+
* label: string;
|
|
19553
|
+
* href?: string;
|
|
19554
|
+
* value?: string;
|
|
19555
|
+
* isGroupHeading?: boolean;
|
|
19556
|
+
* }
|
|
19557
|
+
*/
|
|
19558
|
+
this.choices = [];
|
|
19559
|
+
/**
|
|
19560
|
+
* Whether to allow a single choice or multiple choices.
|
|
19561
|
+
*/
|
|
19562
|
+
this.mode = "single";
|
|
19563
|
+
/**
|
|
19564
|
+
* Only used in multi-choice selects. If `true`,
|
|
19565
|
+
* badges representing selections that would overflow the
|
|
19566
|
+
* container are replaced with "+x more" (where x is the
|
|
19567
|
+
* number not shown). If `false`, the container's height will
|
|
19568
|
+
* adjust to show all badges representing selections.
|
|
19569
|
+
*/
|
|
19570
|
+
this.truncate = true;
|
|
19571
|
+
this.active = false;
|
|
19572
|
+
this.id = v4();
|
|
19573
|
+
this.keepFocus = false;
|
|
19574
|
+
this.value = "";
|
|
19575
|
+
// infinity isn't real, it's just a mathematical construct, it can't hurt you
|
|
19576
|
+
this.visibleChoices = Infinity;
|
|
19577
|
+
}
|
|
19578
|
+
componentWillLoad() {
|
|
19579
|
+
this.selected = this.choices && this.choices.length > 0 ? this.choices.map(() => false) : [];
|
|
19580
|
+
window.addEventListener("click", (e) => {
|
|
19581
|
+
const el = e.target;
|
|
19582
|
+
const select = el.closest(".xpl-select");
|
|
19583
|
+
if (select === null || select !== this.container) {
|
|
19584
|
+
this.active = false;
|
|
19585
|
+
}
|
|
19586
|
+
});
|
|
19587
|
+
window.addEventListener("resize", lodash_throttle(() => {
|
|
19588
|
+
this.maybeTruncateChoices();
|
|
19589
|
+
}, 250));
|
|
19590
|
+
}
|
|
19591
|
+
maybeTruncateChoices() {
|
|
19592
|
+
if (this.mode === "single" || !this.truncate)
|
|
19593
|
+
return;
|
|
19594
|
+
const containerWidth = this.container.getBoundingClientRect().width;
|
|
19595
|
+
let visibleChoices = 0;
|
|
19596
|
+
let visibleChoicesWidth = 0;
|
|
19597
|
+
const actualNumSelected = this.selected.filter(a => a).length;
|
|
19598
|
+
for (let i = 0; i < actualNumSelected; i++) {
|
|
19599
|
+
visibleChoicesWidth += tagWidth(this.getDisplayValue(i));
|
|
19600
|
+
if (visibleChoicesWidth > containerWidth - 140)
|
|
19601
|
+
break;
|
|
19602
|
+
visibleChoices++;
|
|
19603
|
+
}
|
|
19604
|
+
if (visibleChoices >= actualNumSelected)
|
|
19605
|
+
visibleChoices = Infinity;
|
|
19606
|
+
if (visibleChoices < 1)
|
|
19607
|
+
visibleChoices = 1;
|
|
19608
|
+
this.visibleChoices = visibleChoices;
|
|
19609
|
+
}
|
|
19610
|
+
getDisplayValue(i) {
|
|
19611
|
+
return this.choices[i].label;
|
|
19612
|
+
}
|
|
19613
|
+
getActualValue(i) {
|
|
19614
|
+
return this.choices[i].value || this.choices[i].label;
|
|
19615
|
+
}
|
|
19616
|
+
update(selected) {
|
|
19617
|
+
this.selected = selected;
|
|
19618
|
+
if (this.mode === "single") {
|
|
19619
|
+
const selected = this.selected.findIndex(v => v);
|
|
19620
|
+
this.value = selected >= 0 ?
|
|
19621
|
+
this.getActualValue(selected) :
|
|
19622
|
+
"";
|
|
19623
|
+
}
|
|
19624
|
+
else if (this.mode === "multi") {
|
|
19625
|
+
this.value = this.selected.map((v, i) => {
|
|
19626
|
+
return v ? this.getActualValue(i) : "";
|
|
19627
|
+
}).filter(v => v.length > 0).join("|");
|
|
19628
|
+
}
|
|
19629
|
+
}
|
|
19630
|
+
render() {
|
|
19631
|
+
let visibleChoices = 0;
|
|
19632
|
+
return (h(Host, { class: {
|
|
19633
|
+
"xpl-select": true,
|
|
19634
|
+
"xpl-select--disabled": this.disabled,
|
|
19635
|
+
"xpl-select--no-truncate": !this.truncate,
|
|
19636
|
+
}, onKeyDown: (e) => {
|
|
19637
|
+
if (e.key === "Escape")
|
|
19638
|
+
this.active = false;
|
|
19639
|
+
}, ref: (el) => (this.container = el) }, this.label || this.description ? (h("label", { class: {
|
|
19640
|
+
"xpl-label": true,
|
|
19641
|
+
"xpl-label--disabled": this.disabled,
|
|
19642
|
+
}, htmlFor: this.id }, this.label, this.description && h("small", { class: {
|
|
19643
|
+
"xpl-description": true,
|
|
19644
|
+
"xpl-description--disabled": this.disabled,
|
|
19645
|
+
} }, this.description))) : null, h("div", { class: {
|
|
19646
|
+
"xpl-input": true,
|
|
19647
|
+
"xpl-input--disabled": this.disabled,
|
|
19648
|
+
"xpl-input--error": this.error !== undefined
|
|
19649
|
+
} }, h("div", { class: "xpl-input-wrapper" }, h("div", { class: {
|
|
19650
|
+
"xpl-select-value": true,
|
|
19651
|
+
"xpl-select-value--active": this.mode === "multi" && this.value.length > 0,
|
|
19652
|
+
"has-value": this.value.length > 0,
|
|
19653
|
+
} }, this.mode === "single" ?
|
|
19654
|
+
(this.value || this.placeholder) :
|
|
19655
|
+
(this.value.length > 0 ?
|
|
19656
|
+
this.selected.map((v, i) => {
|
|
19657
|
+
if (!v)
|
|
19658
|
+
return null;
|
|
19659
|
+
if (visibleChoices >= this.visibleChoices)
|
|
19660
|
+
return null;
|
|
19661
|
+
visibleChoices++;
|
|
19662
|
+
return (h("xpl-tag", { onClose: () => {
|
|
19663
|
+
this.selected = this.selected.map((v, j) => i === j ? false : v);
|
|
19664
|
+
this.update(this.selected);
|
|
19665
|
+
this.maybeTruncateChoices();
|
|
19666
|
+
} }, this.getDisplayValue(i)));
|
|
19667
|
+
}) :
|
|
19668
|
+
this.placeholder), this.visibleChoices < Infinity && `+ ${this.selected.filter(a => a).length - this.visibleChoices} more`), h("button", { disabled: this.disabled, id: this.id, onKeyDown: (e) => {
|
|
19669
|
+
if (e.key === "Tab")
|
|
19670
|
+
this.keepFocus = true;
|
|
19671
|
+
}, onClick: () => {
|
|
19672
|
+
if (!this.disabled)
|
|
19673
|
+
this.active = !this.active;
|
|
19674
|
+
} })), !this.disabled && (h(XplDropdown, { active: this.active, choices: this.choices, mode: this.mode, selected: this.selected, update: (selected) => {
|
|
19675
|
+
this.update(selected);
|
|
19676
|
+
this.maybeTruncateChoices();
|
|
19677
|
+
} })), this.error !== undefined && this.error.length > 0 && h("label", { class: "xpl-input-error", htmlFor: this.id }, h("svg", { width: "10", height: "11", viewBox: "0 0 10 11", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M9.84375 5.25C9.84375 2.59375 7.65625 0.40625 5 0.40625C2.32422 0.40625 0.15625 2.59375 0.15625 5.25C0.15625 7.92578 2.32422 10.0938 5 10.0938C7.65625 10.0938 9.84375 7.92578 9.84375 5.25ZM5 6.22656C5.48828 6.22656 5.89844 6.63672 5.89844 7.125C5.89844 7.63281 5.48828 8.02344 5 8.02344C4.49219 8.02344 4.10156 7.63281 4.10156 7.125C4.10156 6.63672 4.49219 6.22656 5 6.22656ZM4.14062 3.00391C4.12109 2.86719 4.23828 2.75 4.375 2.75H5.60547C5.74219 2.75 5.85938 2.86719 5.83984 3.00391L5.70312 5.66016C5.68359 5.79688 5.58594 5.875 5.46875 5.875H4.51172C4.39453 5.875 4.29688 5.79688 4.27734 5.66016L4.14062 3.00391Z" })), this.error)), h("input", { type: "hidden", value: this.value })));
|
|
19678
|
+
}
|
|
19679
|
+
};
|
|
19680
|
+
|
|
16371
19681
|
const XplTable$1 = class extends HTMLElement {
|
|
16372
19682
|
constructor() {
|
|
16373
19683
|
super();
|
|
@@ -16422,7 +19732,7 @@ const XplTable$1 = class extends HTMLElement {
|
|
|
16422
19732
|
}
|
|
16423
19733
|
componentWillLoad() {
|
|
16424
19734
|
this.areAllSelected = false;
|
|
16425
|
-
this.rowData = this.data ? Array.from(this.data) : [];
|
|
19735
|
+
this.rowData = this.data !== undefined ? Array.from(this.data) : [];
|
|
16426
19736
|
this.selected = new Array(this.rowData.length).fill(false);
|
|
16427
19737
|
}
|
|
16428
19738
|
render() {
|
|
@@ -16451,6 +19761,48 @@ const XplTable$1 = class extends HTMLElement {
|
|
|
16451
19761
|
}
|
|
16452
19762
|
};
|
|
16453
19763
|
|
|
19764
|
+
const XplTag$1 = class extends HTMLElement {
|
|
19765
|
+
constructor() {
|
|
19766
|
+
super();
|
|
19767
|
+
this.__registerHost();
|
|
19768
|
+
this.close = createEvent(this, "close", 7);
|
|
19769
|
+
}
|
|
19770
|
+
render() {
|
|
19771
|
+
return (h(Host, { class: "xpl-tag-container" }, h("button", { class: "xpl-tag", onClick: () => {
|
|
19772
|
+
this.close.emit();
|
|
19773
|
+
} }, h("slot", null)), h("button", { class: "xpl-tag__close", onClick: () => {
|
|
19774
|
+
this.close.emit();
|
|
19775
|
+
} }, "\u00D7")));
|
|
19776
|
+
}
|
|
19777
|
+
};
|
|
19778
|
+
|
|
19779
|
+
const XplToggle$1 = class extends HTMLElement {
|
|
19780
|
+
constructor() {
|
|
19781
|
+
super();
|
|
19782
|
+
this.__registerHost();
|
|
19783
|
+
/**
|
|
19784
|
+
* The size of the toggle -- `default` or `small`
|
|
19785
|
+
*/
|
|
19786
|
+
this.variant = "default";
|
|
19787
|
+
this.id = v4();
|
|
19788
|
+
}
|
|
19789
|
+
render() {
|
|
19790
|
+
let containerClassName = "xpl-toggle-container";
|
|
19791
|
+
if (this.disabled)
|
|
19792
|
+
containerClassName += " xpl-toggle-container--disabled";
|
|
19793
|
+
let className = "xpl-toggle";
|
|
19794
|
+
if (this.variant === "small")
|
|
19795
|
+
className += " xpl-toggle--small";
|
|
19796
|
+
return (h(Host, { class: containerClassName }, (this.heading || this.description) && (h("label", { class: {
|
|
19797
|
+
"xpl-label": true,
|
|
19798
|
+
"xpl-label--disabled": this.disabled
|
|
19799
|
+
}, htmlFor: this.id }, this.heading, this.description && h("small", { class: {
|
|
19800
|
+
"xpl-description": true,
|
|
19801
|
+
"xpl-description--disabled": this.disabled
|
|
19802
|
+
} }, this.description))), h("input", { class: className, type: "checkbox", checked: this.checked, disabled: this.disabled, id: this.id, name: this.name }), this.label && h("label", { htmlFor: this.id }, this.label)));
|
|
19803
|
+
}
|
|
19804
|
+
};
|
|
19805
|
+
|
|
16454
19806
|
const XplUtilityBar$1 = class extends HTMLElement {
|
|
16455
19807
|
constructor() {
|
|
16456
19808
|
super();
|
|
@@ -16467,15 +19819,24 @@ const XplBadge = /*@__PURE__*/proxyCustomElement(XplBadge$1, [4,"xpl-badge",{"do
|
|
|
16467
19819
|
const XplBreadcrumbItem = /*@__PURE__*/proxyCustomElement(XplBreadcrumbItem$1, [4,"xpl-breadcrumb-item"]);
|
|
16468
19820
|
const XplBreadcrumbs = /*@__PURE__*/proxyCustomElement(XplBreadcrumbs$1, [4,"xpl-breadcrumbs"]);
|
|
16469
19821
|
const XplButton = /*@__PURE__*/proxyCustomElement(XplButton$1, [4,"xpl-button",{"disabled":[4],"href":[1],"icon":[1],"iconOnly":[4,"icon-only"],"iconTrailing":[4,"icon-trailing"],"name":[1],"size":[1],"type":[1],"value":[1],"variant":[1]}]);
|
|
16470
|
-
const
|
|
16471
|
-
const
|
|
19822
|
+
const XplButtonRow = /*@__PURE__*/proxyCustomElement(XplButtonRow$1, [0,"xpl-button-row",{"primary":[1],"secondary":[1],"tertiary":[1]}]);
|
|
19823
|
+
const XplCheckbox = /*@__PURE__*/proxyCustomElement(XplCheckbox$1, [4,"xpl-checkbox",{"checked":[4],"description":[1],"disabled":[4],"indeterminate":[4],"name":[1],"required":[4],"styled":[4],"value":[1],"id":[32]}]);
|
|
19824
|
+
const XplChoicelist = /*@__PURE__*/proxyCustomElement(XplChoicelist$1, [0,"xpl-choicelist",{"choices":[16],"description":[1],"heading":[1],"multi":[4],"name":[1],"styled":[4],"selected":[32]}]);
|
|
16472
19825
|
const XplContentArea = /*@__PURE__*/proxyCustomElement(XplContentArea$1, [4,"xpl-content-area",{"size":[1]}]);
|
|
19826
|
+
const XplDivider = /*@__PURE__*/proxyCustomElement(XplDivider$1, [4,"xpl-divider",{"tier":[2]}]);
|
|
19827
|
+
const XplGrid = /*@__PURE__*/proxyCustomElement(XplGrid$1, [0,"xpl-grid"]);
|
|
19828
|
+
const XplGridItem = /*@__PURE__*/proxyCustomElement(XplGridItem$1, [4,"xpl-grid-item",{"xs":[2],"sm":[2],"md":[2],"lg":[2]}]);
|
|
19829
|
+
const XplInput = /*@__PURE__*/proxyCustomElement(XplInput$1, [0,"xpl-input",{"_id":[1],"autocomplete":[1],"dateFormat":[1,"date-format"],"description":[1],"disabled":[4],"error":[1],"label":[1],"max":[8],"maxCharacterCount":[2,"max-character-count"],"min":[8],"mode":[1],"multiline":[4],"name":[1],"placeholder":[1],"post":[1],"pre":[1],"readonly":[4],"required":[4],"step":[2],"type":[1],"value":[1],"characterCount":[32],"passwordVisible":[32]}]);
|
|
19830
|
+
const XplList = /*@__PURE__*/proxyCustomElement(XplList$1, [0,"xpl-list",{"items":[16]}]);
|
|
16473
19831
|
const XplMainNav = /*@__PURE__*/proxyCustomElement(XplMainNav$1, [4,"xpl-main-nav",{"width":[1]}]);
|
|
16474
19832
|
const XplNavItem = /*@__PURE__*/proxyCustomElement(XplNavItem$1, [4,"xpl-nav-item"]);
|
|
16475
19833
|
const XplPagination = /*@__PURE__*/proxyCustomElement(XplPagination$1, [0,"xpl-pagination",{"total":[2],"perPage":[2,"per-page"],"waitForCallback":[4,"wait-for-callback"],"current":[32]}]);
|
|
16476
|
-
const XplRadio = /*@__PURE__*/proxyCustomElement(XplRadio$1, [4,"xpl-radio",{"checked":[4],"description":[1],"disabled":[4],"name":[1],"required":[4],"value":[1],"id":[32]}]);
|
|
19834
|
+
const XplRadio = /*@__PURE__*/proxyCustomElement(XplRadio$1, [4,"xpl-radio",{"checked":[4],"description":[1],"disabled":[4],"name":[1],"required":[4],"styled":[4],"value":[1],"id":[32]}]);
|
|
16477
19835
|
const XplSecondaryNav = /*@__PURE__*/proxyCustomElement(XplSecondaryNav$1, [4,"xpl-secondary-nav"]);
|
|
19836
|
+
const XplSelect = /*@__PURE__*/proxyCustomElement(XplSelect$1, [0,"xpl-select",{"choices":[16],"description":[1],"disabled":[4],"error":[1],"label":[1],"mode":[1],"placeholder":[1],"truncate":[4],"active":[32],"id":[32],"keepFocus":[32],"selected":[32],"value":[32],"visibleChoices":[32]}]);
|
|
16478
19837
|
const XplTable = /*@__PURE__*/proxyCustomElement(XplTable$1, [0,"xpl-table",{"columns":[16],"data":[16],"freeze":[4],"multiselect":[4],"striped":[4],"areAllSelected":[32],"rowData":[32],"hasScrolled":[32],"selected":[32]}]);
|
|
19838
|
+
const XplTag = /*@__PURE__*/proxyCustomElement(XplTag$1, [4,"xpl-tag"]);
|
|
19839
|
+
const XplToggle = /*@__PURE__*/proxyCustomElement(XplToggle$1, [0,"xpl-toggle",{"checked":[4],"description":[1],"disabled":[4],"heading":[1],"label":[1],"name":[1],"variant":[1],"id":[32]}]);
|
|
16479
19840
|
const XplUtilityBar = /*@__PURE__*/proxyCustomElement(XplUtilityBar$1, [4,"xpl-utility-bar"]);
|
|
16480
19841
|
const defineCustomElements = (opts) => {
|
|
16481
19842
|
if (typeof customElements !== 'undefined') {
|
|
@@ -16486,15 +19847,24 @@ const defineCustomElements = (opts) => {
|
|
|
16486
19847
|
XplBreadcrumbItem,
|
|
16487
19848
|
XplBreadcrumbs,
|
|
16488
19849
|
XplButton,
|
|
19850
|
+
XplButtonRow,
|
|
16489
19851
|
XplCheckbox,
|
|
16490
19852
|
XplChoicelist,
|
|
16491
19853
|
XplContentArea,
|
|
19854
|
+
XplDivider,
|
|
19855
|
+
XplGrid,
|
|
19856
|
+
XplGridItem,
|
|
19857
|
+
XplInput,
|
|
19858
|
+
XplList,
|
|
16492
19859
|
XplMainNav,
|
|
16493
19860
|
XplNavItem,
|
|
16494
19861
|
XplPagination,
|
|
16495
19862
|
XplRadio,
|
|
16496
19863
|
XplSecondaryNav,
|
|
19864
|
+
XplSelect,
|
|
16497
19865
|
XplTable,
|
|
19866
|
+
XplTag,
|
|
19867
|
+
XplToggle,
|
|
16498
19868
|
XplUtilityBar
|
|
16499
19869
|
].forEach(cmp => {
|
|
16500
19870
|
if (!customElements.get(cmp.is)) {
|
|
@@ -16504,4 +19874,4 @@ const defineCustomElements = (opts) => {
|
|
|
16504
19874
|
}
|
|
16505
19875
|
};
|
|
16506
19876
|
|
|
16507
|
-
export { XplAvatar, XplBackdrop, XplBadge, XplBreadcrumbItem, XplBreadcrumbs, XplButton, XplCheckbox, XplChoicelist, XplContentArea, XplMainNav, XplNavItem, XplPagination, XplRadio, XplSecondaryNav, XplTable, XplUtilityBar, defineCustomElements };
|
|
19877
|
+
export { XplAvatar, XplBackdrop, XplBadge, XplBreadcrumbItem, XplBreadcrumbs, XplButton, XplButtonRow, XplCheckbox, XplChoicelist, XplContentArea, XplDivider, XplGrid, XplGridItem, XplInput, XplList, XplMainNav, XplNavItem, XplPagination, XplRadio, XplSecondaryNav, XplSelect, XplTable, XplTag, XplToggle, XplUtilityBar, defineCustomElements };
|