carbon-custom-elements/es/components/date-picker/month-select-plugin.d.ts.map

A Carbon Design System variant that's as easy to use as native HTML elements, with no framework tax, no framework silo.

{"version":3,"sources":["components/date-picker/month-select-plugin.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAIH,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AAYtD;;GAEG;AACH,MAAM,WAAW,iCAAiC;IAChD;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,mCAAmC,EAAE,MAAM,CAAC;IAE5C;;OAEG;IACH,8BAA8B,EAAE,MAAM,CAAC;IAEvC;;OAEG;IACH,6BAA6B,EAAE,MAAM,CAAC;IAEtC;;OAEG;IACH,0BAA0B,EAAE,MAAM,CAAC;CACpC;;AAED;;;GAGG;AACH,wBA2DE","file":"month-select-plugin.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Instance as FlatpickrInstance } from 'flatpickr/dist/types/instance';\nimport { Locale } from 'flatpickr/dist/types/locale';\nimport { Plugin } from 'flatpickr/dist/types/options';\nimport { forEach } from '../../globals/internal/collection-helpers';\n\n/**\n * @param monthNumber The month number.\n * @param shorthand `true` to use shorthand month.\n * @param locale The Flatpickr locale data.\n * @returns The month string.\n */\nconst monthToStr = (monthNumber: number, shorthand: boolean, locale: Locale) =>\n  locale.months[shorthand ? 'shorthand' : 'longhand'][monthNumber];\n\n/**\n * The configuration for the Flatpickr plugin to use text instead of `<select>` for month picker.\n */\nexport interface DatePickerMonthSelectPluginConfig {\n  /**\n   * `true` to use shorthand month.\n   */\n  shorthand?: boolean;\n\n  /**\n   * The CSS selector for the container of month/year selection UI.\n   */\n  selectorFlatpickrMonthYearContainer: string;\n\n  /**\n   * The CSS selector for the container of year selection UI.\n   */\n  selectorFlatpickrYearContainer: string;\n\n  /**\n   * The CSS selector for the text-based month selection UI.\n   */\n  selectorFlatpickrCurrentMonth: string;\n\n  /**\n   * The CSS class for the text-based month selection UI.\n   */\n  classFlatpickrCurrentMonth: string;\n}\n\n/**\n * @param config Plugin configuration.\n * @returns A Flatpickr plugin to use text instead of `<select>` for month picker.\n */\nexport default (config: DatePickerMonthSelectPluginConfig): Plugin => (fp: FlatpickrInstance) => {\n  /**\n   * Replaces `<select>` for month with text content.\n   */\n  const setupElements = () => {\n    const { monthElements, yearElements, currentMonth, l10n, _createElement: createElement } = fp;\n    if (!monthElements) {\n      return;\n    }\n    const { shorthand, selectorFlatpickrMonthYearContainer, selectorFlatpickrYearContainer, classFlatpickrCurrentMonth } = config;\n    monthElements.forEach(elem => {\n      if (!elem.parentNode) return;\n      elem.parentNode.removeChild(elem);\n    });\n    monthElements.splice(\n      0,\n      monthElements.length,\n      ...monthElements.map(() => {\n        const monthElement = createElement('span', classFlatpickrCurrentMonth);\n        monthElement.textContent = monthToStr(currentMonth, shorthand === true, l10n);\n        const monthYearContainer = yearElements[0].closest(selectorFlatpickrMonthYearContainer);\n        if (monthYearContainer) {\n          monthYearContainer.insertBefore(monthElement, yearElements[0].closest(selectorFlatpickrYearContainer));\n        }\n        return monthElement;\n      })\n    );\n  };\n\n  /**\n   * Updates the text-based month UI with the latest selected date.\n   */\n  const updateCurrentMonth = () => {\n    const { yearElements, currentMonth, l10n } = fp;\n    const { shorthand, selectorFlatpickrMonthYearContainer, selectorFlatpickrCurrentMonth } = config;\n    const monthStr = monthToStr(currentMonth, shorthand === true, l10n);\n    yearElements.forEach(elem => {\n      const currentMonthContainer = elem.closest(selectorFlatpickrMonthYearContainer);\n      if (currentMonthContainer) {\n        forEach(currentMonthContainer.querySelectorAll(selectorFlatpickrCurrentMonth), monthElement => {\n          monthElement.textContent = monthStr;\n        });\n      }\n    });\n  };\n\n  /**\n   * Registers this Flatpickr plugin.\n   */\n  const register = () => {\n    fp.loadedPlugins.push('carbonFlatpickrMonthSelectPlugin');\n  };\n\n  return {\n    onMonthChange: updateCurrentMonth,\n    onValueUpdate: updateCurrentMonth,\n    onOpen: updateCurrentMonth,\n    onReady: [setupElements, updateCurrentMonth, register],\n  };\n};\n"]}