@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.
Files changed (123) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/build/style.css +2934 -417
  3. package/dist/apollo-core/apollo-core.css +6 -4
  4. package/dist/apollo-core/apollo-core.esm.js +1 -1
  5. package/dist/apollo-core/p-0027c582.entry.js +1 -0
  6. package/dist/apollo-core/p-2c551f4d.entry.js +1 -0
  7. package/dist/apollo-core/{p-43013b35.entry.js → p-2f90296c.js} +2 -3
  8. package/dist/apollo-core/p-6081e432.entry.js +1 -0
  9. package/dist/apollo-core/p-612984e5.entry.js +1 -0
  10. package/dist/apollo-core/p-63ea199d.entry.js +1 -0
  11. package/dist/apollo-core/p-650f6416.entry.js +1 -0
  12. package/dist/apollo-core/p-6ad97405.entry.js +1 -0
  13. package/dist/apollo-core/{p-21872e0f.entry.js → p-9b9511e4.entry.js} +1 -1
  14. package/dist/apollo-core/p-ad90fe4d.js +1 -0
  15. package/dist/apollo-core/p-c6fec744.entry.js +1 -0
  16. package/dist/apollo-core/p-ea8e0991.js +1 -0
  17. package/dist/apollo-core/p-ed04cedd.entry.js +1 -0
  18. package/dist/apollo-core/p-eec5a0f1.entry.js +1 -0
  19. package/dist/apollo-core/p-f4f646d9.entry.js +1 -0
  20. package/dist/cjs/apollo-core.cjs.js +2 -2
  21. package/dist/cjs/{index-716d8f57.js → index-9662f096.js} +134 -35
  22. package/dist/cjs/loader.cjs.js +2 -2
  23. package/dist/cjs/regular-872f5226.js +16043 -0
  24. package/dist/cjs/v4-14140ff3.js +77 -0
  25. package/dist/cjs/xpl-avatar_14.cjs.entry.js +30 -16122
  26. package/dist/cjs/xpl-button-row.cjs.entry.js +24 -0
  27. package/dist/cjs/xpl-choicelist.cjs.entry.js +22 -2
  28. package/dist/cjs/xpl-divider.cjs.entry.js +18 -0
  29. package/dist/cjs/xpl-grid-item.cjs.entry.js +25 -0
  30. package/dist/cjs/xpl-grid.cjs.entry.js +35 -0
  31. package/dist/cjs/xpl-input.cjs.entry.js +2527 -0
  32. package/dist/cjs/xpl-list.cjs.entry.js +63 -0
  33. package/dist/cjs/xpl-pagination.cjs.entry.js +1 -1
  34. package/dist/cjs/xpl-select.cjs.entry.js +623 -0
  35. package/dist/cjs/xpl-tag.cjs.entry.js +21 -0
  36. package/dist/cjs/xpl-toggle.cjs.entry.js +34 -0
  37. package/dist/collection/collection-manifest.json +9 -0
  38. package/dist/collection/components/xpl-button-row/xpl-button-row.js +119 -0
  39. package/dist/collection/components/xpl-checkbox/xpl-checkbox.js +51 -5
  40. package/dist/collection/components/xpl-choicelist/xpl-choicelist.js +138 -4
  41. package/dist/collection/components/xpl-divider/xpl-divider.js +30 -0
  42. package/dist/collection/components/xpl-dropdown/xpl-dropdown.js +32 -0
  43. package/dist/collection/components/xpl-grid/xpl-grid.js +26 -0
  44. package/dist/collection/components/xpl-grid-item/xpl-grid-item.js +93 -0
  45. package/dist/collection/components/xpl-input/xpl-input.js +471 -0
  46. package/dist/collection/components/xpl-list/xpl-list.js +93 -0
  47. package/dist/collection/components/xpl-radio/xpl-radio.js +51 -5
  48. package/dist/collection/components/xpl-select/xpl-select.js +311 -0
  49. package/dist/collection/components/xpl-table/xpl-table.js +6 -6
  50. package/dist/collection/components/xpl-tag/xpl-tag.js +30 -0
  51. package/dist/collection/components/xpl-toggle/xpl-toggle.js +157 -0
  52. package/dist/custom-elements/index.d.ts +54 -0
  53. package/dist/custom-elements/index.js +3447 -77
  54. package/dist/esm/apollo-core.js +2 -2
  55. package/dist/esm/{index-4c8962a5.js → index-619763f9.js} +133 -36
  56. package/dist/esm/loader.js +2 -2
  57. package/dist/esm/regular-86225e9d.js +16041 -0
  58. package/dist/esm/v4-929670b7.js +75 -0
  59. package/dist/esm/xpl-avatar_14.entry.js +28 -16120
  60. package/dist/esm/xpl-button-row.entry.js +20 -0
  61. package/dist/esm/xpl-choicelist.entry.js +22 -2
  62. package/dist/esm/xpl-divider.entry.js +14 -0
  63. package/dist/esm/xpl-grid-item.entry.js +21 -0
  64. package/dist/esm/xpl-grid.entry.js +31 -0
  65. package/dist/esm/xpl-input.entry.js +2523 -0
  66. package/dist/esm/xpl-list.entry.js +59 -0
  67. package/dist/esm/xpl-pagination.entry.js +1 -1
  68. package/dist/esm/xpl-select.entry.js +619 -0
  69. package/dist/esm/xpl-tag.entry.js +17 -0
  70. package/dist/esm/xpl-toggle.entry.js +30 -0
  71. package/dist/stories/button-row.stories.js +64 -0
  72. package/dist/stories/checkbox.stories.js +16 -6
  73. package/dist/stories/choicelist.stories.js +112 -0
  74. package/dist/stories/divider.stories.js +34 -0
  75. package/dist/stories/grid.stories.js +100 -0
  76. package/dist/stories/input.stories.js +252 -0
  77. package/dist/stories/list.stories.js +134 -0
  78. package/dist/stories/radio.stories.js +16 -6
  79. package/dist/stories/select.stories.js +111 -0
  80. package/dist/stories/toggle.stories.js +80 -0
  81. package/dist/types/Users/fernandogelin/Projects/apollo/.stencil/stories/button-row.stories.d.ts +49 -0
  82. package/dist/types/Users/{awentt/Sites → fernandogelin/Projects}/apollo/.stencil/stories/checkbox.stories.d.ts +10 -2
  83. package/dist/types/Users/fernandogelin/Projects/apollo/.stencil/stories/choicelist.stories.d.ts +41 -0
  84. package/dist/types/Users/fernandogelin/Projects/apollo/.stencil/stories/divider.stories.d.ts +40 -0
  85. package/dist/types/Users/fernandogelin/Projects/apollo/.stencil/stories/grid.stories.d.ts +150 -0
  86. package/dist/types/Users/fernandogelin/Projects/apollo/.stencil/stories/input.stories.d.ts +190 -0
  87. package/dist/types/Users/fernandogelin/Projects/apollo/.stencil/stories/list.stories.d.ts +71 -0
  88. package/dist/types/Users/{awentt/Sites → fernandogelin/Projects}/apollo/.stencil/stories/radio.stories.d.ts +10 -2
  89. package/dist/types/Users/fernandogelin/Projects/apollo/.stencil/stories/select.stories.d.ts +74 -0
  90. package/dist/types/Users/fernandogelin/Projects/apollo/.stencil/stories/toggle.stories.d.ts +74 -0
  91. package/dist/types/components/xpl-button-row/xpl-button-row.d.ts +35 -0
  92. package/dist/types/components/xpl-checkbox/xpl-checkbox.d.ts +5 -0
  93. package/dist/types/components/xpl-choicelist/choice.d.ts +6 -0
  94. package/dist/types/components/xpl-choicelist/xpl-choicelist.d.ts +31 -0
  95. package/dist/types/components/xpl-divider/xpl-divider.d.ts +9 -0
  96. package/dist/types/components/xpl-dropdown/dropdownchoice.d.ts +6 -0
  97. package/dist/types/components/xpl-dropdown/xpl-dropdown.d.ts +10 -0
  98. package/dist/types/components/xpl-grid/xpl-grid.d.ts +5 -0
  99. package/dist/types/components/xpl-grid-item/xpl-grid-item.d.ts +7 -0
  100. package/dist/types/components/xpl-input/xpl-input.d.ts +87 -0
  101. package/dist/types/components/xpl-list/listitem.d.ts +16 -0
  102. package/dist/types/components/xpl-list/xpl-list.d.ts +28 -0
  103. package/dist/types/components/xpl-radio/xpl-radio.d.ts +4 -0
  104. package/dist/types/components/xpl-select/xpl-select.d.ts +52 -0
  105. package/dist/types/components/xpl-table/xpl-table.d.ts +6 -6
  106. package/dist/types/components/xpl-tag/xpl-tag.d.ts +5 -0
  107. package/dist/types/components/xpl-toggle/xpl-toggle.d.ts +23 -0
  108. package/dist/types/components.d.ts +447 -5
  109. package/package.json +3 -2
  110. package/dist/apollo-core/p-00996870.js +0 -1
  111. package/dist/apollo-core/p-d8ea7d80.entry.js +0 -1
  112. /package/dist/types/Users/{awentt/Sites → fernandogelin/Projects}/apollo/.stencil/stories/avatar.stories.d.ts +0 -0
  113. /package/dist/types/Users/{awentt/Sites → fernandogelin/Projects}/apollo/.stencil/stories/backdrop.stories.d.ts +0 -0
  114. /package/dist/types/Users/{awentt/Sites → fernandogelin/Projects}/apollo/.stencil/stories/badge.stories.d.ts +0 -0
  115. /package/dist/types/Users/{awentt/Sites → fernandogelin/Projects}/apollo/.stencil/stories/breadcrumbs.stories.d.ts +0 -0
  116. /package/dist/types/Users/{awentt/Sites → fernandogelin/Projects}/apollo/.stencil/stories/button.stories.d.ts +0 -0
  117. /package/dist/types/Users/{awentt/Sites → fernandogelin/Projects}/apollo/.stencil/stories/content-area.stories.d.ts +0 -0
  118. /package/dist/types/Users/{awentt/Sites → fernandogelin/Projects}/apollo/.stencil/stories/main-nav.stories.d.ts +0 -0
  119. /package/dist/types/Users/{awentt/Sites → fernandogelin/Projects}/apollo/.stencil/stories/pagination.stories.d.ts +0 -0
  120. /package/dist/types/Users/{awentt/Sites → fernandogelin/Projects}/apollo/.stencil/stories/secondary-nav.stories.d.ts +0 -0
  121. /package/dist/types/Users/{awentt/Sites → fernandogelin/Projects}/apollo/.stencil/stories/table.stories.d.ts +0 -0
  122. /package/dist/types/Users/{awentt/Sites → fernandogelin/Projects}/apollo/.stencil/stories/tabs.stories.d.ts +0 -0
  123. /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, attachShadow, createEvent, proxyCustomElement } from '@stencil/core/internal/client';
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
- * Convert array of 16 byte values to UUID string format of the form:
16174
- * XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
16175
- */
16176
-
16177
- var byteToHex = [];
16178
-
16179
- for (var i = 0; i < 256; ++i) {
16180
- byteToHex.push((i + 0x100).toString(16).substr(1));
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
- function stringify(arr) {
16184
- var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
16185
- // Note: Be careful editing this code! It's been tuned for performance
16186
- // and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434
16187
- 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
16188
- // of the following:
16189
- // - One or more input array values don't map to a hex octet (leading to
16190
- // "undefined" in the uuid)
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
- function v4(options, buf, offset) {
16201
- options = options || {};
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
- return buf;
16215
- }
16216
-
16217
- return stringify(rnds);
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 XplCheckbox$1 = class extends HTMLElement {
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
- this.id = v4();
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
- render() {
16227
- return (h(Host, { class: "xpl-checkbox-container" }, h("input", { class: "xpl-checkbox", type: "checkbox", checked: this.checked, disabled: this.disabled, id: this.id, indeterminate: this.indeterminate, name: this.name, required: this.required, value: this.value }), h("label", { htmlFor: this.id }, h("slot", null), this.description && h("small", null, this.description))));
18828
+ updateCharacterCount() {
18829
+ this.characterCount = this.input.value.length;
16228
18830
  }
16229
- };
16230
-
16231
- const XplChoicelist$1 = class extends HTMLElement {
16232
- constructor() {
16233
- super();
16234
- this.__registerHost();
16235
- attachShadow(this);
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
- return (h(Host, null, h("slot", null)));
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 XplContentArea$1 = class extends HTMLElement {
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
- * @property {string} size - The content-area size.
16248
- */
16249
- this.size = "wide";
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, h("main", { class: `xpl-content-area-wrapper xpl-content-area-wrapper__${this.size}` }, h("div", { class: "xpl-content-area" }, h("slot", 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: "xpl-radio-container" }, 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 }), h("label", { htmlFor: this.id }, h("slot", null), this.description && h("small", null, this.description))));
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 XplCheckbox = /*@__PURE__*/proxyCustomElement(XplCheckbox$1, [4,"xpl-checkbox",{"checked":[4],"description":[1],"disabled":[4],"indeterminate":[4],"name":[1],"required":[4],"value":[1],"id":[32]}]);
16471
- const XplChoicelist = /*@__PURE__*/proxyCustomElement(XplChoicelist$1, [1,"xpl-choicelist"]);
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 };