carbon-custom-elements/es/components/date-picker/css-class-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/css-class-plugin.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AAGtD;;GAEG;AACH,MAAM,WAAW,8BAA8B;IAC7C;;OAEG;IACH,sBAAsB,EAAE,MAAM,CAAC;IAE/B;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,aAAa,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,YAAY,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,aAAa,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,sBAAsB,EAAE,MAAM,CAAC;IAE/B;;OAEG;IACH,yBAAyB,EAAE,MAAM,CAAC;IAElC;;OAEG;IACH,qBAAqB,EAAE,MAAM,CAAC;IAE9B;;OAEG;IACH,wBAAwB,EAAE,MAAM,CAAC;IAEjC;;OAEG;IACH,oBAAoB,EAAE,MAAM,CAAC;IAE7B;;OAEG;IACH,mBAAmB,EAAE,MAAM,CAAC;CAC7B;;AAED;;;GAGG;AACH,wBAgEE","file":"css-class-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 { Plugin } from 'flatpickr/dist/types/options';\nimport { forEach } from '../../globals/internal/collection-helpers';\n\n/**\n * The configuration for the Flatpickr plugin to set CSS classes specific to this design system.\n */\nexport interface DatePickerCSSClassPluginConfig {\n  /**\n   * The CSS class for the calendar dropdown.\n   */\n  classCalendarContainer: string;\n\n  /**\n   * The CSS class for the month navigator.\n   */\n  classMonth: string;\n\n  /**\n   * The CSS class for the container of the weekdays.\n   */\n  classWeekdays: string;\n\n  /**\n   * The CSS class for the container of the days.\n   */\n  classDays: string;\n\n  /**\n   * The CSS class applied to each weekdays.\n   */\n  classWeekday: string;\n\n  /**\n   * The CSS class applied to each days.\n   */\n  classDay: string;\n\n  /**\n   * The CSS class applied to the \"today\" highlight if there are any dates selected.\n   */\n  classNoBorder: string;\n\n  /**\n   * The CSS selector for Flatpickr's month navigator.\n   */\n  selectorFlatpickrMonth: string;\n\n  /**\n   * The CSS selector for Flatpickr's container of the weekdays.\n   */\n  selectorFlatpickrWeekdays: string;\n\n  /**\n   * The CSS selector for Flatpickr's container of the days.\n   */\n  selectorFlatpickrDays: string;\n\n  /**\n   * The CSS selector applied to Flatpickr's each weekdays.\n   */\n  selectorFlatpickrWeekday: string;\n\n  /**\n   * The CSS selector applied to Flatpickr's each days.\n   */\n  selectorFlatpickrDay: string;\n\n  /**\n   * The CSS class applied to Flatpickr's \"today\" highlight.\n   */\n  classFlatpickrToday: string;\n}\n\n/**\n * @param config Plugin configuration.\n * @returns A Flatpickr plugin to set CSS classes specific to this design system.\n */\nexport default (config: DatePickerCSSClassPluginConfig): Plugin => (fp: FlatpickrInstance) => {\n  /**\n   * Adds class names specific to our design system to calendar dropdown.\n   */\n  const ensureClassesInDatePicker = () => {\n    const { calendarContainer, selectedDates } = fp;\n    if (calendarContainer) {\n      const {\n        classCalendarContainer,\n        classMonth,\n        classWeekdays,\n        classDays,\n        classWeekday,\n        classDay,\n        classNoBorder,\n        selectorFlatpickrMonth,\n        selectorFlatpickrWeekdays,\n        selectorFlatpickrDays,\n        selectorFlatpickrWeekday,\n        selectorFlatpickrDay,\n        classFlatpickrToday,\n      } = config;\n      calendarContainer.classList.add(classCalendarContainer);\n      const month = calendarContainer.querySelector(selectorFlatpickrMonth);\n      if (month) {\n        month.classList.add(classMonth);\n      }\n      const weekdays = calendarContainer.querySelector(selectorFlatpickrWeekdays);\n      if (weekdays) {\n        weekdays.classList.add(classWeekdays);\n      }\n      const days = calendarContainer.querySelector(selectorFlatpickrDays);\n      if (days) {\n        days.classList.add(classDays);\n      }\n      forEach(calendarContainer.querySelectorAll(selectorFlatpickrWeekday), item => {\n        item.innerHTML = item.innerHTML.replace(/\\s+/g, '');\n        item.classList.add(classWeekday);\n      });\n      forEach(calendarContainer.querySelectorAll(selectorFlatpickrDay), item => {\n        item.classList.add(classDay);\n        if (item.classList.contains(classFlatpickrToday) && selectedDates!.length > 0) {\n          item.classList.add(classNoBorder);\n        } else if (item.classList.contains(classFlatpickrToday) && selectedDates!.length === 0) {\n          item.classList.remove(classNoBorder);\n        }\n      });\n    }\n  };\n\n  /**\n   * Registers this Flatpickr plugin.\n   */\n  const register = () => {\n    fp.loadedPlugins.push('carbonFlatpickrCSSClassPlugin');\n  };\n\n  return {\n    onMonthChange: ensureClassesInDatePicker,\n    onYearChange: ensureClassesInDatePicker,\n    onValueUpdate: ensureClassesInDatePicker,\n    onOpen: ensureClassesInDatePicker,\n    onReady: [register],\n  };\n};\n"]}