window.maps = window.maps || {}
window.maps.gdp = {
  "af": 16.63,
  "al": 11.58,
  "dz": 158.97,
  "ao": 85.81,
  "ag": 1.1,
  "ar": 351.02,
  "am": 8.83,
  "au": 1219.72,
  "at": 366.26,
  "az": 52.17,
  "bs": 7.54,
  "bh": 21.73,
  "bd": 105.4,
  "bb": 3.96,
  "by": 52.89,
  "be": 461.33,
  "bz": 1.43,
  "bj": 6.49,
  "bt": 1.4,
  "bo": 19.18,
  "ba": 16.2,
  "bw": 12.5,
  "br": 2023.53,
  "bn": 11.96,
  "bg": 44.84,
  "bf": 8.67,
  "bi": 1.47,
  "kh": 11.36,
  "cm": 21.88,
  "ca": 1563.66,
  "cv": 1.57,
  "cf": 2.11,
  "td": 7.59,
  "cl": 199.18,
  "cn": 5745.13,
  "co": 283.11,
  "km": 0.56,
  "cd": 12.6,
  "cg": 11.88,
  "cr": 35.02,
  "ci": 22.38,
  "hr": 59.92,
  "cy": 22.75,
  "cz": 195.23,
  "dk": 304.56,
  "dj": 1.14,
  "dm": 0.38,
  "do": 50.87,
  "ec": 61.49,
  "eg": 216.83,
  "sv": 21.8,
  "gq": 14.55,
  "er": 2.25,
  "ee": 19.22,
  "et": 30.94,
  "fj": 3.15,
  "fi": 231.98,
  "fr": 2555.44,
  "ga": 12.56,
  "gm": 1.04,
  "ge": 11.23,
  "de": 3305.9,
  "gh": 18.06,
  "gr": 305.01,
  "gd": 0.65,
  "gt": 40.77,
  "gn": 4.34,
  "gw": 0.83,
  "gy": 2.2,
  "ht": 6.5,
  "hn": 15.34,
  "hk": 226.49,
  "hu": 132.28,
  "is": 12.77,
  "in": 1430.02,
  "id": 695.06,
  "ir": 337.9,
  "iq": 84.14,
  "ie": 204.14,
  "il": 201.25,
  "it": 2036.69,
  "jm": 13.74,
  "jp": 5390.9,
  "jo": 27.13,
  "kz": 129.76,
  "ke": 32.42,
  "ki": 0.15,
  "kr": 986.26,
  "undefined": 5.73,
  "kw": 117.32,
  "kg": 4.44,
  "la": 6.34,
  "lv": 23.39,
  "lb": 39.15,
  "ls": 1.8,
  "lr": 0.98,
  "ly": 77.91,
  "lt": 35.73,
  "lu": 52.43,
  "mk": 9.58,
  "mg": 8.33,
  "mw": 5.04,
  "my": 218.95,
  "mv": 1.43,
  "ml": 9.08,
  "mt": 7.8,
  "mr": 3.49,
  "mu": 9.43,
  "mx": 1004.04,
  "md": 5.36,
  "mn": 5.81,
  "me": 3.88,
  "ma": 91.7,
  "mz": 10.21,
  "mm": 35.65,
  "na": 11.45,
  "np": 15.11,
  "nl": 770.31,
  "nz": 138,
  "ni": 6.38,
  "ne": 5.6,
  "ng": 206.66,
  "no": 413.51,
  "om": 53.78,
  "pk": 174.79,
  "pa": 27.2,
  "pg": 8.81,
  "py": 17.17,
  "pe": 153.55,
  "ph": 189.06,
  "pl": 438.88,
  "pt": 223.7,
  "qa": 126.52,
  "ro": 158.39,
  "ru": 1476.91,
  "rw": 5.69,
  "ws": 0.55,
  "st": 0.19,
  "sa": 434.44,
  "sn": 12.66,
  "rs": 38.92,
  "sc": 0.92,
  "sl": 1.9,
  "sg": 217.38,
  "sk": 86.26,
  "si": 46.44,
  "sb": 0.67,
  "za": 354.41,
  "es": 1374.78,
  "lk": 48.24,
  "kn": 0.56,
  "lc": 1,
  "vc": 0.58,
  "sd": 65.93,
  "sr": 3.3,
  "sz": 3.17,
  "se": 444.59,
  "ch": 522.44,
  "sy": 59.63,
  "tw": 426.98,
  "tj": 5.58,
  "tz": 22.43,
  "th": 312.61,
  "tl": 0.62,
  "tg": 3.07,
  "to": 0.3,
  "tt": 21.2,
  "tn": 43.86,
  "tr": 729.05,
  "tm": 0,
  "ug": 17.12,
  "ua": 136.56,
  "ae": 239.65,
  "gb": 2258.57,
  "us": 14624.18,
  "uy": 40.71,
  "uz": 37.72,
  "vu": 0.72,
  "ve": 285.21,
  "vn": 101.99,
  "ye": 30.02,
  "zm": 15.69,
  "zw": 5.57
}

jQuery.fn.vectorMap('addMap', 'mall', {"width":694,"height":213,"paths":{
  "f102": {
    "name": "Nike",
    "path": "M13.74 162.23L30.83 160.72L36.51 151.85L31.53 65.98L23.53 59.28L7.96 60.36"
  },
  "f103": {
    "name": "La Maison",
    "path": "M40.51 57.55L41.81 84.48L52.62 94.54L74.14 93.02L71.98 55.50"
  },
  "f105": {
    "name": "",
    "path": "M72.73 55.60L89.17 54.74L91.44 91.61L74.68 92.91"
  },
  "f106": {
    "name": "",
    "path": "M90.04 54.52L120.21 52.47L122.81 89.35L91.98 91.51"
  },
  "f108": {
    "name": "Hairsmiths Unisex Hair Salon",
    "path": "M121.08 52.47L137.08 51.50L139.35 88.37L123.45 89.24"
  },
  "f109": {
    "name": "Terra Plana",
    "path": "M137.84 51.49L152.87 50.52L154.71 87.18L140.11 88.26"
  },
  "f110": {
    "name": "Mariella Nails",
    "path": "M153.95 50.52L169.74 49.55L172.01 86.21L155.79 87.18"
  },
  "f111": {
    "name": "Goveci",
    "path": "M170.93 49.55L204.91 47.59L207.27 83.94L173.09 86.21"
  },
  "f114": {
    "name": "SoEasy",
    "path": "M205.68 47.42L225.02 46.44L227.22 82.86L208.13 83.98"
  },
  "f166": {
    "name": "Espressamente Illy",
    "path": "M225.98 46.22L260.40 44.25L251.39 64.09L252.72 81.12L228.38 82.86"
  },
  "f167": {
    "name": "An’ge Paris",
    "path": "M308.57 71.34c-2.03 3.49 -2.68 6.70 -2.68 6.70l-52.24 3.08l-0.95 -16.84l9.16 -20.03l46.71 27.01"
  },
  "f169v": {
    "name": "Veranda",
    "path": "M283.35 44.43l-9.68 -8.62c0.00 0.00 21.95 -26.06 58.17 -30.98c7.14 -0.97 6.54 10.85 6.71 11.84C338.71 17.66 309.52 17.29 283.35 44.43z"
  },
  "f169": {
    "name": "Ocean Basket",
    "path": "M310.27 68.09c0.00 0.00 9.24 -16.87 30.50 -20.28c0.23 -0.04 -2.27 -31.79 -2.27 -31.79s-33.42 3.24 -55.16 28.39L310.27 68.09z"
  },
  "f172v": {
    "name": "Veranda",
    "path": "M411.35 45.06l9.50 -8.60c0.00 0.00 -23.48 -27.41 -57.86 -31.15c-7.10 -0.77 -6.64 11.36 -6.80 12.33S385.39 18.46 411.35 45.06z"
  },
  "f172": {
    "name": "T.G.I Friday’s",
    "path": "M384.25 68.99c0.00 0.00 -8.84 -17.27 -30.17 -21.01c-0.23 -0.04 2.12 -31.31 2.12 -31.31s33.42 3.24 55.15 28.39L384.25 68.99z"
  },
  "f170": {
    "name": "Video Arcade &  Gaming Zone",
    "path": "M344.18 47.33l-1.30 -17.52h9.90 0.00l-1.30 17.68C351.48 47.49 348.07 47.17 344.18 47.33z"
  },
  "f174": {
    "name": "Taco Bell",
    "path": "M388.79 80.67l68.38 2.03l2.97 -36.50L434.50 44.25l-48.18 29.20C386.32 73.45 387.65 76.29 388.79 80.67z"
  },
  "f115": {
    "name": "Early Learning Centre",
    "path": "M460.97 46.36L492.28 48.47L489.52 84.96L458.22 82.69"
  },
  "f117": {
    "name": "",
    "path": "M490.50 84.96L505.42 85.94L507.74 49.62L493.06 48.80"
  },
  "f118": {
    "name": "Hart",
    "path": "M506.41 85.98L521.38 87.02L524.08 50.74L508.99 49.76"
  },
  "f119": {
    "name": "",
    "path": "M522.13 87.03L541.70 88.44L544.19 52.33L525.05 50.90"
  },
  "f120": {
    "name": "",
    "path": "M542.39 88.38L545.11 52.27L572.20 54.06L570.00 90.19"
  },
  "f122": {
    "name": "Mavros",
    "path": "M570.77 90.19L573.08 54.13L601.62 56.09L598.67 92.05"
  },
  "f124": {
    "name": "",
    "path": "M599.75 92.05L602.58 56.19L622.37 57.48L619.75 93.34"
  },
  "f125": {
    "name": "Energiers",
    "path": "M620.49 93.46L623.19 57.74L655.39 59.82L653.20 86.10L643.28 95.41"
  },
  "f126": {
    "name": "",
    "path": "M662.77 67.61L671.37 61.12L686.29 62.09L678.99 158.29L663.75 157.48L656.77 149.20"
  },
  "f128": {
    "name": "Pablosky",
    "path": "M627.57 160.48L646.57 161.73L649.63 125.68L630.65 124.38"
  },
  "f129": {
    "name": "",
    "path": "M605.83 159.10L626.46 160.48L629.68 124.22L609.08 122.76"
  },
  "f130": {
    "name": "",
    "path": "M584.42 157.71L604.86 159.10L608.43 122.60L587.67 121.30"
  },
  "f132": {
    "name": "Cinnabon",
    "path": "M558.95 155.93L583.61 157.71L587.02 121.14L561.87 119.52"
  },
  "f133": {
    "name": "",
    "path": "M542.89 154.88L558.33 155.93L560.90 119.52L545.81 118.38"
  },
  "f134": {
    "name": "Crocodilino",
    "path": "M517.75 153.42L541.79 154.80L544.84 118.38L520.67 116.60"
  },
  "f135": {
    "name": "Krystalo - Fanelaki",
    "path": "M501.69 152.28L516.78 153.26L519.70 116.76L504.29 115.62"
  },
  "f136": {
    "name": "Lepus",
    "path": "M454.00 149.04L500.72 152.28L503.31 115.62L455.46 112.54"
  },
  "f139": {
    "name": "Engino",
    "path": "M410.80 131.47L414.37 134.71L441.29 136.33L449.24 112.33L417.77 109.73"
  },
  "fr01": {
    "name": "Rest Rooms",
    "path": "M429.13 135.93l11.92 0.89c0.00 0.00 -5.84 15.17 -13.87 26.36l-8.76 -6.57C418.42 156.61 426.49 145.28 429.13 135.93z"
  },
  "f153": {
    "name": "Al Rifai",
    "path": "M283.19 130.87L279.58 134.12L253.17 135.90L244.41 111.08L276.21 109.38"
  },
  "fr02": {
    "name": "Rest Rooms",
    "path": "M265.09 135.56l-11.68 0.91c0.00 0.00 5.24 15.60 13.63 26.52l9.65 -7.14C276.69 155.85 268.03 144.82 265.09 135.56z"
  },
  "ffc": {
    "name": "Food Court",
    "path": "M280.37 109.08l26.93 -2.92c0.00 0.00 8.16 25.94 39.88 26.98c19.71 0.65 34.63 -14.85 39.42 -26.93c0.12 -0.30 26.15 3.35 26.15 3.35s-4.54 18.49 -15.57 30.98c-0.11 0.12 29.66 22.84 29.66 22.84c-0.00 0.00 -12.98 18.33 -36.01 29.69c-32.08 15.81 -86.95 17.77 -123.58 -29.50c-0.40 -0.51 28.88 -20.77 28.88 -20.77S278.21 110.65 280.37 109.08z"
  },
  "f155": {
    "name": "155 Fashion",
    "path": "M239.87 148.15L224.95 148.39L221.87 112.38L243.12 111.08L245.88 136.71L243.93 133.31L239.55 133.63"
  },
  "f156": {
    "name": "Giacomo de Luca",
    "path": "M201.43 113.52L220.89 112.22L223.81 148.55L204.35 150.01"
  },
  "f157": {
    "name": "G+ Collections",
    "path": "M179.85 115.30L200.62 113.67L203.54 150.01L182.93 151.47"
  },
  "f158": {
    "name": "Femme Femme",
    "path": "M157.14 116.76L178.80 115.30L181.79 151.56L160.12 153.19"
  },
  "f159": {
    "name": "",
    "path": "M134.92 154.72L159.01 153.26L156.33 116.76L132.00 118.22"
  },
  "f160": {
    "name": "Le Rouge",
    "path": "M110.10 156.50L133.78 154.88L131.03 118.22L107.50 120.00"
  },
  "f162": {
    "name": "",
    "path": "M91.77 157.64L109.29 156.50L106.53 120.08L89.33 121.14"
  },
  "f164": {
    "name": "",
    "path": "M67.27 159.42L90.96 157.64L88.52 121.30L64.76 122.68"
  },
  "f165": {
    "name": "Ose",
    "path": "M47.97 160.72L66.30 159.42L63.95 122.68L45.62 123.82"
  },
  "fr03": {
    "name": "Rest Rooms",
    "path": "M239.93 133.90L243.82 133.69L245.79 136.96L245.79 140.93L240.03 141.01"
  },
  "fr04": {
    "name": "Rest Rooms",
    "path": "M245.77 148.04L240.20 148.07L240.03 141.25L245.77 141.19"
  }
}});

window.maps = window.maps || {}
window.maps.mall = {
  "f102": "SPORTS & OUTDOOR",
  "f103": "HOME DECOR",
  "f105": "FASHION",
  "f106": "OTHER",
  "f108": "BEAUTY & SPA",
  "f109": "FASHION",
  "f110": "BEAUTY & SPA",
  "f111": "URBAN FAVORITES",
  "f114": "SERVICES",
  "f166": "DINING",
  "f167": "FASHION",
  "f169": "DINING",
  "f170": "ENTERTAINMENT",
  "f172": "DINING",
  "f174": "DINING",
  "f115": "KIDS STUFF",
  "f117": "LIFESTYLE",
  "f118": "URBAN FAVORITES",
  "f119": "FASHION",
  "f120": "FASHION",
  "f122": "KIDS STUFF",
  "f124": "KIDS STUFF",
  "f125": "KIDS STUFF",
  "f126": "KIDS STUFF",
  "f128": "KIDS STUFF",
  "f129": "LIFESTYLE",
  "f130": "HOME DECOR",
  "f132": "DINING",
  "f133": "SPORTS & OUTDOOR",
  "f134": "KIDS STUFF",
  "f135": "LIFESTYLE",
  "f136": "LIFESTYLE",
  "f139": "KIDS STUFF",
  "f153": "DINING",
  "f155": "FASHION",
  "f156": "URBAN FAVORITES",
  "f157": "URBAN FAVORITES",
  "f158": "LINGERIE & UNDERWEAR",
  "f159": "FASHION",
  "f160": "FASHION",
  "f162": "FASHION",
  "f164": "FASHION",
  "f165": "FASHION",
  "fr01": "REST ROOMS",
  "fr02": "REST ROOMS",
  "fr03": "REST ROOMS",
  "fr04": "REST ROOMS",
  "ffc": "DINING"
}

//= require stack/core-scripts

// Self Initialize DOM Factory Components
domFactory.handler.autoInit()

// Connect button(s) to drawer(s)
var sidebarToggle = Array.prototype.slice.call(document.querySelectorAll('[data-toggle="sidebar"]'))

sidebarToggle.forEach(function (toggle) {
  toggle.addEventListener('click', function (e) {
    var selector = e.currentTarget.getAttribute('data-target') || '#default-drawer'
    var drawer = document.querySelector(selector)
    if (drawer) {
      drawer.mdkDrawer.toggle()
    }
  })
})

$('[data-toggle="fullcalendar"]').each(function() {
  const element = $(this)
  const options = {
    themeSystem: 'bootstrap4',
    closeButton: void 0 !== element.data('toastr-close-button')
      ? element.data('toastr-close-button')
      : false,
    slotDuration: '00:15:00',
    minTime: '08:00:00',
    maxTime: '19:00:00',
    defaultView: 'month',
    handleWindowResize: true,
    height: $(window).height() - 200,
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,agendaWeek,agendaDay'
    },
    events,
    editable: true,
    droppable: true,
    eventLimit: true,
    selectable: true,
    drop: function(date) {
      onDrop($(this), date, element)
    },
    select: function(start, end, jsEvent) {
      onSelect(start, end, jsEvent, element)
    },
    eventClick: function(event, jsEvent, view) {
      onEventClick(event, jsEvent, view, element)
    }
  }

element.fullCalendar(options)
})

let drawers = document.querySelectorAll('.mdk-drawer')
drawers = Array.prototype.slice.call(drawers)
drawers.forEach((drawer) => {
  drawer.addEventListener('mdk-drawer-change', (e) => {
    if (!e.target.mdkDrawer) {
      return
    }
    document.querySelector('body').classList[e.target.mdkDrawer.opened ? 'add' : 'remove']('has-drawer-opened')
    let button = document.querySelector('[data-target="#' + e.target.id + '"]')
    if (button) {
      button.classList[e.target.mdkDrawer.opened ? 'add' : 'remove']('active')
    }
  })
})

// SIDEBAR COLLAPSE MENUS
$('.sidebar .collapse').on('show.bs.collapse', function (e) {
  e.stopPropagation()
  var parent = $(this).parents('.sidebar-submenu').get(0) || $(this).parents('.sidebar-menu').get(0)
  $(parent).find('.open').find('.collapse').collapse('hide');
  $(this).closest('li').addClass('open');
});
$('.sidebar .collapse').on('hidden.bs.collapse', function (e) {
  e.stopPropagation()
  $(this).closest('li').removeClass('open');
});

// ENABLE TOOLTIPS
$('[data-toggle="tooltip"]').tooltip()

// ENABLE TABS
$('[data-toggle="tab"]').on('hide.bs.tab', function (e) {
$(e.target).removeClass('active')
})

document.addEventListener("turbolinks:load", function() {

domFactory.handler.upgradeAll();

// Connect button(s) to drawer(s)
var sidebarToggle = Array.prototype.slice.call(document.querySelectorAll('[data-toggle="sidebar"]'))

  sidebarToggle.forEach(function (toggle) {
    toggle.addEventListener('click', function (e) {
      var selector = e.currentTarget.getAttribute('data-target') || '#default-drawer'
      var drawer = document.querySelector(selector)
      if (drawer) {
        drawer.mdkDrawer.toggle()
      }
    })
  })

  // SIDEBAR COLLAPSE MENUS
  $('.sidebar .collapse').on('show.bs.collapse', function (e) {
    e.stopPropagation()
    var parent = $(this).parents('.sidebar-submenu').get(0) || $(this).parents('.sidebar-menu').get(0)
    $(parent).find('.open').find('.collapse').collapse('hide');
    $(this).closest('li').addClass('open');
  });
  $('.sidebar .collapse').on('hidden.bs.collapse', function (e) {
    e.stopPropagation()
    $(this).closest('li').removeClass('open');
  });

  // DRAG AND DROP
  $('[data-toggle="dragula"]').each(function() {
    var element = $(this)
    var options = {
      moves: function(el, source, handle, sibling) {
        return void 0 !== element.data('dragula-moves')
          ? handle.classList.contains(element.data('dragula-moves'))
          : true
      }
    }

var containers = $(this).data('dragula-containers')
var elements = []

    if (containers) {
      for (var i = 0; i < containers.length; i++) {
        elements.push(document.querySelector(containers[i]))
      }
    }
    else {
      elements.push(element[0])
    }

    dragula(elements, options)
  })
  // END

  $('[data-toggle="fullcalendar"]').each(function() {
    const element = $(this)
    const options = {
      themeSystem: 'bootstrap4',
      closeButton: void 0 !== element.data('toastr-close-button')
        ? element.data('toastr-close-button')
        : false,
      slotDuration: '00:15:00',
      minTime: '08:00:00',
      maxTime: '19:00:00',
      defaultView: 'month',
      handleWindowResize: true,
      height: $(window).height() - 200,
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
      },
      events,
      editable: true,
      droppable: true,
      eventLimit: true,
      selectable: true,
      drop: function(date) {
        onDrop($(this), date, element)
      },
      select: function(start, end, jsEvent) {
        onSelect(start, end, jsEvent, element)
      },
      eventClick: function(event, jsEvent, view) {
        onEventClick(event, jsEvent, view, element)
      }
    }

element.fullCalendar(options)
})

// DATERANGE

  $('[data-toggle="daterangepicker"]').each(function() {
    const element = $(this)
    const format = void 0 !== element.data('daterangepicker-locale-format')
      ? element.data('daterangepicker-locale-format')
      : 'YYYY/MM/DD'

    const ranges = {
      'Today': [moment(), moment()],
      'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
      'Last 7 Days': [moment().subtract(6, 'days'), moment()],
      'Last 30 Days': [moment().subtract(29, 'days'), moment()],
      'This Month': [moment().startOf('month'), moment().endOf('month')],
      'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
    }

    const options = {
      showDropdowns: void 0 !== element.data('daterangepicker-show-dropdowns')
        ? element.data('daterangepicker-show-dropdowns')
        : false,
      drops: void 0 !== element.data('daterangepicker-drops')
        ? element.data('daterangepicker-drops')
        : 'down',
      opens: void 0 !== element.data('daterangepicker-opens')
        ? element.data('daterangepicker-opens')
        : 'right',
      startDate: void 0 !== element.data('daterangepicker-start-date')
        ? element.data('daterangepicker-start-date')
        : moment(),
      endDate: void 0 !== element.data('daterangepicker-end-date')
        ? element.data('daterangepicker-end-date')
        : moment().add(1, 'month'),
      singleDatePicker: void 0 !== element.data('daterangepicker-single-date-picker')
        ? element.data('daterangepicker-single-date-picker')
        : false,
      autoApply: void 0 !== element.data('daterangepicker-auto-apply')
        ? element.data('daterangepicker-auto-apply')
        : true,
      timePicker: void 0 !== element.data('daterangepicker-time-picker')
        ? element.data('daterangepicker-time-picker')
        : false,
      timePicker24Hour: void 0 !== element.data('daterangepicker-time-picker-24-hour')
        ? element.data('daterangepicker-time-picker-24-hour')
        : false,
      ranges: void 0 !== element.data('daterangepicker-ranges')
        ? ranges
        : false,
      locale: {
        format,
        separator: void 0 !== element.data('daterangepicker-locale-separator')
          ? element.data('daterangepicker-locale-separator')
          : ' to ',
      }
    }

element.daterangepicker(options)
})

// SELECT2

$.fn.select2.defaults.set('theme', 'bootstrap4')

  function templateResult(a) {
    if (!a.id)
      return a.text;
    var e = $(a.element).data("avatar-src");
    return e ? $('' + a.text + "") : a.text
  }

  $('[data-toggle="select"]').each(function() {
    var element = $(this)
    var options = {
      dropdownParent: element.closest(".modal").length ? element.closest(".modal") : $(document.body),
      minimumResultsForSearch: element.data("minimum-results-for-search"),
      templateResult
    }

element.select2(options)
})

// LISTS

  $('[data-toggle="lists"]').each(function() {
    var element = $(this)
    var options = {
      valueNames: void 0 !== element.data('lists-values')
        ? element.data('lists-values')
        : [],
      listClass: void 0 !== element.data('lists-class')
        ? element.data('lists-class')
        : 'list'
    }

var listElement = element.get(0)
var list = new List(listElement, options)

    Object.defineProperty(listElement, 'List', {
      configurable: true,
      writable: false,
      value: list
    })
  })

// VECTOR

  $('[data-toggle="vector-map"]').each(function() {
    var element = $(this)
    var values = element.data('vector-map-values') ? maps[element.data('vector-map-values')] || {} : {}
    let pins = {}

    try {
      pins = element.data('vector-map-pins')
      for (var key in pins) {
        if (pins.hasOwnProperty(key)) {
          pins[key] = escapeXml(pins[key])
        }
      }
    }
    catch(e) {}

    var options = {
      map: element.data('vector-map-map'),
      zoomOnScroll: void 0 !== element.data('vector-map-zoom-on-scroll')
        ? element.data('vector-map-zoom-on-scroll')
        : false,
      enableZoom: void 0 !== element.data('vector-map-enable-zoom')
        ? element.data('vector-map-enable-zoom')
        : false,
      showTooltip: void 0 !== element.data('vector-map-show-tooltip')
        ? element.data('vector-map-show-tooltip')
        : true,
      focusOnSelect: void 0 !== element.data('vector-map-focus-on-select')
        ? element.data('vector-map-focus-on-select')
        : false,
      backgroundColor: void 0 !== element.data('vector-map-background-color')
        ? element.data('vector-map-background-color')
        : 'transparent',
      values,
      color: settings.colors.gray[50],
      selectedColor: settings.colors.primary[300],
      hoverColor: settings.colors.primary[100],
      scaleColors: [ settings.colors.primary[50], settings.colors.primary[500] ],
      borderWidth: 1,
      borderColor: '#ffffff',
      borderOpacity: 1,
      normalizeFunction: 'polynomial',
      colors: {},
      pins,
      pinMode: 'content',
      onLabelShow: function (e, label, code) {
        label.html(label.html() + ' - ' + values[ code ])
      },
      onRegionSelect: function(event, code, region) {
        if (options.focusOnSelect) {
          map.setFocus(code)
        }
      }
    }

    var colors = element.data('vector-map-values-colors')
    if (colors) {
      for (var key in values) {
        if (values.hasOwnProperty(key) && colors[values[key]] !== undefined) {
          const color = colors[values[key]]
          options.colors[key] = settings.colors.get(color) || color
        }
      }
    }

element.vectorMap(options)

const map = $(this).data().mapObject

    if (Object.keys(options.colors)) {
      map.setColors(options.colors)
    }

const scale = element.data('vector-map-scale')
const focus = element.data('vector-map-focus')

    if (scale) {
      map.setScale(scale)
      map.positionPins()
    }
    else if (focus) {
      map.setFocus(focus)
    }
  })

$('[data-toggle=vector-map-focus]').on('click', function(e) {
e.preventDefault()

    const element = $(this)
    const target = $(element.data('target'))
    if (!target) {
      return
    }

    const map = target.data().mapObject
    const focus = element.data('focus')
    const animate = element.data('animate')

    if (focus) {
      map.setFocus(focus, animate)
    }
  })

});

(function(){
'use strict';

  $('[data-toggle="quill"]').each(function() {
    var element = $(this)
    var options = {
      modules: {
        toolbar: void 0 !== element.data('quill-modules-toolbar')
        ? element.data('quill-modules-toolbar')
        : {}
      },
      theme: void 0 !== element.data('quill-theme')
        ? element.data('quill-theme')
        : 'snow',
      placeholder: void 0 !== element.data('quill-placeholder')
        ? element.data('quill-placeholder')
        : Quill.DEFAULTS.placeholder,
      readOnly: void 0 !== element.data('quill-read-only')
        ? element.data('quill-read-only')
        : Quill.DEFAULTS.readOnly,
      debug: void 0 !== element.data('quill-debug')
        ? element.data('quill-debug')
        : Quill.DEFAULTS.debug,
      formats: void 0 !== element.data('quill-formats')
        ? element.data('quill-formats')
        : Quill.DEFAULTS.formats
    }

    var quillElement = element.get(0)
    var quill = new Quill(quillElement, options)
    Object.defineProperty(quillElement, 'Quill', {
      configurable: true,
      writable: false,
      value: quill
    })
  })

})()

const drawRoundedTopRectangle = (ctx, x, y, width, height, radius) => {
  ctx.beginPath()
  ctx.moveTo(x + radius, y)
  // top right corner
  ctx.lineTo(x + width - radius, y)
  ctx.quadraticCurveTo(x + width, y, x + width, y + radius)
  // bottom right   corner
  ctx.lineTo(x + width, y + height)
  // bottom left corner
  ctx.lineTo(x, y + height);
  // top left
  ctx.lineTo(x, y + radius)
  ctx.quadraticCurveTo(x, y, x + radius, y)
  ctx.closePath()
}

Chart.elements.RoundedTopRectangle = Chart.elements.Rectangle.extend({
  draw: function() {
    var ctx = this._chart.ctx;
    var vm = this._view;
    var left, right, top, bottom, signX, signY, borderSkipped;
    var borderWidth = vm.borderWidth;

    if (!vm.horizontal) {
      // bar
      left = vm.x - vm.width / 2;
      right = vm.x + vm.width / 2;
      top = vm.y;
      bottom = vm.base;
      signX = 1;
      signY = bottom > top? 1: -1;
      borderSkipped = vm.borderSkipped || 'bottom';
    } else {
      // horizontal bar
      left = vm.base;
      right = vm.x;
      top = vm.y - vm.height / 2;
      bottom = vm.y + vm.height / 2;
      signX = right > left? 1: -1;
      signY = 1;
      borderSkipped = vm.borderSkipped || 'left';
    }

    // Canvas doesn't allow us to stroke inside the width so we can
    // adjust the sizes to fit if we're setting a stroke on the line
    if (borderWidth) {
      // borderWidth shold be less than bar width and bar height.
      var barSize = Math.min(Math.abs(left - right), Math.abs(top - bottom));
      borderWidth = borderWidth > barSize? barSize: borderWidth;
      var halfStroke = borderWidth / 2;
      // Adjust borderWidth when bar top position is near vm.base(zero).
      var borderLeft = left + (borderSkipped !== 'left'? halfStroke * signX: 0);
      var borderRight = right + (borderSkipped !== 'right'? -halfStroke * signX: 0);
      var borderTop = top + (borderSkipped !== 'top'? halfStroke * signY: 0);
      var borderBottom = bottom + (borderSkipped !== 'bottom'? -halfStroke * signY: 0);
      // not become a vertical line?
      if (borderLeft !== borderRight) {
        top = borderTop;
        bottom = borderBottom;
      }
      // not become a horizontal line?
      if (borderTop !== borderBottom) {
        left = borderLeft;
        right = borderRight;
      }
    }

    // calculate the bar width and roundess
    var barWidth = Math.abs(left - right);
    var roundness = this._chart.config.options.barRoundness || 0.5;
    var radius = barWidth * roundness * 0.5;

// keep track of the original top of the bar
var prevTop = top;

    // move the top down so there is room to draw the rounded top
    top = prevTop + radius;
    var barRadius = top - prevTop;

    ctx.beginPath();
    ctx.fillStyle = vm.backgroundColor;
    ctx.strokeStyle = vm.borderColor;
    ctx.lineWidth = borderWidth;

// draw the rounded top rectangle
drawRoundedTopRectangle(ctx, left, (top - barRadius + 1), barWidth, bottom - prevTop, barRadius);

    ctx.fill();
    if (borderWidth) {
      ctx.stroke();
    }

    // restore the original top value so tooltips and scales still work
    top = prevTop;
  },
})

Chart.defaults.roundedBar = Chart.helpers.clone(Chart.defaults.bar)

Chart.controllers.roundedBar = Chart.controllers.bar.extend({
dataElementType: Chart.elements.RoundedTopRectangle
})

(function(){
'use strict';

  $('[data-toggle="lists"]').each(function() {
    var element = $(this)
    var options = {
      valueNames: void 0 !== element.data('lists-values')
        ? element.data('lists-values')
        : [],
      listClass: void 0 !== element.data('lists-class')
        ? element.data('lists-class')
        : 'list'
    }

var listElement = element.get(0)
var list = new List(listElement, options)

    Object.defineProperty(listElement, 'List', {
      configurable: true,
      writable: false,
      value: list
    })
  })

})()

(function(){
'use strict';

  $('[data-toggle="daterangepicker"]').each(function() {
    const element = $(this)
    const format = void 0 !== element.data('daterangepicker-locale-format')
      ? element.data('daterangepicker-locale-format')
      : 'YYYY/MM/DD'

    const ranges = {
      'Today': [moment(), moment()],
      'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
      'Last 7 Days': [moment().subtract(6, 'days'), moment()],
      'Last 30 Days': [moment().subtract(29, 'days'), moment()],
      'This Month': [moment().startOf('month'), moment().endOf('month')],
      'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
    }

    const options = {
      showDropdowns: void 0 !== element.data('daterangepicker-show-dropdowns')
        ? element.data('daterangepicker-show-dropdowns')
        : false,
      drops: void 0 !== element.data('daterangepicker-drops')
        ? element.data('daterangepicker-drops')
        : 'down',
      opens: void 0 !== element.data('daterangepicker-opens')
        ? element.data('daterangepicker-opens')
        : 'right',
      startDate: void 0 !== element.data('daterangepicker-start-date')
        ? element.data('daterangepicker-start-date')
        : moment(),
      endDate: void 0 !== element.data('daterangepicker-end-date')
        ? element.data('daterangepicker-end-date')
        : moment().add(1, 'month'),
      singleDatePicker: void 0 !== element.data('daterangepicker-single-date-picker')
        ? element.data('daterangepicker-single-date-picker')
        : false,
      autoApply: void 0 !== element.data('daterangepicker-auto-apply')
        ? element.data('daterangepicker-auto-apply')
        : true,
      timePicker: void 0 !== element.data('daterangepicker-time-picker')
        ? element.data('daterangepicker-time-picker')
        : false,
      timePicker24Hour: void 0 !== element.data('daterangepicker-time-picker-24-hour')
        ? element.data('daterangepicker-time-picker-24-hour')
        : false,
      ranges: void 0 !== element.data('daterangepicker-ranges')
        ? ranges
        : false,
      locale: {
        format,
        separator: void 0 !== element.data('daterangepicker-locale-separator')
          ? element.data('daterangepicker-locale-separator')
          : ' to ',
      }
    }

element.daterangepicker(options)
})

})()

(function(){
'use strict';

  JQVMap.prototype.resizeContainer = function () {
    this.width = this.container.width()
    this.height = this.container.height()
    this.resize()
    this.canvas.setSize(this.width, this.height)
    this.applyTransform()
    this.positionPins()
  }

  JQVMap.prototype.setFocus = function (codes, animate = true) {
    if (typeof codes === 'string') {
      codes = [codes]
    }

var map = this
var coords, newCoords;

    codes.forEach(cc => {
      var el = $('#' + this.getCountryId(cc))
      var path = el[0]
      var bbox = path.getBBox()

      if (typeof coords == 'undefined') {
        coords = bbox
      }
      else {
        newCoords = {
          x: Math.min(coords.x, bbox.x),
          y: Math.min(coords.y, bbox.y),
          width: Math.max(coords.x + coords.width, bbox.x + bbox.width) - Math.min(coords.x, bbox.x),
          height: Math.max(coords.y + coords.height, bbox.y + bbox.height) - Math.min(coords.y, bbox.y)
        }
        coords = newCoords
      }
    })

var scale = Math.min(this.width / coords.width, this.height / coords.height)

    if (scale > this.zoomMaxStep * this.baseScale) {
      scale = this.zoomMaxStep * this.baseScale
    }
    else if (scale < this.baseScale) {
      scale = this.baseScale
    }

var zoomStep = scale / this.scale
this.zoomCurStep = this.zoomCurStep * Math.round(zoomStep)

var cX = coords.x * scale
var cY = coords.y * scale

var middleX = coords.width / 2
var middleY = coords.height / 2

    var anchorX = (cX - middleX) / scale * -1
    var anchorY = (cY - middleY) / scale * -1

    var transX = anchorX + this.defaultWidth * (this.width / (this.defaultWidth * scale)) / 2
    var transY = anchorY + this.defaultHeight * (this.height / (this.defaultHeight * scale)) / 2

    var count = Math.abs(Math.round((scale - this.scale) * 60 / Math.max(scale, this.scale))) || 30

    if (animate) {
      var i = 0,
          scaleStart,
          scaleDiff,
          transXStart,
          transXDiff,
          transYStart,
          transYDiff

      scaleStart = this.scale;
      scaleDiff = (scale - scaleStart) / count;
      transXStart = this.transX * this.scale;
      transYStart = this.transY * this.scale;
      transXDiff = (transX * scale - transXStart) / count;
      transYDiff = (transY * scale - transYStart) / count;

      function frame() {
        i += 1
        map.scale = scaleStart + scaleDiff * i
        map.transX = (transXStart + transXDiff * i) / map.scale
        map.transY = (transYStart + transYDiff * i) / map.scale
        map.applyTransform()
        map.positionPins()

        if (i < count) {
          requestAnimationFrame(frame)
        }
      }

      requestAnimationFrame(frame)
    }
    else {
      this.transX = transX
      this.transY = transY
      this.setScale(scale)
      this.positionPins()
    }
  }

  function escapeXml(string) {
    return string.replace(/[<>]/g, function (c) {
      switch (c) {
        case '<': return '\u003c';
        case '>': return '\u003e';
      }
    });
  }

  function resizeContainer() {
    $('[data-toggle="vector-map"]').each(function() {
      const element = $(this)
      const map = element.data().mapObject
      map.resizeContainer()

      const focus = element.data('vector-map-focus')
      if (focus) {
        map.setFocus(focus)
      }
    })
  }

  $('[data-toggle="vector-map"]').each(function() {
    var element = $(this)
    var values = element.data('vector-map-values') ? maps[element.data('vector-map-values')] || {} : {}
    let pins = {}

    try {
      pins = element.data('vector-map-pins')
      for (var key in pins) {
        if (pins.hasOwnProperty(key)) {
          pins[key] = escapeXml(pins[key])
        }
      }
    }
    catch(e) {}

    var options = {
      map: element.data('vector-map-map'),
      zoomOnScroll: void 0 !== element.data('vector-map-zoom-on-scroll')
        ? element.data('vector-map-zoom-on-scroll')
        : false,
      enableZoom: void 0 !== element.data('vector-map-enable-zoom')
        ? element.data('vector-map-enable-zoom')
        : false,
      showTooltip: void 0 !== element.data('vector-map-show-tooltip')
        ? element.data('vector-map-show-tooltip')
        : true,
      focusOnSelect: void 0 !== element.data('vector-map-focus-on-select')
        ? element.data('vector-map-focus-on-select')
        : false,
      backgroundColor: void 0 !== element.data('vector-map-background-color')
        ? element.data('vector-map-background-color')
        : 'transparent',
      values,
      color: settings.colors.gray[50],
      selectedColor: settings.colors.primary[300],
      hoverColor: settings.colors.primary[100],
      scaleColors: [ settings.colors.primary[50], settings.colors.primary[500] ],
      borderWidth: 1,
      borderColor: '#ffffff',
      borderOpacity: 1,
      normalizeFunction: 'polynomial',
      colors: {},
      pins,
      pinMode: 'content',
      onLabelShow: function (e, label, code) {
        label.html(label.html() + ' - ' + values[ code ])
      },
      onRegionSelect: function(event, code, region) {
        if (options.focusOnSelect) {
          map.setFocus(code)
        }
      }
    }

    var colors = element.data('vector-map-values-colors')
    if (colors) {
      for (var key in values) {
        if (values.hasOwnProperty(key) && colors[values[key]] !== undefined) {
          const color = colors[values[key]]
          options.colors[key] = settings.colors.get(color) || color
        }
      }
    }

element.vectorMap(options)

const map = $(this).data().mapObject

    if (Object.keys(options.colors)) {
      map.setColors(options.colors)
    }

const scale = element.data('vector-map-scale')
const focus = element.data('vector-map-focus')

    if (scale) {
      map.setScale(scale)
      map.positionPins()
    }
    else if (focus) {
      map.setFocus(focus)
    }
  })

$('[data-toggle=vector-map-focus]').on('click', function(e) {
e.preventDefault()

    const element = $(this)
    const target = $(element.data('target'))
    if (!target) {
      return
    }

    const map = target.data().mapObject
    const focus = element.data('focus')
    const animate = element.data('animate')

    if (focus) {
      map.setFocus(focus, animate)
    }
  })

  const drawer = document.querySelector('.mdk-drawer')
  if (drawer) {
    drawer.addEventListener('mdk-drawer-change', () => requestAnimationFrame(resizeContainer))
  }

})()

(function(){
'use strict';

Dropzone.autoDiscover = false

  function mockFile(file, dzInstance, error) {
    var name_pieces = file.split(/[\s\/]+/)
    var name = name_pieces[name_pieces.length-1]

    // Create the mock file:
    var mockFile = {
      name: name,
      size: 12345,
      accepted: true
    }

// Call the default addedfile event handler
dzInstance.emit('addedfile', mockFile);

// And optionally show the thumbnail of the file:
dzInstance.emit('thumbnail', mockFile, file);

    // Or if the file on your server is not yet in the right
    // size, you can let Dropzone download and resize it
    // callback and crossOrigin are optional.
    // dzInstance.createThumbnailFromUrl(file, imageUrl, callback, crossOrigin);
    dzInstance.createThumbnailFromUrl(mockFile, file);

    // fake error / success
    mockFile.status = Dropzone[(error ? 'ERROR' : 'SUCCESS')];
    dzInstance.emit((error ? 'error' : 'success'), mockFile, (error ? 'The error message' : 'success'), null);

// Make sure that there is no progress bar, etc...
dzInstance.emit('complete', mockFile);

    // If you use the maxFiles option, make sure you adjust it to the
    // correct amount:
    // var existingFileCount = 1; // The number of files already uploaded
    // dzInstance.options.maxFiles = dzInstance.options.maxFiles - existingFileCount;
  }

  $('[data-toggle="dropzone"]').each(function() {
    var element = $(this)
    var template = element.find('.dz-preview')

    var isMultiple = void 0 !== element.data('dropzone-multiple')
    var currentFile = void 0
    var options  = {
      url: element.data("dropzone-url"),
      thumbnailWidth: null,
      thumbnailHeight: null,
      previewsContainer: template.get(0),
      previewTemplate: template.html(),
      maxFiles: isMultiple ? null : 1,
      acceptedFiles: 'image/*',
      clickable: void 0 !== element.data('dropzone-clickable')
        ? element.data('dropzone-clickable') : true,
      init: function() {
        this.on('addedfile', function(file) {
          if (!isMultiple && currentFile) {
            this.removeFile(currentFile)
          }
          currentFile = file
        })

        this.on('maxfilesexceeded', function(file) {
          this.removeAllFiles()
          this.addFile(file)
        })

        var filesOnServer = element.data('dropzone-files')
        var dzInstance = this
        filesOnServer.forEach(function(file, index) {
          mockFile(file, dzInstance, index >= (filesOnServer.length - 1) / 2)
        })
      }
    }

    template.html('')
    element.dropzone(options)
  })

})()

(function(){
'use strict';

  toastr.primary = function(message, title, optionsOverride) {
    return this.success(message, title, $.extend({ iconClass: 'toast-primary' }, optionsOverride))
  }

  $('[data-toggle="toastr"]').on('click', function(e) {
    e.preventDefault()
    const element = $(this)
    const type = element.data('toastr-type') || 'success'
    const message = element.data('toastr-message')
    const title = element.data('toastr-title')
    const options = {
      closeButton: void 0 !== element.data('toastr-close-button')
        ? element.data('toastr-close-button')
        : false,
      debug: false,
      newestOnTop: void 0 !== element.data('toastr-newest-on-top')
        ? element.data('toastr-newest-on-top')
        : true,
      progressBar: void 0 !== element.data('toastr-progress-bar')
        ? element.data('toastr-progress-bar')
        : true,
      positionClass: void 0 !== element.data('toastr-position-class')
        ? element.data('toastr-position-class')
        : "toast-top-right",
      preventDuplicates: void 0 !== element.data('toastr-prevent-duplicates')
        ? element.data('toastr-prevent-duplicates')
        : false,
      onclick: null,
      showDuration: void 0 !== element.data('toastr-show-duration')
        ? element.data('toastr-show-duration')
        : 300,
      hideDuration: void 0 !== element.data('toastr-hide-duration')
        ? element.data('toastr-hide-duration')
        : 1000,
      timeOut: void 0 !== element.data('toastr-time-out')
        ? element.data('toastr-time-out')
        : 5000,
      extendedTimeOut: void 0 !== element.data('toastr-extended-time-out')
        ? element.data('toastr-extended-time-out')
        : 1000,
      showEasing: void 0 !== element.data('toastr-show-easing')
        ? element.data('toastr-show-easing')
        : 'swing',
      hideEasing: void 0 !== element.data('toastr-hide-easing')
        ? element.data('toastr-hide-easing')
        : 'linear',
      showMethod: void 0 !== element.data('toastr-show-method')
        ? element.data('toastr-show-method')
        : 'fadeIn',
      hideMethod: void 0 !== element.data('toastr-hide-method')
        ? element.data('toastr-hide-method')
        : 'fadeOut'
    }

toastr[type](message, title, options)
})

})()

(function(){
'use strict';

  $('[data-toggle="dragula"]').each(function() {
    var element = $(this)
    var options = {
      moves: function(el, source, handle, sibling) {
        return void 0 !== element.data('dragula-moves')
          ? handle.classList.contains(element.data('dragula-moves'))
          : true
      }
    }

var containers = $(this).data('dragula-containers')
var elements = []

    if (containers) {
      for (var i = 0; i < containers.length; i++) {
        elements.push(document.querySelector(containers[i]))
      }
    }
    else {
      elements.push(element[0])
    }

dragula(elements, options)
})

})()

const extend = (object, value) => {
for (var key in value) "object" != typeof value[key] ? object[key] = value[key] : extend(object[key], value[key])
}

const add = (element) => {
var data = element.data("add")
var chart = $(element.data("target")).data("chart")

  if (element.is(":checked")) {
    function addRecursive(chart, data) {
      for (var o in data) Array.isArray(data[o]) ? data[o].forEach(function(a) {
        chart[o].push(a)
      }) : addRecursive(chart[o], data[o])
    }
    addRecursive(chart, data)
  }
  else {
    function removeRecursive(chart, data) {
      for (var o in data) Array.isArray(data[o]) ? data[o].forEach(function(a) {
        chart[o].pop()
      }) : removeRecursive(chart[o], data[o])
    }
    removeRecursive(chart, data)
  }

chart.update()
}

const update = (element) => {
  var data = element.data("update")
  var chart = $(element.data("target")).data("chart")

  extend(chart, data)

  if (void 0 !== element.data("prefix") || void 0 !== element.data("suffix")) {
    let prefix = element.data("prefix") ? element.data("prefix") : ""
    let suffix = element.data("suffix") ? element.data("suffix") : ""

    if (chart.options.scales !== undefined) {
      chart.options.scales.yAxes[0].ticks.callback = function(a) {
        if (!(a % 10)) return prefix + a + suffix
      }
    }

    chart.options.tooltips.callbacks.label = function(a, e) {
      var t = e.datasets[a.datasetIndex].label || "",
          o = a.yLabel || e.datasets[0].data[a.index],
          r = "";
      return 1 < e.datasets.length && (r += '' + t + ""), r += '' + prefix + o + suffix + ""
    }
  }

chart.update()
}

const globalSettings = {
  responsive: true,
  maintainAspectRatio: false,
  defaultColor: "dark" == settings.charts.colorScheme ? settings.colors.gray[700] : settings.colors.gray[600],
  defaultFontColor: "dark" == settings.charts.colorScheme ? settings.colors.gray[700] : settings.colors.gray[600],
  defaultFontFamily: settings.fonts.base,
  defaultFontSize: 13,
  layout: {
    padding: 0
  },
  legend: {
    display: false,
    position: "bottom",
    labels: {
      usePointStyle: true,
      padding: 16
    }
  },
  elements: {
    point: {
      radius: 0,
      backgroundColor: settings.colors.primary[700]
    },
    line: {
      tension: .4,
      borderWidth: 3,
      borderColor: settings.colors.primary[700],
      backgroundColor: settings.colors.transparent,
      borderCapStyle: "rounded"
    },
    rectangle: {
      backgroundColor: settings.colors.primary[700]
    },
    arc: {
      backgroundColor: settings.colors.primary[700],
      borderColor: "dark" == settings.charts.colorScheme ? settings.colors.gray[800] : settings.colors.white,
      borderWidth: 4
    }
  },
  tooltips: {
    enabled: !1,
    mode: "index",
    intersect: !1,
    custom: function(r) {
      var a = $("#chart-tooltip");
      if (a.length || (a = $('

'), $("body").append(a)), 0 !== r.opacity) {
        if (r.body) {
          var e = r.title || [],
              l = r.body.map(function(a) {
                return a.lines
              }),
              n = "";
          n += '

', e.forEach(function(a) {
n += '

' + a + "

"
          }), l.forEach(function(a, e) {
              var t = '',
                  o = 1 < l.length ? "justify-content-left" : "justify-content-center";
              n += '

' + t + a + "

"
          }), a.html(n)
        }
        var t = $(this._chart.canvas),
            o = (t.outerWidth(), t.outerHeight(), t.offset().top),
            s = t.offset().left,
            i = a.outerWidth(),
            c = a.outerHeight(),
            d = o + r.caretY - c - 16,
            u = s + r.caretX - i / 2;

        a.css({
          top: d + "px",
          left: u + "px",
          display: "block"
        })

      } else a.css("display", "none")
    },
    callbacks: {
      label: function(a, e) {
        var t = e.datasets[a.datasetIndex].label || "",
            o = a.yLabel,
            r = "";
        return 1 < e.datasets.length && (r += '' + t + ""), r += '' + o + ""
      }
    }
  }
}

const create = (id, type = 'line', options = {}, data = {}) => {
  var element = $(id)
  var chart = new Chart(element, {
    type: type,
    options: options,
    data: data
  })
  element.data("chart", chart)
  if (element.data("chart-legend")) {
    document.querySelector(element.data("chart-legend"))
      .innerHTML = chart.generateLegend()
  }
}

const init = () => {
  extend(Chart, {
    defaults: {
      global: globalSettings,
      doughnut: doughnutSettings
    }
  })

  Chart.scaleService.updateScaleDefaults("linear", {
    gridLines: {
      borderDash: [2],
      borderDashOffset: [2],
      color: "dark" == settings.charts.colorScheme ? settings.colors.gray[900] : settings.colors.gray[100],
      drawBorder: !1,
      drawTicks: !1,
      lineWidth: 0,
      zeroLineWidth: 0,
      zeroLineColor: "dark" == settings.charts.colorScheme ? settings.colors.gray[900] : settings.colors.gray[100],
      zeroLineBorderDash: [2],
      zeroLineBorderDashOffset: [2]
    },
    ticks: {
      beginAtZero: !0,
      padding: 10,
      callback: function(a) {
        if (!(a % 10)) return a
      }
    }
  })

  Chart.scaleService.updateScaleDefaults("category", {
    gridLines: {
      drawBorder: !1,
      drawOnChartArea: !1,
      drawTicks: !1
    },
    ticks: {
      padding: 20
    },
    maxBarThickness: 10
  })

  $('[data-toggle="chart"]').on({
    change: function() {
      var el = $(this)
      if (el.is("[data-add]")) {
        add(el)
      }
    },
    click: function() {
      var el = $(this)
      if (el.is("[data-update]")) {
        update(el)
      }
    }
  })
}

const Charts = {
  settings,
  init,
  add,
  update,
  create
}

if (window !== undefined) {
window.Charts = Charts
}

(function(){
'use strict';

$.fn.select2.defaults.set('theme', 'bootstrap4')

  function templateResult(a) {
    if (!a.id)
      return a.text;
    var e = $(a.element).data("avatar-src");
    return e ? $('' + a.text + "") : a.text
  }

  $('[data-toggle="select"]').each(function() {
    var element = $(this)
    var options = {
      dropdownParent: element.closest(".modal").length ? element.closest(".modal") : $(document.body),
      minimumResultsForSearch: element.data("minimum-results-for-search"),
      templateResult
    }

element.select2(options)
})

})()

// SETTINGS
// APP SETTINGS
const hexToRGB = (hex, alpha) => {
  const r = parseInt(hex.slice(1, 3), 16)
  const g = parseInt(hex.slice(3, 5), 16)
  const b = parseInt(hex.slice(5, 7), 16)

  if (alpha) {
    return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")"
  } else {
    return "rgb(" + r + ", " + g + ", " + b + ")"
  }
}

const fonts = { base: "Helvetica Neue" }

// https://material.io/design/color/the-color-system.html#tools-for-picking-colors
const colors = {
  bodyBg: '#F7F8F9',
  border: '#efefef',
  gray: {
    50: '#edeef0',
    100: '#d0d6dc',
    200: '#b2bac4',
    300: '#939fad',
    400: '#7c8a9b',
    500: '#65778a',
    600: '#586879',
    700: '#485563',
    800: '#39424d',
    900: '#272e36'
  },
  primary: {
    50: '#e4f3ff',
    100: '#bddfff',
    200: '#93ccff',
    300: '#68b8ff',
    400: '#49a8ff',
    500: '#3099ff',
    600: '#308AF3', // $primary
    700: '#2d79df',
    800: '#2b67cd',
    900: '#2648ad'
  },
  success: {
    50: '#edf9e6',
    100: '#d1f0c2',
    200: '#b2e599',
    300: '#91db6e',
    400: '#75d34a',
    500: '#58ca1f',
    600: '#47ba16', // $success
    700: '#2ba607',
    800: '#009200',
    900: '#006f00',
  },
  danger: {
    50: '#feeaef',
    100: '#fccad5',
    200: '#ec949f',
    300: '#e26979',
    400: '#ee405a',
    500: '#f52042',
    600: '#e51240',
    700: '#d3003a',
    800: '#c60032',
    900: '#b70026'
  },
  black: '#12263F',
  white: '#FFFFFF',
  transparent: 'transparent',
  get(color) {
    return color.split('.').reduce((o,i)=>o[i], this)
  }
}

const charts = {
  colorScheme: 'light',
  colors: {
    area: hexToRGB(colors.primary[100], 0.5)
  }
}

const settings = {
  fonts,
  colors,
  charts,
  hexToRGB
}

if (typeof window !== 'undefined') {
window.settings = settings
}
// END SETTINGS

//** CORE
//= require popper.js/dist/umd/popper.js
//= require bootstrap/dist/js/bootstrap.min.js

//= require simplebar/dist/simplebar.min.js

//= require dom-factory/dist/dom-factory.js
//= require material-design-kit/dist/material-design-kit.js

//** PLUGIN SCRIPTS (NODE_MODULES)
//= require jquery-mask-plugin/dist/jquery.mask.min.js
//= require select2/dist/js/select2.min.js

//= require moment/min/moment.min.js
//= require moment-range/dist/moment-range.js

//= require chart.js/dist/Chart.min.js

//= require jqvmap/dist/jquery.vmap.min.js
//= require jqvmap/dist/maps/jquery.vmap.world.js

//= require stack/vector-maps/mall-map.js
//= require stack/vector-maps/gdp-data.js

//= require dropzone/dist/dropzone.js

//= require list.js/dist/list.min.js
//= require toastr/toastr.js

//= require dragula/dist/dragula.min.js

//= require jquery-ui-dist/jquery-ui.min.js

//= require quill/dist/quill.min.js

//=require daterangepicker/daterangepicker.js

//** APP SETTINGS
//= require stack/settings.js

//** PLUGIN WRAPPERS & INITS
//= require stack/plugins/chartjs-rounded-bar.js
//= require stack/plugins/charts.js
//= require stack/plugins/daterangepicker.js
//= require stack/plugins/dragula.js
//= require stack/plugins/dropzone.js
//= require stack/plugins/list.js
//= require stack/plugins/quill.js
//= require stack/plugins/select2.js
//= require stack/plugins/toastr.js
//= require stack/plugins/vector-maps.js

window['moment-range'].extendMoment(moment);

// Action Cable provides the framework to deal with WebSockets in Rails.
// You can generate new channels where WebSocket features live using the `rails generate channel` command.
//
//= require action_cable
//= require_self
//= require_tree ./channels

(function() {
this.App || (this.App = {});

App.cable = ActionCable.createConsumer();

}).call(this);

# Place all the behaviors and hooks related to the matching controller here.
# All this logic will automatically be available in application.js.
# You can use CoffeeScript in this file: http://coffeescript.org/

$(function() {
    $('#img-form-field').bind('change', function() { //updates the text path so the user sees the path
        var fileName = $(this).val();
        $("#img-dummy-field").html(fileName);
    });

    $("#img-dummy-field").bind('click', function() { //binds text path to opening the image explorer
        $("#img-form-field").click();
    });

    $("#new_customer_form").on("ajax:success", function(event){
        data = event.detail[0];
        SetSelect2Option("customer-name-search", data["full_name"], data["id"]);
    });

    $("#new_location_form").on("ajax:success", function(event){
        data = event.detail[0];
        SetSelect2Option("customer-location-search", data["display_address"], data["id"]);
    });

    $('#new_customer_contact_form').on("ajax:success", function(event){
        data = event.detail[0];
        SetSelect2Option("customer-contact-search", data["full_name"], data["id"]);
    });

    // new QuerySelect('job_status_select',
    //   '/job_statuses.json',
    //   function(params) {return {q: {name_cont: params.term}}},
    //   function (data) {
    //     // Transforms the top-level key of the response object from 'items' to 'results'
    //     return { results: $.map(data, function (val) { return { "id": val.id, "text": val.status }})}
    //   },
    //   function (evt){
    //     const jobStatusId = evt.currentTarget.value;
    //     $('#job_status_id').val(jobStatusId);
    //   },
    //   {placeholder: "Select a Job Status"}
    // );
});

//= require cable
//= require_self
//= require_tree .

this.App = {};

App.cable = ActionCable.createConsumer();

class @NewContactModalHelper
constructor: (customerFieldId) ->
@_customerFieldId = customerFieldId

setFormCustomerId: (customerIdToSaveContactTo) ->
$("##{@_customerFieldId}").val(customerIdToSaveContactTo); # Set the hidden customer_contact field FOR OUR CUSTOMER CONTACT so our controller can assign the right customer to any new locations we add

class @NewLocationModalHelper
    constructor: (customerFieldId) ->
        @_customerFieldId = customerFieldId
        # @_submitButtonId = submitButtonId

setFormCustomerId: (customerIdToSaveContactTo) ->
$("##{@_customerFieldId}").val(customerIdToSaveContactTo); # Set the hidden customer_contact field FOR OUR CUSTOMER CONTACT so our controller can assign the right customer to any new locations we add

//1: Controller: Having two status codes: Accepted means updated.

//2: Client-Javascript Callbacks: Having two types of ajax success callbacks: after updated, and after new.
//      If after updated
//          Find & edit the existing row
//      If after new
//          Add new row to the table
//      If after delete
//          Delete the row from the table

//3: Javascript: Handling Modal State
// If 'New' Button clicked, modal state must be set to "new"
// If 'Edit' Button clicked, modal state must be set to "update"

/**
* This class is so used so a modal can double as both a submit and an edit modal state, originally designed
* for easy access when viewing a table for editing rows and/or adding new entries into the table.
*/
class SubmitAndEditModalState{
    constructor(
        resourceModalId, //Used to open and close the modal as necessary.
        resourceFormId, //Id of form, necessary for setting up events for listening on it's ajax:success or ajax:error events.
        submitFormButtonId, //Button on form that's used to submit, important for keeping track of whether it's a new or edit modal.
        resource, //the resource that is being added/editing. ex: customer_contacts, locations, employee_jobs
        editResourceButtonClass, //The button class that when clicked should show the and set the edit modal
        newResourceButton, //The button id that when clicked should show the modal and set it to be a "new" modal
        ){
        this.editButtonThatWasClicked = null;//Variable for storing state, important when editing a row on the page (so user can see without reloading) after an update
        this.resourceModalId = resourceModalId;
        this.resourceFormId = resourceFormId;
        this.resource = resource;
        this.submitFormButtonId = submitFormButtonId;
        this.editResourceButtonClass = editResourceButtonClass;
        this.newResourceButton = newResourceButton;

        //Sets up a listener for all the resources if they are clicked on to edit, it toggles the modal to be opened
        $(`.${editResourceButtonClass}`).click((event) => {
            const resourceId = event.currentTarget.dataset.custom;
            this.ToggleEditModal(resourceId);
        });

        $(`#${newResourceButton}`).click((event) => {
            this.ToggleNewModal();
        });

        $(`#${resourceFormId}`).on("ajax:success", (event) => {
            const data = event.detail[0];

            var wasAnUpdate = event.detail[1] == "Accepted" || event.detail[2].status == 202; //Means was a PUT request to server. On production, event.detail[1] is always an empty string.
            if (wasAnUpdate){
                gritterSuccess("Successful Update", `Successfully updated ${resource}`)
                this.resetModalFields();
                if (this.editButtonThatWasClicked != null){
                    this.editResourceRowCallback(this.editButtonThatWasClicked,data)
                }
                else {
                    gritterError("Can't display changes", "Couldn't update the resource on this page, refresh to see the change")
                }
            }
            else {
                this.insertResourceRowToTableCallback(event);
            }

            $(`#${resourceModalId}`).modal('hide'); //Close modal regardless of it's an update, since it was successful.
        });

        $(`#${resourceFormId}`).on("ajax:error", (event) => {showErrorForm(event)});
    }

    /**
     * Fetches the resource's data, and sets it up ready to be edited with a PUT request to the.
     */
    ToggleEditModal(resourceId){ //Called after an  or  is clicked.
        this.editButtonThatWasClicked = event.currentTarget;
        const url = `/${this.resource}/${resourceId}.json`
        // Make a get request for the resource info, then fill in all the modal fields.
        $.get({
          url: url,
          success: (data) => {
            // Need to set all of the fields with the correct info...
            this.fillInFormWithDataCallback(data);
            //Change button to PUT a url that will update the employee job & reload the job page.
            $(`#${this.submitFormButtonId}`).attr('formaction', url);
            $(`#${this.submitFormButtonId}`).attr('formmethod', 'put');
            $(`#${this.resourceModalId}`).modal('show');
          },
          error: (data) => {showErrorForCalendar(data)},
        });
        this.callWhenEditModalToggled();
        $(`#${this.resourceModalId}`).modal('show');
    }

    ToggleNewModal(){
        this.resetModalFields();
        $(`#${this.submitFormButtonId}`).removeAttr('formaction');
        $(`#${this.submitFormButtonId}`).removeAttr('formmethod');
        this.callWhenNewModalToggled();
        $(`#${this.resourceModalId}`).modal('show');
    }

    /**
     * Returns a edit table data  that can be appended to a table row to trigger editing this resource
     * @param {*} data
     * @returns
     */
    getEditButtonElement(data){
        const $editButton = $(`     `)
        $editButton.find('a').click((event) => { //the click listener that opens the modal to edit this specific resource
            const resourceId = event.currentTarget.dataset.custom;
            this.ToggleEditModal(resourceId)//Set up the edit modal with this resource to be edited
        });
        return $editButton;
    }

    fillInFormWithDataCallback(data){};
    insertResourceRowToTableCallback(event){};
    editResourceRowCallback(editResourceButtonElement, data){};
    resetModalFields(){};
    callWhenNewModalToggled(){};
    callWhenEditModalToggled(){};
}

class ContactNewUpdateModalState extends SubmitAndEditModalState{
    constructor(...args){
        super(...args);
    }

    fillInFormWithDataCallback(data){
        $('#customer_contact_first_name').val(data['first_name'])
        $('#customer_contact_last_name').val(data["last_name"])
        $('#customer_contact_phone').val(formatPhoneNumber(data["phone"]))
        $('#customer_contact_email').val(data["email"])
        $('#customer_contact_notes').val(data["notes"])
        $('#customer_contact_customer_id').val(data["customer_id"])
        $('#customer_contact_business_id').val(data["business_id"])
    };

    insertResourceRowToTableCallback(event){
        const data = event.detail[0]
        var table = $("[id='Customer Contacts']");
        const $addedContact = $(
        `
             ${data["full_name"]}
             ${formatPhoneNumber(data["phone"])}
             ${data["email"]}
             ${data["notes"]}





        `);
        $addedContact.find('td:nth-last-of-type(2)').after(this.getEditButtonElement(data));
        table.append($addedContact);
    };

    editResourceRowCallback(editResourceButtonElement, data){
        editResourceButtonElement.parentElement.parentElement.children[0].innerHTML = data["full_name"];
        editResourceButtonElement.parentElement.parentElement.children[1].innerHTML = formatPhoneNumber(data["phone"]);
        editResourceButtonElement.parentElement.parentElement.children[2].innerHTML = data["email"];
        editResourceButtonElement.parentElement.parentElement.children[3].innerHTML = data["notes"];
    };

    resetModalFields(){
        var customerId = $('#customer_contact_customer_id').val(); //This order is important. We need to save this id before submit and reset it after, that way they can add multiple contacts from the job modal page.
        $('#new_customer_contact_form')[0].reset();
        $('#customer_contact_customer_id').val(customerId); //Need to set it after the form resets..
    };

callWhenNewModalToggled(){};
callWhenEditModalToggled(){};
}

class LocationModalState extends SubmitAndEditModalState{
    constructor(...args){
        super(...args);
    }

    fillInFormWithDataCallback(data){//Overridden
        $('#location_id').val(data["id"]);
        $('#location_street_address').val(data["street_address"]);
        $('#location_city').val(data["city"]);
        $('#location_zip_code').val(data["zip_code"]);
        $('#location_state').val(data["state"]);
        $('#location_customer_id').val(data["customer_id"]);
        $('#location_business_id').val(data["business_id"]);
    }

    insertResourceRowToTableCallback(event){//Overriden
        const data = event.detail[0]
        var locationsTable = $("[id='Customer Locations']");
        const $addedLocationRow = $(
        `
           ${data["display_address"]}










        `);
        $addedLocationRow.find('td:nth-last-of-type(2)').after(this.getEditButtonElement(data));
        locationsTable.append($addedLocationRow);
    }

    editResourceRowCallback(editLocationButtonElement, data){//Overriden
        editLocationButtonElement.parentElement.parentElement.children[0].innerHTML = data["display_address"];
    }

    resetModalFields(){//Overriden
        var customerId = $('#location_customer_id').val(); //This order is important. We need to save this id before submit and reset it after, that way they can add multiple locations from the job modal page.
        $("#new_location_form")[0].reset(); //https://www.formget.com/jquery-reset-form/
        $('#location_customer_id').val(customerId); //Need to set it after the form resets..
    }

    callWhenNewModalToggled(){ //Don't set as default from here..
        $('#set_as_default_checkbox').hide();
    };

    callWhenEditModalToggled(){ //Don't allow setting as default from here..
        $('#set_as_default_checkbox').hide();
    };
}

# Place all the behaviors and hooks related to the matching controller here.
# All this logic will automatically be available in application.js.
# You can use CoffeeScript in this file: http://coffeescript.org/

$(function() {
    $(".cancel-modal").bind("click", function(){
        closeModal(doRefresh = false);
    });

    $(".cancel-with-confirmation").bind("click", function () {
        closeJobModalWithConfirmation();
    });

    $('.cancel-with-autosave').bind("click", function (e) {
        e.currentTarget.disabled = true;
        if (modalAppointmentContext._isNewJob){
            closeJobModalWithConfirmation();
        } else {
            $('#job_appointment_close').addClass('is-loading');
            $('#submitnewjob').click();
        }
    });

    $(".delete-current-job").bind("click", function () {
        var userConfirmedExitingWithoutSaving = confirm('Are you sure you want to delete this appointment?');
        if(userConfirmedExitingWithoutSaving == true){
            deleteCurrentJobContext();
        }
    });

    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function (event) {
        if (event.target == document.getElementById("job-modal")) {
            //Default to saving the job (better ui/ux)
            // if (modalAppointmentContext._isNewJob){
            closeJobModalWithConfirmation();
            // } else {
                // $('#submitnewjob').click();
            // }
        }
    }
});

function closeJobModalWithConfirmation(){
    var userConfirmedExitingWithoutSaving = confirm("Discard unsaved changes?");
    $('.cancel-with-autosave').prop('disabled', false);
    $('#job_appointment_close').removeClass('is-loading');
    if(userConfirmedExitingWithoutSaving == true){
        closeModal(doRefresh = true)
    }
}
$('.modal').css('overflow-y', 'auto'); //https://stackoverflow.com/a/28077674

function drawMarketingPieChart(start, end) {
  // Create the data table.
  start = start == null ? $('#marketing_sources_chart_start').val() : start;
  end = end == null ? $('#marketing_sources_chart_end').val() : end;

  $.get({
    url: '/marketing_report.json',
    data: {start: start, end: end},
    success: function(marketingData){
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Marketing Source');
      data.addColumn('number', 'New Customers');
      data.addRows(marketingData);

      // Set chart options
      var options = {'title':'New Customer by Marketing Source',
      'width':400,
      'height':300};

      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.PieChart(document.getElementById('marketing_chart_div'));
      chart.draw(data, options);

      let numCustomers = marketingData.reduce(function(a, e) {return a + parseInt(e[1])}, 0);
      $('#new_customers_amount').text(numCustomers)
    }
  })
}

function drawIncomeChart(start, end) {
start = start == null ? $('#marketing_sources_chart_start').val() : start;
end = end == null ? $('#marketing_sources_chart_end').val() : end;

  $.get({
    url: "/income_report.json",
    data: {start: start, end: end},
    success: function(incomeData){
      var data = google.visualization.arrayToDataTable(
        incomeData,
      );

      var options = {
        title: 'Company Performance',
        curveType: 'function',
        legend: { position: 'bottom' }
      };

      var chart = new google.visualization.LineChart(document.getElementById('income_chart_graph'));

      chart.draw(data, options);

      let totalEarnings = incomeData.slice(1).reduce(function(a, e) {return a + (isNaN(parseInt(e[1])) ? 0 : parseInt(e[1]))}, 0); //slice is to remove the header element ['Day', 'Earnings']
      $('#total_income_amount').text(formatCurrency(totalEarnings)) //Returning 0.. why?
    }
  })
}

function drawIncomeByCategoryChart(start, end) {
start = start == null ? $('#marketing_sources_chart_start').val() : start;
end = end == null ? $('#marketing_sources_chart_end').val() : end;

  $.get({
    url: "/income_category_report.json",
    data: {start: start, end: end},
    success: function(incomeData){
      var data = google.visualization.arrayToDataTable(
        incomeData,
      );

      var options = {
        title : 'Income by Products/Services',
        vAxis: {title: 'Income'},
        hAxis: {title: 'Month'},
        seriesType: 'bars',
        series: {5: {type: 'line'}} //TODO: This number will be based on the number of products/services we're doing..
      };

      var chart = new google.visualization.ComboChart(document.getElementById('income_category_chart_graph'));
      chart.draw(data, options);

      // let totalEarnings = incomeData.slice(1).reduce(function(a, e) {return a + (isNaN(parseInt(e[1])) ? 0 : parseInt(e[1]))}, 0); //slice is to remove the header element ['Day', 'Earnings']
      // $('#total_income_amount').text(formatCurrency(totalEarnings)) //Returning 0.. why?
    }
  })
}

function drawRevenueBySalesRepChart(start, end){
  start = start == null ? $('#marketing_sources_chart_start').val() : start;
  end = end == null ? $('#marketing_sources_chart_end').val() : end;
  $.get(
    {url: '/revenue_by_sales_rep_report',
    data: {start: start, end: end},
    success: function(salesRepData){
      var data = google.visualization.arrayToDataTable(salesRepData);

      var options = {
        chart: {
          title: 'Company Performance',
          subtitle: 'Sales, Estimates, by Customer Rep',
        }
      };

      var chart = new google.charts.Bar(document.getElementById('revenue_by_sales_rep'));
      chart.draw(data, google.charts.Bar.convertOptions(options));
    }
  })
}

        var chart = new google.visualization.LineChart(document.getElementById('marketing_revenue_chart'));
        chart.draw(data, options);
      }
    })
}

function drawProductionRevenueByEmployee(start, end){
  start = start == null ? $('#marketing_sources_chart_start').val() : start;
  end = end == null ? $('#marketing_sources_chart_end').val() : end;
  $.get({
    url: '/production_revenue_by_employee.json',
    data: {start: start, end: end},
    success: function(productionRevenueData){
      var data = google.visualization.arrayToDataTable(productionRevenueData);

      var options = {
        title: 'Production Revenue',
        chartArea: {width: '50%'},
        hAxis: {
          title: 'Revenue',
          minValue: 0
        },
        vAxis: {
          title: 'Employee'
        }
      };

      var chart = new google.visualization.BarChart(document.getElementById('production_revenue_by_employee'));
      chart.draw(data, options);
    }
  })
}

function drawTimeClockedByEmployee(start, end){
  start = start == null ? $('#marketing_sources_chart_start').val() : start;
  end = end == null ? $('#marketing_sources_chart_end').val() : end;
  $.get({
    url: '/timeclocked_by_employee.json',
    data: {start: start, end: end},
    success: function(productionRevenueData){
      var data = google.visualization.arrayToDataTable(productionRevenueData);

      var options = {
        title: `Time Sheets: ${formatReadableDate(start)} - ${formatReadableDate(end)}`,
        chartArea: {width: '50%'},
        hAxis: {
          title: 'Time (In Hours)',
          minValue: 0
        },
        vAxis: {
          title: 'Employee'
        }
      };

      var NumberFormat = new google.visualization.NumberFormat( //https://stackoverflow.com/questions/49766493/rounding-value-in-google-chart
        //You can explore various type of patterns in Documentation
        {pattern:'##.##'}
        );
        NumberFormat.format(data, 1); // Apply formatter to second column

      var chart = new google.visualization.BarChart(document.getElementById('timeclocked_by_employee'));
      chart.draw(data, options);
    }
  })
}

$(function(){
  // Callback that creates and populates a data table,
  // instantiates the pie chart, passes in the data and
  // draws it.

  // Load the Visualization API and the corechart package.
  google.charts.load('current', {'packages':['corechart', 'bar', 'line']});
  //TODO: Set the start and end date and generate the data
  // Set a callback to run when the Google Visualization API is loaded.
  google.charts.setOnLoadCallback(drawMarketingPieChart);
  google.charts.setOnLoadCallback(drawIncomeChart);
  google.charts.setOnLoadCallback(drawIncomeByCategoryChart);
  google.charts.setOnLoadCallback(drawRevenueBySalesRepChart);
  google.charts.setOnLoadCallback(drawRevenueByMarketingSourceChart);
  google.charts.setOnLoadCallback(drawProductionRevenueByEmployee);
  google.charts.setOnLoadCallback(drawTimeClockedByEmployee);
})

/**
* @param {data} data sets the invoice type label next to the invoice display number at top of invoice
*/
// function updateInvoiceTypeLabel(data) {
// $('.invoice_type').text(data.target.value);

//     if (data.target.value == "Invoice") {
//         $('#invoice-due').show();
//         $('.invoice-only-section').show();
//     }
//     else {
//         $('.invoice-only-section').hide();
//         $('#invoice-due').hide();
//     }
// }

/** Invoice date and due date section */
// setupContentEditableDisplay('#invoice-date');
// setupContentEditableDisplay('#invoice-due-date');

// function setupContentEditableDisplay(datePickerId) {
//     flatpickr(datePickerId, {
//         altInput: true,
//         altFormat: "F j, Y",
//     });
// }

/**
* Autofilling invoice from existing invoice
*/
$('#template_invoice_template_id').on('change', function (e) {
    $.get({
        url: `../../invoice_templates/${$('#template_invoice_template_id').val()}.json`,
        success: function (data) { //TODO: Here is where we autofill and do a gritter notification
            if (data != null) {
                $('#service-notes')[0].innerText = data['description']
                if (data.line_item_template.length > 0){
                    clearAllLineItems();
                    for (var i = data["line_item_template"].length-1; i >= 0; i--) { //doing this backwards to put them in the right order..
                        addLineItem(data["line_item_template"][i]["name"], data["line_item_template"][i]["description"], data["line_item_template"][i]["price"], data["line_item_template"][i]["product_id"], data["line_item_template"][i]["quantity"]);
                    }
                }
            }
            sumLineItemTotal();
        },
        error: function () { //TODO: Here is where we alert user of any server-side errors
            console.log("There was a server-side error");
        }
    });
});

function clearAllLineItems() {
    var paras = document.getElementsByClassName('line-item');
    while (paras[0]) {
        paras[0].parentNode.removeChild(paras[0]);
    }
}

/** Line Items:  */
function addLineItem(name = null, description = null, price = null, product_id = null, quantity = null) {
    var name = name == null ? "" : name
    var description = description == null ? "Enter Description Here.." : description;
    var price = price == null ? "0.00" : price;
    var product_id = product_id == null ? "" : product_id;
    var quantity = quantity == null ? 1 : quantity

    lineItemEventHandlers();
    calibrateLineItemIds();
    setupProductQuerySelectForEachLineItem();
    sumLineItemTotal();
}

function appendElement(element, elementToAppend, keyPressCallback){
if (keyPressCallback != null)
elementToAppend.keypress(keyPressCallback);

element.append(elementToAppend);
}

maxCharacters = function (evt) {
    if(evt.target.textContent.length > 750)
    {
       evt.preventDefault();
    }
}

tabOrBackspaceWasTyped = function(evt){
return (evt.which == 8 || evt.which == 9 || evt.which == 46)
}

onlyIntegersAllowed = function (evt) {
if (!tabOrBackspaceWasTyped(evt) && (evt.which < 48 || evt.which > 57 && evt.which < 96 || evt.which > 105))
evt.preventDefault();
}

onlyNumbersAllowed = function(evt) {
    //left or right arrow key should be allowed.
    //negative sign should be allowed.
    const wasLeftOrRightArrow = evt.which == 39 || evt.which == 37;
    const wasTabOrBackspace = tabOrBackspaceWasTyped(evt);
    const decimalLimitReached = evt.currentTarget.innerText.includes(".");
    const negativeSignLimitReached = evt.currentTarget.innerText.includes("-");
    const wasNegativeSign = evt.which == 45 || evt.which == 189;
    const wasDecimal = evt.which == 46 || evt.which == 190 || evt.which == 110;
    const wasntNumber = (evt.which < 48 || evt.which > 57)
    const wasRightNumpad = (evt.which >= 96 && evt.which <= 105)

    if (wasDecimal && decimalLimitReached){ //They should be able to add a decimal if it's the only one.
        evt.preventDefault();
    }

    if (wasNegativeSign && negativeSignLimitReached)
    {
        evt.preventDefault();
    }

    if (!wasDecimal && !wasNegativeSign && !wasTabOrBackspace && wasntNumber && !wasRightNumpad && !wasLeftOrRightArrow){
        evt.preventDefault();
    }
}

/**
* Deletes the associated line item that was clicked on
* @param {*} event click event
*/
// function deleteLineItem(event) {
//     $('#' + event.target.parentElement.parentElement.parentElement.id).remove();
//     sumLineItemTotal();
//     calibrateLineItemIds();
// }

//These correspond to the positioning on the page of each  column in a line item.
//Now I can just update this any time the ordering changes or we add antoher column
// lineItemAttributeIndices = {
//     "name":0,
//     "description":1,
//     "product_id":2,
//     "quantity":3,
//     "price":4,
//     "delete":5,
// }

/**
* Goes through and reassigns all the line item id's according to their order on the html page
*/
// function calibrateLineItemIds() {
//     $('.line-item').each(function (i, obj) {
//         obj.id = 'line-item-' + i;
//         obj.children[lineItemAttributeIndices["name"]].children[0].id = 'product-line-item-select-' + i;
//         obj.children[lineItemAttributeIndices["name"]].children[0]["data-position"] = i;
//         obj.children[lineItemAttributeIndices["name"]].id = 'line-item-name-' + i;
//         obj.children[lineItemAttributeIndices["description"]].id = 'line-item-description-' + i;
//         obj.children[lineItemAttributeIndices["product_id"]].id = 'line-item-product-id-' + i;
//         obj.children[lineItemAttributeIndices["quantity"]].id = 'line-item-quantity-' + i;
//         obj.children[lineItemAttributeIndices["price"]].children[0].children[0].id = 'line-item-price-' + i;
//         obj.children[lineItemAttributeIndices["delete"]].id = 'delete-line-item-' + i;
//     });
// }

// function setupProductQuerySelectForEachLineItem(){
//     $('.line-item').each(function (i, obj) {
//         new QuerySelect(`product-line-item-select-${i}`,
//         '/products.json',
//         RansackSearch('name_cont'),
//         function (data) {
//             //https://select2.org/data-sources/ajax
//             return { results: $.map(data, function(val) { return {"id": val["id"], "text": val["name"], "data-description": val["description"], "data-sku": val["SKU"], "data-price": val["price"]}})};
//         });

//         $(`#product-line-item-select-${i}`).on('change', function (evt) {
//             data=$(`#product-line-item-select-${i}`).select2('data')[0]; //https://stackoverflow.com/questions/33940477/adding-data-attributes-with-select2
//             $(`#line-item-description-${evt.currentTarget["data-position"]}`).text(data["data-description"]);
//             $(`#line-item-product-id-${evt.currentTarget["data-position"]}`).text(data["id"])
//             let lineItemPriceElement = $(`#line-item-price-${evt.currentTarget["data-position"]}`);
//             let hasPriceBeenChangedByUser = lineItemPriceElement.text().trim() != "0.00" && lineItemPriceElement.text().trim() !== ""
//             if (!hasPriceBeenChangedByUser) {// if the price has been manually changed by user, we don't want to overwrite it here, otherwise they will have to re-enter it.
//                 let nonNanPrice = parseFloat(data["data-price"] == null ? 0 : data["data-price"]);//We don't want an NaN in our system.
//                 $(`#line-item-price-${evt.currentTarget["data-position"]}`).text(nonNanPrice.toFixed(2));
//             }
//         });
//     });
// }

// function lineItemEventHandlers() {
//     $(".line-item-price").keyup(function (e) { // Only numbers can be entered in line item prices
//         sumLineItemTotal();
//     });

//     $('.line-item-quantity').keyup(function(e){
//         sumLineItemTotal();
//     });
// }

// function sumLineItemTotal() {
//     //Sum all the line items and put it into the total for the invoice:
//     total = 0.0
//     $('.line-item-price').each(function (i, obj) {
//         thisLineItemPrice = parseFloat(obj.textContent.trim());
//         thisLineItemQuantity = parseInt($('.line-item-quantity')[i].textContent.trim())
//         if (!thisLineItemPrice) {
//             thisLineItemPrice = 0;
//         }
//         var toAdd = convertNaNToZero(thisLineItemPrice * thisLineItemQuantity)
//         total += toAdd;
//     });

//     var formatter = new Intl.NumberFormat('en-US', {
//         style: 'currency',
//         currency: 'USD',
//     });

// $('#line-item-total').text(formatter.format(total));
// }

// function convertNaNToZero(a){ //https://stackoverflow.com/a/7540412/6374022
//     a = a || 0;
//     return a;
// }

// lineItemEventHandlers();

/** Generate Invoice Logic */
// function generateInvoice(basePath, generatingNewInvoiceTemplate = false, send = false) {
// const lineItems = generateLineItemsArray();

// invoiceData = null;

//     if (generatingNewInvoiceTemplate) { //TODO: Pretty bad to add logic variable like this. Should probably use polymorphism somehow.
//         invoiceData = {
//             invoice_template: {
//                 name: $('#template_name').text(),
//                 description: $('#service-notes')[0] && $('#service-notes')[0].innerText,
//                 line_items: lineItems
//             }
//         };
//         $.redirect(`/${basePath}`, invoiceData);
//         //Does a POST to the basePath route with invoiceData
//     }
//     else {
//         const totalfiles = $('#attach_images').prop("files").length;
//         const formData = new FormData();

//         for (let index = 0; index < totalfiles; index++) {
//             formData.append("images[]", $('#attach_images').prop("files")[index]);
//         }

//         const invoice = {
//             'job_id': $('#job-id')[0].textContent.trim(),
//             'invoice_type': $('#type').find(":selected").text().trim(),
//             'invoice_display_number': $('#invoice-display-number')[0].textContent.trim(),
//             'issued_on': $('#invoice-date').val(),
//             'due_on': $('#invoice-due-date').val(),
//             'notes': $('#service-notes')[0].innerText,
//             'invoice_to_id': isBlank($('#select_different_customer_to_invoice').val()) ? '' : $('#select_different_customer_to_invoice').val(),
//             'line_items': lineItems,
//         }

// formData.append('invoice', JSON.stringify(invoice))

//         $.ajax({
//             url: `/${basePath}`,
//             type: "POST",
//             dataType: 'json',
//             data: formData,
//             processData: false,
//             contentType: false,
//             success: function(data){
//                 console.log("Now being redirected to the created invoice");
//                 gritterSuccess("Success", "Invoice added Successfully");
//                 window.location.href = `/${basePath}/${data.id}`;
//             },
//             error: function(data){
//                 console.log("Error Ocurred");
//                 gritterError(`Error`, "Something went wrong");
//             }
//         });
//     }
// }

// function updateInvoice(basePath, invoiceId, updatingInvoiceTemplate = false) {
//     lineItems = generateLineItemsArray();
//     invoiceData = null;
//     if (updatingInvoiceTemplate) { //TODO: Pretty bad to add logic variable like this. Should probably use polymorphism somehow.
//         invoiceData = {
//             invoice_template: {
//                 name: $('#template_name').text(),
//                 description: $('#service-notes')[0] && $('#service-notes')[0].innerText,
//                 line_items: lineItems
//             }
//         };
//     }
//     else{
//         invoiceData = {
//             invoice: {
//                 id: invoiceId,
//                 job_id: $('#job-id')[0].textContent.trim(),
//                 invoice_type: $('#type').find(":selected").text().trim(), //TODO: This is a magic string for the invoices database table
//                 invoice_display_number: $('#invoice-display-number')[0].textContent.trim(),
//                 issued_on: $('#invoice-date').val(),
//                 due_on: $('#invoice-due-date').val(), //.val() is returning empty string for some reason
//                 notes: $('#service-notes')[0].innerText, //it seems $.ajax will encode these new lines with \n instead of \r\n
//                 // private_notes: GetQuillHtml('private-notes'),
//                 invoice_to_id: $('#select_different_customer_to_invoice').val(), //TODO:
//                 line_items: lineItems
//             }
//         };
//     }

//     $.ajax({
//         url: `/${basePath}/${invoiceId}.json`,
//         data: invoiceData,
//         type: 'PUT',
//         success: function (data) {
//             console.log("Now being redirected to the updated invoice");
//             window.location.href = `/${basePath}/${invoiceId}`; //Redirect to the edited invoice
//         }
//     });
// }

// function generateLineItemsArray(){
//     lineItems = []
//     $('.line-item').each(function (itemIndex) {
//         name = $(`#product-line-item-select-${itemIndex}`).find(':selected').text();
//         description = $('.line-item')[itemIndex].children[lineItemAttributeIndices["description"]].innerText;
//         price = $('.line-item')[itemIndex].children[lineItemAttributeIndices["price"]].innerText.replace('$', '').trim();
//         product_id = $(`#product-line-item-select-${itemIndex}`).val();
//         quantity = $('.line-item')[itemIndex].children[lineItemAttributeIndices["quantity"]].innerText;
//         lineItems[itemIndex] = { name: name, description: description, price: price, product_id: product_id, quantity: quantity}
//     });
//     return lineItems;
// }

$(document).ready(function () {
    String.prototype.isEmpty = function() { // https://stackoverflow.com/a/3261380
        return (this.length === 0 || !this.trim());
    };

    $('#type').on('change', function() { //https://stackoverflow.com/questions/11179406/jquery-get-value-of-select-onchange
        $('.invoice_type').innerHTML = this.value;
        if (this.value == "Invoice" || this.value == "Estimate"){
            $('#invoice-due-date-section').show();
        }
        else {
            $('#invoice-due-date-section').hide();
        }
        if (this.value == "Invoice")//TODO: This is pretty bad that it's hardcoded, when we should be using the invoice_helper def invoice_due_text(invoice)
        {
            $('.invoice_type_due_label').text("Due On:");
        }
        else if (this.value == "Estimate"){
            $('.invoice_type_due_label').text("Expires:");
        }

        $('.invoice-display-numberc').text(calculateDisplayNumber($('#job-id')[0].textContent.trim(), this.value, $('#job-invoice-index').text())); //How do we know the job number?
        if (this.value == "Invoice" || this.value == "Change Order"){
            $('#invoice-amount-due-label').text("Due:");
            $('#invoice-amount-due-label').css("color", "darkred");
        }
        else {
            $('#invoice-amount-due-label').text("Total:");
            $('#invoice-amount-due-label').css("color", "");
        }
    });
});

function openOptionsDropdown(){
console.log("Open options dropdown clicked");
document.getElementById("dropdown-menu").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
    if (!event.target.matches('.dropbtn')) {
      var dropdowns = document.getElementsByClassName("dropdown-menu");;
      for ( let i = 0; i < dropdowns.length; i++) {
        var openDropdown = dropdowns[i];
        if (openDropdown.classList.contains('show')) {
          openDropdown.classList.remove('show');
        }
      }
    }
}

Error reading file: U_STRING_NOT_TERMINATED_WARNING

# Place all the behaviors and hooks related to the matching controller here.
# All this logic will automatically be available in application.js.
# You can use CoffeeScript in this file: http://coffeescript.org/

/*!
* baguetteBox.js
* @author feimosi
* @version 1.11.0
* @url https://github.com/feimosi/baguetteBox.js
*/

/* global define, module */

    // SVG shapes used on the buttons
    var leftArrow = '' +
            '' +
            '',
        rightArrow = '' +
            '' +
            '',
        closeX = '' +
            '' +
            '' +
            '' +
            '';
    // Global options and their defaults
    var options = {},
        defaults = {
            captions: true,
            buttons: 'auto',
            fullScreen: false,
            noScrollbars: false,
            bodyClass: 'baguetteBox-open',
            titleTag: false,
            async: false,
            preload: 2,
            animation: 'slideIn',
            afterShow: null,
            afterHide: null,
            onChange: null,
            overlayBackgroundColor: 'rgba(0,0,0,.8)'
        };
    // Object containing information about features compatibility
    var supports = {};
    // DOM Elements references
    var overlay, slider, previousButton, nextButton, closeButton;
    // An array with all images in the current gallery
    var currentGallery = [];
    // Current image index inside the slider
    var currentIndex = 0;
    // Visibility of the overlay
    var isOverlayVisible = false;
    // Touch event start position (for slide gesture)
    var touch = {};
    // If set to true ignore touch events because animation was already fired
    var touchFlag = false;
    // Regex pattern to match image files
    var regex = /.+\.(gif|jpe?g|png|webp)/i;
    // Object of all used galleries
    var data = {};
    // Array containing temporary images DOM elements
    var imagesElements = [];
    // The last focused element before opening the overlay
    var documentLastFocus = null;
    var overlayClickHandler = function(event) {
        // Close the overlay when user clicks directly on the background
        if (event.target.id.indexOf('baguette-img') !== -1) {
            hideOverlay();
        }
    };
    var previousButtonClickHandler = function(event) {
        event.stopPropagation ? event.stopPropagation() : event.cancelBubble = true; // eslint-disable-line no-unused-expressions
        showPreviousImage();
    };
    var nextButtonClickHandler = function(event) {
        event.stopPropagation ? event.stopPropagation() : event.cancelBubble = true; // eslint-disable-line no-unused-expressions
        showNextImage();
    };
    var closeButtonClickHandler = function(event) {
        event.stopPropagation ? event.stopPropagation() : event.cancelBubble = true; // eslint-disable-line no-unused-expressions
        hideOverlay();
    };
    var touchstartHandler = function(event) {
        touch.count++;
        if (touch.count > 1) {
            touch.multitouch = true;
        }
        // Save x and y axis position
        touch.startX = event.changedTouches[0].pageX;
        touch.startY = event.changedTouches[0].pageY;
    };
    var touchmoveHandler = function(event) {
        // If action was already triggered or multitouch return
        if (touchFlag || touch.multitouch) {
            return;
        }
        event.preventDefault ? event.preventDefault() : event.returnValue = false; // eslint-disable-line no-unused-expressions
        var touchEvent = event.touches[0] || event.changedTouches[0];
        // Move at least 40 pixels to trigger the action
        if (touchEvent.pageX - touch.startX > 40) {
            touchFlag = true;
            showPreviousImage();
        } else if (touchEvent.pageX - touch.startX < -40) {
            touchFlag = true;
            showNextImage();
        // Move 100 pixels up to close the overlay
        } else if (touch.startY - touchEvent.pageY > 100) {
            hideOverlay();
        }
    };
    var touchendHandler = function() {
        touch.count--;
        if (touch.count <= 0) {
            touch.multitouch = false;
        }
        touchFlag = false;
    };
    var contextmenuHandler = function() {
        touchendHandler();
    };

    var trapFocusInsideOverlay = function(event) {
        if (overlay.style.display === 'block' && (overlay.contains && !overlay.contains(event.target))) {
            event.stopPropagation();
            initFocus();
        }
    };

    // forEach polyfill for IE8
    // http://stackoverflow.com/a/14827443/1077846
    /* eslint-disable */
    if (![].forEach) {
        Array.prototype.forEach = function(callback, thisArg) {
            for (var i = 0; i < this.length; i++) {
                callback.call(thisArg, this[i], i, this);
            }
        };
    }

    // filter polyfill for IE8
    // https://gist.github.com/eliperelman/1031656
    if (![].filter) {
        Array.prototype.filter = function(a, b, c, d, e) {
            c = this;
            d = [];
            for (e = 0; e < c.length; e++)
                a.call(b, c[e], e, c) && d.push(c[e]);
            return d;
        };
    }
    /* eslint-enable */

    // Script entry point
    function run(selector, userOptions) {
        // Fill supports object
        supports.transforms = testTransformsSupport();
        supports.svg = testSvgSupport();
        supports.passiveEvents = testPassiveEventsSupport();

        buildOverlay();
        removeFromCache(selector);
        return bindImageClickListeners(selector, userOptions);
    }

    function bindImageClickListeners(selector, userOptions) {
        // For each gallery bind a click event to every image inside it
        var galleryNodeList = document.querySelectorAll(selector);
        var selectorData = {
            galleries: [],
            nodeList: galleryNodeList
        };
        data[selector] = selectorData;

        [].forEach.call(galleryNodeList, function(galleryElement) {
            if (userOptions && userOptions.filter) {
                regex = userOptions.filter;
            }

            // Get nodes from gallery elements or single-element galleries
            var tagsNodeList = [];
            if (galleryElement.tagName === 'A') {
                tagsNodeList = [galleryElement];
            } else {
                tagsNodeList = galleryElement.getElementsByTagName('a');
            }

            // Filter 'a' elements from those not linking to images
            tagsNodeList = [].filter.call(tagsNodeList, function(element) {
                if (element.className.indexOf(userOptions && userOptions.ignoreClass) === -1) {
                    //Check if the className is 'lightbox' before testing if the file ends in jpeg, png, etc.
                    return element.className == "lightbox" || regex.test(element.href); //this filter is causing it to not display the images...??
                    // This way, if a photo is saved but the 'lightbox' class is added to it, we still know it's a photo and we can display it in the photo modal.
                }
            });

            if (tagsNodeList.length === 0) {
                return;
            }

            var gallery = [];
            [].forEach.call(tagsNodeList, function(imageElement, imageIndex) {
                var imageElementClickHandler = function(event) {
                    event.preventDefault ? event.preventDefault() : event.returnValue = false; // eslint-disable-line no-unused-expressions
                    prepareOverlay(gallery, userOptions);
                    showOverlay(imageIndex);
                };
                var imageItem = {
                    eventHandler: imageElementClickHandler,
                    imageElement: imageElement
                };
                bind(imageElement, 'click', imageElementClickHandler);
                gallery.push(imageItem);
                console.log('binding image click listener for ' + imageElement);

            });
            selectorData.galleries.push(gallery);
        });

return selectorData.galleries;
}

    function clearCachedData() {
        for (var selector in data) {
            if (data.hasOwnProperty(selector)) {
                removeFromCache(selector);
            }
        }
    }

    function removeFromCache(selector) {
        if (!data.hasOwnProperty(selector)) {
            return;
        }
        var galleries = data[selector].galleries;
        [].forEach.call(galleries, function(gallery) {
            [].forEach.call(gallery, function(imageItem) {
                unbind(imageItem.imageElement, 'click', imageItem.eventHandler);
            });

            if (currentGallery === gallery) {
                currentGallery = [];
            }
        });

delete data[selector];
}

    function buildOverlay() {
        overlay = getByID('baguetteBox-overlay');
        // Check if the overlay already exists
        if (overlay) {
            slider = getByID('baguetteBox-slider');
            previousButton = getByID('previous-button');
            nextButton = getByID('next-button');
            closeButton = getByID('close-button');
            return;
        }
        // Create overlay element
        overlay = create('div');
        overlay.setAttribute('role', 'dialog');
        overlay.id = 'baguetteBox-overlay';
        document.getElementsByTagName('body')[0].appendChild(overlay);
        // Create gallery slider element
        slider = create('div');
        slider.id = 'baguetteBox-slider';
        overlay.appendChild(slider);
        // Create all necessary buttons
        previousButton = create('button');
        previousButton.setAttribute('type', 'button');
        previousButton.id = 'previous-button';
        previousButton.setAttribute('aria-label', 'Previous');
        previousButton.innerHTML = supports.svg ? leftArrow : '<';
        overlay.appendChild(previousButton);

        nextButton = create('button');
        nextButton.setAttribute('type', 'button');
        nextButton.id = 'next-button';
        nextButton.setAttribute('aria-label', 'Next');
        nextButton.innerHTML = supports.svg ? rightArrow : '>';
        overlay.appendChild(nextButton);

        closeButton = create('button');
        closeButton.setAttribute('type', 'button');
        closeButton.id = 'close-button';
        closeButton.setAttribute('aria-label', 'Close');
        closeButton.innerHTML = supports.svg ? closeX : '×';
        overlay.appendChild(closeButton);

previousButton.className = nextButton.className = closeButton.className = 'baguetteBox-button';

bindEvents();
}

    function keyDownHandler(event) {
        switch (event.keyCode) {
        case 37: // Left arrow
            showPreviousImage();
            break;
        case 39: // Right arrow
            showNextImage();
            break;
        case 27: // Esc
            hideOverlay();
            break;
        case 36: // Home
            showFirstImage(event);
            break;
        case 35: // End
            showLastImage(event);
            break;
        }
    }

    function bindEvents() {
        var options = supports.passiveEvents ? { passive: true } : null;
        bind(overlay, 'click', overlayClickHandler);
        bind(previousButton, 'click', previousButtonClickHandler);
        bind(nextButton, 'click', nextButtonClickHandler);
        bind(closeButton, 'click', closeButtonClickHandler);
        bind(slider, 'contextmenu', contextmenuHandler);
        bind(overlay, 'touchstart', touchstartHandler, options);
        bind(overlay, 'touchmove', touchmoveHandler, options);
        bind(overlay, 'touchend', touchendHandler);
        bind(document, 'focus', trapFocusInsideOverlay, true);
    }

    function unbindEvents() {
        var options = supports.passiveEvents ? { passive: true } : null;
        unbind(overlay, 'click', overlayClickHandler);
        unbind(previousButton, 'click', previousButtonClickHandler);
        unbind(nextButton, 'click', nextButtonClickHandler);
        unbind(closeButton, 'click', closeButtonClickHandler);
        unbind(slider, 'contextmenu', contextmenuHandler);
        unbind(overlay, 'touchstart', touchstartHandler, options);
        unbind(overlay, 'touchmove', touchmoveHandler, options);
        unbind(overlay, 'touchend', touchendHandler);
        unbind(document, 'focus', trapFocusInsideOverlay, true);
    }

    function prepareOverlay(gallery, userOptions) {
        // If the same gallery is being opened prevent from loading it once again
        if (currentGallery === gallery) {
            return;
        }
        currentGallery = gallery;
        // Update gallery specific options
        setOptions(userOptions);
        // Empty slider of previous contents (more effective than .innerHTML = "")
        while (slider.firstChild) {
            slider.removeChild(slider.firstChild);
        }
        imagesElements.length = 0;

        var imagesFiguresIds = [];
        var imagesCaptionsIds = [];
        // Prepare and append images containers and populate figure and captions IDs arrays
        for (var i = 0, fullImage; i < gallery.length; i++) {
            fullImage = create('div');
            fullImage.className = 'full-image';
            fullImage.id = 'baguette-img-' + i;
            imagesElements.push(fullImage);

            imagesFiguresIds.push('baguetteBox-figure-' + i);
            imagesCaptionsIds.push('baguetteBox-figcaption-' + i);
            slider.appendChild(imagesElements[i]);
        }
        overlay.setAttribute('aria-labelledby', imagesFiguresIds.join(' '));
        overlay.setAttribute('aria-describedby', imagesCaptionsIds.join(' '));
    }

    function showOverlay(chosenImageIndex) {
        if (options.noScrollbars) {
            document.documentElement.style.overflowY = 'hidden';
            document.body.style.overflowY = 'scroll';
        }
        if (overlay.style.display === 'block') {
            return;
        }

        bind(document, 'keydown', keyDownHandler);
        currentIndex = chosenImageIndex;
        touch = {
            count: 0,
            startX: null,
            startY: null
        };
        loadImage(currentIndex, function() {
            preloadNext(currentIndex);
            preloadPrev(currentIndex);
        });

        updateOffset();
        overlay.style.display = 'block';
        if (options.fullScreen) {
            enterFullScreen();
        }
        // Fade in overlay
        setTimeout(function() {
            overlay.className = 'visible';
            if (options.bodyClass && document.body.classList) {
                document.body.classList.add(options.bodyClass);
            }
            if (options.afterShow) {
                options.afterShow();
            }
        }, 50);
        if (options.onChange) {
            options.onChange(currentIndex, imagesElements.length);
        }
        documentLastFocus = document.activeElement;
        initFocus();
        isOverlayVisible = true;
    }

    function initFocus() {
        if (options.buttons) {
            previousButton.focus();
        } else {
            closeButton.focus();
        }
    }

    function hideOverlay() {
        if (options.noScrollbars) {
            document.documentElement.style.overflowY = 'auto';
            document.body.style.overflowY = 'auto';
        }
        if (overlay.style.display === 'none') {
            return;
        }

        unbind(document, 'keydown', keyDownHandler);
        // Fade out and hide the overlay
        overlay.className = '';
        setTimeout(function() {
            overlay.style.display = 'none';
            if (document.fullscreen) {
                exitFullscreen();
            }
            if (options.bodyClass && document.body.classList) {
                document.body.classList.remove(options.bodyClass);
            }
            if (options.afterHide) {
                options.afterHide();
            }
            documentLastFocus && documentLastFocus.focus();
            isOverlayVisible = false;
        }, 500);
    }

    function loadImage(index, callback) {
        var imageContainer = imagesElements[index];
        var galleryItem = currentGallery[index];

        // Return if the index exceeds prepared images in the overlay
        // or if the current gallery has been changed / closed
        if (typeof imageContainer === 'undefined' || typeof galleryItem === 'undefined') {
            return;
        }

        // If image is already loaded run callback and return
        if (imageContainer.getElementsByTagName('img')[0]) {
            if (callback) {
                callback();
            }
            return;
        }

        // Get element reference, optional caption and source path
        var imageElement = galleryItem.imageElement;
        var thumbnailElement = imageElement.getElementsByTagName('img')[0];
        var imageCaption = typeof options.captions === 'function' ?
            options.captions.call(currentGallery, imageElement) :
            imageElement.getAttribute('data-caption') || imageElement.title;
        var imageSrc = getImageSrc(imageElement);

        // Prepare figure element
        var figure = create('figure');
        figure.id = 'baguetteBox-figure-' + index;
        figure.innerHTML = '

' +
'

';
        // Insert caption if available
        if (options.captions && imageCaption) {
            var figcaption = create('figcaption');
            figcaption.id = 'baguetteBox-figcaption-' + index;
            figcaption.innerHTML = imageCaption;
            figure.appendChild(figcaption);
        }
        imageContainer.appendChild(figure);

        // Prepare gallery img element
        var image = create('img');
        image.onload = function() {
            // Remove loader element
            var spinner = document.querySelector('#baguette-img-' + index + ' .baguetteBox-spinner');
            figure.removeChild(spinner);
            if (!options.async && callback) {
                callback();
            }
        };
        image.setAttribute('src', imageSrc);
        image.alt = thumbnailElement ? thumbnailElement.alt || '' : '';
        if (options.titleTag && imageCaption) {
            image.title = imageCaption;
        }
        figure.appendChild(image);

        // Run callback
        if (options.async && callback) {
            callback();
        }
    }

    // Get image source location, mostly used for responsive images
    function getImageSrc(image) {
        // Set default image path from href
        var result = image.href;
        // If dataset is supported find the most suitable image
        if (image.dataset) {
            var srcs = [];
            // Get all possible image versions depending on the resolution
            for (var item in image.dataset) {
                if (item.substring(0, 3) === 'at-' && !isNaN(item.substring(3))) {
                    srcs[item.replace('at-', '')] = image.dataset[item];
                }
            }
            // Sort resolutions ascending
            var keys = Object.keys(srcs).sort(function(a, b) {
                return parseInt(a, 10) < parseInt(b, 10) ? -1 : 1;
            });
            // Get real screen resolution
            var width = window.innerWidth * window.devicePixelRatio;
            // Find the first image bigger than or equal to the current width
            var i = 0;
            while (i < keys.length - 1 && keys[i] < width) {
                i++;
            }
            result = srcs[keys[i]] || result;
        }
        return result;
    }

    // Return false at the right end of the gallery
    function showNextImage() {
        return show(currentIndex + 1);
    }

    // Return false at the left end of the gallery
    function showPreviousImage() {
        return show(currentIndex - 1);
    }

    // Return false at the left end of the gallery
    function showFirstImage(event) {
        if (event) {
            event.preventDefault();
        }
        return show(0);
    }

    // Return false at the right end of the gallery
    function showLastImage(event) {
        if (event) {
            event.preventDefault();
        }
        return show(currentGallery.length - 1);
    }

    /**
     * Move the gallery to a specific index
     * @param `index` {number} - the position of the image
     * @param `gallery` {array} - gallery which should be opened, if omitted assumes the currently opened one
     * @return {boolean} - true on success or false if the index is invalid
     */
    function show(index, gallery) {
        if (!isOverlayVisible && index >= 0 && index < gallery.length) {
            prepareOverlay(gallery, options);
            showOverlay(index);
            return true;
        }
        if (index < 0) {
            if (options.animation) {
                bounceAnimation('left');
            }
            return false;
        }
        if (index >= imagesElements.length) {
            if (options.animation) {
                bounceAnimation('right');
            }
            return false;
        }

        currentIndex = index;
        loadImage(currentIndex, function() {
            preloadNext(currentIndex);
            preloadPrev(currentIndex);
        });
        updateOffset();

        if (options.onChange) {
            options.onChange(currentIndex, imagesElements.length);
        }

return true;
}

    /**
     * Triggers the bounce animation
     * @param {('left'|'right')} direction - Direction of the movement
     */
    function bounceAnimation(direction) {
        slider.className = 'bounce-from-' + direction;
        setTimeout(function() {
            slider.className = '';
        }, 400);
    }

    // CSS 3D Transforms test
    function testTransformsSupport() {
        var div = create('div');
        return typeof div.style.perspective !== 'undefined' || typeof div.style.webkitPerspective !== 'undefined';
    }

    // Inline SVG test
    function testSvgSupport() {
        var div = create('div');
        div.innerHTML = '';
        return (div.firstChild && div.firstChild.namespaceURI) === 'http://www.w3.org/2000/svg';
    }

    // Borrowed from https://github.com/seiyria/bootstrap-slider/pull/680/files
    /* eslint-disable getter-return */
    function testPassiveEventsSupport() {
        var passiveEvents = false;
        try {
            var opts = Object.defineProperty({}, 'passive', {
                get: function() {
                    passiveEvents = true;
                }
            });
            window.addEventListener('test', null, opts);
        } catch (e) { /* Silence the error and continue */ }

        return passiveEvents;
    }
    /* eslint-enable getter-return */

    function unbind(element, event, callback, options) {
        if (element.removeEventListener) {
            element.removeEventListener(event, callback, options);
        } else {
            // IE8 fallback
            element.detachEvent('on' + event, callback);
        }
    }

    function getByID(id) {
        return document.getElementById(id);
    }

    function create(element) {
        return document.createElement(element);
    }

    function destroyPlugin() {
        unbindEvents();
        clearCachedData();
        unbind(document, 'keydown', keyDownHandler);
        document.getElementsByTagName('body')[0].removeChild(document.getElementById('baguetteBox-overlay'));
        data = {};
        currentGallery = [];
        currentIndex = 0;
    }

    return {
        run: run,
        show: show,
        showNext: showNextImage,
        showPrevious: showPreviousImage,
        hide: hideOverlay,
        destroy: destroyPlugin
    };
}));

/*
jQuery Redirect v1.1.3
Copyright (c) 2013-2018 Miguel Galante
Copyright (c) 2011-2013 Nemanja Avramovic, www.avramovic.info
Licensed under CC BY-SA 4.0 License: http://creativecommons.org/licenses/by-sa/4.0/
This means everyone is allowed to:
Share - copy and redistribute the material in any medium or format
Adapt - remix, transform, and build upon the material for any purpose, even commercially.
Under following conditions:
Attribution - You must give appropriate credit, provide a link to the license, and indicate if changes were made. You may do so in any reasonable manner, but not in any way that suggests the licensor endorses you or your use.
ShareAlike - If you remix, transform, or build upon the material, you must distribute your contributions under the same license as the original.
*/
;(function ($) {
    'use strict';

    //Defaults configuration
    var defaults = {
      url: null,
      values: null,
      method: "POST",
      target: null,
      traditional: false,
      redirectTop: false
    };

    /**
    * jQuery Redirect
    * @param {string} url - Url of the redirection
    * @param {Object} values - (optional) An object with the data to send. If not present will look for values as QueryString in the target url.
    * @param {string} method - (optional) The HTTP verb can be GET or POST (defaults to POST)
    * @param {string} target - (optional) The target of the form. "_blank" will open the url in a new window.
    * @param {boolean} traditional - (optional) This provides the same function as jquery's ajax function. The brackets are omitted on the field name if its an array.  This allows arrays to work with MVC.net among others.
    * @param {boolean} redirectTop - (optional) If its called from a iframe, force to navigate the top window.
    *//**
    * jQuery Redirect
    * @param {string} opts - Options object
    * @param {string} opts.url - Url of the redirection
    * @param {Object} opts.values - (optional) An object with the data to send. If not present will look for values as QueryString in the target url.
    * @param {string} opts.method - (optional) The HTTP verb can be GET or POST (defaults to POST)
    * @param {string} opts.target - (optional) The target of the form. "_blank" will open the url in a new window.
    * @param {boolean} opts.traditional - (optional) This provides the same function as jquery's ajax function. The brackets are omitted on the field name if its an array.  This allows arrays to work with MVC.net among others.
    * @param {boolean} opts.redirectTop - (optional) If its called from a iframe, force to navigate the top window.
    */
    $.redirect = function (url, values, method, target, traditional, redirectTop) {
      var opts = url;
      if (typeof url !== "object") {
        var opts = {
          url: url,
          values: values,
          method: method,
          target: target,
          traditional: traditional,
          redirectTop: redirectTop
        };
      }

      var config = $.extend({}, defaults, opts);
      var generatedForm = $.redirect.getForm(config.url, config.values, config.method, config.target, config.traditional);
      $('body', config.redirectTop ? window.top.document : undefined).append(generatedForm.form);
      generatedForm.submit();
      generatedForm.form.remove();
    };

    $.redirect.getForm = function (url, values, method, target, traditional) {
      method = (method && ["GET", "POST", "PUT", "DELETE"].indexOf(method.toUpperCase()) !== -1) ? method.toUpperCase() : 'POST';

      url = url.split("#");
      var hash = url[1] ? ("#" + url[1]) : "";
      url = url[0];

      if (!values) {
        var obj = $.parseUrl(url);
        url = obj.url;
        values = obj.params;
      }

      values = removeNulls(values);

      var form = $('')
        .attr("method", method)
        .attr("action", url + hash);


      if (target) {
        form.attr("target", target);
      }

      var submit = form[0].submit;
      iterateValues(values, [], form, null, traditional);

      return { form: form, submit: function () { submit.call(form[0]); } };
    }

    //Utility Functions
      /**
       * Url and QueryString Parser.
       * @param {string} url - a Url to parse.
       * @returns {object} an object with the parsed url with the following structure {url: URL, params:{ KEY: VALUE }}
       */
    $.parseUrl = function (url) {

      if (url.indexOf('?') === -1) {
        return {
          url: url,
          params: {}
        };
      }
      var parts = url.split('?'),
        query_string = parts[1],
        elems = query_string.split('&');
      url = parts[0];

      var i, pair, obj = {};
      for (i = 0; i < elems.length; i += 1) {
        pair = elems[i].split('=');
        obj[pair[0]] = pair[1];
      }

      return {
        url: url,
        params: obj
      };
    };

    //Private Functions
    var getInput = function (name, value, parent, array, traditional) {
      var parentString;
      if (parent.length > 0) {
        parentString = parent[0];
        var i;
        for (i = 1; i < parent.length; i += 1) {
          parentString += "[" + parent[i] + "]";
        }

        if (array) {
          if (traditional)
            name = parentString;
          else
            name = parentString + "[" + name + "]";
        } else {
          name = parentString + "[" + name + "]";
        }
      }

      return $("").attr("type", "hidden")
        .attr("name", name)
        .attr("value", value);
    };

    var iterateValues = function (values, parent, form, isArray, traditional) {
      var i, iterateParent = [];
      Object.keys(values).forEach(function (i) {
        if (typeof values[i] === "object") {
          iterateParent = parent.slice();
          iterateParent.push(i);
          iterateValues(values[i], iterateParent, form, Array.isArray(values[i]), traditional);
        } else {
          form.append(getInput(i, values[i], parent, isArray, traditional));
        }
      });
    };

    var removeNulls = function (values) {
      var propNames = Object.getOwnPropertyNames(values);
      for (var i = 0; i < propNames.length; i++) {
        var propName = propNames[i];
        if (values[propName] === null || values[propName] === undefined) {
          delete values[propName];
        } else if (typeof values[propName] === 'object') {
          values[propName] = removeNulls(values[propName]);
        } else if (values[propName].length < 1) {
          delete values[propName];
        }
      }
      return values;
    };
  }(window.jQuery || window.Zepto || window.jqlite));

# Place all the behaviors and hooks related to the matching controller here.
# All this logic will automatically be available in application.js.
# You can use CoffeeScript in this file: http://coffeescript.org/

$(function() {
    $('#existing-customer-radio').click(); //Have the existing customer fields show first.
    $('#existing-customer-radio').click(() => {
        $('#existing-customer-fields').show();
        $('#new-customer-fields').hide();
    });

    $('#new-customer-radio').click(() => {
        $('#existing-customer-fields').hide();
        $('#new-customer-fields').show();
    });
});

let trimNonNumericValue = (str) => {
return str.replace(/[^.\d]/g, '');
}

let isValidEmail = (str) => {
return /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(str) //https://www.w3resource.com/javascript/form/email-validation.php
}

let isValidPhoneNumber = (str) => {
return /^((\+1)?[\s-]?)?$?[1-9]\d\d$?[\s-]?[1-9]\d\d[\s-]?\d\d\d\d/.test(str);
};

let isBlank = (str) => {
return (!str || /^\s*$/.test(str));
}

let formatCurrency = (str) => {
  // Create our number formatter.
  var formatter = new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD',
  });

return formatter.format(str); /* $2,500.00 */
}
/*
Text Message Template Validators
**/

//used in evaluating the text message template variable: {{start_time}}
let evaluateStartTimeForTextMessage = (startDateTime) => {
return moment(startDateTime).utc().format('h:mm a');
}

//used in evaluating the text message template variable: {{readable_start_time}}
let evaluateReadableStartTimeFromAppointment = (startDateTime) => {
  return moment(startDateTime).calendar({
    sameDay: '[today at] h:mm a',
    nextDay: '[tomorrow] h:mm a',
    nextWeek: '[this upcoming] ddd [at] h:mm a',
    lastDay: '[yesterday]',
    lastWeek: '[last] ddd',
    sameElse: 'ddd, MMM Do [at] h:mm a',
  });
}

//used in evaluating the readable event time in the /events table
let evaluateReadableDateTime = (datetime) => {
  return moment(datetime).calendar({
    sameDay: '[today at] h:mm a',
    nextDay: '[tomorrow] h:mm a',
    nextWeek: '[this upcoming] ddd [at] h:mm a',
    lastDay: '[yesterday at] h:mm a',
    lastWeek: '[last] ddd [at] h:mm a',
    sameElse: 'ddd, MMM Do [at] h:mm a',
  });
}

//used in evaluating the text message template variable: {{end_time}}
let evaluateEndTimeForTextMessage = (endDateTime) => {
return moment(endDateTime).utc().format('h:mm a')
}

//used in evaluating the text message template variable: {{day}}
let evaluateDayForTextMessage = (startDateTime) => {
  return moment(startDateTime).calendar({
    sameDay: '[today]',
    nextDay: '[tomorrow]',
    nextWeek: '[this upcoming] ddd',
    lastDay: '[yesterday]',
    lastWeek: '[last] ddd',
    sameElse: 'ddd',
  })
}

//used in evaluating the text message template variable: {{date}}
let evaluateDateForTextMessage = (startDateTime) => {
return moment(startDateTime).utc().format('MMM Do');
}

//used in evaluating the text message template variable: {{date}}
let formatReadableDate = (startDateTime) => {
return moment(startDateTime).utc().format('MMM Do YYYY');
}

function addLineItem(description = null, price = null){
    var description = description;
    if (description == null){
        description = "Enter Description Here..";
    }
    var price = price;
    if (price == null){
        price = "0.00";
    }
    var $lineItemRow = $("

");
var $lineItemDescription = $("

");
    var $lineItemInputDescription = $("")
    $lineItemDescription.append($lineItemInputDescription);
    $lineItemRow.append($lineItemDescription);

var $lineItemPrice = $("

");
    var $lineItemPriceInput = $("")
    $lineItemPrice.append($lineItemPriceInput);
    $lineItemRow.append($lineItemPrice);

var $lineItemDelete = $("

");
    var $lineItemDeleteInput = $("Delete Line Item")
    $lineItemDelete.append($lineItemDeleteInput);
    $lineItemRow.append($lineItemDelete);

    $lineItemRow.insertBefore($('#line-items'));
    // lineItemEventHandlers();
    // calibrateLineItemIds();
}

# Place all the behaviors and hooks related to the matching controller here.
# All this logic will automatically be available in application.js.
# You can use CoffeeScript in this file: http://coffeescript.org/

$(function(){
    new PublicMarketingSourceSelect('request_marketing_source_select', $('#job_request_business_id').text(), function(event){
        $('#job_request_marketing_sources_id').val(event.currentTarget.value);
    });
    setPhoneNumberValidationCallback();
    setEmailValidationCallback();
    setPhoneNumberCustomerLookupCallback();
});

setEmailValidationCallback = function(){
    $('#job_request_email').change(function(event){
        //let's remove any whitespace at beginning or end of the value first.
        const attemptedEmail = event.currentTarget.value;
        const trimmedOfWhitespaceEmail = attemptedEmail.trim();
        event.currentTarget.value = trimmedOfWhitespaceEmail;
        if (!isValidEmail(event.currentTarget.value)){
            $('#job_request_email').addClass('is-invalid');
            $("#job_request_email").parent().append('Email wasn\'t in correct format.');
        }
        else{
            $('#job_request_email').removeClass('is-invalid');
            $('#job_request_email').addClass('is-valid');
            $('.email-invalid-text').remove();
        }
    });
}

setPhoneNumberValidationCallback = function(){
    $('#job_request_phone').change(function(event){
        if (!isValidPhoneNumber(event.currentTarget.value)){
            $('#job_request_phone').addClass('is-invalid');
            $("#job_request_phone").parent().append('Phone wasn\'t in correct format');
        }
        else{
            $('#job_request_phone').removeClass('is-invalid');
            $('#job_request_phone').addClass('is-valid');
            $('.phone-invalid-text').remove();
        }
    });
}

setPhoneNumberCustomerLookupCallback = function(){
    $('#job_request_phone').change(function(event){
        console.log("Searching for phone number to see if this customer is in our system.")
        if (isValidPhoneNumber(event.currentTarget.value)){
            let secretAuthKey = $('#job_request_secret_key').val();
            let cleanPhoneNumber = trimNonNumericValue(event.currentTarget.value);
            console.log(`${cleanPhoneNumber} is valid, searching now..`)

            $.get({url: `/resolve_phone?secret_key=${secretAuthKey}&phone=${cleanPhoneNumber}`,
                success: function(data){
                    if (data.customer){
                        console.log(`Found a customer record for ${cleanPhoneNumber}`)
                        $('#customer_information_card_name').text(data.customer.full_name);
                        $('#customer_information_card_phone').text(formatPhoneNumber(data.customer.phone));
                        $('#customer_information_card_email').text(data.customer.email);
                        $('#customer_information_card_address').text(data.customer.default_location?.display_address);
                        $('#location_information_card_address').text(`${data.customer.default_location?.street_address}, ${data.customer.default_location?.city} ${data.customer.default_location?.zip_code}`)
                        window.scrollTo(0,0); //scroll to top so user can see the modal.
                        $('#is_this_you_customer_lookup_modal_for_job_request').modal('show');
                        $('.modal-backdrop').remove(); //If we don't call this then the backdrop pops up in front of the modal and breaks the functionality
                        $('#yes_button_add_customer_information').on('click', function(event){
                            //Set all the information on the form with the customer information.
                            $('#job_request_first_name').val(data.customer.first_name);
                            $('#job_request_last_name').val(data.customer.last_name);
                            $('#job_request_email').val(data.customer.email);

                            // Leaving this commented out for now until I decide what to do with it. Basically, if the user says "Yes" but doesn't have a state saved, then it won't save the state even though it should.
                            // Right now, the default is to set the state based on the business state value. So if the customer's
                            if (data.customer.default_location?.state != null){ //Don't erase our state out if it was already set by our system.
                                $('#job_request_state').val(data.customer.default_location?.state);
                            }

                            $('#job_request_customer_id').val(data.customer.id);
                            $('#is_this_the_correct_address_lookup_modal').modal('show');
                            $('.modal-backdrop').remove(); //If we don't call this then the backdrop pops up in front of the modal and breaks the functionality
                            $('#yes_button_correct_address_information').on('click', function(event){
                                $('#job_request_street_address').val(data.customer.default_location?.street_address);
                                $('#job_request_location_id').val(data.customer.default_location?.id);
                                $('#job_request_city').val(data.customer.default_location?.city);
                                $('#job_request_zip').val(data.customer.default_location?.zip_code);
                                $('#job_request_create_new_location_for_job_request').val(false);

                            });

                            $('#no_button_correct_address_information').on('click', function(event){
                                $('#job_request_street_address').val('');
                                $('#job_request_city').val('');
                                $('#job_request_zip').val('');
                                //create new location for user =
                                $('#job_request_create_new_location_for_job_request').val(true);
                            });
                        });
                        //If Yes, autofill the fields with customer info and add customer ID
                        //If No, then close modal silently.
                    }
                    else {
                        console.log(`Didn't find any customer record for ${cleanPhoneNumber}`)
                    }
                }
            })
        }
    });
}

function GetQuillHtml(id){
return $(`#${id}`)[0].children[0].innerHTML;
}

function SetQuillHtml(id, givenHtml){
$(`#${id}`)[0].children[0].innerHTML = givenHtml;
}

/**
* Makes sure that the modal is completely closed.
* @param {Id of Modal to close} id
*/
function ForceCloseModal(id){
    $(`#${id}`).toggle('modal');
    $('.modal-backdrop').remove();
    $('body').removeClass('modal-open');
}

# Place all the behaviors and hooks related to the matching controller here.
# All this logic will automatically be available in application.js.
# You can use CoffeeScript in this file: http://coffeescript.org/

$(function(){
    $('.edit_job_appointment_modal').click(function(evt){
      setEmployeeJobModalToBeEditModal(evt);
    });
  });

  $('#new_employee_job').on('ajax:success', function(event){
    var data = event.detail[0];
    var wasAnUpdate = event.detail[1] == "Accepted"; //Means was a PUT request to server
    if (wasAnUpdate){
      //Modifying the the table row and put new, updated info in.
      setEmployeeJobRow(appointmentEditButtonClickedOn, data)
      setModalBackToAdd();
    }
  });

//Important! This global is used by methods to determine what to do.
var appointmentEditButtonClickedOn = null; //Saving state like this.. might be a bad idea..

function setModalBackToAdd(firstTimeInitializingAddModal){
    //We need to remove the attributes to cha nge it back to a POST instead of a PUT.
      clearAppointmentModalForm();
      $('#submitJobAppointmentButton').removeAttr('formaction');
      $('#submitJobAppointmentButton').removeAttr('formmethod');

    appointmentEditButtonClickedOn = null;

    const start = moment();
    const remainder = 30 - (start.minute() % 30); // rounding process.
    const startDate = moment(start).add(remainder, "minutes")

SetFlatpickr('employee_job_time_start', startDate.toDate());
SetFlatpickr('employee_job_time_end', startDate.add(2, 'h').toDate());

//should set the default employee too..
SetSelect2Option('employee_select', currentEmployeeName, currentEmployeeId);
}

function setEmployeeJobRow(editButtonElement, data){
    editButtonElement.parentElement.parentElement.children[0].innerHTML = data["employee_name"];
    editButtonElement.parentElement.parentElement.children[1].innerHTML = data["appointment_type_name"];
    editButtonElement.parentElement.parentElement.children[2].innerHTML = data["formatted_start"];
    editButtonElement.parentElement.parentElement.children[3].innerHTML = data["formatted_end"];
}

/*
* bootstrap-tagsinput v0.8.0
*
*/

');
      this.$input = $('').appendTo(this.$container);

      this.$element.before(this.$container);

      this.build(options);
      this.isInit = false;
    }

    TagsInput.prototype = {
      constructor: TagsInput,

      /**
       * Adds the given item as a new tag. Pass true to dontPushVal to prevent
       * updating the elements val()
       */
      add: function(item, dontPushVal, options) {
        var self = this;

        if (self.options.maxTags && self.itemsArray.length >= self.options.maxTags)
          return;

        // Ignore falsey values, except false
        if (item !== false && !item)
          return;

        // Trim value
        if (typeof item === "string" && self.options.trimValue) {
          item = $.trim(item);
        }

        // Throw an error when trying to add an object while the itemValue option was not set
        if (typeof item === "object" && !self.objectItems)
          throw("Can't add objects when itemValue option is not set");

        // Ignore strings only containg whitespace
        if (item.toString().match(/^\s*$/))
          return;

        // If SELECT but not multiple, remove current tag
        if (self.isSelect && !self.multiple && self.itemsArray.length > 0)
          self.remove(self.itemsArray[0]);

        if (typeof item === "string" && this.$element[0].tagName === 'INPUT') {
          var delimiter = (self.options.delimiterRegex) ? self.options.delimiterRegex : self.options.delimiter;
          var items = item.split(delimiter);
          if (items.length > 1) {
            for (var i = 0; i < items.length; i++) {
              this.add(items[i], true);
            }

            if (!dontPushVal)
              self.pushVal(self.options.triggerChange);
            return;
          }
        }

        var itemValue = self.options.itemValue(item),
            itemText = self.options.itemText(item),
            tagClass = self.options.tagClass(item),
            itemTitle = self.options.itemTitle(item);

        // Ignore items allready added
        var existing = $.grep(self.itemsArray, function(item) { return self.options.itemValue(item) === itemValue; } )[0];
        if (existing && !self.options.allowDuplicates) {
          // Invoke onTagExists
          if (self.options.onTagExists) {
            var $existingTag = $(".badge", self.$container).filter(function() { return $(this).data("item") === existing; });
            self.options.onTagExists(item, $existingTag);
          }
          return;
        }

        // if length greater than limit
        if (self.items().toString().length + item.length + 1 > self.options.maxInputLength)
          return;

        // raise beforeItemAdd arg
        var beforeItemAddEvent = $.Event('beforeItemAdd', { item: item, cancel: false, options: options});
        self.$element.trigger(beforeItemAddEvent);
        if (beforeItemAddEvent.cancel)
          return;

        // register item in internal array and map
        self.itemsArray.push(item);

        // add a tag element

        var $tag = $('' + htmlEncode(itemText) + '');
        $tag.data('item', item);
        self.findInputWrapper().before($tag);

        // Check to see if the tag exists in its raw or uri-encoded form
        var optionExists = (
          $('option[value="' + encodeURIComponent(itemValue).replace(/"/g, '\\"') + '"]', self.$element).length ||
          $('option[value="' + htmlEncode(itemValue).replace(/"/g, '\\"') + '"]', self.$element).length
        );

        // add  if item represents a value not present in one of the 's options
        if (self.isSelect && !optionExists) {
          var $option = $('' + htmlEncode(itemText) + '');
          $option.data('item', item);
          $option.attr('value', itemValue);
          self.$element.append($option);
        }

        if (!dontPushVal)
          self.pushVal(self.options.triggerChange);

        // Add class when reached maxTags
        if (self.options.maxTags === self.itemsArray.length || self.items().toString().length === self.options.maxInputLength)
          self.$container.addClass('bootstrap-tagsinput-max');

        // If using typeahead, once the tag has been added, clear the typeahead value so it does not stick around in the input.
        if ($('.typeahead, .twitter-typeahead', self.$container).length) {
          self.$input.typeahead('val', '');
        }

        if (this.isInit) {
          self.$element.trigger($.Event('itemAddedOnInit', { item: item, options: options }));
        } else {
          self.$element.trigger($.Event('itemAdded', { item: item, options: options }));
        }
      },

      /**
       * Removes the given item. Pass true to dontPushVal to prevent updating the
       * elements val()
       */
      remove: function(item, dontPushVal, options) {
        var self = this;

        if (self.objectItems) {
          if (typeof item === "object")
            item = $.grep(self.itemsArray, function(other) { return self.options.itemValue(other) ==  self.options.itemValue(item); } );
          else
            item = $.grep(self.itemsArray, function(other) { return self.options.itemValue(other) ==  item; } );

          item = item[item.length-1];
        }

        if (item) {
          var beforeItemRemoveEvent = $.Event('beforeItemRemove', { item: item, cancel: false, options: options });
          self.$element.trigger(beforeItemRemoveEvent);
          if (beforeItemRemoveEvent.cancel)
            return;

          $('.badge', self.$container).filter(function() { return $(this).data('item') === item; }).remove();
          $('option', self.$element).filter(function() { return $(this).data('item') === item; }).remove();
          if($.inArray(item, self.itemsArray) !== -1)
            self.itemsArray.splice($.inArray(item, self.itemsArray), 1);
        }

        if (!dontPushVal)
          self.pushVal(self.options.triggerChange);

        // Remove class when reached maxTags
        if (self.options.maxTags > self.itemsArray.length)
          self.$container.removeClass('bootstrap-tagsinput-max');

        self.$element.trigger($.Event('itemRemoved',  { item: item, options: options }));
      },

      /**
       * Removes all items
       */
      removeAll: function() {
        var self = this;

        $('.badge', self.$container).remove();
        $('option', self.$element).remove();

        while(self.itemsArray.length > 0)
          self.itemsArray.pop();

        self.pushVal(self.options.triggerChange);
      },

      /**
       * Refreshes the tags so they match the text/value of their corresponding
       * item.
       */
      refresh: function() {
        var self = this;
        $('.badge', self.$container).each(function() {
          var $tag = $(this),
              item = $tag.data('item'),
              itemValue = self.options.itemValue(item),
              itemText = self.options.itemText(item),
              tagClass = self.options.tagClass(item);

            // Update tag's class and inner text
            $tag.attr('class', null);
            $tag.addClass('badge ' + htmlEncode(tagClass));
            $tag.contents().filter(function() {
              return this.nodeType == 3;
            })[0].nodeValue = htmlEncode(itemText);

            if (self.isSelect) {
              var option = $('option', self.$element).filter(function() { return $(this).data('item') === item; });
              option.attr('value', itemValue);
            }
        });
      },

      /**
       * Returns the items added as tags
       */
      items: function() {
        return this.itemsArray;
      },

      /**
       * Assembly value by retrieving the value of each item, and set it on the
       * element.
       */
      pushVal: function() {
        var self = this,
            val = $.map(self.items(), function(item) {
              return self.options.itemValue(item).toString();
            });

        self.$element.val( val.join(self.options.delimiter) );

        if (self.options.triggerChange)
          self.$element.trigger('change');
      },

      /**
       * Initializes the tags input behaviour on the element
       */
      build: function(options) {
        var self = this;

        self.options = $.extend({}, defaultOptions, options);
        // When itemValue is set, freeInput should always be false
        if (self.objectItems)
          self.options.freeInput = false;

        makeOptionItemFunction(self.options, 'itemValue');
        makeOptionItemFunction(self.options, 'itemText');
        makeOptionFunction(self.options, 'tagClass');

        // Typeahead Bootstrap version 2.3.2
        if (self.options.typeahead) {
          var typeahead = self.options.typeahead || {};

          makeOptionFunction(typeahead, 'source');

          self.$input.typeahead($.extend({}, typeahead, {
            source: function (query, process) {
              function processItems(items) {
                var texts = [];

                for (var i = 0; i < items.length; i++) {
                  var text = self.options.itemText(items[i]);
                  map[text] = items[i];
                  texts.push(text);
                }
                process(texts);
              }

              this.map = {};
              var map = this.map,
                  data = typeahead.source(query);

              if ($.isFunction(data.success)) {
                // support for Angular callbacks
                data.success(processItems);
              } else if ($.isFunction(data.then)) {
                // support for Angular promises
                data.then(processItems);
              } else {
                // support for functions and jquery promises
                $.when(data)
                 .then(processItems);
              }
            },
            updater: function (text) {
              self.add(this.map[text]);
              return this.map[text];
            },
            matcher: function (text) {
              return (text.toLowerCase().indexOf(this.query.trim().toLowerCase()) !== -1);
            },
            sorter: function (texts) {
              return texts.sort();
            },
            highlighter: function (text) {
              var regex = new RegExp( '(' + this.query + ')', 'gi' );
              return text.replace( regex, "$1" );
            }
          }));
        }

        // typeahead.js
        if (self.options.typeaheadjs) {
          // Determine if main configurations were passed or simply a dataset
          var typeaheadjs = self.options.typeaheadjs;
          if (!$.isArray(typeaheadjs)) {
              typeaheadjs = [null, typeaheadjs];
          }

          $.fn.typeahead.apply(self.$input, typeaheadjs).on('typeahead:selected', $.proxy(function (obj, datum, name) {
            var index = 0;
            typeaheadjs.some(function(dataset, _index) {
              if (dataset.name === name) {
                index = _index;
                return true;
              }
              return false;
            });

            // @TODO Dep: https://github.com/corejavascript/typeahead.js/issues/89
            if (typeaheadjs[index].valueKey) {
              self.add(datum[typeaheadjs[index].valueKey]);
            } else {
              self.add(datum);
            }

            self.$input.typeahead('val', '');
          }, self));
        }

        self.$container.on('click', $.proxy(function(event) {
          if (! self.$element.attr('disabled')) {
            self.$input.removeAttr('disabled');
          }
          self.$input.focus();
        }, self));

          if (self.options.addOnBlur && self.options.freeInput) {
            self.$input.on('focusout', $.proxy(function(event) {
                // HACK: only process on focusout when no typeahead opened, to
                //       avoid adding the typeahead text as tag
                if ($('.typeahead, .twitter-typeahead', self.$container).length === 0) {
                  self.add(self.$input.val());
                  self.$input.val('');
                }
            }, self));
          }

        // Toggle the 'focus' css class on the container when it has focus
        self.$container.on({
          focusin: function() {
            self.$container.addClass(self.options.focusClass);
          },
          focusout: function() {
            self.$container.removeClass(self.options.focusClass);
          },
        });

        self.$container.on('keydown', 'input', $.proxy(function(event) {
          var $input = $(event.target),
              $inputWrapper = self.findInputWrapper();

          if (self.$element.attr('disabled')) {
            self.$input.attr('disabled', 'disabled');
            return;
          }

          switch (event.which) {
            // BACKSPACE
            case 8:
              if (doGetCaretPosition($input[0]) === 0) {
                var prev = $inputWrapper.prev();
                if (prev.length) {
                  if (self.options.editOnBackspace === true) {
                    $input.val(prev.data('item'));
                  }
                  self.remove(prev.data('item'));
                }
              }
              break;

            // DELETE
            case 46:
              if (doGetCaretPosition($input[0]) === 0) {
                var next = $inputWrapper.next();
                if (next.length) {
                  self.remove(next.data('item'));
                }
              }
              break;

            // LEFT ARROW
            case 37:
              // Try to move the input before the previous tag
              var $prevTag = $inputWrapper.prev();
              if ($input.val().length === 0 && $prevTag[0]) {
                $prevTag.before($inputWrapper);
                $input.focus();
              }
              break;
            // RIGHT ARROW
            case 39:
              // Try to move the input after the next tag
              var $nextTag = $inputWrapper.next();
              if ($input.val().length === 0 && $nextTag[0]) {
                $nextTag.after($inputWrapper);
                $input.focus();
              }
              break;
           default:
               // ignore
           }

          // Reset internal input's size
          var textLength = $input.val().length,
              wordSpace = Math.ceil(textLength / 5),
              size = textLength + wordSpace + 1;
          $input.attr('size', Math.max(this.inputSize, size));
        }, self));

        self.$container.on('keypress', 'input', $.proxy(function(event) {
           var $input = $(event.target);

           if (self.$element.attr('disabled')) {
              self.$input.attr('disabled', 'disabled');
              return;
           }

           var text = $input.val(),
           maxLengthReached = self.options.maxChars && text.length >= self.options.maxChars;
           if (self.options.freeInput && (keyCombinationInList(event, self.options.confirmKeys) || maxLengthReached)) {
              // Only attempt to add a tag if there is data in the field
              if (text.length !== 0) {
                 self.add(maxLengthReached ? text.substr(0, self.options.maxChars) : text);
                 $input.val('');
              }

              // If the field is empty, let the event triggered fire as usual
              if (self.options.cancelConfirmKeysOnEmpty === false) {
                  event.preventDefault();
              }
           }

           // Reset internal input's size
           var textLength = $input.val().length,
              wordSpace = Math.ceil(textLength / 5),
              size = textLength + wordSpace + 1;
           $input.attr('size', Math.max(this.inputSize, size));
        }, self));

        // Remove icon clicked
        self.$container.on('click', '[data-role=remove]', $.proxy(function(event) {
          if (self.$element.attr('disabled')) {
            return;
          }
          self.remove($(event.target).closest('.badge').data('item'));
        }, self));

        // Only add existing value as tags when using strings as tags
        if (self.options.itemValue === defaultOptions.itemValue) {
          if (self.$element[0].tagName === 'INPUT') {
              self.add(self.$element.val());
          } else {
            $('option', self.$element).each(function() {
              self.add($(this).attr('value'), true);
            });
          }
        }
      },

      /**
       * Removes all tagsinput behaviour and unregsiter all event handlers
       */
      destroy: function() {
        var self = this;

        // Unbind events
        self.$container.off('keypress', 'input');
        self.$container.off('click', '[role=remove]');

        self.$container.remove();
        self.$element.removeData('tagsinput');
        self.$element.show();
      },

      /**
       * Sets focus on the tagsinput
       */
      focus: function() {
        this.$input.focus();
      },

      /**
       * Returns the internal input element
       */
      input: function() {
        return this.$input;
      },

      /**
       * Returns the element which is wrapped around the internal input. This
       * is normally the $container, but typeahead.js moves the $input element.
       */
      findInputWrapper: function() {
        var elt = this.$input[0],
            container = this.$container[0];
        while(elt && elt.parentNode !== container)
          elt = elt.parentNode;

        return $(elt);
      }
    };

    /**
     * Register JQuery plugin
     */
    $.fn.tagsinput = function(arg1, arg2, arg3) {
      var results = [];

      this.each(function() {
        var tagsinput = $(this).data('tagsinput');
        // Initialize a new tags input
        if (!tagsinput) {
            tagsinput = new TagsInput(this, arg1);
            $(this).data('tagsinput', tagsinput);
            results.push(tagsinput);

            if (this.tagName === 'SELECT') {
                $('option', $(this)).attr('selected', 'selected');
            }

            // Init tags from $(this).val()
            $(this).val($(this).val());
        } else if (!arg1 && !arg2) {
            // tagsinput already exists
            // no function, trying to init
            results.push(tagsinput);
        } else if(tagsinput[arg1] !== undefined) {
            // Invoke function on existing tags input
              if(tagsinput[arg1].length === 3 && arg3 !== undefined){
                 var retVal = tagsinput[arg1](arg2, null, arg3);
              }else{
                 var retVal = tagsinput[arg1](arg2);
              }
            if (retVal !== undefined)
                results.push(retVal);
        }
      });

      if ( typeof arg1 == 'string') {
        // Return the results from the invoked function calls
        return results.length > 1 ? results : results[0];
      } else {
        return results;
      }
    };

    $.fn.tagsinput.Constructor = TagsInput;

    /**
     * Most options support both a string or number as well as a function as
     * option value. This function makes sure that the option with the given
     * key in the given options is wrapped in a function
     */
    function makeOptionItemFunction(options, key) {
      if (typeof options[key] !== 'function') {
        var propertyName = options[key];
        options[key] = function(item) { return item[propertyName]; };
      }
    }
    function makeOptionFunction(options, key) {
      if (typeof options[key] !== 'function') {
        var value = options[key];
        options[key] = function() { return value; };
      }
    }
    /**
     * HtmlEncodes the given value
     */
    var htmlEncodeContainer = $('

');
    function htmlEncode(value) {
      if (value) {
        return htmlEncodeContainer.text(value).html();
      } else {
        return '';
      }
    }

    /**
     * Returns the position of the caret in the given input field
     * http://flightschool.acylt.com/devnotes/caret-position-woes/
     */
    function doGetCaretPosition(oField) {
      var iCaretPos = 0;
      if (document.selection) {
        oField.focus ();
        var oSel = document.selection.createRange();
        oSel.moveStart ('character', -oField.value.length);
        iCaretPos = oSel.text.length;
      } else if (oField.selectionStart || oField.selectionStart == '0') {
        iCaretPos = oField.selectionStart;
      }
      return (iCaretPos);
    }

    /**
      * Returns boolean indicates whether user has pressed an expected key combination.
      * @param object keyPressEvent: JavaScript event object, refer
      *     http://www.w3.org/TR/2003/WD-DOM-Level-3-Events-20030331/ecma-script-binding.html
      * @param object lookupList: expected key combinations, as in:
      *     [13, {which: 188, shiftKey: true}]
      */
    function keyCombinationInList(keyPressEvent, lookupList) {
        var found = false;
        $.each(lookupList, function (index, keyCombination) {
            if (typeof (keyCombination) === 'number' && keyPressEvent.which === keyCombination) {
                found = true;
                return false;
            }

            if (keyPressEvent.which === keyCombination.which) {
                var alt = !keyCombination.hasOwnProperty('altKey') || keyPressEvent.altKey === keyCombination.altKey,
                    shift = !keyCombination.hasOwnProperty('shiftKey') || keyPressEvent.shiftKey === keyCombination.shiftKey,
                    ctrl = !keyCombination.hasOwnProperty('ctrlKey') || keyPressEvent.ctrlKey === keyCombination.ctrlKey;
                if (alt && shift && ctrl) {
                    found = true;
                    return false;
                }
            }
        });

        return found;
    }

    /**
     * Initialize tagsinput behaviour on inputs and selects which have
     * data-role=tagsinput
     */
    $(function() {
      $("input[data-role=tagsinput], select[multiple][data-role=tagsinput]").tagsinput();
    });
  })(window.jQuery);

/*!
* jQuery UI Touch Punch 0.2.3
*
* Copyright 2011–2014, Dave Furfero
* Dual licensed under the MIT or GPL Version 2 licenses.
*
* Depends:
* jquery.ui.widget.js
* jquery.ui.mouse.js
*/
!function(a){function f(a,b){if(!(a.originalEvent.touches.length>1)){a.preventDefault();var c=a.originalEvent.changedTouches[0],d=document.createEvent("MouseEvents");d.initMouseEvent(b,!0,!0,window,1,c.screenX,c.screenY,c.clientX,c.clientY,!1,!1,!1,!1,0,null),a.target.dispatchEvent(d)}}if(a.support.touch="ontouchend"in document,a.support.touch){var e,b=a.ui.mouse.prototype,c=b._mouseInit,d=b._mouseDestroy;b._touchStart=function(a){var b=this;!e&&b._mouseCapture(a.originalEvent.changedTouches[0])&&(e=!0,b._touchMoved=!1,f(a,"mouseover"),f(a,"mousemove"),f(a,"mousedown"))},b._touchMove=function(a){e&&(this._touchMoved=!0,f(a,"mousemove"))},b._touchEnd=function(a){e&&(f(a,"mouseup"),f(a,"mouseout"),this._touchMoved||f(a,"click"),e=!1)},b._mouseInit=function(){var b=this;b.element.bind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),c.call(b)},b._mouseDestroy=function(){var b=this;b.element.unbind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),d.call(b)}}}(jQuery);

/*!
* Flickity PACKAGED v2.3.0
* Touch, responsive, flickable carousels
*
* Licensed GPLv3 for open source use
* or Flickity Commercial License for commercial use
*
* https://flickity.metafizzy.co
* Copyright 2015-2021 Metafizzy
*/
(function(e,i){if(typeof define=="function"&&define.amd){define("jquery-bridget/jquery-bridget",["jquery"],function(t){return i(e,t)})}else if(typeof module=="object"&&module.exports){module.exports=i(e,require("jquery"))}else{e.jQueryBridget=i(e,e.jQuery)}})(window,function t(e,r){"use strict";var o=Array.prototype.slice;var i=e.console;var u=typeof i=="undefined"?function(){}:function(t){i.error(t)};function n(h,s,c){c=c||r||e.jQuery;if(!c){return}if(!s.prototype.option){s.prototype.option=function(t){if(!c.isPlainObject(t)){return}this.options=c.extend(true,this.options,t)}}c.fn[h]=function(t){if(typeof t=="string"){var e=o.call(arguments,1);return i(this,t,e)}n(this,t);return this};function i(t,r,o){var a;var l="$()."+h+'("'+r+'")';t.each(function(t,e){var i=c.data(e,h);if(!i){u(h+" not initialized. Cannot call methods, i.e. "+l);return}var n=i[r];if(!n||r.charAt(0)=="_"){u(l+" is not a valid method");return}var s=n.apply(i,o);a=a===undefined?s:a});return a!==undefined?a:t}function n(t,n){t.each(function(t,e){var i=c.data(e,h);if(i){i.option(n);i._init()}else{i=new s(e,n);c.data(e,h,i)}})}a(c)}function a(t){if(!t||t&&t.bridget){return}t.bridget=n}a(r||e.jQuery);return n});(function(t,e){if(typeof define=="function"&&define.amd){define("ev-emitter/ev-emitter",e)}else if(typeof module=="object"&&module.exports){module.exports=e()}else{t.EvEmitter=e()}})(typeof window!="undefined"?window:this,function(){function t(){}var e=t.prototype;e.on=function(t,e){if(!t||!e){return}var i=this._events=this._events||{};var n=i[t]=i[t]||[];if(n.indexOf(e)==-1){n.push(e)}return this};e.once=function(t,e){if(!t||!e){return}this.on(t,e);var i=this._onceEvents=this._onceEvents||{};var n=i[t]=i[t]||{};n[e]=true;return this};e.off=function(t,e){var i=this._events&&this._events[t];if(!i||!i.length){return}var n=i.indexOf(e);if(n!=-1){i.splice(n,1)}return this};e.emitEvent=function(t,e){var i=this._events&&this._events[t];if(!i||!i.length){return}i=i.slice(0);e=e||[];var n=this._onceEvents&&this._onceEvents[t];for(var s=0;s1){t=i.modulo(t,this.slideableWidth);t-=this.slideableWidth;this.shiftWrapCells(t)}this.setTranslateX(t,this.isAnimating);this.dispatchScrollEvent()};n.setTranslateX=function(t,e){t+=this.cursorPosition;t=this.options.rightToLeft?-t:t;var i=this.getPositionValue(t);this.slider.style.transform=e?"translate3d("+i+",0,0)":"translateX("+i+")"};n.dispatchScrollEvent=function(){var t=this.slides[0];if(!t){return}var e=-this.x-t.target;var i=e/this.slidesWidth;this.dispatchEvent("scroll",null,[i,e])};n.positionSliderAtSelected=function(){if(!this.cells.length){return}this.x=-this.selectedSlide.target;this.velocity=0;this.positionSlider()};n.getPositionValue=function(t){if(this.options.percentPosition){return Math.round(t/this.size.innerWidth*1e4)*.01+"%"}else{return Math.round(t)+"px"}};n.settle=function(t){var e=!this.isPointerDown&&Math.round(this.x*100)==Math.round(t*100);if(e){this.restingFrames++}if(this.restingFrames>2){this.isAnimating=false;delete this.isFreeScrolling;this.positionSlider();this.dispatchEvent("settle",null,[this.selectedIndex])}};n.shiftWrapCells=function(t){var e=this.cursorPosition+t;this._shiftCells(this.beforeShiftCells,e,-1);var i=this.size.innerWidth-(t+this.slideableWidth+this.cursorPosition);this._shiftCells(this.afterShiftCells,i,1)};n._shiftCells=function(t,e,i){for(var n=0;n0?i:0;s.wrapShift(r);e-=s.size.outerWidth}};n._unshiftCells=function(t){if(!t||!t.length){return}for(var e=0;e0){var i=this.cells[t-1];e=i.x+i.size.outerWidth}var n=this.cells.length;for(var s=t;s0){var s=this.cells[e];if(!s){break}n.push(s);e+=i;t-=s.size.outerWidth}return n};v._containSlides=function(){if(!this.options.contain||this.options.wrapAround||!this.cells.length){return}var t=this.options.rightToLeft;var e=t?"marginRight":"marginLeft";var i=t?"marginLeft":"marginRight";var n=this.slideableWidth-this.getLastCell().size[i];var s=n1;if(!i){return t}var n=a.modulo(t,e);var s=Math.abs(n-this.selectedIndex);var r=Math.abs(n+e-this.selectedIndex);var o=Math.abs(n-e-this.selectedIndex);if(!this.isDragSelect&&r=e){this.x+=this.slideableWidth}};v.previous=function(t,e){this.select(this.selectedIndex-1,t,e)};v.next=function(t,e){this.select(this.selectedIndex+1,t,e)};v.updateSelectedSlide=function(){var t=this.slides[this.selectedIndex];if(!t){return}this.unselectSelectedSlide();this.selectedSlide=t;t.select();this.selectedCells=t.cells;this.selectedElements=t.getCellElements();this.selectedCell=t.cells[0];this.selectedElement=this.selectedElements[0]};v.unselectSelectedSlide=function(){if(this.selectedSlide){this.selectedSlide.unselect()}};v.selectInitialIndex=function(){var t=this.options.initialIndex;if(this.isInitActivated){this.select(this.selectedIndex,false,true);return}if(t&&typeof t=="string"){var e=this.queryCell(t);if(e){this.selectCell(t,false,true);return}}var i=0;if(t&&this.slides[t]){i=t}this.select(i,false,true)};v.selectCell=function(t,e,i){var n=this.queryCell(t);if(!n){return}var s=this.getCellSlideIndex(n);this.select(s,e,i)};v.getCellSlideIndex=function(t){for(var e=0;e *");return this.getCell(t)};v.getAdjacentCellElements=function(t,e){if(!t){return this.selectedSlide.getCellElements()}e=e===undefined?this.selectedIndex:e;var i=this.slides.length;if(1+t*2>=i){return this.getCellElements()}var n=[];for(var s=e-t;s<=e+t;s++){var r=this.options.wrapAround?a.modulo(s,i):s;var o=this.slides[r];if(o){n=n.concat(o.getCellElements())}}return n};v.queryCell=function(t){if(typeof t=="number"){return this.cells[t]}if(typeof t=="string"){if(t.match(/^[#.]?[\d/]/)){return}t=this.element.querySelector(t)}return this.getCell(t)};v.uiChange=function(){this.emitEvent("uiChange")};v.childUIPointerDown=function(t){if(t.type!="touchstart"){t.preventDefault()}this.focus()};v.onresize=function(){this.watchCSS();this.resize()};a.debounceMethod(p,"onresize",150);v.resize=function(){if(!this.isActive||this.isAnimating||this.isDragging){return}this.getSize();if(this.options.wrapAround){this.x=a.modulo(this.x,this.slideableWidth)}this.positionCells();this._getWrapShiftCells();this.setGallerySize();this.emitEvent("resize");var t=this.selectedElements&&this.selectedElements[0];this.selectCell(t,false,true)};v.watchCSS=function(){var t=this.options.watchCSS;if(!t){return}var e=h(this.element,":after").content;if(e.indexOf("flickity")!=-1){this.activate()}else{this.deactivate()}};v.onkeydown=function(t){var e=document.activeElement&&document.activeElement!=this.element;if(!this.options.accessibility||e){return}var i=p.keyboardHandlers[t.keyCode];if(i){i.call(this)}};p.keyboardHandlers={37:function(){var t=this.options.rightToLeft?"next":"previous";this.uiChange();this[t]()},39:function(){var t=this.options.rightToLeft?"previous":"next";this.uiChange();this[t]()}};v.focus=function(){var t=n.pageYOffset;this.element.focus({preventScroll:true});if(n.pageYOffset!=t){n.scrollTo(n.pageXOffset,t)}};v.deactivate=function(){if(!this.isActive){return}this.element.classList.remove("flickity-enabled");this.element.classList.remove("flickity-rtl");this.unselectSelectedSlide();this.cells.forEach(function(t){t.destroy()});this.element.removeChild(this.viewport);u(this.slider.children,this.element);if(this.options.accessibility){this.element.removeAttribute("tabIndex");this.element.removeEventListener("keydown",this)}this.isActive=false;this.emitEvent("deactivate")};v.destroy=function(){this.deactivate();n.removeEventListener("resize",this);this.allOff();this.emitEvent("destroy");if(l&&this.$element){l.removeData(this.element,"flickity")}delete this.element.flickityGUID;delete f[this.guid]};a.extend(v,r);p.data=function(t){t=a.getQueryElement(t);var e=t&&t.flickityGUID;return e&&f[e]};a.htmlInit(p,"flickity");if(l&&l.bridget){l.bridget("flickity",p)}p.setJQuery=function(t){l=t};p.Cell=s;p.Slide=o;return p});
/*!
* Unipointer v2.4.0
* base class for doing one thing with pointer event
* MIT license
*/
(function(e,i){if(typeof define=="function"&&define.amd){define("unipointer/unipointer",["ev-emitter/ev-emitter"],function(t){return i(e,t)})}else if(typeof module=="object"&&module.exports){module.exports=i(e,require("ev-emitter"))}else{e.Unipointer=i(e,e.EvEmitter)}})(window,function t(s,e){function i(){}function n(){}var r=n.prototype=Object.create(e.prototype);r.bindStartEvent=function(t){this._bindStartEvent(t,true)};r.unbindStartEvent=function(t){this._bindStartEvent(t,false)};r._bindStartEvent=function(t,e){e=e===undefined?true:e;var i=e?"addEventListener":"removeEventListener";var n="mousedown";if("ontouchstart"in s){n="touchstart"}else if(s.PointerEvent){n="pointerdown"}t[i](n,this)};r.handleEvent=function(t){var e="on"+t.type;if(this[e]){this[e](t)}};r.getTouch=function(t){for(var e=0;e3||Math.abs(t.y)>3};n.pointerUp=function(t,e){this.emitEvent("pointerUp",[t,e]);this._dragPointerUp(t,e)};n._dragPointerUp=function(t,e){if(this.isDragging){this._dragEnd(t,e)}else{this._staticClick(t,e)}};n._dragStart=function(t,e){this.isDragging=true;this.isPreventingClicks=true;this.dragStart(t,e)};n.dragStart=function(t,e){this.emitEvent("dragStart",[t,e])};n._dragMove=function(t,e,i){if(!this.isDragging){return}this.dragMove(t,e,i)};n.dragMove=function(t,e,i){t.preventDefault();this.emitEvent("dragMove",[t,e,i])};n._dragEnd=function(t,e){this.isDragging=false;setTimeout(function(){delete this.isPreventingClicks}.bind(this));this.dragEnd(t,e)};n.dragEnd=function(t,e){this.emitEvent("dragEnd",[t,e])};n.onclick=function(t){if(this.isPreventingClicks){t.preventDefault()}};n._staticClick=function(t,e){if(this.isIgnoringMouseUp&&t.type=="mouseup"){return}this.staticClick(t,e);if(t.type!="mouseup"){this.isIgnoringMouseUp=true;setTimeout(function(){delete this.isIgnoringMouseUp}.bind(this),400)}};n.staticClick=function(t,e){this.emitEvent("staticClick",[t,e])};i.getPointerPoint=e.getPointerPoint;return i});(function(n,s){if(typeof define=="function"&&define.amd){define("flickity/js/drag",["./flickity","unidragger/unidragger","fizzy-ui-utils/utils"],function(t,e,i){return s(n,t,e,i)})}else if(typeof module=="object"&&module.exports){module.exports=s(n,require("./flickity"),require("unidragger"),require("fizzy-ui-utils"))}else{n.Flickity=s(n,n.Flickity,n.Unidragger,n.fizzyUIUtils)}})(window,function t(n,e,i,a){a.extend(e.defaults,{draggable:">1",dragThreshold:3});e.createMethods.push("_createDrag");var s=e.prototype;a.extend(s,i.prototype);s._touchActionValue="pan-y";s._createDrag=function(){this.on("activate",this.onActivateDrag);this.on("uiChange",this._uiChangeDrag);this.on("deactivate",this.onDeactivateDrag);this.on("cellChange",this.updateDraggable)};s.onActivateDrag=function(){this.handles=[this.viewport];this.bindHandles();this.updateDraggable()};s.onDeactivateDrag=function(){this.unbindHandles();this.element.classList.remove("is-draggable")};s.updateDraggable=function(){if(this.options.draggable==">1"){this.isDraggable=this.slides.length>1}else{this.isDraggable=this.options.draggable}if(this.isDraggable){this.element.classList.add("is-draggable")}else{this.element.classList.remove("is-draggable")}};s.bindDrag=function(){this.options.draggable=true;this.updateDraggable()};s.unbindDrag=function(){this.options.draggable=false;this.updateDraggable()};s._uiChangeDrag=function(){delete this.isFreeScrolling};s.pointerDown=function(t,e){if(!this.isDraggable){this._pointerDownDefault(t,e);return}var i=this.okayPointerDown(t);if(!i){return}this._pointerDownPreventDefault(t);this.pointerDownFocus(t);if(document.activeElement!=this.element){this.pointerDownBlur()}this.dragX=this.x;this.viewport.classList.add("is-pointer-down");this.pointerDownScroll=o();n.addEventListener("scroll",this);this._pointerDownDefault(t,e)};s._pointerDownDefault=function(t,e){this.pointerDownPointer={pageX:e.pageX,pageY:e.pageY};this._bindPostStartEvents(t);this.dispatchEvent("pointerDown",t,[e])};var r={INPUT:true,TEXTAREA:true,SELECT:true};s.pointerDownFocus=function(t){var e=r[t.target.nodeName];if(!e){this.focus()}};s._pointerDownPreventDefault=function(t){var e=t.type=="touchstart";var i=t.pointerType=="touch";var n=r[t.target.nodeName];if(!e&&!i&&!n){t.preventDefault()}};s.hasDragStarted=function(t){return Math.abs(t.x)>this.options.dragThreshold};s.pointerUp=function(t,e){delete this.isTouchScrolling;this.viewport.classList.remove("is-pointer-down");this.dispatchEvent("pointerUp",t,[e]);this._dragPointerUp(t,e)};s.pointerDone=function(){n.removeEventListener("scroll",this);delete this.pointerDownScroll};s.dragStart=function(t,e){if(!this.isDraggable){return}this.dragStartPosition=this.x;this.startAnimation();n.removeEventListener("scroll",this);this.dispatchEvent("dragStart",t,[e])};s.pointerMove=function(t,e){var i=this._dragPointerMove(t,e);this.dispatchEvent("pointerMove",t,[e,i]);this._dragMove(t,e,i)};s.dragMove=function(t,e,i){if(!this.isDraggable){return}t.preventDefault();this.previousDragX=this.dragX;var n=this.options.rightToLeft?-1:1;if(this.options.wrapAround){i.x%=this.slideableWidth}var s=this.dragStartPosition+i.x*n;if(!this.options.wrapAround&&this.slides.length){var r=Math.max(-this.slides[0].target,this.dragStartPosition);s=s>r?(s+r)*.5:s;var o=Math.min(-this.getLastSlide().target,this.dragStartPosition);s=sthis.slides[0].target&&-n1;var s=n?a.modulo(e,i):e;var r=this.slides[s];if(!r){return null}var o=n?this.slideableWidth*Math.floor(e/i):0;return t-(r.target+o)};s.dragEndBoostSelect=function(){if(this.previousDragX===undefined||!this.dragMoveTime||new Date-this.dragMoveTime>100){return 0}var t=this.getSlideDistance(-this.dragX,this.selectedIndex);var e=this.previousDragX-this.dragX;if(t>0&&e>0){return 1}else if(t<0&&e<0){return-1}return 0};s.staticClick=function(t,e){var i=this.getParentCell(t.target);var n=i&&i.element;var s=i&&this.cells.indexOf(i);this.dispatchEvent("staticClick",t,[e,n,s])};s.onscroll=function(){var t=o();var e=this.pointerDownScroll.x-t.x;var i=this.pointerDownScroll.y-t.y;if(Math.abs(e)>3||Math.abs(i)>3){this._pointerDone()}};function o(){return{x:n.pageXOffset,y:n.pageYOffset}}return e});(function(n,s){if(typeof define=="function"&&define.amd){define("flickity/js/prev-next-button",["./flickity","unipointer/unipointer","fizzy-ui-utils/utils"],function(t,e,i){return s(n,t,e,i)})}else if(typeof module=="object"&&module.exports){module.exports=s(n,require("./flickity"),require("unipointer"),require("fizzy-ui-utils"))}else{s(n,n.Flickity,n.Unipointer,n.fizzyUIUtils)}})(window,function t(e,i,n,s){"use strict";var r="http://www.w3.org/2000/svg";function o(t,e){this.direction=t;this.parent=e;this._create()}o.prototype=Object.create(n.prototype);o.prototype._create=function(){this.isEnabled=true;this.isPrevious=this.direction==-1;var t=this.parent.options.rightToLeft?1:-1;this.isLeft=this.direction==t;var e=this.element=document.createElement("button");e.className="flickity-button flickity-prev-next-button";e.className+=this.isPrevious?" previous":" next";e.setAttribute("type","button");this.disable();e.setAttribute("aria-label",this.isPrevious?"Previous":"Next");var i=this.createSVG();e.appendChild(i);this.parent.on("select",this.update.bind(this));this.on("pointerDown",this.parent.childUIPointerDown.bind(this.parent))};o.prototype.activate=function(){this.bindStartEvent(this.element);this.element.addEventListener("click",this);this.parent.element.appendChild(this.element)};o.prototype.deactivate=function(){this.parent.element.removeChild(this.element);this.unbindStartEvent(this.element);this.element.removeEventListener("click",this)};o.prototype.createSVG=function(){var t=document.createElementNS(r,"svg");t.setAttribute("class","flickity-button-icon");t.setAttribute("viewBox","0 0 100 100");var e=document.createElementNS(r,"path");var i=a(this.parent.options.arrowShape);e.setAttribute("d",i);e.setAttribute("class","arrow");if(!this.isLeft){e.setAttribute("transform","translate(100, 100) rotate(180) ")}t.appendChild(e);return t};function a(t){if(typeof t=="string"){return t}return"M "+t.x0+",50"+" L "+t.x1+","+(t.y1+50)+" L "+t.x2+","+(t.y2+50)+" L "+t.x3+",50 "+" L "+t.x2+","+(50-t.y2)+" L "+t.x1+","+(50-t.y1)+" Z"}o.prototype.handleEvent=s.handleEvent;o.prototype.onclick=function(){if(!this.isEnabled){return}this.parent.uiChange();var t=this.isPrevious?"previous":"next";this.parent[t]()};o.prototype.enable=function(){if(this.isEnabled){return}this.element.disabled=false;this.isEnabled=true};o.prototype.disable=function(){if(!this.isEnabled){return}this.element.disabled=true;this.isEnabled=false};o.prototype.update=function(){var t=this.parent.slides;if(this.parent.options.wrapAround&&t.length>1){this.enable();return}var e=t.length?t.length-1:0;var i=this.isPrevious?0:e;var n=this.parent.selectedIndex==i?"disable":"enable";this[n]()};o.prototype.destroy=function(){this.deactivate();this.allOff()};s.extend(i.defaults,{prevNextButtons:true,arrowShape:{x0:10,x1:60,y1:50,x2:70,y2:40,x3:30}});i.createMethods.push("_createPrevNextButtons");var l=i.prototype;l._createPrevNextButtons=function(){if(!this.options.prevNextButtons){return}this.prevButton=new o(-1,this);this.nextButton=new o(1,this);this.on("activate",this.activatePrevNextButtons)};l.activatePrevNextButtons=function(){this.prevButton.activate();this.nextButton.activate();this.on("deactivate",this.deactivatePrevNextButtons)};l.deactivatePrevNextButtons=function(){this.prevButton.deactivate();this.nextButton.deactivate();this.off("deactivate",this.deactivatePrevNextButtons)};i.PrevNextButton=o;return i});(function(n,s){if(typeof define=="function"&&define.amd){define("flickity/js/page-dots",["./flickity","unipointer/unipointer","fizzy-ui-utils/utils"],function(t,e,i){return s(n,t,e,i)})}else if(typeof module=="object"&&module.exports){module.exports=s(n,require("./flickity"),require("unipointer"),require("fizzy-ui-utils"))}else{s(n,n.Flickity,n.Unipointer,n.fizzyUIUtils)}})(window,function t(e,i,n,s){function r(t){this.parent=t;this._create()}r.prototype=Object.create(n.prototype);r.prototype._create=function(){this.holder=document.createElement("ol");this.holder.className="flickity-page-dots";this.dots=[];this.handleClick=this.onClick.bind(this);this.on("pointerDown",this.parent.childUIPointerDown.bind(this.parent))};r.prototype.activate=function(){this.setDots();this.holder.addEventListener("click",this.handleClick);this.bindStartEvent(this.holder);this.parent.element.appendChild(this.holder)};r.prototype.deactivate=function(){this.holder.removeEventListener("click",this.handleClick);this.unbindStartEvent(this.holder);this.parent.element.removeChild(this.holder)};r.prototype.setDots=function(){var t=this.parent.slides.length-this.dots.length;if(t>0){this.addDots(t)}else if(t<0){this.removeDots(-t)}};r.prototype.addDots=function(t){var e=document.createDocumentFragment();var i=[];var n=this.dots.length;var s=n+t;for(var r=n;r=this.cells.length){return}var o=this.cells.slice(n,s+1);this.navSelectedElements=o.map(function(t){return t.element});this.changeNavSelectedClass("add")};function a(t,e,i){return(e-t)*i+t}e.changeNavSelectedClass=function(e){this.navSelectedElements.forEach(function(t){t.classList[e]("is-nav-selected")})};e.activateAsNavFor=function(){this.navCompanionSelect(true)};e.removeNavSelectedElements=function(){if(!this.navSelectedElements){return}this.changeNavSelectedClass("remove");delete this.navSelectedElements};e.onNavStaticClick=function(t,e,i,n){if(typeof n=="number"){this.navCompanion.selectCell(n)}};e.deactivateAsNavFor=function(){this.removeNavSelectedElements()};e.destroyAsNavFor=function(){if(!this.navCompanion){return}this.navCompanion.off("select",this.onNavCompanionSelect);this.off("staticClick",this.onNavStaticClick);delete this.navCompanion};return n});
/*!
* imagesLoaded v4.1.4
* JavaScript is all like "You images are done yet or what?"
* MIT License
*/
(function(e,i){"use strict";if(typeof define=="function"&&define.amd){define("imagesloaded/imagesloaded",["ev-emitter/ev-emitter"],function(t){return i(e,t)})}else if(typeof module=="object"&&module.exports){module.exports=i(e,require("ev-emitter"))}else{e.imagesLoaded=i(e,e.EvEmitter)}})(typeof window!=="undefined"?window:this,function t(e,i){var s=e.jQuery;var r=e.console;function o(t,e){for(var i in e){t[i]=e[i]}return t}var n=Array.prototype.slice;function a(t){if(Array.isArray(t)){return t}var e=typeof t=="object"&&typeof t.length=="number";if(e){return n.call(t)}return[t]}function l(t,e,i){if(!(this instanceof l)){return new l(t,e,i)}var n=t;if(typeof t=="string"){n=document.querySelectorAll(t)}if(!n){r.error("Bad element for imagesLoaded "+(n||t));return}this.elements=a(n);this.options=o({},this.options);if(typeof e=="function"){i=e}else{o(this.options,e)}if(i){this.on("always",i)}this.getImages();if(s){this.jqDeferred=new s.Deferred}setTimeout(this.check.bind(this))}l.prototype=Object.create(i.prototype);l.prototype.options={};l.prototype.getImages=function(){this.images=[];this.elements.forEach(this.addElementImages,this)};l.prototype.addElementImages=function(t){if(t.nodeName=="IMG"){this.addImage(t)}if(this.options.background===true){this.addElementBackgroundImages(t)}var e=t.nodeType;if(!e||!h[e]){return}var i=t.querySelectorAll("img");for(var n=0;n

/* =====================================================================
* longclick.js v0.0.1
* https://github.com/djreimer/jquery-longclick
* =====================================================================
* Copyright (c) 2015 Derrick Reimer
* ===================================================================== */

(function($) {

    // LONGCLICK CLASS DEFINITION
    // ==========================

    var Longclick = function(el, options) {
      var that = this;

      this.el = el;
      this.timer = null;
      this.held = false
      this.options = options;

      if (el.innerText) {
        this.originalText = el.innerText;
      } else {
        this.originalText = el.value;
      }

      $(el).on("mousedown", function(event) {
        var $this = $(this);
        that.reset(options.holdText);
        that.timer = window.setTimeout(function() {
          if (options.heldText) {
            that.reset(options.heldText);
          } else {
            that.reset();
          }
          that.held = true;
          $this.trigger("longclick");
        //   gritterNotification("longclick","longclick");
        }, options.duration);

        return false;
      }).on("mouseup mouseleave click touchend", function(event) {
        let letClickThrough = !that.held; //If it wasn't held down, we want the click to go through by returning true
        //If it was held down, we want to prevent the click by returning falses
        //if was held, return false
        //if wasn't held, return true so click can go through

        if (!that.held || !options.sticky){
            that.reset();
        }

        if (!letClickThrough && event.type == "click") //have to reset that.held if we prevented the click going through, so that if we try to click it next time we can click it if it wasn't held.
            that.held = false;

        clearTimeout(that.timer);
        return letClickThrough;
      })
    }

    Longclick.prototype = {
      constructor: Longclick

    , reset: function(value) {
        value = value || this.originalText;

        if (this.el.innerText) {
          this.el.innerText = value;
        } else {
          this.el.value = value;
        }
      }
    }

    Longclick.DEFAULTS = {
      duration: 1000,
      holdText: "Hold...",
      heldText: null,
      sticky: false,
    }

    // LONGCLICK PLUGIN DEFINITION
    // ===========================

    function Plugin(option) {
      return this.each(function() {
        var $this = $(this);
        var data  = $this.data('longclick');
        var options = $.extend({}, Longclick.DEFAULTS, typeof option == 'object' && option);

        if (!data) $this.data('longclick', (data = new Longclick(this, options)));
        if (typeof option == 'string') data[option].call(data);
      })
    }

    $.fn.longclick = Plugin;
  })(jQuery);

/*!
* Signature Pad v3.0.0-beta.4 | https://github.com/szimek/signature_pad
* (c) 2020 Szymon Nowak | Released under the MIT license
*/

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
    typeof define === 'function' && define.amd ? define(factory) :
    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.SignaturePad = factory());
}(this, (function () { 'use strict';

return SignaturePad;

})));

function SetFlatpickr(id, time){
document.querySelector(`#${id}`)._flatpickr.setDate(time);
}

August 14 - 20th, 2022:

> Fix a bug that was making job requests not clickable after the latest chrome update
> Add downloadable calls CSV to pull out your call history data
> Added in Report for Time Sheets accumulated for employees in the reports page.

August 21st - 27th, 2022:

# Place all the behaviors and hooks related to the matching controller here.
# All this logic will automatically be available in application.js.
# You can use CoffeeScript in this file: http://coffeescript.org/

setSignatureToBeEdited = function(dataPoints){}; //declared globally so we can access outside this scope
disablePaymentIfNoSignature = function(){};
disableSignButtonIfNoSignature = function(){};
$(function(){
    // var canvas = document.querySelector('signature-pad');
    var canvas = document.getElementById("signature-pad");
    console.log("Canvas is: " + canvas);

    var signaturePad = new SignaturePad(canvas);
    window.signaturePad = signaturePad; // Expose the signaturePad variable to the global scope
    submittingForm = canvas.closest("form");

    $('button[type="submit"]').click(function(e){//here's where I could check if the signature was present, if it's not, prevent default and alert that they need to sign.
        document.getElementById("signature-pad-value").value = signaturePad.toDataURL();
    })

    setSignatureToBeEdited = function(dataPoints){ //sets the signature from an invoice that's already been signed
        signaturePad.fromDataURL(dataPoints);
    }

    document.getElementById('clear-signature').addEventListener('click', function () {
        signaturePad.clear();
        document.getElementById("signature-pad-value").value = "";
        disablePayment(); // we don't want them to be able to pay if they just cleared the signature, because there's no signature now haha.
        disableSignButton();
    });

    disablePaymentIfNoSignature = function(){
        if (signaturePad.isEmpty()){
            disablePayment();
        }
    }

    disableSignButtonIfNoSignature = function(){
        if (signaturePad.isEmpty()){
            disableSignButton();
        }
    }

    canvas.addEventListener('mousedown', function() {
        enablePayment();
        enableSignButton();
    }, false);

    canvas.addEventListener('mouseup', function() {
        document.getElementById("signature-pad-value").value = signaturePad.toDataURL();
    }, false);

setInterval(checkForSignatureAndEnable, 2000);

        $('#require-signature-notice')?.hide?.();
    }


    function enablePayment() {
        if (document.getElementById("payment_gateway_name")?.value === 'stripe') {
            const stripeButton = document.getElementsByClassName("stripe-button-el")[0];
            if (stripeButton) {
                stripeButton.disabled = false;
            }
        } else {
            const ibxPayButton = document.getElementsByClassName("ibx-pay-button")[0];
            if (ibxPayButton) {
                ibxPayButton.disabled = false;
            }
        }

        $('#require-signature-notice')?.hide?.();
    }

})

# Place all the behaviors and hooks related to the matching controller here.
# All this logic will automatically be available in application.js.
# You can use CoffeeScript in this file: http://coffeescript.org/

//This document for toastr to notify us when a new text messages comes in, and to play our notification sound.
$(document).ready(function(){
    console.log("Attempting to subscribe to MessagesChannel now")
    if (typeof currentBusinessId !== "undefined"){
        console.log("User signed in, attempt to subscribe");
        App.messages = App.cable.subscriptions.create({channel: 'MessagesChannel', business_id: currentBusinessId}, { //TODO: We need to get the current business id
            received: function(data){
                toastr.options = {
                    "closeButton": true,
                    "debug": false,
                    "newestOnTop": false,
                    "progressBar": false,
                    "positionClass": "toast-top-right",
                    "preventDuplicates": false,
                    "onclick": null,
                    "showDuration": "30000",
                    "hideDuration": "1000",
                    "timeOut": "5000",
                    "extendedTimeOut": "1000",
                    "showEasing": "swing",
                    "hideEasing": "linear",
                    "showMethod": "fadeIn",
                    "hideMethod": "fadeOut"
                }
                document.getElementById("sms-notification-audio").play();
                toastr["info"](` ${data['content']}`, ` ${data['sent_from']}`)
            },
        });
    }
    else {
        console.log("User not signed in (employee & business not found), so not going to subscribe.");
    }
})

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's
// vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require rails-ujs
//= require activestorage
//= require jquery/dist/jquery.min.js
//= require jquery-ujs/src/rails.js
//= require jquery-ui
//= require jquery.mask
//= require popper
//= require bootstrap-sprockets
//= require stack
//= require js-cookie/src/js.cookie.js
//= require 3rdparty/signature_pad.js

//= require redirect.js
//= require moment
//= require 3rdparty/bootstrap-tagsinput.js
//= require 3rdparty/jquery-longclick.js
//= require d3
//= require_directory ./Select2Helpers

// Needs to load first because classes in ModalHelpers inherit from this
//= require ModalHelpers/_SubmitAndEditModalState.js

//= require_directory ./ModalHelpers

//= require gritter
//= require flatpickr
//= require gritter-notifications.js

//= require_directory ./fullcalendar_helpers
//= require ./fullcalendar_helpers/AppointmentModal.js

//= require invoices.js
//= require customers.js
//= require modal-helper.js
//= require quill-helpers.js
//= require flatpickr-helpers.js
//= require helpers.js
//= require sms-notification.js
//= require phone-mask.js
//= require context_menu_setter.js
//= require_tree ./channels

//= require flowbite.min.js

# Place all the behaviors and hooks related to the matching controller here.
# All this logic will automatically be available in application.js.
# You can use CoffeeScript in this file: http://coffeescript.org/

$(function(){ //Any elements with this phone_us class will now be masked
    $('.phone_mask').mask('(000) 000-0000');
    $('.phone_mask').bind('paste', (event) => { //I added this in so that you could copy and paste from iPhone phone numbers into the app.. the +1 was throwing off our phone_masking.
        var pastedData = event.originalEvent.clipboardData.getData('text')
        if (pastedData[0] == "+" && pastedData[1] == "1"){
            let filteredPhoneNumber = pastedData.substring(2); //trim out the +1 from phone number if it exists..
            console.log(`Modified Pasted phone number from: ${pastedData} to: ${filteredPhoneNumber}!`);
            // event.originalEvent.clipboardData.setData('text/plain', filteredPhoneNumber);
            event.target.value = filteredPhoneNumber
        }
    });

$('.area_code_mask').mask('(000)');
})

$(function() {
    $('#business_logo').bind('change', function() {
        var fileName = $(this).val();
        $("#business-logo-file-field").html(fileName);
    });

    $("#business-logo-file-field").bind('click', function() {
        $("#business_logo").click();
    });
});

/**
* This function sets the context menu after a link element is clicked to display a context menu and
* allow for it to be clicked with actions depending on the callback.
* @param {*} idOfElement
* @param {*} idOfTextMenu
* @param {*} onClickCallback
*/
function registerContextMenu(idOfElement, idOfTextMenu, onClickCallback){
    var toggleContextMenu = () => {
        event.preventDefault();
        $(idOfTextMenu).finish().toggle(100)
    };

    $(idOfElement).bind("contextmenu", toggleContextMenu);
    $(idOfElement).on("click", toggleContextMenu);

        // If the document is clicked somewhere
    $(document).bind("mousedown", function (e) {
        // If the clicked element is not the menu
        if (!$(e.target).parents(idOfTextMenu).length > 0) {
            // Hide it
            $(idOfTextMenu).hide(100);
        }
    });

registerContextMenuClickForNewListElements(idOfTextMenu, onClickCallback);
}

/**
* This function needs to be called to set the click listener callback for any 'li' elements.
* If 'li' elements are added dynamically, like in the case of the location context menu and job select context menu,
* we will need to re-call this method to set the listeners for the new 'li' elements.
* @param {*} idOfTextMenu
* @param {*} onClickCallback
*/
function registerContextMenuClickForNewListElements(idOfTextMenu, onClickCallback){
    $(`${idOfTextMenu} li`).click(function(){
        var boundOnClickCallback = onClickCallback.bind($(this)); //bind $(this) to the callback so that the callbackcan access the correct scope and get the 'data' elements out of it.
        boundOnClickCallback();
        $(idOfTextMenu).hide(100);
    });
}

function setLocationMenuItemsCallback() // If the location menu element is clicked
{
    if ($(this).data().action == 'New Location'){
        $('#manage_properties_modal').modal();
        // $('#job_location_attributes_street_address').val('');
        // $('#job_location_attributes_city').val('');
        // $('#job_location_attributes_zip_code').val('');
        // $('#job_location_attributes_state').val('');
        // $('#job_location_attributes_default_location').prop('checked', false);
        // $('#job_location_id').val('');
        // $("#job_location_attributes_id").val('');
        // $("#bill_location_checkbox").show();
    }
    else {
        let street_address = $(this).data().street_address;
        $('#job_location_attributes_street_address').val(street_address);

        let city = $(this).data().city;
        $('#job_location_attributes_city').val(city);

        let zip_code = $(this).data().zip_code;
        $('#job_location_attributes_zip_code').val(zip_code);

        let state = $(this).data().state;
        $('#job_location_attributes_state').val(state);

let is_default_location = $(this).data().is_default_location;
$('#job_location_attributes_default_location').prop('checked', is_default_location);

        let location_id = $(this).data().id; //Sets the job_location_id field so that the appointment modal won't create a new location, but simply update this location (if there are changes).
        //See the jobs controller to see how this works.
        $('#job_location_id').val(location_id);

        $("#job_location_attributes_id").val(location_id);
    }
}

function setJobLinkMenuItemsCallback(){
    // Should set the new job id we want this employee job to be transferred over to.
    // It should set the job notes to match the old job
    // It should set the invoices.
    // When posting to the server, it should set this employee job id to the new job id.
    var jobId = $(this).data().id;
    modalAppointmentContext._jobId = jobId;

    modalAppointmentContext._data["notes"] = JSON.parse($(this).data('notes')); //biggest problem is the job notes and the invoices section. Just need to set the job notes and the invoices section.
    modalAppointmentContext._data["customer_id"] = $(this).data().customer_id;
    modalAppointmentContext._data["invoices"] = JSON.parse($(this).data('invoices')); //Not quite in the right format..
    modalAppointmentContext.fillInModalFormsWithCurrentVariables(false); //passing in false prevents the extra employee from getting added to the appointment when it's filled in.
    setAptModalForEditExistingEmployeeJob(modalAppointmentContext._employeeJobId, jobId, modalAppointmentContext._data["customer_id"]);
    // showCustomerSearchFields();
    $("#apt-cal-job-number").html(`${$(this).text().trim()}`);

// removeExtraEmployeeFormData(); //Have duplicate employee problem.
// $('#job_notes').val($(this).data().job_notes)

// TODO: Set Invoices...???
}

function evaluateContentBasedOnCurrentAppointment(unevaluatedTextTemplate){
    //Customer and employee info
    let evaluatedTextTemplate = unevaluatedTextTemplate.replace('{{employee}}', (modalAppointmentContext._data["employee_first"]))
    evaluatedTextTemplate = evaluatedTextTemplate.replace('{{user}}', (currentEmployeeName.includes(' ') ? currentEmployeeName.substr(0,currentEmployeeName.indexOf(' ')) : currentEmployeeName)); // Gets the first name of the user..
    evaluatedTextTemplate = evaluatedTextTemplate.replace('{{customer_first_name}}', (modalAppointmentContext._data["customer_first_name"])) //TODO: Having to convert this to UTC to get the correct local time. Bad sign, appears we're storing the local time in our database as if it were UTC time.
    evaluatedTextTemplate = evaluatedTextTemplate.replace('{{contact_first_name}}', (modalAppointmentContext._data["customer_first_name"])) //TODO: Having to convert this to UTC to get the correct local time. Bad sign, appears we're storing the local time in our database as if it were UTC time.

    //Location
    evaluatedTextTemplate = evaluatedTextTemplate.replace('{{location}}', (modalAppointmentContext._data["display_address"]))

    //Dates
    evaluatedTextTemplate = evaluatedTextTemplate.replace('{{start_time}}', (evaluateStartTimeForTextMessage(modalAppointmentContext._data["time_start"]))) //TODO: Having to convert this to UTC to get the correct local time. Bad sign, appears we're storing the local time in our database as if it were UTC time.
    evaluatedTextTemplate = evaluatedTextTemplate.replace('{{readable_start_time}}', (evaluateReadableStartTimeFromAppointment(modalAppointmentContext._startDate)))
    evaluatedTextTemplate = evaluatedTextTemplate.replace('{{end_time}}', (evaluateEndTimeForTextMessage(modalAppointmentContext._data["time_end"])))
    evaluatedTextTemplate = evaluatedTextTemplate.replace('{{day}}', (evaluateDayForTextMessage(modalAppointmentContext._data["time_start"])))
    evaluatedTextTemplate = evaluatedTextTemplate.replace('{{date}}', (evaluateDateForTextMessage(modalAppointmentContext._data["time_start"])))

return evaluatedTextTemplate;
};
//h

$(function() {
    registerContextMenu('#link-job-from-customer', '#link-job-menu', setJobLinkMenuItemsCallback);
    registerContextMenu('#location-context-menu-link', '#location-menu', setLocationMenuItemsCallback);
    registerContextMenu('#text-customer-action-link-twilio', "#text-menu", function(){
        // $('#messages_modal').modal('show'); //here is where we'll set the text message templates.?
        redirectToMessagesWithTextTemplate($(this).attr("data-unevaluated-body"));
        // let unevaluatedTextTemplate = $(this).attr("data-unevaluated-body");
        //attr data-evaluated-url comes from..??

        // let evaluatedUrl = modalAppointmentContext.evaluateUrlVariablesForTextTemplate($(this).attr("data-evaluated-url"));
        // contactNumber = modalAppointmentContext._data['contacts_phone'];
        // redirectToMessagesWithTextTemplate(evaluatedUrl, contactNumber);

    })
    registerContextMenu('#set-appointment-color', '#appointment-color-menu', setJobAppointmentColor);
    registerContextMenu('#quickbooks-context-menu-click', '#quickbooks-context-menu', function(){
        let qb_id = $(this).data().id;
        $.post({
            url: `/invoices/${qb_id}/resync_qb_token`,
            success(data){
                console.log("success server response: " + data);
                gritterSuccess("Succesfully Resynced", "This invoice just synced it's refresh token with Quickbooks")
            },
            error(data){
                console.log("error server response: " + data);
                gritterError("Couldn't Resync", "This invoice couldn't sync it's refresh token with Quickbooks. Try again later.")
            }
        })
    });
});

class FCTool{
    constructor(){}
    /**
     * Takes the button with id: '#submitjobbutton' and removes all of it's on click actions
     */
    static removeAllActionsFromModalButtons(){
        // $("#submitnewjob").off("click");
        $("#apt-cal-modal-customer").off("click");
        $("#apt-cal-modal-title").off("click");
    }

    /**
     * Sets the actions for the modal buttons, "View Customer", "View Job", "Navigate to Job", "Invoice Job", "Text Message", "Call"
     * @param {Id of the Job, used for setting the View Job Button} jobId
     * @param {Id of the customer, used for setting the Text Message/Call Buttons} customerId
     * @param {The employee job data, we'll use this to figure out which employee is going on this job so we can autofill the employee's name in our text message link} employeeJobData
     */
    static setActionsForModalButtons(jobId, customerId, employeeJobData){
        $("#apt-cal-edit-title").click(function(event){ //Setting the "View Job" button to go to the correct job
            // if (currentBusinessName === 'Tree Removal Company, LLC.'){
            //     window.location = "/jobs/" + jobId; //temporarily keeping this the same for Utah Treeco to avoid confusion to adding a new appointment
            // }
            // else { //Super bad and hacky. Lol. Doing this one off for a customer is not a good business practice, but oh well. I wnat o keep them happy.
                window.location = "/customers/" + customerId;
            // }
        });

        $("#apt-cal-modal-customer").click(function(event){ //Setting the "View Customer" button to go to the correct customer
            window.location = "/customers/" + customerId;
        });

        $('#add_appointment_button').unbind().click(function(event){
            $('#new_job_appointment_modal').modal('show'); //Show the modal for adding a new appointment
            $('#employee_job_job_id').val(jobId);
        });

        let assignedEmployeeName = employeeJobData["employee_name"].split(' ')[0].trim();
        if (employeeJobData["twilio_enabled"] == true){
            $("#text-customer-action-link-twilio").attr("href", `/messages?conversation=${employeeJobData['contacts_phone']}&content=This%20is%20${assignedEmployeeName}%20from%20${$('#home-company-name').text().trim()},%20just%20wanted%20to%20let%20you%20know%20I%27m%20on%20my%20way`);
            $("#call-customer-action-link").attr("href", `#`); //need to clear the href if it was set previous.

            if (currentBusinessName != 'Tree Removal Company, LLC.'){ //How do know how to set this..? For now, we're going to make it the default behavior. Let's see how Mark likes it..
                $("#call-customer-action-link").click(() => FCTool.makeOutboundCallToTwilio(modalAppointmentContext._data.customer_phone)); //it would be cool to track the recording here as well.
            }
            else {
                $("#call-customer-action-link").attr("href", `tel:${modalAppointmentContext._data.customer_phone}`); //Temporary for Utah Tree Co. Because they want to be able to call on their own phone.
            }
        }
        else {
            $("#text-customer-action-link-no-twilio").attr("href", `sms:${employeeJobData['contacts_phone']}&body=This%20is%20${assignedEmployeeName}%20from%20${$('#home-company-name').text().trim()},%20just%20wanted%20to%20let%20you%20know%20I%27m%20on%20my%20way`);
            $("#call-customer-action-link").attr("href", `tel:${employeeJobData['contacts_phone']}`);
        }

        //I think we already have the google_maps_link_data here
        $("#google-maps-action-link").attr("href", `${employeeJobData['google_maps_link']}`);
        $("#invoice-generation-action-link").attr("href", `/jobs/${jobId}/generate_invoice`);
    }

static setUploadedImagesInMessageAttachmentModal(customerId) {
const noImage = $('

No Image Found

');
$('#photos-to-attach-to-message').empty();
$('#photos-to-attach-to-message').append(noImage);

        if(customerId){
            $.get({
                url: `/messages/${customerId}/customer_uploaded_images.json`,
                success: function(data){
                    if(data.length > 0){
                        const imageContainer = $('

');
$('#photos-to-attach-to-message').empty();

                        data.forEach((image)=>{
                            imageContainer.append(
                                $('', {
                                    'src': `${image['url']}`,
                                    'style': 'width: 150px  !important; height: 150px;',
                                    'class': 'm-1 btn p-0 modal-img',
                                    'data-id': `${image['id']}`,
                                    'onclick': 'imageClickHandler(event)'
                                })
                            )
                        })
                        $('#photos-to-attach-to-message').append(imageContainer);
                    }
                },
                error: function(data){
                    console.log("error");
                    console.log(data);
                }
            });
        }
    }
    //Sets the locations for the given customer on the appointment modal for the arrow to select multiple locations.
    static setLocationMenu(customerData){
        $('#location-menu').empty(); //remove the location menu children

elements.
        let locations = customerData["locations"];
        let jobLocation = modalAppointmentContext._data.length ? modalAppointmentContext._data["location"] : modalAppointmentContext._data
        setPropertyManageModal(locations, jobLocation?.location_id);
        // setServiceAddress(jobLocation);
        $.each(locations, function( index, value ) { //for each location, add the

item for the menu.
$('#location-menu').append(`

                    ${value.is_default_location ? '' : ""}
                    ${value.display_address}

`);
});

//Add the default 'New..' button.
$('#location-menu').append(`

New..

`)

        //we need to set this onclick listener for this new li item because we added it after the modal was set
        registerContextMenuClickForNewListElements('#location-menu', setLocationMenuItemsCallback);

        // if there are less than 2 locations, then we should hide the bill box for UI/UX (less confusing for users not using multiple locations yet if they don't need to worry about it)
        let shouldShowBillingLocationCheckbox = locations.length > 1;
        if (shouldShowBillingLocationCheckbox){
            $("#bill_location_checkbox").show();
        }
        else{
            $("#bill_location_checkbox").hide();
        }
    }

    static setJobLinkMenu(customerId){
        $('#link-job-menu').empty();
        //TODO: Implement for better linking.
        // $.get({
        //     url: `/customers/${customerId}/jobs.json`,
        //     success: function(data){
        //         let jobs = data;
        //         //if length of jobs is >1, then we'll show the link field. Otherwise, we'll hide it. (Hide complexity for UI/UX experience)
        //         if (jobs.length > 1){
        //             // debugger;
        //             $.each(jobs, function(index, value) {
        //                 $("#link-job-menu").append(
        //                 $(`

// ${value.invoices[0].invoice_type} - ${value.invoices[0].total_price}
//

`).data('invoices', JSON.stringify(value.invoices))
        //                        .data('notes', JSON.stringify(value.notes)));
        //             });

        //             registerContextMenuClickForNewListElements('#link-job-menu', setJobLinkMenuItemsCallback);
        //             $('#link-job-from-customer-div').show();
        //         }
        //         else {
        //             $('#link-job-from-customer-div').hide();
        //         }
        //     }
        // });
    }

    /**
     * Sets the messages modal on the schedule, with the customer's name and phone number, and the last 25 messages to and from this customer.
     * @param {*} customerId
     */
    static setMessagesModal(customerData){

        //set the send text button to add a message to datatbase and on the UI when clicked.
        $('#send_text_button').unbind().click(function(){ //have to use unbind() so that the send button doesn't send multiple times because click() sets a function to be ran for each time it's called.. so it will send 1, then 2, then 3 messages, etc. for as many times as the modal has been opened. By unbinding first, we remove the previous click() action. This would be better if this was only ran once perhaps when the schedule page is loaded. We could probably move this to the schedule javascript code so that it's only ran on the page load instead of each time a modal is loaded.
            const imageSrc = $('#attached-image').attr('src')
            const file = $('#image_avatar')[0].files[0] || {}
            const uploadedImageId = $('#image_avatar_url_id').val();

            const messagePayload = {
                image: {
                    file: file,
                    imageUrl: imageSrc,
                    id: uploadedImageId
                },
                message: $('#message_to_send').val()
            }
            FCTool.addNewMessage(messagePayload);
        });

        //Clear all messages in the modal, so we have a clean slate:
        const parent = document.getElementById("chat-window-inner");
        while (parent.firstChild) {
            parent.firstChild.remove()
        }

        $('#recipient-display-name').text(customerData["phone"]);
        $('#convo-recipient-name').text(customerData["full_name"]);
        // get the phone number for the customer, and let's get the messages for this customer (latest 25) and put it in this modal.
    }

    static setMessagesModalFromPhoneNumber(phoneNumber){
        //Clear all messages in the modal, so we have a clean slate:
        const parent = document.getElementById("chat-window-inner");
        while (parent.firstChild) {
            parent.firstChild.remove()
        }
        $.get({ //this should only be called when they click on the messaging button to message the customer.
            url: `/messages/message_thread_from_number?customer_number=${phoneNumber}`,
            success(data){
                data['messages'].forEach(function(message, index){
                    let imageUrl = data['urls'][index]
                    if (message["is_inbound"]){
                        FCTool.addMessageFromCustomer(message["content"], message["name"], moment(message["created_at"]).calendar(null, {sameElse: 'MMMM DD, hh:mm a'}), imageUrl);
                    }
                    else{
                        FCTool.addMessageFromBusiness(message["content"], message["name"], moment(message["created_at"]).calendar(null, {sameElse: 'MMMM DD, hh:mm a'}), imageUrl);
                    }
                });

                baguetteBox.run('.tz-gallery',{ //We have to re-enable Baguette Box so that we can actually click on the images and get the gallery.
                    "buttons":true
                });
            }
       });
    }

/*
* All the message functions that will be moved to a new messages.js javascript class/file for better organization.
*/

    /**
     *
     * @param {*} text
     * @param {*} name
     * @param {*} date
     */
    //TODO: Move this into it's own messages.js class, shouldn't be in the FCTool class.
    static addMessageFromCustomer(text, name, date, imageUrl){
        var $elem = $('#chat-window-inner'); //https://amiyasahu.github.io/create-nested-html-elements-in-jquery.html

        //We don't want to attach an image if this message didn't have an mms sent with it.
        let $imageElement = isBlank(imageUrl) ? $('') : ($('', {'class': 'lightbox', 'href' : `${imageUrl}`})
            .append($('', { 'style': 'width: 100px !important; height: 100px; object-fit: contain;',  'src': `${imageUrl}`, 'class': `${imageUrl ? 'd-block' : 'd-none'} rounded w-50` }))
        );

$elem.append(
$('

')
.append($('
'))
.append($('

', {'class': 'yours messages'})
.append($imageElement)
.append($('

', {'class': `${text ? 'd-block' : 'd-none'} hsc-message last`, 'text': `${text}`}))
)
.append($('

', {'class': 'message-info-yours', 'text': `${date}`}))
);
}

    //TODO: Move this into it's own messages.js class, shouldn't be in the FCTool class.
    static addMessageFromBusiness(text, sentFromName, date, imageUrl){
        var $elem = $('#chat-window-inner'); //https://amiyasahu.github.io/create-nested-html-elements-in-jquery.html

        //We don't want to attach an image if this message didn't have an mms sent with it.
        let $imageElement = isBlank(imageUrl) ? $('') : $('', { 'class': 'lightbox', 'href' : `${imageUrl}`})
            .append( $('', { 'style': 'width: 100px  !important; height: 100px; object-fit: contain;',  'src': `${imageUrl}`, 'class': `${imageUrl ? 'd-block' : 'd-none'} rounded w-50`}));

$elem.append(
$('

')
.append($('
'))
.append($('

', {'class': 'mine messages'})
.append($imageElement)
.append($('

', {'class': `${text ? 'd-block' : 'd-none'} hsc-message last`, 'text': `${text}`}))
)
.append( $('

', {'class': 'message-info-mine', 'text': `${sentFromName}, ${date}`}))
);
}

    static getEmployeeJobDetailsAjax(employeeJobId, successCallback, errorCallback){
        if (!employeeJobId) //Preventing GET http://localhost:3000/employee_jobs/details/.json 404 (Not Found) error
            return;

        $.get({
            url: `/employee_jobs/details/${employeeJobId}.json`,
            success(data){
                successCallback(data);
            },
            error(data){
                errorCallback(data);
            }
        });
    }

    //when sending a new message, this is the callback for adding the new message bubble in the conversation
    static addNewMessage(messagePayload){
        const { image: { imageUrl, file, id }, message } = messagePayload;

        if (isBlank(message) && isBlank(imageUrl)){ //Don't want to send a message if it's blank
            return;
        }

        const fd = new FormData();
        let sendTo = modalAppointmentContext._data.customer_phone;
        let businessPhoneNumber = modalAppointmentContext._data.business_twilio_number

        fd.append('file', file)
        fd.append('id', id)
        fd.append('content', message)
        fd.append('to', sendTo)
        fd.append('sent_from', businessPhoneNumber)
        fd.append('name', currentEmployeeName)

        $.ajax({
            url: '/messages.json',
            type: "POST",
            dataType: 'json',
            data: fd,
            processData: false,
            contentType: false,
            success:function(data){
                FCTool.addMessageFromBusiness(message, currentEmployeeName, moment().calendar(null, {sameElse: 'MMMM DD, hh:mm a'}), imageUrl);
                $('#message_to_send').val('');
                resetImage();
                $('#chat-window').scrollTop($('#chat-window')[0].scrollHeight);//Scroll to bottom of current convo page
            }.bind(this), //binding to 'this' so we can access 'this' from within the success callback.
            error: function(data){
                showError("Couldn't Send Message", data); //shows gritter errors
            }.bind(this)
        });
    }

    /**
     * KEEP
     * https://stackoverflow.com/questions/21741841/detecting-ios-android-operating-system
     *
     * Determine the mobile operating system.
     * This function returns one of 'iOS', 'Android', 'Windows Phone', or 'unknown'.
     *
     * @returns {String}
     */
    static getMobileOperatingSystem() {
        var userAgent = navigator.userAgent || navigator.vendor || window.opera;

            // Windows Phone must come first because its UA also contains "Android"
        if (/windows phone/i.test(userAgent)) {
            return "Windows Phone";
        }

        if (/android/i.test(userAgent)) {
            return "Android";
        }

        // iOS detection from: http://stackoverflow.com/a/9039885/177710
        if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
            return "iOS";
        }

        return "unknown";
    }

    /**
     * Gets the aspect ratio of the width / height.
     * Used for mobile scaling of the calendar.
     */
    static getAspectRatio(){
        return window.innerWidth/window.innerHeight
    }

    /**
     * Gets the default calendar view. Display day if the window screen width is smaller than 800
     * for best viewing results.
     */
    static getDefaultView(){
        if (Cookies.get("dispatch_view")){
            return Cookies.get("dispatch_view");
        }
        if (window.innerWidth < 800){
            return 'timeGridDay'
        }
        else {
            return 'timeGridWeek'
        }
    }

    //How to use:
    // document.querySelector('.fc-event').append(FCTool.createBadgeElement(''));
    static createBadgeElement(content){
        let badge = document.createElement("span");
        badge.className = "appointment-message-badge";
        var textNode = document.createTextNode(content);
        badge.appendChild(textNode);
        return badge;
    }

    /**
     * Used to scroll the calendar to the current day in our timeline resource view
     * @param {*} calendar
     */
    static scrollCalendarToToday(calendar){
        calendar.scrollToTime((moment()._d.getDate() - calendar.state.currentDate.getDate() + 1) * parseInt(moment().format("HH")) + ":00:00");
    }

    static didUserConfirmNotification(){ //Problem.. we have to render this on the client side where we're currently rendering the notification message on the server side.
        let notify = $('#job_notify').is(':checked'); //is the notify checkbox checked?
        if (!notify){
            return true; //if the user didn't select the notify checkbox, then we want to be able to save without notifying and sending to the customer.
        }

        let firstName = $('#job_customer_attributes_first_name').val();
        let employeeName = modalAppointmentContext._employeeName;
        let companyName = $('#home-company-name').text().trim();
        let startTime = moment(modalAppointmentContext._startDate).format('h:mm a');
        let endTime = moment(modalAppointmentContext._endDate).format('h:mm a');
        let date = moment(modalAppointmentContext._endDate).format('ddd MMM Do');

        let message = `Hi ${firstName}, this is ${employeeName} from ${companyName}, just wanted to let you know that I put you on our schedule for an appointment on ${date} between ${startTime} to ${endTime}`
        return notify && confirm(`Send text message: "${message}"?`);
    }

    static makeOutboundCallToTwilio(toPhone){
        $.post("/messages/connect_twilio_call", {
            phone: toPhone
        })
    }
}

var className = FCTool;
//https://stackoverflow.com/questions/6998355/including-javascript-class-definition-from-another-file-in-node-js
try {
module.exports = className;
}
catch {
console.log("Couldn't export " + className.name + " as a seperate module.");
}

//= require_tree .

var modalAppointmentContext;
var calendar;
var clickDisabled = false;

/**
* Display the calendar with the draggable options and allow the user
* to modify the events on the calendar. Done through extending the
* default options before initializing the calendar.
*/
function showEditableCalendar() {
    var eventBeingMoved = false;
    calendar = new FullCalendar.Calendar(document.getElementById('calendar'), {
        customButtons: {
            addJobButton: {
                text: 'new',
                click: function() {
                    setNewAppointmentModal(currentEmployeeId,currentEmployeeName, null, null, null);
                    $('#invoice-section').hide();
                }
            },

            filterEmployeesDropdown: {
                class: 'fc-button-icon',
                click: function(){
                    $('#appointment_filter_modal').modal('show');
                }
            }
        },
        plugins: ['interaction', 'dayGrid', 'timeGrid', 'resourceTimeline'],
        allDaySlot: false, //don't show the all day slot on the week view..
        now: new Date().toISOString(),
        defaultDate: Cookies.get("dispatch_date") ? moment(Cookies.get("dispatch_date")).format() : new Date().toISOString(),
        editable: true, // enable draggable events
        aspectRatio: FCTool.getAspectRatio(),
        droppable: true,
        minTime: '8:00',
        maxTime: '19:15',
        // maxTime: '23:45',
        header: {
            left: 'prev,next, today, addJobButton',
            center: 'title',
            right: 'filterEmployeesDropdown, resourceTimelineWeekWithTime, dayGridMonth, timeGridWeek, timeGridDay'
        },
        footer: {
            left: 'printSummariesButton'
        },
        defaultView: FCTool.getDefaultView(),
        views: {
            resourceTimelineWeekWithTime: {
                slotLabelInterval: '2:00',
                slotWidth: 15,
                type: 'resourceTimeline',
                duration: { days: 7 },
                buttonText: 'all',
                dateAlignment: 'week', //Makes left-most day day at start of week instead of current day of the week
                nowIndicator: true,
            }
        },
        datesRender: function(info){ //Callback for when dates render. Set cookie to remember where user was here.
            Cookies.set("dispatch_date", info.view.activeStart)
        },
        viewSkeletonRender: function(info){
            Cookies.set("dispatch_view", info.view.type);
        },
        eventRender: function(info) { //Used to set the hovering tooltips with the address or time of appointment.
            $('.tooltip').remove();
            if (info == null) return;
            if (eventBeingMoved){
                let range = FullCalendar.formatRange(info.event.start, info.event.end, {
                    weekday: 'short', hour: 'numeric', minute: 'numeric',
                    separator: ' to ',
                })
                new Tooltip(info.el, {
                    title: range,
                    placement: 'bottom',
                    trigger: 'hover',
                    container: 'body'
                });
            }
            else {
                //is eventHoverText is blank it will cause issues with the schedule, especially with job requests.
                let title = isBlank(info.event.extendedProps.eventHoverText) ? info.event.extendedProps.summary : info.event.extendedProps.eventHoverText
                new Tooltip(info.el, {
                    title: title,
                    placement: 'bottom',
                    trigger: 'hover',
                    container: 'body'
                    });
            }

            //Set the border width to be larger.
            //https://stackoverflow.com/questions/36136056/how-set-width-border-events-with-full-calendar
            info. el. style. borderWidth = '2.5px';
            info. el. style. borderRadius = '0px';

          },
        eventResizeStart: function(info){
            eventBeingMoved = true;
        },
        eventResizeStop: function(info){
            eventBeingMoved = false;
            $('.tooltip').remove();
        },
        eventDragStart: function(info){
            eventBeingMoved = true;
        },
        eventDragStop: function(info){
            eventBeingMoved = false;
            $('.tooltip').remove();
        },
        eventReceive: function(info){ //after an event is dropped onto the calendar. Original Q: Not sure where 'info' gets set with all of the extra props. Answer: The event extended props that are in this info object get set in RequestsDraggable.jsx.
            setNewAppointmentFromRequest(info);
            info.event.remove(); //remove the event here because the above line opens the modal and sets it with all relveant info, so if they close modal witout saving, we don't want this event still on the calandar. If they were then to save the event modal again, then when the calendar refreshes (as it does every time it closes), then it will add a new event to the calendar, so if we kept this one here, then we'd have two events on there until the user refreshes.
        },
        resourcesInitiallyExpanded: false,
        firstDay: 1, //Setting the first day to be monday on the calendar
        resourceLabelText: 'Branches',
        resourceGroupField: 'branch',
        resources: {
            url: '/employees/fullcalendar_resources', //Fetches the employee names for the left-side column and is how we set up full calendar info objects.
            failure: function () {
                document.getElementById('script-warning').style.display = 'block';
            }
        },
        getTopLevelResources: {
        },
        schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
        events: { //Fetches the employee appointments. Also sets the params with a start and end key.
            url: '/employees/schedule_json',
            failure: function (data) {
                console.log(data);
                gritterError("Error", "Couldn't get events for calendar");
            }
        },
        dateClick: function (info) { //When clicking on an empty part of the calendar, open the modal
            setNewAppointment(info);
        },
        eventClick: function(info) {
            if (clickDisabled) //Preventing multiple clicks on Full Calender Event.
                return;

            clickDisabled = true;
            $('.tooltip').remove();
            if (!info.event.id) //Preventing GET http://localhost:3000/employee_jobs/details/.json 404 (Not Found) error
                return;
            console.log("A calendar event was clicked, here is it's info!");
            console.log(info);
            $.get({
                url: `/employee_jobs/details/${info.event.id}.json?breadcrumb=true`,
                success(data){
                    console.log("Just got data response from employee_jobs/details after an appointment was clicked on, here is the data:")
                    console.log(data)
                    setAppointmentFromFullCalendarInfo(info, data);
                    modalAppointmentContext.toggleModal();
                    setAptModalForEditExistingEmployeeJob(data, info.event.id, modalAppointmentContext.getCurrentJobId(), modalAppointmentContext.getCurrentCustomerId());
                    clickDisabled = false;
                }
            })
        },
        eventDrop: function(info){ //after dropping an event onto the calendar.. Does this still have the information saved?
            updateAppointmentDetailsFromFullCalendarInfo(info);
        },
        eventResize: function(info){ //after dragging an event
            updateAppointmentDetailsFromFullCalendarInfo(info);
        },
        resourceAreaWidth: '20%',
        slotDuration: '0:30',
    });
    calendar.render();

//This is how we set it to look like a font-awesome icon.
$(".fc-filterEmployeesDropdown-button").html('');

    /* Pushes the calendar to the right so we can see the current day if we're loading our current day */
    let lookingAtCurrentWeek = moment().isSame(calendar.state.currentDate, "week");
    if (lookingAtCurrentWeek){
        FCTool.scrollCalendarToToday(calendar);
    }

}

//TODO: There is duplicate logic between this and setAppointmentFromEmployeeJobData
function setAppointmentFromFullCalendarInfo(fullCalendarEventInfo, employeeJobData){ //Gets called anytime we populate the job-form from a full calendar event, whether that's from dragging an existing event around, resizing an existind event, clicking on an event, or clicking on the calendar.
    var employeeJobId = fullCalendarEventInfo.event.id;
    var jobId = fullCalendarEventInfo.event.extendedProps.jobId;

    var employeeId = fullCalendarEventInfo.event.getResources()[0]?.id;
    if (employeeId == null){ //For employees that have been deactivated, getResources()[0] return [null]. If that happens, let's just rely on the employeeJobData.employee_id.
        employeeId = employeeJobData.employee_id;
    }

    var employeeName = employeeJobData["employee_name"]
    var eventStart = moment(fullCalendarEventInfo.event.start).format().substring(0,16);
    var eventEnd = moment(fullCalendarEventInfo.event.end).format().substring(0,16);
    modalAppointmentContext = new AppointmentModal(employeeId, employeeName, eventStart, eventEnd, employeeJobId, jobId, employeeJobData); //Automatically puts data in right forms.
    modalAppointmentContext.fillInModalFormsWithCurrentVariables()
}

function setAppointmentFromEmployeeJobData(employeeJobData){
    var employeeJobId = employeeJobData.id;
    var jobId = employeeJobData.job_id;
    var employeeId = employeeJobData.employee_id;
    var employeeName = employeeJobData["employee_name"]
    var eventStart = moment(employeeJobData.formatted_start).format().substring(0,16);
    var eventEnd = moment(employeeJobData.formatted_end).format().substring(0,16);
    modalAppointmentContext = new AppointmentModal(employeeId, employeeName, eventStart, eventEnd, employeeJobId, jobId, employeeJobData); //Automatically puts data in right forms.
    modalAppointmentContext.fillInModalFormsWithCurrentVariables()
}

/**
* Finds and sets all the relevant appointment information from the fullcalendar 'info' object if the calendar was clicked or the "New" button was clicked
* @param {*} info
*/
function setNewAppointment(info){
startDate = info.dateStr.substring(0,16); //substring(0, 16) because form needs exactly in format: YYYY-MM-DDThh:mm
endDate = moment(info.dateStr).add(2, 'h').format().substring(0,16); //Add 2 hours to start date for end date (making appointments default of 2 hour long), truncate to YYYY-MM-DDThh:mm, .format() keeps moment.js in local time.

    //info.resource.id is set when we're using the "all" view, or the vertical resource view where when you click on a row it's associated with an employee
    employeeId = info.resource != null ? info.resource.id : currentEmployeeId; //employeeId and employeeName should be set based on whoever is signed in.
    employeeName = info.resource != null ? info.resource.title : currentEmployeeName;
    setNewAppointmentModal(employeeId, employeeName, startDate, endDate);
}

/**
* Finds and sets all the relevant appointment information from the fullcalendar 'info' object if a job_request was dragged onto the calendar
* @param {*} info
*/
function setNewAppointmentFromRequest(info){
    startDate = moment(info.event.start).format().substring(0,16);
    endDate = moment(info.event.end).format().substring(0,16);
    if (info?.view?.type == 'dayGridMonth'){ //Doing this for Joe from Cincinatti Pool Divers -- he wants it to be 9AM to 3PM. Previously it was defaulting to 12AM-2AM if dragging a job request on to the month view
        startDate = moment(info.event.start).set({hour: 9}).format().substring(0,16);
        endDate = moment(info.event.start).set({hour: 15}).format().substring(0,16);
    }

    //info.resource.id is set when we're using the "all" view, or the vertical resource view where when you click on a row it's associated with an employee
    employeeId = info.event.getResources().length > 0 ? info.event.getResources()[0]._resource.id : currentEmployeeId;
    employeeName = info.event.getResources().length > 0 ? info.event.getResources()[0]._resource.title : currentEmployeeName;
    let data = {"notes": info.event.extendedProps.notes,
     "request_id": info.event.extendedProps.requestId,
     "customer_id": info.event.extendedProps.customerId,
     "location_id": info.event.extendedProps.locationId,
     "customer_first_name": info.event.extendedProps.firstName,
     "customer_last_name": info.event.extendedProps.lastName,
     "customer_phone":  info.event.extendedProps.phone,
     "customer_email": info.event.extendedProps.email,
     "street_address": info.event.extendedProps.streetAddress,
     "city": info.event.extendedProps.city,
     "zip_code": info.event.extendedProps.zip,
     "state": info.event.extendedProps.state,
     "marketing_source_id": info.event.extendedProps.marketingSourceId,
     "marketing_source_name": info.event.extendedProps.marketingSourceName}

setNewAppointmentModal(employeeId, employeeName, startDate, endDate, data);
}

/**
* Sets a 'new appointment modal' used to submit a new job appointment
* @param {*} employeeId
* @param {*} employeeName
* @param {*} startDate
* @param {*} endDate
* @param {*} data
*/
function setNewAppointmentModal(employeeId, employeeName, startDate, endDate, data){ //if data["request_id"] is set in modal it will set it.
    modalAppointmentContext = new AppointmentModal(employeeId, employeeName, startDate, endDate, null, null, data);
    modalAppointmentContext.fillInModalFormsWithCurrentVariables();
    modalAppointmentContext.toggleModal();
    setAptModalForCreateNewEmployeeJob();
}

/**
* Sets the '#submitnewjob' button to post the contents of the
* form to the jobs/new when on click
*/
function setAptModalForCreateNewEmployeeJob() {
    setModalHeader(edit = false);
    FCTool.removeAllActionsFromModalButtons();
    modalAppointmentContext._isNewJob = true;
    // FCTool.bindSubmitModalButtonForNewJob();
    $('#submitnewjob').unbind().click(function(event){ //https://stackoverflow.com/questions/14969960/jquery-click-events-firing-multiple-times
        event.preventDefault();
        checkForErrorsBeforeSubmitting();
        removeExtraEmployeeFormData();
        pushAllSelectedEmployeesIntoFormData();
        var data = $("#job-form").serialize();
        if (FCTool.didUserConfirmNotification()){
            $.ajax({
                type: "POST",
                url: "/jobs.json",
                data: data,
                success: function () {
                    let jobRequestIdThatWasScheduled = modalAppointmentContext._data["request_id"]
                    if (jobRequestIdThatWasScheduled){ //if this is false, then the job wasn't scheduled from a job request
                        $(`div[data-requestId='${jobRequestIdThatWasScheduled}']`)[0].remove();
                    }
                    closeModal(doRefresh = true);// clear the modal fields after data serialization
                    gritterSuccess('Successfully added new appointment', "You've successfully added a new appointment", '2500');
                },
                error: function(data) {
                    // resetAppointmentModalSaveButton(); //reset it so the loader is no longer showing and it's activated again.
                    $("#submit_button_outer").removeClass("is-loading");
                    $('#submitnewjob').prop('disabled', false);
                    showErrorForCalendar(data)
                },
            });
            removeExtraEmployeeFormData();
        }
        else {
            // resetAppointmentModalSaveButton(); //reset it so the loader is no longer showing and it's activated again.
            $("#submit_button_outer").removeClass("is-loading");
            $('#submitnewjob').prop('disabled', false);
        }
    });
}

/**
* Sets the '#submitnewjob' button to update the associated
* employee job id.
*/
function setAptModalForEditExistingEmployeeJob(employeeJobData, employeeJobId, jobId, customerId) { //KEEP
    setModalHeader(edit = true, customerId, jobId); //Is this jobId really the Job Id, or is it the EmployeeJob Id?
    FCTool.setActionsForModalButtons(jobId, customerId, employeeJobData, modalAppointmentContext); // KEEP This gets hit again with employee job details
    FCTool.setJobLinkMenu(customerId);
    $.get({
        url: `/customers/${customerId}/lite.json`,
        success: function(customerData){
            FCTool.setLocationMenu(customerData); //Sets the menu dropdown for selecting a different location that the customer has.
            FCTool.setMessagesModal(customerData);
        },
        error: function(data){
            gritterError()
        }
    });

    modalAppointmentContext._isNewJob = false;
    var handleSubmittingEmployeeJobUpdate = function(event){
        $("#submitnewjob").unbind('click', handleSubmittingEmployeeJobUpdate);
        event.preventDefault();
        checkForErrorsBeforeSubmitting();
        removeExtraEmployeeFormData();
        pushAllSelectedEmployeesIntoFormData();
        const data = $("#job-form").serialize() + "&id=" + jobId + "&employee_job_id=" + employeeJobId + "&customer_id=" + customerId;

        $.ajax({
            url: "/update_job_and_times",
            type: "PUT",
            data: data,
            success: function () {
                gritterSuccess('Successfully updated appointment', "You've successfully updated the appointment", '2500');
                closeModal(doRefresh = true); //could improve performance if we didn't reload the entire schedule after changing just 1 job.. although it's good practice usually to refresh the whole calendar to fetch any recent updates. Could send a delta T to server? and server just sends updates since last? That would be pretty cool and high-performance.
            },
            error: showErrorForCalendar,
        });
        removeExtraEmployeeFormData();
    };
    $("#submitnewjob").bind('click', handleSubmittingEmployeeJobUpdate);
}

/**
* Sets the modal header depending on if it's the modal for a new appointment, (sends a POST to create new employee_job & job)
* or the modal for editing (sends a PUT to the server to edit existing employee_job) an existing appointment
* @param {*} edit
*/
function setModalHeader(edit = false, customerId, jobId){
    if (edit) {
        $('#apt-cal-new-title').hide();
        $("#apt-cal-edit-title").show();
        $('#apt-cal-job-number').show();
        // $("#apt-cal-job-number").html(`${modalAppointmentContext._data["customer_full_name"]}, ${customerId}`); //index.. how to get the index number?
        $("#apt-cal-modal-customer").show();
        $("#apt-cal-modal-job").show();
        $('.edit-job-modal').show();
        $('.new-job-modal').hide();
        $('.delete-current-job').show();
        $('#add_appointment_button').show();
        hideCustomerSearchFields();
    }
    else {
        $('#add_appointment_button').hide();
        $("#apt-cal-edit-title").hide();
        $('#apt-cal-job-number').hide();
        $('#apt-cal-new-title').show();
        $('.edit-job-modal').hide();
        $('.new-job-modal').show();
        //DON'T DISPLAY AS LINK
        $("#apt-cal-modal-customer").hide();
        $("#apt-cal-modal-job").hide();
        $('.delete-current-job').hide();
        showCustomerSearchFields();
    }
}

function hideCustomerSearchFields(){
    //hide customer search bar by default if editing an appointment
    $('#search-minus-icon').hide();
    $('#search-icon').show();
    $('#customer-search-fields').hide();
    // $('#link-job-from-customer').hide();
}

function showCustomerSearchFields(){
    //set customer search bar to visible
    $('#search-minus-icon').show();
    $('#search-icon').hide();
    $('#customer-search-fields').show();
    // $('#link-job-from-customer').show();
}

/**
* Closes the modal and refreshes the calendar events.
*/
async function closeModal(doRefresh) {
    if (doRefresh) {
        await sleep(50); //give the server time to insert the new record into the database before requesting it.
        calendar.refetchEvents();
    }
    if (modalAppointmentContext != null){
        modalAppointmentContext.clear();
        modalAppointmentContext = null;
    }
    $.post({url: `/remove_appointment_breadcrumb`}); //TODO: This one isn't always working.
    $("#job_notify").prop("checked", false); //uncheck the notify checkbox when closing..
    document.getElementById('job_notify').value = 'on';
    $('#delete_job_request').hide();
    $('#set-appointment-color').css('color', "");
}

function setFullCalendarBranchResource(branchName) {
setTimeout(function () {setBranch(branchName)}, 500);
}

/**
* Expands the "branch" (FullCalendar Resource) of whatever the given branch name was.
* This is so the employee that's logged in only has to look at his current branch's appointments.
* @param {*} branchName
*/
function setBranch(branchName){
    $('#calendar .fc-divider .fc-cell-text').each(function (index, area_text_el) {
        if (area_text_el.innerText === branchName) {
            $(area_text_el).siblings('.fc-expander').click()
        }
    });
}

/**
* Sleep for the given time period
* @param {*} ms ms to sleep for.
*/
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}

function updateAppointmentDetailsFromFullCalendarInfo(info){
    let appointmentId = info.event.id;
    let appointmentStart = moment(info.event.start).format().substring(0,16);
    let appointmentEnd = moment(info.event.end).format().substring(0,16);
    let employeeForAppointment = info.event.getResources()[0].id;
    updateAppointmentDetails(appointmentId, appointmentStart, appointmentEnd, employeeForAppointment);
}

/**
* This function is used when dragging the appointments around on fullcalendar.
* This function hits the server with a "PUT" to update the appointments with the new employee and/or appointment times.
* @param {*} employeeJobId
* @param {*} startTime
* @param {*} endTime
* @param {*} employeeId
*/
function updateAppointmentDetails(employeeJobId, startTime, endTime, employeeId){ //How many times is this getting called? Twice.

    //with this approach, we're requesting the appointment data from the server and just changing what we need. This is easier than implementing a sparse update route
    FCTool.getEmployeeJobDetailsAjax(employeeJobId, //This does a GET, and then a PUT. Is there a way to do a PUT without a GET?
        function(data){
            data["time_start"] = startTime;
            data["time_end"] = endTime;
            delete data["id"]; //throws a 500 error if we keep this "id" in the data.
            data["employee_id"] = employeeId //change the employee if it's dragged onto a different employee.
            $.ajax({
                method: "PUT",
                url: `/employee_jobs/${employeeJobId}.json`,
                data: {employee_job: data},
                success(){
                    gritterSuccess("Success", "Successfully updated appointment")
                },
                error(){
                    gritterError("Error", "Couldn't update appointment")
                }
            })
        });
}

/**
* This takes our select 2 input box, iterates over all entries, and adds input fields to the form
* so that an appointment gets created for each employee that was selected.
*/
function pushAllSelectedEmployeesIntoFormData(){
    let numberOfEmployeesAssignedToThisJob = $('#employees_select').find(':selected').length;
    $('#job_employee_jobs_attributes_0_employee_id').val($('#employees_select').find(':selected')[0].value); //Set the first selected employee in the first form value.
    if (numberOfEmployeesAssignedToThisJob > 1){
      for (var i = 1; i < numberOfEmployeesAssignedToThisJob; i++){
        let currentEmployeeId = $('#employees_select').find(':selected')[i].value;
        appendEmployeeAppointment(i, currentEmployeeId);
      }
    }
    else {
        removeExtraEmployeeFormData();
    }
}

/**
* This removes any extra employees from our form data, to be called after the form has been submitted.
*/
function removeExtraEmployeeFormData(){
$('.added-employee-job-input').remove();
}

/**
* This is where we add the extra  fields so we can create multiple appointments for different employees at the same time.
* @param {*} index
* @param {*} employeeId
*/
function appendEmployeeAppointment(index, employeeId){//https://stackoverflow.com/questions/2530635/jquery-add-additional-parameters-on-submit-not-ajax
  var employeeIdInput = $("")
       .attr("type", "hidden")
       .attr("class", "added-employee-job-input")
       .attr("name", `job[employee_jobs_attributes][${index}][employee_id]`).val(employeeId)
       .attr("id", `job_employee_jobs_attributes_${index}_employee_id`);
  var timeStartInput = $("")
       .attr("type", "hidden")
       .attr("class", "added-employee-job-input")
       .attr("name", `job[employee_jobs_attributes][${index}][time_start]`).val($('#job_employee_jobs_attributes_0_time_start').val())
       .attr("id", `job_employee_jobs_attributes_${index}_time_start`).val($('#job_employee_jobs_attributes_0_time_start').val());
  var timeEndInput = $("")
       .attr("type", "hidden")
       .attr("class", "added-employee-job-input")
       .attr("name", `job[employee_jobs_attributes][${index}][time_end]`).val($('#job_employee_jobs_attributes_0_time_end').val())
       .attr("id", `job_employee_jobs_attributes_${index}_time_end`).val($('#job_employee_jobs_attributes_0_time_end').val());
  $('#job-form').append(employeeIdInput);
  $('#job-form').append(timeStartInput);
  $('#job-form').append(timeEndInput);
}

/**
* Checks the job_form modal for errors
*/
function checkForErrorsBeforeSubmitting(){ //TODO: Add red borders around the fields that have issues.
    //check number of employees
    var error = false;
    let numberOfEmployeesAssignedToThisJob = $('#employees_select').find(':selected').length;
    if (numberOfEmployeesAssignedToThisJob == 0){
        gritterError("Error", "Select employee(s) to schedule or modify appointments", 10000);
        error = true;
    }

    //check dates are set
    if ($('#job_employee_jobs_attributes_0_time_start').val() == ""){
        $("#submit_button_outer").removeClass("is-loading");
        $('#submitnewjob').prop('disabled', false);
        gritterError("Error", "You must have an appointment start time", 10000);
        error = true;
    }

    if ($('#job_employee_jobs_attributes_0_time_end').val() == ""){
        $("#submit_button_outer").removeClass("is-loading");
        $('#submitnewjob').prop('disabled', false);
        gritterError("Error", "You must have an appointment end time", 10000);
        error = true;
    }

    if (error){
        throw ("User tried to submit a job & appintment with errors");
    }
}

/**
* This is used when a job request is clicked rather than dragged onto the calendar
* @param {*} event
*/
function jobRequestClicked(event){
    let eventEl = event.currentTarget;
    let data = {"notes": eventEl.dataset.notes,
    "request_id": eventEl.dataset.requestid,
    "customer_id": eventEl.dataset.customerid,
    "location_id": eventEl.dataset.customerid,
    "customer_first_name": eventEl.dataset.firstname,
    "customer_last_name": eventEl.dataset.lastname,
    "customer_phone":  eventEl.dataset.phone,
    "customer_email": eventEl.dataset.email,
    "street_address": eventEl.dataset.streetaddress,
    "city": eventEl.dataset.city,
    "zip_code": eventEl.dataset.zip,
    "state": eventEl.dataset.state,
    "marketing_source_id": eventEl.dataset.marketingsourceid,
    "marketing_source_name" :eventEl.dataset.marketingsourcename}

    $('#delete_job_request').show();
    $('#delete_job_request').unbind().click(function(){
        if (confirm("Are you sure you want to delete?")){
            $.ajax({
                url: `/job_requests/${eventEl.dataset.requestid}.json`,
                type: 'DELETE',
                success: function(result) {
                    gritterSuccess("Success", "Successfully Deleted Request");
                    closeModal();
                    eventEl.remove();
                },
                error: function(result){
                    gritterError("Error", "Sorry, we couldn't delete this job request right now.");
                }
            });
        }
    });

setNewAppointmentModal(currentEmployeeId,currentEmployeeName, null, null, data);
}

class @AppointmentModal2 # This javascript object represents the data in the job modal form. It maps logic between the visible UI state and data for a given appointment.
    constructor: (employeeId, employeeName, startDate, endDate, employeeJobId, jobId, data) ->
        @_data = {}
        if (data?)
            @_data = data
        @_employeeJobId = employeeJobId
        @_jobId = jobId
        @_startDate = startDate
        @_endDate = endDate
        @_employeeId = employeeId
        @_employeeName = employeeName
        @_isNewJob = false

    #Toggles the Modal with the 'job-modal' id.
    toggleModal: () =>
        $("#job-modal").modal("toggle");
        $("#assign-roster-toggle").hide(); #TODO: We don't want to support rosters anymore. They're confusing and not used. We should gut all the roster code for the front-end and backend.

    setInvoicesSection = ->
        if @_data["invoices"] && @_data["invoices"][0] # If there's at least one invoice for this job, show invoice section
            $('#invoice-section').show();
            for q in [0, 1, 2] # Show the first three invoices from a job..
                if @_data["invoices"][q]
                    $("#invoice-section-#{q}").show()
                    invoiceId = @_data["invoices"][q]["id"]
                    $("#invoice-#{q}-title").text(@_data["invoices"][q]["short_title"])
                    $("#invoice-#{q}-title").attr("href": "/invoices/#{invoiceId}")
                    $("#invoice-#{q}-total").text(formatCurrency(@_data["invoices"][q]["total_price"]))

                    if parseFloat(@_data["invoices"][q]["amount_due"]) > 0
                        $("#invoice-#{q}-total").attr("style": "color:red")
                    else
                        $("#invoice-#{q}-total").attr("style": "color:green")

                    $("#invoice-#{q}-send").attr("onclick": "emailInvoiceToCustomer(#{invoiceId})")
                    $("#invoice-#{q}-stripe").attr("href": "/invoices/#{invoiceId}/pay")
                    $("#invoice-#{q}-mark-as-paid").attr("onclick": "markAsPaid(#{invoiceId})")
                else
                    $("#invoice-section-#{q}").hide()
        else
            $('#invoice-section').hide(); # If there are no invoices for this job, don't show the invoices section.

    setInvoicesCustomerSection = ->
        if @_data["invoices_for_customer"] && @_data["invoices_for_customer"][0] # If there's at least one invoice for this job, show invoice section
            $('#invoice-section-customer-more-url').attr("href", "/customers/#{@_data["customer_id"]}")
            $('#invoice-section-customer').show();
            for q in [0,1,2] # Show the first three invoices from a job..
                if @_data["invoices_for_customer"][q] && @_data["invoices_for_customer"][q]["job_id"] != @_jobId
                    $("#invoice-section-customer-#{q}").show()
                    invoiceId = @_data["invoices_for_customer"][q]["id"]
                    $("#invoice-customer-#{q}-title").text(@_data["invoices_for_customer"][q]["short_title"])
                    $("#invoice-customer-#{q}-title").attr("href": "/invoices/#{invoiceId}")
                    $("#invoice-customer-#{q}-total").text(formatCurrency(@_data["invoices_for_customer"][q]["total_price"]))

                    if parseFloat(@_data["invoices_for_customer"][q]["amount_due"]) > 0
                        $("#invoice-customer-#{q}-total").attr("style": "color:red")
                    else
                        $("#invoice-customer-#{q}-total").attr("style": "color:green")

                    $("#invoice-customer-#{q}-send").attr("onclick": "emailInvoiceToCustomer(#{invoiceId})")
                    $("#invoice-customer-#{q}-stripe").attr("href": "/invoices/#{invoiceId}/pay")
                    $("#invoice-customer-#{q}-mark-as-paid").attr("onclick": "markAsPaid(#{invoiceId})")
                else
                    $("#invoice-section-customer-#{q}").hide()
        else
            $('#invoice-section-customer-more-url').attr("href", "/#")
            $('#invoice-section-customer').hide(); # If there are no invoices for this job, don't show the invoices section.

setInvoicesSectionPublic: ->
setInvoicesSection.call(this)

    #Sets all the modal's forms with our current internal variables
    fillInModalFormsWithCurrentVariables: (setEmployeeSelect2Option = true) =>
        #All involved models ID's
        $('#job_id').val(@_jobId);
        $('#job_customer_id').val(@_data["customer_id"]);
        $('#job_location_id').val(@_data["location_id"]);
        $('#job_customer_contact_id').val(@_data["customer_contact_id"]);
        $('#job_job_request_id').val(@_data["request_id"]) #if request_id is set in our data, then we set that value on the form. This is so when it's submitted to the server, it can associate the job with the request, and we know that the request was turned into a job.

        #Customer Name:
        $('#job_customer_attributes_id').val(@_data["customer_id"])
        $('#job_customer_attributes_first_name').val(@_data["customer_first_name"])
        $('#job_customer_attributes_last_name').val(@_data["customer_last_name"])
        $('#job_customer_attributes_phone').val(formatPhoneNumber(@_data["customer_phone"]))
        $('#job_customer_attributes_email').val(@_data["customer_email"])

        $('#job_location_attributes_id').val(@_data["location_id"])
        $('#job_location_attributes_customer_id').val(@_data["customer_id"])
        $('#job_location_attributes_street_address').val(@_data["street_address"])
        $('#job_location_attributes_city').val(@_data["city"])
        $('#job_location_attributes_zip_code').val(@_data["zip_code"])
        $('#job_location_attributes_state').val(@_data["state"])
        if (@_data["location"])
            $("#job_location_attributes_default_location").prop("checked", @_data["location"]["is_default_location"]);

if (@_data["owner_id"]) #If the owner isn 't set, just set it to the given employee.
SetSelect2Option('owner_id', @_data["owner_full_name"], @_data["owner_id"]);

SetSelect2Option('appointment-type-search', @_data["appointment_type_name"], @_data["appointment_type_id"]);

        #Appointment fields:
        SetFlatpickr('job_employee_jobs_attributes_0_time_start', @_startDate);
        SetFlatpickr('job_employee_jobs_attributes_0_time_end', @_endDate);
        $("#job_employee_jobs_attributes_0_employee_id").val(@_employeeId);
        $("#job_employee_jobs_attributes_0_id").val(@_employeeJobId);

        #Job attributes:
        $("#job_notes").val(@_data["notes"]);
        $("#job_job_status").val("job_status");

SetSelect2Option('employees_select', @_employeeName, @_employeeId) if setEmployeeSelect2Option
SetSelect2Option('marketing_source_id', @_data["marketing_source_name"], @_data["marketing_source_id"])

$('#job_upload_form').attr("action", "/jobs/#{@_jobId}/image.json")

        $("#apt-cal-job-number").html("#{@_data["job_title"]}")
        $("#form-load-status").val("true")

        #How to get the appointment color...???
        if (@_data["color"] != null)
            $('#set-appointment-color').css('color', @_data["color"]); #This is setting the paint brush button color to the right one

        $("#job_employee_jobs_attributes_0_appointment_color_id").val(@_data["color_id"]);
        setInvoicesSection.call(this)
        setInvoicesCustomerSection.call(this)

    evaluateUrlVariablesForTextTemplate: (url) ->
        # { = '%7B', { is url encoded to '%7B', so we need to match on '%7B' because here we're evaluating the already encoded url
        # } = '%7D' same as above

        #Names
        evaluatedUrl = url.replace('%7B%7Bemployee%7D%7D', encodeURIComponent(@_data["employee_first"]))
        evaluatedUrl = evaluatedUrl.replace('%7B%7Bcustomer_first_name%7D%7D', encodeURIComponent(@_data["customer_first_name"])) #TODO: Having to convert this to UTC to get the correct local time. Bad sign, appears we're storing the local time in our database as if it were UTC time.
        evaluatedUrl = evaluatedUrl.replace('%7B%7Bcontact_first_name%7D%7D', encodeURIComponent(@_data["customer_first_name"])) #TODO: Having to convert this to UTC to get the correct local time. Bad sign, appears we're storing the local time in our database as if it were UTC time.
        #Location
        evaluatedUrl = evaluatedUrl.replace('%7B%7Blocation%7D%7D', encodeURIComponent(@_data["display_address"]))

        #Dates
        evaluatedUrl = evaluatedUrl.replace('%7B%7Bstart_time%7D%7D', encodeURIComponent(evaluateStartTimeForTextMessage(@_data["time_start"]))) #TODO: Having to convert this to UTC to get the correct local time. Bad sign, appears we're storing the local time in our database as if it were UTC time.
        evaluatedUrl = evaluatedUrl.replace('%7B%7Breadable_start_time%7D%7D', encodeURIComponent(evaluateReadableStartTimeFromAppointment(@_startDate)))
        evaluatedUrl = evaluatedUrl.replace('%7B%7Bend_time%7D%7D', encodeURIComponent(evaluateEndTimeForTextMessage(@_data["time_end"])))
        evaluatedUrl = evaluatedUrl.replace('%7B%7Bday%7D%7D', encodeURIComponent(evaluateDayForTextMessage(@_data["time_start"])))
        evaluatedUrl = evaluatedUrl.replace('%7B%7Bdate%7D%7D', encodeURIComponent(evaluateDateForTextMessage(@_data["time_start"])))
        return evaluatedUrl

    clear: () ->
        $("#job-modal").modal("hide");
        $('#customer-name-search').val(null).trigger('change'); #wipe all fields (causes failed AJAX Customer GET request from the CustomerSearchSelect class, that's ok)
        $('#marketing_sources_id').val(null).trigger('change');
        $('#owner_id').val(null).trigger('change');
        $('#appointment-type-search').val(null).trigger('change');
        $('#employees_select').val(null).empty().trigger('change');
        $(".form-control").val(""); # wipe all fields
        $('.modal-backdrop').remove(); #Removes all remaining modal backdrops https://stackoverflow.com/a/11544860
        # Remove all invoices from the table..
        $('#invoice-section').hide(); # If there are no invoices for this job, don't show the invoices section.
        $('#submitnewjob').off('click')
        $("#submit_button_outer").removeClass("is-loading");
        $('#job_appointment_close').removeClass('is-loading');
        $('#submitnewjob').prop('disabled', false);
        $('.cancel-with-autosave').prop('disabled', false);

getCurrentJobId: () ->
return @_jobId;

getCurrentCustomerId: () ->
return @_data["customer_id"];

getEmployeeId: () ->
return @_employeeId;

getData: () ->
return @_data

class AppointmentModal {
    constructor(employeeId, employeeName, startDate, endDate, employeeJobId, jobId, data) {
      this._data = data ? data : {};
      this._employeeJobId = employeeJobId;
      this._jobId = jobId;
      this._startDate = startDate;
      this._endDate = endDate;
      this._employeeId = employeeId;
      this._employeeName = employeeName;
      this._isNewJob = false;
      this.toggleModal = this.toggleModal.bind(this);
      this.fillInModalFormsWithCurrentVariables = this.fillInModalFormsWithCurrentVariables.bind(this);
    }

    toggleModal() {
      $("#job-modal").modal("toggle");
      $("#assign-roster-toggle").hide();
    }

    setInvoicesSection() {
      if (this._data["invoices"] && this._data["invoices"][0]) {
        $('#invoice-section').show();
        for (let q = 0; q < 3; q++) {
          if (this._data["invoices"][q]) {
            $("#invoice-section-" + q).show();
            const invoiceId = this._data["invoices"][q]["id"];
            $("#invoice-" + q + "-title").text(this._data["invoices"][q]["short_title"]);
            $("#invoice-" + q + "-title").attr("href", "/invoices/" + invoiceId);
            $("#invoice-" + q + "-total").text(formatCurrency(this._data["invoices"][q]["total_price"]));

            if (parseFloat(this._data["invoices"][q]["amount_due"]) > 0) {
              $("#invoice-" + q + "-total").attr("style", "color:red");
            } else {
              $("#invoice-" + q + "-total").attr("style", "color:green");
            }

            $("#invoice-" + q + "-send").attr("onclick", "emailInvoiceToCustomer(" + invoiceId + ")");
            $("#invoice-" + q + "-stripe").attr("href", "/invoices/" + invoiceId + "/pay");
            $("#invoice-" + q + "-mark-as-paid").attr("onclick", "markAsPaid(" + invoiceId + ")");
          } else {
            $("#invoice-section-" + q).hide();
          }
        }
      } else {
        $('#invoice-section').hide();
      }
    }

    setInvoicesCustomerSection() {
      if (this._data["invoices_for_customer"] && this._data["invoices_for_customer"][0]) {
        $('#invoice-section-customer-more-url').attr("href", "/customers/" + this._data["customer_id"]);
        $('#invoice-section-customer').show();
        for (let q = 0; q < 3; q++) {
          if (this._data["invoices_for_customer"][q] && this._data["invoices_for_customer"][q]["job_id"] !== this._jobId) {
            $("#invoice-section-customer-" + q).show();
            const invoiceId = this._data["invoices_for_customer"][q]["id"];
            $("#invoice-customer-" + q + "-title").text(this._data["invoices_for_customer"][q]["short_title"]);
            $("#invoice-customer-" + q + "-title").attr("href", "/invoices/" + invoiceId);
            $("#invoice-customer-" + q + "-total").text(formatCurrency(this._data["invoices_for_customer"][q]["total_price"]));

            if (parseFloat(this._data["invoices_for_customer"][q]["amount_due"]) > 0) {
              $("#invoice-customer-" + q + "-total").attr("style", "color:red");
            } else {
              $("#invoice-customer-" + q + "-total").attr("style", "color:green");
            }

            $("#invoice-customer-" + q + "-send").attr("onclick", "emailInvoiceToCustomer(" + invoiceId + ")");
            $("#invoice-customer-" + q + "-stripe").attr("href", "/invoices/" + invoiceId + "/pay");
            $("#invoice-customer-" + q + "-mark-as-paid").attr("onclick", "markAsPaid(" + invoiceId + ")");
          } else {
            $("#invoice-section-customer-" + q).hide();
          }
        }
      } else {
        $('#invoice-section-customer-more-url').attr("href", "/#");
        $('#invoice-section-customer').hide();
      }
    }

    setInvoicesSectionPublic() {
      this.setInvoicesSection();
    }

    fillInModalFormsWithCurrentVariables(setEmployeeSelect2Option = true) {
      $('#job_id').val(this._jobId);
      $('#job_customer_id').val(this._data["customer_id"]);
      $('#job_location_id').val(this._data["location_id"]);
      $('#job_customer_contact_id').val(this._data["customer_contact_id"]);
      $('#job_job_request_id').val(this._data["request_id"]);

      $('#job_customer_attributes_id').val(this._data["customer_id"]);
      $('#job_customer_attributes_first_name').val(this._data["customer_first_name"]);
      $('#job_customer_attributes_last_name').val(this._data["customer_last_name"]);
      $('#job_customer_attributes_phone').val(formatPhoneNumber(this._data["customer_phone"]));
      $('#job_customer_attributes_email').val(this._data["customer_email"]);

      $('#job_location_attributes_id').val(this._data["location_id"]);
      $('#job_location_attributes_customer_id').val(this._data["customer_id"]);
      $('#job_location_attributes_street_address').val(this._data["street_address"]);
      $('#job_location_attributes_city').val(this._data["city"]);
      $('#job_location_attributes_zip_code').val(this._data["zip_code"]);
      $('#job_location_attributes_state').val(this._data["state"]);
      if (this._data["location"]) {
        $("#job_location_attributes_default_location").prop("checked", this._data["location"]["is_default_location"]);
      }

      if (this._data["owner_id"]) {
        SetSelect2Option('owner_id', this._data["owner_full_name"], this._data["owner_id"]);
      }

      SetSelect2Option('appointment-type-search', this._data["appointment_type_name"], this._data["appointment_type_id"]);

      SetFlatpickr('job_employee_jobs_attributes_0_time_start', this._startDate);
      SetFlatpickr('job_employee_jobs_attributes_0_time_end', this._endDate);
      $("#job_employee_jobs_attributes_0_employee_id").val(this._employeeId);
      $("#job_employee_jobs_attributes_0_id").val(this._employeeJobId);

      $("#job_notes").val(this._data["notes"]);
      $("#job_job_status").val("job_status");

      if (setEmployeeSelect2Option) {
        SetSelect2Option('employees_select', this._employeeName, this._employeeId);
      }
      SetSelect2Option('marketing_source_id', this._data["marketing_source_name"], this._data["marketing_source_id"]);

      $('#job_upload_form').attr("action", "/jobs/" + this._jobId + "/image.json");

      $("#apt-cal-job-number").html("" + this._data["job_title"]);
      $("#form-load-status").val("true");

      if (this._data["color"] !== null) {
        $('#set-appointment-color').css('color', this._data["color"]);
      }

      $("#job_employee_jobs_attributes_0_appointment_color_id").val(this._data["color_id"]);
      this.setInvoicesSection();
      this.setInvoicesCustomerSection();
    }

    evaluateUrlVariablesForTextTemplate(url) {
      let evaluatedUrl = url.replace('%7B%7Bemployee%7D%7D', encodeURIComponent(this._data["employee_first"]));
      evaluatedUrl = evaluatedUrl.replace('%7B%7Bcustomer_first_name%7D%7D', encodeURIComponent(this._data["customer_first_name"]));
      evaluatedUrl = evaluatedUrl.replace('%7B%7Bcontact_first_name%7D%7D', encodeURIComponent(this._data["customer_first_name"]));

      evaluatedUrl = evaluatedUrl.replace('%7B%7Blocation%7D%7D', encodeURIComponent(this._data["display_address"]));

      evaluatedUrl = evaluatedUrl.replace('%7B%7Bstart_time%7D%7D', encodeURIComponent(evaluateStartTimeForTextMessage(this._data["time_start"])));
      evaluatedUrl = evaluatedUrl.replace('%7B%7Breadable_start_time%7D%7D', encodeURIComponent(evaluateReadableStartTimeFromAppointment(this._startDate)));
      evaluatedUrl = evaluatedUrl.replace('%7B%7Bend_time%7D%7D', encodeURIComponent(evaluateEndTimeForTextMessage(this._data["time_end"])));
      evaluatedUrl = evaluatedUrl.replace('%7B%7Bday%7D%7D', encodeURIComponent(evaluateDayForTextMessage(this._data["time_start"])));
      evaluatedUrl = evaluatedUrl.replace('%7B%7Bdate%7D%7D', encodeURIComponent(evaluateDateForTextMessage(this._data["time_start"])));
      return evaluatedUrl;
    }

    clear() {
      $("#job-modal").modal("hide");
      $('#customer-name-search').val(null).trigger('change');
      $('#marketing_sources_id').val(null).trigger('change');
      $('#owner_id').val(null).trigger('change');
      $('#appointment-type-search').val(null).trigger('change');
      $('#employees_select').val(null).empty().trigger('change');
      $(".form-control").val("");
      $('.modal-backdrop').remove();
      $('#invoice-section').hide();
      $('#submitnewjob').off('click');
      $("#submit_button_outer").removeClass("is-loading");
      $('#job_appointment_close').removeClass('is-loading');
      $('#submitnewjob').prop('disabled', false);
      $('.cancel-with-autosave').prop('disabled', false);
    }

    getCurrentJobId() {
      return this._jobId;
    }

    getCurrentCustomerId() {
      return this._data["customer_id"];
    }

    getEmployeeId() {
      return this._employeeId;
    }

    getData() {
      return this._data;
    }
  }

class EmployeeJobTypeSelect {
    constructor(idOfSelectElement, onSelectionCallback) {
        //Setting values for the Job Modal's Contact 'Select2' form
        $(`#${idOfSelectElement}`).val(null).trigger('change'); //Empty out the values in contact select dropdown.

        return new QuerySelect(idOfSelectElement,
            '/employee_job_types.json',
            function (params) { return { q: { status_cont: params.term } } },
            function (data) {
                // Transforms the top-level key of the response object from 'items' to 'results'
                return { results: $.map(data, function (val) { return { "id": val.id, "text": val.name } })}
            },
            onSelectionCallback,
        );
    }
}

class EmailSelect{
    constructor(elementId, url, onSelectCallback){
        new QuerySelect(elementId,
            url,
            null,
            null,
            onSelectCallback,
            {tags:true}
        );
    }
}

class MarketingSourceSelect {
    constructor(idOfSelectElement, onSelectionCallback) {
        $(`#${idOfSelectElement}`).val(null).trigger('change'); //Empty out the values in contact select dropdown.
        return new QuerySelect(idOfSelectElement, `/marketing_sources.json`, null, function (data) { return { results: $.map(data, function (val) { return { "id": val.id, "text": val.name }})}}, onSelectionCallback)
    }
}

/**
* Responsible for setting up the customer search box. Depends on the select2 javascript library.
*/
class CustomerSearchSelect{
    /**
     * @param {Id of the HTML Select} idOfSelectElement
     * @param {Callback function for when a customer is selected} onSelectionCallback
     */
    constructor(idOfSelectElement, onSelectionCallback){
        return new QuerySelect(idOfSelectElement, '/customer_search', function (params) { return { name: params.term }}, function (data) { return { results: $.map(data, function (val) { return { "id": val.id, "text": val.full_name }})}}, onSelectionCallback)
    }
}

class EmployeeSelect { //Used to handle select2 boxes that are searching for Employees.
    constructor(idOfSelectElement, onSelectionCallback, options = null) {
        return new QuerySelect(idOfSelectElement, '/employees.json',
            function(params) {
                return {
                    q: {first_name_or_last_name_cont: params.term}
                }
            },
            function (data) {
                 return {
                     results: $.map(data, function (val) {
                     return { "id": val.id, "text": val.full_name }
                    })
                }
            },
            onSelectionCallback,
            options);
    }
}

function SetSelect2Option(select2Id, text, id){
    $(`#${select2Id}`).append(new Option(text, id, false, false));
    $(`#${select2Id}`).val(id);
    $(`#${select2Id}`).trigger('change');
}

//https://www.thatsoftwaredude.com/content/9025/creating-functions-dynamically-with-javascript

/**
* This is sort of some crazy, meta stuff -- we're dynamically making a function to avoid code reuse.
* @param {*} ransackAttrSearch
*/
function RansackSearch(ransackAttrSearch){
return new Function('params', 'return {q: {' + ransackAttrSearch + ': params.term}}');
}

function SelectResultsTransform(displayAttr){
    return new Function('data',
    `return {results: $.map(data, function (val) {
        return { "id": val.id, "text": val["${displayAttr}"]}
    })}`);
}

function titleizeAttribute(attr){
    if (typeof attr != "string")
        return attr
    return attr.split('_').map(function(val){return val.charAt(0).toUpperCase() + val.slice(1)}).join(' ');
}

class LocationSelect {
    constructor(idOfSelectElement, customerId, onSelectionCallback) {
        //Setting values for the Job Modal's Location 'Select2' form
        $(`#${idOfSelectElement}`).val(null).trigger('change'); //Empty out the values in location select dropdown.
        if (customerId == null){
            $(`#${idOfSelectElement}`).select2({});
        }
        else {
            return new QuerySelect(idOfSelectElement, `/customer_locations/${customerId}`, null, function (data) {return { results: $.map(data, function (val) { return { "id": val.id, "text": val.display_address }})}}, onSelectionCallback);
        }
    }
}

/**
* Used for setting up Select2 boxes that do AJAX searches to fetch data from the server, and then performs the selectonCallBack
* when the user selects one of those options from the server.
*/
class QuerySelect{
    /**
     * Create a QuerySelect for the given element.
     * @param {The id of the select element on the page} elementId
     * @param {The url that will return JSON for the searched object} urlForSearch
     * @param {Transforms the select2 input to the paramaters that the server URL is expecting} searchParamaterCallback
     * @param {Transorms the server's response to the select2's expected format} selectionOptionFormattingCallback
     * @param {Action to be taken after a user has selected one of the options returned from the server} onSelectionCallback
     * @param {Additional options for the select2 element} moreSelect2Options
     */
    constructor(elementId, urlForSearch, searchParamaterCallback, selectionOptionFormattingCallback, onSelectionCallback, moreSelect2Options){

        var defaultSelect2Options = {
            ajax: {
                url: urlForSearch,
                data: searchParamaterCallback,
                processResults: selectionOptionFormattingCallback,
                delay: 500 //https://stackoverflow.com/questions/30805457/how-to-delay-select-2-so-that-it-waits-for-some-time-after-user-types-in-data
            }
        };

var select2Options = Object.assign({}, defaultSelect2Options, moreSelect2Options);

        $(`#${elementId}`).select2(select2Options);
        $(`#${elementId}`).on('change', onSelectionCallback);
    }
}

class CustomerContactSelect {
    constructor(idOfSelectElement, customerId, onSelectionCallback) {
        //Setting values for the Job Modal's Contact 'Select2' form
        $(`#${idOfSelectElement}`).val(null).trigger('change'); //Empty out the values in contact select dropdown.
        if (customerId == null){
            $(`#${idOfSelectElement}`).select2({});
        }
        else {
            return new QuerySelect(idOfSelectElement, `/get_customer_contacts/${customerId}`, null, function (data) { return { results: $.map(data, function (val) { return { "id": val.id, "text": val.full_name }})}}, onSelectionCallback)
        }
    }
}

class PublicMarketingSourceSelect {
    constructor(idOfSelectElement, businessId, onSelectionCallback) {
        $(`#${idOfSelectElement}`).val(null).trigger('change'); //Empty out the values in contact select dropdown.
        return new QuerySelect(idOfSelectElement, `/get_marketing_sources/${businessId}`, null, function (data) { return { results: $.map(data, function (val) { return { "id": val.id, "text": val.name }})}}, onSelectionCallback)
    }
}

$(function() {
    $('#csv-form-field').bind('change', function() {
        var fileName = $(this).val();
        $("#csv-dummy-field").html(fileName);
    });

    $("#csv-dummy-field").bind('click', function() {
        $("#csv-form-field").click();
    });
});

$(document).ready(function(){
    $("#new_customer_form").on("ajax:success", function(event){
        $('#new_customer_form')[0].reset(); //https://www.formget.com/jquery-reset-form/
        $('#new_customer_modal').modal('hide');
        gritterSuccess("Added Customer", "Successfully added the customer");
        //Need to set customer, location, and contact after a new customer has been successfully created.
    });

    $("#new_customer_form").on("ajax:error", function(event){
        // Was having an issue getting the data and everything out when submitting the form this way, found this page:
        // https://stackoverflow.com/questions/43827441/how-to-get-data-from-response-of-event-ajaxerror-in-rails-5-1
        var detail = event.detail;
        var data = detail[0], status = detail[1],  xhr = detail[2];
        for (var key in data) {
            if (data.hasOwnProperty(key)) {
                gritterError(`${key} error`, data[key], 10000);
            }
        }
    });

    new QuerySelect('marketing_source_select',
        '/marketing_sources.json',
        function(params) {return {q: {name_cont: params.term}}},
        function (data) { return { results: $.map(data, function (val) { return { "id": val.id, "text": val.name }})}},
        function (e){
            $('#customer_marketing_source_id').val(e.currentTarget.value);
        }
    );

    $("#closeCustomerModal").bind("click", function(){
        $("#new_customer_modal").modal("hide");
    });
});

$(function(){
    new ContactNewUpdateModalState(
        'new_customer_contact_modal',
        'new_customer_contact_form',
        'submitCustomerContact',
        'customer_contacts',
        'edit_contact_modal',
        'new_contact_modal');

});

$("#closeCustomerContactModal").bind("click", function(){
$("#new_customer_contact_modal").modal("hide");
});

$('.modal').css('overflow-y', 'auto'); //https://stackoverflow.com/a/28077674

function makeOutboundCall(contactId){
$.post({url: `/customer_contacts/${contactId}/call`});
}

function gritterSuccess(title, message, time){
gritterNotification(title, message, getTime(time), "success-notice");
}

function gritterError(title, message, time = null){
gritterNotification(title, message, getTime(time), "error-notice");
}

function gritterNotification(title, message, time, className){
    $.gritter.add({
        title: title,
        text: message,
        sticky:false,
        class_name: className,
        time: time
    });
}

/**
* Displays an error to the user that there was a schedule conflict.
* @param {*} data
*/
function showErrorForCalendar(data) {
showError("Couldn't add/update appointment", data);
calendar.refetchEvents();
}

/**
* Displays all the errors from a responseJSON
*/
function showError(title, data){
    for (var key in data.responseJSON) {
        gritterError(title, data.responseJSON[key], "10000");
    }
}

/**
* Used to set the default time to '2500' if the user doesn't provide time to gritterSuccess or gritterNotification
* @param {*} setTime if null returns '2500', else returns the not null value
*/
function getTime(setTime){
    if (setTime == null)
        return '2500';
    else return setTime;
}

$(function(){
    new LocationModalState('new_location_modal',
    'new_location_form',
    'submitLocation',
    'locations',
    'edit_location_modal',
    'new_location_button');
});

$("#closeLocationModal").bind("click", function(){
$("#new_location_modal").modal("hide");
});

$('.modal').css('overflow-y', 'auto'); //https://stackoverflow.com/a/28077674

// Action Cable provides the framework to deal with WebSockets in Rails.
// You can generate new channels where WebSocket features live using the `rails generate channel` command.
//
//= require action_cable
//= require_self
//= require_tree ./channels

(function() {
this.App || (this.App = {});

App.cable = ActionCable.createConsumer();

}).call(this);

$(document).ready(function(){
    $("#new_employee_job").on("ajax:success", function(event){
        gritterSuccess("Added Appointment", "Successfully set the appointment");
        clearAppointmentModalForm();
    });

    $("#new_employee_job").on("ajax:error", function(event){
        // Was having an issue getting the data and everything out when submitting the form this way, found this page:
        // https://stackoverflow.com/questions/43827441/how-to-get-data-from-response-of-event-ajaxerror-in-rails-5-1
        var detail = event.detail;
        var data = detail[0], status = detail[1],  xhr = detail[2];
        $(data).each((function(index){
            gritterError(`Appointment Error ${index}`, this, 10000)
        }));
    });
});

function clearAppointmentModalForm(){
    $('#new_job_appointment_modal').modal('hide');
    $('#new_employee_job')[0].reset(); //https://www.formget.com/jquery-reset-form/
    $('#employee_select').val(null).trigger('change'); //Clear select2 forms
    $('#appointment_type').val(null).trigger('change');
}

# Place all the behaviors and hooks related to the matching controller here.
# All this logic will automatically be available in application.js.
# You can use CoffeeScript in this file: http://coffeescript.org/

$(document).ready(function () {
var locationSelect = new LocationSelect("customer-location-search", null, function (e) { $('#job_location_id').val(e.currentTarget.value)});
var contactSelect = new CustomerContactSelect("customer-contact-search", null, function (e) { $('#job_customer_contact_id').val(e.currentTarget.value)});

          if (data["default_location"]){
            $("#job_location_id").val(data["default_location"]["id"])
            $('#job_location_attributes_id').val(data["default_location"]["id"])
            $('#job_location_attributes_customer_id').val(data["id"])
            $('#job_location_attributes_street_address').val(data["default_location"]["street_address"])
            $('#job_location_attributes_city').val(data["default_location"]["city"])
            $('#job_location_attributes_zip_code').val(data["default_location"]["zip_code"])
            $('#job_location_attributes_state').val(data["default_location"]["state"])
          }

if (data["marketing_source"] != "Unknown")
SetSelect2Option('marketing_source_id', data["marketing_source_name"], data["marketing_source_id"]);

          if (typeof(FCTool) != "undefined"){
            //After a search is complete, set the job link menu.
            FCTool.setLocationMenu(data); //set the locations to choose from
            // FCTool.setJobLinkMenu(data["id"]); //this is triggering when searching for a customer on a new job...
          }
        },
        error: function(data){
          console.log(`Couldn't fetch /customers/${selectedCustomerId}.json`);
        }});
    });

  new MarketingSourceSelect("marketing_source_id", function(evt){
    $("#job_customer_attributes_marketing_source_id").val(evt.currentTarget.value);
  });

  //Setup the Owner ID Select Box
  var employeeSelect = new EmployeeSelect("owner_id", function(e){
    $('#job_owner_id').val(e.currentTarget.value);
  });

  new EmployeeJobTypeSelect("appointment-type-search", function (evt){
    $('#job_employee_jobs_attributes_0_employee_job_type_id').val(evt.currentTarget.value);
  });

  new MarketingSourceSelect("marketing_source_id", function(evt){
    $("#job_customer_attributes_marketing_source_id").val(evt.currentTarget.value);
    InlineEditCallback('customers', modalAppointmentContext.getCurrentCustomerId(), 'marketing_source_id', 'marketing_source');
  });

  const flatpickrOptions = {
    enableTime: true,
    altInput: true,
    altFormat: 'l F j, h:i K',
    minTime: "6:00",
    maxTime: "22:00",
    minuteIncrement: 15,
    onChange: function(selectedDates, dateStr, instance){
      // if end date is before start date, abort.
      let employeeJobId = $('#job_employee_jobs_attributes_0_id').val();
      let weAreEditingExistingAppointment = !(isBlank(employeeJobId)) //if employee job id is blank, then we're not editing an existing appointment
      if (weAreEditingExistingAppointment){
        InlineEditCallback('employee_jobs', $('#job_employee_jobs_attributes_0_id').val(), 'time_end', null, $('#job_employee_jobs_attributes_0_time_end').val());
      }
    }
  }

# Place all the behaviors and hooks related to the matching controller here.
# All this logic will automatically be available in application.js.
# You can use CoffeeScript in this file: http://coffeescript.org/

/*!
FullCalendar Google Calendar Plugin v4.3.0
Docs & License: https://fullcalendar.io/
(c) 2019 Adam Shaw
*/

import { createPlugin, refineProps, requestJson, addDays } from '@fullcalendar/core';

/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0

THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.

See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */

// TODO: expose somehow
var API_BASE = 'https://www.googleapis.com/calendar/v3/calendars';
var STANDARD_PROPS = {
    url: String,
    googleCalendarApiKey: String,
    googleCalendarId: String,
    data: null
};
var eventSourceDef = {
    parseMeta: function (raw) {
        if (typeof raw === 'string') {
            raw = { url: raw };
        }
        if (typeof raw === 'object') {
            var standardProps = refineProps(raw, STANDARD_PROPS);
            if (!standardProps.googleCalendarId && standardProps.url) {
                standardProps.googleCalendarId = parseGoogleCalendarId(standardProps.url);
            }
            delete standardProps.url;
            if (standardProps.googleCalendarId) {
                return standardProps;
            }
        }
        return null;
    },
    fetch: function (arg, onSuccess, onFailure) {
        var calendar = arg.calendar;
        var meta = arg.eventSource.meta;
        var apiKey = meta.googleCalendarApiKey || calendar.opt('googleCalendarApiKey');
        if (!apiKey) {
            onFailure({
                message: 'Specify a googleCalendarApiKey. See http://fullcalendar.io/docs/google_calendar/'
            });
        }
        else {
            var url = buildUrl(meta);
            var requestParams_1 = buildRequestParams(arg.range, apiKey, meta.data, calendar.dateEnv);
            requestJson('GET', url, requestParams_1, function (body, xhr) {
                if (body.error) {
                    onFailure({
                        message: 'Google Calendar API: ' + body.error.message,
                        errors: body.error.errors,
                        xhr: xhr
                    });
                }
                else {
                    onSuccess({
                        rawEvents: gcalItemsToRawEventDefs(body.items, requestParams_1.timeZone),
                        xhr: xhr
                    });
                }
            }, function (message, xhr) {
                onFailure({ message: message, xhr: xhr });
            });
        }
    }
};
function parseGoogleCalendarId(url) {
    var match;
    // detect if the ID was specified as a single string.
    // will match calendars like "asdf1234@calendar.google.com" in addition to person email calendars.
    if (/^[^\/]+@([^\/\.]+\.)*(google|googlemail|gmail)\.com$/.test(url)) {
        return url;
    }
    else if ((match = /^https:\/\/www.googleapis.com\/calendar\/v3\/calendars\/([^\/]*)/.exec(url)) ||
        (match = /^https?:\/\/www.google.com\/calendar\/feeds\/([^\/]*)/.exec(url))) {
        return decodeURIComponent(match[1]);
    }
}
function buildUrl(meta) {
    return API_BASE + '/' + encodeURIComponent(meta.googleCalendarId) + '/events';
}
function buildRequestParams(range, apiKey, extraParams, dateEnv) {
    var params;
    var startStr;
    var endStr;
    if (dateEnv.canComputeOffset) {
        // strings will naturally have offsets, which GCal needs
        startStr = dateEnv.formatIso(range.start);
        endStr = dateEnv.formatIso(range.end);
    }
    else {
        // when timezone isn't known, we don't know what the UTC offset should be, so ask for +/- 1 day
        // from the UTC day-start to guarantee we're getting all the events
        // (start/end will be UTC-coerced dates, so toISOString is okay)
        startStr = addDays(range.start, -1).toISOString();
        endStr = addDays(range.end, 1).toISOString();
    }
    params = __assign({}, (extraParams || {}), { key: apiKey, timeMin: startStr, timeMax: endStr, singleEvents: true, maxResults: 9999 });
    if (dateEnv.timeZone !== 'local') {
        params.timeZone = dateEnv.timeZone;
    }
    return params;
}
function gcalItemsToRawEventDefs(items, gcalTimezone) {
    return items.map(function (item) {
        return gcalItemToRawEventDef(item, gcalTimezone);
    });
}
function gcalItemToRawEventDef(item, gcalTimezone) {
    var url = item.htmlLink || null;
    // make the URLs for each event show times in the correct timezone
    if (url && gcalTimezone) {
        url = injectQsComponent(url, 'ctz=' + gcalTimezone);
    }
    return {
        id: item.id,
        title: item.summary,
        start: item.start.dateTime || item.start.date,
        end: item.end.dateTime || item.end.date,
        url: url,
        location: item.location,
        description: item.description
    };
}
// Injects a string like "arg=value" into the querystring of a URL
// TODO: move to a general util file?
function injectQsComponent(url, component) {
    // inject it after the querystring but before the fragment
    return url.replace(/(\?.*?)?(#|$)/, function (whole, qs, hash) {
        return (qs ? qs + '&' : '?') + component + hash;
    });
}
var main = createPlugin({
    eventSourceDefs: [eventSourceDef]
});

export default main;

/*!
FullCalendar Google Calendar Plugin v4.3.0
Docs & License: https://fullcalendar.io/
(c) 2019 Adam Shaw
*/

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@fullcalendar/core')) :
    typeof define === 'function' && define.amd ? define(['exports', '@fullcalendar/core'], factory) :
    (global = global || self, factory(global.FullCalendarGoogleCalendar = {}, global.FullCalendar));
}(this, function (exports, core) { 'use strict';

    /*! *****************************************************************************
    Copyright (c) Microsoft Corporation. All rights reserved.
    Licensed under the Apache License, Version 2.0 (the "License"); you may not use
    this file except in compliance with the License. You may obtain a copy of the
    License at http://www.apache.org/licenses/LICENSE-2.0

    THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
    KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
    WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
    MERCHANTABLITY OR NON-INFRINGEMENT.

    See the Apache Version 2.0 License for specific language governing permissions
    and limitations under the License.
    ***************************************************************************** */

    // TODO: expose somehow
    var API_BASE = 'https://www.googleapis.com/calendar/v3/calendars';
    var STANDARD_PROPS = {
        url: String,
        googleCalendarApiKey: String,
        googleCalendarId: String,
        data: null
    };
    var eventSourceDef = {
        parseMeta: function (raw) {
            if (typeof raw === 'string') {
                raw = { url: raw };
            }
            if (typeof raw === 'object') {
                var standardProps = core.refineProps(raw, STANDARD_PROPS);
                if (!standardProps.googleCalendarId && standardProps.url) {
                    standardProps.googleCalendarId = parseGoogleCalendarId(standardProps.url);
                }
                delete standardProps.url;
                if (standardProps.googleCalendarId) {
                    return standardProps;
                }
            }
            return null;
        },
        fetch: function (arg, onSuccess, onFailure) {
            var calendar = arg.calendar;
            var meta = arg.eventSource.meta;
            var apiKey = meta.googleCalendarApiKey || calendar.opt('googleCalendarApiKey');
            if (!apiKey) {
                onFailure({
                    message: 'Specify a googleCalendarApiKey. See http://fullcalendar.io/docs/google_calendar/'
                });
            }
            else {
                var url = buildUrl(meta);
                var requestParams_1 = buildRequestParams(arg.range, apiKey, meta.data, calendar.dateEnv);
                core.requestJson('GET', url, requestParams_1, function (body, xhr) {
                    if (body.error) {
                        onFailure({
                            message: 'Google Calendar API: ' + body.error.message,
                            errors: body.error.errors,
                            xhr: xhr
                        });
                    }
                    else {
                        onSuccess({
                            rawEvents: gcalItemsToRawEventDefs(body.items, requestParams_1.timeZone),
                            xhr: xhr
                        });
                    }
                }, function (message, xhr) {
                    onFailure({ message: message, xhr: xhr });
                });
            }
        }
    };
    function parseGoogleCalendarId(url) {
        var match;
        // detect if the ID was specified as a single string.
        // will match calendars like "asdf1234@calendar.google.com" in addition to person email calendars.
        if (/^[^\/]+@([^\/\.]+\.)*(google|googlemail|gmail)\.com$/.test(url)) {
            return url;
        }
        else if ((match = /^https:\/\/www.googleapis.com\/calendar\/v3\/calendars\/([^\/]*)/.exec(url)) ||
            (match = /^https?:\/\/www.google.com\/calendar\/feeds\/([^\/]*)/.exec(url))) {
            return decodeURIComponent(match[1]);
        }
    }
    function buildUrl(meta) {
        return API_BASE + '/' + encodeURIComponent(meta.googleCalendarId) + '/events';
    }
    function buildRequestParams(range, apiKey, extraParams, dateEnv) {
        var params;
        var startStr;
        var endStr;
        if (dateEnv.canComputeOffset) {
            // strings will naturally have offsets, which GCal needs
            startStr = dateEnv.formatIso(range.start);
            endStr = dateEnv.formatIso(range.end);
        }
        else {
            // when timezone isn't known, we don't know what the UTC offset should be, so ask for +/- 1 day
            // from the UTC day-start to guarantee we're getting all the events
            // (start/end will be UTC-coerced dates, so toISOString is okay)
            startStr = core.addDays(range.start, -1).toISOString();
            endStr = core.addDays(range.end, 1).toISOString();
        }
        params = __assign({}, (extraParams || {}), { key: apiKey, timeMin: startStr, timeMax: endStr, singleEvents: true, maxResults: 9999 });
        if (dateEnv.timeZone !== 'local') {
            params.timeZone = dateEnv.timeZone;
        }
        return params;
    }
    function gcalItemsToRawEventDefs(items, gcalTimezone) {
        return items.map(function (item) {
            return gcalItemToRawEventDef(item, gcalTimezone);
        });
    }
    function gcalItemToRawEventDef(item, gcalTimezone) {
        var url = item.htmlLink || null;
        // make the URLs for each event show times in the correct timezone
        if (url && gcalTimezone) {
            url = injectQsComponent(url, 'ctz=' + gcalTimezone);
        }
        return {
            id: item.id,
            title: item.summary,
            start: item.start.dateTime || item.start.date,
            end: item.end.dateTime || item.end.date,
            url: url,
            location: item.location,
            description: item.description
        };
    }
    // Injects a string like "arg=value" into the querystring of a URL
    // TODO: move to a general util file?
    function injectQsComponent(url, component) {
        // inject it after the querystring but before the fragment
        return url.replace(/(\?.*?)?(#|$)/, function (whole, qs, hash) {
            return (qs ? qs + '&' : '?') + component + hash;
        });
    }
    var main = core.createPlugin({
        eventSourceDefs: [eventSourceDef]
    });

exports.default = main;

Object.defineProperty(exports, '__esModule', { value: true });

}));

// Generated by dts-bundle v0.7.3-fork.1
// Dependencies for this module:
// main.d.ts

declare module '@fullcalendar/google-calendar' {
    module '@fullcalendar/core' {
        interface OptionsInput {
            googleCalendarApiKey?: string;
        }
    }
    module '@fullcalendar/core/structs/event-source' {
        interface ExtendedEventSourceInput {
            googleCalendarApiKey?: string;
            googleCalendarId?: string;
        }
    }
    const _default: import("@fullcalendar/core").PluginDef;
    export default _default;
}

/*!
FullCalendar Google Calendar Plugin v4.3.0
Docs & License: https://fullcalendar.io/
(c) 2019 Adam Shaw
*/
!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("@fullcalendar/core")):"function"==typeof define&&define.amd?define(["exports","@fullcalendar/core"],r):r((e=e||self).FullCalendarGoogleCalendar={},e.FullCalendar)}(this,function(e,r){"use strict";var t=function(){return(t=Object.assign||function(e){for(var r,t=1,n=arguments.length;t

/*!
FullCalendar RRule Plugin v4.3.0
Docs & License: https://fullcalendar.io/
(c) 2019 Adam Shaw
*/

import { rrulestr, RRule } from 'rrule';
import { createPlugin, refineProps, createDuration } from '@fullcalendar/core';

/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0

THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.

See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */

export default main;

/*!
FullCalendar RRule Plugin v4.3.0
Docs & License: https://fullcalendar.io/
(c) 2019 Adam Shaw
*/

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('rrule'), require('@fullcalendar/core')) :
    typeof define === 'function' && define.amd ? define(['exports', 'rrule', '@fullcalendar/core'], factory) :
    (global = global || self, factory(global.FullCalendarRrule = {}, global.rrule, global.FullCalendar));
}(this, function (exports, rrule, core) { 'use strict';

    /*! *****************************************************************************
    Copyright (c) Microsoft Corporation. All rights reserved.
    Licensed under the Apache License, Version 2.0 (the "License"); you may not use
    this file except in compliance with the License. You may obtain a copy of the
    License at http://www.apache.org/licenses/LICENSE-2.0

    THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
    KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
    WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
    MERCHANTABLITY OR NON-INFRINGEMENT.

    See the Apache Version 2.0 License for specific language governing permissions
    and limitations under the License.
    ***************************************************************************** */

exports.default = main;

Object.defineProperty(exports, '__esModule', { value: true });

}));

// Generated by dts-bundle v0.7.3-fork.1
// Dependencies for this module:
// ../../../../../@fullcalendar/core

declare module '@fullcalendar/rrule' {
const _default: import("@fullcalendar/core").PluginDef;
export default _default;
}

/*!
FullCalendar RRule Plugin v4.3.0
Docs & License: https://fullcalendar.io/
(c) 2019 Adam Shaw
*/
!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("rrule"),require("@fullcalendar/core")):"function"==typeof define&&define.amd?define(["exports","rrule","@fullcalendar/core"],r):r((e=e||self).FullCalendarRrule={},e.rrule,e.FullCalendar)}(this,function(e,r,t){"use strict";var n=function(){return(n=Object.assign||function(e){for(var r,t=1,n=arguments.length;t

/*!
FullCalendar Interaction Plugin v4.3.0
Docs & License: https://fullcalendar.io/
(c) 2019 Adam Shaw
*/

import { config, elementClosest, EmitterMixin, applyStyle, whenTransitionDone, removeElement, ScrollController, ElementScrollController, computeInnerRect, WindowScrollController, preventSelection, preventContextMenu, allowSelection, allowContextMenu, ElementDragging, computeRect, getClippingParents, pointInsideRect, isDateSpansEqual, constrainPoint, intersectRects, getRectCenter, diffPoints, mapHash, rangeContainsRange, interactionSettingsToStore, Interaction, enableCursor, disableCursor, compareNumbers, getElSeg, getRelevantEvents, EventApi, createEmptyEventStore, applyMutationToEventStore, interactionSettingsStore, startOfDay, diffDates, createDuration, eventTupleToStore, isInteractionValid, parseDragMeta, elementMatches, parseEventDef, createEventInstance, globalDefaults, createPlugin } from '@fullcalendar/core';

/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0

THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.

See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
/* global Reflect, Promise */

function __extends(d, b) {
    extendStatics(d, b);
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}

config.touchMouseIgnoreWait = 500;
var ignoreMouseDepth = 0;
var listenerCnt = 0;
var isWindowTouchMoveCancelled = false;
/*
Uses a "pointer" abstraction, which monitors UI events for both mouse and touch.
Tracks when the pointer "drags" on a certain element, meaning down+move+up.

Also, tracks if there was touch-scrolling.
Also, can prevent touch-scrolling from happening.
Also, can fire pointermove events when scrolling happens underneath, even when no real pointer movement.

emits:
- pointerdown
- pointermove
- pointerup
*/
var PointerDragging = /** @class */ (function () {
    function PointerDragging(containerEl) {
        var _this = this;
        this.subjectEl = null;
        this.downEl = null;
        // options that can be directly assigned by caller
        this.selector = ''; // will cause subjectEl in all emitted events to be this element
        this.handleSelector = '';
        this.shouldIgnoreMove = false;
        this.shouldWatchScroll = true; // for simulating pointermove on scroll
        // internal states
        this.isDragging = false;
        this.isTouchDragging = false;
        this.wasTouchScroll = false;
        // Mouse
        // ----------------------------------------------------------------------------------------------------
        this.handleMouseDown = function (ev) {
            if (!_this.shouldIgnoreMouse() &&
                isPrimaryMouseButton(ev) &&
                _this.tryStart(ev)) {
                var pev = _this.createEventFromMouse(ev, true);
                _this.emitter.trigger('pointerdown', pev);
                _this.initScrollWatch(pev);
                if (!_this.shouldIgnoreMove) {
                    document.addEventListener('mousemove', _this.handleMouseMove);
                }
                document.addEventListener('mouseup', _this.handleMouseUp);
            }
        };
        this.handleMouseMove = function (ev) {
            var pev = _this.createEventFromMouse(ev);
            _this.recordCoords(pev);
            _this.emitter.trigger('pointermove', pev);
        };
        this.handleMouseUp = function (ev) {
            document.removeEventListener('mousemove', _this.handleMouseMove);
            document.removeEventListener('mouseup', _this.handleMouseUp);
            _this.emitter.trigger('pointerup', _this.createEventFromMouse(ev));
            _this.cleanup(); // call last so that pointerup has access to props
        };
        // Touch
        // ----------------------------------------------------------------------------------------------------
        this.handleTouchStart = function (ev) {
            if (_this.tryStart(ev)) {
                _this.isTouchDragging = true;
                var pev = _this.createEventFromTouch(ev, true);
                _this.emitter.trigger('pointerdown', pev);
                _this.initScrollWatch(pev);
                // unlike mouse, need to attach to target, not document
                // https://stackoverflow.com/a/45760014
                var target = ev.target;
                if (!_this.shouldIgnoreMove) {
                    target.addEventListener('touchmove', _this.handleTouchMove);
                }
                target.addEventListener('touchend', _this.handleTouchEnd);
                target.addEventListener('touchcancel', _this.handleTouchEnd); // treat it as a touch end
                // attach a handler to get called when ANY scroll action happens on the page.
                // this was impossible to do with normal on/off because 'scroll' doesn't bubble.
                // http://stackoverflow.com/a/32954565/96342
                window.addEventListener('scroll', _this.handleTouchScroll, true // useCapture
                );
            }
        };
        this.handleTouchMove = function (ev) {
            var pev = _this.createEventFromTouch(ev);
            _this.recordCoords(pev);
            _this.emitter.trigger('pointermove', pev);
        };
        this.handleTouchEnd = function (ev) {
            if (_this.isDragging) { // done to guard against touchend followed by touchcancel
                var target = ev.target;
                target.removeEventListener('touchmove', _this.handleTouchMove);
                target.removeEventListener('touchend', _this.handleTouchEnd);
                target.removeEventListener('touchcancel', _this.handleTouchEnd);
                window.removeEventListener('scroll', _this.handleTouchScroll, true); // useCaptured=true
                _this.emitter.trigger('pointerup', _this.createEventFromTouch(ev));
                _this.cleanup(); // call last so that pointerup has access to props
                _this.isTouchDragging = false;
                startIgnoringMouse();
            }
        };
        this.handleTouchScroll = function () {
            _this.wasTouchScroll = true;
        };
        this.handleScroll = function (ev) {
            if (!_this.shouldIgnoreMove) {
                var pageX = (window.pageXOffset - _this.prevScrollX) + _this.prevPageX;
                var pageY = (window.pageYOffset - _this.prevScrollY) + _this.prevPageY;
                _this.emitter.trigger('pointermove', {
                    origEvent: ev,
                    isTouch: _this.isTouchDragging,
                    subjectEl: _this.subjectEl,
                    pageX: pageX,
                    pageY: pageY,
                    deltaX: pageX - _this.origPageX,
                    deltaY: pageY - _this.origPageY
                });
            }
        };
        this.containerEl = containerEl;
        this.emitter = new EmitterMixin();
        containerEl.addEventListener('mousedown', this.handleMouseDown);
        containerEl.addEventListener('touchstart', this.handleTouchStart, { passive: true });
        listenerCreated();
    }
    PointerDragging.prototype.destroy = function () {
        this.containerEl.removeEventListener('mousedown', this.handleMouseDown);
        this.containerEl.removeEventListener('touchstart', this.handleTouchStart, { passive: true });
        listenerDestroyed();
    };
    PointerDragging.prototype.tryStart = function (ev) {
        var subjectEl = this.querySubjectEl(ev);
        var downEl = ev.target;
        if (subjectEl &&
            (!this.handleSelector || elementClosest(downEl, this.handleSelector))) {
            this.subjectEl = subjectEl;
            this.downEl = downEl;
            this.isDragging = true; // do this first so cancelTouchScroll will work
            this.wasTouchScroll = false;
            return true;
        }
        return false;
    };
    PointerDragging.prototype.cleanup = function () {
        isWindowTouchMoveCancelled = false;
        this.isDragging = false;
        this.subjectEl = null;
        this.downEl = null;
        // keep wasTouchScroll around for later access
        this.destroyScrollWatch();
    };
    PointerDragging.prototype.querySubjectEl = function (ev) {
        if (this.selector) {
            return elementClosest(ev.target, this.selector);
        }
        else {
            return this.containerEl;
        }
    };
    PointerDragging.prototype.shouldIgnoreMouse = function () {
        return ignoreMouseDepth || this.isTouchDragging;
    };
    // can be called by user of this class, to cancel touch-based scrolling for the current drag
    PointerDragging.prototype.cancelTouchScroll = function () {
        if (this.isDragging) {
            isWindowTouchMoveCancelled = true;
        }
    };
    // Scrolling that simulates pointermoves
    // ----------------------------------------------------------------------------------------------------
    PointerDragging.prototype.initScrollWatch = function (ev) {
        if (this.shouldWatchScroll) {
            this.recordCoords(ev);
            window.addEventListener('scroll', this.handleScroll, true); // useCapture=true
        }
    };
    PointerDragging.prototype.recordCoords = function (ev) {
        if (this.shouldWatchScroll) {
            this.prevPageX = ev.pageX;
            this.prevPageY = ev.pageY;
            this.prevScrollX = window.pageXOffset;
            this.prevScrollY = window.pageYOffset;
        }
    };
    PointerDragging.prototype.destroyScrollWatch = function () {
        if (this.shouldWatchScroll) {
            window.removeEventListener('scroll', this.handleScroll, true); // useCaptured=true
        }
    };
    // Event Normalization
    // ----------------------------------------------------------------------------------------------------
    PointerDragging.prototype.createEventFromMouse = function (ev, isFirst) {
        var deltaX = 0;
        var deltaY = 0;
        // TODO: repeat code
        if (isFirst) {
            this.origPageX = ev.pageX;
            this.origPageY = ev.pageY;
        }
        else {
            deltaX = ev.pageX - this.origPageX;
            deltaY = ev.pageY - this.origPageY;
        }
        return {
            origEvent: ev,
            isTouch: false,
            subjectEl: this.subjectEl,
            pageX: ev.pageX,
            pageY: ev.pageY,
            deltaX: deltaX,
            deltaY: deltaY
        };
    };
    PointerDragging.prototype.createEventFromTouch = function (ev, isFirst) {
        var touches = ev.touches;
        var pageX;
        var pageY;
        var deltaX = 0;
        var deltaY = 0;
        // if touch coords available, prefer,
        // because FF would give bad ev.pageX ev.pageY
        if (touches && touches.length) {
            pageX = touches[0].pageX;
            pageY = touches[0].pageY;
        }
        else {
            pageX = ev.pageX;
            pageY = ev.pageY;
        }
        // TODO: repeat code
        if (isFirst) {
            this.origPageX = pageX;
            this.origPageY = pageY;
        }
        else {
            deltaX = pageX - this.origPageX;
            deltaY = pageY - this.origPageY;
        }
        return {
            origEvent: ev,
            isTouch: true,
            subjectEl: this.subjectEl,
            pageX: pageX,
            pageY: pageY,
            deltaX: deltaX,
            deltaY: deltaY
        };
    };
    return PointerDragging;
}());
// Returns a boolean whether this was a left mouse click and no ctrl key (which means right click on Mac)
function isPrimaryMouseButton(ev) {
    return ev.button === 0 && !ev.ctrlKey;
}
// Ignoring fake mouse events generated by touch
// ----------------------------------------------------------------------------------------------------
function startIgnoringMouse() {
    ignoreMouseDepth++;
    setTimeout(function () {
        ignoreMouseDepth--;
    }, config.touchMouseIgnoreWait);
}
// We want to attach touchmove as early as possible for Safari
// ----------------------------------------------------------------------------------------------------
function listenerCreated() {
    if (!(listenerCnt++)) {
        window.addEventListener('touchmove', onWindowTouchMove, { passive: false });
    }
}
function listenerDestroyed() {
    if (!(--listenerCnt)) {
        window.removeEventListener('touchmove', onWindowTouchMove, { passive: false });
    }
}
function onWindowTouchMove(ev) {
    if (isWindowTouchMoveCancelled) {
        ev.preventDefault();
    }
}

/*
An effect in which an element follows the movement of a pointer across the screen.
The moving element is a clone of some other element.
Must call start + handleMove + stop.
*/
var ElementMirror = /** @class */ (function () {
    function ElementMirror() {
        this.isVisible = false; // must be explicitly enabled
        this.sourceEl = null;
        this.mirrorEl = null;
        this.sourceElRect = null; // screen coords relative to viewport
        // options that can be set directly by caller
        this.parentNode = document.body;
        this.zIndex = 9999;
        this.revertDuration = 0;
    }
    ElementMirror.prototype.start = function (sourceEl, pageX, pageY) {
        this.sourceEl = sourceEl;
        this.sourceElRect = this.sourceEl.getBoundingClientRect();
        this.origScreenX = pageX - window.pageXOffset;
        this.origScreenY = pageY - window.pageYOffset;
        this.deltaX = 0;
        this.deltaY = 0;
        this.updateElPosition();
    };
    ElementMirror.prototype.handleMove = function (pageX, pageY) {
        this.deltaX = (pageX - window.pageXOffset) - this.origScreenX;
        this.deltaY = (pageY - window.pageYOffset) - this.origScreenY;
        this.updateElPosition();
    };
    // can be called before start
    ElementMirror.prototype.setIsVisible = function (bool) {
        if (bool) {
            if (!this.isVisible) {
                if (this.mirrorEl) {
                    this.mirrorEl.style.display = '';
                }
                this.isVisible = bool; // needs to happen before updateElPosition
                this.updateElPosition(); // because was not updating the position while invisible
            }
        }
        else {
            if (this.isVisible) {
                if (this.mirrorEl) {
                    this.mirrorEl.style.display = 'none';
                }
                this.isVisible = bool;
            }
        }
    };
    // always async
    ElementMirror.prototype.stop = function (needsRevertAnimation, callback) {
        var _this = this;
        var done = function () {
            _this.cleanup();
            callback();
        };
        if (needsRevertAnimation &&
            this.mirrorEl &&
            this.isVisible &&
            this.revertDuration && // if 0, transition won't work
            (this.deltaX || this.deltaY) // if same coords, transition won't work
        ) {
            this.doRevertAnimation(done, this.revertDuration);
        }
        else {
            setTimeout(done, 0);
        }
    };
    ElementMirror.prototype.doRevertAnimation = function (callback, revertDuration) {
        var mirrorEl = this.mirrorEl;
        var finalSourceElRect = this.sourceEl.getBoundingClientRect(); // because autoscrolling might have happened
        mirrorEl.style.transition =
            'top ' + revertDuration + 'ms,' +
                'left ' + revertDuration + 'ms';
        applyStyle(mirrorEl, {
            left: finalSourceElRect.left,
            top: finalSourceElRect.top
        });
        whenTransitionDone(mirrorEl, function () {
            mirrorEl.style.transition = '';
            callback();
        });
    };
    ElementMirror.prototype.cleanup = function () {
        if (this.mirrorEl) {
            removeElement(this.mirrorEl);
            this.mirrorEl = null;
        }
        this.sourceEl = null;
    };
    ElementMirror.prototype.updateElPosition = function () {
        if (this.sourceEl && this.isVisible) {
            applyStyle(this.getMirrorEl(), {
                left: this.sourceElRect.left + this.deltaX,
                top: this.sourceElRect.top + this.deltaY
            });
        }
    };
    ElementMirror.prototype.getMirrorEl = function () {
        var sourceElRect = this.sourceElRect;
        var mirrorEl = this.mirrorEl;
        if (!mirrorEl) {
            mirrorEl = this.mirrorEl = this.sourceEl.cloneNode(true); // cloneChildren=true
            // we don't want long taps or any mouse interaction causing selection/menus.
            // would use preventSelection(), but that prevents selectstart, causing problems.
            mirrorEl.classList.add('fc-unselectable');
            mirrorEl.classList.add('fc-dragging');
            applyStyle(mirrorEl, {
                position: 'fixed',
                zIndex: this.zIndex,
                visibility: '',
                boxSizing: 'border-box',
                width: sourceElRect.right - sourceElRect.left,
                height: sourceElRect.bottom - sourceElRect.top,
                right: 'auto',
                bottom: 'auto',
                margin: 0
            });
            this.parentNode.appendChild(mirrorEl);
        }
        return mirrorEl;
    };
    return ElementMirror;
}());

/*
Is a cache for a given element's scroll information (all the info that ScrollController stores)
in addition the "client rectangle" of the element.. the area within the scrollbars.

The cache can be in one of two modes:
- doesListening:false - ignores when the container is scrolled by someone else
- doesListening:true - watch for scrolling and update the cache
*/
var ScrollGeomCache = /** @class */ (function (_super) {
    __extends(ScrollGeomCache, _super);
    function ScrollGeomCache(scrollController, doesListening) {
        var _this = _super.call(this) || this;
        _this.handleScroll = function () {
            _this.scrollTop = _this.scrollController.getScrollTop();
            _this.scrollLeft = _this.scrollController.getScrollLeft();
            _this.handleScrollChange();
        };
        _this.scrollController = scrollController;
        _this.doesListening = doesListening;
        _this.scrollTop = _this.origScrollTop = scrollController.getScrollTop();
        _this.scrollLeft = _this.origScrollLeft = scrollController.getScrollLeft();
        _this.scrollWidth = scrollController.getScrollWidth();
        _this.scrollHeight = scrollController.getScrollHeight();
        _this.clientWidth = scrollController.getClientWidth();
        _this.clientHeight = scrollController.getClientHeight();
        _this.clientRect = _this.computeClientRect(); // do last in case it needs cached values
        if (_this.doesListening) {
            _this.getEventTarget().addEventListener('scroll', _this.handleScroll);
        }
        return _this;
    }
    ScrollGeomCache.prototype.destroy = function () {
        if (this.doesListening) {
            this.getEventTarget().removeEventListener('scroll', this.handleScroll);
        }
    };
    ScrollGeomCache.prototype.getScrollTop = function () {
        return this.scrollTop;
    };
    ScrollGeomCache.prototype.getScrollLeft = function () {
        return this.scrollLeft;
    };
    ScrollGeomCache.prototype.setScrollTop = function (top) {
        this.scrollController.setScrollTop(top);
        if (!this.doesListening) {
            // we are not relying on the element to normalize out-of-bounds scroll values
            // so we need to sanitize ourselves
            this.scrollTop = Math.max(Math.min(top, this.getMaxScrollTop()), 0);
            this.handleScrollChange();
        }
    };
    ScrollGeomCache.prototype.setScrollLeft = function (top) {
        this.scrollController.setScrollLeft(top);
        if (!this.doesListening) {
            // we are not relying on the element to normalize out-of-bounds scroll values
            // so we need to sanitize ourselves
            this.scrollLeft = Math.max(Math.min(top, this.getMaxScrollLeft()), 0);
            this.handleScrollChange();
        }
    };
    ScrollGeomCache.prototype.getClientWidth = function () {
        return this.clientWidth;
    };
    ScrollGeomCache.prototype.getClientHeight = function () {
        return this.clientHeight;
    };
    ScrollGeomCache.prototype.getScrollWidth = function () {
        return this.scrollWidth;
    };
    ScrollGeomCache.prototype.getScrollHeight = function () {
        return this.scrollHeight;
    };
    ScrollGeomCache.prototype.handleScrollChange = function () {
    };
    return ScrollGeomCache;
}(ScrollController));
var ElementScrollGeomCache = /** @class */ (function (_super) {
    __extends(ElementScrollGeomCache, _super);
    function ElementScrollGeomCache(el, doesListening) {
        return _super.call(this, new ElementScrollController(el), doesListening) || this;
    }
    ElementScrollGeomCache.prototype.getEventTarget = function () {
        return this.scrollController.el;
    };
    ElementScrollGeomCache.prototype.computeClientRect = function () {
        return computeInnerRect(this.scrollController.el);
    };
    return ElementScrollGeomCache;
}(ScrollGeomCache));
var WindowScrollGeomCache = /** @class */ (function (_super) {
    __extends(WindowScrollGeomCache, _super);
    function WindowScrollGeomCache(doesListening) {
        return _super.call(this, new WindowScrollController(), doesListening) || this;
    }
    WindowScrollGeomCache.prototype.getEventTarget = function () {
        return window;
    };
    WindowScrollGeomCache.prototype.computeClientRect = function () {
        return {
            left: this.scrollLeft,
            right: this.scrollLeft + this.clientWidth,
            top: this.scrollTop,
            bottom: this.scrollTop + this.clientHeight
        };
    };
    // the window is the only scroll object that changes it's rectangle relative
    // to the document's topleft as it scrolls
    WindowScrollGeomCache.prototype.handleScrollChange = function () {
        this.clientRect = this.computeClientRect();
    };
    return WindowScrollGeomCache;
}(ScrollGeomCache));

// If available we are using native "performance" API instead of "Date"
// Read more about it on MDN:
// https://developer.mozilla.org/en-US/docs/Web/API/Performance
var getTime = typeof performance === 'function' ? performance.now : Date.now;
/*
For a pointer interaction, automatically scrolls certain scroll containers when the pointer
approaches the edge.

The caller must call start + handleMove + stop.
*/
var AutoScroller = /** @class */ (function () {
    function AutoScroller() {
        var _this = this;
        // options that can be set by caller
        this.isEnabled = true;
        this.scrollQuery = [window, '.fc-scroller'];
        this.edgeThreshold = 50; // pixels
        this.maxVelocity = 300; // pixels per second
        // internal state
        this.pointerScreenX = null;
        this.pointerScreenY = null;
        this.isAnimating = false;
        this.scrollCaches = null;
        // protect against the initial pointerdown being too close to an edge and starting the scroll
        this.everMovedUp = false;
        this.everMovedDown = false;
        this.everMovedLeft = false;
        this.everMovedRight = false;
        this.animate = function () {
            if (_this.isAnimating) { // wasn't cancelled between animation calls
                var edge = _this.computeBestEdge(_this.pointerScreenX + window.pageXOffset, _this.pointerScreenY + window.pageYOffset);
                if (edge) {
                    var now = getTime();
                    _this.handleSide(edge, (now - _this.msSinceRequest) / 1000);
                    _this.requestAnimation(now);
                }
                else {
                    _this.isAnimating = false; // will stop animation
                }
            }
        };
    }
    AutoScroller.prototype.start = function (pageX, pageY) {
        if (this.isEnabled) {
            this.scrollCaches = this.buildCaches();
            this.pointerScreenX = null;
            this.pointerScreenY = null;
            this.everMovedUp = false;
            this.everMovedDown = false;
            this.everMovedLeft = false;
            this.everMovedRight = false;
            this.handleMove(pageX, pageY);
        }
    };
    AutoScroller.prototype.handleMove = function (pageX, pageY) {
        if (this.isEnabled) {
            var pointerScreenX = pageX - window.pageXOffset;
            var pointerScreenY = pageY - window.pageYOffset;
            var yDelta = this.pointerScreenY === null ? 0 : pointerScreenY - this.pointerScreenY;
            var xDelta = this.pointerScreenX === null ? 0 : pointerScreenX - this.pointerScreenX;
            if (yDelta < 0) {
                this.everMovedUp = true;
            }
            else if (yDelta > 0) {
                this.everMovedDown = true;
            }
            if (xDelta < 0) {
                this.everMovedLeft = true;
            }
            else if (xDelta > 0) {
                this.everMovedRight = true;
            }
            this.pointerScreenX = pointerScreenX;
            this.pointerScreenY = pointerScreenY;
            if (!this.isAnimating) {
                this.isAnimating = true;
                this.requestAnimation(getTime());
            }
        }
    };
    AutoScroller.prototype.stop = function () {
        if (this.isEnabled) {
            this.isAnimating = false; // will stop animation
            for (var _i = 0, _a = this.scrollCaches; _i < _a.length; _i++) {
                var scrollCache = _a[_i];
                scrollCache.destroy();
            }
            this.scrollCaches = null;
        }
    };
    AutoScroller.prototype.requestAnimation = function (now) {
        this.msSinceRequest = now;
        requestAnimationFrame(this.animate);
    };
    AutoScroller.prototype.handleSide = function (edge, seconds) {
        var scrollCache = edge.scrollCache;
        var edgeThreshold = this.edgeThreshold;
        var invDistance = edgeThreshold - edge.distance;
        var velocity = // the closer to the edge, the faster we scroll
         (invDistance * invDistance) / (edgeThreshold * edgeThreshold) * // quadratic
            this.maxVelocity * seconds;
        var sign = 1;
        switch (edge.name) {
            case 'left':
                sign = -1;
            // falls through
            case 'right':
                scrollCache.setScrollLeft(scrollCache.getScrollLeft() + velocity * sign);
                break;
            case 'top':
                sign = -1;
            // falls through
            case 'bottom':
                scrollCache.setScrollTop(scrollCache.getScrollTop() + velocity * sign);
                break;
        }
    };
    // left/top are relative to document topleft
    AutoScroller.prototype.computeBestEdge = function (left, top) {
        var edgeThreshold = this.edgeThreshold;
        var bestSide = null;
        for (var _i = 0, _a = this.scrollCaches; _i < _a.length; _i++) {
            var scrollCache = _a[_i];
            var rect = scrollCache.clientRect;
            var leftDist = left - rect.left;
            var rightDist = rect.right - left;
            var topDist = top - rect.top;
            var bottomDist = rect.bottom - top;
            // completely within the rect?
            if (leftDist >= 0 && rightDist >= 0 && topDist >= 0 && bottomDist >= 0) {
                if (topDist <= edgeThreshold && this.everMovedUp && scrollCache.canScrollUp() &&
                    (!bestSide || bestSide.distance > topDist)) {
                    bestSide = { scrollCache: scrollCache, name: 'top', distance: topDist };
                }
                if (bottomDist <= edgeThreshold && this.everMovedDown && scrollCache.canScrollDown() &&
                    (!bestSide || bestSide.distance > bottomDist)) {
                    bestSide = { scrollCache: scrollCache, name: 'bottom', distance: bottomDist };
                }
                if (leftDist <= edgeThreshold && this.everMovedLeft && scrollCache.canScrollLeft() &&
                    (!bestSide || bestSide.distance > leftDist)) {
                    bestSide = { scrollCache: scrollCache, name: 'left', distance: leftDist };
                }
                if (rightDist <= edgeThreshold && this.everMovedRight && scrollCache.canScrollRight() &&
                    (!bestSide || bestSide.distance > rightDist)) {
                    bestSide = { scrollCache: scrollCache, name: 'right', distance: rightDist };
                }
            }
        }
        return bestSide;
    };
    AutoScroller.prototype.buildCaches = function () {
        return this.queryScrollEls().map(function (el) {
            if (el === window) {
                return new WindowScrollGeomCache(false); // false = don't listen to user-generated scrolls
            }
            else {
                return new ElementScrollGeomCache(el, false); // false = don't listen to user-generated scrolls
            }
        });
    };
    AutoScroller.prototype.queryScrollEls = function () {
        var els = [];
        for (var _i = 0, _a = this.scrollQuery; _i < _a.length; _i++) {
            var query = _a[_i];
            if (typeof query === 'object') {
                els.push(query);
            }
            else {
                els.push.apply(els, Array.prototype.slice.call(document.querySelectorAll(query)));
            }
        }
        return els;
    };
    return AutoScroller;
}());

/*
Monitors dragging on an element. Has a number of high-level features:
- minimum distance required before dragging
- minimum wait time ("delay") before dragging
- a mirror element that follows the pointer
*/
var FeaturefulElementDragging = /** @class */ (function (_super) {
    __extends(FeaturefulElementDragging, _super);
    function FeaturefulElementDragging(containerEl) {
        var _this = _super.call(this, containerEl) || this;
        // options that can be directly set by caller
        // the caller can also set the PointerDragging's options as well
        _this.delay = null;
        _this.minDistance = 0;
        _this.touchScrollAllowed = true; // prevents drag from starting and blocks scrolling during drag
        _this.mirrorNeedsRevert = false;
        _this.isInteracting = false; // is the user validly moving the pointer? lasts until pointerup
        _this.isDragging = false; // is it INTENTFULLY dragging? lasts until after revert animation
        _this.isDelayEnded = false;
        _this.isDistanceSurpassed = false;
        _this.delayTimeoutId = null;
        _this.onPointerDown = function (ev) {
            if (!_this.isDragging) { // so new drag doesn't happen while revert animation is going
                _this.isInteracting = true;
                _this.isDelayEnded = false;
                _this.isDistanceSurpassed = false;
                preventSelection(document.body);
                preventContextMenu(document.body);
                // prevent links from being visited if there's an eventual drag.
                // also prevents selection in older browsers (maybe?).
                // not necessary for touch, besides, browser would complain about passiveness.
                if (!ev.isTouch) {
                    ev.origEvent.preventDefault();
                }
                _this.emitter.trigger('pointerdown', ev);
                if (!_this.pointer.shouldIgnoreMove) {
                    // actions related to initiating dragstart+dragmove+dragend...
                    _this.mirror.setIsVisible(false); // reset. caller must set-visible
                    _this.mirror.start(ev.subjectEl, ev.pageX, ev.pageY); // must happen on first pointer down
                    _this.startDelay(ev);
                    if (!_this.minDistance) {
                        _this.handleDistanceSurpassed(ev);
                    }
                }
            }
        };
        _this.onPointerMove = function (ev) {
            if (_this.isInteracting) { // if false, still waiting for previous drag's revert
                _this.emitter.trigger('pointermove', ev);
                if (!_this.isDistanceSurpassed) {
                    var minDistance = _this.minDistance;
                    var distanceSq = void 0; // current distance from the origin, squared
                    var deltaX = ev.deltaX, deltaY = ev.deltaY;
                    distanceSq = deltaX * deltaX + deltaY * deltaY;
                    if (distanceSq >= minDistance * minDistance) { // use pythagorean theorem
                        _this.handleDistanceSurpassed(ev);
                    }
                }
                if (_this.isDragging) {
                    // a real pointer move? (not one simulated by scrolling)
                    if (ev.origEvent.type !== 'scroll') {
                        _this.mirror.handleMove(ev.pageX, ev.pageY);
                        _this.autoScroller.handleMove(ev.pageX, ev.pageY);
                    }
                    _this.emitter.trigger('dragmove', ev);
                }
            }
        };
        _this.onPointerUp = function (ev) {
            if (_this.isInteracting) { // if false, still waiting for previous drag's revert
                _this.isInteracting = false;
                allowSelection(document.body);
                allowContextMenu(document.body);
                _this.emitter.trigger('pointerup', ev); // can potentially set mirrorNeedsRevert
                if (_this.isDragging) {
                    _this.autoScroller.stop();
                    _this.tryStopDrag(ev); // which will stop the mirror
                }
                if (_this.delayTimeoutId) {
                    clearTimeout(_this.delayTimeoutId);
                    _this.delayTimeoutId = null;
                }
            }
        };
        var pointer = _this.pointer = new PointerDragging(containerEl);
        pointer.emitter.on('pointerdown', _this.onPointerDown);
        pointer.emitter.on('pointermove', _this.onPointerMove);
        pointer.emitter.on('pointerup', _this.onPointerUp);
        _this.mirror = new ElementMirror();
        _this.autoScroller = new AutoScroller();
        return _this;
    }
    FeaturefulElementDragging.prototype.destroy = function () {
        this.pointer.destroy();
    };
    FeaturefulElementDragging.prototype.startDelay = function (ev) {
        var _this = this;
        if (typeof this.delay === 'number') {
            this.delayTimeoutId = setTimeout(function () {
                _this.delayTimeoutId = null;
                _this.handleDelayEnd(ev);
            }, this.delay); // not assignable to number!
        }
        else {
            this.handleDelayEnd(ev);
        }
    };
    FeaturefulElementDragging.prototype.handleDelayEnd = function (ev) {
        this.isDelayEnded = true;
        this.tryStartDrag(ev);
    };
    FeaturefulElementDragging.prototype.handleDistanceSurpassed = function (ev) {
        this.isDistanceSurpassed = true;
        this.tryStartDrag(ev);
    };
    FeaturefulElementDragging.prototype.tryStartDrag = function (ev) {
        if (this.isDelayEnded && this.isDistanceSurpassed) {
            if (!this.pointer.wasTouchScroll || this.touchScrollAllowed) {
                this.isDragging = true;
                this.mirrorNeedsRevert = false;
                this.autoScroller.start(ev.pageX, ev.pageY);
                this.emitter.trigger('dragstart', ev);
                if (this.touchScrollAllowed === false) {
                    this.pointer.cancelTouchScroll();
                }
            }
        }
    };
    FeaturefulElementDragging.prototype.tryStopDrag = function (ev) {
        // .stop() is ALWAYS asynchronous, which we NEED because we want all pointerup events
        // that come from the document to fire beforehand. much more convenient this way.
        this.mirror.stop(this.mirrorNeedsRevert, this.stopDrag.bind(this, ev) // bound with args
        );
    };
    FeaturefulElementDragging.prototype.stopDrag = function (ev) {
        this.isDragging = false;
        this.emitter.trigger('dragend', ev);
    };
    // fill in the implementations...
    FeaturefulElementDragging.prototype.setIgnoreMove = function (bool) {
        this.pointer.shouldIgnoreMove = bool;
    };
    FeaturefulElementDragging.prototype.setMirrorIsVisible = function (bool) {
        this.mirror.setIsVisible(bool);
    };
    FeaturefulElementDragging.prototype.setMirrorNeedsRevert = function (bool) {
        this.mirrorNeedsRevert = bool;
    };
    FeaturefulElementDragging.prototype.setAutoScrollEnabled = function (bool) {
        this.autoScroller.isEnabled = bool;
    };
    return FeaturefulElementDragging;
}(ElementDragging));

/*
When this class is instantiated, it records the offset of an element (relative to the document topleft),
and continues to monitor scrolling, updating the cached coordinates if it needs to.
Does not access the DOM after instantiation, so highly performant.

Also keeps track of all scrolling/overflow:hidden containers that are parents of the given element
and an determine if a given point is inside the combined clipping rectangle.
*/
var OffsetTracker = /** @class */ (function () {
    function OffsetTracker(el) {
        this.origRect = computeRect(el);
        // will work fine for divs that have overflow:hidden
        this.scrollCaches = getClippingParents(el).map(function (el) {
            return new ElementScrollGeomCache(el, true); // listen=true
        });
    }
    OffsetTracker.prototype.destroy = function () {
        for (var _i = 0, _a = this.scrollCaches; _i < _a.length; _i++) {
            var scrollCache = _a[_i];
            scrollCache.destroy();
        }
    };
    OffsetTracker.prototype.computeLeft = function () {
        var left = this.origRect.left;
        for (var _i = 0, _a = this.scrollCaches; _i < _a.length; _i++) {
            var scrollCache = _a[_i];
            left += scrollCache.origScrollLeft - scrollCache.getScrollLeft();
        }
        return left;
    };
    OffsetTracker.prototype.computeTop = function () {
        var top = this.origRect.top;
        for (var _i = 0, _a = this.scrollCaches; _i < _a.length; _i++) {
            var scrollCache = _a[_i];
            top += scrollCache.origScrollTop - scrollCache.getScrollTop();
        }
        return top;
    };
    OffsetTracker.prototype.isWithinClipping = function (pageX, pageY) {
        var point = { left: pageX, top: pageY };
        for (var _i = 0, _a = this.scrollCaches; _i < _a.length; _i++) {
            var scrollCache = _a[_i];
            if (!isIgnoredClipping(scrollCache.getEventTarget()) &&
                !pointInsideRect(point, scrollCache.clientRect)) {
                return false;
            }
        }
        return true;
    };
    return OffsetTracker;
}());
// certain clipping containers should never constrain interactions, like  and
// https://github.com/fullcalendar/fullcalendar/issues/3615
function isIgnoredClipping(node) {
    var tagName = node.tagName;
    return tagName === 'HTML' || tagName === 'BODY';
}

/*
Tracks movement over multiple droppable areas (aka "hits")
that exist in one or more DateComponents.
Relies on an existing draggable.

emits:
- pointerdown
- dragstart
- hitchange - fires initially, even if not over a hit
- pointerup
- (hitchange - again, to null, if ended over a hit)
- dragend
*/
var HitDragging = /** @class */ (function () {
    function HitDragging(dragging, droppableStore) {
        var _this = this;
        // options that can be set by caller
        this.useSubjectCenter = false;
        this.requireInitial = true; // if doesn't start out on a hit, won't emit any events
        this.initialHit = null;
        this.movingHit = null;
        this.finalHit = null; // won't ever be populated if shouldIgnoreMove
        this.handlePointerDown = function (ev) {
            var dragging = _this.dragging;
            _this.initialHit = null;
            _this.movingHit = null;
            _this.finalHit = null;
            _this.prepareHits();
            _this.processFirstCoord(ev);
            if (_this.initialHit || !_this.requireInitial) {
                dragging.setIgnoreMove(false);
                _this.emitter.trigger('pointerdown', ev); // TODO: fire this before computing processFirstCoord, so listeners can cancel. this gets fired by almost every handler :(
            }
            else {
                dragging.setIgnoreMove(true);
            }
        };
        this.handleDragStart = function (ev) {
            _this.emitter.trigger('dragstart', ev);
            _this.handleMove(ev, true); // force = fire even if initially null
        };
        this.handleDragMove = function (ev) {
            _this.emitter.trigger('dragmove', ev);
            _this.handleMove(ev);
        };
        this.handlePointerUp = function (ev) {
            _this.releaseHits();
            _this.emitter.trigger('pointerup', ev);
        };
        this.handleDragEnd = function (ev) {
            if (_this.movingHit) {
                _this.emitter.trigger('hitupdate', null, true, ev);
            }
            _this.finalHit = _this.movingHit;
            _this.movingHit = null;
            _this.emitter.trigger('dragend', ev);
        };
        this.droppableStore = droppableStore;
        dragging.emitter.on('pointerdown', this.handlePointerDown);
        dragging.emitter.on('dragstart', this.handleDragStart);
        dragging.emitter.on('dragmove', this.handleDragMove);
        dragging.emitter.on('pointerup', this.handlePointerUp);
        dragging.emitter.on('dragend', this.handleDragEnd);
        this.dragging = dragging;
        this.emitter = new EmitterMixin();
    }
    // sets initialHit
    // sets coordAdjust
    HitDragging.prototype.processFirstCoord = function (ev) {
        var origPoint = { left: ev.pageX, top: ev.pageY };
        var adjustedPoint = origPoint;
        var subjectEl = ev.subjectEl;
        var subjectRect;
        if (subjectEl !== document) {
            subjectRect = computeRect(subjectEl);
            adjustedPoint = constrainPoint(adjustedPoint, subjectRect);
        }
        var initialHit = this.initialHit = this.queryHitForOffset(adjustedPoint.left, adjustedPoint.top);
        if (initialHit) {
            if (this.useSubjectCenter && subjectRect) {
                var slicedSubjectRect = intersectRects(subjectRect, initialHit.rect);
                if (slicedSubjectRect) {
                    adjustedPoint = getRectCenter(slicedSubjectRect);
                }
            }
            this.coordAdjust = diffPoints(adjustedPoint, origPoint);
        }
        else {
            this.coordAdjust = { left: 0, top: 0 };
        }
    };
    HitDragging.prototype.handleMove = function (ev, forceHandle) {
        var hit = this.queryHitForOffset(ev.pageX + this.coordAdjust.left, ev.pageY + this.coordAdjust.top);
        if (forceHandle || !isHitsEqual(this.movingHit, hit)) {
            this.movingHit = hit;
            this.emitter.trigger('hitupdate', hit, false, ev);
        }
    };
    HitDragging.prototype.prepareHits = function () {
        this.offsetTrackers = mapHash(this.droppableStore, function (interactionSettings) {
            interactionSettings.component.buildPositionCaches();
            return new OffsetTracker(interactionSettings.el);
        });
    };
    HitDragging.prototype.releaseHits = function () {
        var offsetTrackers = this.offsetTrackers;
        for (var id in offsetTrackers) {
            offsetTrackers[id].destroy();
        }
        this.offsetTrackers = {};
    };
    HitDragging.prototype.queryHitForOffset = function (offsetLeft, offsetTop) {
        var _a = this, droppableStore = _a.droppableStore, offsetTrackers = _a.offsetTrackers;
        var bestHit = null;
        for (var id in droppableStore) {
            var component = droppableStore[id].component;
            var offsetTracker = offsetTrackers[id];
            if (offsetTracker.isWithinClipping(offsetLeft, offsetTop)) {
                var originLeft = offsetTracker.computeLeft();
                var originTop = offsetTracker.computeTop();
                var positionLeft = offsetLeft - originLeft;
                var positionTop = offsetTop - originTop;
                var origRect = offsetTracker.origRect;
                var width = origRect.right - origRect.left;
                var height = origRect.bottom - origRect.top;
                if (
                // must be within the element's bounds
                positionLeft >= 0 && positionLeft < width &&
                    positionTop >= 0 && positionTop < height) {
                    var hit = component.queryHit(positionLeft, positionTop, width, height);
                    if (hit &&
                        (
                        // make sure the hit is within activeRange, meaning it's not a deal cell
                        !component.props.dateProfile || // hack for DayTile
                            rangeContainsRange(component.props.dateProfile.activeRange, hit.dateSpan.range)) &&
                        (!bestHit || hit.layer > bestHit.layer)) {
                        // TODO: better way to re-orient rectangle
                        hit.rect.left += originLeft;
                        hit.rect.right += originLeft;
                        hit.rect.top += originTop;
                        hit.rect.bottom += originTop;
                        bestHit = hit;
                    }
                }
            }
        }
        return bestHit;
    };
    return HitDragging;
}());
function isHitsEqual(hit0, hit1) {
    if (!hit0 && !hit1) {
        return true;
    }
    if (Boolean(hit0) !== Boolean(hit1)) {
        return false;
    }
    return isDateSpansEqual(hit0.dateSpan, hit1.dateSpan);
}

/*
Monitors when the user clicks on a specific date/time of a component.
A pointerdown+pointerup on the same "hit" constitutes a click.
*/
var DateClicking = /** @class */ (function (_super) {
    __extends(DateClicking, _super);
    function DateClicking(settings) {
        var _this = _super.call(this, settings) || this;
        _this.handlePointerDown = function (ev) {
            var dragging = _this.dragging;
            // do this in pointerdown (not dragend) because DOM might be mutated by the time dragend is fired
            dragging.setIgnoreMove(!_this.component.isValidDateDownEl(dragging.pointer.downEl));
        };
        // won't even fire if moving was ignored
        _this.handleDragEnd = function (ev) {
            var component = _this.component;
            var pointer = _this.dragging.pointer;
            if (!pointer.wasTouchScroll) {
                var _a = _this.hitDragging, initialHit = _a.initialHit, finalHit = _a.finalHit;
                if (initialHit && finalHit && isHitsEqual(initialHit, finalHit)) {
                    component.calendar.triggerDateClick(initialHit.dateSpan, initialHit.dayEl, component.view, ev.origEvent);
                }
            }
        };
        var component = settings.component;
        // we DO want to watch pointer moves because otherwise finalHit won't get populated
        _this.dragging = new FeaturefulElementDragging(component.el);
        _this.dragging.autoScroller.isEnabled = false;
        var hitDragging = _this.hitDragging = new HitDragging(_this.dragging, interactionSettingsToStore(settings));
        hitDragging.emitter.on('pointerdown', _this.handlePointerDown);
        hitDragging.emitter.on('dragend', _this.handleDragEnd);
        return _this;
    }
    DateClicking.prototype.destroy = function () {
        this.dragging.destroy();
    };
    return DateClicking;
}(Interaction));

/*
Tracks when the user selects a portion of time of a component,
constituted by a drag over date cells, with a possible delay at the beginning of the drag.
*/
var DateSelecting = /** @class */ (function (_super) {
    __extends(DateSelecting, _super);
    function DateSelecting(settings) {
        var _this = _super.call(this, settings) || this;
        _this.dragSelection = null;
        _this.handlePointerDown = function (ev) {
            var _a = _this, component = _a.component, dragging = _a.dragging;
            var canSelect = component.opt('selectable') &&
                component.isValidDateDownEl(ev.origEvent.target);
            // don't bother to watch expensive moves if component won't do selection
            dragging.setIgnoreMove(!canSelect);
            // if touch, require user to hold down
            dragging.delay = ev.isTouch ? getComponentTouchDelay(component) : null;
        };
        _this.handleDragStart = function (ev) {
            _this.component.calendar.unselect(ev); // unselect previous selections
        };
        _this.handleHitUpdate = function (hit, isFinal) {
            var calendar = _this.component.calendar;
            var dragSelection = null;
            var isInvalid = false;
            if (hit) {
                dragSelection = joinHitsIntoSelection(_this.hitDragging.initialHit, hit, calendar.pluginSystem.hooks.dateSelectionTransformers);
                if (!dragSelection || !_this.component.isDateSelectionValid(dragSelection)) {
                    isInvalid = true;
                    dragSelection = null;
                }
            }
            if (dragSelection) {
                calendar.dispatch({ type: 'SELECT_DATES', selection: dragSelection });
            }
            else if (!isFinal) { // only unselect if moved away while dragging
                calendar.dispatch({ type: 'UNSELECT_DATES' });
            }
            if (!isInvalid) {
                enableCursor();
            }
            else {
                disableCursor();
            }
            if (!isFinal) {
                _this.dragSelection = dragSelection; // only clear if moved away from all hits while dragging
            }
        };
        _this.handlePointerUp = function (pev) {
            if (_this.dragSelection) {
                // selection is already rendered, so just need to report selection
                _this.component.calendar.triggerDateSelect(_this.dragSelection, pev);
                _this.dragSelection = null;
            }
        };
        var component = settings.component;
        var dragging = _this.dragging = new FeaturefulElementDragging(component.el);
        dragging.touchScrollAllowed = false;
        dragging.minDistance = component.opt('selectMinDistance') || 0;
        dragging.autoScroller.isEnabled = component.opt('dragScroll');
        var hitDragging = _this.hitDragging = new HitDragging(_this.dragging, interactionSettingsToStore(settings));
        hitDragging.emitter.on('pointerdown', _this.handlePointerDown);
        hitDragging.emitter.on('dragstart', _this.handleDragStart);
        hitDragging.emitter.on('hitupdate', _this.handleHitUpdate);
        hitDragging.emitter.on('pointerup', _this.handlePointerUp);
        return _this;
    }
    DateSelecting.prototype.destroy = function () {
        this.dragging.destroy();
    };
    return DateSelecting;
}(Interaction));
function getComponentTouchDelay(component) {
    var delay = component.opt('selectLongPressDelay');
    if (delay == null) {
        delay = component.opt('longPressDelay');
    }
    return delay;
}
function joinHitsIntoSelection(hit0, hit1, dateSelectionTransformers) {
    var dateSpan0 = hit0.dateSpan;
    var dateSpan1 = hit1.dateSpan;
    var ms = [
        dateSpan0.range.start,
        dateSpan0.range.end,
        dateSpan1.range.start,
        dateSpan1.range.end
    ];
    ms.sort(compareNumbers);
    var props = {};
    for (var _i = 0, dateSelectionTransformers_1 = dateSelectionTransformers; _i < dateSelectionTransformers_1.length; _i++) {
        var transformer = dateSelectionTransformers_1[_i];
        var res = transformer(hit0, hit1);
        if (res === false) {
            return null;
        }
        else if (res) {
            __assign(props, res);
        }
    }
    props.range = { start: ms[0], end: ms[3] };
    props.allDay = dateSpan0.allDay;
    return props;
}

/*
Given an already instantiated draggable object for one-or-more elements,
Interprets any dragging as an attempt to drag an events that lives outside
of a calendar onto a calendar.
*/
var ExternalElementDragging = /** @class */ (function () {
    function ExternalElementDragging(dragging, suppliedDragMeta) {
        var _this = this;
        this.receivingCalendar = null;
        this.droppableEvent = null; // will exist for all drags, even if create:false
        this.suppliedDragMeta = null;
        this.dragMeta = null;
        this.handleDragStart = function (ev) {
            _this.dragMeta = _this.buildDragMeta(ev.subjectEl);
        };
        this.handleHitUpdate = function (hit, isFinal, ev) {
            var dragging = _this.hitDragging.dragging;
            var receivingCalendar = null;
            var droppableEvent = null;
            var isInvalid = false;
            var interaction = {
                affectedEvents: createEmptyEventStore(),
                mutatedEvents: createEmptyEventStore(),
                isEvent: _this.dragMeta.create,
                origSeg: null
            };
            if (hit) {
                receivingCalendar = hit.component.calendar;
                if (_this.canDropElOnCalendar(ev.subjectEl, receivingCalendar)) {
                    droppableEvent = computeEventForDateSpan(hit.dateSpan, _this.dragMeta, receivingCalendar);
                    interaction.mutatedEvents = eventTupleToStore(droppableEvent);
                    isInvalid = !isInteractionValid(interaction, receivingCalendar);
                    if (isInvalid) {
                        interaction.mutatedEvents = createEmptyEventStore();
                        droppableEvent = null;
                    }
                }
            }
            _this.displayDrag(receivingCalendar, interaction);
            // show mirror if no already-rendered mirror element OR if we are shutting down the mirror (?)
            // TODO: wish we could somehow wait for dispatch to guarantee render
            dragging.setMirrorIsVisible(isFinal || !droppableEvent || !document.querySelector('.fc-mirror'));
            if (!isInvalid) {
                enableCursor();
            }
            else {
                disableCursor();
            }
            if (!isFinal) {
                dragging.setMirrorNeedsRevert(!droppableEvent);
                _this.receivingCalendar = receivingCalendar;
                _this.droppableEvent = droppableEvent;
            }
        };
        this.handleDragEnd = function (pev) {
            var _a = _this, receivingCalendar = _a.receivingCalendar, droppableEvent = _a.droppableEvent;
            _this.clearDrag();
            if (receivingCalendar && droppableEvent) {
                var finalHit = _this.hitDragging.finalHit;
                var finalView = finalHit.component.view;
                var dragMeta = _this.dragMeta;
                var arg = __assign({}, receivingCalendar.buildDatePointApi(finalHit.dateSpan), { draggedEl: pev.subjectEl, jsEvent: pev.origEvent, view: finalView });
                receivingCalendar.publiclyTrigger('drop', [arg]);
                if (dragMeta.create) {
                    receivingCalendar.dispatch({
                        type: 'MERGE_EVENTS',
                        eventStore: eventTupleToStore(droppableEvent)
                    });
                    if (pev.isTouch) {
                        receivingCalendar.dispatch({
                            type: 'SELECT_EVENT',
                            eventInstanceId: droppableEvent.instance.instanceId
                        });
                    }
                    // signal that an external event landed
                    receivingCalendar.publiclyTrigger('eventReceive', [
                        {
                            draggedEl: pev.subjectEl,
                            event: new EventApi(receivingCalendar, droppableEvent.def, droppableEvent.instance),
                            view: finalView
                        }
                    ]);
                }
            }
            _this.receivingCalendar = null;
            _this.droppableEvent = null;
        };
        var hitDragging = this.hitDragging = new HitDragging(dragging, interactionSettingsStore);
        hitDragging.requireInitial = false; // will start outside of a component
        hitDragging.emitter.on('dragstart', this.handleDragStart);
        hitDragging.emitter.on('hitupdate', this.handleHitUpdate);
        hitDragging.emitter.on('dragend', this.handleDragEnd);
        this.suppliedDragMeta = suppliedDragMeta;
    }
    ExternalElementDragging.prototype.buildDragMeta = function (subjectEl) {
        if (typeof this.suppliedDragMeta === 'object') {
            return parseDragMeta(this.suppliedDragMeta);
        }
        else if (typeof this.suppliedDragMeta === 'function') {
            return parseDragMeta(this.suppliedDragMeta(subjectEl));
        }
        else {
            return getDragMetaFromEl(subjectEl);
        }
    };
    ExternalElementDragging.prototype.displayDrag = function (nextCalendar, state) {
        var prevCalendar = this.receivingCalendar;
        if (prevCalendar && prevCalendar !== nextCalendar) {
            prevCalendar.dispatch({ type: 'UNSET_EVENT_DRAG' });
        }
        if (nextCalendar) {
            nextCalendar.dispatch({ type: 'SET_EVENT_DRAG', state: state });
        }
    };
    ExternalElementDragging.prototype.clearDrag = function () {
        if (this.receivingCalendar) {
            this.receivingCalendar.dispatch({ type: 'UNSET_EVENT_DRAG' });
        }
    };
    ExternalElementDragging.prototype.canDropElOnCalendar = function (el, receivingCalendar) {
        var dropAccept = receivingCalendar.opt('dropAccept');
        if (typeof dropAccept === 'function') {
            return dropAccept(el);
        }
        else if (typeof dropAccept === 'string' && dropAccept) {
            return Boolean(elementMatches(el, dropAccept));
        }
        return true;
    };
    return ExternalElementDragging;
}());
// Utils for computing event store from the DragMeta
// ----------------------------------------------------------------------------------------------------
function computeEventForDateSpan(dateSpan, dragMeta, calendar) {
    var defProps = __assign({}, dragMeta.leftoverProps);
    for (var _i = 0, _a = calendar.pluginSystem.hooks.externalDefTransforms; _i < _a.length; _i++) {
        var transform = _a[_i];
        __assign(defProps, transform(dateSpan, dragMeta));
    }
    var def = parseEventDef(defProps, dragMeta.sourceId, dateSpan.allDay, calendar.opt('forceEventDuration') || Boolean(dragMeta.duration), // hasEnd
    calendar);
    var start = dateSpan.range.start;
    // only rely on time info if drop zone is all-day,
    // otherwise, we already know the time
    if (dateSpan.allDay && dragMeta.startTime) {
        start = calendar.dateEnv.add(start, dragMeta.startTime);
    }
    var end = dragMeta.duration ?
        calendar.dateEnv.add(start, dragMeta.duration) :
        calendar.getDefaultEventEnd(dateSpan.allDay, start);
    var instance = createEventInstance(def.defId, { start: start, end: end });
    return { def: def, instance: instance };
}
// Utils for extracting data from element
// ----------------------------------------------------------------------------------------------------
function getDragMetaFromEl(el) {
    var str = getEmbeddedElData(el, 'event');
    var obj = str ?
        JSON.parse(str) :
        { create: false }; // if no embedded data, assume no event creation
    return parseDragMeta(obj);
}
config.dataAttrPrefix = '';
function getEmbeddedElData(el, name) {
    var prefix = config.dataAttrPrefix;
    var prefixedName = (prefix ? prefix + '-' : '') + name;
    return el.getAttribute('data-' + prefixedName) || '';
}

/*
Makes an element (that is *external* to any calendar) draggable.
Can pass in data that determines how an event will be created when dropped onto a calendar.
Leverages FullCalendar's internal drag-n-drop functionality WITHOUT a third-party drag system.
*/
var ExternalDraggable = /** @class */ (function () {
    function ExternalDraggable(el, settings) {
        var _this = this;
        if (settings === void 0) { settings = {}; }
        this.handlePointerDown = function (ev) {
            var dragging = _this.dragging;
            var _a = _this.settings, minDistance = _a.minDistance, longPressDelay = _a.longPressDelay;
            dragging.minDistance =
                minDistance != null ?
                    minDistance :
                    (ev.isTouch ? 0 : globalDefaults.eventDragMinDistance);
            dragging.delay =
                ev.isTouch ? // TODO: eventually read eventLongPressDelay instead vvv
                    (longPressDelay != null ? longPressDelay : globalDefaults.longPressDelay) :
                    0;
        };
        this.handleDragStart = function (ev) {
            if (ev.isTouch &&
                _this.dragging.delay &&
                ev.subjectEl.classList.contains('fc-event')) {
                _this.dragging.mirror.getMirrorEl().classList.add('fc-selected');
            }
        };
        this.settings = settings;
        var dragging = this.dragging = new FeaturefulElementDragging(el);
        dragging.touchScrollAllowed = false;
        if (settings.itemSelector != null) {
            dragging.pointer.selector = settings.itemSelector;
        }
        if (settings.appendTo != null) {
            dragging.mirror.parentNode = settings.appendTo; // TODO: write tests
        }
        dragging.emitter.on('pointerdown', this.handlePointerDown);
        dragging.emitter.on('dragstart', this.handleDragStart);
        new ExternalElementDragging(dragging, settings.eventData);
    }
    ExternalDraggable.prototype.destroy = function () {
        this.dragging.destroy();
    };
    return ExternalDraggable;
}());

/*
Detects when a *THIRD-PARTY* drag-n-drop system interacts with elements.
The third-party system is responsible for drawing the visuals effects of the drag.
This class simply monitors for pointer movements and fires events.
It also has the ability to hide the moving element (the "mirror") during the drag.
*/
var InferredElementDragging = /** @class */ (function (_super) {
    __extends(InferredElementDragging, _super);
    function InferredElementDragging(containerEl) {
        var _this = _super.call(this, containerEl) || this;
        _this.shouldIgnoreMove = false;
        _this.mirrorSelector = '';
        _this.currentMirrorEl = null;
        _this.handlePointerDown = function (ev) {
            _this.emitter.trigger('pointerdown', ev);
            if (!_this.shouldIgnoreMove) {
                // fire dragstart right away. does not support delay or min-distance
                _this.emitter.trigger('dragstart', ev);
            }
        };
        _this.handlePointerMove = function (ev) {
            if (!_this.shouldIgnoreMove) {
                _this.emitter.trigger('dragmove', ev);
            }
        };
        _this.handlePointerUp = function (ev) {
            _this.emitter.trigger('pointerup', ev);
            if (!_this.shouldIgnoreMove) {
                // fire dragend right away. does not support a revert animation
                _this.emitter.trigger('dragend', ev);
            }
        };
        var pointer = _this.pointer = new PointerDragging(containerEl);
        pointer.emitter.on('pointerdown', _this.handlePointerDown);
        pointer.emitter.on('pointermove', _this.handlePointerMove);
        pointer.emitter.on('pointerup', _this.handlePointerUp);
        return _this;
    }
    InferredElementDragging.prototype.destroy = function () {
        this.pointer.destroy();
    };
    InferredElementDragging.prototype.setIgnoreMove = function (bool) {
        this.shouldIgnoreMove = bool;
    };
    InferredElementDragging.prototype.setMirrorIsVisible = function (bool) {
        if (bool) {
            // restore a previously hidden element.
            // use the reference in case the selector class has already been removed.
            if (this.currentMirrorEl) {
                this.currentMirrorEl.style.visibility = '';
                this.currentMirrorEl = null;
            }
        }
        else {
            var mirrorEl = this.mirrorSelector ?
                document.querySelector(this.mirrorSelector) :
                null;
            if (mirrorEl) {
                this.currentMirrorEl = mirrorEl;
                mirrorEl.style.visibility = 'hidden';
            }
        }
    };
    return InferredElementDragging;
}(ElementDragging));

/*
Bridges third-party drag-n-drop systems with FullCalendar.
Must be instantiated and destroyed by caller.
*/
var ThirdPartyDraggable = /** @class */ (function () {
    function ThirdPartyDraggable(containerOrSettings, settings) {
        var containerEl = document;
        if (
        // wish we could just test instanceof EventTarget, but doesn't work in IE11
        containerOrSettings === document ||
            containerOrSettings instanceof Element) {
            containerEl = containerOrSettings;
            settings = settings || {};
        }
        else {
            settings = (containerOrSettings || {});
        }
        var dragging = this.dragging = new InferredElementDragging(containerEl);
        if (typeof settings.itemSelector === 'string') {
            dragging.pointer.selector = settings.itemSelector;
        }
        else if (containerEl === document) {
            dragging.pointer.selector = '[data-event]';
        }
        if (typeof settings.mirrorSelector === 'string') {
            dragging.mirrorSelector = settings.mirrorSelector;
        }
        new ExternalElementDragging(dragging, settings.eventData);
    }
    ThirdPartyDraggable.prototype.destroy = function () {
        this.dragging.destroy();
    };
    return ThirdPartyDraggable;
}());

var main = createPlugin({
    componentInteractions: [DateClicking, DateSelecting, EventDragging, EventDragging$1],
    calendarInteractions: [UnselectAuto],
    elementDraggingImpl: FeaturefulElementDragging
});

export default main;
export { ExternalDraggable as Draggable, FeaturefulElementDragging, PointerDragging, ThirdPartyDraggable };

/*!
FullCalendar Interaction Plugin v4.3.0
Docs & License: https://fullcalendar.io/
(c) 2019 Adam Shaw
*/

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@fullcalendar/core')) :
    typeof define === 'function' && define.amd ? define(['exports', '@fullcalendar/core'], factory) :
    (global = global || self, factory(global.FullCalendarInteraction = {}, global.FullCalendar));
}(this, function (exports, core) { 'use strict';

    /*! *****************************************************************************
    Copyright (c) Microsoft Corporation. All rights reserved.
    Licensed under the Apache License, Version 2.0 (the "License"); you may not use
    this file except in compliance with the License. You may obtain a copy of the
    License at http://www.apache.org/licenses/LICENSE-2.0

    THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
    KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
    WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
    MERCHANTABLITY OR NON-INFRINGEMENT.

    See the Apache Version 2.0 License for specific language governing permissions
    and limitations under the License.
    ***************************************************************************** */
    /* global Reflect, Promise */

    function __extends(d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    }

    core.config.touchMouseIgnoreWait = 500;
    var ignoreMouseDepth = 0;
    var listenerCnt = 0;
    var isWindowTouchMoveCancelled = false;
    /*
    Uses a "pointer" abstraction, which monitors UI events for both mouse and touch.
    Tracks when the pointer "drags" on a certain element, meaning down+move+up.

    Also, tracks if there was touch-scrolling.
    Also, can prevent touch-scrolling from happening.
    Also, can fire pointermove events when scrolling happens underneath, even when no real pointer movement.

    emits:
    - pointerdown
    - pointermove
    - pointerup
    */
    var PointerDragging = /** @class */ (function () {
        function PointerDragging(containerEl) {
            var _this = this;
            this.subjectEl = null;
            this.downEl = null;
            // options that can be directly assigned by caller
            this.selector = ''; // will cause subjectEl in all emitted events to be this element
            this.handleSelector = '';
            this.shouldIgnoreMove = false;
            this.shouldWatchScroll = true; // for simulating pointermove on scroll
            // internal states
            this.isDragging = false;
            this.isTouchDragging = false;
            this.wasTouchScroll = false;
            // Mouse
            // ----------------------------------------------------------------------------------------------------
            this.handleMouseDown = function (ev) {
                if (!_this.shouldIgnoreMouse() &&
                    isPrimaryMouseButton(ev) &&
                    _this.tryStart(ev)) {
                    var pev = _this.createEventFromMouse(ev, true);
                    _this.emitter.trigger('pointerdown', pev);
                    _this.initScrollWatch(pev);
                    if (!_this.shouldIgnoreMove) {
                        document.addEventListener('mousemove', _this.handleMouseMove);
                    }
                    document.addEventListener('mouseup', _this.handleMouseUp);
                }
            };
            this.handleMouseMove = function (ev) {
                var pev = _this.createEventFromMouse(ev);
                _this.recordCoords(pev);
                _this.emitter.trigger('pointermove', pev);
            };
            this.handleMouseUp = function (ev) {
                document.removeEventListener('mousemove', _this.handleMouseMove);
                document.removeEventListener('mouseup', _this.handleMouseUp);
                _this.emitter.trigger('pointerup', _this.createEventFromMouse(ev));
                _this.cleanup(); // call last so that pointerup has access to props
            };
            // Touch
            // ----------------------------------------------------------------------------------------------------
            this.handleTouchStart = function (ev) {
                if (_this.tryStart(ev)) {
                    _this.isTouchDragging = true;
                    var pev = _this.createEventFromTouch(ev, true);
                    _this.emitter.trigger('pointerdown', pev);
                    _this.initScrollWatch(pev);
                    // unlike mouse, need to attach to target, not document
                    // https://stackoverflow.com/a/45760014
                    var target = ev.target;
                    if (!_this.shouldIgnoreMove) {
                        target.addEventListener('touchmove', _this.handleTouchMove);
                    }
                    target.addEventListener('touchend', _this.handleTouchEnd);
                    target.addEventListener('touchcancel', _this.handleTouchEnd); // treat it as a touch end
                    // attach a handler to get called when ANY scroll action happens on the page.
                    // this was impossible to do with normal on/off because 'scroll' doesn't bubble.
                    // http://stackoverflow.com/a/32954565/96342
                    window.addEventListener('scroll', _this.handleTouchScroll, true // useCapture
                    );
                }
            };
            this.handleTouchMove = function (ev) {
                var pev = _this.createEventFromTouch(ev);
                _this.recordCoords(pev);
                _this.emitter.trigger('pointermove', pev);
            };
            this.handleTouchEnd = function (ev) {
                if (_this.isDragging) { // done to guard against touchend followed by touchcancel
                    var target = ev.target;
                    target.removeEventListener('touchmove', _this.handleTouchMove);
                    target.removeEventListener('touchend', _this.handleTouchEnd);
                    target.removeEventListener('touchcancel', _this.handleTouchEnd);
                    window.removeEventListener('scroll', _this.handleTouchScroll, true); // useCaptured=true
                    _this.emitter.trigger('pointerup', _this.createEventFromTouch(ev));
                    _this.cleanup(); // call last so that pointerup has access to props
                    _this.isTouchDragging = false;
                    startIgnoringMouse();
                }
            };
            this.handleTouchScroll = function () {
                _this.wasTouchScroll = true;
            };
            this.handleScroll = function (ev) {
                if (!_this.shouldIgnoreMove) {
                    var pageX = (window.pageXOffset - _this.prevScrollX) + _this.prevPageX;
                    var pageY = (window.pageYOffset - _this.prevScrollY) + _this.prevPageY;
                    _this.emitter.trigger('pointermove', {
                        origEvent: ev,
                        isTouch: _this.isTouchDragging,
                        subjectEl: _this.subjectEl,
                        pageX: pageX,
                        pageY: pageY,
                        deltaX: pageX - _this.origPageX,
                        deltaY: pageY - _this.origPageY
                    });
                }
            };
            this.containerEl = containerEl;
            this.emitter = new core.EmitterMixin();
            containerEl.addEventListener('mousedown', this.handleMouseDown);
            containerEl.addEventListener('touchstart', this.handleTouchStart, { passive: true });
            listenerCreated();
        }
        PointerDragging.prototype.destroy = function () {
            this.containerEl.removeEventListener('mousedown', this.handleMouseDown);
            this.containerEl.removeEventListener('touchstart', this.handleTouchStart, { passive: true });
            listenerDestroyed();
        };
        PointerDragging.prototype.tryStart = function (ev) {
            var subjectEl = this.querySubjectEl(ev);
            var downEl = ev.target;
            if (subjectEl &&
                (!this.handleSelector || core.elementClosest(downEl, this.handleSelector))) {
                this.subjectEl = subjectEl;
                this.downEl = downEl;
                this.isDragging = true; // do this first so cancelTouchScroll will work
                this.wasTouchScroll = false;
                return true;
            }
            return false;
        };
        PointerDragging.prototype.cleanup = function () {
            isWindowTouchMoveCancelled = false;
            this.isDragging = false;
            this.subjectEl = null;
            this.downEl = null;
            // keep wasTouchScroll around for later access
            this.destroyScrollWatch();
        };
        PointerDragging.prototype.querySubjectEl = function (ev) {
            if (this.selector) {
                return core.elementClosest(ev.target, this.selector);
            }
            else {
                return this.containerEl;
            }
        };
        PointerDragging.prototype.shouldIgnoreMouse = function () {
            return ignoreMouseDepth || this.isTouchDragging;
        };
        // can be called by user of this class, to cancel touch-based scrolling for the current drag
        PointerDragging.prototype.cancelTouchScroll = function () {
            if (this.isDragging) {
                isWindowTouchMoveCancelled = true;
            }
        };
        // Scrolling that simulates pointermoves
        // ----------------------------------------------------------------------------------------------------
        PointerDragging.prototype.initScrollWatch = function (ev) {
            if (this.shouldWatchScroll) {
                this.recordCoords(ev);
                window.addEventListener('scroll', this.handleScroll, true); // useCapture=true
            }
        };
        PointerDragging.prototype.recordCoords = function (ev) {
            if (this.shouldWatchScroll) {
                this.prevPageX = ev.pageX;
                this.prevPageY = ev.pageY;
                this.prevScrollX = window.pageXOffset;
                this.prevScrollY = window.pageYOffset;
            }
        };
        PointerDragging.prototype.destroyScrollWatch = function () {
            if (this.shouldWatchScroll) {
                window.removeEventListener('scroll', this.handleScroll, true); // useCaptured=true
            }
        };
        // Event Normalization
        // ----------------------------------------------------------------------------------------------------
        PointerDragging.prototype.createEventFromMouse = function (ev, isFirst) {
            var deltaX = 0;
            var deltaY = 0;
            // TODO: repeat code
            if (isFirst) {
                this.origPageX = ev.pageX;
                this.origPageY = ev.pageY;
            }
            else {
                deltaX = ev.pageX - this.origPageX;
                deltaY = ev.pageY - this.origPageY;
            }
            return {
                origEvent: ev,
                isTouch: false,
                subjectEl: this.subjectEl,
                pageX: ev.pageX,
                pageY: ev.pageY,
                deltaX: deltaX,
                deltaY: deltaY
            };
        };
        PointerDragging.prototype.createEventFromTouch = function (ev, isFirst) {
            var touches = ev.touches;
            var pageX;
            var pageY;
            var deltaX = 0;
            var deltaY = 0;
            // if touch coords available, prefer,
            // because FF would give bad ev.pageX ev.pageY
            if (touches && touches.length) {
                pageX = touches[0].pageX;
                pageY = touches[0].pageY;
            }
            else {
                pageX = ev.pageX;
                pageY = ev.pageY;
            }
            // TODO: repeat code
            if (isFirst) {
                this.origPageX = pageX;
                this.origPageY = pageY;
            }
            else {
                deltaX = pageX - this.origPageX;
                deltaY = pageY - this.origPageY;
            }
            return {
                origEvent: ev,
                isTouch: true,
                subjectEl: this.subjectEl,
                pageX: pageX,
                pageY: pageY,
                deltaX: deltaX,
                deltaY: deltaY
            };
        };
        return PointerDragging;
    }());
    // Returns a boolean whether this was a left mouse click and no ctrl key (which means right click on Mac)
    function isPrimaryMouseButton(ev) {
        return ev.button === 0 && !ev.ctrlKey;
    }
    // Ignoring fake mouse events generated by touch
    // ----------------------------------------------------------------------------------------------------
    function startIgnoringMouse() {
        ignoreMouseDepth++;
        setTimeout(function () {
            ignoreMouseDepth--;
        }, core.config.touchMouseIgnoreWait);
    }
    // We want to attach touchmove as early as possible for Safari
    // ----------------------------------------------------------------------------------------------------
    function listenerCreated() {
        if (!(listenerCnt++)) {
            window.addEventListener('touchmove', onWindowTouchMove, { passive: false });
        }
    }
    function listenerDestroyed() {
        if (!(--listenerCnt)) {
            window.removeEventListener('touchmove', onWindowTouchMove, { passive: false });
        }
    }
    function onWindowTouchMove(ev) {
        if (isWindowTouchMoveCancelled) {
            ev.preventDefault();
        }
    }

    /*
    An effect in which an element follows the movement of a pointer across the screen.
    The moving element is a clone of some other element.
    Must call start + handleMove + stop.
    */
    var ElementMirror = /** @class */ (function () {
        function ElementMirror() {
            this.isVisible = false; // must be explicitly enabled
            this.sourceEl = null;
            this.mirrorEl = null;
            this.sourceElRect = null; // screen coords relative to viewport
            // options that can be set directly by caller
            this.parentNode = document.body;
            this.zIndex = 9999;
            this.revertDuration = 0;
        }
        ElementMirror.prototype.start = function (sourceEl, pageX, pageY) {
            this.sourceEl = sourceEl;
            this.sourceElRect = this.sourceEl.getBoundingClientRect();
            this.origScreenX = pageX - window.pageXOffset;
            this.origScreenY = pageY - window.pageYOffset;
            this.deltaX = 0;
            this.deltaY = 0;
            this.updateElPosition();
        };
        ElementMirror.prototype.handleMove = function (pageX, pageY) {
            this.deltaX = (pageX - window.pageXOffset) - this.origScreenX;
            this.deltaY = (pageY - window.pageYOffset) - this.origScreenY;
            this.updateElPosition();
        };
        // can be called before start
        ElementMirror.prototype.setIsVisible = function (bool) {
            if (bool) {
                if (!this.isVisible) {
                    if (this.mirrorEl) {
                        this.mirrorEl.style.display = '';
                    }
                    this.isVisible = bool; // needs to happen before updateElPosition
                    this.updateElPosition(); // because was not updating the position while invisible
                }
            }
            else {
                if (this.isVisible) {
                    if (this.mirrorEl) {
                        this.mirrorEl.style.display = 'none';
                    }
                    this.isVisible = bool;
                }
            }
        };
        // always async
        ElementMirror.prototype.stop = function (needsRevertAnimation, callback) {
            var _this = this;
            var done = function () {
                _this.cleanup();
                callback();
            };
            if (needsRevertAnimation &&
                this.mirrorEl &&
                this.isVisible &&
                this.revertDuration && // if 0, transition won't work
                (this.deltaX || this.deltaY) // if same coords, transition won't work
            ) {
                this.doRevertAnimation(done, this.revertDuration);
            }
            else {
                setTimeout(done, 0);
            }
        };
        ElementMirror.prototype.doRevertAnimation = function (callback, revertDuration) {
            var mirrorEl = this.mirrorEl;
            var finalSourceElRect = this.sourceEl.getBoundingClientRect(); // because autoscrolling might have happened
            mirrorEl.style.transition =
                'top ' + revertDuration + 'ms,' +
                    'left ' + revertDuration + 'ms';
            core.applyStyle(mirrorEl, {
                left: finalSourceElRect.left,
                top: finalSourceElRect.top
            });
            core.whenTransitionDone(mirrorEl, function () {
                mirrorEl.style.transition = '';
                callback();
            });
        };
        ElementMirror.prototype.cleanup = function () {
            if (this.mirrorEl) {
                core.removeElement(this.mirrorEl);
                this.mirrorEl = null;
            }
            this.sourceEl = null;
        };
        ElementMirror.prototype.updateElPosition = function () {
            if (this.sourceEl && this.isVisible) {
                core.applyStyle(this.getMirrorEl(), {
                    left: this.sourceElRect.left + this.deltaX,
                    top: this.sourceElRect.top + this.deltaY
                });
            }
        };
        ElementMirror.prototype.getMirrorEl = function () {
            var sourceElRect = this.sourceElRect;
            var mirrorEl = this.mirrorEl;
            if (!mirrorEl) {
                mirrorEl = this.mirrorEl = this.sourceEl.cloneNode(true); // cloneChildren=true
                // we don't want long taps or any mouse interaction causing selection/menus.
                // would use preventSelection(), but that prevents selectstart, causing problems.
                mirrorEl.classList.add('fc-unselectable');
                mirrorEl.classList.add('fc-dragging');
                core.applyStyle(mirrorEl, {
                    position: 'fixed',
                    zIndex: this.zIndex,
                    visibility: '',
                    boxSizing: 'border-box',
                    width: sourceElRect.right - sourceElRect.left,
                    height: sourceElRect.bottom - sourceElRect.top,
                    right: 'auto',
                    bottom: 'auto',
                    margin: 0
                });
                this.parentNode.appendChild(mirrorEl);
            }
            return mirrorEl;
        };
        return ElementMirror;
    }());

    /*
    Is a cache for a given element's scroll information (all the info that ScrollController stores)
    in addition the "client rectangle" of the element.. the area within the scrollbars.

    The cache can be in one of two modes:
    - doesListening:false - ignores when the container is scrolled by someone else
    - doesListening:true - watch for scrolling and update the cache
    */
    var ScrollGeomCache = /** @class */ (function (_super) {
        __extends(ScrollGeomCache, _super);
        function ScrollGeomCache(scrollController, doesListening) {
            var _this = _super.call(this) || this;
            _this.handleScroll = function () {
                _this.scrollTop = _this.scrollController.getScrollTop();
                _this.scrollLeft = _this.scrollController.getScrollLeft();
                _this.handleScrollChange();
            };
            _this.scrollController = scrollController;
            _this.doesListening = doesListening;
            _this.scrollTop = _this.origScrollTop = scrollController.getScrollTop();
            _this.scrollLeft = _this.origScrollLeft = scrollController.getScrollLeft();
            _this.scrollWidth = scrollController.getScrollWidth();
            _this.scrollHeight = scrollController.getScrollHeight();
            _this.clientWidth = scrollController.getClientWidth();
            _this.clientHeight = scrollController.getClientHeight();
            _this.clientRect = _this.computeClientRect(); // do last in case it needs cached values
            if (_this.doesListening) {
                _this.getEventTarget().addEventListener('scroll', _this.handleScroll);
            }
            return _this;
        }
        ScrollGeomCache.prototype.destroy = function () {
            if (this.doesListening) {
                this.getEventTarget().removeEventListener('scroll', this.handleScroll);
            }
        };
        ScrollGeomCache.prototype.getScrollTop = function () {
            return this.scrollTop;
        };
        ScrollGeomCache.prototype.getScrollLeft = function () {
            return this.scrollLeft;
        };
        ScrollGeomCache.prototype.setScrollTop = function (top) {
            this.scrollController.setScrollTop(top);
            if (!this.doesListening) {
                // we are not relying on the element to normalize out-of-bounds scroll values
                // so we need to sanitize ourselves
                this.scrollTop = Math.max(Math.min(top, this.getMaxScrollTop()), 0);
                this.handleScrollChange();
            }
        };
        ScrollGeomCache.prototype.setScrollLeft = function (top) {
            this.scrollController.setScrollLeft(top);
            if (!this.doesListening) {
                // we are not relying on the element to normalize out-of-bounds scroll values
                // so we need to sanitize ourselves
                this.scrollLeft = Math.max(Math.min(top, this.getMaxScrollLeft()), 0);
                this.handleScrollChange();
            }
        };
        ScrollGeomCache.prototype.getClientWidth = function () {
            return this.clientWidth;
        };
        ScrollGeomCache.prototype.getClientHeight = function () {
            return this.clientHeight;
        };
        ScrollGeomCache.prototype.getScrollWidth = function () {
            return this.scrollWidth;
        };
        ScrollGeomCache.prototype.getScrollHeight = function () {
            return this.scrollHeight;
        };
        ScrollGeomCache.prototype.handleScrollChange = function () {
        };
        return ScrollGeomCache;
    }(core.ScrollController));
    var ElementScrollGeomCache = /** @class */ (function (_super) {
        __extends(ElementScrollGeomCache, _super);
        function ElementScrollGeomCache(el, doesListening) {
            return _super.call(this, new core.ElementScrollController(el), doesListening) || this;
        }
        ElementScrollGeomCache.prototype.getEventTarget = function () {
            return this.scrollController.el;
        };
        ElementScrollGeomCache.prototype.computeClientRect = function () {
            return core.computeInnerRect(this.scrollController.el);
        };
        return ElementScrollGeomCache;
    }(ScrollGeomCache));
    var WindowScrollGeomCache = /** @class */ (function (_super) {
        __extends(WindowScrollGeomCache, _super);
        function WindowScrollGeomCache(doesListening) {
            return _super.call(this, new core.WindowScrollController(), doesListening) || this;
        }
        WindowScrollGeomCache.prototype.getEventTarget = function () {
            return window;
        };
        WindowScrollGeomCache.prototype.computeClientRect = function () {
            return {
                left: this.scrollLeft,
                right: this.scrollLeft + this.clientWidth,
                top: this.scrollTop,
                bottom: this.scrollTop + this.clientHeight
            };
        };
        // the window is the only scroll object that changes it's rectangle relative
        // to the document's topleft as it scrolls
        WindowScrollGeomCache.prototype.handleScrollChange = function () {
            this.clientRect = this.computeClientRect();
        };
        return WindowScrollGeomCache;
    }(ScrollGeomCache));

    // If available we are using native "performance" API instead of "Date"
    // Read more about it on MDN:
    // https://developer.mozilla.org/en-US/docs/Web/API/Performance
    var getTime = typeof performance === 'function' ? performance.now : Date.now;
    /*
    For a pointer interaction, automatically scrolls certain scroll containers when the pointer
    approaches the edge.

    The caller must call start + handleMove + stop.
    */
    var AutoScroller = /** @class */ (function () {
        function AutoScroller() {
            var _this = this;
            // options that can be set by caller
            this.isEnabled = true;
            this.scrollQuery = [window, '.fc-scroller'];
            this.edgeThreshold = 50; // pixels
            this.maxVelocity = 300; // pixels per second
            // internal state
            this.pointerScreenX = null;
            this.pointerScreenY = null;
            this.isAnimating = false;
            this.scrollCaches = null;
            // protect against the initial pointerdown being too close to an edge and starting the scroll
            this.everMovedUp = false;
            this.everMovedDown = false;
            this.everMovedLeft = false;
            this.everMovedRight = false;
            this.animate = function () {
                if (_this.isAnimating) { // wasn't cancelled between animation calls
                    var edge = _this.computeBestEdge(_this.pointerScreenX + window.pageXOffset, _this.pointerScreenY + window.pageYOffset);
                    if (edge) {
                        var now = getTime();
                        _this.handleSide(edge, (now - _this.msSinceRequest) / 1000);
                        _this.requestAnimation(now);
                    }
                    else {
                        _this.isAnimating = false; // will stop animation
                    }
                }
            };
        }
        AutoScroller.prototype.start = function (pageX, pageY) {
            if (this.isEnabled) {
                this.scrollCaches = this.buildCaches();
                this.pointerScreenX = null;
                this.pointerScreenY = null;
                this.everMovedUp = false;
                this.everMovedDown = false;
                this.everMovedLeft = false;
                this.everMovedRight = false;
                this.handleMove(pageX, pageY);
            }
        };
        AutoScroller.prototype.handleMove = function (pageX, pageY) {
            if (this.isEnabled) {
                var pointerScreenX = pageX - window.pageXOffset;
                var pointerScreenY = pageY - window.pageYOffset;
                var yDelta = this.pointerScreenY === null ? 0 : pointerScreenY - this.pointerScreenY;
                var xDelta = this.pointerScreenX === null ? 0 : pointerScreenX - this.pointerScreenX;
                if (yDelta < 0) {
                    this.everMovedUp = true;
                }
                else if (yDelta > 0) {
                    this.everMovedDown = true;
                }
                if (xDelta < 0) {
                    this.everMovedLeft = true;
                }
                else if (xDelta > 0) {
                    this.everMovedRight = true;
                }
                this.pointerScreenX = pointerScreenX;
                this.pointerScreenY = pointerScreenY;
                if (!this.isAnimating) {
                    this.isAnimating = true;
                    this.requestAnimation(getTime());
                }
            }
        };
        AutoScroller.prototype.stop = function () {
            if (this.isEnabled) {
                this.isAnimating = false; // will stop animation
                for (var _i = 0, _a = this.scrollCaches; _i < _a.length; _i++) {
                    var scrollCache = _a[_i];
                    scrollCache.destroy();
                }
                this.scrollCaches = null;
            }
        };
        AutoScroller.prototype.requestAnimation = function (now) {
            this.msSinceRequest = now;
            requestAnimationFrame(this.animate);
        };
        AutoScroller.prototype.handleSide = function (edge, seconds) {
            var scrollCache = edge.scrollCache;
            var edgeThreshold = this.edgeThreshold;
            var invDistance = edgeThreshold - edge.distance;
            var velocity = // the closer to the edge, the faster we scroll
             (invDistance * invDistance) / (edgeThreshold * edgeThreshold) * // quadratic
                this.maxVelocity * seconds;
            var sign = 1;
            switch (edge.name) {
                case 'left':
                    sign = -1;
                // falls through
                case 'right':
                    scrollCache.setScrollLeft(scrollCache.getScrollLeft() + velocity * sign);
                    break;
                case 'top':
                    sign = -1;
                // falls through
                case 'bottom':
                    scrollCache.setScrollTop(scrollCache.getScrollTop() + velocity * sign);
                    break;
            }
        };
        // left/top are relative to document topleft
        AutoScroller.prototype.computeBestEdge = function (left, top) {
            var edgeThreshold = this.edgeThreshold;
            var bestSide = null;
            for (var _i = 0, _a = this.scrollCaches; _i < _a.length; _i++) {
                var scrollCache = _a[_i];
                var rect = scrollCache.clientRect;
                var leftDist = left - rect.left;
                var rightDist = rect.right - left;
                var topDist = top - rect.top;
                var bottomDist = rect.bottom - top;
                // completely within the rect?
                if (leftDist >= 0 && rightDist >= 0 && topDist >= 0 && bottomDist >= 0) {
                    if (topDist <= edgeThreshold && this.everMovedUp && scrollCache.canScrollUp() &&
                        (!bestSide || bestSide.distance > topDist)) {
                        bestSide = { scrollCache: scrollCache, name: 'top', distance: topDist };
                    }
                    if (bottomDist <= edgeThreshold && this.everMovedDown && scrollCache.canScrollDown() &&
                        (!bestSide || bestSide.distance > bottomDist)) {
                        bestSide = { scrollCache: scrollCache, name: 'bottom', distance: bottomDist };
                    }
                    if (leftDist <= edgeThreshold && this.everMovedLeft && scrollCache.canScrollLeft() &&
                        (!bestSide || bestSide.distance > leftDist)) {
                        bestSide = { scrollCache: scrollCache, name: 'left', distance: leftDist };
                    }
                    if (rightDist <= edgeThreshold && this.everMovedRight && scrollCache.canScrollRight() &&
                        (!bestSide || bestSide.distance > rightDist)) {
                        bestSide = { scrollCache: scrollCache, name: 'right', distance: rightDist };
                    }
                }
            }
            return bestSide;
        };
        AutoScroller.prototype.buildCaches = function () {
            return this.queryScrollEls().map(function (el) {
                if (el === window) {
                    return new WindowScrollGeomCache(false); // false = don't listen to user-generated scrolls
                }
                else {
                    return new ElementScrollGeomCache(el, false); // false = don't listen to user-generated scrolls
                }
            });
        };
        AutoScroller.prototype.queryScrollEls = function () {
            var els = [];
            for (var _i = 0, _a = this.scrollQuery; _i < _a.length; _i++) {
                var query = _a[_i];
                if (typeof query === 'object') {
                    els.push(query);
                }
                else {
                    els.push.apply(els, Array.prototype.slice.call(document.querySelectorAll(query)));
                }
            }
            return els;
        };
        return AutoScroller;
    }());

    /*
    Monitors dragging on an element. Has a number of high-level features:
    - minimum distance required before dragging
    - minimum wait time ("delay") before dragging
    - a mirror element that follows the pointer
    */
    var FeaturefulElementDragging = /** @class */ (function (_super) {
        __extends(FeaturefulElementDragging, _super);
        function FeaturefulElementDragging(containerEl) {
            var _this = _super.call(this, containerEl) || this;
            // options that can be directly set by caller
            // the caller can also set the PointerDragging's options as well
            _this.delay = null;
            _this.minDistance = 0;
            _this.touchScrollAllowed = true; // prevents drag from starting and blocks scrolling during drag
            _this.mirrorNeedsRevert = false;
            _this.isInteracting = false; // is the user validly moving the pointer? lasts until pointerup
            _this.isDragging = false; // is it INTENTFULLY dragging? lasts until after revert animation
            _this.isDelayEnded = false;
            _this.isDistanceSurpassed = false;
            _this.delayTimeoutId = null;
            _this.onPointerDown = function (ev) {
                if (!_this.isDragging) { // so new drag doesn't happen while revert animation is going
                    _this.isInteracting = true;
                    _this.isDelayEnded = false;
                    _this.isDistanceSurpassed = false;
                    core.preventSelection(document.body);
                    core.preventContextMenu(document.body);
                    // prevent links from being visited if there's an eventual drag.
                    // also prevents selection in older browsers (maybe?).
                    // not necessary for touch, besides, browser would complain about passiveness.
                    if (!ev.isTouch) {
                        ev.origEvent.preventDefault();
                    }
                    _this.emitter.trigger('pointerdown', ev);
                    if (!_this.pointer.shouldIgnoreMove) {
                        // actions related to initiating dragstart+dragmove+dragend...
                        _this.mirror.setIsVisible(false); // reset. caller must set-visible
                        _this.mirror.start(ev.subjectEl, ev.pageX, ev.pageY); // must happen on first pointer down
                        _this.startDelay(ev);
                        if (!_this.minDistance) {
                            _this.handleDistanceSurpassed(ev);
                        }
                    }
                }
            };
            _this.onPointerMove = function (ev) {
                if (_this.isInteracting) { // if false, still waiting for previous drag's revert
                    _this.emitter.trigger('pointermove', ev);
                    if (!_this.isDistanceSurpassed) {
                        var minDistance = _this.minDistance;
                        var distanceSq = void 0; // current distance from the origin, squared
                        var deltaX = ev.deltaX, deltaY = ev.deltaY;
                        distanceSq = deltaX * deltaX + deltaY * deltaY;
                        if (distanceSq >= minDistance * minDistance) { // use pythagorean theorem
                            _this.handleDistanceSurpassed(ev);
                        }
                    }
                    if (_this.isDragging) {
                        // a real pointer move? (not one simulated by scrolling)
                        if (ev.origEvent.type !== 'scroll') {
                            _this.mirror.handleMove(ev.pageX, ev.pageY);
                            _this.autoScroller.handleMove(ev.pageX, ev.pageY);
                        }
                        _this.emitter.trigger('dragmove', ev);
                    }
                }
            };
            _this.onPointerUp = function (ev) {
                if (_this.isInteracting) { // if false, still waiting for previous drag's revert
                    _this.isInteracting = false;
                    core.allowSelection(document.body);
                    core.allowContextMenu(document.body);
                    _this.emitter.trigger('pointerup', ev); // can potentially set mirrorNeedsRevert
                    if (_this.isDragging) {
                        _this.autoScroller.stop();
                        _this.tryStopDrag(ev); // which will stop the mirror
                    }
                    if (_this.delayTimeoutId) {
                        clearTimeout(_this.delayTimeoutId);
                        _this.delayTimeoutId = null;
                    }
                }
            };
            var pointer = _this.pointer = new PointerDragging(containerEl);
            pointer.emitter.on('pointerdown', _this.onPointerDown);
            pointer.emitter.on('pointermove', _this.onPointerMove);
            pointer.emitter.on('pointerup', _this.onPointerUp);
            _this.mirror = new ElementMirror();
            _this.autoScroller = new AutoScroller();
            return _this;
        }
        FeaturefulElementDragging.prototype.destroy = function () {
            this.pointer.destroy();
        };
        FeaturefulElementDragging.prototype.startDelay = function (ev) {
            var _this = this;
            if (typeof this.delay === 'number') {
                this.delayTimeoutId = setTimeout(function () {
                    _this.delayTimeoutId = null;
                    _this.handleDelayEnd(ev);
                }, this.delay); // not assignable to number!
            }
            else {
                this.handleDelayEnd(ev);
            }
        };
        FeaturefulElementDragging.prototype.handleDelayEnd = function (ev) {
            this.isDelayEnded = true;
            this.tryStartDrag(ev);
        };
        FeaturefulElementDragging.prototype.handleDistanceSurpassed = function (ev) {
            this.isDistanceSurpassed = true;
            this.tryStartDrag(ev);
        };
        FeaturefulElementDragging.prototype.tryStartDrag = function (ev) {
            if (this.isDelayEnded && this.isDistanceSurpassed) {
                if (!this.pointer.wasTouchScroll || this.touchScrollAllowed) {
                    this.isDragging = true;
                    this.mirrorNeedsRevert = false;
                    this.autoScroller.start(ev.pageX, ev.pageY);
                    this.emitter.trigger('dragstart', ev);
                    if (this.touchScrollAllowed === false) {
                        this.pointer.cancelTouchScroll();
                    }
                }
            }
        };
        FeaturefulElementDragging.prototype.tryStopDrag = function (ev) {
            // .stop() is ALWAYS asynchronous, which we NEED because we want all pointerup events
            // that come from the document to fire beforehand. much more convenient this way.
            this.mirror.stop(this.mirrorNeedsRevert, this.stopDrag.bind(this, ev) // bound with args
            );
        };
        FeaturefulElementDragging.prototype.stopDrag = function (ev) {
            this.isDragging = false;
            this.emitter.trigger('dragend', ev);
        };
        // fill in the implementations...
        FeaturefulElementDragging.prototype.setIgnoreMove = function (bool) {
            this.pointer.shouldIgnoreMove = bool;
        };
        FeaturefulElementDragging.prototype.setMirrorIsVisible = function (bool) {
            this.mirror.setIsVisible(bool);
        };
        FeaturefulElementDragging.prototype.setMirrorNeedsRevert = function (bool) {
            this.mirrorNeedsRevert = bool;
        };
        FeaturefulElementDragging.prototype.setAutoScrollEnabled = function (bool) {
            this.autoScroller.isEnabled = bool;
        };
        return FeaturefulElementDragging;
    }(core.ElementDragging));

    /*
    When this class is instantiated, it records the offset of an element (relative to the document topleft),
    and continues to monitor scrolling, updating the cached coordinates if it needs to.
    Does not access the DOM after instantiation, so highly performant.

    Also keeps track of all scrolling/overflow:hidden containers that are parents of the given element
    and an determine if a given point is inside the combined clipping rectangle.
    */
    var OffsetTracker = /** @class */ (function () {
        function OffsetTracker(el) {
            this.origRect = core.computeRect(el);
            // will work fine for divs that have overflow:hidden
            this.scrollCaches = core.getClippingParents(el).map(function (el) {
                return new ElementScrollGeomCache(el, true); // listen=true
            });
        }
        OffsetTracker.prototype.destroy = function () {
            for (var _i = 0, _a = this.scrollCaches; _i < _a.length; _i++) {
                var scrollCache = _a[_i];
                scrollCache.destroy();
            }
        };
        OffsetTracker.prototype.computeLeft = function () {
            var left = this.origRect.left;
            for (var _i = 0, _a = this.scrollCaches; _i < _a.length; _i++) {
                var scrollCache = _a[_i];
                left += scrollCache.origScrollLeft - scrollCache.getScrollLeft();
            }
            return left;
        };
        OffsetTracker.prototype.computeTop = function () {
            var top = this.origRect.top;
            for (var _i = 0, _a = this.scrollCaches; _i < _a.length; _i++) {
                var scrollCache = _a[_i];
                top += scrollCache.origScrollTop - scrollCache.getScrollTop();
            }
            return top;
        };
        OffsetTracker.prototype.isWithinClipping = function (pageX, pageY) {
            var point = { left: pageX, top: pageY };
            for (var _i = 0, _a = this.scrollCaches; _i < _a.length; _i++) {
                var scrollCache = _a[_i];
                if (!isIgnoredClipping(scrollCache.getEventTarget()) &&
                    !core.pointInsideRect(point, scrollCache.clientRect)) {
                    return false;
                }
            }
            return true;
        };
        return OffsetTracker;
    }());
    // certain clipping containers should never constrain interactions, like  and
    // https://github.com/fullcalendar/fullcalendar/issues/3615
    function isIgnoredClipping(node) {
        var tagName = node.tagName;
        return tagName === 'HTML' || tagName === 'BODY';
    }

    /*
    Tracks movement over multiple droppable areas (aka "hits")
    that exist in one or more DateComponents.
    Relies on an existing draggable.

    emits:
    - pointerdown
    - dragstart
    - hitchange - fires initially, even if not over a hit
    - pointerup
    - (hitchange - again, to null, if ended over a hit)
    - dragend
    */
    var HitDragging = /** @class */ (function () {
        function HitDragging(dragging, droppableStore) {
            var _this = this;
            // options that can be set by caller
            this.useSubjectCenter = false;
            this.requireInitial = true; // if doesn't start out on a hit, won't emit any events
            this.initialHit = null;
            this.movingHit = null;
            this.finalHit = null; // won't ever be populated if shouldIgnoreMove
            this.handlePointerDown = function (ev) {
                var dragging = _this.dragging;
                _this.initialHit = null;
                _this.movingHit = null;
                _this.finalHit = null;
                _this.prepareHits();
                _this.processFirstCoord(ev);
                if (_this.initialHit || !_this.requireInitial) {
                    dragging.setIgnoreMove(false);
                    _this.emitter.trigger('pointerdown', ev); // TODO: fire this before computing processFirstCoord, so listeners can cancel. this gets fired by almost every handler :(
                }
                else {
                    dragging.setIgnoreMove(true);
                }
            };
            this.handleDragStart = function (ev) {
                _this.emitter.trigger('dragstart', ev);
                _this.handleMove(ev, true); // force = fire even if initially null
            };
            this.handleDragMove = function (ev) {
                _this.emitter.trigger('dragmove', ev);
                _this.handleMove(ev);
            };
            this.handlePointerUp = function (ev) {
                _this.releaseHits();
                _this.emitter.trigger('pointerup', ev);
            };
            this.handleDragEnd = function (ev) {
                if (_this.movingHit) {
                    _this.emitter.trigger('hitupdate', null, true, ev);
                }
                _this.finalHit = _this.movingHit;
                _this.movingHit = null;
                _this.emitter.trigger('dragend', ev);
            };
            this.droppableStore = droppableStore;
            dragging.emitter.on('pointerdown', this.handlePointerDown);
            dragging.emitter.on('dragstart', this.handleDragStart);
            dragging.emitter.on('dragmove', this.handleDragMove);
            dragging.emitter.on('pointerup', this.handlePointerUp);
            dragging.emitter.on('dragend', this.handleDragEnd);
            this.dragging = dragging;
            this.emitter = new core.EmitterMixin();
        }
        // sets initialHit
        // sets coordAdjust
        HitDragging.prototype.processFirstCoord = function (ev) {
            var origPoint = { left: ev.pageX, top: ev.pageY };
            var adjustedPoint = origPoint;
            var subjectEl = ev.subjectEl;
            var subjectRect;
            if (subjectEl !== document) {
                subjectRect = core.computeRect(subjectEl);
                adjustedPoint = core.constrainPoint(adjustedPoint, subjectRect);
            }
            var initialHit = this.initialHit = this.queryHitForOffset(adjustedPoint.left, adjustedPoint.top);
            if (initialHit) {
                if (this.useSubjectCenter && subjectRect) {
                    var slicedSubjectRect = core.intersectRects(subjectRect, initialHit.rect);
                    if (slicedSubjectRect) {
                        adjustedPoint = core.getRectCenter(slicedSubjectRect);
                    }
                }
                this.coordAdjust = core.diffPoints(adjustedPoint, origPoint);
            }
            else {
                this.coordAdjust = { left: 0, top: 0 };
            }
        };
        HitDragging.prototype.handleMove = function (ev, forceHandle) {
            var hit = this.queryHitForOffset(ev.pageX + this.coordAdjust.left, ev.pageY + this.coordAdjust.top);
            if (forceHandle || !isHitsEqual(this.movingHit, hit)) {
                this.movingHit = hit;
                this.emitter.trigger('hitupdate', hit, false, ev);
            }
        };
        HitDragging.prototype.prepareHits = function () {
            this.offsetTrackers = core.mapHash(this.droppableStore, function (interactionSettings) {
                interactionSettings.component.buildPositionCaches();
                return new OffsetTracker(interactionSettings.el);
            });
        };
        HitDragging.prototype.releaseHits = function () {
            var offsetTrackers = this.offsetTrackers;
            for (var id in offsetTrackers) {
                offsetTrackers[id].destroy();
            }
            this.offsetTrackers = {};
        };
        HitDragging.prototype.queryHitForOffset = function (offsetLeft, offsetTop) {
            var _a = this, droppableStore = _a.droppableStore, offsetTrackers = _a.offsetTrackers;
            var bestHit = null;
            for (var id in droppableStore) {
                var component = droppableStore[id].component;
                var offsetTracker = offsetTrackers[id];
                if (offsetTracker.isWithinClipping(offsetLeft, offsetTop)) {
                    var originLeft = offsetTracker.computeLeft();
                    var originTop = offsetTracker.computeTop();
                    var positionLeft = offsetLeft - originLeft;
                    var positionTop = offsetTop - originTop;
                    var origRect = offsetTracker.origRect;
                    var width = origRect.right - origRect.left;
                    var height = origRect.bottom - origRect.top;
                    if (
                    // must be within the element's bounds
                    positionLeft >= 0 && positionLeft < width &&
                        positionTop >= 0 && positionTop < height) {
                        var hit = component.queryHit(positionLeft, positionTop, width, height);
                        if (hit &&
                            (
                            // make sure the hit is within activeRange, meaning it's not a deal cell
                            !component.props.dateProfile || // hack for DayTile
                                core.rangeContainsRange(component.props.dateProfile.activeRange, hit.dateSpan.range)) &&
                            (!bestHit || hit.layer > bestHit.layer)) {
                            // TODO: better way to re-orient rectangle
                            hit.rect.left += originLeft;
                            hit.rect.right += originLeft;
                            hit.rect.top += originTop;
                            hit.rect.bottom += originTop;
                            bestHit = hit;
                        }
                    }
                }
            }
            return bestHit;
        };
        return HitDragging;
    }());
    function isHitsEqual(hit0, hit1) {
        if (!hit0 && !hit1) {
            return true;
        }
        if (Boolean(hit0) !== Boolean(hit1)) {
            return false;
        }
        return core.isDateSpansEqual(hit0.dateSpan, hit1.dateSpan);
    }

    /*
    Monitors when the user clicks on a specific date/time of a component.
    A pointerdown+pointerup on the same "hit" constitutes a click.
    */
    var DateClicking = /** @class */ (function (_super) {
        __extends(DateClicking, _super);
        function DateClicking(settings) {
            var _this = _super.call(this, settings) || this;
            _this.handlePointerDown = function (ev) {
                var dragging = _this.dragging;
                // do this in pointerdown (not dragend) because DOM might be mutated by the time dragend is fired
                dragging.setIgnoreMove(!_this.component.isValidDateDownEl(dragging.pointer.downEl));
            };
            // won't even fire if moving was ignored
            _this.handleDragEnd = function (ev) {
                var component = _this.component;
                var pointer = _this.dragging.pointer;
                if (!pointer.wasTouchScroll) {
                    var _a = _this.hitDragging, initialHit = _a.initialHit, finalHit = _a.finalHit;
                    if (initialHit && finalHit && isHitsEqual(initialHit, finalHit)) {
                        component.calendar.triggerDateClick(initialHit.dateSpan, initialHit.dayEl, component.view, ev.origEvent);
                    }
                }
            };
            var component = settings.component;
            // we DO want to watch pointer moves because otherwise finalHit won't get populated
            _this.dragging = new FeaturefulElementDragging(component.el);
            _this.dragging.autoScroller.isEnabled = false;
            var hitDragging = _this.hitDragging = new HitDragging(_this.dragging, core.interactionSettingsToStore(settings));
            hitDragging.emitter.on('pointerdown', _this.handlePointerDown);
            hitDragging.emitter.on('dragend', _this.handleDragEnd);
            return _this;
        }
        DateClicking.prototype.destroy = function () {
            this.dragging.destroy();
        };
        return DateClicking;
    }(core.Interaction));

    /*
    Tracks when the user selects a portion of time of a component,
    constituted by a drag over date cells, with a possible delay at the beginning of the drag.
    */
    var DateSelecting = /** @class */ (function (_super) {
        __extends(DateSelecting, _super);
        function DateSelecting(settings) {
            var _this = _super.call(this, settings) || this;
            _this.dragSelection = null;
            _this.handlePointerDown = function (ev) {
                var _a = _this, component = _a.component, dragging = _a.dragging;
                var canSelect = component.opt('selectable') &&
                    component.isValidDateDownEl(ev.origEvent.target);
                // don't bother to watch expensive moves if component won't do selection
                dragging.setIgnoreMove(!canSelect);
                // if touch, require user to hold down
                dragging.delay = ev.isTouch ? getComponentTouchDelay(component) : null;
            };
            _this.handleDragStart = function (ev) {
                _this.component.calendar.unselect(ev); // unselect previous selections
            };
            _this.handleHitUpdate = function (hit, isFinal) {
                var calendar = _this.component.calendar;
                var dragSelection = null;
                var isInvalid = false;
                if (hit) {
                    dragSelection = joinHitsIntoSelection(_this.hitDragging.initialHit, hit, calendar.pluginSystem.hooks.dateSelectionTransformers);
                    if (!dragSelection || !_this.component.isDateSelectionValid(dragSelection)) {
                        isInvalid = true;
                        dragSelection = null;
                    }
                }
                if (dragSelection) {
                    calendar.dispatch({ type: 'SELECT_DATES', selection: dragSelection });
                }
                else if (!isFinal) { // only unselect if moved away while dragging
                    calendar.dispatch({ type: 'UNSELECT_DATES' });
                }
                if (!isInvalid) {
                    core.enableCursor();
                }
                else {
                    core.disableCursor();
                }
                if (!isFinal) {
                    _this.dragSelection = dragSelection; // only clear if moved away from all hits while dragging
                }
            };
            _this.handlePointerUp = function (pev) {
                if (_this.dragSelection) {
                    // selection is already rendered, so just need to report selection
                    _this.component.calendar.triggerDateSelect(_this.dragSelection, pev);
                    _this.dragSelection = null;
                }
            };
            var component = settings.component;
            var dragging = _this.dragging = new FeaturefulElementDragging(component.el);
            dragging.touchScrollAllowed = false;
            dragging.minDistance = component.opt('selectMinDistance') || 0;
            dragging.autoScroller.isEnabled = component.opt('dragScroll');
            var hitDragging = _this.hitDragging = new HitDragging(_this.dragging, core.interactionSettingsToStore(settings));
            hitDragging.emitter.on('pointerdown', _this.handlePointerDown);
            hitDragging.emitter.on('dragstart', _this.handleDragStart);
            hitDragging.emitter.on('hitupdate', _this.handleHitUpdate);
            hitDragging.emitter.on('pointerup', _this.handlePointerUp);
            return _this;
        }
        DateSelecting.prototype.destroy = function () {
            this.dragging.destroy();
        };
        return DateSelecting;
    }(core.Interaction));
    function getComponentTouchDelay(component) {
        var delay = component.opt('selectLongPressDelay');
        if (delay == null) {
            delay = component.opt('longPressDelay');
        }
        return delay;
    }
    function joinHitsIntoSelection(hit0, hit1, dateSelectionTransformers) {
        var dateSpan0 = hit0.dateSpan;
        var dateSpan1 = hit1.dateSpan;
        var ms = [
            dateSpan0.range.start,
            dateSpan0.range.end,
            dateSpan1.range.start,
            dateSpan1.range.end
        ];
        ms.sort(core.compareNumbers);
        var props = {};
        for (var _i = 0, dateSelectionTransformers_1 = dateSelectionTransformers; _i < dateSelectionTransformers_1.length; _i++) {
            var transformer = dateSelectionTransformers_1[_i];
            var res = transformer(hit0, hit1);
            if (res === false) {
                return null;
            }
            else if (res) {
                __assign(props, res);
            }
        }
        props.range = { start: ms[0], end: ms[3] };
        props.allDay = dateSpan0.allDay;
        return props;
    }

    /*
    Given an already instantiated draggable object for one-or-more elements,
    Interprets any dragging as an attempt to drag an events that lives outside
    of a calendar onto a calendar.
    */
    var ExternalElementDragging = /** @class */ (function () {
        function ExternalElementDragging(dragging, suppliedDragMeta) {
            var _this = this;
            this.receivingCalendar = null;
            this.droppableEvent = null; // will exist for all drags, even if create:false
            this.suppliedDragMeta = null;
            this.dragMeta = null;
            this.handleDragStart = function (ev) {
                _this.dragMeta = _this.buildDragMeta(ev.subjectEl);
            };
            this.handleHitUpdate = function (hit, isFinal, ev) {
                var dragging = _this.hitDragging.dragging;
                var receivingCalendar = null;
                var droppableEvent = null;
                var isInvalid = false;
                var interaction = {
                    affectedEvents: core.createEmptyEventStore(),
                    mutatedEvents: core.createEmptyEventStore(),
                    isEvent: _this.dragMeta.create,
                    origSeg: null
                };
                if (hit) {
                    receivingCalendar = hit.component.calendar;
                    if (_this.canDropElOnCalendar(ev.subjectEl, receivingCalendar)) {
                        droppableEvent = computeEventForDateSpan(hit.dateSpan, _this.dragMeta, receivingCalendar);
                        interaction.mutatedEvents = core.eventTupleToStore(droppableEvent);
                        isInvalid = !core.isInteractionValid(interaction, receivingCalendar);
                        if (isInvalid) {
                            interaction.mutatedEvents = core.createEmptyEventStore();
                            droppableEvent = null;
                        }
                    }
                }
                _this.displayDrag(receivingCalendar, interaction);
                // show mirror if no already-rendered mirror element OR if we are shutting down the mirror (?)
                // TODO: wish we could somehow wait for dispatch to guarantee render
                dragging.setMirrorIsVisible(isFinal || !droppableEvent || !document.querySelector('.fc-mirror'));
                if (!isInvalid) {
                    core.enableCursor();
                }
                else {
                    core.disableCursor();
                }
                if (!isFinal) {
                    dragging.setMirrorNeedsRevert(!droppableEvent);
                    _this.receivingCalendar = receivingCalendar;
                    _this.droppableEvent = droppableEvent;
                }
            };
            this.handleDragEnd = function (pev) {
                var _a = _this, receivingCalendar = _a.receivingCalendar, droppableEvent = _a.droppableEvent;
                _this.clearDrag();
                if (receivingCalendar && droppableEvent) {
                    var finalHit = _this.hitDragging.finalHit;
                    var finalView = finalHit.component.view;
                    var dragMeta = _this.dragMeta;
                    var arg = __assign({}, receivingCalendar.buildDatePointApi(finalHit.dateSpan), { draggedEl: pev.subjectEl, jsEvent: pev.origEvent, view: finalView });
                    receivingCalendar.publiclyTrigger('drop', [arg]);
                    if (dragMeta.create) {
                        receivingCalendar.dispatch({
                            type: 'MERGE_EVENTS',
                            eventStore: core.eventTupleToStore(droppableEvent)
                        });
                        if (pev.isTouch) {
                            receivingCalendar.dispatch({
                                type: 'SELECT_EVENT',
                                eventInstanceId: droppableEvent.instance.instanceId
                            });
                        }
                        // signal that an external event landed
                        receivingCalendar.publiclyTrigger('eventReceive', [
                            {
                                draggedEl: pev.subjectEl,
                                event: new core.EventApi(receivingCalendar, droppableEvent.def, droppableEvent.instance),
                                view: finalView
                            }
                        ]);
                    }
                }
                _this.receivingCalendar = null;
                _this.droppableEvent = null;
            };
            var hitDragging = this.hitDragging = new HitDragging(dragging, core.interactionSettingsStore);
            hitDragging.requireInitial = false; // will start outside of a component
            hitDragging.emitter.on('dragstart', this.handleDragStart);
            hitDragging.emitter.on('hitupdate', this.handleHitUpdate);
            hitDragging.emitter.on('dragend', this.handleDragEnd);
            this.suppliedDragMeta = suppliedDragMeta;
        }
        ExternalElementDragging.prototype.buildDragMeta = function (subjectEl) {
            if (typeof this.suppliedDragMeta === 'object') {
                return core.parseDragMeta(this.suppliedDragMeta);
            }
            else if (typeof this.suppliedDragMeta === 'function') {
                return core.parseDragMeta(this.suppliedDragMeta(subjectEl));
            }
            else {
                return getDragMetaFromEl(subjectEl);
            }
        };
        ExternalElementDragging.prototype.displayDrag = function (nextCalendar, state) {
            var prevCalendar = this.receivingCalendar;
            if (prevCalendar && prevCalendar !== nextCalendar) {
                prevCalendar.dispatch({ type: 'UNSET_EVENT_DRAG' });
            }
            if (nextCalendar) {
                nextCalendar.dispatch({ type: 'SET_EVENT_DRAG', state: state });
            }
        };
        ExternalElementDragging.prototype.clearDrag = function () {
            if (this.receivingCalendar) {
                this.receivingCalendar.dispatch({ type: 'UNSET_EVENT_DRAG' });
            }
        };
        ExternalElementDragging.prototype.canDropElOnCalendar = function (el, receivingCalendar) {
            var dropAccept = receivingCalendar.opt('dropAccept');
            if (typeof dropAccept === 'function') {
                return dropAccept(el);
            }
            else if (typeof dropAccept === 'string' && dropAccept) {
                return Boolean(core.elementMatches(el, dropAccept));
            }
            return true;
        };
        return ExternalElementDragging;
    }());
    // Utils for computing event store from the DragMeta
    // ----------------------------------------------------------------------------------------------------
    function computeEventForDateSpan(dateSpan, dragMeta, calendar) {
        var defProps = __assign({}, dragMeta.leftoverProps);
        for (var _i = 0, _a = calendar.pluginSystem.hooks.externalDefTransforms; _i < _a.length; _i++) {
            var transform = _a[_i];
            __assign(defProps, transform(dateSpan, dragMeta));
        }
        var def = core.parseEventDef(defProps, dragMeta.sourceId, dateSpan.allDay, calendar.opt('forceEventDuration') || Boolean(dragMeta.duration), // hasEnd
        calendar);
        var start = dateSpan.range.start;
        // only rely on time info if drop zone is all-day,
        // otherwise, we already know the time
        if (dateSpan.allDay && dragMeta.startTime) {
            start = calendar.dateEnv.add(start, dragMeta.startTime);
        }
        var end = dragMeta.duration ?
            calendar.dateEnv.add(start, dragMeta.duration) :
            calendar.getDefaultEventEnd(dateSpan.allDay, start);
        var instance = core.createEventInstance(def.defId, { start: start, end: end });
        return { def: def, instance: instance };
    }
    // Utils for extracting data from element
    // ----------------------------------------------------------------------------------------------------
    function getDragMetaFromEl(el) {
        var str = getEmbeddedElData(el, 'event');
        var obj = str ?
            JSON.parse(str) :
            { create: false }; // if no embedded data, assume no event creation
        return core.parseDragMeta(obj);
    }
    core.config.dataAttrPrefix = '';
    function getEmbeddedElData(el, name) {
        var prefix = core.config.dataAttrPrefix;
        var prefixedName = (prefix ? prefix + '-' : '') + name;
        return el.getAttribute('data-' + prefixedName) || '';
    }

    /*
    Makes an element (that is *external* to any calendar) draggable.
    Can pass in data that determines how an event will be created when dropped onto a calendar.
    Leverages FullCalendar's internal drag-n-drop functionality WITHOUT a third-party drag system.
    */
    var ExternalDraggable = /** @class */ (function () {
        function ExternalDraggable(el, settings) {
            var _this = this;
            if (settings === void 0) { settings = {}; }
            this.handlePointerDown = function (ev) {
                var dragging = _this.dragging;
                var _a = _this.settings, minDistance = _a.minDistance, longPressDelay = _a.longPressDelay;
                dragging.minDistance =
                    minDistance != null ?
                        minDistance :
                        (ev.isTouch ? 0 : core.globalDefaults.eventDragMinDistance);
                dragging.delay =
                    ev.isTouch ? // TODO: eventually read eventLongPressDelay instead vvv
                        (longPressDelay != null ? longPressDelay : core.globalDefaults.longPressDelay) :
                        0;
            };
            this.handleDragStart = function (ev) {
                if (ev.isTouch &&
                    _this.dragging.delay &&
                    ev.subjectEl.classList.contains('fc-event')) {
                    _this.dragging.mirror.getMirrorEl().classList.add('fc-selected');
                }
            };
            this.settings = settings;
            var dragging = this.dragging = new FeaturefulElementDragging(el);
            dragging.touchScrollAllowed = false;
            if (settings.itemSelector != null) {
                dragging.pointer.selector = settings.itemSelector;
            }
            if (settings.appendTo != null) {
                dragging.mirror.parentNode = settings.appendTo; // TODO: write tests
            }
            dragging.emitter.on('pointerdown', this.handlePointerDown);
            dragging.emitter.on('dragstart', this.handleDragStart);
            new ExternalElementDragging(dragging, settings.eventData);
        }
        ExternalDraggable.prototype.destroy = function () {
            this.dragging.destroy();
        };
        return ExternalDraggable;
    }());

    /*
    Detects when a *THIRD-PARTY* drag-n-drop system interacts with elements.
    The third-party system is responsible for drawing the visuals effects of the drag.
    This class simply monitors for pointer movements and fires events.
    It also has the ability to hide the moving element (the "mirror") during the drag.
    */
    var InferredElementDragging = /** @class */ (function (_super) {
        __extends(InferredElementDragging, _super);
        function InferredElementDragging(containerEl) {
            var _this = _super.call(this, containerEl) || this;
            _this.shouldIgnoreMove = false;
            _this.mirrorSelector = '';
            _this.currentMirrorEl = null;
            _this.handlePointerDown = function (ev) {
                _this.emitter.trigger('pointerdown', ev);
                if (!_this.shouldIgnoreMove) {
                    // fire dragstart right away. does not support delay or min-distance
                    _this.emitter.trigger('dragstart', ev);
                }
            };
            _this.handlePointerMove = function (ev) {
                if (!_this.shouldIgnoreMove) {
                    _this.emitter.trigger('dragmove', ev);
                }
            };
            _this.handlePointerUp = function (ev) {
                _this.emitter.trigger('pointerup', ev);
                if (!_this.shouldIgnoreMove) {
                    // fire dragend right away. does not support a revert animation
                    _this.emitter.trigger('dragend', ev);
                }
            };
            var pointer = _this.pointer = new PointerDragging(containerEl);
            pointer.emitter.on('pointerdown', _this.handlePointerDown);
            pointer.emitter.on('pointermove', _this.handlePointerMove);
            pointer.emitter.on('pointerup', _this.handlePointerUp);
            return _this;
        }
        InferredElementDragging.prototype.destroy = function () {
            this.pointer.destroy();
        };
        InferredElementDragging.prototype.setIgnoreMove = function (bool) {
            this.shouldIgnoreMove = bool;
        };
        InferredElementDragging.prototype.setMirrorIsVisible = function (bool) {
            if (bool) {
                // restore a previously hidden element.
                // use the reference in case the selector class has already been removed.
                if (this.currentMirrorEl) {
                    this.currentMirrorEl.style.visibility = '';
                    this.currentMirrorEl = null;
                }
            }
            else {
                var mirrorEl = this.mirrorSelector ?
                    document.querySelector(this.mirrorSelector) :
                    null;
                if (mirrorEl) {
                    this.currentMirrorEl = mirrorEl;
                    mirrorEl.style.visibility = 'hidden';
                }
            }
        };
        return InferredElementDragging;
    }(core.ElementDragging));

    /*
    Bridges third-party drag-n-drop systems with FullCalendar.
    Must be instantiated and destroyed by caller.
    */
    var ThirdPartyDraggable = /** @class */ (function () {
        function ThirdPartyDraggable(containerOrSettings, settings) {
            var containerEl = document;
            if (
            // wish we could just test instanceof EventTarget, but doesn't work in IE11
            containerOrSettings === document ||
                containerOrSettings instanceof Element) {
                containerEl = containerOrSettings;
                settings = settings || {};
            }
            else {
                settings = (containerOrSettings || {});
            }
            var dragging = this.dragging = new InferredElementDragging(containerEl);
            if (typeof settings.itemSelector === 'string') {
                dragging.pointer.selector = settings.itemSelector;
            }
            else if (containerEl === document) {
                dragging.pointer.selector = '[data-event]';
            }
            if (typeof settings.mirrorSelector === 'string') {
                dragging.mirrorSelector = settings.mirrorSelector;
            }
            new ExternalElementDragging(dragging, settings.eventData);
        }
        ThirdPartyDraggable.prototype.destroy = function () {
            this.dragging.destroy();
        };
        return ThirdPartyDraggable;
    }());

    var main = core.createPlugin({
        componentInteractions: [DateClicking, DateSelecting, EventDragging, EventDragging$1],
        calendarInteractions: [UnselectAuto],
        elementDraggingImpl: FeaturefulElementDragging
    });

    exports.Draggable = ExternalDraggable;
    exports.FeaturefulElementDragging = FeaturefulElementDragging;
    exports.PointerDragging = PointerDragging;
    exports.ThirdPartyDraggable = ThirdPartyDraggable;
    exports.default = main;

Object.defineProperty(exports, '__esModule', { value: true });

}));

// Generated by dts-bundle v0.7.3-fork.1
// Dependencies for this module:
// ../../../../../@fullcalendar/core

declare module '@fullcalendar/interaction' {
    import FeaturefulElementDragging from '@fullcalendar/interaction/dnd/FeaturefulElementDragging';
    const _default: import("@fullcalendar/core").PluginDef;
    export default _default;
    export { FeaturefulElementDragging };
    export { default as PointerDragging } from '@fullcalendar/interaction/dnd/PointerDragging';
    export { default as Draggable } from '@fullcalendar/interaction/interactions-external/ExternalDraggable';
    export { default as ThirdPartyDraggable } from '@fullcalendar/interaction/interactions-external/ThirdPartyDraggable';
}

declare module '@fullcalendar/interaction/dnd/FeaturefulElementDragging' {
    import { PointerDragEvent, ElementDragging } from '@fullcalendar/core';
    import PointerDragging from '@fullcalendar/interaction/dnd/PointerDragging';
    import ElementMirror from '@fullcalendar/interaction/dnd/ElementMirror';
    import AutoScroller from '@fullcalendar/interaction/dnd/AutoScroller';
    export { FeaturefulElementDragging as default, FeaturefulElementDragging };
    class FeaturefulElementDragging extends ElementDragging {
        pointer: PointerDragging;
        mirror: ElementMirror;
        autoScroller: AutoScroller;
        delay: number | null;
        minDistance: number;
        touchScrollAllowed: boolean;
        mirrorNeedsRevert: boolean;
        isInteracting: boolean;
        isDragging: boolean;
        isDelayEnded: boolean;
        isDistanceSurpassed: boolean;
        delayTimeoutId: number | null;
        constructor(containerEl: HTMLElement);
        destroy(): void;
        onPointerDown: (ev: PointerDragEvent) => void;
        onPointerMove: (ev: PointerDragEvent) => void;
        onPointerUp: (ev: PointerDragEvent) => void;
        startDelay(ev: PointerDragEvent): void;
        handleDelayEnd(ev: PointerDragEvent): void;
        handleDistanceSurpassed(ev: PointerDragEvent): void;
        tryStartDrag(ev: PointerDragEvent): void;
        tryStopDrag(ev: PointerDragEvent): void;
        stopDrag(ev: PointerDragEvent): void;
        setIgnoreMove(bool: boolean): void;
        setMirrorIsVisible(bool: boolean): void;
        setMirrorNeedsRevert(bool: boolean): void;
        setAutoScrollEnabled(bool: boolean): void;
    }
}

declare module '@fullcalendar/interaction/dnd/PointerDragging' {
    import { EmitterMixin, PointerDragEvent } from '@fullcalendar/core';
    export { PointerDragging as default, PointerDragging };
    class PointerDragging {
        containerEl: EventTarget;
        subjectEl: HTMLElement | null;
        downEl: HTMLElement | null;
        emitter: EmitterMixin;
        selector: string;
        handleSelector: string;
        shouldIgnoreMove: boolean;
        shouldWatchScroll: boolean;
        isDragging: boolean;
        isTouchDragging: boolean;
        wasTouchScroll: boolean;
        origPageX: number;
        origPageY: number;
        prevPageX: number;
        prevPageY: number;
        prevScrollX: number;
        prevScrollY: number;
        constructor(containerEl: EventTarget);
        destroy(): void;
        tryStart(ev: UIEvent): boolean;
        cleanup(): void;
        querySubjectEl(ev: UIEvent): HTMLElement;
        handleMouseDown: (ev: MouseEvent) => void;
        handleMouseMove: (ev: MouseEvent) => void;
        handleMouseUp: (ev: MouseEvent) => void;
        shouldIgnoreMouse(): number | boolean;
        handleTouchStart: (ev: TouchEvent) => void;
        handleTouchMove: (ev: TouchEvent) => void;
        handleTouchEnd: (ev: TouchEvent) => void;
        handleTouchScroll: () => void;
        cancelTouchScroll(): void;
        initScrollWatch(ev: PointerDragEvent): void;
        recordCoords(ev: PointerDragEvent): void;
        handleScroll: (ev: UIEvent) => void;
        destroyScrollWatch(): void;
        createEventFromMouse(ev: MouseEvent, isFirst?: boolean): PointerDragEvent;
        createEventFromTouch(ev: TouchEvent, isFirst?: boolean): PointerDragEvent;
    }
}

declare module '@fullcalendar/interaction/interactions-external/ExternalDraggable' {
    import { PointerDragEvent } from '@fullcalendar/core';
    import FeaturefulElementDragging from '@fullcalendar/interaction/dnd/FeaturefulElementDragging';
    import { DragMetaGenerator } from '@fullcalendar/interaction/interactions-external/ExternalElementDragging';
    export interface ExternalDraggableSettings {
        eventData?: DragMetaGenerator;
        itemSelector?: string;
        minDistance?: number;
        longPressDelay?: number;
        appendTo?: HTMLElement;
    }
    export { ExternalDraggable as default, ExternalDraggable };
    class ExternalDraggable {
        dragging: FeaturefulElementDragging;
        settings: ExternalDraggableSettings;
        constructor(el: HTMLElement, settings?: ExternalDraggableSettings);
        handlePointerDown: (ev: PointerDragEvent) => void;
        handleDragStart: (ev: PointerDragEvent) => void;
        destroy(): void;
    }
}

declare module '@fullcalendar/interaction/interactions-external/ThirdPartyDraggable' {
    import { DragMetaGenerator } from '@fullcalendar/interaction/interactions-external/ExternalElementDragging';
    import InferredElementDragging from '@fullcalendar/interaction/interactions-external/InferredElementDragging';
    export interface ThirdPartyDraggableSettings {
        eventData?: DragMetaGenerator;
        itemSelector?: string;
        mirrorSelector?: string;
    }
    export { ThirdPartyDraggable as default, ThirdPartyDraggable };
    class ThirdPartyDraggable {
        dragging: InferredElementDragging;
        constructor(containerOrSettings?: EventTarget | ThirdPartyDraggableSettings, settings?: ThirdPartyDraggableSettings);
        destroy(): void;
    }
}

declare module '@fullcalendar/interaction/dnd/ElementMirror' {
    import { Rect } from '@fullcalendar/core';
    export { ElementMirror as default, ElementMirror };
    class ElementMirror {
        isVisible: boolean;
        origScreenX?: number;
        origScreenY?: number;
        deltaX?: number;
        deltaY?: number;
        sourceEl: HTMLElement | null;
        mirrorEl: HTMLElement | null;
        sourceElRect: Rect | null;
        parentNode: HTMLElement;
        zIndex: number;
        revertDuration: number;
        start(sourceEl: HTMLElement, pageX: number, pageY: number): void;
        handleMove(pageX: number, pageY: number): void;
        setIsVisible(bool: boolean): void;
        stop(needsRevertAnimation: boolean, callback: () => void): void;
        doRevertAnimation(callback: () => void, revertDuration: number): void;
        cleanup(): void;
        updateElPosition(): void;
        getMirrorEl(): HTMLElement;
    }
}

declare module '@fullcalendar/interaction/dnd/AutoScroller' {
    import { ScrollGeomCache } from '@fullcalendar/interaction/scroll-geom-cache';
    export { AutoScroller as default, AutoScroller };
    class AutoScroller {
        isEnabled: boolean;
        scrollQuery: (Window | string)[];
        edgeThreshold: number;
        maxVelocity: number;
        pointerScreenX: number | null;
        pointerScreenY: number | null;
        isAnimating: boolean;
        scrollCaches: ScrollGeomCache[] | null;
        msSinceRequest?: number;
        everMovedUp: boolean;
        everMovedDown: boolean;
        everMovedLeft: boolean;
        everMovedRight: boolean;
        start(pageX: number, pageY: number): void;
        handleMove(pageX: number, pageY: number): void;
        stop(): void;
        requestAnimation(now: number): void;
    }
}

declare module '@fullcalendar/interaction/interactions-external/ExternalElementDragging' {
    import { Hit, PointerDragEvent, EventTuple, DatePointApi, Calendar, EventInteractionState, DragMetaInput, DragMeta, View, ElementDragging } from '@fullcalendar/core';
    import HitDragging from '@fullcalendar/interaction/interactions/HitDragging';
    export type DragMetaGenerator = DragMetaInput | ((el: HTMLElement) => DragMetaInput);
    export interface ExternalDropApi extends DatePointApi {
        draggedEl: HTMLElement;
        jsEvent: UIEvent;
        view: View;
    }
    export { ExternalElementDragging as default, ExternalElementDragging };
    class ExternalElementDragging {
        hitDragging: HitDragging;
        receivingCalendar: Calendar | null;
        droppableEvent: EventTuple | null;
        suppliedDragMeta: DragMetaGenerator | null;
        dragMeta: DragMeta | null;
        constructor(dragging: ElementDragging, suppliedDragMeta?: DragMetaGenerator);
        handleDragStart: (ev: PointerDragEvent) => void;
        buildDragMeta(subjectEl: HTMLElement): DragMeta;
        handleHitUpdate: (hit: Hit, isFinal: boolean, ev: PointerDragEvent) => void;
        handleDragEnd: (pev: PointerDragEvent) => void;
        displayDrag(nextCalendar: Calendar | null, state: EventInteractionState): void;
        clearDrag(): void;
        canDropElOnCalendar(el: HTMLElement, receivingCalendar: Calendar): boolean;
    }
}

declare module '@fullcalendar/interaction/interactions-external/InferredElementDragging' {
    import { PointerDragEvent, ElementDragging } from '@fullcalendar/core';
    import PointerDragging from '@fullcalendar/interaction/dnd/PointerDragging';
    export { InferredElementDragging as default, InferredElementDragging };
    class InferredElementDragging extends ElementDragging {
        pointer: PointerDragging;
        shouldIgnoreMove: boolean;
        mirrorSelector: string;
        currentMirrorEl: HTMLElement | null;
        constructor(containerEl: HTMLElement);
        destroy(): void;
        handlePointerDown: (ev: PointerDragEvent) => void;
        handlePointerMove: (ev: PointerDragEvent) => void;
        handlePointerUp: (ev: PointerDragEvent) => void;
        setIgnoreMove(bool: boolean): void;
        setMirrorIsVisible(bool: boolean): void;
    }
}

declare module '@fullcalendar/interaction/scroll-geom-cache' {
    import { Rect, ScrollController } from '@fullcalendar/core';
    export abstract class ScrollGeomCache extends ScrollController {
        clientRect: Rect;
        origScrollTop: number;
        origScrollLeft: number;
        protected scrollController: ScrollController;
        protected doesListening: boolean;
        protected scrollTop: number;
        protected scrollLeft: number;
        protected scrollWidth: number;
        protected scrollHeight: number;
        protected clientWidth: number;
        protected clientHeight: number;
        constructor(scrollController: ScrollController, doesListening: boolean);
        abstract getEventTarget(): EventTarget;
        abstract computeClientRect(): Rect;
        destroy(): void;
        handleScroll: () => void;
        getScrollTop(): number;
        getScrollLeft(): number;
        setScrollTop(top: number): void;
        setScrollLeft(top: number): void;
        getClientWidth(): number;
        getClientHeight(): number;
        getScrollWidth(): number;
        getScrollHeight(): number;
        handleScrollChange(): void;
    }
    export class ElementScrollGeomCache extends ScrollGeomCache {
        constructor(el: HTMLElement, doesListening: boolean);
        getEventTarget(): EventTarget;
        computeClientRect(): {
            left: number;
            right: number;
            top: number;
            bottom: number;
        };
    }
    export class WindowScrollGeomCache extends ScrollGeomCache {
        constructor(doesListening: boolean);
        getEventTarget(): EventTarget;
        computeClientRect(): Rect;
        handleScrollChange(): void;
    }
}

declare module '@fullcalendar/interaction/interactions/HitDragging' {
    import { EmitterMixin, PointerDragEvent, Point, Hit, InteractionSettingsStore, ElementDragging } from '@fullcalendar/core';
    import OffsetTracker from '@fullcalendar/interaction/OffsetTracker';
    export { HitDragging as default, HitDragging };
    class HitDragging {
        droppableStore: InteractionSettingsStore;
        dragging: ElementDragging;
        emitter: EmitterMixin;
        useSubjectCenter: boolean;
        requireInitial: boolean;
        offsetTrackers: {
            [componentUid: string]: OffsetTracker;
        };
        initialHit: Hit | null;
        movingHit: Hit | null;
        finalHit: Hit | null;
        coordAdjust?: Point;
        constructor(dragging: ElementDragging, droppableStore: InteractionSettingsStore);
        handlePointerDown: (ev: PointerDragEvent) => void;
        processFirstCoord(ev: PointerDragEvent): void;
        handleDragStart: (ev: PointerDragEvent) => void;
        handleDragMove: (ev: PointerDragEvent) => void;
        handlePointerUp: (ev: PointerDragEvent) => void;
        handleDragEnd: (ev: PointerDragEvent) => void;
        handleMove(ev: PointerDragEvent, forceHandle?: boolean): void;
        prepareHits(): void;
        releaseHits(): void;
        queryHitForOffset(offsetLeft: number, offsetTop: number): Hit | null;
    }
    export function isHitsEqual(hit0: Hit | null, hit1: Hit | null): boolean;
}

declare module '@fullcalendar/interaction/OffsetTracker' {
    import { Rect } from '@fullcalendar/core';
    import { ElementScrollGeomCache } from '@fullcalendar/interaction/scroll-geom-cache';
    export { OffsetTracker as default, OffsetTracker };
    class OffsetTracker {
        scrollCaches: ElementScrollGeomCache[];
        origRect: Rect;
        constructor(el: HTMLElement);
        destroy(): void;
        computeLeft(): number;
        computeTop(): number;
        isWithinClipping(pageX: number, pageY: number): boolean;
    }
}

/*!
FullCalendar Interaction Plugin v4.3.0
Docs & License: https://fullcalendar.io/
(c) 2019 Adam Shaw
*/
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@fullcalendar/core")):"function"==typeof define&&define.amd?define(["exports","@fullcalendar/core"],t):t((e=e||self).FullCalendarInteraction={},e.FullCalendar)}(this,function(e,t){"use strict";var n=function(e,t){return(n=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])})(e,t)};function r(e,t){function r(){this.constructor=e}n(e,t),e.prototype=null===t?Object.create(t):(r.prototype=t.prototype,new r)}var i=function(){return(i=Object.assign||function(e){for(var t,n=1,r=arguments.length;n0&&(this.everMovedDown=!0),o<0?this.everMovedLeft=!0:o>0&&(this.everMovedRight=!0),this.pointerScreenX=n,this.pointerScreenY=r,this.isAnimating||(this.isAnimating=!0,this.requestAnimation(p()))}},e.prototype.stop=function(){if(this.isEnabled){this.isAnimating=!1;for(var e=0,t=this.scrollCaches;e=0&&c>=0&&d>=0&&g>=0&&(d<=n&&this.everMovedUp&&a.canScrollUp()&&(!r||r.distance>d)&&(r={scrollCache:a,name:"top",distance:d}),g<=n&&this.everMovedDown&&a.canScrollDown()&&(!r||r.distance>g)&&(r={scrollCache:a,name:"bottom",distance:g}),s<=n&&this.everMovedLeft&&a.canScrollLeft()&&(!r||r.distance>s)&&(r={scrollCache:a,name:"left",distance:s}),c<=n&&this.everMovedRight&&a.canScrollRight()&&(!r||r.distance>c)&&(r={scrollCache:a,name:"right",distance:c}))}return r},e.prototype.buildCaches=function(){return this.queryScrollEls().map(function(e){return e===window?new h(!1):new u(e,!1)})},e.prototype.queryScrollEls=function(){for(var e=[],t=0,n=this.scrollQuery;t=t*t&&r.handleDistanceSurpassed(e)}r.isDragging&&("scroll"!==e.origEvent.type&&(r.mirror.handleMove(e.pageX,e.pageY),r.autoScroller.handleMove(e.pageX,e.pageY)),r.emitter.trigger("dragmove",e))}},r.onPointerUp=function(e){r.isInteracting&&(r.isInteracting=!1,t.allowSelection(document.body),t.allowContextMenu(document.body),r.emitter.trigger("pointerup",e),r.isDragging&&(r.autoScroller.stop(),r.tryStopDrag(e)),r.delayTimeoutId&&(clearTimeout(r.delayTimeoutId),r.delayTimeoutId=null))};var i=r.pointer=new s(n);return i.emitter.on("pointerdown",r.onPointerDown),i.emitter.on("pointermove",r.onPointerMove),i.emitter.on("pointerup",r.onPointerUp),r.mirror=new d,r.autoScroller=new v,r}return r(n,e),n.prototype.destroy=function(){this.pointer.destroy()},n.prototype.startDelay=function(e){var t=this;"number"==typeof this.delay?this.delayTimeoutId=setTimeout(function(){t.delayTimeoutId=null,t.handleDelayEnd(e)},this.delay):this.handleDelayEnd(e)},n.prototype.handleDelayEnd=function(e){this.isDelayEnded=!0,this.tryStartDrag(e)},n.prototype.handleDistanceSurpassed=function(e){this.isDistanceSurpassed=!0,this.tryStartDrag(e)},n.prototype.tryStartDrag=function(e){this.isDelayEnded&&this.isDistanceSurpassed&&(this.pointer.wasTouchScroll&&!this.touchScrollAllowed||(this.isDragging=!0,this.mirrorNeedsRevert=!1,this.autoScroller.start(e.pageX,e.pageY),this.emitter.trigger("dragstart",e),!1===this.touchScrollAllowed&&this.pointer.cancelTouchScroll()))},n.prototype.tryStopDrag=function(e){this.mirror.stop(this.mirrorNeedsRevert,this.stopDrag.bind(this,e))},n.prototype.stopDrag=function(e){this.isDragging=!1,this.emitter.trigger("dragend",e)},n.prototype.setIgnoreMove=function(e){this.pointer.shouldIgnoreMove=e},n.prototype.setMirrorIsVisible=function(e){this.mirror.setIsVisible(e)},n.prototype.setMirrorNeedsRevert=function(e){this.mirrorNeedsRevert=e},n.prototype.setAutoScrollEnabled=function(e){this.autoScroller.isEnabled=e},n}(t.ElementDragging),E=function(){function e(e){this.origRect=t.computeRect(e),this.scrollCaches=t.getClippingParents(e).map(function(e){return new u(e,!0)})}return e.prototype.destroy=function(){for(var e=0,t=this.scrollCaches;e=0&&g

=0&&uo.layer)||(f.rect.left+=c,f.rect.right+=c,f.rect.top+=d,f.rect.bottom+=d,o=f)}}}return o},e}();function S(e,n){return!e&&!n||Boolean(e)===Boolean(n)&&t.isDateSpansEqual(e.dateSpan,n.dateSpan)}var y=function(e){function n(n){var r=e.call(this,n)||this;r.handlePointerDown=function(e){var t=r.dragging;t.setIgnoreMove(!r.component.isValidDateDownEl(t.pointer.downEl))},r.handleDragEnd=function(e){var t=r.component;if(!r.dragging.pointer.wasTouchScroll){var n=r.hitDragging,i=n.initialHit,o=n.finalHit;i&&o&&S(i,o)&&t.calendar.triggerDateClick(i.dateSpan,i.dayEl,t.view,e.origEvent)}};var i=n.component;r.dragging=new f(i.el),r.dragging.autoScroller.isEnabled=!1;var o=r.hitDragging=new m(r.dragging,t.interactionSettingsToStore(n));return o.emitter.on("pointerdown",r.handlePointerDown),o.emitter.on("dragend",r.handleDragEnd),r}return r(n,e),n.prototype.destroy=function(){this.dragging.destroy()},n}(t.Interaction),D=function(e){function n(n){var r=e.call(this,n)||this;r.dragSelection=null,r.handlePointerDown=function(e){var t=r,n=t.component,i=t.dragging,o=n.opt("selectable")&&n.isValidDateDownEl(e.origEvent.target);i.setIgnoreMove(!o),i.delay=e.isTouch?function(e){var t=e.opt("selectLongPressDelay");null==t&&(t=e.opt("longPressDelay"));return t}(n):null},r.handleDragStart=function(e){r.component.calendar.unselect(e)},r.handleHitUpdate=function(e,n){var o=r.component.calendar,a=null,l=!1;e&&((a=function(e,n,r){var o=e.dateSpan,a=n.dateSpan,l=[o.range.start,o.range.end,a.range.start,a.range.end];l.sort(t.compareNumbers);for(var s={},c=0,d=r;co.start)return g.endDelta=d,g;return null}(s,e,o.subjectEl.classList.contains("fc-start-resizer"),c.range,a.pluginSystem.hooks.eventResizeJoinTransforms)),d&&(g=t.applyMutationToEventStore(l,a.eventUiBases,d,a),h.mutatedEvents=g,r.component.isInteractionValid(h)||(u=!0,d=null,g=null,h.mutatedEvents=null)),g?a.dispatch({type:"SET_EVENT_RESIZE",state:h}):a.dispatch({type:"UNSET_EVENT_RESIZE"}),u?t.disableCursor():t.enableCursor(),n||(d&&S(s,e)&&(d=null),r.validMutation=d,r.mutatedRelevantEvents=g)},r.handleDragEnd=function(e){var n=r.component.calendar,i=r.component.view,o=r.eventRange.def,a=r.eventRange.instance,l=new t.EventApi(n,o,a),s=r.relevantEvents,c=r.mutatedRelevantEvents;n.publiclyTrigger("eventResizeStop",[{el:r.draggingSeg.el,event:l,jsEvent:e.origEvent,view:i}]),r.validMutation?(n.dispatch({type:"MERGE_EVENTS",eventStore:c}),n.publiclyTrigger("eventResize",[{el:r.draggingSeg.el,startDelta:r.validMutation.startDelta||t.createDuration(0),endDelta:r.validMutation.endDelta||t.createDuration(0),prevEvent:l,event:new t.EventApi(n,c.defs[o.defId],a?c.instances[a.instanceId]:null),revert:function(){n.dispatch({type:"MERGE_EVENTS",eventStore:s})},jsEvent:e.origEvent,view:i}])):n.publiclyTrigger("_noEventResize"),r.draggingSeg=null,r.relevantEvents=null,r.validMutation=null};var o=n.component,a=r.dragging=new f(o.el);a.pointer.selector=".fc-resizer",a.touchScrollAllowed=!1,a.autoScroller.isEnabled=o.opt("dragScroll");var l=r.hitDragging=new m(r.dragging,t.interactionSettingsToStore(n));return l.emitter.on("pointerdown",r.handlePointerDown),l.emitter.on("dragstart",r.handleDragStart),l.emitter.on("hitupdate",r.handleHitUpdate),l.emitter.on("dragend",r.handleDragEnd),r}return r(n,e),n.prototype.destroy=function(){this.dragging.destroy()},n.prototype.querySeg=function(e){return t.getElSeg(t.elementClosest(e.subjectEl,this.component.fgSegSelector))},n}(t.Interaction);var M=function(){function e(e){var n=this;this.isRecentPointerDateSelect=!1,this.onSelect=function(e){e.jsEvent&&(n.isRecentPointerDateSelect=!0)},this.onDocumentPointerUp=function(e){var r=n,i=r.calendar,o=r.documentPointer,a=i.state;if(!o.wasTouchScroll){if(a.dateSelection&&!n.isRecentPointerDateSelect){var l=i.viewOpt("unselectAuto"),s=i.viewOpt("unselectCancel");!l||l&&t.elementClosest(o.downEl,s)||i.unselect(e)}a.eventSelection&&!t.elementClosest(o.downEl,w.SELECTOR)&&i.dispatch({type:"UNSELECT_EVENT"})}n.isRecentPointerDateSelect=!1},this.calendar=e;var r=this.documentPointer=new s(document);r.shouldIgnoreMove=!0,r.shouldWatchScroll=!1,r.emitter.on("pointerup",this.onDocumentPointerUp),e.on("select",this.onSelect)}return e.prototype.destroy=function(){this.calendar.off("select",this.onSelect),this.documentPointer.destroy()},e}(),b=function(){function e(e,n){var r=this;this.receivingCalendar=null,this.droppableEvent=null,this.suppliedDragMeta=null,this.dragMeta=null,this.handleDragStart=function(e){r.dragMeta=r.buildDragMeta(e.subjectEl)},this.handleHitUpdate=function(e,n,o){var a=r.hitDragging.dragging,l=null,s=null,c=!1,d={affectedEvents:t.createEmptyEventStore(),mutatedEvents:t.createEmptyEventStore(),isEvent:r.dragMeta.create,origSeg:null};e&&(l=e.component.calendar,r.canDropElOnCalendar(o.subjectEl,l)&&(s=function(e,n,r){for(var o=i({},n.leftoverProps),a=0,l=r.pluginSystem.hooks.externalDefTransforms;a

/*!
FullCalendar Time Grid Plugin v4.3.0
Docs & License: https://fullcalendar.io/
(c) 2019 Adam Shaw
*/

import { createFormatter, removeElement, cssToStr, isMultiDayRange, htmlEscape, compareByFieldSpecs, applyStyle, FgEventRenderer, buildSegCompareObj, FillRenderer, memoizeRendering, createDuration, wholeDivideDurations, findElements, PositionCache, startOfDay, asRoughMs, formatIsoTimeString, addDurations, htmlToElement, createElement, multiplyDuration, DateComponent, hasBgRendering, Splitter, diffDays, buildGotoAnchorHtml, getAllDayHtml, ScrollComponent, matchCellWidths, uncompensateScroll, compensateScroll, subtractInnerElHeight, View, memoize, intersectRanges, Slicer, DayHeader, DaySeries, DayTable, createPlugin } from '@fullcalendar/core';
import { DayBgRow, DayGrid, SimpleDayGrid } from '@fullcalendar/daygrid';

/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0

THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.

See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
/* global Reflect, Promise */

function __extends(d, b) {
    extendStatics(d, b);
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}

/*
Only handles foreground segs.
Does not own rendering. Use for low-level util methods by TimeGrid.
*/
var TimeGridEventRenderer = /** @class */ (function (_super) {
    __extends(TimeGridEventRenderer, _super);
    function TimeGridEventRenderer(timeGrid) {
        var _this = _super.call(this, timeGrid.context) || this;
        _this.timeGrid = timeGrid;
        _this.fullTimeFormat = createFormatter({
            hour: 'numeric',
            minute: '2-digit',
            separator: _this.context.options.defaultRangeSeparator
        });
        return _this;
    }
    // Given an array of foreground segments, render a DOM element for each, computes position,
    // and attaches to the column inner-container elements.
    TimeGridEventRenderer.prototype.attachSegs = function (segs, mirrorInfo) {
        var segsByCol = this.timeGrid.groupSegsByCol(segs);
        // order the segs within each column
        // TODO: have groupSegsByCol do this?
        for (var col = 0; col < segsByCol.length; col++) {
            segsByCol[col] = this.sortEventSegs(segsByCol[col]);
        }
        this.segsByCol = segsByCol;
        this.timeGrid.attachSegsByCol(segsByCol, this.timeGrid.fgContainerEls);
    };
    TimeGridEventRenderer.prototype.detachSegs = function (segs) {
        segs.forEach(function (seg) {
            removeElement(seg.el);
        });
        this.segsByCol = null;
    };
    TimeGridEventRenderer.prototype.computeSegSizes = function (allSegs) {
        var _a = this, timeGrid = _a.timeGrid, segsByCol = _a.segsByCol;
        var colCnt = timeGrid.colCnt;
        timeGrid.computeSegVerticals(allSegs); // horizontals relies on this
        if (segsByCol) {
            for (var col = 0; col < colCnt; col++) {
                this.computeSegHorizontals(segsByCol[col]); // compute horizontal coordinates, z-index's, and reorder the array
            }
        }
    };
    TimeGridEventRenderer.prototype.assignSegSizes = function (allSegs) {
        var _a = this, timeGrid = _a.timeGrid, segsByCol = _a.segsByCol;
        var colCnt = timeGrid.colCnt;
        timeGrid.assignSegVerticals(allSegs); // horizontals relies on this
        if (segsByCol) {
            for (var col = 0; col < colCnt; col++) {
                this.assignSegCss(segsByCol[col]);
            }
        }
    };
    // Computes a default event time formatting string if `eventTimeFormat` is not explicitly defined
    TimeGridEventRenderer.prototype.computeEventTimeFormat = function () {
        return {
            hour: 'numeric',
            minute: '2-digit',
            meridiem: false
        };
    };
    // Computes a default `displayEventEnd` value if one is not expliclty defined
    TimeGridEventRenderer.prototype.computeDisplayEventEnd = function () {
        return true;
    };
    // Renders the HTML for a single event segment's default rendering
    TimeGridEventRenderer.prototype.renderSegHtml = function (seg, mirrorInfo) {
        var view = this.context.view;
        var eventRange = seg.eventRange;
        var eventDef = eventRange.def;
        var eventUi = eventRange.ui;
        var allDay = eventDef.allDay;
        var isDraggable = view.computeEventDraggable(eventDef, eventUi);
        var isResizableFromStart = seg.isStart && view.computeEventStartResizable(eventDef, eventUi);
        var isResizableFromEnd = seg.isEnd && view.computeEventEndResizable(eventDef, eventUi);
        var classes = this.getSegClasses(seg, isDraggable, isResizableFromStart || isResizableFromEnd, mirrorInfo);
        var skinCss = cssToStr(this.getSkinCss(eventUi));
        var timeText;
        var fullTimeText; // more verbose time text. for the print stylesheet
        var startTimeText; // just the start time text
        classes.unshift('fc-time-grid-event');
        // if the event appears to span more than one day...
        if (isMultiDayRange(eventRange.range)) {
            // Don't display time text on segments that run entirely through a day.
            // That would appear as midnight-midnight and would look dumb.
            // Otherwise, display the time text for the *segment's* times (like 6pm-midnight or midnight-10am)
            if (seg.isStart || seg.isEnd) {
                var unzonedStart = seg.start;
                var unzonedEnd = seg.end;
                timeText = this._getTimeText(unzonedStart, unzonedEnd, allDay); // TODO: give the timezones
                fullTimeText = this._getTimeText(unzonedStart, unzonedEnd, allDay, this.fullTimeFormat);
                startTimeText = this._getTimeText(unzonedStart, unzonedEnd, allDay, null, false); // displayEnd=false
            }
        }
        else {
            // Display the normal time text for the *event's* times
            timeText = this.getTimeText(eventRange);
            fullTimeText = this.getTimeText(eventRange, this.fullTimeFormat);
            startTimeText = this.getTimeText(eventRange, null, false); // displayEnd=false
        }
        return '' +
            '

' +
(timeText ?
'

' +
'' + htmlEscape(timeText) + '' +
'

' :
                '') +
            (eventDef.title ?
                '

' +
htmlEscape(eventDef.title) +
'

' :
'') +
'

' +
            /* TODO: write CSS for this
            (isResizableFromStart ?
              '

' :
              ''
              ) +
            */
            (isResizableFromEnd ?
                '

' :
                '') +
            '';
    };
    // Given an array of segments that are all in the same column, sets the backwardCoord and forwardCoord on each.
    // Assumed the segs are already ordered.
    // NOTE: Also reorders the given array by date!
    TimeGridEventRenderer.prototype.computeSegHorizontals = function (segs) {
        var levels;
        var level0;
        var i;
        levels = buildSlotSegLevels(segs);
        computeForwardSlotSegs(levels);
        if ((level0 = levels[0])) {
            for (i = 0; i < level0.length; i++) {
                computeSlotSegPressures(level0[i]);
            }
            for (i = 0; i < level0.length; i++) {
                this.computeSegForwardBack(level0[i], 0, 0);
            }
        }
    };
    // Calculate seg.forwardCoord and seg.backwardCoord for the segment, where both values range
    // from 0 to 1. If the calendar is left-to-right, the seg.backwardCoord maps to "left" and
    // seg.forwardCoord maps to "right" (via percentage). Vice-versa if the calendar is right-to-left.
    //
    // The segment might be part of a "series", which means consecutive segments with the same pressure
    // who's width is unknown until an edge has been hit. `seriesBackwardPressure` is the number of
    // segments behind this one in the current series, and `seriesBackwardCoord` is the starting
    // coordinate of the first segment in the series.
    TimeGridEventRenderer.prototype.computeSegForwardBack = function (seg, seriesBackwardPressure, seriesBackwardCoord) {
        var forwardSegs = seg.forwardSegs;
        var i;
        if (seg.forwardCoord === undefined) { // not already computed
            if (!forwardSegs.length) {
                // if there are no forward segments, this segment should butt up against the edge
                seg.forwardCoord = 1;
            }
            else {
                // sort highest pressure first
                this.sortForwardSegs(forwardSegs);
                // this segment's forwardCoord will be calculated from the backwardCoord of the
                // highest-pressure forward segment.
                this.computeSegForwardBack(forwardSegs[0], seriesBackwardPressure + 1, seriesBackwardCoord);
                seg.forwardCoord = forwardSegs[0].backwardCoord;
            }
            // calculate the backwardCoord from the forwardCoord. consider the series
            seg.backwardCoord = seg.forwardCoord -
                (seg.forwardCoord - seriesBackwardCoord) / // available width for series
                    (seriesBackwardPressure + 1); // # of segments in the series
            // use this segment's coordinates to computed the coordinates of the less-pressurized
            // forward segments
            for (i = 0; i < forwardSegs.length; i++) {
                this.computeSegForwardBack(forwardSegs[i], 0, seg.forwardCoord);
            }
        }
    };
    TimeGridEventRenderer.prototype.sortForwardSegs = function (forwardSegs) {
        var objs = forwardSegs.map(buildTimeGridSegCompareObj);
        var specs = [
            // put higher-pressure first
            { field: 'forwardPressure', order: -1 },
            // put segments that are closer to initial edge first (and favor ones with no coords yet)
            { field: 'backwardCoord', order: 1 }
        ].concat(this.context.view.eventOrderSpecs);
        objs.sort(function (obj0, obj1) {
            return compareByFieldSpecs(obj0, obj1, specs);
        });
        return objs.map(function (c) {
            return c._seg;
        });
    };
    // Given foreground event segments that have already had their position coordinates computed,
    // assigns position-related CSS values to their elements.
    TimeGridEventRenderer.prototype.assignSegCss = function (segs) {
        for (var _i = 0, segs_1 = segs; _i < segs_1.length; _i++) {
            var seg = segs_1[_i];
            applyStyle(seg.el, this.generateSegCss(seg));
            if (seg.level > 0) {
                seg.el.classList.add('fc-time-grid-event-inset');
            }
            // if the event is short that the title will be cut off,
            // attach a className that condenses the title into the time area.
            if (seg.eventRange.def.title && seg.bottom - seg.top < 30) {
                seg.el.classList.add('fc-short'); // TODO: "condensed" is a better name
            }
        }
    };
    // Generates an object with CSS properties/values that should be applied to an event segment element.
    // Contains important positioning-related properties that should be applied to any event element, customized or not.
    TimeGridEventRenderer.prototype.generateSegCss = function (seg) {
        var shouldOverlap = this.context.options.slotEventOverlap;
        var backwardCoord = seg.backwardCoord; // the left side if LTR. the right side if RTL. floating-point
        var forwardCoord = seg.forwardCoord; // the right side if LTR. the left side if RTL. floating-point
        var props = this.timeGrid.generateSegVerticalCss(seg); // get top/bottom first
        var isRtl = this.timeGrid.isRtl;
        var left; // amount of space from left edge, a fraction of the total width
        var right; // amount of space from right edge, a fraction of the total width
        if (shouldOverlap) {
            // double the width, but don't go beyond the maximum forward coordinate (1.0)
            forwardCoord = Math.min(1, backwardCoord + (forwardCoord - backwardCoord) * 2);
        }
        if (isRtl) {
            left = 1 - forwardCoord;
            right = backwardCoord;
        }
        else {
            left = backwardCoord;
            right = 1 - forwardCoord;
        }
        props.zIndex = seg.level + 1; // convert from 0-base to 1-based
        props.left = left * 100 + '%';
        props.right = right * 100 + '%';
        if (shouldOverlap && seg.forwardPressure) {
            // add padding to the edge so that forward stacked events don't cover the resizer's icon
            props[isRtl ? 'marginLeft' : 'marginRight'] = 10 * 2; // 10 is a guesstimate of the icon's width
        }
        return props;
    };
    return TimeGridEventRenderer;
}(FgEventRenderer));
// Builds an array of segments "levels". The first level will be the leftmost tier of segments if the calendar is
// left-to-right, or the rightmost if the calendar is right-to-left. Assumes the segments are already ordered by date.
function buildSlotSegLevels(segs) {
    var levels = [];
    var i;
    var seg;
    var j;
    for (i = 0; i < segs.length; i++) {
        seg = segs[i];
        // go through all the levels and stop on the first level where there are no collisions
        for (j = 0; j < levels.length; j++) {
            if (!computeSlotSegCollisions(seg, levels[j]).length) {
                break;
            }
        }
        seg.level = j;
        (levels[j] || (levels[j] = [])).push(seg);
    }
    return levels;
}
// For every segment, figure out the other segments that are in subsequent
// levels that also occupy the same vertical space. Accumulate in seg.forwardSegs
function computeForwardSlotSegs(levels) {
    var i;
    var level;
    var j;
    var seg;
    var k;
    for (i = 0; i < levels.length; i++) {
        level = levels[i];
        for (j = 0; j < level.length; j++) {
            seg = level[j];
            seg.forwardSegs = [];
            for (k = i + 1; k < levels.length; k++) {
                computeSlotSegCollisions(seg, levels[k], seg.forwardSegs);
            }
        }
    }
}
// Figure out which path forward (via seg.forwardSegs) results in the longest path until
// the furthest edge is reached. The number of segments in this path will be seg.forwardPressure
function computeSlotSegPressures(seg) {
    var forwardSegs = seg.forwardSegs;
    var forwardPressure = 0;
    var i;
    var forwardSeg;
    if (seg.forwardPressure === undefined) { // not already computed
        for (i = 0; i < forwardSegs.length; i++) {
            forwardSeg = forwardSegs[i];
            // figure out the child's maximum forward path
            computeSlotSegPressures(forwardSeg);
            // either use the existing maximum, or use the child's forward pressure
            // plus one (for the forwardSeg itself)
            forwardPressure = Math.max(forwardPressure, 1 + forwardSeg.forwardPressure);
        }
        seg.forwardPressure = forwardPressure;
    }
}
// Find all the segments in `otherSegs` that vertically collide with `seg`.
// Append into an optionally-supplied `results` array and return.
function computeSlotSegCollisions(seg, otherSegs, results) {
    if (results === void 0) { results = []; }
    for (var i = 0; i < otherSegs.length; i++) {
        if (isSlotSegCollision(seg, otherSegs[i])) {
            results.push(otherSegs[i]);
        }
    }
    return results;
}
// Do these segments occupy the same vertical space?
function isSlotSegCollision(seg1, seg2) {
    return seg1.bottom > seg2.top && seg1.top < seg2.bottom;
}
function buildTimeGridSegCompareObj(seg) {
    var obj = buildSegCompareObj(seg);
    obj.forwardPressure = seg.forwardPressure;
    obj.backwardCoord = seg.backwardCoord;
    return obj;
}

/* A component that renders one or more columns of vertical time slots
----------------------------------------------------------------------------------------------------------------------*/
// potential nice values for the slot-duration and interval-duration
// from largest to smallest
var AGENDA_STOCK_SUB_DURATIONS = [
    { hours: 1 },
    { minutes: 30 },
    { minutes: 15 },
    { seconds: 30 },
    { seconds: 15 }
];
var TimeGrid = /** @class */ (function (_super) {
    __extends(TimeGrid, _super);
    function TimeGrid(context, el, renderProps) {
        var _this = _super.call(this, context, el) || this;
        _this.isSlatSizesDirty = false;
        _this.isColSizesDirty = false;
        _this.renderSlats = memoizeRendering(_this._renderSlats);
        var eventRenderer = _this.eventRenderer = new TimeGridEventRenderer(_this);
        var fillRenderer = _this.fillRenderer = new TimeGridFillRenderer(_this);
        _this.mirrorRenderer = new TimeGridMirrorRenderer(_this);
        var renderColumns = _this.renderColumns = memoizeRendering(_this._renderColumns, _this._unrenderColumns);
        _this.renderBusinessHours = memoizeRendering(fillRenderer.renderSegs.bind(fillRenderer, 'businessHours'), fillRenderer.unrender.bind(fillRenderer, 'businessHours'), [renderColumns]);
        _this.renderDateSelection = memoizeRendering(_this._renderDateSelection, _this._unrenderDateSelection, [renderColumns]);
        _this.renderFgEvents = memoizeRendering(eventRenderer.renderSegs.bind(eventRenderer), eventRenderer.unrender.bind(eventRenderer), [renderColumns]);
        _this.renderBgEvents = memoizeRendering(fillRenderer.renderSegs.bind(fillRenderer, 'bgEvent'), fillRenderer.unrender.bind(fillRenderer, 'bgEvent'), [renderColumns]);
        _this.renderEventSelection = memoizeRendering(eventRenderer.selectByInstanceId.bind(eventRenderer), eventRenderer.unselectByInstanceId.bind(eventRenderer), [_this.renderFgEvents]);
        _this.renderEventDrag = memoizeRendering(_this._renderEventDrag, _this._unrenderEventDrag, [renderColumns]);
        _this.renderEventResize = memoizeRendering(_this._renderEventResize, _this._unrenderEventResize, [renderColumns]);
        _this.processOptions();
        el.innerHTML =
            '

' +
'

';
        _this.rootBgContainerEl = el.querySelector('.fc-bg');
        _this.slatContainerEl = el.querySelector('.fc-slats');
        _this.bottomRuleEl = el.querySelector('.fc-divider');
        _this.renderProps = renderProps;
        return _this;
    }
    /* Options
    ------------------------------------------------------------------------------------------------------------------*/
    // Parses various options into properties of this object
    TimeGrid.prototype.processOptions = function () {
        var slotDuration = this.opt('slotDuration');
        var snapDuration = this.opt('snapDuration');
        var snapsPerSlot;
        var input;
        slotDuration = createDuration(slotDuration);
        snapDuration = snapDuration ? createDuration(snapDuration) : slotDuration;
        snapsPerSlot = wholeDivideDurations(slotDuration, snapDuration);
        if (snapsPerSlot === null) {
            snapDuration = slotDuration;
            snapsPerSlot = 1;
            // TODO: say warning?
        }
        this.slotDuration = slotDuration;
        this.snapDuration = snapDuration;
        this.snapsPerSlot = snapsPerSlot;
        // might be an array value (for TimelineView).
        // if so, getting the most granular entry (the last one probably).
        input = this.opt('slotLabelFormat');
        if (Array.isArray(input)) {
            input = input[input.length - 1];
        }
        this.labelFormat = createFormatter(input || {
            hour: 'numeric',
            minute: '2-digit',
            omitZeroMinute: true,
            meridiem: 'short'
        });
        input = this.opt('slotLabelInterval');
        this.labelInterval = input ?
            createDuration(input) :
            this.computeLabelInterval(slotDuration);
    };
    // Computes an automatic value for slotLabelInterval
    TimeGrid.prototype.computeLabelInterval = function (slotDuration) {
        var i;
        var labelInterval;
        var slotsPerLabel;
        // find the smallest stock label interval that results in more than one slots-per-label
        for (i = AGENDA_STOCK_SUB_DURATIONS.length - 1; i >= 0; i--) {
            labelInterval = createDuration(AGENDA_STOCK_SUB_DURATIONS[i]);
            slotsPerLabel = wholeDivideDurations(labelInterval, slotDuration);
            if (slotsPerLabel !== null && slotsPerLabel > 1) {
                return labelInterval;
            }
        }
        return slotDuration; // fall back
    };
    /* Rendering
    ------------------------------------------------------------------------------------------------------------------*/
    TimeGrid.prototype.render = function (props) {
        var cells = props.cells;
        this.colCnt = cells.length;
        this.renderSlats(props.dateProfile);
        this.renderColumns(props.cells, props.dateProfile);
        this.renderBusinessHours(props.businessHourSegs);
        this.renderDateSelection(props.dateSelectionSegs);
        this.renderFgEvents(props.fgEventSegs);
        this.renderBgEvents(props.bgEventSegs);
        this.renderEventSelection(props.eventSelection);
        this.renderEventDrag(props.eventDrag);
        this.renderEventResize(props.eventResize);
    };
    TimeGrid.prototype.destroy = function () {
        _super.prototype.destroy.call(this);
        // should unrender everything else too
        this.renderSlats.unrender();
        this.renderColumns.unrender();
    };
    TimeGrid.prototype.updateSize = function (isResize) {
        var _a = this, fillRenderer = _a.fillRenderer, eventRenderer = _a.eventRenderer, mirrorRenderer = _a.mirrorRenderer;
        if (isResize || this.isSlatSizesDirty) {
            this.buildSlatPositions();
            this.isSlatSizesDirty = false;
        }
        if (isResize || this.isColSizesDirty) {
            this.buildColPositions();
            this.isColSizesDirty = false;
        }
        fillRenderer.computeSizes(isResize);
        eventRenderer.computeSizes(isResize);
        mirrorRenderer.computeSizes(isResize);
        fillRenderer.assignSizes(isResize);
        eventRenderer.assignSizes(isResize);
        mirrorRenderer.assignSizes(isResize);
    };
    TimeGrid.prototype._renderSlats = function (dateProfile) {
        var theme = this.theme;
        this.slatContainerEl.innerHTML =
            '' +
                this.renderSlatRowHtml(dateProfile) +
                '';
        this.slatEls = findElements(this.slatContainerEl, 'tr');
        this.slatPositions = new PositionCache(this.el, this.slatEls, false, true // vertical
        );
        this.isSlatSizesDirty = true;
    };
    // Generates the HTML for the horizontal "slats" that run width-wise. Has a time axis on a side. Depends on RTL.
    TimeGrid.prototype.renderSlatRowHtml = function (dateProfile) {
        var _a = this, dateEnv = _a.dateEnv, theme = _a.theme, isRtl = _a.isRtl;
        var html = '';
        var dayStart = startOfDay(dateProfile.renderRange.start);
        var slotTime = dateProfile.minTime;
        var slotIterator = createDuration(0);
        var slotDate; // will be on the view's first day, but we only care about its time
        var isLabeled;
        var axisHtml;
        // Calculate the time for each slot
        while (asRoughMs(slotTime) < asRoughMs(dateProfile.maxTime)) {
            slotDate = dateEnv.add(dayStart, slotTime);
            isLabeled = wholeDivideDurations(slotIterator, this.labelInterval) !== null;
            axisHtml =
                '' +
                    (isLabeled ?
                        '' + // for matchCellWidths
                            htmlEscape(dateEnv.format(slotDate, this.labelFormat)) +
                            '' :
                        '') +
                    '';
            html +=
                '' +
                    (!isRtl ? axisHtml : '') +
                    '' +
                    (isRtl ? axisHtml : '') +
                    '';
            slotTime = addDurations(slotTime, this.slotDuration);
            slotIterator = addDurations(slotIterator, this.slotDuration);
        }
        return html;
    };
    TimeGrid.prototype._renderColumns = function (cells, dateProfile) {
        var _a = this, theme = _a.theme, dateEnv = _a.dateEnv, view = _a.view;
        var bgRow = new DayBgRow(this.context);
        this.rootBgContainerEl.innerHTML =
            '' +
                bgRow.renderHtml({
                    cells: cells,
                    dateProfile: dateProfile,
                    renderIntroHtml: this.renderProps.renderBgIntroHtml
                }) +
                '';
        this.colEls = findElements(this.el, '.fc-day, .fc-disabled-day');
        for (var col = 0; col < this.colCnt; col++) {
            this.publiclyTrigger('dayRender', [
                {
                    date: dateEnv.toDate(cells[col].date),
                    el: this.colEls[col],
                    view: view
                }
            ]);
        }
        if (this.isRtl) {
            this.colEls.reverse();
        }
        this.colPositions = new PositionCache(this.el, this.colEls, true, // horizontal
        false);
        this.renderContentSkeleton();
        this.isColSizesDirty = true;
    };
    TimeGrid.prototype._unrenderColumns = function () {
        this.unrenderContentSkeleton();
    };
    /* Content Skeleton
    ------------------------------------------------------------------------------------------------------------------*/
    // Renders the DOM that the view's content will live in
    TimeGrid.prototype.renderContentSkeleton = function () {
        var parts = [];
        var skeletonEl;
        parts.push(this.renderProps.renderIntroHtml());
        for (var i = 0; i < this.colCnt; i++) {
            parts.push('' +
                '

' +
'

' +
                '');
        }
        if (this.isRtl) {
            parts.reverse();
        }
        skeletonEl = this.contentSkeletonEl = htmlToElement('

' +
            '' +
            '' + parts.join('') + '' +
            '' +
            '

');
        this.colContainerEls = findElements(skeletonEl, '.fc-content-col');
        this.mirrorContainerEls = findElements(skeletonEl, '.fc-mirror-container');
        this.fgContainerEls = findElements(skeletonEl, '.fc-event-container:not(.fc-mirror-container)');
        this.bgContainerEls = findElements(skeletonEl, '.fc-bgevent-container');
        this.highlightContainerEls = findElements(skeletonEl, '.fc-highlight-container');
        this.businessContainerEls = findElements(skeletonEl, '.fc-business-container');
        if (this.isRtl) {
            this.colContainerEls.reverse();
            this.mirrorContainerEls.reverse();
            this.fgContainerEls.reverse();
            this.bgContainerEls.reverse();
            this.highlightContainerEls.reverse();
            this.businessContainerEls.reverse();
        }
        this.el.appendChild(skeletonEl);
    };
    TimeGrid.prototype.unrenderContentSkeleton = function () {
        removeElement(this.contentSkeletonEl);
    };
    // Given a flat array of segments, return an array of sub-arrays, grouped by each segment's col
    TimeGrid.prototype.groupSegsByCol = function (segs) {
        var segsByCol = [];
        var i;
        for (i = 0; i < this.colCnt; i++) {
            segsByCol.push([]);
        }
        for (i = 0; i < segs.length; i++) {
            segsByCol[segs[i].col].push(segs[i]);
        }
        return segsByCol;
    };
    // Given segments grouped by column, insert the segments' elements into a parallel array of container
    // elements, each living within a column.
    TimeGrid.prototype.attachSegsByCol = function (segsByCol, containerEls) {
        var col;
        var segs;
        var i;
        for (col = 0; col < this.colCnt; col++) { // iterate each column grouping
            segs = segsByCol[col];
            for (i = 0; i < segs.length; i++) {
                containerEls[col].appendChild(segs[i].el);
            }
        }
    };
    /* Now Indicator
    ------------------------------------------------------------------------------------------------------------------*/
    TimeGrid.prototype.getNowIndicatorUnit = function () {
        return 'minute'; // will refresh on the minute
    };
    TimeGrid.prototype.renderNowIndicator = function (segs, date) {
        // HACK: if date columns not ready for some reason (scheduler)
        if (!this.colContainerEls) {
            return;
        }
        var top = this.computeDateTop(date);
        var nodes = [];
        var i;
        // render lines within the columns
        for (i = 0; i < segs.length; i++) {
            var lineEl = createElement('div', { className: 'fc-now-indicator fc-now-indicator-line' });
            lineEl.style.top = top + 'px';
            this.colContainerEls[segs[i].col].appendChild(lineEl);
            nodes.push(lineEl);
        }
        // render an arrow over the axis
        if (segs.length > 0) { // is the current time in view?
            var arrowEl = createElement('div', { className: 'fc-now-indicator fc-now-indicator-arrow' });
            arrowEl.style.top = top + 'px';
            this.contentSkeletonEl.appendChild(arrowEl);
            nodes.push(arrowEl);
        }
        this.nowIndicatorEls = nodes;
    };
    TimeGrid.prototype.unrenderNowIndicator = function () {
        if (this.nowIndicatorEls) {
            this.nowIndicatorEls.forEach(removeElement);
            this.nowIndicatorEls = null;
        }
    };
    /* Coordinates
    ------------------------------------------------------------------------------------------------------------------*/
    TimeGrid.prototype.getTotalSlatHeight = function () {
        return this.slatContainerEl.getBoundingClientRect().height;
    };
    // Computes the top coordinate, relative to the bounds of the grid, of the given date.
    // A `startOfDayDate` must be given for avoiding ambiguity over how to treat midnight.
    TimeGrid.prototype.computeDateTop = function (when, startOfDayDate) {
        if (!startOfDayDate) {
            startOfDayDate = startOfDay(when);
        }
        return this.computeTimeTop(createDuration(when.valueOf() - startOfDayDate.valueOf()));
    };
    // Computes the top coordinate, relative to the bounds of the grid, of the given time (a Duration).
    TimeGrid.prototype.computeTimeTop = function (duration) {
        var len = this.slatEls.length;
        var dateProfile = this.props.dateProfile;
        var slatCoverage = (duration.milliseconds - asRoughMs(dateProfile.minTime)) / asRoughMs(this.slotDuration); // floating-point value of # of slots covered
        var slatIndex;
        var slatRemainder;
        // compute a floating-point number for how many slats should be progressed through.
        // from 0 to number of slats (inclusive)
        // constrained because minTime/maxTime might be customized.
        slatCoverage = Math.max(0, slatCoverage);
        slatCoverage = Math.min(len, slatCoverage);
        // an integer index of the furthest whole slat
        // from 0 to number slats (*exclusive*, so len-1)
        slatIndex = Math.floor(slatCoverage);
        slatIndex = Math.min(slatIndex, len - 1);
        // how much further through the slatIndex slat (from 0.0-1.0) must be covered in addition.
        // could be 1.0 if slatCoverage is covering *all* the slots
        slatRemainder = slatCoverage - slatIndex;
        return this.slatPositions.tops[slatIndex] +
            this.slatPositions.getHeight(slatIndex) * slatRemainder;
    };
    // For each segment in an array, computes and assigns its top and bottom properties
    TimeGrid.prototype.computeSegVerticals = function (segs) {
        var eventMinHeight = this.opt('timeGridEventMinHeight');
        var i;
        var seg;
        var dayDate;
        for (i = 0; i < segs.length; i++) {
            seg = segs[i];
            dayDate = this.props.cells[seg.col].date;
            seg.top = this.computeDateTop(seg.start, dayDate);
            seg.bottom = Math.max(seg.top + eventMinHeight, this.computeDateTop(seg.end, dayDate));
        }
    };
    // Given segments that already have their top/bottom properties computed, applies those values to
    // the segments' elements.
    TimeGrid.prototype.assignSegVerticals = function (segs) {
        var i;
        var seg;
        for (i = 0; i < segs.length; i++) {
            seg = segs[i];
            applyStyle(seg.el, this.generateSegVerticalCss(seg));
        }
    };
    // Generates an object with CSS properties for the top/bottom coordinates of a segment element
    TimeGrid.prototype.generateSegVerticalCss = function (seg) {
        return {
            top: seg.top,
            bottom: -seg.bottom // flipped because needs to be space beyond bottom edge of event container
        };
    };
    /* Sizing
    ------------------------------------------------------------------------------------------------------------------*/
    TimeGrid.prototype.buildPositionCaches = function () {
        this.buildColPositions();
        this.buildSlatPositions();
    };
    TimeGrid.prototype.buildColPositions = function () {
        this.colPositions.build();
    };
    TimeGrid.prototype.buildSlatPositions = function () {
        this.slatPositions.build();
    };
    /* Hit System
    ------------------------------------------------------------------------------------------------------------------*/
    TimeGrid.prototype.positionToHit = function (positionLeft, positionTop) {
        var _a = this, dateEnv = _a.dateEnv, snapsPerSlot = _a.snapsPerSlot, slatPositions = _a.slatPositions, colPositions = _a.colPositions;
        var colIndex = colPositions.leftToIndex(positionLeft);
        var slatIndex = slatPositions.topToIndex(positionTop);
        if (colIndex != null && slatIndex != null) {
            var slatTop = slatPositions.tops[slatIndex];
            var slatHeight = slatPositions.getHeight(slatIndex);
            var partial = (positionTop - slatTop) / slatHeight; // floating point number between 0 and 1
            var localSnapIndex = Math.floor(partial * snapsPerSlot); // the snap # relative to start of slat
            var snapIndex = slatIndex * snapsPerSlot + localSnapIndex;
            var dayDate = this.props.cells[colIndex].date;
            var time = addDurations(this.props.dateProfile.minTime, multiplyDuration(this.snapDuration, snapIndex));
            var start = dateEnv.add(dayDate, time);
            var end = dateEnv.add(start, this.snapDuration);
            return {
                col: colIndex,
                dateSpan: {
                    range: { start: start, end: end },
                    allDay: false
                },
                dayEl: this.colEls[colIndex],
                relativeRect: {
                    left: colPositions.lefts[colIndex],
                    right: colPositions.rights[colIndex],
                    top: slatTop,
                    bottom: slatTop + slatHeight
                }
            };
        }
    };
    /* Event Drag Visualization
    ------------------------------------------------------------------------------------------------------------------*/
    TimeGrid.prototype._renderEventDrag = function (state) {
        if (state) {
            this.eventRenderer.hideByHash(state.affectedInstances);
            if (state.isEvent) {
                this.mirrorRenderer.renderSegs(state.segs, { isDragging: true, sourceSeg: state.sourceSeg });
            }
            else {
                this.fillRenderer.renderSegs('highlight', state.segs);
            }
        }
    };
    TimeGrid.prototype._unrenderEventDrag = function (state) {
        if (state) {
            this.eventRenderer.showByHash(state.affectedInstances);
            this.mirrorRenderer.unrender(state.segs, { isDragging: true, sourceSeg: state.sourceSeg });
            this.fillRenderer.unrender('highlight');
        }
    };
    /* Event Resize Visualization
    ------------------------------------------------------------------------------------------------------------------*/
    TimeGrid.prototype._renderEventResize = function (state) {
        if (state) {
            this.eventRenderer.hideByHash(state.affectedInstances);
            this.mirrorRenderer.renderSegs(state.segs, { isResizing: true, sourceSeg: state.sourceSeg });
        }
    };
    TimeGrid.prototype._unrenderEventResize = function (state) {
        if (state) {
            this.eventRenderer.showByHash(state.affectedInstances);
            this.mirrorRenderer.unrender(state.segs, { isResizing: true, sourceSeg: state.sourceSeg });
        }
    };
    /* Selection
    ------------------------------------------------------------------------------------------------------------------*/
    // Renders a visual indication of a selection. Overrides the default, which was to simply render a highlight.
    TimeGrid.prototype._renderDateSelection = function (segs) {
        if (segs) {
            if (this.opt('selectMirror')) {
                this.mirrorRenderer.renderSegs(segs, { isSelecting: true });
            }
            else {
                this.fillRenderer.renderSegs('highlight', segs);
            }
        }
    };
    TimeGrid.prototype._unrenderDateSelection = function (segs) {
        this.mirrorRenderer.unrender(segs, { isSelecting: true });
        this.fillRenderer.unrender('highlight');
    };
    return TimeGrid;
}(DateComponent));

dividing the two grids
            var dividerEl = _this.el.querySelector('.fc-divider');
            _this.dayGrid.bottomCoordPadding = dividerEl.getBoundingClientRect().height;
        }
        return _this;
    }
    TimeGridView.prototype.destroy = function () {
        _super.prototype.destroy.call(this);
        this.timeGrid.destroy();
        if (this.dayGrid) {
            this.dayGrid.destroy();
        }
        this.scroller.destroy();
    };
    /* Rendering
    ------------------------------------------------------------------------------------------------------------------*/
    // Builds the HTML skeleton for the view.
    // The day-grid and time-grid components will render inside containers defined by this HTML.
    TimeGridView.prototype.renderSkeletonHtml = function () {
        var theme = this.theme;
        return '' +
            '' +
            (this.opt('columnHeader') ?
                '' +
                    '' +
                    ' ' +
                    '' +
                    '' :
                '') +
            '' +
            '' +
            '' +
            (this.opt('allDaySlot') ?
                '

' +
'

' :
                '') +
            '' +
            '' +
            '' +
            '';
    };
    /* Now Indicator
    ------------------------------------------------------------------------------------------------------------------*/
    TimeGridView.prototype.getNowIndicatorUnit = function () {
        return this.timeGrid.getNowIndicatorUnit();
    };
    // subclasses should implement
    // renderNowIndicator(date: DateMarker) {
    // }
    TimeGridView.prototype.unrenderNowIndicator = function () {
        this.timeGrid.unrenderNowIndicator();
    };
    /* Dimensions
    ------------------------------------------------------------------------------------------------------------------*/
    TimeGridView.prototype.updateSize = function (isResize, viewHeight, isAuto) {
        _super.prototype.updateSize.call(this, isResize, viewHeight, isAuto); // will call updateBaseSize. important that executes first
        this.timeGrid.updateSize(isResize);
        if (this.dayGrid) {
            this.dayGrid.updateSize(isResize);
        }
    };
    // Adjusts the vertical dimensions of the view to the specified values
    TimeGridView.prototype.updateBaseSize = function (isResize, viewHeight, isAuto) {
        var _this = this;
        var eventLimit;
        var scrollerHeight;
        var scrollbarWidths;
        // make all axis cells line up
        this.axisWidth = matchCellWidths(findElements(this.el, '.fc-axis'));
        // hack to give the view some height prior to timeGrid's columns being rendered
        // TODO: separate setting height from scroller VS timeGrid.
        if (!this.timeGrid.colEls) {
            if (!isAuto) {
                scrollerHeight = this.computeScrollerHeight(viewHeight);
                this.scroller.setHeight(scrollerHeight);
            }
            return;
        }
        // set of fake row elements that must compensate when scroller has scrollbars
        var noScrollRowEls = findElements(this.el, '.fc-row').filter(function (node) {
            return !_this.scroller.el.contains(node);
        });
        // reset all dimensions back to the original state
        this.timeGrid.bottomRuleEl.style.display = 'none'; // will be shown later if this

is necessary
        this.scroller.clear(); // sets height to 'auto' and clears overflow
        noScrollRowEls.forEach(uncompensateScroll);
        // limit number of events in the all-day area
        if (this.dayGrid) {
            this.dayGrid.removeSegPopover(); // kill the "more" popover if displayed
            eventLimit = this.opt('eventLimit');
            if (eventLimit && typeof eventLimit !== 'number') {
                eventLimit = TIMEGRID_ALL_DAY_EVENT_LIMIT; // make sure "auto" goes to a real number
            }
            if (eventLimit) {
                this.dayGrid.limitRows(eventLimit);
            }
        }
        if (!isAuto) { // should we force dimensions of the scroll container?
            scrollerHeight = this.computeScrollerHeight(viewHeight);
            this.scroller.setHeight(scrollerHeight);
            scrollbarWidths = this.scroller.getScrollbarWidths();
            if (scrollbarWidths.left || scrollbarWidths.right) { // using scrollbars?
                // make the all-day and header rows lines up
                noScrollRowEls.forEach(function (rowEl) {
                    compensateScroll(rowEl, scrollbarWidths);
                });
                // the scrollbar compensation might have changed text flow, which might affect height, so recalculate
                // and reapply the desired height to the scroller.
                scrollerHeight = this.computeScrollerHeight(viewHeight);
                this.scroller.setHeight(scrollerHeight);
            }
            // guarantees the same scrollbar widths
            this.scroller.lockOverflow(scrollbarWidths);
            // if there's any space below the slats, show the horizontal rule.
            // this won't cause any new overflow, because lockOverflow already called.
            if (this.timeGrid.getTotalSlatHeight() < scrollerHeight) {
                this.timeGrid.bottomRuleEl.style.display = '';
            }
        }
    };
    // given a desired total height of the view, returns what the height of the scroller should be
    TimeGridView.prototype.computeScrollerHeight = function (viewHeight) {
        return viewHeight -
            subtractInnerElHeight(this.el, this.scroller.el); // everything that's NOT the scroller
    };
    /* Scroll
    ------------------------------------------------------------------------------------------------------------------*/
    // Computes the initial pre-configured scroll state prior to allowing the user to change it
    TimeGridView.prototype.computeDateScroll = function (duration) {
        var top = this.timeGrid.computeTimeTop(duration);
        // zoom can give weird floating-point values. rather scroll a little bit further
        top = Math.ceil(top);
        if (top) {
            top++; // to overcome top border that slots beyond the first have. looks better
        }
        return { top: top };
    };
    TimeGridView.prototype.queryDateScroll = function () {
        return { top: this.scroller.getScrollTop() };
    };
    TimeGridView.prototype.applyDateScroll = function (scroll) {
        if (scroll.top !== undefined) {
            this.scroller.setScrollTop(scroll.top);
        }
    };
    // Generates an HTML attribute string for setting the width of the axis, if it is known
    TimeGridView.prototype.axisStyleAttr = function () {
        if (this.axisWidth != null) {
            return 'style="width:' + this.axisWidth + 'px"';
        }
        return '';
    };
    return TimeGridView;
}(View));
TimeGridView.prototype.usesMinMaxTime = true; // indicates that minTime/maxTime affects rendering

var main = createPlugin({
    defaultView: 'timeGridWeek',
    views: {
        timeGrid: {
            class: TimeGridView$1,
            allDaySlot: true,
            slotDuration: '00:30:00',
            slotEventOverlap: true // a bad name. confused with overlap/constraint system
        },
        timeGridDay: {
            type: 'timeGrid',
            duration: { days: 1 }
        },
        timeGridWeek: {
            type: 'timeGrid',
            duration: { weeks: 1 }
        }
    }
});

export default main;
export { TimeGridView as AbstractTimeGridView, TimeGrid, TimeGridSlicer, TimeGridView$1 as TimeGridView, buildDayRanges, buildDayTable };

/*!
FullCalendar Time Grid Plugin v4.3.0
Docs & License: https://fullcalendar.io/
(c) 2019 Adam Shaw
*/

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@fullcalendar/core'), require('@fullcalendar/daygrid')) :
    typeof define === 'function' && define.amd ? define(['exports', '@fullcalendar/core', '@fullcalendar/daygrid'], factory) :
    (global = global || self, factory(global.FullCalendarTimeGrid = {}, global.FullCalendar, global.FullCalendarDayGrid));
}(this, function (exports, core, daygrid) { 'use strict';

    /*! *****************************************************************************
    Copyright (c) Microsoft Corporation. All rights reserved.
    Licensed under the Apache License, Version 2.0 (the "License"); you may not use
    this file except in compliance with the License. You may obtain a copy of the
    License at http://www.apache.org/licenses/LICENSE-2.0

    THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
    KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
    WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
    MERCHANTABLITY OR NON-INFRINGEMENT.

    See the Apache Version 2.0 License for specific language governing permissions
    and limitations under the License.
    ***************************************************************************** */
    /* global Reflect, Promise */

    function __extends(d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    }

    /*
    Only handles foreground segs.
    Does not own rendering. Use for low-level util methods by TimeGrid.
    */
    var TimeGridEventRenderer = /** @class */ (function (_super) {
        __extends(TimeGridEventRenderer, _super);
        function TimeGridEventRenderer(timeGrid) {
            var _this = _super.call(this, timeGrid.context) || this;
            _this.timeGrid = timeGrid;
            _this.fullTimeFormat = core.createFormatter({
                hour: 'numeric',
                minute: '2-digit',
                separator: _this.context.options.defaultRangeSeparator
            });
            return _this;
        }
        // Given an array of foreground segments, render a DOM element for each, computes position,
        // and attaches to the column inner-container elements.
        TimeGridEventRenderer.prototype.attachSegs = function (segs, mirrorInfo) {
            var segsByCol = this.timeGrid.groupSegsByCol(segs);
            // order the segs within each column
            // TODO: have groupSegsByCol do this?
            for (var col = 0; col < segsByCol.length; col++) {
                segsByCol[col] = this.sortEventSegs(segsByCol[col]);
            }
            this.segsByCol = segsByCol;
            this.timeGrid.attachSegsByCol(segsByCol, this.timeGrid.fgContainerEls);
        };
        TimeGridEventRenderer.prototype.detachSegs = function (segs) {
            segs.forEach(function (seg) {
                core.removeElement(seg.el);
            });
            this.segsByCol = null;
        };
        TimeGridEventRenderer.prototype.computeSegSizes = function (allSegs) {
            var _a = this, timeGrid = _a.timeGrid, segsByCol = _a.segsByCol;
            var colCnt = timeGrid.colCnt;
            timeGrid.computeSegVerticals(allSegs); // horizontals relies on this
            if (segsByCol) {
                for (var col = 0; col < colCnt; col++) {
                    this.computeSegHorizontals(segsByCol[col]); // compute horizontal coordinates, z-index's, and reorder the array
                }
            }
        };
        TimeGridEventRenderer.prototype.assignSegSizes = function (allSegs) {
            var _a = this, timeGrid = _a.timeGrid, segsByCol = _a.segsByCol;
            var colCnt = timeGrid.colCnt;
            timeGrid.assignSegVerticals(allSegs); // horizontals relies on this
            if (segsByCol) {
                for (var col = 0; col < colCnt; col++) {
                    this.assignSegCss(segsByCol[col]);
                }
            }
        };
        // Computes a default event time formatting string if `eventTimeFormat` is not explicitly defined
        TimeGridEventRenderer.prototype.computeEventTimeFormat = function () {
            return {
                hour: 'numeric',
                minute: '2-digit',
                meridiem: false
            };
        };
        // Computes a default `displayEventEnd` value if one is not expliclty defined
        TimeGridEventRenderer.prototype.computeDisplayEventEnd = function () {
            return true;
        };
        // Renders the HTML for a single event segment's default rendering
        TimeGridEventRenderer.prototype.renderSegHtml = function (seg, mirrorInfo) {
            var view = this.context.view;
            var eventRange = seg.eventRange;
            var eventDef = eventRange.def;
            var eventUi = eventRange.ui;
            var allDay = eventDef.allDay;
            var isDraggable = view.computeEventDraggable(eventDef, eventUi);
            var isResizableFromStart = seg.isStart && view.computeEventStartResizable(eventDef, eventUi);
            var isResizableFromEnd = seg.isEnd && view.computeEventEndResizable(eventDef, eventUi);
            var classes = this.getSegClasses(seg, isDraggable, isResizableFromStart || isResizableFromEnd, mirrorInfo);
            var skinCss = core.cssToStr(this.getSkinCss(eventUi));
            var timeText;
            var fullTimeText; // more verbose time text. for the print stylesheet
            var startTimeText; // just the start time text
            classes.unshift('fc-time-grid-event');
            // if the event appears to span more than one day...
            if (core.isMultiDayRange(eventRange.range)) {
                // Don't display time text on segments that run entirely through a day.
                // That would appear as midnight-midnight and would look dumb.
                // Otherwise, display the time text for the *segment's* times (like 6pm-midnight or midnight-10am)
                if (seg.isStart || seg.isEnd) {
                    var unzonedStart = seg.start;
                    var unzonedEnd = seg.end;
                    timeText = this._getTimeText(unzonedStart, unzonedEnd, allDay); // TODO: give the timezones
                    fullTimeText = this._getTimeText(unzonedStart, unzonedEnd, allDay, this.fullTimeFormat);
                    startTimeText = this._getTimeText(unzonedStart, unzonedEnd, allDay, null, false); // displayEnd=false
                }
            }
            else {
                // Display the normal time text for the *event's* times
                timeText = this.getTimeText(eventRange);
                fullTimeText = this.getTimeText(eventRange, this.fullTimeFormat);
                startTimeText = this.getTimeText(eventRange, null, false); // displayEnd=false
            }
            return '' +
                '

' +
(timeText ?
'

' +
'' + core.htmlEscape(timeText) + '' +
'

' :
                    '') +
                (eventDef.title ?
                    '

' +
core.htmlEscape(eventDef.title) +
'

' :
'') +
'

' +
                /* TODO: write CSS for this
                (isResizableFromStart ?
                  '

' :
                  ''
                  ) +
                */
                (isResizableFromEnd ?
                    '

' :
                    '') +
                '';
        };
        // Given an array of segments that are all in the same column, sets the backwardCoord and forwardCoord on each.
        // Assumed the segs are already ordered.
        // NOTE: Also reorders the given array by date!
        TimeGridEventRenderer.prototype.computeSegHorizontals = function (segs) {
            var levels;
            var level0;
            var i;
            levels = buildSlotSegLevels(segs);
            computeForwardSlotSegs(levels);
            if ((level0 = levels[0])) {
                for (i = 0; i < level0.length; i++) {
                    computeSlotSegPressures(level0[i]);
                }
                for (i = 0; i < level0.length; i++) {
                    this.computeSegForwardBack(level0[i], 0, 0);
                }
            }
        };
        // Calculate seg.forwardCoord and seg.backwardCoord for the segment, where both values range
        // from 0 to 1. If the calendar is left-to-right, the seg.backwardCoord maps to "left" and
        // seg.forwardCoord maps to "right" (via percentage). Vice-versa if the calendar is right-to-left.
        //
        // The segment might be part of a "series", which means consecutive segments with the same pressure
        // who's width is unknown until an edge has been hit. `seriesBackwardPressure` is the number of
        // segments behind this one in the current series, and `seriesBackwardCoord` is the starting
        // coordinate of the first segment in the series.
        TimeGridEventRenderer.prototype.computeSegForwardBack = function (seg, seriesBackwardPressure, seriesBackwardCoord) {
            var forwardSegs = seg.forwardSegs;
            var i;
            if (seg.forwardCoord === undefined) { // not already computed
                if (!forwardSegs.length) {
                    // if there are no forward segments, this segment should butt up against the edge
                    seg.forwardCoord = 1;
                }
                else {
                    // sort highest pressure first
                    this.sortForwardSegs(forwardSegs);
                    // this segment's forwardCoord will be calculated from the backwardCoord of the
                    // highest-pressure forward segment.
                    this.computeSegForwardBack(forwardSegs[0], seriesBackwardPressure + 1, seriesBackwardCoord);
                    seg.forwardCoord = forwardSegs[0].backwardCoord;
                }
                // calculate the backwardCoord from the forwardCoord. consider the series
                seg.backwardCoord = seg.forwardCoord -
                    (seg.forwardCoord - seriesBackwardCoord) / // available width for series
                        (seriesBackwardPressure + 1); // # of segments in the series
                // use this segment's coordinates to computed the coordinates of the less-pressurized
                // forward segments
                for (i = 0; i < forwardSegs.length; i++) {
                    this.computeSegForwardBack(forwardSegs[i], 0, seg.forwardCoord);
                }
            }
        };
        TimeGridEventRenderer.prototype.sortForwardSegs = function (forwardSegs) {
            var objs = forwardSegs.map(buildTimeGridSegCompareObj);
            var specs = [
                // put higher-pressure first
                { field: 'forwardPressure', order: -1 },
                // put segments that are closer to initial edge first (and favor ones with no coords yet)
                { field: 'backwardCoord', order: 1 }
            ].concat(this.context.view.eventOrderSpecs);
            objs.sort(function (obj0, obj1) {
                return core.compareByFieldSpecs(obj0, obj1, specs);
            });
            return objs.map(function (c) {
                return c._seg;
            });
        };
        // Given foreground event segments that have already had their position coordinates computed,
        // assigns position-related CSS values to their elements.
        TimeGridEventRenderer.prototype.assignSegCss = function (segs) {
            for (var _i = 0, segs_1 = segs; _i < segs_1.length; _i++) {
                var seg = segs_1[_i];
                core.applyStyle(seg.el, this.generateSegCss(seg));
                if (seg.level > 0) {
                    seg.el.classList.add('fc-time-grid-event-inset');
                }
                // if the event is short that the title will be cut off,
                // attach a className that condenses the title into the time area.
                if (seg.eventRange.def.title && seg.bottom - seg.top < 30) {
                    seg.el.classList.add('fc-short'); // TODO: "condensed" is a better name
                }
            }
        };
        // Generates an object with CSS properties/values that should be applied to an event segment element.
        // Contains important positioning-related properties that should be applied to any event element, customized or not.
        TimeGridEventRenderer.prototype.generateSegCss = function (seg) {
            var shouldOverlap = this.context.options.slotEventOverlap;
            var backwardCoord = seg.backwardCoord; // the left side if LTR. the right side if RTL. floating-point
            var forwardCoord = seg.forwardCoord; // the right side if LTR. the left side if RTL. floating-point
            var props = this.timeGrid.generateSegVerticalCss(seg); // get top/bottom first
            var isRtl = this.timeGrid.isRtl;
            var left; // amount of space from left edge, a fraction of the total width
            var right; // amount of space from right edge, a fraction of the total width
            if (shouldOverlap) {
                // double the width, but don't go beyond the maximum forward coordinate (1.0)
                forwardCoord = Math.min(1, backwardCoord + (forwardCoord - backwardCoord) * 2);
            }
            if (isRtl) {
                left = 1 - forwardCoord;
                right = backwardCoord;
            }
            else {
                left = backwardCoord;
                right = 1 - forwardCoord;
            }
            props.zIndex = seg.level + 1; // convert from 0-base to 1-based
            props.left = left * 100 + '%';
            props.right = right * 100 + '%';
            if (shouldOverlap && seg.forwardPressure) {
                // add padding to the edge so that forward stacked events don't cover the resizer's icon
                props[isRtl ? 'marginLeft' : 'marginRight'] = 10 * 2; // 10 is a guesstimate of the icon's width
            }
            return props;
        };
        return TimeGridEventRenderer;
    }(core.FgEventRenderer));
    // Builds an array of segments "levels". The first level will be the leftmost tier of segments if the calendar is
    // left-to-right, or the rightmost if the calendar is right-to-left. Assumes the segments are already ordered by date.
    function buildSlotSegLevels(segs) {
        var levels = [];
        var i;
        var seg;
        var j;
        for (i = 0; i < segs.length; i++) {
            seg = segs[i];
            // go through all the levels and stop on the first level where there are no collisions
            for (j = 0; j < levels.length; j++) {
                if (!computeSlotSegCollisions(seg, levels[j]).length) {
                    break;
                }
            }
            seg.level = j;
            (levels[j] || (levels[j] = [])).push(seg);
        }
        return levels;
    }
    // For every segment, figure out the other segments that are in subsequent
    // levels that also occupy the same vertical space. Accumulate in seg.forwardSegs
    function computeForwardSlotSegs(levels) {
        var i;
        var level;
        var j;
        var seg;
        var k;
        for (i = 0; i < levels.length; i++) {
            level = levels[i];
            for (j = 0; j < level.length; j++) {
                seg = level[j];
                seg.forwardSegs = [];
                for (k = i + 1; k < levels.length; k++) {
                    computeSlotSegCollisions(seg, levels[k], seg.forwardSegs);
                }
            }
        }
    }
    // Figure out which path forward (via seg.forwardSegs) results in the longest path until
    // the furthest edge is reached. The number of segments in this path will be seg.forwardPressure
    function computeSlotSegPressures(seg) {
        var forwardSegs = seg.forwardSegs;
        var forwardPressure = 0;
        var i;
        var forwardSeg;
        if (seg.forwardPressure === undefined) { // not already computed
            for (i = 0; i < forwardSegs.length; i++) {
                forwardSeg = forwardSegs[i];
                // figure out the child's maximum forward path
                computeSlotSegPressures(forwardSeg);
                // either use the existing maximum, or use the child's forward pressure
                // plus one (for the forwardSeg itself)
                forwardPressure = Math.max(forwardPressure, 1 + forwardSeg.forwardPressure);
            }
            seg.forwardPressure = forwardPressure;
        }
    }
    // Find all the segments in `otherSegs` that vertically collide with `seg`.
    // Append into an optionally-supplied `results` array and return.
    function computeSlotSegCollisions(seg, otherSegs, results) {
        if (results === void 0) { results = []; }
        for (var i = 0; i < otherSegs.length; i++) {
            if (isSlotSegCollision(seg, otherSegs[i])) {
                results.push(otherSegs[i]);
            }
        }
        return results;
    }
    // Do these segments occupy the same vertical space?
    function isSlotSegCollision(seg1, seg2) {
        return seg1.bottom > seg2.top && seg1.top < seg2.bottom;
    }
    function buildTimeGridSegCompareObj(seg) {
        var obj = core.buildSegCompareObj(seg);
        obj.forwardPressure = seg.forwardPressure;
        obj.backwardCoord = seg.backwardCoord;
        return obj;
    }

    /* A component that renders one or more columns of vertical time slots
    ----------------------------------------------------------------------------------------------------------------------*/
    // potential nice values for the slot-duration and interval-duration
    // from largest to smallest
    var AGENDA_STOCK_SUB_DURATIONS = [
        { hours: 1 },
        { minutes: 30 },
        { minutes: 15 },
        { seconds: 30 },
        { seconds: 15 }
    ];
    var TimeGrid = /** @class */ (function (_super) {
        __extends(TimeGrid, _super);
        function TimeGrid(context, el, renderProps) {
            var _this = _super.call(this, context, el) || this;
            _this.isSlatSizesDirty = false;
            _this.isColSizesDirty = false;
            _this.renderSlats = core.memoizeRendering(_this._renderSlats);
            var eventRenderer = _this.eventRenderer = new TimeGridEventRenderer(_this);
            var fillRenderer = _this.fillRenderer = new TimeGridFillRenderer(_this);
            _this.mirrorRenderer = new TimeGridMirrorRenderer(_this);
            var renderColumns = _this.renderColumns = core.memoizeRendering(_this._renderColumns, _this._unrenderColumns);
            _this.renderBusinessHours = core.memoizeRendering(fillRenderer.renderSegs.bind(fillRenderer, 'businessHours'), fillRenderer.unrender.bind(fillRenderer, 'businessHours'), [renderColumns]);
            _this.renderDateSelection = core.memoizeRendering(_this._renderDateSelection, _this._unrenderDateSelection, [renderColumns]);
            _this.renderFgEvents = core.memoizeRendering(eventRenderer.renderSegs.bind(eventRenderer), eventRenderer.unrender.bind(eventRenderer), [renderColumns]);
            _this.renderBgEvents = core.memoizeRendering(fillRenderer.renderSegs.bind(fillRenderer, 'bgEvent'), fillRenderer.unrender.bind(fillRenderer, 'bgEvent'), [renderColumns]);
            _this.renderEventSelection = core.memoizeRendering(eventRenderer.selectByInstanceId.bind(eventRenderer), eventRenderer.unselectByInstanceId.bind(eventRenderer), [_this.renderFgEvents]);
            _this.renderEventDrag = core.memoizeRendering(_this._renderEventDrag, _this._unrenderEventDrag, [renderColumns]);
            _this.renderEventResize = core.memoizeRendering(_this._renderEventResize, _this._unrenderEventResize, [renderColumns]);
            _this.processOptions();
            el.innerHTML =
                '

' +
'

';
            _this.rootBgContainerEl = el.querySelector('.fc-bg');
            _this.slatContainerEl = el.querySelector('.fc-slats');
            _this.bottomRuleEl = el.querySelector('.fc-divider');
            _this.renderProps = renderProps;
            return _this;
        }
        /* Options
        ------------------------------------------------------------------------------------------------------------------*/
        // Parses various options into properties of this object
        TimeGrid.prototype.processOptions = function () {
            var slotDuration = this.opt('slotDuration');
            var snapDuration = this.opt('snapDuration');
            var snapsPerSlot;
            var input;
            slotDuration = core.createDuration(slotDuration);
            snapDuration = snapDuration ? core.createDuration(snapDuration) : slotDuration;
            snapsPerSlot = core.wholeDivideDurations(slotDuration, snapDuration);
            if (snapsPerSlot === null) {
                snapDuration = slotDuration;
                snapsPerSlot = 1;
                // TODO: say warning?
            }
            this.slotDuration = slotDuration;
            this.snapDuration = snapDuration;
            this.snapsPerSlot = snapsPerSlot;
            // might be an array value (for TimelineView).
            // if so, getting the most granular entry (the last one probably).
            input = this.opt('slotLabelFormat');
            if (Array.isArray(input)) {
                input = input[input.length - 1];
            }
            this.labelFormat = core.createFormatter(input || {
                hour: 'numeric',
                minute: '2-digit',
                omitZeroMinute: true,
                meridiem: 'short'
            });
            input = this.opt('slotLabelInterval');
            this.labelInterval = input ?
                core.createDuration(input) :
                this.computeLabelInterval(slotDuration);
        };
        // Computes an automatic value for slotLabelInterval
        TimeGrid.prototype.computeLabelInterval = function (slotDuration) {
            var i;
            var labelInterval;
            var slotsPerLabel;
            // find the smallest stock label interval that results in more than one slots-per-label
            for (i = AGENDA_STOCK_SUB_DURATIONS.length - 1; i >= 0; i--) {
                labelInterval = core.createDuration(AGENDA_STOCK_SUB_DURATIONS[i]);
                slotsPerLabel = core.wholeDivideDurations(labelInterval, slotDuration);
                if (slotsPerLabel !== null && slotsPerLabel > 1) {
                    return labelInterval;
                }
            }
            return slotDuration; // fall back
        };
        /* Rendering
        ------------------------------------------------------------------------------------------------------------------*/
        TimeGrid.prototype.render = function (props) {
            var cells = props.cells;
            this.colCnt = cells.length;
            this.renderSlats(props.dateProfile);
            this.renderColumns(props.cells, props.dateProfile);
            this.renderBusinessHours(props.businessHourSegs);
            this.renderDateSelection(props.dateSelectionSegs);
            this.renderFgEvents(props.fgEventSegs);
            this.renderBgEvents(props.bgEventSegs);
            this.renderEventSelection(props.eventSelection);
            this.renderEventDrag(props.eventDrag);
            this.renderEventResize(props.eventResize);
        };
        TimeGrid.prototype.destroy = function () {
            _super.prototype.destroy.call(this);
            // should unrender everything else too
            this.renderSlats.unrender();
            this.renderColumns.unrender();
        };
        TimeGrid.prototype.updateSize = function (isResize) {
            var _a = this, fillRenderer = _a.fillRenderer, eventRenderer = _a.eventRenderer, mirrorRenderer = _a.mirrorRenderer;
            if (isResize || this.isSlatSizesDirty) {
                this.buildSlatPositions();
                this.isSlatSizesDirty = false;
            }
            if (isResize || this.isColSizesDirty) {
                this.buildColPositions();
                this.isColSizesDirty = false;
            }
            fillRenderer.computeSizes(isResize);
            eventRenderer.computeSizes(isResize);
            mirrorRenderer.computeSizes(isResize);
            fillRenderer.assignSizes(isResize);
            eventRenderer.assignSizes(isResize);
            mirrorRenderer.assignSizes(isResize);
        };
        TimeGrid.prototype._renderSlats = function (dateProfile) {
            var theme = this.theme;
            this.slatContainerEl.innerHTML =
                '' +
                    this.renderSlatRowHtml(dateProfile) +
                    '';
            this.slatEls = core.findElements(this.slatContainerEl, 'tr');
            this.slatPositions = new core.PositionCache(this.el, this.slatEls, false, true // vertical
            );
            this.isSlatSizesDirty = true;
        };
        // Generates the HTML for the horizontal "slats" that run width-wise. Has a time axis on a side. Depends on RTL.
        TimeGrid.prototype.renderSlatRowHtml = function (dateProfile) {
            var _a = this, dateEnv = _a.dateEnv, theme = _a.theme, isRtl = _a.isRtl;
            var html = '';
            var dayStart = core.startOfDay(dateProfile.renderRange.start);
            var slotTime = dateProfile.minTime;
            var slotIterator = core.createDuration(0);
            var slotDate; // will be on the view's first day, but we only care about its time
            var isLabeled;
            var axisHtml;
            // Calculate the time for each slot
            while (core.asRoughMs(slotTime) < core.asRoughMs(dateProfile.maxTime)) {
                slotDate = dateEnv.add(dayStart, slotTime);
                isLabeled = core.wholeDivideDurations(slotIterator, this.labelInterval) !== null;
                axisHtml =
                    '' +
                        (isLabeled ?
                            '' + // for matchCellWidths
                                core.htmlEscape(dateEnv.format(slotDate, this.labelFormat)) +
                                '' :
                            '') +
                        '';
                html +=
                    '' +
                        (!isRtl ? axisHtml : '') +
                        '' +
                        (isRtl ? axisHtml : '') +
                        '';
                slotTime = core.addDurations(slotTime, this.slotDuration);
                slotIterator = core.addDurations(slotIterator, this.slotDuration);
            }
            return html;
        };
        TimeGrid.prototype._renderColumns = function (cells, dateProfile) {
            var _a = this, theme = _a.theme, dateEnv = _a.dateEnv, view = _a.view;
            var bgRow = new daygrid.DayBgRow(this.context);
            this.rootBgContainerEl.innerHTML =
                '' +
                    bgRow.renderHtml({
                        cells: cells,
                        dateProfile: dateProfile,
                        renderIntroHtml: this.renderProps.renderBgIntroHtml
                    }) +
                    '';
            this.colEls = core.findElements(this.el, '.fc-day, .fc-disabled-day');
            for (var col = 0; col < this.colCnt; col++) {
                this.publiclyTrigger('dayRender', [
                    {
                        date: dateEnv.toDate(cells[col].date),
                        el: this.colEls[col],
                        view: view
                    }
                ]);
            }
            if (this.isRtl) {
                this.colEls.reverse();
            }
            this.colPositions = new core.PositionCache(this.el, this.colEls, true, // horizontal
            false);
            this.renderContentSkeleton();
            this.isColSizesDirty = true;
        };
        TimeGrid.prototype._unrenderColumns = function () {
            this.unrenderContentSkeleton();
        };
        /* Content Skeleton
        ------------------------------------------------------------------------------------------------------------------*/
        // Renders the DOM that the view's content will live in
        TimeGrid.prototype.renderContentSkeleton = function () {
            var parts = [];
            var skeletonEl;
            parts.push(this.renderProps.renderIntroHtml());
            for (var i = 0; i < this.colCnt; i++) {
                parts.push('' +
                    '

' +
'

' +
                    '');
            }
            if (this.isRtl) {
                parts.reverse();
            }
            skeletonEl = this.contentSkeletonEl = core.htmlToElement('

' +
                '' +
                '' + parts.join('') + '' +
                '' +
                '

');
            this.colContainerEls = core.findElements(skeletonEl, '.fc-content-col');
            this.mirrorContainerEls = core.findElements(skeletonEl, '.fc-mirror-container');
            this.fgContainerEls = core.findElements(skeletonEl, '.fc-event-container:not(.fc-mirror-container)');
            this.bgContainerEls = core.findElements(skeletonEl, '.fc-bgevent-container');
            this.highlightContainerEls = core.findElements(skeletonEl, '.fc-highlight-container');
            this.businessContainerEls = core.findElements(skeletonEl, '.fc-business-container');
            if (this.isRtl) {
                this.colContainerEls.reverse();
                this.mirrorContainerEls.reverse();
                this.fgContainerEls.reverse();
                this.bgContainerEls.reverse();
                this.highlightContainerEls.reverse();
                this.businessContainerEls.reverse();
            }
            this.el.appendChild(skeletonEl);
        };
        TimeGrid.prototype.unrenderContentSkeleton = function () {
            core.removeElement(this.contentSkeletonEl);
        };
        // Given a flat array of segments, return an array of sub-arrays, grouped by each segment's col
        TimeGrid.prototype.groupSegsByCol = function (segs) {
            var segsByCol = [];
            var i;
            for (i = 0; i < this.colCnt; i++) {
                segsByCol.push([]);
            }
            for (i = 0; i < segs.length; i++) {
                segsByCol[segs[i].col].push(segs[i]);
            }
            return segsByCol;
        };
        // Given segments grouped by column, insert the segments' elements into a parallel array of container
        // elements, each living within a column.
        TimeGrid.prototype.attachSegsByCol = function (segsByCol, containerEls) {
            var col;
            var segs;
            var i;
            for (col = 0; col < this.colCnt; col++) { // iterate each column grouping
                segs = segsByCol[col];
                for (i = 0; i < segs.length; i++) {
                    containerEls[col].appendChild(segs[i].el);
                }
            }
        };
        /* Now Indicator
        ------------------------------------------------------------------------------------------------------------------*/
        TimeGrid.prototype.getNowIndicatorUnit = function () {
            return 'minute'; // will refresh on the minute
        };
        TimeGrid.prototype.renderNowIndicator = function (segs, date) {
            // HACK: if date columns not ready for some reason (scheduler)
            if (!this.colContainerEls) {
                return;
            }
            var top = this.computeDateTop(date);
            var nodes = [];
            var i;
            // render lines within the columns
            for (i = 0; i < segs.length; i++) {
                var lineEl = core.createElement('div', { className: 'fc-now-indicator fc-now-indicator-line' });
                lineEl.style.top = top + 'px';
                this.colContainerEls[segs[i].col].appendChild(lineEl);
                nodes.push(lineEl);
            }
            // render an arrow over the axis
            if (segs.length > 0) { // is the current time in view?
                var arrowEl = core.createElement('div', { className: 'fc-now-indicator fc-now-indicator-arrow' });
                arrowEl.style.top = top + 'px';
                this.contentSkeletonEl.appendChild(arrowEl);
                nodes.push(arrowEl);
            }
            this.nowIndicatorEls = nodes;
        };
        TimeGrid.prototype.unrenderNowIndicator = function () {
            if (this.nowIndicatorEls) {
                this.nowIndicatorEls.forEach(core.removeElement);
                this.nowIndicatorEls = null;
            }
        };
        /* Coordinates
        ------------------------------------------------------------------------------------------------------------------*/
        TimeGrid.prototype.getTotalSlatHeight = function () {
            return this.slatContainerEl.getBoundingClientRect().height;
        };
        // Computes the top coordinate, relative to the bounds of the grid, of the given date.
        // A `startOfDayDate` must be given for avoiding ambiguity over how to treat midnight.
        TimeGrid.prototype.computeDateTop = function (when, startOfDayDate) {
            if (!startOfDayDate) {
                startOfDayDate = core.startOfDay(when);
            }
            return this.computeTimeTop(core.createDuration(when.valueOf() - startOfDayDate.valueOf()));
        };
        // Computes the top coordinate, relative to the bounds of the grid, of the given time (a Duration).
        TimeGrid.prototype.computeTimeTop = function (duration) {
            var len = this.slatEls.length;
            var dateProfile = this.props.dateProfile;
            var slatCoverage = (duration.milliseconds - core.asRoughMs(dateProfile.minTime)) / core.asRoughMs(this.slotDuration); // floating-point value of # of slots covered
            var slatIndex;
            var slatRemainder;
            // compute a floating-point number for how many slats should be progressed through.
            // from 0 to number of slats (inclusive)
            // constrained because minTime/maxTime might be customized.
            slatCoverage = Math.max(0, slatCoverage);
            slatCoverage = Math.min(len, slatCoverage);
            // an integer index of the furthest whole slat
            // from 0 to number slats (*exclusive*, so len-1)
            slatIndex = Math.floor(slatCoverage);
            slatIndex = Math.min(slatIndex, len - 1);
            // how much further through the slatIndex slat (from 0.0-1.0) must be covered in addition.
            // could be 1.0 if slatCoverage is covering *all* the slots
            slatRemainder = slatCoverage - slatIndex;
            return this.slatPositions.tops[slatIndex] +
                this.slatPositions.getHeight(slatIndex) * slatRemainder;
        };
        // For each segment in an array, computes and assigns its top and bottom properties
        TimeGrid.prototype.computeSegVerticals = function (segs) {
            var eventMinHeight = this.opt('timeGridEventMinHeight');
            var i;
            var seg;
            var dayDate;
            for (i = 0; i < segs.length; i++) {
                seg = segs[i];
                dayDate = this.props.cells[seg.col].date;
                seg.top = this.computeDateTop(seg.start, dayDate);
                seg.bottom = Math.max(seg.top + eventMinHeight, this.computeDateTop(seg.end, dayDate));
            }
        };
        // Given segments that already have their top/bottom properties computed, applies those values to
        // the segments' elements.
        TimeGrid.prototype.assignSegVerticals = function (segs) {
            var i;
            var seg;
            for (i = 0; i < segs.length; i++) {
                seg = segs[i];
                core.applyStyle(seg.el, this.generateSegVerticalCss(seg));
            }
        };
        // Generates an object with CSS properties for the top/bottom coordinates of a segment element
        TimeGrid.prototype.generateSegVerticalCss = function (seg) {
            return {
                top: seg.top,
                bottom: -seg.bottom // flipped because needs to be space beyond bottom edge of event container
            };
        };
        /* Sizing
        ------------------------------------------------------------------------------------------------------------------*/
        TimeGrid.prototype.buildPositionCaches = function () {
            this.buildColPositions();
            this.buildSlatPositions();
        };
        TimeGrid.prototype.buildColPositions = function () {
            this.colPositions.build();
        };
        TimeGrid.prototype.buildSlatPositions = function () {
            this.slatPositions.build();
        };
        /* Hit System
        ------------------------------------------------------------------------------------------------------------------*/
        TimeGrid.prototype.positionToHit = function (positionLeft, positionTop) {
            var _a = this, dateEnv = _a.dateEnv, snapsPerSlot = _a.snapsPerSlot, slatPositions = _a.slatPositions, colPositions = _a.colPositions;
            var colIndex = colPositions.leftToIndex(positionLeft);
            var slatIndex = slatPositions.topToIndex(positionTop);
            if (colIndex != null && slatIndex != null) {
                var slatTop = slatPositions.tops[slatIndex];
                var slatHeight = slatPositions.getHeight(slatIndex);
                var partial = (positionTop - slatTop) / slatHeight; // floating point number between 0 and 1
                var localSnapIndex = Math.floor(partial * snapsPerSlot); // the snap # relative to start of slat
                var snapIndex = slatIndex * snapsPerSlot + localSnapIndex;
                var dayDate = this.props.cells[colIndex].date;
                var time = core.addDurations(this.props.dateProfile.minTime, core.multiplyDuration(this.snapDuration, snapIndex));
                var start = dateEnv.add(dayDate, time);
                var end = dateEnv.add(start, this.snapDuration);
                return {
                    col: colIndex,
                    dateSpan: {
                        range: { start: start, end: end },
                        allDay: false
                    },
                    dayEl: this.colEls[colIndex],
                    relativeRect: {
                        left: colPositions.lefts[colIndex],
                        right: colPositions.rights[colIndex],
                        top: slatTop,
                        bottom: slatTop + slatHeight
                    }
                };
            }
        };
        /* Event Drag Visualization
        ------------------------------------------------------------------------------------------------------------------*/
        TimeGrid.prototype._renderEventDrag = function (state) {
            if (state) {
                this.eventRenderer.hideByHash(state.affectedInstances);
                if (state.isEvent) {
                    this.mirrorRenderer.renderSegs(state.segs, { isDragging: true, sourceSeg: state.sourceSeg });
                }
                else {
                    this.fillRenderer.renderSegs('highlight', state.segs);
                }
            }
        };
        TimeGrid.prototype._unrenderEventDrag = function (state) {
            if (state) {
                this.eventRenderer.showByHash(state.affectedInstances);
                this.mirrorRenderer.unrender(state.segs, { isDragging: true, sourceSeg: state.sourceSeg });
                this.fillRenderer.unrender('highlight');
            }
        };
        /* Event Resize Visualization
        ------------------------------------------------------------------------------------------------------------------*/
        TimeGrid.prototype._renderEventResize = function (state) {
            if (state) {
                this.eventRenderer.hideByHash(state.affectedInstances);
                this.mirrorRenderer.renderSegs(state.segs, { isResizing: true, sourceSeg: state.sourceSeg });
            }
        };
        TimeGrid.prototype._unrenderEventResize = function (state) {
            if (state) {
                this.eventRenderer.showByHash(state.affectedInstances);
                this.mirrorRenderer.unrender(state.segs, { isResizing: true, sourceSeg: state.sourceSeg });
            }
        };
        /* Selection
        ------------------------------------------------------------------------------------------------------------------*/
        // Renders a visual indication of a selection. Overrides the default, which was to simply render a highlight.
        TimeGrid.prototype._renderDateSelection = function (segs) {
            if (segs) {
                if (this.opt('selectMirror')) {
                    this.mirrorRenderer.renderSegs(segs, { isSelecting: true });
                }
                else {
                    this.fillRenderer.renderSegs('highlight', segs);
                }
            }
        };
        TimeGrid.prototype._unrenderDateSelection = function (segs) {
            this.mirrorRenderer.unrender(segs, { isSelecting: true });
            this.fillRenderer.unrender('highlight');
        };
        return TimeGrid;
    }(core.DateComponent));

dividing the two grids
                var dividerEl = _this.el.querySelector('.fc-divider');
                _this.dayGrid.bottomCoordPadding = dividerEl.getBoundingClientRect().height;
            }
            return _this;
        }
        TimeGridView.prototype.destroy = function () {
            _super.prototype.destroy.call(this);
            this.timeGrid.destroy();
            if (this.dayGrid) {
                this.dayGrid.destroy();
            }
            this.scroller.destroy();
        };
        /* Rendering
        ------------------------------------------------------------------------------------------------------------------*/
        // Builds the HTML skeleton for the view.
        // The day-grid and time-grid components will render inside containers defined by this HTML.
        TimeGridView.prototype.renderSkeletonHtml = function () {
            var theme = this.theme;
            return '' +
                '' +
                (this.opt('columnHeader') ?
                    '' +
                        '' +
                        ' ' +
                        '' +
                        '' :
                    '') +
                '' +
                '' +
                '' +
                (this.opt('allDaySlot') ?
                    '

' +
'

' :
                    '') +
                '' +
                '' +
                '' +
                '';
        };
        /* Now Indicator
        ------------------------------------------------------------------------------------------------------------------*/
        TimeGridView.prototype.getNowIndicatorUnit = function () {
            return this.timeGrid.getNowIndicatorUnit();
        };
        // subclasses should implement
        // renderNowIndicator(date: DateMarker) {
        // }
        TimeGridView.prototype.unrenderNowIndicator = function () {
            this.timeGrid.unrenderNowIndicator();
        };
        /* Dimensions
        ------------------------------------------------------------------------------------------------------------------*/
        TimeGridView.prototype.updateSize = function (isResize, viewHeight, isAuto) {
            _super.prototype.updateSize.call(this, isResize, viewHeight, isAuto); // will call updateBaseSize. important that executes first
            this.timeGrid.updateSize(isResize);
            if (this.dayGrid) {
                this.dayGrid.updateSize(isResize);
            }
        };
        // Adjusts the vertical dimensions of the view to the specified values
        TimeGridView.prototype.updateBaseSize = function (isResize, viewHeight, isAuto) {
            var _this = this;
            var eventLimit;
            var scrollerHeight;
            var scrollbarWidths;
            // make all axis cells line up
            this.axisWidth = core.matchCellWidths(core.findElements(this.el, '.fc-axis'));
            // hack to give the view some height prior to timeGrid's columns being rendered
            // TODO: separate setting height from scroller VS timeGrid.
            if (!this.timeGrid.colEls) {
                if (!isAuto) {
                    scrollerHeight = this.computeScrollerHeight(viewHeight);
                    this.scroller.setHeight(scrollerHeight);
                }
                return;
            }
            // set of fake row elements that must compensate when scroller has scrollbars
            var noScrollRowEls = core.findElements(this.el, '.fc-row').filter(function (node) {
                return !_this.scroller.el.contains(node);
            });
            // reset all dimensions back to the original state
            this.timeGrid.bottomRuleEl.style.display = 'none'; // will be shown later if this

is necessary
            this.scroller.clear(); // sets height to 'auto' and clears overflow
            noScrollRowEls.forEach(core.uncompensateScroll);
            // limit number of events in the all-day area
            if (this.dayGrid) {
                this.dayGrid.removeSegPopover(); // kill the "more" popover if displayed
                eventLimit = this.opt('eventLimit');
                if (eventLimit && typeof eventLimit !== 'number') {
                    eventLimit = TIMEGRID_ALL_DAY_EVENT_LIMIT; // make sure "auto" goes to a real number
                }
                if (eventLimit) {
                    this.dayGrid.limitRows(eventLimit);
                }
            }
            if (!isAuto) { // should we force dimensions of the scroll container?
                scrollerHeight = this.computeScrollerHeight(viewHeight);
                this.scroller.setHeight(scrollerHeight);
                scrollbarWidths = this.scroller.getScrollbarWidths();
                if (scrollbarWidths.left || scrollbarWidths.right) { // using scrollbars?
                    // make the all-day and header rows lines up
                    noScrollRowEls.forEach(function (rowEl) {
                        core.compensateScroll(rowEl, scrollbarWidths);
                    });
                    // the scrollbar compensation might have changed text flow, which might affect height, so recalculate
                    // and reapply the desired height to the scroller.
                    scrollerHeight = this.computeScrollerHeight(viewHeight);
                    this.scroller.setHeight(scrollerHeight);
                }
                // guarantees the same scrollbar widths
                this.scroller.lockOverflow(scrollbarWidths);
                // if there's any space below the slats, show the horizontal rule.
                // this won't cause any new overflow, because lockOverflow already called.
                if (this.timeGrid.getTotalSlatHeight() < scrollerHeight) {
                    this.timeGrid.bottomRuleEl.style.display = '';
                }
            }
        };
        // given a desired total height of the view, returns what the height of the scroller should be
        TimeGridView.prototype.computeScrollerHeight = function (viewHeight) {
            return viewHeight -
                core.subtractInnerElHeight(this.el, this.scroller.el); // everything that's NOT the scroller
        };
        /* Scroll
        ------------------------------------------------------------------------------------------------------------------*/
        // Computes the initial pre-configured scroll state prior to allowing the user to change it
        TimeGridView.prototype.computeDateScroll = function (duration) {
            var top = this.timeGrid.computeTimeTop(duration);
            // zoom can give weird floating-point values. rather scroll a little bit further
            top = Math.ceil(top);
            if (top) {
                top++; // to overcome top border that slots beyond the first have. looks better
            }
            return { top: top };
        };
        TimeGridView.prototype.queryDateScroll = function () {
            return { top: this.scroller.getScrollTop() };
        };
        TimeGridView.prototype.applyDateScroll = function (scroll) {
            if (scroll.top !== undefined) {
                this.scroller.setScrollTop(scroll.top);
            }
        };
        // Generates an HTML attribute string for setting the width of the axis, if it is known
        TimeGridView.prototype.axisStyleAttr = function () {
            if (this.axisWidth != null) {
                return 'style="width:' + this.axisWidth + 'px"';
            }
            return '';
        };
        return TimeGridView;
    }(core.View));
    TimeGridView.prototype.usesMinMaxTime = true; // indicates that minTime/maxTime affects rendering

    var main = core.createPlugin({
        defaultView: 'timeGridWeek',
        views: {
            timeGrid: {
                class: TimeGridView$1,
                allDaySlot: true,
                slotDuration: '00:30:00',
                slotEventOverlap: true // a bad name. confused with overlap/constraint system
            },
            timeGridDay: {
                type: 'timeGrid',
                duration: { days: 1 }
            },
            timeGridWeek: {
                type: 'timeGrid',
                duration: { weeks: 1 }
            }
        }
    });

    exports.AbstractTimeGridView = TimeGridView;
    exports.TimeGrid = TimeGrid;
    exports.TimeGridSlicer = TimeGridSlicer;
    exports.TimeGridView = TimeGridView$1;
    exports.buildDayRanges = buildDayRanges;
    exports.buildDayTable = buildDayTable;
    exports.default = main;

Object.defineProperty(exports, '__esModule', { value: true });

}));

// Generated by dts-bundle v0.7.3-fork.1
// Dependencies for this module:
// ../../../../../@fullcalendar/core
// ../../../../../@fullcalendar/daygrid

declare module '@fullcalendar/timegrid' {
    import AbstractTimeGridView from '@fullcalendar/timegrid/AbstractTimeGridView';
    import TimeGridView, { buildDayTable } from '@fullcalendar/timegrid/TimeGridView';
    import { TimeGridSeg } from '@fullcalendar/timegrid/TimeGrid';
    import { TimeGridSlicer, buildDayRanges } from '@fullcalendar/timegrid/SimpleTimeGrid';
    export { TimeGridView, AbstractTimeGridView, buildDayTable, buildDayRanges, TimeGridSlicer, TimeGridSeg };
    export { default as TimeGrid } from '@fullcalendar/timegrid/TimeGrid';
    const _default: import("@fullcalendar/core").PluginDef;
    export default _default;
}

declare module '@fullcalendar/timegrid/AbstractTimeGridView' {
    import { ScrollComponent, View, ViewSpec, DateProfileGenerator, ComponentContext, Duration } from '@fullcalendar/core';
    import { DayGrid } from '@fullcalendar/daygrid';
    import TimeGrid from '@fullcalendar/timegrid/TimeGrid';
    import AllDaySplitter from '@fullcalendar/timegrid/AllDaySplitter';
    export { TimeGridView as default, TimeGridView };
    abstract class TimeGridView extends View {
        timeGrid: TimeGrid;
        dayGrid: DayGrid;
        scroller: ScrollComponent;
        axisWidth: any;
        protected splitter: AllDaySplitter;
        constructor(context: ComponentContext, viewSpec: ViewSpec, dateProfileGenerator: DateProfileGenerator, parentEl: HTMLElement);
        destroy(): void;
        renderSkeletonHtml(): string;
        getNowIndicatorUnit(): string;
        unrenderNowIndicator(): void;
        updateSize(isResize: boolean, viewHeight: number, isAuto: boolean): void;
        updateBaseSize(isResize: any, viewHeight: any, isAuto: any): void;
        computeScrollerHeight(viewHeight: any): number;
        computeDateScroll(duration: Duration): {
            top: any;
        };
        queryDateScroll(): {
            top: number;
        };
        applyDateScroll(scroll: any): void;
        renderHeadIntroHtml: () => string;
        axisStyleAttr(): string;
        renderTimeGridBgIntroHtml: () => string;
        renderTimeGridIntroHtml: () => string;
        renderDayGridBgIntroHtml: () => string;
        renderDayGridIntroHtml: () => string;
    }
}

declare module '@fullcalendar/timegrid/TimeGridView' {
    import { DateProfileGenerator, DateProfile, ComponentContext, ViewSpec, DayHeader, DayTable, ViewProps } from '@fullcalendar/core';
    import { SimpleDayGrid } from '@fullcalendar/daygrid';
    import SimpleTimeGrid from '@fullcalendar/timegrid/SimpleTimeGrid';
    import AbstractTimeGridView from '@fullcalendar/timegrid/AbstractTimeGridView';
    export { TimeGridView as default, TimeGridView };
    class TimeGridView extends AbstractTimeGridView {
        header: DayHeader;
        simpleDayGrid: SimpleDayGrid;
        simpleTimeGrid: SimpleTimeGrid;
        constructor(_context: ComponentContext, viewSpec: ViewSpec, dateProfileGenerator: DateProfileGenerator, parentEl: HTMLElement);
        destroy(): void;
        render(props: ViewProps): void;
        renderNowIndicator(date: any): void;
    }
    export function buildDayTable(dateProfile: DateProfile, dateProfileGenerator: DateProfileGenerator): DayTable;
}

declare module '@fullcalendar/timegrid/TimeGrid' {
    import { PositionCache, Duration, DateMarker, DateFormatter, ComponentContext, DateComponent, Seg, EventSegUiInteractionState, DateProfile } from '@fullcalendar/core';
    export interface RenderProps {
        renderBgIntroHtml: () => string;
        renderIntroHtml: () => string;
    }
    export interface TimeGridSeg extends Seg {
        col: number;
        start: DateMarker;
        end: DateMarker;
    }
    export interface TimeGridCell {
        date: DateMarker;
        htmlAttrs?: string;
    }
    export interface TimeGridProps {
        dateProfile: DateProfile;
        cells: TimeGridCell[];
        businessHourSegs: TimeGridSeg[];
        bgEventSegs: TimeGridSeg[];
        fgEventSegs: TimeGridSeg[];
        dateSelectionSegs: TimeGridSeg[];
        eventSelection: string;
        eventDrag: EventSegUiInteractionState | null;
        eventResize: EventSegUiInteractionState | null;
    }
    export { TimeGrid as default, TimeGrid };
    class TimeGrid extends DateComponent {
        renderProps: RenderProps;
        slotDuration: Duration;
        snapDuration: Duration;
        snapsPerSlot: any;
        labelFormat: DateFormatter;
        labelInterval: Duration;
        colCnt: number;
        colEls: HTMLElement[];
        slatContainerEl: HTMLElement;
        slatEls: HTMLElement[];
        nowIndicatorEls: HTMLElement[];
        colPositions: PositionCache;
        slatPositions: PositionCache;
        isSlatSizesDirty: boolean;
        isColSizesDirty: boolean;
        rootBgContainerEl: HTMLElement;
        bottomRuleEl: HTMLElement;
        contentSkeletonEl: HTMLElement;
        colContainerEls: HTMLElement[];
        fgContainerEls: HTMLElement[];
        bgContainerEls: HTMLElement[];
        mirrorContainerEls: HTMLElement[];
        highlightContainerEls: HTMLElement[];
        businessContainerEls: HTMLElement[];
        constructor(context: ComponentContext, el: HTMLElement, renderProps: RenderProps);
        processOptions(): void;
        computeLabelInterval(slotDuration: any): any;
        render(props: TimeGridProps): void;
        destroy(): void;
        updateSize(isResize: boolean): void;
        _renderSlats(dateProfile: DateProfile): void;
        renderSlatRowHtml(dateProfile: DateProfile): string;
        _renderColumns(cells: TimeGridCell[], dateProfile: DateProfile): void;
        _unrenderColumns(): void;
        renderContentSkeleton(): void;
        unrenderContentSkeleton(): void;
        groupSegsByCol(segs: any): any[];
        attachSegsByCol(segsByCol: any, containerEls: HTMLElement[]): void;
        getNowIndicatorUnit(): string;
        renderNowIndicator(segs: TimeGridSeg[], date: any): void;
        unrenderNowIndicator(): void;
        getTotalSlatHeight(): number;
        computeDateTop(when: DateMarker, startOfDayDate?: DateMarker): any;
        computeTimeTop(duration: Duration): any;
        computeSegVerticals(segs: any): void;
        assignSegVerticals(segs: any): void;
        generateSegVerticalCss(seg: any): {
            top: any;
            bottom: number;
        };
        buildPositionCaches(): void;
        buildColPositions(): void;
        buildSlatPositions(): void;
        positionToHit(positionLeft: any, positionTop: any): {
            col: any;
            dateSpan: {
                range: {
                    start: Date;
                    end: Date;
                };
                allDay: boolean;
            };
            dayEl: HTMLElement;
            relativeRect: {
                left: any;
                right: any;
                top: any;
                bottom: any;
            };
        };
        _renderEventDrag(state: EventSegUiInteractionState): void;
        _unrenderEventDrag(state: EventSegUiInteractionState): void;
        _renderEventResize(state: EventSegUiInteractionState): void;
        _unrenderEventResize(state: EventSegUiInteractionState): void;
        _renderDateSelection(segs: Seg[]): void;
        _unrenderDateSelection(segs: Seg[]): void;
    }
}

declare module '@fullcalendar/timegrid/SimpleTimeGrid' {
    import { DateComponent, DateProfile, EventStore, EventUiHash, EventInteractionState, DateSpan, DateRange, DayTable, DateEnv, DateMarker, Slicer, Hit, ComponentContext } from '@fullcalendar/core';
    import TimeGrid, { TimeGridSeg } from '@fullcalendar/timegrid/TimeGrid';
    export interface SimpleTimeGridProps {
        dateProfile: DateProfile | null;
        dayTable: DayTable;
        businessHours: EventStore;
        eventStore: EventStore;
        eventUiBases: EventUiHash;
        dateSelection: DateSpan | null;
        eventSelection: string;
        eventDrag: EventInteractionState | null;
        eventResize: EventInteractionState | null;
    }
    export { SimpleTimeGrid as default, SimpleTimeGrid };
    class SimpleTimeGrid extends DateComponent {
        timeGrid: TimeGrid;
        constructor(context: ComponentContext, timeGrid: TimeGrid);
        destroy(): void;
        render(props: SimpleTimeGridProps): void;
        renderNowIndicator(date: DateMarker): void;
        buildPositionCaches(): void;
        queryHit(positionLeft: number, positionTop: number): Hit;
    }
    export function buildDayRanges(dayTable: DayTable, dateProfile: DateProfile, dateEnv: DateEnv): DateRange[];
    export class TimeGridSlicer extends Slicer {
        sliceRange(range: DateRange, dayRanges: DateRange[]): TimeGridSeg[];
    }
}

declare module '@fullcalendar/timegrid/AllDaySplitter' {
    import { Splitter, EventDef, DateSpan } from '@fullcalendar/core';
    export { AllDaySplitter as default, AllDaySplitter };
    class AllDaySplitter extends Splitter {
        getKeyInfo(): {
            allDay: {};
            timed: {};
        };
        getKeysForDateSpan(dateSpan: DateSpan): string[];
        getKeysForEventDef(eventDef: EventDef): string[];
    }
}

/*!
FullCalendar Time Grid Plugin v4.3.0
Docs & License: https://fullcalendar.io/
(c) 2019 Adam Shaw
*/
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@fullcalendar/core"),require("@fullcalendar/daygrid")):"function"==typeof define&&define.amd?define(["exports","@fullcalendar/core","@fullcalendar/daygrid"],t):t((e=e||self).FullCalendarTimeGrid={},e.FullCalendar,e.FullCalendarDayGrid)}(this,function(e,t,r){"use strict";var i=function(e,t){return(i=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var r in t)t.hasOwnProperty(r)&&(e[r]=t[r])})(e,t)};function n(e,t){function r(){this.constructor=e}i(e,t),e.prototype=null===t?Object.create(t):(r.prototype=t.prototype,new r)}var o=function(){return(o=Object.assign||function(e){for(var t,r=1,i=arguments.length;r

'+(i?'
'+t.htmlEscape(i)+"
":"")+(l.title?'
'+t.htmlEscape(l.title)+"
":"")+"

"+(p?'
':"")+""},r.prototype.computeSegHorizontals=function(e){var t,r,i;if(function(e){var t,r,i,n,o;for(t=0;t0&&n.el.classList.add("fc-time-grid-event-inset"),n.eventRange.def.title&&n.bottom-n.top<30&&n.el.classList.add("fc-short")}},r.prototype.generateSegCss=function(e){var t,r,i=this.context.options.slotEventOverlap,n=e.backwardCoord,o=e.forwardCoord,s=this.timeGrid.generateSegVerticalCss(e),a=this.timeGrid.isRtl;return i&&(o=Math.min(1,n+2*(o-n))),a?(t=1-o,r=n):(t=n,r=1-o),s.zIndex=e.level+1,s.left=100*t+"%",s.right=100*r+"%",i&&e.forwardPressure&&(s[a?"marginLeft":"marginRight"]=20),s},r}(t.FgEventRenderer);function a(e){var t,r,i=e.forwardSegs,n=0;if(void 0===e.forwardPressure){for(t=0;to.top&&n.top

',o.rootBgContainerEl=i.querySelector(".fc-bg"),o.slatContainerEl=i.querySelector(".fc-slats"),o.bottomRuleEl=i.querySelector(".fc-divider"),o.renderProps=n,o}return n(i,e),i.prototype.processOptions=function(){var e,r,i=this.opt("slotDuration"),n=this.opt("snapDuration");i=t.createDuration(i),n=n?t.createDuration(n):i,null===(e=t.wholeDivideDurations(i,n))&&(n=i,e=1),this.slotDuration=i,this.snapDuration=n,this.snapsPerSlot=e,r=this.opt("slotLabelFormat"),Array.isArray(r)&&(r=r[r.length-1]),this.labelFormat=t.createFormatter(r||{hour:"numeric",minute:"2-digit",omitZeroMinute:!0,meridiem:"short"}),r=this.opt("slotLabelInterval"),this.labelInterval=r?t.createDuration(r):this.computeLabelInterval(i)},i.prototype.computeLabelInterval=function(e){var r,i,n;for(r=u.length-1;r>=0;r--)if(i=t.createDuration(u[r]),null!==(n=t.wholeDivideDurations(i,e))&&n>1)return i;return e},i.prototype.render=function(e){var t=e.cells;this.colCnt=t.length,this.renderSlats(e.dateProfile),this.renderColumns(e.cells,e.dateProfile),this.renderBusinessHours(e.businessHourSegs),this.renderDateSelection(e.dateSelectionSegs),this.renderFgEvents(e.fgEventSegs),this.renderBgEvents(e.bgEventSegs),this.renderEventSelection(e.eventSelection),this.renderEventDrag(e.eventDrag),this.renderEventResize(e.eventResize)},i.prototype.destroy=function(){e.prototype.destroy.call(this),this.renderSlats.unrender(),this.renderColumns.unrender()},i.prototype.updateSize=function(e){var t=this.fillRenderer,r=this.eventRenderer,i=this.mirrorRenderer;(e||this.isSlatSizesDirty)&&(this.buildSlatPositions(),this.isSlatSizesDirty=!1),(e||this.isColSizesDirty)&&(this.buildColPositions(),this.isColSizesDirty=!1),t.computeSizes(e),r.computeSizes(e),i.computeSizes(e),t.assignSizes(e),r.assignSizes(e),i.assignSizes(e)},i.prototype._renderSlats=function(e){var r=this.theme;this.slatContainerEl.innerHTML=''+this.renderSlatRowHtml(e)+"",this.slatEls=t.findElements(this.slatContainerEl,"tr"),this.slatPositions=new t.PositionCache(this.el,this.slatEls,!1,!0),this.isSlatSizesDirty=!0},i.prototype.renderSlatRowHtml=function(e){for(var r,i,n,o=this.dateEnv,s=this.theme,a=this.isRtl,l="",d=t.startOfDay(e.renderRange.start),c=e.minTime,h=t.createDuration(0);t.asRoughMs(c)'+(i?""+t.htmlEscape(o.format(r,this.labelFormat))+"":"")+"",l+='"+(a?"":n)+''+(a?n:"")+"",c=t.addDurations(c,this.slotDuration),h=t.addDurations(h,this.slotDuration);return l},i.prototype._renderColumns=function(e,i){var n=this.theme,o=this.dateEnv,s=this.view,a=new r.DayBgRow(this.context);this.rootBgContainerEl.innerHTML=''+a.renderHtml({cells:e,dateProfile:i,renderIntroHtml:this.renderProps.renderBgIntroHtml})+"",this.colEls=t.findElements(this.el,".fc-day, .fc-disabled-day");for(var l=0;l

');this.isRtl&&r.reverse(),e=this.contentSkeletonEl=t.htmlToElement('
'+r.join("")+"
"),this.colContainerEls=t.findElements(e,".fc-content-col"),this.mirrorContainerEls=t.findElements(e,".fc-mirror-container"),this.fgContainerEls=t.findElements(e,".fc-event-container:not(.fc-mirror-container)"),this.bgContainerEls=t.findElements(e,".fc-bgevent-container"),this.highlightContainerEls=t.findElements(e,".fc-highlight-container"),this.businessContainerEls=t.findElements(e,".fc-business-container"),this.isRtl&&(this.colContainerEls.reverse(),this.mirrorContainerEls.reverse(),this.fgContainerEls.reverse(),this.bgContainerEls.reverse(),this.highlightContainerEls.reverse(),this.businessContainerEls.reverse()),this.el.appendChild(e)},i.prototype.unrenderContentSkeleton=function(){t.removeElement(this.contentSkeletonEl)},i.prototype.groupSegsByCol=function(e){var t,r=[];for(t=0;t0){var a=t.createElement("div",{className:"fc-now-indicator fc-now-indicator-arrow"});a.style.top=n+"px",this.contentSkeletonEl.appendChild(a),o.push(a)}this.nowIndicatorEls=o}},i.prototype.unrenderNowIndicator=function(){this.nowIndicatorEls&&(this.nowIndicatorEls.forEach(t.removeElement),this.nowIndicatorEls=null)},i.prototype.getTotalSlatHeight=function(){return this.slatContainerEl.getBoundingClientRect().height},i.prototype.computeDateTop=function(e,r){return r||(r=t.startOfDay(e)),this.computeTimeTop(t.createDuration(e.valueOf()-r.valueOf()))},i.prototype.computeTimeTop=function(e){var r,i,n=this.slatEls.length,o=this.props.dateProfile,s=(e.milliseconds-t.asRoughMs(o.minTime))/t.asRoughMs(this.slotDuration);return s=Math.max(0,s),s=Math.min(n,s),r=Math.floor(s),i=s-(r=Math.min(r,n-1)),this.slatPositions.tops[r]+this.slatPositions.getHeight(r)*i},i.prototype.computeSegVerticals=function(e){var t,r,i,n=this.opt("timeGridEventMinHeight");for(t=0;t"+t.buildGotoAnchorHtml(a,{date:o.start,type:"week",forceOff:s>1},t.htmlEscape(e))+""):'"},a.renderTimeGridBgIntroHtml=function(){return'"},a.renderTimeGridIntroHtml=function(){return'"},a.renderDayGridBgIntroHtml=function(){return'"+t.getAllDayHtml(a)+""},a.renderDayGridIntroHtml=function(){return'"},a.el.classList.add("fc-timeGrid-view"),a.el.innerHTML=a.renderSkeletonHtml(),a.scroller=new t.ScrollComponent("hidden","auto");var l=a.scroller.el;a.el.querySelector(".fc-body > tr > td").appendChild(l),l.classList.add("fc-time-grid-container");var d=t.createElement("div",{className:"fc-time-grid"});if(l.appendChild(d),a.timeGrid=new p(a.context,d,{renderBgIntroHtml:a.renderTimeGridBgIntroHtml,renderIntroHtml:a.renderTimeGridIntroHtml}),a.opt("allDaySlot")){a.dayGrid=new r.DayGrid(a.context,a.el.querySelector(".fc-day-grid"),{renderNumberIntroHtml:a.renderDayGridIntroHtml,renderBgIntroHtml:a.renderDayGridBgIntroHtml,renderIntroHtml:a.renderDayGridIntroHtml,colWeekNumbersVisible:!1,cellWeekNumbersVisible:!1});var c=a.el.querySelector(".fc-divider");a.dayGrid.bottomCoordPadding=c.getBoundingClientRect().height}return a}return n(i,e),i.prototype.destroy=function(){e.prototype.destroy.call(this),this.timeGrid.destroy(),this.dayGrid&&this.dayGrid.destroy(),this.scroller.destroy()},i.prototype.renderSkeletonHtml=function(){var e=this.theme;return''+(this.opt("columnHeader")?' ':"")+''+(this.opt("allDaySlot")?'

':"")+""},i.prototype.getNowIndicatorUnit=function(){return this.timeGrid.getNowIndicatorUnit()},i.prototype.unrenderNowIndicator=function(){this.timeGrid.unrenderNowIndicator()},i.prototype.updateSize=function(t,r,i){e.prototype.updateSize.call(this,t,r,i),this.timeGrid.updateSize(t),this.dayGrid&&this.dayGrid.updateSize(t)},i.prototype.updateBaseSize=function(e,r,i){var n,o,s,a=this;if(this.axisWidth=t.matchCellWidths(t.findElements(this.el,".fc-axis")),this.timeGrid.colEls){var l=t.findElements(this.el,".fc-row").filter(function(e){return!a.scroller.el.contains(e)});this.timeGrid.bottomRuleEl.style.display="none",this.scroller.clear(),l.forEach(t.uncompensateScroll),this.dayGrid&&(this.dayGrid.removeSegPopover(),(n=this.opt("eventLimit"))&&"number"!=typeof n&&(n=5),n&&this.dayGrid.limitRows(n)),i||(o=this.computeScrollerHeight(r),this.scroller.setHeight(o),((s=this.scroller.getScrollbarWidths()).left||s.right)&&(l.forEach(function(e){t.compensateScroll(e,s)}),o=this.computeScrollerHeight(r),this.scroller.setHeight(o)),this.scroller.lockOverflow(s),this.timeGrid.getTotalSlatHeight()

/*!
FullCalendar Moment Plugin v4.3.0
Docs & License: https://fullcalendar.io/
(c) 2019 Adam Shaw
*/

import * as momentNs from 'moment';
import { createPlugin, Calendar } from '@fullcalendar/core';

export default main;
export { toDuration, toMoment };

/*!
FullCalendar Moment Plugin v4.3.0
Docs & License: https://fullcalendar.io/
(c) 2019 Adam Shaw
*/

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('moment'), require('@fullcalendar/core')) :
    typeof define === 'function' && define.amd ? define(['exports', 'moment', '@fullcalendar/core'], factory) :
    (global = global || self, factory(global.FullCalendarMoment = {}, global.moment, global.FullCalendar));
}(this, function (exports, momentNs, core) { 'use strict';

    exports.default = main;
    exports.toDuration = toDuration;
    exports.toMoment = toMoment;

Object.defineProperty(exports, '__esModule', { value: true });

}));

// Generated by dts-bundle v0.7.3-fork.1
// Dependencies for this module:
// ../../../../../moment
// ../../../../../@fullcalendar/core

declare module '@fullcalendar/moment' {
    import * as momentNs from 'moment';
    import { Calendar, Duration } from '@fullcalendar/core';
    export function toMoment(date: Date, calendar: Calendar): momentNs.Moment;
    export function toDuration(fcDuration: Duration): momentNs.Duration;
    const _default: import("@fullcalendar/core").PluginDef;
    export default _default;
}

/*!
FullCalendar Moment Plugin v4.3.0
Docs & License: https://fullcalendar.io/
(c) 2019 Adam Shaw
*/
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("moment"),require("@fullcalendar/core")):"function"==typeof define&&define.amd?define(["exports","moment","@fullcalendar/core"],t):t((e=e||self).FullCalendarMoment={},e.moment,e.FullCalendar)}(this,function(e,t,n){"use strict";var r=t;var a=n.createPlugin({cmdFormatter:function(e,t){var n=function e(t){var n=t.match(/^(.*?)\{(.*)\}(.*)$/);if(n){var r=e(n[2]);return{head:n[1],middle:r,tail:n[3],whole:n[1]+r.whole+n[3]}}return{head:null,middle:null,tail:null,whole:t}}(e);if(t.end){var r=l(t.start.array,t.timeZone,t.start.timeZoneOffset,t.localeCodes[0]),a=l(t.end.array,t.timeZone,t.end.timeZoneOffset,t.localeCodes[0]);return function e(t,n,r,a){if(t.middle){var o=n(t.head),l=e(t.middle,n,r,a),u=n(t.tail),i=r(t.head),d=e(t.middle,n,r,a),f=r(t.tail);if(o===i&&u===f)return o+(l===d?l:l+a+d)+u}var c=n(t.whole),m=r(t.whole);return c===m?c:c+a+m}(n,o(r),o(a),t.separator)}return l(t.date.array,t.timeZone,t.date.timeZoneOffset,t.localeCodes[0]).format(n.whole)}});function o(e){return function(t){return t?e.format(t):""}}function l(e,t,n,a){var o;return"local"===t?o=r(e):"UTC"===t?o=r.utc(e):r.tz?o=r.tz(e,t):(o=r.utc(e),null!=n&&o.utcOffset(n)),o.locale(a),o}e.default=a,e.toDuration=function(e){return r.duration(e)},e.toMoment=function(e,t){if(!(t instanceof n.Calendar))throw new Error("must supply a Calendar instance");return l(e,t.dateEnv.timeZone,null,t.dateEnv.locale.codes[0])},Object.defineProperty(e,"__esModule",{value:!0})});

/*!
FullCalendar Day Grid Plugin v4.3.0
Docs & License: https://fullcalendar.io/
(c) 2019 Adam Shaw
*/

import { addWeeks, diffWeeks, DateProfileGenerator, createElement, listenBySelector, removeElement, computeRect, computeClippingRect, applyStyle, cssToStr, htmlEscape, FgEventRenderer, appendToElement, prependToElement, htmlToElement, FillRenderer, memoizeRendering, createFormatter, addDays, DateComponent, rangeContainsMarker, getDayClasses, findElements, PositionCache, buildGotoAnchorHtml, findChildren, insertAfterElement, intersectRanges, ScrollComponent, matchCellWidths, uncompensateScroll, compensateScroll, subtractInnerElHeight, distributeHeight, undistributeHeight, View, Slicer, memoize, DayHeader, DaySeries, DayTable, createPlugin } from '@fullcalendar/core';

/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0

THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.

See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
/* global Reflect, Promise */

function __extends(d, b) {
    extendStatics(d, b);
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}

/* A rectangular panel that is absolutely positioned over other content
------------------------------------------------------------------------------------------------------------------------
Options:
  - className (string)
  - content (HTML string, element, or element array)
  - parentEl
  - top
  - left
  - right (the x coord of where the right edge should be. not a "CSS" right)
  - autoHide (boolean)
  - show (callback)
  - hide (callback)
*/
var Popover = /** @class */ (function () {
    function Popover(options) {
        var _this = this;
        this.isHidden = true;
        this.margin = 10; // the space required between the popover and the edges of the scroll container
        // Triggered when the user clicks *anywhere* in the document, for the autoHide feature
        this.documentMousedown = function (ev) {
            // only hide the popover if the click happened outside the popover
            if (_this.el && !_this.el.contains(ev.target)) {
                _this.hide();
            }
        };
        this.options = options;
    }
    // Shows the popover on the specified position. Renders it if not already
    Popover.prototype.show = function () {
        if (this.isHidden) {
            if (!this.el) {
                this.render();
            }
            this.el.style.display = '';
            this.position();
            this.isHidden = false;
            this.trigger('show');
        }
    };
    // Hides the popover, through CSS, but does not remove it from the DOM
    Popover.prototype.hide = function () {
        if (!this.isHidden) {
            this.el.style.display = 'none';
            this.isHidden = true;
            this.trigger('hide');
        }
    };
    // Creates `this.el` and renders content inside of it
    Popover.prototype.render = function () {
        var _this = this;
        var options = this.options;
        var el = this.el = createElement('div', {
            className: 'fc-popover ' + (options.className || ''),
            style: {
                top: '0',
                left: '0'
            }
        });
        if (typeof options.content === 'function') {
            options.content(el);
        }
        options.parentEl.appendChild(el);
        // when a click happens on anything inside with a 'fc-close' className, hide the popover
        listenBySelector(el, 'click', '.fc-close', function (ev) {
            _this.hide();
        });
        if (options.autoHide) {
            document.addEventListener('mousedown', this.documentMousedown);
        }
    };
    // Hides and unregisters any handlers
    Popover.prototype.destroy = function () {
        this.hide();
        if (this.el) {
            removeElement(this.el);
            this.el = null;
        }
        document.removeEventListener('mousedown', this.documentMousedown);
    };
    // Positions the popover optimally, using the top/left/right options
    Popover.prototype.position = function () {
        var options = this.options;
        var el = this.el;
        var elDims = el.getBoundingClientRect(); // only used for width,height
        var origin = computeRect(el.offsetParent);
        var clippingRect = computeClippingRect(options.parentEl);
        var top; // the "position" (not "offset") values for the popover
        var left; //
        // compute top and left
        top = options.top || 0;
        if (options.left !== undefined) {
            left = options.left;
        }
        else if (options.right !== undefined) {
            left = options.right - elDims.width; // derive the left value from the right value
        }
        else {
            left = 0;
        }
        // constrain to the view port. if constrained by two edges, give precedence to top/left
        top = Math.min(top, clippingRect.bottom - elDims.height - this.margin);
        top = Math.max(top, clippingRect.top + this.margin);
        left = Math.min(left, clippingRect.right - elDims.width - this.margin);
        left = Math.max(left, clippingRect.left + this.margin);
        applyStyle(el, {
            top: top - origin.top,
            left: left - origin.left
        });
    };
    // Triggers a callback. Calls a function in the option hash of the same name.
    // Arguments beyond the first `name` are forwarded on.
    // TODO: better code reuse for this. Repeat code
    // can kill this???
    Popover.prototype.trigger = function (name) {
        if (this.options[name]) {
            this.options[name].apply(this, Array.prototype.slice.call(arguments, 1));
        }
    };
    return Popover;
}());

/* Event-rendering methods for the DayGrid class
----------------------------------------------------------------------------------------------------------------------*/
// "Simple" is bad a name. has nothing to do with SimpleDayGrid
var SimpleDayGridEventRenderer = /** @class */ (function (_super) {
    __extends(SimpleDayGridEventRenderer, _super);
    function SimpleDayGridEventRenderer() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    // Builds the HTML to be used for the default element for an individual segment
    SimpleDayGridEventRenderer.prototype.renderSegHtml = function (seg, mirrorInfo) {
        var _a = this.context, view = _a.view, options = _a.options;
        var eventRange = seg.eventRange;
        var eventDef = eventRange.def;
        var eventUi = eventRange.ui;
        var allDay = eventDef.allDay;
        var isDraggable = view.computeEventDraggable(eventDef, eventUi);
        var isResizableFromStart = allDay && seg.isStart && view.computeEventStartResizable(eventDef, eventUi);
        var isResizableFromEnd = allDay && seg.isEnd && view.computeEventEndResizable(eventDef, eventUi);
        var classes = this.getSegClasses(seg, isDraggable, isResizableFromStart || isResizableFromEnd, mirrorInfo);
        var skinCss = cssToStr(this.getSkinCss(eventUi));
        var timeHtml = '';
        var timeText;
        var titleHtml;
        classes.unshift('fc-day-grid-event', 'fc-h-event');
        // Only display a timed events time if it is the starting segment
        if (seg.isStart) {
            timeText = this.getTimeText(eventRange);
            if (timeText) {
                timeHtml = '' + htmlEscape(timeText) + '';
            }
        }
        titleHtml =
            '' +
                (htmlEscape(eventDef.title || '') || ' ') + // we always want one line of height
                '';
        return '' +
            '

' +
            (options.dir === 'rtl' ?
                titleHtml + ' ' + timeHtml : // put a natural space in between
                timeHtml + ' ' + titleHtml //
            ) +
            '

' +
(isResizableFromStart ?
'

' :
                '') +
            (isResizableFromEnd ?
                '

' :
                '') +
            '';
    };
    // Computes a default event time formatting string if `eventTimeFormat` is not explicitly defined
    SimpleDayGridEventRenderer.prototype.computeEventTimeFormat = function () {
        return {
            hour: 'numeric',
            minute: '2-digit',
            omitZeroMinute: true,
            meridiem: 'narrow'
        };
    };
    SimpleDayGridEventRenderer.prototype.computeDisplayEventEnd = function () {
        return false; // TODO: somehow consider the originating DayGrid's column count
    };
    return SimpleDayGridEventRenderer;
}(FgEventRenderer));

/* Event-rendering methods for the DayGrid class
----------------------------------------------------------------------------------------------------------------------*/
var DayGridEventRenderer = /** @class */ (function (_super) {
    __extends(DayGridEventRenderer, _super);
    function DayGridEventRenderer(dayGrid) {
        var _this = _super.call(this, dayGrid.context) || this;
        _this.dayGrid = dayGrid;
        return _this;
    }
    // Renders the given foreground event segments onto the grid
    DayGridEventRenderer.prototype.attachSegs = function (segs, mirrorInfo) {
        var rowStructs = this.rowStructs = this.renderSegRows(segs);
        // append to each row's content skeleton
        this.dayGrid.rowEls.forEach(function (rowNode, i) {
            rowNode.querySelector('.fc-content-skeleton > table').appendChild(rowStructs[i].tbodyEl);
        });
        // removes the "more.." events popover
        if (!mirrorInfo) {
            this.dayGrid.removeSegPopover();
        }
    };
    // Unrenders all currently rendered foreground event segments
    DayGridEventRenderer.prototype.detachSegs = function () {
        var rowStructs = this.rowStructs || [];
        var rowStruct;
        while ((rowStruct = rowStructs.pop())) {
            removeElement(rowStruct.tbodyEl);
        }
        this.rowStructs = null;
    };
    // Uses the given events array to generate  elements that should be appended to each row's content skeleton.
    // Returns an array of rowStruct objects (see the bottom of `renderSegRow`).
    // PRECONDITION: each segment shoud already have a rendered and assigned `.el`
    DayGridEventRenderer.prototype.renderSegRows = function (segs) {
        var rowStructs = [];
        var segRows;
        var row;
        segRows = this.groupSegRows(segs); // group into nested arrays
        // iterate each row of segment groupings
        for (row = 0; row < segRows.length; row++) {
            rowStructs.push(this.renderSegRow(row, segRows[row]));
        }
        return rowStructs;
    };
    // Given a row # and an array of segments all in the same row, render a  element, a skeleton that contains
    // the segments. Returns object with a bunch of internal data about how the render was calculated.
    // NOTE: modifies rowSegs
    DayGridEventRenderer.prototype.renderSegRow = function (row, rowSegs) {
        var dayGrid = this.dayGrid;
        var colCnt = dayGrid.colCnt, isRtl = dayGrid.isRtl;
        var segLevels = this.buildSegLevels(rowSegs); // group into sub-arrays of levels
        var levelCnt = Math.max(1, segLevels.length); // ensure at least one level
        var tbody = document.createElement('tbody');
        var segMatrix = []; // lookup for which segments are rendered into which level+col cells
        var cellMatrix = []; // lookup for all  elements of the level+col matrix
        var loneCellMatrix = []; // lookup for  elements that only take up a single column
        var i;
        var levelSegs;
        var col;
        var tr;
        var j;
        var seg;
        var td;
        // populates empty cells from the current column (`col`) to `endCol`
        function emptyCellsUntil(endCol) {
            while (col < endCol) {
                // try to grab a cell from the level above and extend its rowspan. otherwise, create a fresh cell
                td = (loneCellMatrix[i - 1] || [])[col];
                if (td) {
                    td.rowSpan = (td.rowSpan || 1) + 1;
                }
                else {
                    td = document.createElement('td');
                    tr.appendChild(td);
                }
                cellMatrix[i][col] = td;
                loneCellMatrix[i][col] = td;
                col++;
            }
        }
        for (i = 0; i < levelCnt; i++) { // iterate through all levels
            levelSegs = segLevels[i];
            col = 0;
            tr = document.createElement('tr');
            segMatrix.push([]);
            cellMatrix.push([]);
            loneCellMatrix.push([]);
            // levelCnt might be 1 even though there are no actual levels. protect against this.
            // this single empty row is useful for styling.
            if (levelSegs) {
                for (j = 0; j < levelSegs.length; j++) { // iterate through segments in level
                    seg = levelSegs[j];
                    var leftCol = isRtl ? (colCnt - 1 - seg.lastCol) : seg.firstCol;
                    var rightCol = isRtl ? (colCnt - 1 - seg.firstCol) : seg.lastCol;
                    emptyCellsUntil(leftCol);
                    // create a container that occupies or more columns. append the event element.
                    td = createElement('td', { className: 'fc-event-container' }, seg.el);
                    if (leftCol !== rightCol) {
                        td.colSpan = rightCol - leftCol + 1;
                    }
                    else { // a single-column segment
                        loneCellMatrix[i][col] = td;
                    }
                    while (col <= rightCol) {
                        cellMatrix[i][col] = td;
                        segMatrix[i][col] = seg;
                        col++;
                    }
                    tr.appendChild(td);
                }
            }
            emptyCellsUntil(colCnt); // finish off the row
            var introHtml = dayGrid.renderProps.renderIntroHtml();
            if (introHtml) {
                if (dayGrid.isRtl) {
                    appendToElement(tr, introHtml);
                }
                else {
                    prependToElement(tr, introHtml);
                }
            }
            tbody.appendChild(tr);
        }
        return {
            row: row,
            tbodyEl: tbody,
            cellMatrix: cellMatrix,
            segMatrix: segMatrix,
            segLevels: segLevels,
            segs: rowSegs
        };
    };
    // Stacks a flat array of segments, which are all assumed to be in the same row, into subarrays of vertical levels.
    // NOTE: modifies segs
    DayGridEventRenderer.prototype.buildSegLevels = function (segs) {
        var _a = this.dayGrid, isRtl = _a.isRtl, colCnt = _a.colCnt;
        var levels = [];
        var i;
        var seg;
        var j;
        // Give preference to elements with certain criteria, so they have
        // a chance to be closer to the top.
        segs = this.sortEventSegs(segs);
        for (i = 0; i < segs.length; i++) {
            seg = segs[i];
            // loop through levels, starting with the topmost, until the segment doesn't collide with other segments
            for (j = 0; j < levels.length; j++) {
                if (!isDaySegCollision(seg, levels[j])) {
                    break;
                }
            }
            // `j` now holds the desired subrow index
            seg.level = j;
            seg.leftCol = isRtl ? (colCnt - 1 - seg.lastCol) : seg.firstCol; // for sorting only
            seg.rightCol = isRtl ? (colCnt - 1 - seg.firstCol) : seg.lastCol // for sorting only
            ;
            (levels[j] || (levels[j] = [])).push(seg);
        }
        // order segments left-to-right. very important if calendar is RTL
        for (j = 0; j < levels.length; j++) {
            levels[j].sort(compareDaySegCols);
        }
        return levels;
    };
    // Given a flat array of segments, return an array of sub-arrays, grouped by each segment's row
    DayGridEventRenderer.prototype.groupSegRows = function (segs) {
        var segRows = [];
        var i;
        for (i = 0; i < this.dayGrid.rowCnt; i++) {
            segRows.push([]);
        }
        for (i = 0; i < segs.length; i++) {
            segRows[segs[i].row].push(segs[i]);
        }
        return segRows;
    };
    // Computes a default `displayEventEnd` value if one is not expliclty defined
    DayGridEventRenderer.prototype.computeDisplayEventEnd = function () {
        return this.dayGrid.colCnt === 1; // we'll likely have space if there's only one day
    };
    return DayGridEventRenderer;
}(SimpleDayGridEventRenderer));
// Computes whether two segments' columns collide. They are assumed to be in the same row.
function isDaySegCollision(seg, otherSegs) {
    var i;
    var otherSeg;
    for (i = 0; i < otherSegs.length; i++) {
        otherSeg = otherSegs[i];
        if (otherSeg.firstCol <= seg.lastCol &&
            otherSeg.lastCol >= seg.firstCol) {
            return true;
        }
    }
    return false;
}
// A cmp function for determining the leftmost event
function compareDaySegCols(a, b) {
    return a.leftCol - b.leftCol;
}

var DayGridMirrorRenderer = /** @class */ (function (_super) {
    __extends(DayGridMirrorRenderer, _super);
    function DayGridMirrorRenderer() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    DayGridMirrorRenderer.prototype.attachSegs = function (segs, mirrorInfo) {
        var sourceSeg = mirrorInfo.sourceSeg;
        var rowStructs = this.rowStructs = this.renderSegRows(segs);
        // inject each new event skeleton into each associated row
        this.dayGrid.rowEls.forEach(function (rowNode, row) {
            var skeletonEl = htmlToElement('

'); // will be absolutely positioned
            var skeletonTopEl;
            var skeletonTop;
            // If there is an original segment, match the top position. Otherwise, put it at the row's top level
            if (sourceSeg && sourceSeg.row === row) {
                skeletonTopEl = sourceSeg.el;
            }
            else {
                skeletonTopEl = rowNode.querySelector('.fc-content-skeleton tbody');
                if (!skeletonTopEl) { // when no events
                    skeletonTopEl = rowNode.querySelector('.fc-content-skeleton table');
                }
            }
            skeletonTop = skeletonTopEl.getBoundingClientRect().top -
                rowNode.getBoundingClientRect().top; // the offsetParent origin
            skeletonEl.style.top = skeletonTop + 'px';
            skeletonEl.querySelector('table').appendChild(rowStructs[row].tbodyEl);
            rowNode.appendChild(skeletonEl);
        });
    };
    return DayGridMirrorRenderer;
}(DayGridEventRenderer));

' +
'' +
'

');
        trEl = skeletonEl.getElementsByTagName('tr')[0];
        if (startCol > 0) {
            appendToElement(trEl,
            // will create (startCol + 1) td's
            new Array(startCol + 1).join(EMPTY_CELL_HTML));
        }
        seg.el.colSpan = endCol - startCol;
        trEl.appendChild(seg.el);
        if (endCol < colCnt) {
            appendToElement(trEl,
            // will create (colCnt - endCol) td's
            new Array(colCnt - endCol + 1).join(EMPTY_CELL_HTML));
        }
        var introHtml = dayGrid.renderProps.renderIntroHtml();
        if (introHtml) {
            if (dayGrid.isRtl) {
                appendToElement(trEl, introHtml);
            }
            else {
                prependToElement(trEl, introHtml);
            }
        }
        return skeletonEl;
    };
    return DayGridFillRenderer;
}(FillRenderer));

' +
                '' +
                htmlEscape(title) +
                '' +
                '' +
                '

' +
'

';
        this.segContainerEl = this.el.querySelector('.fc-event-container');
    };
    DayTile.prototype.queryHit = function (positionLeft, positionTop, elWidth, elHeight) {
        var date = this.props.date; // HACK
        if (positionLeft < elWidth && positionTop < elHeight) {
            return {
                component: this,
                dateSpan: {
                    allDay: true,
                    range: { start: date, end: addDays(date, 1) }
                },
                dayEl: this.el,
                rect: {
                    left: 0,
                    top: 0,
                    right: elWidth,
                    bottom: elHeight
                },
                layer: 1
            };
        }
    };
    return DayTile;
}(DateComponent));
var DayTileEventRenderer = /** @class */ (function (_super) {
    __extends(DayTileEventRenderer, _super);
    function DayTileEventRenderer(dayTile) {
        var _this = _super.call(this, dayTile.context) || this;
        _this.dayTile = dayTile;
        return _this;
    }
    DayTileEventRenderer.prototype.attachSegs = function (segs) {
        for (var _i = 0, segs_1 = segs; _i < segs_1.length; _i++) {
            var seg = segs_1[_i];
            this.dayTile.segContainerEl.appendChild(seg.el);
        }
    };
    DayTileEventRenderer.prototype.detachSegs = function (segs) {
        for (var _i = 0, segs_2 = segs; _i < segs_2.length; _i++) {
            var seg = segs_2[_i];
            removeElement(seg.el);
        }
    };
    return DayTileEventRenderer;
}(SimpleDayGridEventRenderer));

' +
'

' +
            '' +
            bgRow.renderHtml({
                cells: this.props.cells[row],
                dateProfile: this.props.dateProfile,
                renderIntroHtml: this.renderProps.renderBgIntroHtml
            }) +
            '' +
            '

' +
'

' +
            '' +
            (this.getIsNumbersVisible() ?
                '' +
                    this.renderNumberTrHtml(row) +
                    '' :
                '') +
            '' +
            '

' +
'

';
    };
    DayGrid.prototype.getIsNumbersVisible = function () {
        return this.getIsDayNumbersVisible() ||
            this.renderProps.cellWeekNumbersVisible ||
            this.renderProps.colWeekNumbersVisible;
    };
    DayGrid.prototype.getIsDayNumbersVisible = function () {
        return this.rowCnt > 1;
    };
    /* Grid Number Rendering
    ------------------------------------------------------------------------------------------------------------------*/
    DayGrid.prototype.renderNumberTrHtml = function (row) {
        var intro = this.renderProps.renderNumberIntroHtml(row, this);
        return '' +
            '' +
            (this.isRtl ? '' : intro) +
            this.renderNumberCellsHtml(row) +
            (this.isRtl ? intro : '') +
            '';
    };
    DayGrid.prototype.renderNumberCellsHtml = function (row) {
        var htmls = [];
        var col;
        var date;
        for (col = 0; col < this.colCnt; col++) {
            date = this.props.cells[row][col].date;
            htmls.push(this.renderNumberCellHtml(date));
        }
        if (this.isRtl) {
            htmls.reverse();
        }
        return htmls.join('');
    };
    // Generates the HTML for the s of the "number" row in the DayGrid's content skeleton.
    // The number row will only exist if either day numbers or week numbers are turned on.
    DayGrid.prototype.renderNumberCellHtml = function (date) {
        var _a = this, view = _a.view, dateEnv = _a.dateEnv;
        var html = '';
        var isDateValid = rangeContainsMarker(this.props.dateProfile.activeRange, date); // TODO: called too frequently. cache somehow.
        var isDayNumberVisible = this.getIsDayNumbersVisible() && isDateValid;
        var classes;
        var weekCalcFirstDow;
        if (!isDayNumberVisible && !this.renderProps.cellWeekNumbersVisible) {
            // no numbers in day cell (week number must be along the side)
            return ''; //  will create an empty space above events :(
        }
        classes = getDayClasses(date, this.props.dateProfile, this.context);
        classes.unshift('fc-day-top');
        if (this.renderProps.cellWeekNumbersVisible) {
            weekCalcFirstDow = dateEnv.weekDow;
        }
        html += '';
        if (this.renderProps.cellWeekNumbersVisible && (date.getUTCDay() === weekCalcFirstDow)) {
            html += buildGotoAnchorHtml(view, { date: date, type: 'week' }, { 'class': 'fc-week-number' }, dateEnv.format(date, WEEK_NUM_FORMAT) // inner HTML
            );
        }
        if (isDayNumberVisible) {
            html += buildGotoAnchorHtml(view, date, { 'class': 'fc-day-number' }, dateEnv.format(date, DAY_NUM_FORMAT) // inner HTML
            );
        }
        html += '';
        return html;
    };
    /* Sizing
    ------------------------------------------------------------------------------------------------------------------*/
    DayGrid.prototype.updateSize = function (isResize) {
        var _a = this, fillRenderer = _a.fillRenderer, eventRenderer = _a.eventRenderer, mirrorRenderer = _a.mirrorRenderer;
        if (isResize ||
            this.isCellSizesDirty ||
            this.view.calendar.isEventsUpdated // hack
        ) {
            this.buildPositionCaches();
            this.isCellSizesDirty = false;
        }
        fillRenderer.computeSizes(isResize);
        eventRenderer.computeSizes(isResize);
        mirrorRenderer.computeSizes(isResize);
        fillRenderer.assignSizes(isResize);
        eventRenderer.assignSizes(isResize);
        mirrorRenderer.assignSizes(isResize);
    };
    DayGrid.prototype.buildPositionCaches = function () {
        this.buildColPositions();
        this.buildRowPositions();
    };
    DayGrid.prototype.buildColPositions = function () {
        this.colPositions.build();
    };
    DayGrid.prototype.buildRowPositions = function () {
        this.rowPositions.build();
        this.rowPositions.bottoms[this.rowCnt - 1] += this.bottomCoordPadding; // hack
    };
    /* Hit System
    ------------------------------------------------------------------------------------------------------------------*/
    DayGrid.prototype.positionToHit = function (leftPosition, topPosition) {
        var _a = this, colPositions = _a.colPositions, rowPositions = _a.rowPositions;
        var col = colPositions.leftToIndex(leftPosition);
        var row = rowPositions.topToIndex(topPosition);
        if (row != null && col != null) {
            return {
                row: row,
                col: col,
                dateSpan: {
                    range: this.getCellRange(row, col),
                    allDay: true
                },
                dayEl: this.getCellEl(row, col),
                relativeRect: {
                    left: colPositions.lefts[col],
                    right: colPositions.rights[col],
                    top: rowPositions.tops[row],
                    bottom: rowPositions.bottoms[row]
                }
            };
        }
    };
    /* Cell System
    ------------------------------------------------------------------------------------------------------------------*/
    // FYI: the first column is the leftmost column, regardless of date
    DayGrid.prototype.getCellEl = function (row, col) {
        return this.cellEls[row * this.colCnt + col];
    };
    /* Event Drag Visualization
    ------------------------------------------------------------------------------------------------------------------*/
    DayGrid.prototype._renderEventDrag = function (state) {
        if (state) {
            this.eventRenderer.hideByHash(state.affectedInstances);
            this.fillRenderer.renderSegs('highlight', state.segs);
        }
    };
    DayGrid.prototype._unrenderEventDrag = function (state) {
        if (state) {
            this.eventRenderer.showByHash(state.affectedInstances);
            this.fillRenderer.unrender('highlight');
        }
    };
    /* Event Resize Visualization
    ------------------------------------------------------------------------------------------------------------------*/
    DayGrid.prototype._renderEventResize = function (state) {
        if (state) {
            this.eventRenderer.hideByHash(state.affectedInstances);
            this.fillRenderer.renderSegs('highlight', state.segs);
            this.mirrorRenderer.renderSegs(state.segs, { isResizing: true, sourceSeg: state.sourceSeg });
        }
    };
    DayGrid.prototype._unrenderEventResize = function (state) {
        if (state) {
            this.eventRenderer.showByHash(state.affectedInstances);
            this.fillRenderer.unrender('highlight');
            this.mirrorRenderer.unrender(state.segs, { isResizing: true, sourceSeg: state.sourceSeg });
        }
    };
    /* More+ Link Popover
    ------------------------------------------------------------------------------------------------------------------*/
    DayGrid.prototype.removeSegPopover = function () {
        if (this.segPopover) {
            this.segPopover.hide(); // in handler, will call segPopover's removeElement
        }
    };
    // Limits the number of "levels" (vertically stacking layers of events) for each row of the grid.
    // `levelLimit` can be false (don't limit), a number, or true (should be computed).
    DayGrid.prototype.limitRows = function (levelLimit) {
        var rowStructs = this.eventRenderer.rowStructs || [];
        var row; // row #
        var rowLevelLimit;
        for (row = 0; row < rowStructs.length; row++) {
            this.unlimitRow(row);
            if (!levelLimit) {
                rowLevelLimit = false;
            }
            else if (typeof levelLimit === 'number') {
                rowLevelLimit = levelLimit;
            }
            else {
                rowLevelLimit = this.computeRowLevelLimit(row);
            }
            if (rowLevelLimit !== false) {
                this.limitRow(row, rowLevelLimit);
            }
        }
    };
    // Computes the number of levels a row will accomodate without going outside its bounds.
    // Assumes the row is "rigid" (maintains a constant height regardless of what is inside).
    // `row` is the row number.
    DayGrid.prototype.computeRowLevelLimit = function (row) {
        var rowEl = this.rowEls[row]; // the containing "fake" row div
        var rowBottom = rowEl.getBoundingClientRect().bottom; // relative to viewport!
        var trEls = findChildren(this.eventRenderer.rowStructs[row].tbodyEl);
        var i;
        var trEl;
        // Reveal one level  at a time and stop when we find one out of bounds
        for (i = 0; i < trEls.length; i++) {
            trEl = trEls[i];
            trEl.classList.remove('fc-limited'); // reset to original state (reveal)
            if (trEl.getBoundingClientRect().bottom > rowBottom) {
                return i;
            }
        }
        return false; // should not limit at all
    };
    // Limits the given grid row to the maximum number of levels and injects "more" links if necessary.
    // `row` is the row number.
    // `levelLimit` is a number for the maximum (inclusive) number of levels allowed.
    DayGrid.prototype.limitRow = function (row, levelLimit) {
        var _this = this;
        var _a = this, colCnt = _a.colCnt, isRtl = _a.isRtl;
        var rowStruct = this.eventRenderer.rowStructs[row];
        var moreNodes = []; // array of "more"  links and  DOM nodes
        var col = 0; // col #, left-to-right (not chronologically)
        var levelSegs; // array of segment objects in the last allowable level, ordered left-to-right
        var cellMatrix; // a matrix (by level, then column) of all  elements in the row
        var limitedNodes; // array of temporarily hidden level  and segment  DOM nodes
        var i;
        var seg;
        var segsBelow; // array of segment objects below `seg` in the current `col`
        var totalSegsBelow; // total number of segments below `seg` in any of the columns `seg` occupies
        var colSegsBelow; // array of segment arrays, below seg, one for each column (offset from segs's first column)
        var td;
        var rowSpan;
        var segMoreNodes; // array of "more"  cells that will stand-in for the current seg's cell
        var j;
        var moreTd;
        var moreWrap;
        var moreLink;
        // Iterates through empty level cells and places "more" links inside if need be
        var emptyCellsUntil = function (endCol) {
            while (col < endCol) {
                segsBelow = _this.getCellSegs(row, col, levelLimit);
                if (segsBelow.length) {
                    td = cellMatrix[levelLimit - 1][col];
                    moreLink = _this.renderMoreLink(row, col, segsBelow);
                    moreWrap = createElement('div', null, moreLink);
                    td.appendChild(moreWrap);
                    moreNodes.push(moreWrap);
                }
                col++;
            }
        };
        if (levelLimit && levelLimit < rowStruct.segLevels.length) { // is it actually over the limit?
            levelSegs = rowStruct.segLevels[levelLimit - 1];
            cellMatrix = rowStruct.cellMatrix;
            limitedNodes = findChildren(rowStruct.tbodyEl).slice(levelLimit); // get level  elements past the limit
            limitedNodes.forEach(function (node) {
                node.classList.add('fc-limited'); // hide elements and get a simple DOM-nodes array
            });
            // iterate though segments in the last allowable level
            for (i = 0; i < levelSegs.length; i++) {
                seg = levelSegs[i];
                var leftCol = isRtl ? (colCnt - 1 - seg.lastCol) : seg.firstCol;
                var rightCol = isRtl ? (colCnt - 1 - seg.firstCol) : seg.lastCol;
                emptyCellsUntil(leftCol); // process empty cells before the segment
                // determine *all* segments below `seg` that occupy the same columns
                colSegsBelow = [];
                totalSegsBelow = 0;
                while (col <= rightCol) {
                    segsBelow = this.getCellSegs(row, col, levelLimit);
                    colSegsBelow.push(segsBelow);
                    totalSegsBelow += segsBelow.length;
                    col++;
                }
                if (totalSegsBelow) { // do we need to replace this segment with one or many "more" links?
                    td = cellMatrix[levelLimit - 1][leftCol]; // the segment's parent cell
                    rowSpan = td.rowSpan || 1;
                    segMoreNodes = [];
                    // make a replacement  for each column the segment occupies. will be one for each colspan
                    for (j = 0; j < colSegsBelow.length; j++) {
                        moreTd = createElement('td', { className: 'fc-more-cell', rowSpan: rowSpan });
                        segsBelow = colSegsBelow[j];
                        moreLink = this.renderMoreLink(row, leftCol + j, [seg].concat(segsBelow) // count seg as hidden too
                        );
                        moreWrap = createElement('div', null, moreLink);
                        moreTd.appendChild(moreWrap);
                        segMoreNodes.push(moreTd);
                        moreNodes.push(moreTd);
                    }
                    td.classList.add('fc-limited');
                    insertAfterElement(td, segMoreNodes);
                    limitedNodes.push(td);
                }
            }
            emptyCellsUntil(this.colCnt); // finish off the level
            rowStruct.moreEls = moreNodes; // for easy undoing later
            rowStruct.limitedEls = limitedNodes; // for easy undoing later
        }
    };
    // Reveals all levels and removes all "more"-related elements for a grid's row.
    // `row` is a row number.
    DayGrid.prototype.unlimitRow = function (row) {
        var rowStruct = this.eventRenderer.rowStructs[row];
        if (rowStruct.moreEls) {
            rowStruct.moreEls.forEach(removeElement);
            rowStruct.moreEls = null;
        }
        if (rowStruct.limitedEls) {
            rowStruct.limitedEls.forEach(function (limitedEl) {
                limitedEl.classList.remove('fc-limited');
            });
            rowStruct.limitedEls = null;
        }
    };
    // Renders an  element that represents hidden event element for a cell.
    // Responsible for attaching click handler as well.
    DayGrid.prototype.renderMoreLink = function (row, col, hiddenSegs) {
        var _this = this;
        var _a = this, view = _a.view, dateEnv = _a.dateEnv;
        var a = createElement('a', { className: 'fc-more' });
        a.innerText = this.getMoreLinkText(hiddenSegs.length);
        a.addEventListener('click', function (ev) {
            var clickOption = _this.opt('eventLimitClick');
            var _col = _this.isRtl ? _this.colCnt - col - 1 : col; // HACK: props.cells has different dir system?
            var date = _this.props.cells[row][_col].date;
            var moreEl = ev.currentTarget;
            var dayEl = _this.getCellEl(row, col);
            var allSegs = _this.getCellSegs(row, col);
            // rescope the segments to be within the cell's date
            var reslicedAllSegs = _this.resliceDaySegs(allSegs, date);
            var reslicedHiddenSegs = _this.resliceDaySegs(hiddenSegs, date);
            if (typeof clickOption === 'function') {
                // the returned value can be an atomic option
                clickOption = _this.publiclyTrigger('eventLimitClick', [
                    {
                        date: dateEnv.toDate(date),
                        allDay: true,
                        dayEl: dayEl,
                        moreEl: moreEl,
                        segs: reslicedAllSegs,
                        hiddenSegs: reslicedHiddenSegs,
                        jsEvent: ev,
                        view: view
                    }
                ]);
            }
            if (clickOption === 'popover') {
                _this.showSegPopover(row, col, moreEl, reslicedAllSegs);
            }
            else if (typeof clickOption === 'string') { // a view name
                view.calendar.zoomTo(date, clickOption);
            }
        });
        return a;
    };
    // Reveals the popover that displays all events within a cell
    DayGrid.prototype.showSegPopover = function (row, col, moreLink, segs) {
        var _this = this;
        var _a = this, calendar = _a.calendar, view = _a.view, theme = _a.theme;
        var _col = this.isRtl ? this.colCnt - col - 1 : col; // HACK: props.cells has different dir system?
        var moreWrap = moreLink.parentNode; // the

wrapper around the
        var topEl; // the element we want to match the top coordinate of
        var options;
        if (this.rowCnt === 1) {
            topEl = view.el; // will cause the popover to cover any sort of header
        }
        else {
            topEl = this.rowEls[row]; // will align with top of row
        }
        options = {
            className: 'fc-more-popover ' + theme.getClass('popover'),
            parentEl: view.el,
            top: computeRect(topEl).top,
            autoHide: true,
            content: function (el) {
                _this.segPopoverTile = new DayTile(_this.context, el);
                _this.updateSegPopoverTile(_this.props.cells[row][_col].date, segs);
            },
            hide: function () {
                _this.segPopoverTile.destroy();
                _this.segPopoverTile = null;
                _this.segPopover.destroy();
                _this.segPopover = null;
            }
        };
        // Determine horizontal coordinate.
        // We use the moreWrap instead of the  to avoid border confusion.
        if (this.isRtl) {
            options.right = computeRect(moreWrap).right + 1; // +1 to be over cell border
        }
        else {
            options.left = computeRect(moreWrap).left - 1; // -1 to be over cell border
        }
        this.segPopover = new Popover(options);
        this.segPopover.show();
        calendar.releaseAfterSizingTriggers(); // hack for eventPositioned
    };
    // Given the events within an array of segment objects, reslice them to be in a single day
    DayGrid.prototype.resliceDaySegs = function (segs, dayDate) {
        var dayStart = dayDate;
        var dayEnd = addDays(dayStart, 1);
        var dayRange = { start: dayStart, end: dayEnd };
        var newSegs = [];
        for (var _i = 0, segs_1 = segs; _i < segs_1.length; _i++) {
            var seg = segs_1[_i];
            var eventRange = seg.eventRange;
            var origRange = eventRange.range;
            var slicedRange = intersectRanges(origRange, dayRange);
            if (slicedRange) {
                newSegs.push(__assign({}, seg, { eventRange: {
                        def: eventRange.def,
                        ui: __assign({}, eventRange.ui, { durationEditable: false }),
                        instance: eventRange.instance,
                        range: slicedRange
                    }, isStart: seg.isStart && slicedRange.start.valueOf() === origRange.start.valueOf(), isEnd: seg.isEnd && slicedRange.end.valueOf() === origRange.end.valueOf() }));
            }
        }
        return newSegs;
    };
    // Generates the text that should be inside a "more" link, given the number of events it represents
    DayGrid.prototype.getMoreLinkText = function (num) {
        var opt = this.opt('eventLimitText');
        if (typeof opt === 'function') {
            return opt(num);
        }
        else {
            return '+' + num + ' ' + opt;
        }
    };
    // Returns segments within a given cell.
    // If `startLevel` is specified, returns only events including and below that level. Otherwise returns all segs.
    DayGrid.prototype.getCellSegs = function (row, col, startLevel) {
        var segMatrix = this.eventRenderer.rowStructs[row].segMatrix;
        var level = startLevel || 0;
        var segs = [];
        var seg;
        while (level < segMatrix.length) {
            seg = segMatrix[level][col];
            if (seg) {
                segs.push(seg);
            }
            level++;
        }
        return segs;
    };
    return DayGrid;
}(DateComponent));

var main = createPlugin({
    defaultView: 'dayGridMonth',
    views: {
        dayGrid: DayGridView$1,
        dayGridDay: {
            type: 'dayGrid',
            duration: { days: 1 }
        },
        dayGridWeek: {
            type: 'dayGrid',
            duration: { weeks: 1 }
        },
        dayGridMonth: {
            type: 'dayGrid',
            duration: { months: 1 },
            monthMode: true,
            fixedWeekCount: true
        }
    }
});

export default main;
export { DayGridView as AbstractDayGridView, DayBgRow, DayGrid, DayGridSlicer, DayGridView$1 as DayGridView, SimpleDayGrid, buildDayTable as buildBasicDayTable };

/*!
FullCalendar Day Grid Plugin v4.3.0
Docs & License: https://fullcalendar.io/
(c) 2019 Adam Shaw
*/

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@fullcalendar/core')) :
    typeof define === 'function' && define.amd ? define(['exports', '@fullcalendar/core'], factory) :
    (global = global || self, factory(global.FullCalendarDayGrid = {}, global.FullCalendar));
}(this, function (exports, core) { 'use strict';

    /*! *****************************************************************************
    Copyright (c) Microsoft Corporation. All rights reserved.
    Licensed under the Apache License, Version 2.0 (the "License"); you may not use
    this file except in compliance with the License. You may obtain a copy of the
    License at http://www.apache.org/licenses/LICENSE-2.0

    THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
    KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
    WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
    MERCHANTABLITY OR NON-INFRINGEMENT.

    See the Apache Version 2.0 License for specific language governing permissions
    and limitations under the License.
    ***************************************************************************** */
    /* global Reflect, Promise */

    function __extends(d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    }

    /* A rectangular panel that is absolutely positioned over other content
    ------------------------------------------------------------------------------------------------------------------------
    Options:
      - className (string)
      - content (HTML string, element, or element array)
      - parentEl
      - top
      - left
      - right (the x coord of where the right edge should be. not a "CSS" right)
      - autoHide (boolean)
      - show (callback)
      - hide (callback)
    */
    var Popover = /** @class */ (function () {
        function Popover(options) {
            var _this = this;
            this.isHidden = true;
            this.margin = 10; // the space required between the popover and the edges of the scroll container
            // Triggered when the user clicks *anywhere* in the document, for the autoHide feature
            this.documentMousedown = function (ev) {
                // only hide the popover if the click happened outside the popover
                if (_this.el && !_this.el.contains(ev.target)) {
                    _this.hide();
                }
            };
            this.options = options;
        }
        // Shows the popover on the specified position. Renders it if not already
        Popover.prototype.show = function () {
            if (this.isHidden) {
                if (!this.el) {
                    this.render();
                }
                this.el.style.display = '';
                this.position();
                this.isHidden = false;
                this.trigger('show');
            }
        };
        // Hides the popover, through CSS, but does not remove it from the DOM
        Popover.prototype.hide = function () {
            if (!this.isHidden) {
                this.el.style.display = 'none';
                this.isHidden = true;
                this.trigger('hide');
            }
        };
        // Creates `this.el` and renders content inside of it
        Popover.prototype.render = function () {
            var _this = this;
            var options = this.options;
            var el = this.el = core.createElement('div', {
                className: 'fc-popover ' + (options.className || ''),
                style: {
                    top: '0',
                    left: '0'
                }
            });
            if (typeof options.content === 'function') {
                options.content(el);
            }
            options.parentEl.appendChild(el);
            // when a click happens on anything inside with a 'fc-close' className, hide the popover
            core.listenBySelector(el, 'click', '.fc-close', function (ev) {
                _this.hide();
            });
            if (options.autoHide) {
                document.addEventListener('mousedown', this.documentMousedown);
            }
        };
        // Hides and unregisters any handlers
        Popover.prototype.destroy = function () {
            this.hide();
            if (this.el) {
                core.removeElement(this.el);
                this.el = null;
            }
            document.removeEventListener('mousedown', this.documentMousedown);
        };
        // Positions the popover optimally, using the top/left/right options
        Popover.prototype.position = function () {
            var options = this.options;
            var el = this.el;
            var elDims = el.getBoundingClientRect(); // only used for width,height
            var origin = core.computeRect(el.offsetParent);
            var clippingRect = core.computeClippingRect(options.parentEl);
            var top; // the "position" (not "offset") values for the popover
            var left; //
            // compute top and left
            top = options.top || 0;
            if (options.left !== undefined) {
                left = options.left;
            }
            else if (options.right !== undefined) {
                left = options.right - elDims.width; // derive the left value from the right value
            }
            else {
                left = 0;
            }
            // constrain to the view port. if constrained by two edges, give precedence to top/left
            top = Math.min(top, clippingRect.bottom - elDims.height - this.margin);
            top = Math.max(top, clippingRect.top + this.margin);
            left = Math.min(left, clippingRect.right - elDims.width - this.margin);
            left = Math.max(left, clippingRect.left + this.margin);
            core.applyStyle(el, {
                top: top - origin.top,
                left: left - origin.left
            });
        };
        // Triggers a callback. Calls a function in the option hash of the same name.
        // Arguments beyond the first `name` are forwarded on.
        // TODO: better code reuse for this. Repeat code
        // can kill this???
        Popover.prototype.trigger = function (name) {
            if (this.options[name]) {
                this.options[name].apply(this, Array.prototype.slice.call(arguments, 1));
            }
        };
        return Popover;
    }());

    /* Event-rendering methods for the DayGrid class
    ----------------------------------------------------------------------------------------------------------------------*/
    // "Simple" is bad a name. has nothing to do with SimpleDayGrid
    var SimpleDayGridEventRenderer = /** @class */ (function (_super) {
        __extends(SimpleDayGridEventRenderer, _super);
        function SimpleDayGridEventRenderer() {
            return _super !== null && _super.apply(this, arguments) || this;
        }
        // Builds the HTML to be used for the default element for an individual segment
        SimpleDayGridEventRenderer.prototype.renderSegHtml = function (seg, mirrorInfo) {
            var _a = this.context, view = _a.view, options = _a.options;
            var eventRange = seg.eventRange;
            var eventDef = eventRange.def;
            var eventUi = eventRange.ui;
            var allDay = eventDef.allDay;
            var isDraggable = view.computeEventDraggable(eventDef, eventUi);
            var isResizableFromStart = allDay && seg.isStart && view.computeEventStartResizable(eventDef, eventUi);
            var isResizableFromEnd = allDay && seg.isEnd && view.computeEventEndResizable(eventDef, eventUi);
            var classes = this.getSegClasses(seg, isDraggable, isResizableFromStart || isResizableFromEnd, mirrorInfo);
            var skinCss = core.cssToStr(this.getSkinCss(eventUi));
            var timeHtml = '';
            var timeText;
            var titleHtml;
            classes.unshift('fc-day-grid-event', 'fc-h-event');
            // Only display a timed events time if it is the starting segment
            if (seg.isStart) {
                timeText = this.getTimeText(eventRange);
                if (timeText) {
                    timeHtml = '' + core.htmlEscape(timeText) + '';
                }
            }
            titleHtml =
                '' +
                    (core.htmlEscape(eventDef.title || '') || ' ') + // we always want one line of height
                    '';
            return '' +
                '

' +
                (options.dir === 'rtl' ?
                    titleHtml + ' ' + timeHtml : // put a natural space in between
                    timeHtml + ' ' + titleHtml //
                ) +
                '

' +
(isResizableFromStart ?
'

' :
                    '') +
                (isResizableFromEnd ?
                    '

' :
                    '') +
                '';
        };
        // Computes a default event time formatting string if `eventTimeFormat` is not explicitly defined
        SimpleDayGridEventRenderer.prototype.computeEventTimeFormat = function () {
            return {
                hour: 'numeric',
                minute: '2-digit',
                omitZeroMinute: true,
                meridiem: 'narrow'
            };
        };
        SimpleDayGridEventRenderer.prototype.computeDisplayEventEnd = function () {
            return false; // TODO: somehow consider the originating DayGrid's column count
        };
        return SimpleDayGridEventRenderer;
    }(core.FgEventRenderer));

    /* Event-rendering methods for the DayGrid class
    ----------------------------------------------------------------------------------------------------------------------*/
    var DayGridEventRenderer = /** @class */ (function (_super) {
        __extends(DayGridEventRenderer, _super);
        function DayGridEventRenderer(dayGrid) {
            var _this = _super.call(this, dayGrid.context) || this;
            _this.dayGrid = dayGrid;
            return _this;
        }
        // Renders the given foreground event segments onto the grid
        DayGridEventRenderer.prototype.attachSegs = function (segs, mirrorInfo) {
            var rowStructs = this.rowStructs = this.renderSegRows(segs);
            // append to each row's content skeleton
            this.dayGrid.rowEls.forEach(function (rowNode, i) {
                rowNode.querySelector('.fc-content-skeleton > table').appendChild(rowStructs[i].tbodyEl);
            });
            // removes the "more.." events popover
            if (!mirrorInfo) {
                this.dayGrid.removeSegPopover();
            }
        };
        // Unrenders all currently rendered foreground event segments
        DayGridEventRenderer.prototype.detachSegs = function () {
            var rowStructs = this.rowStructs || [];
            var rowStruct;
            while ((rowStruct = rowStructs.pop())) {
                core.removeElement(rowStruct.tbodyEl);
            }
            this.rowStructs = null;
        };
        // Uses the given events array to generate  elements that should be appended to each row's content skeleton.
        // Returns an array of rowStruct objects (see the bottom of `renderSegRow`).
        // PRECONDITION: each segment shoud already have a rendered and assigned `.el`
        DayGridEventRenderer.prototype.renderSegRows = function (segs) {
            var rowStructs = [];
            var segRows;
            var row;
            segRows = this.groupSegRows(segs); // group into nested arrays
            // iterate each row of segment groupings
            for (row = 0; row < segRows.length; row++) {
                rowStructs.push(this.renderSegRow(row, segRows[row]));
            }
            return rowStructs;
        };
        // Given a row # and an array of segments all in the same row, render a  element, a skeleton that contains
        // the segments. Returns object with a bunch of internal data about how the render was calculated.
        // NOTE: modifies rowSegs
        DayGridEventRenderer.prototype.renderSegRow = function (row, rowSegs) {
            var dayGrid = this.dayGrid;
            var colCnt = dayGrid.colCnt, isRtl = dayGrid.isRtl;
            var segLevels = this.buildSegLevels(rowSegs); // group into sub-arrays of levels
            var levelCnt = Math.max(1, segLevels.length); // ensure at least one level
            var tbody = document.createElement('tbody');
            var segMatrix = []; // lookup for which segments are rendered into which level+col cells
            var cellMatrix = []; // lookup for all  elements of the level+col matrix
            var loneCellMatrix = []; // lookup for  elements that only take up a single column
            var i;
            var levelSegs;
            var col;
            var tr;
            var j;
            var seg;
            var td;
            // populates empty cells from the current column (`col`) to `endCol`
            function emptyCellsUntil(endCol) {
                while (col < endCol) {
                    // try to grab a cell from the level above and extend its rowspan. otherwise, create a fresh cell
                    td = (loneCellMatrix[i - 1] || [])[col];
                    if (td) {
                        td.rowSpan = (td.rowSpan || 1) + 1;
                    }
                    else {
                        td = document.createElement('td');
                        tr.appendChild(td);
                    }
                    cellMatrix[i][col] = td;
                    loneCellMatrix[i][col] = td;
                    col++;
                }
            }
            for (i = 0; i < levelCnt; i++) { // iterate through all levels
                levelSegs = segLevels[i];
                col = 0;
                tr = document.createElement('tr');
                segMatrix.push([]);
                cellMatrix.push([]);
                loneCellMatrix.push([]);
                // levelCnt might be 1 even though there are no actual levels. protect against this.
                // this single empty row is useful for styling.
                if (levelSegs) {
                    for (j = 0; j < levelSegs.length; j++) { // iterate through segments in level
                        seg = levelSegs[j];
                        var leftCol = isRtl ? (colCnt - 1 - seg.lastCol) : seg.firstCol;
                        var rightCol = isRtl ? (colCnt - 1 - seg.firstCol) : seg.lastCol;
                        emptyCellsUntil(leftCol);
                        // create a container that occupies or more columns. append the event element.
                        td = core.createElement('td', { className: 'fc-event-container' }, seg.el);
                        if (leftCol !== rightCol) {
                            td.colSpan = rightCol - leftCol + 1;
                        }
                        else { // a single-column segment
                            loneCellMatrix[i][col] = td;
                        }
                        while (col <= rightCol) {
                            cellMatrix[i][col] = td;
                            segMatrix[i][col] = seg;
                            col++;
                        }
                        tr.appendChild(td);
                    }
                }
                emptyCellsUntil(colCnt); // finish off the row
                var introHtml = dayGrid.renderProps.renderIntroHtml();
                if (introHtml) {
                    if (dayGrid.isRtl) {
                        core.appendToElement(tr, introHtml);
                    }
                    else {
                        core.prependToElement(tr, introHtml);
                    }
                }
                tbody.appendChild(tr);
            }
            return {
                row: row,
                tbodyEl: tbody,
                cellMatrix: cellMatrix,
                segMatrix: segMatrix,
                segLevels: segLevels,
                segs: rowSegs
            };
        };
        // Stacks a flat array of segments, which are all assumed to be in the same row, into subarrays of vertical levels.
        // NOTE: modifies segs
        DayGridEventRenderer.prototype.buildSegLevels = function (segs) {
            var _a = this.dayGrid, isRtl = _a.isRtl, colCnt = _a.colCnt;
            var levels = [];
            var i;
            var seg;
            var j;
            // Give preference to elements with certain criteria, so they have
            // a chance to be closer to the top.
            segs = this.sortEventSegs(segs);
            for (i = 0; i < segs.length; i++) {
                seg = segs[i];
                // loop through levels, starting with the topmost, until the segment doesn't collide with other segments
                for (j = 0; j < levels.length; j++) {
                    if (!isDaySegCollision(seg, levels[j])) {
                        break;
                    }
                }
                // `j` now holds the desired subrow index
                seg.level = j;
                seg.leftCol = isRtl ? (colCnt - 1 - seg.lastCol) : seg.firstCol; // for sorting only
                seg.rightCol = isRtl ? (colCnt - 1 - seg.firstCol) : seg.lastCol // for sorting only
                ;
                (levels[j] || (levels[j] = [])).push(seg);
            }
            // order segments left-to-right. very important if calendar is RTL
            for (j = 0; j < levels.length; j++) {
                levels[j].sort(compareDaySegCols);
            }
            return levels;
        };
        // Given a flat array of segments, return an array of sub-arrays, grouped by each segment's row
        DayGridEventRenderer.prototype.groupSegRows = function (segs) {
            var segRows = [];
            var i;
            for (i = 0; i < this.dayGrid.rowCnt; i++) {
                segRows.push([]);
            }
            for (i = 0; i < segs.length; i++) {
                segRows[segs[i].row].push(segs[i]);
            }
            return segRows;
        };
        // Computes a default `displayEventEnd` value if one is not expliclty defined
        DayGridEventRenderer.prototype.computeDisplayEventEnd = function () {
            return this.dayGrid.colCnt === 1; // we'll likely have space if there's only one day
        };
        return DayGridEventRenderer;
    }(SimpleDayGridEventRenderer));
    // Computes whether two segments' columns collide. They are assumed to be in the same row.
    function isDaySegCollision(seg, otherSegs) {
        var i;
        var otherSeg;
        for (i = 0; i < otherSegs.length; i++) {
            otherSeg = otherSegs[i];
            if (otherSeg.firstCol <= seg.lastCol &&
                otherSeg.lastCol >= seg.firstCol) {
                return true;
            }
        }
        return false;
    }
    // A cmp function for determining the leftmost event
    function compareDaySegCols(a, b) {
        return a.leftCol - b.leftCol;
    }

    var DayGridMirrorRenderer = /** @class */ (function (_super) {
        __extends(DayGridMirrorRenderer, _super);
        function DayGridMirrorRenderer() {
            return _super !== null && _super.apply(this, arguments) || this;
        }
        DayGridMirrorRenderer.prototype.attachSegs = function (segs, mirrorInfo) {
            var sourceSeg = mirrorInfo.sourceSeg;
            var rowStructs = this.rowStructs = this.renderSegRows(segs);
            // inject each new event skeleton into each associated row
            this.dayGrid.rowEls.forEach(function (rowNode, row) {
                var skeletonEl = core.htmlToElement('

'); // will be absolutely positioned
                var skeletonTopEl;
                var skeletonTop;
                // If there is an original segment, match the top position. Otherwise, put it at the row's top level
                if (sourceSeg && sourceSeg.row === row) {
                    skeletonTopEl = sourceSeg.el;
                }
                else {
                    skeletonTopEl = rowNode.querySelector('.fc-content-skeleton tbody');
                    if (!skeletonTopEl) { // when no events
                        skeletonTopEl = rowNode.querySelector('.fc-content-skeleton table');
                    }
                }
                skeletonTop = skeletonTopEl.getBoundingClientRect().top -
                    rowNode.getBoundingClientRect().top; // the offsetParent origin
                skeletonEl.style.top = skeletonTop + 'px';
                skeletonEl.querySelector('table').appendChild(rowStructs[row].tbodyEl);
                rowNode.appendChild(skeletonEl);
            });
        };
        return DayGridMirrorRenderer;
    }(DayGridEventRenderer));

' +
'' +
'

');
            trEl = skeletonEl.getElementsByTagName('tr')[0];
            if (startCol > 0) {
                core.appendToElement(trEl,
                // will create (startCol + 1) td's
                new Array(startCol + 1).join(EMPTY_CELL_HTML));
            }
            seg.el.colSpan = endCol - startCol;
            trEl.appendChild(seg.el);
            if (endCol < colCnt) {
                core.appendToElement(trEl,
                // will create (colCnt - endCol) td's
                new Array(colCnt - endCol + 1).join(EMPTY_CELL_HTML));
            }
            var introHtml = dayGrid.renderProps.renderIntroHtml();
            if (introHtml) {
                if (dayGrid.isRtl) {
                    core.appendToElement(trEl, introHtml);
                }
                else {
                    core.prependToElement(trEl, introHtml);
                }
            }
            return skeletonEl;
        };
        return DayGridFillRenderer;
    }(core.FillRenderer));

' +
                    '' +
                    core.htmlEscape(title) +
                    '' +
                    '' +
                    '

' +
'

';
            this.segContainerEl = this.el.querySelector('.fc-event-container');
        };
        DayTile.prototype.queryHit = function (positionLeft, positionTop, elWidth, elHeight) {
            var date = this.props.date; // HACK
            if (positionLeft < elWidth && positionTop < elHeight) {
                return {
                    component: this,
                    dateSpan: {
                        allDay: true,
                        range: { start: date, end: core.addDays(date, 1) }
                    },
                    dayEl: this.el,
                    rect: {
                        left: 0,
                        top: 0,
                        right: elWidth,
                        bottom: elHeight
                    },
                    layer: 1
                };
            }
        };
        return DayTile;
    }(core.DateComponent));
    var DayTileEventRenderer = /** @class */ (function (_super) {
        __extends(DayTileEventRenderer, _super);
        function DayTileEventRenderer(dayTile) {
            var _this = _super.call(this, dayTile.context) || this;
            _this.dayTile = dayTile;
            return _this;
        }
        DayTileEventRenderer.prototype.attachSegs = function (segs) {
            for (var _i = 0, segs_1 = segs; _i < segs_1.length; _i++) {
                var seg = segs_1[_i];
                this.dayTile.segContainerEl.appendChild(seg.el);
            }
        };
        DayTileEventRenderer.prototype.detachSegs = function (segs) {
            for (var _i = 0, segs_2 = segs; _i < segs_2.length; _i++) {
                var seg = segs_2[_i];
                core.removeElement(seg.el);
            }
        };
        return DayTileEventRenderer;
    }(SimpleDayGridEventRenderer));

' +
'

' +
                '' +
                bgRow.renderHtml({
                    cells: this.props.cells[row],
                    dateProfile: this.props.dateProfile,
                    renderIntroHtml: this.renderProps.renderBgIntroHtml
                }) +
                '' +
                '

' +
'

' +
                '' +
                (this.getIsNumbersVisible() ?
                    '' +
                        this.renderNumberTrHtml(row) +
                        '' :
                    '') +
                '' +
                '

' +
'

';
        };
        DayGrid.prototype.getIsNumbersVisible = function () {
            return this.getIsDayNumbersVisible() ||
                this.renderProps.cellWeekNumbersVisible ||
                this.renderProps.colWeekNumbersVisible;
        };
        DayGrid.prototype.getIsDayNumbersVisible = function () {
            return this.rowCnt > 1;
        };
        /* Grid Number Rendering
        ------------------------------------------------------------------------------------------------------------------*/
        DayGrid.prototype.renderNumberTrHtml = function (row) {
            var intro = this.renderProps.renderNumberIntroHtml(row, this);
            return '' +
                '' +
                (this.isRtl ? '' : intro) +
                this.renderNumberCellsHtml(row) +
                (this.isRtl ? intro : '') +
                '';
        };
        DayGrid.prototype.renderNumberCellsHtml = function (row) {
            var htmls = [];
            var col;
            var date;
            for (col = 0; col < this.colCnt; col++) {
                date = this.props.cells[row][col].date;
                htmls.push(this.renderNumberCellHtml(date));
            }
            if (this.isRtl) {
                htmls.reverse();
            }
            return htmls.join('');
        };
        // Generates the HTML for the s of the "number" row in the DayGrid's content skeleton.
        // The number row will only exist if either day numbers or week numbers are turned on.
        DayGrid.prototype.renderNumberCellHtml = function (date) {
            var _a = this, view = _a.view, dateEnv = _a.dateEnv;
            var html = '';
            var isDateValid = core.rangeContainsMarker(this.props.dateProfile.activeRange, date); // TODO: called too frequently. cache somehow.
            var isDayNumberVisible = this.getIsDayNumbersVisible() && isDateValid;
            var classes;
            var weekCalcFirstDow;
            if (!isDayNumberVisible && !this.renderProps.cellWeekNumbersVisible) {
                // no numbers in day cell (week number must be along the side)
                return ''; //  will create an empty space above events :(
            }
            classes = core.getDayClasses(date, this.props.dateProfile, this.context);
            classes.unshift('fc-day-top');
            if (this.renderProps.cellWeekNumbersVisible) {
                weekCalcFirstDow = dateEnv.weekDow;
            }
            html += '';
            if (this.renderProps.cellWeekNumbersVisible && (date.getUTCDay() === weekCalcFirstDow)) {
                html += core.buildGotoAnchorHtml(view, { date: date, type: 'week' }, { 'class': 'fc-week-number' }, dateEnv.format(date, WEEK_NUM_FORMAT) // inner HTML
                );
            }
            if (isDayNumberVisible) {
                html += core.buildGotoAnchorHtml(view, date, { 'class': 'fc-day-number' }, dateEnv.format(date, DAY_NUM_FORMAT) // inner HTML
                );
            }
            html += '';
            return html;
        };
        /* Sizing
        ------------------------------------------------------------------------------------------------------------------*/
        DayGrid.prototype.updateSize = function (isResize) {
            var _a = this, fillRenderer = _a.fillRenderer, eventRenderer = _a.eventRenderer, mirrorRenderer = _a.mirrorRenderer;
            if (isResize ||
                this.isCellSizesDirty ||
                this.view.calendar.isEventsUpdated // hack
            ) {
                this.buildPositionCaches();
                this.isCellSizesDirty = false;
            }
            fillRenderer.computeSizes(isResize);
            eventRenderer.computeSizes(isResize);
            mirrorRenderer.computeSizes(isResize);
            fillRenderer.assignSizes(isResize);
            eventRenderer.assignSizes(isResize);
            mirrorRenderer.assignSizes(isResize);
        };
        DayGrid.prototype.buildPositionCaches = function () {
            this.buildColPositions();
            this.buildRowPositions();
        };
        DayGrid.prototype.buildColPositions = function () {
            this.colPositions.build();
        };
        DayGrid.prototype.buildRowPositions = function () {
            this.rowPositions.build();
            this.rowPositions.bottoms[this.rowCnt - 1] += this.bottomCoordPadding; // hack
        };
        /* Hit System
        ------------------------------------------------------------------------------------------------------------------*/
        DayGrid.prototype.positionToHit = function (leftPosition, topPosition) {
            var _a = this, colPositions = _a.colPositions, rowPositions = _a.rowPositions;
            var col = colPositions.leftToIndex(leftPosition);
            var row = rowPositions.topToIndex(topPosition);
            if (row != null && col != null) {
                return {
                    row: row,
                    col: col,
                    dateSpan: {
                        range: this.getCellRange(row, col),
                        allDay: true
                    },
                    dayEl: this.getCellEl(row, col),
                    relativeRect: {
                        left: colPositions.lefts[col],
                        right: colPositions.rights[col],
                        top: rowPositions.tops[row],
                        bottom: rowPositions.bottoms[row]
                    }
                };
            }
        };
        /* Cell System
        ------------------------------------------------------------------------------------------------------------------*/
        // FYI: the first column is the leftmost column, regardless of date
        DayGrid.prototype.getCellEl = function (row, col) {
            return this.cellEls[row * this.colCnt + col];
        };
        /* Event Drag Visualization
        ------------------------------------------------------------------------------------------------------------------*/
        DayGrid.prototype._renderEventDrag = function (state) {
            if (state) {
                this.eventRenderer.hideByHash(state.affectedInstances);
                this.fillRenderer.renderSegs('highlight', state.segs);
            }
        };
        DayGrid.prototype._unrenderEventDrag = function (state) {
            if (state) {
                this.eventRenderer.showByHash(state.affectedInstances);
                this.fillRenderer.unrender('highlight');
            }
        };
        /* Event Resize Visualization
        ------------------------------------------------------------------------------------------------------------------*/
        DayGrid.prototype._renderEventResize = function (state) {
            if (state) {
                this.eventRenderer.hideByHash(state.affectedInstances);
                this.fillRenderer.renderSegs('highlight', state.segs);
                this.mirrorRenderer.renderSegs(state.segs, { isResizing: true, sourceSeg: state.sourceSeg });
            }
        };
        DayGrid.prototype._unrenderEventResize = function (state) {
            if (state) {
                this.eventRenderer.showByHash(state.affectedInstances);
                this.fillRenderer.unrender('highlight');
                this.mirrorRenderer.unrender(state.segs, { isResizing: true, sourceSeg: state.sourceSeg });
            }
        };
        /* More+ Link Popover
        ------------------------------------------------------------------------------------------------------------------*/
        DayGrid.prototype.removeSegPopover = function () {
            if (this.segPopover) {
                this.segPopover.hide(); // in handler, will call segPopover's removeElement
            }
        };
        // Limits the number of "levels" (vertically stacking layers of events) for each row of the grid.
        // `levelLimit` can be false (don't limit), a number, or true (should be computed).
        DayGrid.prototype.limitRows = function (levelLimit) {
            var rowStructs = this.eventRenderer.rowStructs || [];
            var row; // row #
            var rowLevelLimit;
            for (row = 0; row < rowStructs.length; row++) {
                this.unlimitRow(row);
                if (!levelLimit) {
                    rowLevelLimit = false;
                }
                else if (typeof levelLimit === 'number') {
                    rowLevelLimit = levelLimit;
                }
                else {
                    rowLevelLimit = this.computeRowLevelLimit(row);
                }
                if (rowLevelLimit !== false) {
                    this.limitRow(row, rowLevelLimit);
                }
            }
        };
        // Computes the number of levels a row will accomodate without going outside its bounds.
        // Assumes the row is "rigid" (maintains a constant height regardless of what is inside).
        // `row` is the row number.
        DayGrid.prototype.computeRowLevelLimit = function (row) {
            var rowEl = this.rowEls[row]; // the containing "fake" row div
            var rowBottom = rowEl.getBoundingClientRect().bottom; // relative to viewport!
            var trEls = core.findChildren(this.eventRenderer.rowStructs[row].tbodyEl);
            var i;
            var trEl;
            // Reveal one level  at a time and stop when we find one out of bounds
            for (i = 0; i < trEls.length; i++) {
                trEl = trEls[i];
                trEl.classList.remove('fc-limited'); // reset to original state (reveal)
                if (trEl.getBoundingClientRect().bottom > rowBottom) {
                    return i;
                }
            }
            return false; // should not limit at all
        };
        // Limits the given grid row to the maximum number of levels and injects "more" links if necessary.
        // `row` is the row number.
        // `levelLimit` is a number for the maximum (inclusive) number of levels allowed.
        DayGrid.prototype.limitRow = function (row, levelLimit) {
            var _this = this;
            var _a = this, colCnt = _a.colCnt, isRtl = _a.isRtl;
            var rowStruct = this.eventRenderer.rowStructs[row];
            var moreNodes = []; // array of "more"  links and  DOM nodes
            var col = 0; // col #, left-to-right (not chronologically)
            var levelSegs; // array of segment objects in the last allowable level, ordered left-to-right
            var cellMatrix; // a matrix (by level, then column) of all  elements in the row
            var limitedNodes; // array of temporarily hidden level  and segment  DOM nodes
            var i;
            var seg;
            var segsBelow; // array of segment objects below `seg` in the current `col`
            var totalSegsBelow; // total number of segments below `seg` in any of the columns `seg` occupies
            var colSegsBelow; // array of segment arrays, below seg, one for each column (offset from segs's first column)
            var td;
            var rowSpan;
            var segMoreNodes; // array of "more"  cells that will stand-in for the current seg's cell
            var j;
            var moreTd;
            var moreWrap;
            var moreLink;
            // Iterates through empty level cells and places "more" links inside if need be
            var emptyCellsUntil = function (endCol) {
                while (col < endCol) {
                    segsBelow = _this.getCellSegs(row, col, levelLimit);
                    if (segsBelow.length) {
                        td = cellMatrix[levelLimit - 1][col];
                        moreLink = _this.renderMoreLink(row, col, segsBelow);
                        moreWrap = core.createElement('div', null, moreLink);
                        td.appendChild(moreWrap);
                        moreNodes.push(moreWrap);
                    }
                    col++;
                }
            };
            if (levelLimit && levelLimit < rowStruct.segLevels.length) { // is it actually over the limit?
                levelSegs = rowStruct.segLevels[levelLimit - 1];
                cellMatrix = rowStruct.cellMatrix;
                limitedNodes = core.findChildren(rowStruct.tbodyEl).slice(levelLimit); // get level  elements past the limit
                limitedNodes.forEach(function (node) {
                    node.classList.add('fc-limited'); // hide elements and get a simple DOM-nodes array
                });
                // iterate though segments in the last allowable level
                for (i = 0; i < levelSegs.length; i++) {
                    seg = levelSegs[i];
                    var leftCol = isRtl ? (colCnt - 1 - seg.lastCol) : seg.firstCol;
                    var rightCol = isRtl ? (colCnt - 1 - seg.firstCol) : seg.lastCol;
                    emptyCellsUntil(leftCol); // process empty cells before the segment
                    // determine *all* segments below `seg` that occupy the same columns
                    colSegsBelow = [];
                    totalSegsBelow = 0;
                    while (col <= rightCol) {
                        segsBelow = this.getCellSegs(row, col, levelLimit);
                        colSegsBelow.push(segsBelow);
                        totalSegsBelow += segsBelow.length;
                        col++;
                    }
                    if (totalSegsBelow) { // do we need to replace this segment with one or many "more" links?
                        td = cellMatrix[levelLimit - 1][leftCol]; // the segment's parent cell
                        rowSpan = td.rowSpan || 1;
                        segMoreNodes = [];
                        // make a replacement  for each column the segment occupies. will be one for each colspan
                        for (j = 0; j < colSegsBelow.length; j++) {
                            moreTd = core.createElement('td', { className: 'fc-more-cell', rowSpan: rowSpan });
                            segsBelow = colSegsBelow[j];
                            moreLink = this.renderMoreLink(row, leftCol + j, [seg].concat(segsBelow) // count seg as hidden too
                            );
                            moreWrap = core.createElement('div', null, moreLink);
                            moreTd.appendChild(moreWrap);
                            segMoreNodes.push(moreTd);
                            moreNodes.push(moreTd);
                        }
                        td.classList.add('fc-limited');
                        core.insertAfterElement(td, segMoreNodes);
                        limitedNodes.push(td);
                    }
                }
                emptyCellsUntil(this.colCnt); // finish off the level
                rowStruct.moreEls = moreNodes; // for easy undoing later
                rowStruct.limitedEls = limitedNodes; // for easy undoing later
            }
        };
        // Reveals all levels and removes all "more"-related elements for a grid's row.
        // `row` is a row number.
        DayGrid.prototype.unlimitRow = function (row) {
            var rowStruct = this.eventRenderer.rowStructs[row];
            if (rowStruct.moreEls) {
                rowStruct.moreEls.forEach(core.removeElement);
                rowStruct.moreEls = null;
            }
            if (rowStruct.limitedEls) {
                rowStruct.limitedEls.forEach(function (limitedEl) {
                    limitedEl.classList.remove('fc-limited');
                });
                rowStruct.limitedEls = null;
            }
        };
        // Renders an  element that represents hidden event element for a cell.
        // Responsible for attaching click handler as well.
        DayGrid.prototype.renderMoreLink = function (row, col, hiddenSegs) {
            var _this = this;
            var _a = this, view = _a.view, dateEnv = _a.dateEnv;
            var a = core.createElement('a', { className: 'fc-more' });
            a.innerText = this.getMoreLinkText(hiddenSegs.length);
            a.addEventListener('click', function (ev) {
                var clickOption = _this.opt('eventLimitClick');
                var _col = _this.isRtl ? _this.colCnt - col - 1 : col; // HACK: props.cells has different dir system?
                var date = _this.props.cells[row][_col].date;
                var moreEl = ev.currentTarget;
                var dayEl = _this.getCellEl(row, col);
                var allSegs = _this.getCellSegs(row, col);
                // rescope the segments to be within the cell's date
                var reslicedAllSegs = _this.resliceDaySegs(allSegs, date);
                var reslicedHiddenSegs = _this.resliceDaySegs(hiddenSegs, date);
                if (typeof clickOption === 'function') {
                    // the returned value can be an atomic option
                    clickOption = _this.publiclyTrigger('eventLimitClick', [
                        {
                            date: dateEnv.toDate(date),
                            allDay: true,
                            dayEl: dayEl,
                            moreEl: moreEl,
                            segs: reslicedAllSegs,
                            hiddenSegs: reslicedHiddenSegs,
                            jsEvent: ev,
                            view: view
                        }
                    ]);
                }
                if (clickOption === 'popover') {
                    _this.showSegPopover(row, col, moreEl, reslicedAllSegs);
                }
                else if (typeof clickOption === 'string') { // a view name
                    view.calendar.zoomTo(date, clickOption);
                }
            });
            return a;
        };
        // Reveals the popover that displays all events within a cell
        DayGrid.prototype.showSegPopover = function (row, col, moreLink, segs) {
            var _this = this;
            var _a = this, calendar = _a.calendar, view = _a.view, theme = _a.theme;
            var _col = this.isRtl ? this.colCnt - col - 1 : col; // HACK: props.cells has different dir system?
            var moreWrap = moreLink.parentNode; // the

wrapper around the
            var topEl; // the element we want to match the top coordinate of
            var options;
            if (this.rowCnt === 1) {
                topEl = view.el; // will cause the popover to cover any sort of header
            }
            else {
                topEl = this.rowEls[row]; // will align with top of row
            }
            options = {
                className: 'fc-more-popover ' + theme.getClass('popover'),
                parentEl: view.el,
                top: core.computeRect(topEl).top,
                autoHide: true,
                content: function (el) {
                    _this.segPopoverTile = new DayTile(_this.context, el);
                    _this.updateSegPopoverTile(_this.props.cells[row][_col].date, segs);
                },
                hide: function () {
                    _this.segPopoverTile.destroy();
                    _this.segPopoverTile = null;
                    _this.segPopover.destroy();
                    _this.segPopover = null;
                }
            };
            // Determine horizontal coordinate.
            // We use the moreWrap instead of the  to avoid border confusion.
            if (this.isRtl) {
                options.right = core.computeRect(moreWrap).right + 1; // +1 to be over cell border
            }
            else {
                options.left = core.computeRect(moreWrap).left - 1; // -1 to be over cell border
            }
            this.segPopover = new Popover(options);
            this.segPopover.show();
            calendar.releaseAfterSizingTriggers(); // hack for eventPositioned
        };
        // Given the events within an array of segment objects, reslice them to be in a single day
        DayGrid.prototype.resliceDaySegs = function (segs, dayDate) {
            var dayStart = dayDate;
            var dayEnd = core.addDays(dayStart, 1);
            var dayRange = { start: dayStart, end: dayEnd };
            var newSegs = [];
            for (var _i = 0, segs_1 = segs; _i < segs_1.length; _i++) {
                var seg = segs_1[_i];
                var eventRange = seg.eventRange;
                var origRange = eventRange.range;
                var slicedRange = core.intersectRanges(origRange, dayRange);
                if (slicedRange) {
                    newSegs.push(__assign({}, seg, { eventRange: {
                            def: eventRange.def,
                            ui: __assign({}, eventRange.ui, { durationEditable: false }),
                            instance: eventRange.instance,
                            range: slicedRange
                        }, isStart: seg.isStart && slicedRange.start.valueOf() === origRange.start.valueOf(), isEnd: seg.isEnd && slicedRange.end.valueOf() === origRange.end.valueOf() }));
                }
            }
            return newSegs;
        };
        // Generates the text that should be inside a "more" link, given the number of events it represents
        DayGrid.prototype.getMoreLinkText = function (num) {
            var opt = this.opt('eventLimitText');
            if (typeof opt === 'function') {
                return opt(num);
            }
            else {
                return '+' + num + ' ' + opt;
            }
        };
        // Returns segments within a given cell.
        // If `startLevel` is specified, returns only events including and below that level. Otherwise returns all segs.
        DayGrid.prototype.getCellSegs = function (row, col, startLevel) {
            var segMatrix = this.eventRenderer.rowStructs[row].segMatrix;
            var level = startLevel || 0;
            var segs = [];
            var seg;
            while (level < segMatrix.length) {
                seg = segMatrix[level][col];
                if (seg) {
                    segs.push(seg);
                }
                level++;
            }
            return segs;
        };
        return DayGrid;
    }(core.DateComponent));

    var main = core.createPlugin({
        defaultView: 'dayGridMonth',
        views: {
            dayGrid: DayGridView$1,
            dayGridDay: {
                type: 'dayGrid',
                duration: { days: 1 }
            },
            dayGridWeek: {
                type: 'dayGrid',
                duration: { weeks: 1 }
            },
            dayGridMonth: {
                type: 'dayGrid',
                duration: { months: 1 },
                monthMode: true,
                fixedWeekCount: true
            }
        }
    });

    exports.AbstractDayGridView = DayGridView;
    exports.DayBgRow = DayBgRow;
    exports.DayGrid = DayGrid;
    exports.DayGridSlicer = DayGridSlicer;
    exports.DayGridView = DayGridView$1;
    exports.SimpleDayGrid = SimpleDayGrid;
    exports.buildBasicDayTable = buildDayTable;
    exports.default = main;

Object.defineProperty(exports, '__esModule', { value: true });

}));

/*!
FullCalendar Day Grid Plugin v4.3.0
Docs & License: https://fullcalendar.io/
(c) 2019 Adam Shaw
*/
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@fullcalendar/core")):"function"==typeof define&&define.amd?define(["exports","@fullcalendar/core"],t):t((e=e||self).FullCalendarDayGrid={},e.FullCalendar)}(this,function(e,t){"use strict";var r=function(e,t){return(r=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var r in t)t.hasOwnProperty(r)&&(e[r]=t[r])})(e,t)};function n(e,t){function n(){this.constructor=e}r(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}var i=function(){return(i=Object.assign||function(e){for(var t,r=1,n=arguments.length;r'+t.htmlEscape(n)+""),i=''+(t.htmlEscape(d.title||"")||" ")+"",'

'+("rtl"===l.dir?i+" "+y:y+" "+i)+"

"+(u?'

':"")+(f?'

':"")+""},r.prototype.computeEventTimeFormat=function(){return{hour:"numeric",minute:"2-digit",omitZeroMinute:!0,meridiem:"narrow"}},r.prototype.computeDisplayEventEnd=function(){return!1},r}(t.FgEventRenderer),a=function(e){function r(t){var r=e.call(this,t.context)||this;return r.dayGrid=t,r}return n(r,e),r.prototype.attachSegs=function(e,t){var r=this.rowStructs=this.renderSegRows(e);this.dayGrid.rowEls.forEach(function(e,t){e.querySelector(".fc-content-skeleton > table").appendChild(r[t].tbodyEl)}),t||this.dayGrid.removeSegPopover()},r.prototype.detachSegs=function(){for(var e,r=this.rowStructs||[];e=r.pop();)t.removeElement(e.tbodyEl);this.rowStructs=null},r.prototype.renderSegRows=function(e){var t,r,n=[];for(t=this.groupSegRows(e),r=0;r=e.firstCol)return!0;return!1}function c(e,t){return e.leftCol-t.leftCol}var h=function(e){function r(){return null!==e&&e.apply(this,arguments)||this}return n(r,e),r.prototype.attachSegs=function(e,r){var n=r.sourceSeg,i=this.rowStructs=this.renderSegRows(e);this.dayGrid.rowEls.forEach(function(e,r){var o,s,l=t.htmlToElement('

');n&&n.row===r?o=n.el:(o=e.querySelector(".fc-content-skeleton tbody"))||(o=e.querySelector(".fc-content-skeleton table")),s=o.getBoundingClientRect().top-e.getBoundingClientRect().top,l.style.top=s+"px",l.querySelector("table").appendChild(i[r].tbodyEl),e.appendChild(l)})},r}(a),p=function(e){function r(t){var r=e.call(this,t.context)||this;return r.fillSegTag="td",r.dayGrid=t,r}return n(r,e),r.prototype.renderSegs=function(t,r){"bgEvent"===t&&(r=r.filter(function(e){return e.eventRange.def.allDay})),e.prototype.renderSegs.call(this,t,r)},r.prototype.attachSegs=function(e,t){var r,n,i,o=[];for(r=0;r')).getElementsByTagName("tr")[0],d>0&&t.appendToElement(o,new Array(d+1).join('')),r.el.colSpan=c-d,o.appendChild(r.el),c'));var h=s.renderProps.renderIntroHtml();return h&&(s.isRtl?t.appendToElement(o,h):t.prependToElement(o,h)),i},r}(t.FillRenderer),u=function(e){function r(r,n){var i=e.call(this,r,n)||this,o=i.eventRenderer=new f(i),s=i.renderFrame=t.memoizeRendering(i._renderFrame);return i.renderFgEvents=t.memoizeRendering(o.renderSegs.bind(o),o.unrender.bind(o),[s]),i.renderEventSelection=t.memoizeRendering(o.selectByInstanceId.bind(o),o.unselectByInstanceId.bind(o),[i.renderFgEvents]),i.renderEventDrag=t.memoizeRendering(o.hideByHash.bind(o),o.showByHash.bind(o),[s]),i.renderEventResize=t.memoizeRendering(o.hideByHash.bind(o),o.showByHash.bind(o),[s]),r.calendar.registerInteractiveComponent(i,{el:i.el,useEventCenter:!1}),i}return n(r,e),r.prototype.render=function(e){this.renderFrame(e.date),this.renderFgEvents(e.fgSegs),this.renderEventSelection(e.eventSelection),this.renderEventDrag(e.eventDragInstances),this.renderEventResize(e.eventResizeInstances)},r.prototype.destroy=function(){e.prototype.destroy.call(this),this.renderFrame.unrender(),this.calendar.unregisterInteractiveComponent(this)},r.prototype._renderFrame=function(e){var r=this.theme,n=this.dateEnv.format(e,t.createFormatter(this.opt("dayPopoverFormat")));this.el.innerHTML='

'+t.htmlEscape(n)+'

',this.segContainerEl=this.el.querySelector(".fc-event-container")},r.prototype.queryHit=function(e,r,n,i){var o=this.props.date;if(e'),"rtl"===this.context.options.dir&&t.reverse(),""+t.join("")+""},e}();function m(e,r,n,i){var o=n.dateEnv,s=n.theme,l=t.rangeContainsMarker(r.activeRange,e),a=t.getDayClasses(e,r,n);return a.unshift("fc-day",s.getClass("widgetContent")),'"}var y=t.createFormatter({day:"numeric"}),v=t.createFormatter({week:"numeric"}),b=function(e){function r(r,n,i){var o=e.call(this,r,n)||this;o.bottomCoordPadding=0,o.isCellSizesDirty=!1;var s=o.eventRenderer=new a(o),l=o.fillRenderer=new p(o);o.mirrorRenderer=new h(o);var d=o.renderCells=t.memoizeRendering(o._renderCells,o._unrenderCells);return o.renderBusinessHours=t.memoizeRendering(l.renderSegs.bind(l,"businessHours"),l.unrender.bind(l,"businessHours"),[d]),o.renderDateSelection=t.memoizeRendering(l.renderSegs.bind(l,"highlight"),l.unrender.bind(l,"highlight"),[d]),o.renderBgEvents=t.memoizeRendering(l.renderSegs.bind(l,"bgEvent"),l.unrender.bind(l,"bgEvent"),[d]),o.renderFgEvents=t.memoizeRendering(s.renderSegs.bind(s),s.unrender.bind(s),[d]),o.renderEventSelection=t.memoizeRendering(s.selectByInstanceId.bind(s),s.unselectByInstanceId.bind(s),[o.renderFgEvents]),o.renderEventDrag=t.memoizeRendering(o._renderEventDrag,o._unrenderEventDrag,[d]),o.renderEventResize=t.memoizeRendering(o._renderEventResize,o._unrenderEventResize,[d]),o.renderProps=i,o}return n(r,e),r.prototype.render=function(e){var t=e.cells;this.rowCnt=t.length,this.colCnt=t[0].length,this.renderCells(t,e.isRigid),this.renderBusinessHours(e.businessHourSegs),this.renderDateSelection(e.dateSelectionSegs),this.renderBgEvents(e.bgEventSegs),this.renderFgEvents(e.fgEventSegs),this.renderEventSelection(e.eventSelection),this.renderEventDrag(e.eventDrag),this.renderEventResize(e.eventResize),this.segPopoverTile&&this.updateSegPopoverTile()},r.prototype.destroy=function(){e.prototype.destroy.call(this),this.renderCells.unrender()},r.prototype.getCellRange=function(e,r){var n=this.props.cells[e][r].date;return{start:n,end:t.addDays(n,1)}},r.prototype.updateSegPopoverTile=function(e,t){var r=this.props;this.segPopoverTile.receiveProps({date:e||this.segPopoverTile.props.date,fgSegs:t||this.segPopoverTile.props.fgSegs,eventSelection:r.eventSelection,eventDragInstances:r.eventDrag?r.eventDrag.affectedInstances:null,eventResizeInstances:r.eventResize?r.eventResize.affectedInstances:null})},r.prototype._renderCells=function(e,r){var n,i,o=this.view,s=this.dateEnv,l=this.rowCnt,a=this.colCnt,d="";for(n=0;n

'+i.renderHtml({cells:this.props.cells[e],dateProfile:this.props.dateProfile,renderIntroHtml:this.renderProps.renderBgIntroHtml})+'

'+(this.getIsNumbersVisible()?""+this.renderNumberTrHtml(e)+"":"")+"

"},r.prototype.getIsNumbersVisible=function(){return this.getIsDayNumbersVisible()||this.renderProps.cellWeekNumbersVisible||this.renderProps.colWeekNumbersVisible},r.prototype.getIsDayNumbersVisible=function(){return this.rowCnt>1},r.prototype.renderNumberTrHtml=function(e){var t=this.renderProps.renderNumberIntroHtml(e,this);return""+(this.isRtl?"":t)+this.renderNumberCellsHtml(e)+(this.isRtl?t:"")+""},r.prototype.renderNumberCellsHtml=function(e){var t,r,n=[];for(t=0;t",this.renderProps.cellWeekNumbersVisible&&e.getUTCDay()===n&&(s+=t.buildGotoAnchorHtml(i,{date:e,type:"week"},{class:"fc-week-number"},o.format(e,v))),a&&(s+=t.buildGotoAnchorHtml(i,e,{class:"fc-day-number"},o.format(e,y))),s+=""):""},r.prototype.updateSize=function(e){var t=this.fillRenderer,r=this.eventRenderer,n=this.mirrorRenderer;(e||this.isCellSizesDirty||this.view.calendar.isEventsUpdated)&&(this.buildPositionCaches(),this.isCellSizesDirty=!1),t.computeSizes(e),r.computeSizes(e),n.computeSizes(e),t.assignSizes(e),r.assignSizes(e),n.assignSizes(e)},r.prototype.buildPositionCaches=function(){this.buildColPositions(),this.buildRowPositions()},r.prototype.buildColPositions=function(){this.colPositions.build()},r.prototype.buildRowPositions=function(){this.rowPositions.build(),this.rowPositions.bottoms[this.rowCnt-1]+=this.bottomCoordPadding},r.prototype.positionToHit=function(e,t){var r=this.colPositions,n=this.rowPositions,i=r.leftToIndex(e),o=n.topToIndex(t);if(null!=o&&null!=i)return{row:o,col:i,dateSpan:{range:this.getCellRange(o,i),allDay:!0},dayEl:this.getCellEl(o,i),relativeRect:{left:r.lefts[i],right:r.rights[i],top:n.tops[o],bottom:n.bottoms[o]}}},r.prototype.getCellEl=function(e,t){return this.cellEls[e*this.colCnt+t]},r.prototype._renderEventDrag=function(e){e&&(this.eventRenderer.hideByHash(e.affectedInstances),this.fillRenderer.renderSegs("highlight",e.segs))},r.prototype._unrenderEventDrag=function(e){e&&(this.eventRenderer.showByHash(e.affectedInstances),this.fillRenderer.unrender("highlight"))},r.prototype._renderEventResize=function(e){e&&(this.eventRenderer.hideByHash(e.affectedInstances),this.fillRenderer.renderSegs("highlight",e.segs),this.mirrorRenderer.renderSegs(e.segs,{isResizing:!0,sourceSeg:e.sourceSeg}))},r.prototype._unrenderEventResize=function(e){e&&(this.eventRenderer.showByHash(e.affectedInstances),this.fillRenderer.unrender("highlight"),this.mirrorRenderer.unrender(e.segs,{isResizing:!0,sourceSeg:e.sourceSeg}))},r.prototype.removeSegPopover=function(){this.segPopover&&this.segPopover.hide()},r.prototype.limitRows=function(e){var t,r,n=this.eventRenderer.rowStructs||[];for(t=0;ti)return r;return!1},r.prototype.limitRow=function(e,r){var n,i,o,s,l,a,d,c,h,p,u,f,g,m,y,v=this,b=this.colCnt,w=this.isRtl,S=this.eventRenderer.rowStructs[e],C=[],E=0,R=function(n){for(;E"+t.htmlEscape(s.opt("weekLabel"))+"":""},s.renderDayGridNumberIntroHtml=function(e,r){var n=s.dateEnv,i=r.props.cells[e][0].date;return s.colWeekNumbersVisible?'"+t.buildGotoAnchorHtml(s,{date:i,type:"week",forceOff:1===r.colCnt},n.format(i,w))+"":""},s.renderDayGridBgIntroHtml=function(){var e=s.theme;return s.colWeekNumbersVisible?'":""},s.renderDayGridIntroHtml=function(){return s.colWeekNumbersVisible?'":""},s.el.classList.add("fc-dayGrid-view"),s.el.innerHTML=s.renderSkeletonHtml(),s.scroller=new t.ScrollComponent("hidden","auto");var l=s.scroller.el;s.el.querySelector(".fc-body > tr > td").appendChild(l),l.classList.add("fc-day-grid-container");var a,d=t.createElement("div",{className:"fc-day-grid"});return l.appendChild(d),s.opt("weekNumbers")?s.opt("weekNumbersWithinDays")?(a=!0,s.colWeekNumbersVisible=!1):(a=!1,s.colWeekNumbersVisible=!0):(s.colWeekNumbersVisible=!1,a=!1),s.dayGrid=new b(s.context,d,{renderNumberIntroHtml:s.renderDayGridNumberIntroHtml,renderBgIntroHtml:s.renderDayGridBgIntroHtml,renderIntroHtml:s.renderDayGridIntroHtml,colWeekNumbersVisible:s.colWeekNumbersVisible,cellWeekNumbersVisible:a}),s}return n(r,e),r.prototype.destroy=function(){e.prototype.destroy.call(this),this.dayGrid.destroy(),this.scroller.destroy()},r.prototype.renderSkeletonHtml=function(){var e=this.theme;return''+(this.opt("columnHeader")?' ':"")+''},r.prototype.weekNumberStyleAttr=function(){return null!=this.weekNumberWidth?'style="width:'+this.weekNumberWidth+'px"':""},r.prototype.hasRigidRows=function(){var e=this.opt("eventLimit");return e&&"number"!=typeof e},r.prototype.updateSize=function(t,r,n){e.prototype.updateSize.call(this,t,r,n),this.dayGrid.updateSize(t)},r.prototype.updateBaseSize=function(e,r,n){var i,o,s=this.dayGrid,l=this.opt("eventLimit"),a=this.header?this.header.el:null;s.rowEls?(this.colWeekNumbersVisible&&(this.weekNumberWidth=t.matchCellWidths(t.findElements(this.el,".fc-week-number"))),this.scroller.clear(),a&&t.uncompensateScroll(a),s.removeSegPopover(),l&&"number"==typeof l&&s.limitRows(l),i=this.computeScrollerHeight(r),this.setGridHeight(i,n),l&&"number"!=typeof l&&s.limitRows(l),n||(this.scroller.setHeight(i),((o=this.scroller.getScrollbarWidths()).left||o.right)&&(a&&t.compensateScroll(a,o),i=this.computeScrollerHeight(r),this.scroller.setHeight(i)),this.scroller.lockOverflow(o))):n||(i=this.computeScrollerHeight(r),this.scroller.setHeight(i))},r.prototype.computeScrollerHeight=function(e){return e-t.subtractInnerElHeight(this.el,this.scroller.el)},r.prototype.setGridHeight=function(e,r){this.opt("monthMode")?(r&&(e*=this.dayGrid.rowCnt/6),t.distributeHeight(this.dayGrid.rowEls,e,!r)):r?t.undistributeHeight(this.dayGrid.rowEls):t.distributeHeight(this.dayGrid.rowEls,e,!0)},r.prototype.computeDateScroll=function(e){return{top:0}},r.prototype.queryDateScroll=function(){return{top:this.scroller.getScrollTop()}},r.prototype.applyDateScroll=function(e){void 0!==e.top&&this.scroller.setScrollTop(e.top)},r}(t.View);S.prototype.dateProfileGeneratorClass=o;var C=function(e){function t(t,r){var n=e.call(this,t,r.el)||this;return n.slicer=new E,n.dayGrid=r,t.calendar.registerInteractiveComponent(n,{el:n.dayGrid.el}),n}return n(t,e),t.prototype.destroy=function(){e.prototype.destroy.call(this),this.calendar.unregisterInteractiveComponent(this)},t.prototype.render=function(e){var t=this.dayGrid,r=e.dateProfile,n=e.dayTable;t.receiveProps(i({},this.slicer.sliceProps(e,r,e.nextDayThreshold,t,n),{dateProfile:r,cells:n.cells,isRigid:e.isRigid}))},t.prototype.buildPositionCaches=function(){this.dayGrid.buildPositionCaches()},t.prototype.queryHit=function(e,t){var r=this.dayGrid.positionToHit(e,t);if(r)return{component:this.dayGrid,dateSpan:r.dateSpan,dayEl:r.dayEl,rect:{left:r.relativeRect.left,right:r.relativeRect.right,top:r.relativeRect.top,bottom:r.relativeRect.bottom},layer:0}},t}(t.DateComponent),E=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return n(t,e),t.prototype.sliceRange=function(e,t){return t.sliceRange(e)},t}(t.Slicer),R=function(e){function r(r,n,i,o){var s=e.call(this,r,n,i,o)||this;return s.buildDayTable=t.memoize(H),s.opt("columnHeader")&&(s.header=new t.DayHeader(s.context,s.el.querySelector(".fc-head-container"))),s.simpleDayGrid=new C(s.context,s.dayGrid),s}return n(r,e),r.prototype.destroy=function(){e.prototype.destroy.call(this),this.header&&this.header.destroy(),this.simpleDayGrid.destroy()},r.prototype.render=function(t){e.prototype.render.call(this,t);var r=this.props.dateProfile,n=this.dayTable=this.buildDayTable(r,this.dateProfileGenerator);this.header&&this.header.receiveProps({dateProfile:r,dates:n.headerDates,datesRepDistinctDays:1===n.rowCnt,renderIntroHtml:this.renderHeadIntroHtml}),this.simpleDayGrid.receiveProps({dateProfile:r,dayTable:n,businessHours:t.businessHours,dateSelection:t.dateSelection,eventStore:t.eventStore,eventUiBases:t.eventUiBases,eventSelection:t.eventSelection,eventDrag:t.eventDrag,eventResize:t.eventResize,isRigid:this.hasRigidRows(),nextDayThreshold:this.nextDayThreshold})},r}(S);function H(e,r){var n=new t.DaySeries(e.renderRange,r);return new t.DayTable(n,/year|month|week/.test(e.currentRangeUnit))}var D=t.createPlugin({defaultView:"dayGridMonth",views:{dayGrid:R,dayGridDay:{type:"dayGrid",duration:{days:1}},dayGridWeek:{type:"dayGrid",duration:{weeks:1}},dayGridMonth:{type:"dayGrid",duration:{months:1},monthMode:!0,fixedWeekCount:!0}}});e.AbstractDayGridView=S,e.DayBgRow=g,e.DayGrid=b,e.DayGridSlicer=E,e.DayGridView=R,e.SimpleDayGrid=C,e.buildBasicDayTable=H,e.default=D,Object.defineProperty(e,"__esModule",{value:!0})});

/*!
FullCalendar Luxon Plugin v4.3.0
Docs & License: https://fullcalendar.io/
(c) 2019 Adam Shaw
*/

import { DateTime, Duration } from 'luxon';
import { createPlugin, Calendar, NamedTimeZoneImpl } from '@fullcalendar/core';

/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0

THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.

See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
/* global Reflect, Promise */

function __extends(d, b) {
    extendStatics(d, b);
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}

export default main;
export { toDateTime, toDuration };

/*!
FullCalendar Luxon Plugin v4.3.0
Docs & License: https://fullcalendar.io/
(c) 2019 Adam Shaw
*/

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('luxon'), require('@fullcalendar/core')) :
    typeof define === 'function' && define.amd ? define(['exports', 'luxon', '@fullcalendar/core'], factory) :
    (global = global || self, factory(global.FullCalendarLuxon = {}, global.luxon, global.FullCalendar));
}(this, function (exports, luxon, core) { 'use strict';

    /*! *****************************************************************************
    Copyright (c) Microsoft Corporation. All rights reserved.
    Licensed under the Apache License, Version 2.0 (the "License"); you may not use
    this file except in compliance with the License. You may obtain a copy of the
    License at http://www.apache.org/licenses/LICENSE-2.0

    THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
    KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
    WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
    MERCHANTABLITY OR NON-INFRINGEMENT.

    See the Apache Version 2.0 License for specific language governing permissions
    and limitations under the License.
    ***************************************************************************** */
    /* global Reflect, Promise */

    function __extends(d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    }

    exports.default = main;
    exports.toDateTime = toDateTime;
    exports.toDuration = toDuration;

Object.defineProperty(exports, '__esModule', { value: true });

}));

// Generated by dts-bundle v0.7.3-fork.1
// Dependencies for this module:
// ../../../../../luxon
// ../../../../../@fullcalendar/core

declare module '@fullcalendar/luxon' {
    import { DateTime as LuxonDateTime, Duration as LuxonDuration } from 'luxon';
    import { Calendar, Duration } from '@fullcalendar/core';
    export function toDateTime(date: Date, calendar: Calendar): LuxonDateTime;
    export function toDuration(duration: Duration, calendar: Calendar): LuxonDuration;
    const _default: import("@fullcalendar/core").PluginDef;
    export default _default;
}

/*!
FullCalendar Luxon Plugin v4.3.0
Docs & License: https://fullcalendar.io/
(c) 2019 Adam Shaw
*/
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("luxon"),require("@fullcalendar/core")):"function"==typeof define&&define.amd?define(["exports","luxon","@fullcalendar/core"],t):t((e=e||self).FullCalendarLuxon={},e.luxon,e.FullCalendar)}(this,function(e,t,n){"use strict";var o=function(e,t){return(o=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])})(e,t)};var r=function(){return(r=Object.assign||function(e){for(var t,n=1,o=arguments.length;n

/*!
FullCalendar List View Plugin v4.3.0
Docs & License: https://fullcalendar.io/
(c) 2019 Adam Shaw
*/

import { getAllDayHtml, isMultiDayRange, htmlEscape, FgEventRenderer, memoize, memoizeRendering, ScrollComponent, subtractInnerElHeight, sliceEventStore, intersectRanges, htmlToElement, createFormatter, createElement, buildGotoAnchorHtml, View, startOfDay, addDays, createPlugin } from '@fullcalendar/core';

/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0

THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.

See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
/* global Reflect, Promise */

function __extends(d, b) {
    extendStatics(d, b);
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}

var ListEventRenderer = /** @class */ (function (_super) {
    __extends(ListEventRenderer, _super);
    function ListEventRenderer(listView) {
        var _this = _super.call(this, listView.context) || this;
        _this.listView = listView;
        return _this;
    }
    ListEventRenderer.prototype.attachSegs = function (segs) {
        if (!segs.length) {
            this.listView.renderEmptyMessage();
        }
        else {
            this.listView.renderSegList(segs);
        }
    };
    ListEventRenderer.prototype.detachSegs = function () {
    };
    // generates the HTML for a single event row
    ListEventRenderer.prototype.renderSegHtml = function (seg) {
        var _a = this.context, view = _a.view, theme = _a.theme;
        var eventRange = seg.eventRange;
        var eventDef = eventRange.def;
        var eventInstance = eventRange.instance;
        var eventUi = eventRange.ui;
        var url = eventDef.url;
        var classes = ['fc-list-item'].concat(eventUi.classNames);
        var bgColor = eventUi.backgroundColor;
        var timeHtml;
        if (eventDef.allDay) {
            timeHtml = getAllDayHtml(view);
        }
        else if (isMultiDayRange(eventRange.range)) {
            if (seg.isStart) {
                timeHtml = htmlEscape(this._getTimeText(eventInstance.range.start, seg.end, false // allDay
                ));
            }
            else if (seg.isEnd) {
                timeHtml = htmlEscape(this._getTimeText(seg.start, eventInstance.range.end, false // allDay
                ));
            }
            else { // inner segment that lasts the whole day
                timeHtml = getAllDayHtml(view);
            }
        }
        else {
            // Display the normal time text for the *event's* times
            timeHtml = htmlEscape(this.getTimeText(eventRange));
        }
        if (url) {
            classes.push('fc-has-url');
        }
        return '' +
            (this.displayEventTime ?
                '' +
                    (timeHtml || '') +
                    '' :
                '') +
            '' +
            '' +
            '' +
            '' +
            '' +
            htmlEscape(eventDef.title || '') +
            '' +
            '' +
            '';
    };
    // like "4:00am"
    ListEventRenderer.prototype.computeEventTimeFormat = function () {
        return {
            hour: 'numeric',
            minute: '2-digit',
            meridiem: 'short'
        };
    };
    return ListEventRenderer;
}(FgEventRenderer));

/*
Responsible for the scroller, and forwarding event-related actions into the "grid".
*/
var ListView = /** @class */ (function (_super) {
    __extends(ListView, _super);
    function ListView(context, viewSpec, dateProfileGenerator, parentEl) {
        var _this = _super.call(this, context, viewSpec, dateProfileGenerator, parentEl) || this;
        _this.computeDateVars = memoize(computeDateVars);
        _this.eventStoreToSegs = memoize(_this._eventStoreToSegs);
        var eventRenderer = _this.eventRenderer = new ListEventRenderer(_this);
        _this.renderContent = memoizeRendering(eventRenderer.renderSegs.bind(eventRenderer), eventRenderer.unrender.bind(eventRenderer));
        _this.el.classList.add('fc-list-view');
        var listViewClassNames = (_this.theme.getClass('listView') || '').split(' '); // wish we didn't have to do this
        for (var _i = 0, listViewClassNames_1 = listViewClassNames; _i < listViewClassNames_1.length; _i++) {
            var listViewClassName = listViewClassNames_1[_i];
            if (listViewClassName) { // in case input was empty string
                _this.el.classList.add(listViewClassName);
            }
        }
        _this.scroller = new ScrollComponent('hidden', // overflow x
        'auto' // overflow y
        );
        _this.el.appendChild(_this.scroller.el);
        _this.contentEl = _this.scroller.el; // shortcut
        context.calendar.registerInteractiveComponent(_this, {
            el: _this.el
            // TODO: make aware that it doesn't do Hits
        });
        return _this;
    }
    ListView.prototype.render = function (props) {
        var _a = this.computeDateVars(props.dateProfile), dayDates = _a.dayDates, dayRanges = _a.dayRanges;
        this.dayDates = dayDates;
        this.renderContent(this.eventStoreToSegs(props.eventStore, props.eventUiBases, dayRanges));
    };
    ListView.prototype.destroy = function () {
        _super.prototype.destroy.call(this);
        this.renderContent.unrender();
        this.scroller.destroy(); // will remove the Grid too
        this.calendar.unregisterInteractiveComponent(this);
    };
    ListView.prototype.updateSize = function (isResize, viewHeight, isAuto) {
        _super.prototype.updateSize.call(this, isResize, viewHeight, isAuto);
        this.eventRenderer.computeSizes(isResize);
        this.eventRenderer.assignSizes(isResize);
        this.scroller.clear(); // sets height to 'auto' and clears overflow
        if (!isAuto) {
            this.scroller.setHeight(this.computeScrollerHeight(viewHeight));
        }
    };
    ListView.prototype.computeScrollerHeight = function (viewHeight) {
        return viewHeight -
            subtractInnerElHeight(this.el, this.scroller.el); // everything that's NOT the scroller
    };
    ListView.prototype._eventStoreToSegs = function (eventStore, eventUiBases, dayRanges) {
        return this.eventRangesToSegs(sliceEventStore(eventStore, eventUiBases, this.props.dateProfile.activeRange, this.nextDayThreshold).fg, dayRanges);
    };
    ListView.prototype.eventRangesToSegs = function (eventRanges, dayRanges) {
        var segs = [];
        for (var _i = 0, eventRanges_1 = eventRanges; _i < eventRanges_1.length; _i++) {
            var eventRange = eventRanges_1[_i];
            segs.push.apply(segs, this.eventRangeToSegs(eventRange, dayRanges));
        }
        return segs;
    };
    ListView.prototype.eventRangeToSegs = function (eventRange, dayRanges) {
        var _a = this, dateEnv = _a.dateEnv, nextDayThreshold = _a.nextDayThreshold;
        var range = eventRange.range;
        var allDay = eventRange.def.allDay;
        var dayIndex;
        var segRange;
        var seg;
        var segs = [];
        for (dayIndex = 0; dayIndex < dayRanges.length; dayIndex++) {
            segRange = intersectRanges(range, dayRanges[dayIndex]);
            if (segRange) {
                seg = {
                    component: this,
                    eventRange: eventRange,
                    start: segRange.start,
                    end: segRange.end,
                    isStart: eventRange.isStart && segRange.start.valueOf() === range.start.valueOf(),
                    isEnd: eventRange.isEnd && segRange.end.valueOf() === range.end.valueOf(),
                    dayIndex: dayIndex
                };
                segs.push(seg);
                // detect when range won't go fully into the next day,
                // and mutate the latest seg to the be the end.
                if (!seg.isEnd && !allDay &&
                    dayIndex + 1 < dayRanges.length &&
                    range.end <
                        dateEnv.add(dayRanges[dayIndex + 1].start, nextDayThreshold)) {
                    seg.end = range.end;
                    seg.isEnd = true;
                    break;
                }
            }
        }
        return segs;
    };
    ListView.prototype.renderEmptyMessage = function () {
        this.contentEl.innerHTML =
            '

' + // TODO: try less wraps
'

' +
'

' +
htmlEscape(this.opt('noEventsMessage')) +
'

' +
'

';
    };
    // called by ListEventRenderer
    ListView.prototype.renderSegList = function (allSegs) {
        var segsByDay = this.groupSegsByDay(allSegs); // sparse array
        var dayIndex;
        var daySegs;
        var i;
        var tableEl = htmlToElement('');
        var tbodyEl = tableEl.querySelector('tbody');
        for (dayIndex = 0; dayIndex < segsByDay.length; dayIndex++) {
            daySegs = segsByDay[dayIndex];
            if (daySegs) { // sparse array, so might be undefined
                // append a day header
                tbodyEl.appendChild(this.buildDayHeaderRow(this.dayDates[dayIndex]));
                daySegs = this.eventRenderer.sortEventSegs(daySegs);
                for (i = 0; i < daySegs.length; i++) {
                    tbodyEl.appendChild(daySegs[i].el); // append event row
                }
            }
        }
        this.contentEl.innerHTML = '';
        this.contentEl.appendChild(tableEl);
    };
    // Returns a sparse array of arrays, segs grouped by their dayIndex
    ListView.prototype.groupSegsByDay = function (segs) {
        var segsByDay = []; // sparse array
        var i;
        var seg;
        for (i = 0; i < segs.length; i++) {
            seg = segs[i];
            (segsByDay[seg.dayIndex] || (segsByDay[seg.dayIndex] = []))
                .push(seg);
        }
        return segsByDay;
    };
    // generates the HTML for the day headers that live amongst the event rows
    ListView.prototype.buildDayHeaderRow = function (dayDate) {
        var dateEnv = this.dateEnv;
        var mainFormat = createFormatter(this.opt('listDayFormat')); // TODO: cache
        var altFormat = createFormatter(this.opt('listDayAltFormat')); // TODO: cache
        return createElement('tr', {
            className: 'fc-list-heading',
            'data-date': dateEnv.formatIso(dayDate, { omitTime: true })
        }, '' +
            (mainFormat ?
                buildGotoAnchorHtml(this, dayDate, { 'class': 'fc-list-heading-main' }, htmlEscape(dateEnv.format(dayDate, mainFormat)) // inner HTML
                ) :
                '') +
            (altFormat ?
                buildGotoAnchorHtml(this, dayDate, { 'class': 'fc-list-heading-alt' }, htmlEscape(dateEnv.format(dayDate, altFormat)) // inner HTML
                ) :
                '') +
            '');
    };
    return ListView;
}(View));
ListView.prototype.fgSegSelector = '.fc-list-item'; // which elements accept event actions
function computeDateVars(dateProfile) {
    var dayStart = startOfDay(dateProfile.renderRange.start);
    var viewEnd = dateProfile.renderRange.end;
    var dayDates = [];
    var dayRanges = [];
    while (dayStart < viewEnd) {
        dayDates.push(dayStart);
        dayRanges.push({
            start: dayStart,
            end: addDays(dayStart, 1)
        });
        dayStart = addDays(dayStart, 1);
    }
    return { dayDates: dayDates, dayRanges: dayRanges };
}

var main = createPlugin({
    views: {
        list: {
            class: ListView,
            buttonTextKey: 'list',
            listDayFormat: { month: 'long', day: 'numeric', year: 'numeric' } // like "January 1, 2016"
        },
        listDay: {
            type: 'list',
            duration: { days: 1 },
            listDayFormat: { weekday: 'long' } // day-of-week is all we need. full date is probably in header
        },
        listWeek: {
            type: 'list',
            duration: { weeks: 1 },
            listDayFormat: { weekday: 'long' },
            listDayAltFormat: { month: 'long', day: 'numeric', year: 'numeric' }
        },
        listMonth: {
            type: 'list',
            duration: { month: 1 },
            listDayAltFormat: { weekday: 'long' } // day-of-week is nice-to-have
        },
        listYear: {
            type: 'list',
            duration: { year: 1 },
            listDayAltFormat: { weekday: 'long' } // day-of-week is nice-to-have
        }
    }
});

export default main;
export { ListView };

/*!
FullCalendar List View Plugin v4.3.0
Docs & License: https://fullcalendar.io/
(c) 2019 Adam Shaw
*/

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@fullcalendar/core')) :
    typeof define === 'function' && define.amd ? define(['exports', '@fullcalendar/core'], factory) :
    (global = global || self, factory(global.FullCalendarList = {}, global.FullCalendar));
}(this, function (exports, core) { 'use strict';

    /*! *****************************************************************************
    Copyright (c) Microsoft Corporation. All rights reserved.
    Licensed under the Apache License, Version 2.0 (the "License"); you may not use
    this file except in compliance with the License. You may obtain a copy of the
    License at http://www.apache.org/licenses/LICENSE-2.0

    THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
    KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
    WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
    MERCHANTABLITY OR NON-INFRINGEMENT.

    See the Apache Version 2.0 License for specific language governing permissions
    and limitations under the License.
    ***************************************************************************** */
    /* global Reflect, Promise */

    function __extends(d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    }

    var ListEventRenderer = /** @class */ (function (_super) {
        __extends(ListEventRenderer, _super);
        function ListEventRenderer(listView) {
            var _this = _super.call(this, listView.context) || this;
            _this.listView = listView;
            return _this;
        }
        ListEventRenderer.prototype.attachSegs = function (segs) {
            if (!segs.length) {
                this.listView.renderEmptyMessage();
            }
            else {
                this.listView.renderSegList(segs);
            }
        };
        ListEventRenderer.prototype.detachSegs = function () {
        };
        // generates the HTML for a single event row
        ListEventRenderer.prototype.renderSegHtml = function (seg) {
            var _a = this.context, view = _a.view, theme = _a.theme;
            var eventRange = seg.eventRange;
            var eventDef = eventRange.def;
            var eventInstance = eventRange.instance;
            var eventUi = eventRange.ui;
            var url = eventDef.url;
            var classes = ['fc-list-item'].concat(eventUi.classNames);
            var bgColor = eventUi.backgroundColor;
            var timeHtml;
            if (eventDef.allDay) {
                timeHtml = core.getAllDayHtml(view);
            }
            else if (core.isMultiDayRange(eventRange.range)) {
                if (seg.isStart) {
                    timeHtml = core.htmlEscape(this._getTimeText(eventInstance.range.start, seg.end, false // allDay
                    ));
                }
                else if (seg.isEnd) {
                    timeHtml = core.htmlEscape(this._getTimeText(seg.start, eventInstance.range.end, false // allDay
                    ));
                }
                else { // inner segment that lasts the whole day
                    timeHtml = core.getAllDayHtml(view);
                }
            }
            else {
                // Display the normal time text for the *event's* times
                timeHtml = core.htmlEscape(this.getTimeText(eventRange));
            }
            if (url) {
                classes.push('fc-has-url');
            }
            return '' +
                (this.displayEventTime ?
                    '' +
                        (timeHtml || '') +
                        '' :
                    '') +
                '' +
                '' +
                '' +
                '' +
                '' +
                core.htmlEscape(eventDef.title || '') +
                '' +
                '' +
                '';
        };
        // like "4:00am"
        ListEventRenderer.prototype.computeEventTimeFormat = function () {
            return {
                hour: 'numeric',
                minute: '2-digit',
                meridiem: 'short'
            };
        };
        return ListEventRenderer;
    }(core.FgEventRenderer));

    /*
    Responsible for the scroller, and forwarding event-related actions into the "grid".
    */
    var ListView = /** @class */ (function (_super) {
        __extends(ListView, _super);
        function ListView(context, viewSpec, dateProfileGenerator, parentEl) {
            var _this = _super.call(this, context, viewSpec, dateProfileGenerator, parentEl) || this;
            _this.computeDateVars = core.memoize(computeDateVars);
            _this.eventStoreToSegs = core.memoize(_this._eventStoreToSegs);
            var eventRenderer = _this.eventRenderer = new ListEventRenderer(_this);
            _this.renderContent = core.memoizeRendering(eventRenderer.renderSegs.bind(eventRenderer), eventRenderer.unrender.bind(eventRenderer));
            _this.el.classList.add('fc-list-view');
            var listViewClassNames = (_this.theme.getClass('listView') || '').split(' '); // wish we didn't have to do this
            for (var _i = 0, listViewClassNames_1 = listViewClassNames; _i < listViewClassNames_1.length; _i++) {
                var listViewClassName = listViewClassNames_1[_i];
                if (listViewClassName) { // in case input was empty string
                    _this.el.classList.add(listViewClassName);
                }
            }
            _this.scroller = new core.ScrollComponent('hidden', // overflow x
            'auto' // overflow y
            );
            _this.el.appendChild(_this.scroller.el);
            _this.contentEl = _this.scroller.el; // shortcut
            context.calendar.registerInteractiveComponent(_this, {
                el: _this.el
                // TODO: make aware that it doesn't do Hits
            });
            return _this;
        }
        ListView.prototype.render = function (props) {
            var _a = this.computeDateVars(props.dateProfile), dayDates = _a.dayDates, dayRanges = _a.dayRanges;
            this.dayDates = dayDates;
            this.renderContent(this.eventStoreToSegs(props.eventStore, props.eventUiBases, dayRanges));
        };
        ListView.prototype.destroy = function () {
            _super.prototype.destroy.call(this);
            this.renderContent.unrender();
            this.scroller.destroy(); // will remove the Grid too
            this.calendar.unregisterInteractiveComponent(this);
        };
        ListView.prototype.updateSize = function (isResize, viewHeight, isAuto) {
            _super.prototype.updateSize.call(this, isResize, viewHeight, isAuto);
            this.eventRenderer.computeSizes(isResize);
            this.eventRenderer.assignSizes(isResize);
            this.scroller.clear(); // sets height to 'auto' and clears overflow
            if (!isAuto) {
                this.scroller.setHeight(this.computeScrollerHeight(viewHeight));
            }
        };
        ListView.prototype.computeScrollerHeight = function (viewHeight) {
            return viewHeight -
                core.subtractInnerElHeight(this.el, this.scroller.el); // everything that's NOT the scroller
        };
        ListView.prototype._eventStoreToSegs = function (eventStore, eventUiBases, dayRanges) {
            return this.eventRangesToSegs(core.sliceEventStore(eventStore, eventUiBases, this.props.dateProfile.activeRange, this.nextDayThreshold).fg, dayRanges);
        };
        ListView.prototype.eventRangesToSegs = function (eventRanges, dayRanges) {
            var segs = [];
            for (var _i = 0, eventRanges_1 = eventRanges; _i < eventRanges_1.length; _i++) {
                var eventRange = eventRanges_1[_i];
                segs.push.apply(segs, this.eventRangeToSegs(eventRange, dayRanges));
            }
            return segs;
        };
        ListView.prototype.eventRangeToSegs = function (eventRange, dayRanges) {
            var _a = this, dateEnv = _a.dateEnv, nextDayThreshold = _a.nextDayThreshold;
            var range = eventRange.range;
            var allDay = eventRange.def.allDay;
            var dayIndex;
            var segRange;
            var seg;
            var segs = [];
            for (dayIndex = 0; dayIndex < dayRanges.length; dayIndex++) {
                segRange = core.intersectRanges(range, dayRanges[dayIndex]);
                if (segRange) {
                    seg = {
                        component: this,
                        eventRange: eventRange,
                        start: segRange.start,
                        end: segRange.end,
                        isStart: eventRange.isStart && segRange.start.valueOf() === range.start.valueOf(),
                        isEnd: eventRange.isEnd && segRange.end.valueOf() === range.end.valueOf(),
                        dayIndex: dayIndex
                    };
                    segs.push(seg);
                    // detect when range won't go fully into the next day,
                    // and mutate the latest seg to the be the end.
                    if (!seg.isEnd && !allDay &&
                        dayIndex + 1 < dayRanges.length &&
                        range.end <
                            dateEnv.add(dayRanges[dayIndex + 1].start, nextDayThreshold)) {
                        seg.end = range.end;
                        seg.isEnd = true;
                        break;
                    }
                }
            }
            return segs;
        };
        ListView.prototype.renderEmptyMessage = function () {
            this.contentEl.innerHTML =
                '

' + // TODO: try less wraps
'

' +
'

' +
core.htmlEscape(this.opt('noEventsMessage')) +
'

' +
'

';
        };
        // called by ListEventRenderer
        ListView.prototype.renderSegList = function (allSegs) {
            var segsByDay = this.groupSegsByDay(allSegs); // sparse array
            var dayIndex;
            var daySegs;
            var i;
            var tableEl = core.htmlToElement('');
            var tbodyEl = tableEl.querySelector('tbody');
            for (dayIndex = 0; dayIndex < segsByDay.length; dayIndex++) {
                daySegs = segsByDay[dayIndex];
                if (daySegs) { // sparse array, so might be undefined
                    // append a day header
                    tbodyEl.appendChild(this.buildDayHeaderRow(this.dayDates[dayIndex]));
                    daySegs = this.eventRenderer.sortEventSegs(daySegs);
                    for (i = 0; i < daySegs.length; i++) {
                        tbodyEl.appendChild(daySegs[i].el); // append event row
                    }
                }
            }
            this.contentEl.innerHTML = '';
            this.contentEl.appendChild(tableEl);
        };
        // Returns a sparse array of arrays, segs grouped by their dayIndex
        ListView.prototype.groupSegsByDay = function (segs) {
            var segsByDay = []; // sparse array
            var i;
            var seg;
            for (i = 0; i < segs.length; i++) {
                seg = segs[i];
                (segsByDay[seg.dayIndex] || (segsByDay[seg.dayIndex] = []))
                    .push(seg);
            }
            return segsByDay;
        };
        // generates the HTML for the day headers that live amongst the event rows
        ListView.prototype.buildDayHeaderRow = function (dayDate) {
            var dateEnv = this.dateEnv;
            var mainFormat = core.createFormatter(this.opt('listDayFormat')); // TODO: cache
            var altFormat = core.createFormatter(this.opt('listDayAltFormat')); // TODO: cache
            return core.createElement('tr', {
                className: 'fc-list-heading',
                'data-date': dateEnv.formatIso(dayDate, { omitTime: true })
            }, '' +
                (mainFormat ?
                    core.buildGotoAnchorHtml(this, dayDate, { 'class': 'fc-list-heading-main' }, core.htmlEscape(dateEnv.format(dayDate, mainFormat)) // inner HTML
                    ) :
                    '') +
                (altFormat ?
                    core.buildGotoAnchorHtml(this, dayDate, { 'class': 'fc-list-heading-alt' }, core.htmlEscape(dateEnv.format(dayDate, altFormat)) // inner HTML
                    ) :
                    '') +
                '');
        };
        return ListView;
    }(core.View));
    ListView.prototype.fgSegSelector = '.fc-list-item'; // which elements accept event actions
    function computeDateVars(dateProfile) {
        var dayStart = core.startOfDay(dateProfile.renderRange.start);
        var viewEnd = dateProfile.renderRange.end;
        var dayDates = [];
        var dayRanges = [];
        while (dayStart < viewEnd) {
            dayDates.push(dayStart);
            dayRanges.push({
                start: dayStart,
                end: core.addDays(dayStart, 1)
            });
            dayStart = core.addDays(dayStart, 1);
        }
        return { dayDates: dayDates, dayRanges: dayRanges };
    }

    var main = core.createPlugin({
        views: {
            list: {
                class: ListView,
                buttonTextKey: 'list',
                listDayFormat: { month: 'long', day: 'numeric', year: 'numeric' } // like "January 1, 2016"
            },
            listDay: {
                type: 'list',
                duration: { days: 1 },
                listDayFormat: { weekday: 'long' } // day-of-week is all we need. full date is probably in header
            },
            listWeek: {
                type: 'list',
                duration: { weeks: 1 },
                listDayFormat: { weekday: 'long' },
                listDayAltFormat: { month: 'long', day: 'numeric', year: 'numeric' }
            },
            listMonth: {
                type: 'list',
                duration: { month: 1 },
                listDayAltFormat: { weekday: 'long' } // day-of-week is nice-to-have
            },
            listYear: {
                type: 'list',
                duration: { year: 1 },
                listDayAltFormat: { weekday: 'long' } // day-of-week is nice-to-have
            }
        }
    });

exports.ListView = ListView;
exports.default = main;

Object.defineProperty(exports, '__esModule', { value: true });

}));

// Generated by dts-bundle v0.7.3-fork.1
// Dependencies for this module:
// ../../../../../@fullcalendar/core

declare module '@fullcalendar/list' {
    import ListView from '@fullcalendar/list/ListView';
    export { ListView };
    const _default: import("@fullcalendar/core").PluginDef;
    export default _default;
}

declare module '@fullcalendar/list/ListView' {
    import { View, ViewProps, ScrollComponent, DateMarker, DateRange, DateProfileGenerator, ComponentContext, ViewSpec, EventUiHash, EventRenderRange, EventStore, Seg } from '@fullcalendar/core';
    export { ListView as default, ListView };
    class ListView extends View {
        scroller: ScrollComponent;
        contentEl: HTMLElement;
        dayDates: DateMarker[];
        constructor(context: ComponentContext, viewSpec: ViewSpec, dateProfileGenerator: DateProfileGenerator, parentEl: HTMLElement);
        render(props: ViewProps): void;
        destroy(): void;
        updateSize(isResize: any, viewHeight: any, isAuto: any): void;
        computeScrollerHeight(viewHeight: any): number;
        _eventStoreToSegs(eventStore: EventStore, eventUiBases: EventUiHash, dayRanges: DateRange[]): Seg[];
        eventRangesToSegs(eventRanges: EventRenderRange[], dayRanges: DateRange[]): any[];
        eventRangeToSegs(eventRange: EventRenderRange, dayRanges: DateRange[]): any[];
        renderEmptyMessage(): void;
        renderSegList(allSegs: any): void;
        groupSegsByDay(segs: any): any[];
        buildDayHeaderRow(dayDate: any): HTMLTableRowElement;
    }
}

/*!
FullCalendar List View Plugin v4.3.0
Docs & License: https://fullcalendar.io/
(c) 2019 Adam Shaw
*/
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@fullcalendar/core")):"function"==typeof define&&define.amd?define(["exports","@fullcalendar/core"],t):t((e=e||self).FullCalendarList={},e.FullCalendar)}(this,function(e,t){"use strict";var n=function(e,t){return(n=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])})(e,t)};function r(e,t){function r(){this.constructor=e}n(e,t),e.prototype=null===t?Object.create(t):(r.prototype=t.prototype,new r)}var s=function(e){function n(t){var n=e.call(this,t.context)||this;return n.listView=t,n}return r(n,e),n.prototype.attachSegs=function(e){e.length?this.listView.renderSegList(e):this.listView.renderEmptyMessage()},n.prototype.detachSegs=function(){},n.prototype.renderSegHtml=function(e){var n,r=this.context,s=r.view,a=r.theme,i=e.eventRange,o=i.def,l=i.instance,d=i.ui,c=o.url,p=["fc-list-item"].concat(d.classNames),h=d.backgroundColor;return n=o.allDay?t.getAllDayHtml(s):t.isMultiDayRange(i.range)?e.isStart?t.htmlEscape(this._getTimeText(l.range.start,e.end,!1)):e.isEnd?t.htmlEscape(this._getTimeText(e.start,l.range.end,!1)):t.getAllDayHtml(s):t.htmlEscape(this.getTimeText(i)),c&&p.push("fc-has-url"),''+(this.displayEventTime?''+(n||"")+"":"")+'"+t.htmlEscape(o.title||"")+""},n.prototype.computeEventTimeFormat=function(){return{hour:"numeric",minute:"2-digit",meridiem:"short"}},n}(t.FgEventRenderer),a=function(e){function n(n,r,a,o){var l=e.call(this,n,r,a,o)||this;l.computeDateVars=t.memoize(i),l.eventStoreToSegs=t.memoize(l._eventStoreToSegs);var d=l.eventRenderer=new s(l);l.renderContent=t.memoizeRendering(d.renderSegs.bind(d),d.unrender.bind(d)),l.el.classList.add("fc-list-view");for(var c=0,p=(l.theme.getClass("listView")||"").split(" ");c

'+t.htmlEscape(this.opt("noEventsMessage"))+"

"},n.prototype.renderSegList=function(e){var n,r,s,a=this.groupSegsByDay(e),i=t.htmlToElement(''),o=i.querySelector("tbody");for(n=0;n'+(r?t.buildGotoAnchorHtml(this,e,{class:"fc-list-heading-main"},t.htmlEscape(n.format(e,r))):"")+(s?t.buildGotoAnchorHtml(this,e,{class:"fc-list-heading-alt"},t.htmlEscape(n.format(e,s))):"")+"")},n}(t.View);function i(e){for(var n=t.startOfDay(e.renderRange.start),r=e.renderRange.end,s=[],a=[];n

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
    typeof define === 'function' && define.amd ? define(factory) :
    (global = global || self, global.FullCalendarLocalesAll = factory());
}(this, function () { 'use strict';

    var _m0 = {
        code: "af",
        week: {
            dow: 1,
            doy: 4 // Die week wat die 4de Januarie bevat is die eerste week van die jaar.
        },
        buttonText: {
            prev: "Vorige",
            next: "Volgende",
            today: "Vandag",
            year: "Jaar",
            month: "Maand",
            week: "Week",
            day: "Dag",
            list: "Agenda"
        },
        allDayHtml: "Heeldag",
        eventLimitText: "Addisionele",
        noEventsMessage: "Daar is geen gebeurtenisse nie"
    };

    var _m1 = {
        code: "ar-dz",
        week: {
            dow: 0,
            doy: 4 // The week that contains Jan 1st is the first week of the year.
        },
        dir: 'rtl',
        buttonText: {
            prev: "السابق",
            next: "التالي",
            today: "اليوم",
            month: "شهر",
            week: "أسبوع",
            day: "يوم",
            list: "أجندة"
        },
        weekLabel: "أسبوع",
        allDayText: "اليوم كله",
        eventLimitText: "أخرى",
        noEventsMessage: "أي أحداث لعرض"
    };

    var _m2 = {
        code: "ar-kw",
        week: {
            dow: 0,
            doy: 12 // The week that contains Jan 1st is the first week of the year.
        },
        dir: 'rtl',
        buttonText: {
            prev: "السابق",
            next: "التالي",
            today: "اليوم",
            month: "شهر",
            week: "أسبوع",
            day: "يوم",
            list: "أجندة"
        },
        weekLabel: "أسبوع",
        allDayText: "اليوم كله",
        eventLimitText: "أخرى",
        noEventsMessage: "أي أحداث لعرض"
    };

    var _m3 = {
        code: "ar-ly",
        week: {
            dow: 6,
            doy: 12 // The week that contains Jan 1st is the first week of the year.
        },
        dir: 'rtl',
        buttonText: {
            prev: "السابق",
            next: "التالي",
            today: "اليوم",
            month: "شهر",
            week: "أسبوع",
            day: "يوم",
            list: "أجندة"
        },
        weekLabel: "أسبوع",
        allDayText: "اليوم كله",
        eventLimitText: "أخرى",
        noEventsMessage: "أي أحداث لعرض"
    };

    var _m4 = {
        code: "ar-ma",
        week: {
            dow: 6,
            doy: 12 // The week that contains Jan 1st is the first week of the year.
        },
        dir: 'rtl',
        buttonText: {
            prev: "السابق",
            next: "التالي",
            today: "اليوم",
            month: "شهر",
            week: "أسبوع",
            day: "يوم",
            list: "أجندة"
        },
        weekLabel: "أسبوع",
        allDayText: "اليوم كله",
        eventLimitText: "أخرى",
        noEventsMessage: "أي أحداث لعرض"
    };

    var _m5 = {
        code: "ar-sa",
        week: {
            dow: 0,
            doy: 6 // The week that contains Jan 1st is the first week of the year.
        },
        dir: 'rtl',
        buttonText: {
            prev: "السابق",
            next: "التالي",
            today: "اليوم",
            month: "شهر",
            week: "أسبوع",
            day: "يوم",
            list: "أجندة"
        },
        weekLabel: "أسبوع",
        allDayText: "اليوم كله",
        eventLimitText: "أخرى",
        noEventsMessage: "أي أحداث لعرض"
    };

    var _m6 = {
        code: "ar-tn",
        week: {
            dow: 1,
            doy: 4 // The week that contains Jan 4th is the first week of the year.
        },
        dir: 'rtl',
        buttonText: {
            prev: "السابق",
            next: "التالي",
            today: "اليوم",
            month: "شهر",
            week: "أسبوع",
            day: "يوم",
            list: "أجندة"
        },
        weekLabel: "أسبوع",
        allDayText: "اليوم كله",
        eventLimitText: "أخرى",
        noEventsMessage: "أي أحداث لعرض"
    };

    var _m7 = {
        code: "ar",
        week: {
            dow: 6,
            doy: 12 // The week that contains Jan 1st is the first week of the year.
        },
        dir: 'rtl',
        buttonText: {
            prev: "السابق",
            next: "التالي",
            today: "اليوم",
            month: "شهر",
            week: "أسبوع",
            day: "يوم",
            list: "أجندة"
        },
        weekLabel: "أسبوع",
        allDayText: "اليوم كله",
        eventLimitText: "أخرى",
        noEventsMessage: "أي أحداث لعرض"
    };

    var _m8 = {
        code: "bg",
        week: {
            dow: 1,
            doy: 7 // The week that contains Jan 1st is the first week of the year.
        },
        buttonText: {
            prev: "назад",
            next: "напред",
            today: "днес",
            month: "Месец",
            week: "Седмица",
            day: "Ден",
            list: "График"
        },
        allDayText: "Цял ден",
        eventLimitText: function (n) {
            return "+още " + n;
        },
        noEventsMessage: "Няма събития за показване"
    };

    var _m9 = {
        code: "bs",
        week: {
            dow: 1,
            doy: 7 // The week that contains Jan 1st is the first week of the year.
        },
        buttonText: {
            prev: "Prošli",
            next: "Sljedeći",
            today: "Danas",
            month: "Mjesec",
            week: "Sedmica",
            day: "Dan",
            list: "Raspored"
        },
        weekLabel: "Sed",
        allDayText: "Cijeli dan",
        eventLimitText: function (n) {
            return "+ još " + n;
        },
        noEventsMessage: "Nema događaja za prikazivanje"
    };

    var _m10 = {
        code: "ca",
        week: {
            dow: 1,
            doy: 4 // The week that contains Jan 4th is the first week of the year.
        },
        buttonText: {
            prev: "Anterior",
            next: "Següent",
            today: "Avui",
            month: "Mes",
            week: "Setmana",
            day: "Dia",
            list: "Agenda"
        },
        weekLabel: "Set",
        allDayText: "Tot el dia",
        eventLimitText: "més",
        noEventsMessage: "No hi ha esdeveniments per mostrar"
    };

    var _m11 = {
        code: "cs",
        week: {
            dow: 1,
            doy: 4 // The week that contains Jan 4th is the first week of the year.
        },
        buttonText: {
            prev: "Dříve",
            next: "Později",
            today: "Nyní",
            month: "Měsíc",
            week: "Týden",
            day: "Den",
            list: "Agenda"
        },
        weekLabel: "Týd",
        allDayText: "Celý den",
        eventLimitText: function (n) {
            return "+další: " + n;
        },
        noEventsMessage: "Žádné akce k zobrazení"
    };

    var _m12 = {
        code: "da",
        week: {
            dow: 1,
            doy: 4 // The week that contains Jan 4th is the first week of the year.
        },
        buttonText: {
            prev: "Forrige",
            next: "Næste",
            today: "I dag",
            month: "Måned",
            week: "Uge",
            day: "Dag",
            list: "Agenda"
        },
        weekLabel: "Uge",
        allDayText: "Hele dagen",
        eventLimitText: "flere",
        noEventsMessage: "Ingen arrangementer at vise"
    };

    var _m13 = {
        code: "de",
        week: {
            dow: 1,
            doy: 4 // The week that contains Jan 4th is the first week of the year.
        },
        buttonText: {
            prev: "Zurück",
            next: "Vor",
            today: "Heute",
            year: "Jahr",
            month: "Monat",
            week: "Woche",
            day: "Tag",
            list: "Terminübersicht"
        },
        weekLabel: "KW",
        allDayText: "Ganztägig",
        eventLimitText: function (n) {
            return "+ weitere " + n;
        },
        noEventsMessage: "Keine Ereignisse anzuzeigen"
    };

    var _m14 = {
        code: "el",
        week: {
            dow: 1,
            doy: 4 // The week that contains Jan 4st is the first week of the year.
        },
        buttonText: {
            prev: "Προηγούμενος",
            next: "Επόμενος",
            today: "Σήμερα",
            month: "Μήνας",
            week: "Εβδομάδα",
            day: "Ημέρα",
            list: "Ατζέντα"
        },
        weekLabel: "Εβδ",
        allDayText: "Ολοήμερο",
        eventLimitText: "περισσότερα",
        noEventsMessage: "Δεν υπάρχουν γεγονότα για να εμφανιστεί"
    };

    var _m15 = {
        code: "en-au",
        week: {
            dow: 1,
            doy: 4 // The week that contains Jan 4th is the first week of the year.
        }
    };

    var _m16 = {
        code: "en-gb",
        week: {
            dow: 1,
            doy: 4 // The week that contains Jan 4th is the first week of the year.
        }
    };

    var _m17 = {
        code: "en-nz",
        week: {
            dow: 1,
            doy: 4 // The week that contains Jan 4th is the first week of the year.
        }
    };

    var _m18 = {
        code: "es",
        week: {
            dow: 0,
            doy: 6 // The week that contains Jan 1st is the first week of the year.
        },
        buttonText: {
            prev: "Ant",
            next: "Sig",
            today: "Hoy",
            month: "Mes",
            week: "Semana",
            day: "Día",
            list: "Agenda"
        },
        weekLabel: "Sm",
        allDayHtml: "Todo
el día",
        eventLimitText: "más",
        noEventsMessage: "No hay eventos para mostrar"
    };

    var _m19 = {
        code: "es",
        week: {
            dow: 1,
            doy: 4 // The week that contains Jan 4th is the first week of the year.
        },
        buttonText: {
            prev: "Ant",
            next: "Sig",
            today: "Hoy",
            month: "Mes",
            week: "Semana",
            day: "Día",
            list: "Agenda"
        },
        weekLabel: "Sm",
        allDayHtml: "Todo
el día",
        eventLimitText: "más",
        noEventsMessage: "No hay eventos para mostrar"
    };

    var _m20 = {
        code: "et",
        week: {
            dow: 1,
            doy: 4 // The week that contains Jan 4th is the first week of the year.
        },
        buttonText: {
            prev: "Eelnev",
            next: "Järgnev",
            today: "Täna",
            month: "Kuu",
            week: "Nädal",
            day: "Päev",
            list: "Päevakord"
        },
        weekLabel: "näd",
        allDayText: "Kogu päev",
        eventLimitText: function (n) {
            return "+ veel " + n;
        },
        noEventsMessage: "Kuvamiseks puuduvad sündmused"
    };

    var _m21 = {
        code: "eu",
        week: {
            dow: 1,
            doy: 7 // The week that contains Jan 1st is the first week of the year.
        },
        buttonText: {
            prev: "Aur",
            next: "Hur",
            today: "Gaur",
            month: "Hilabetea",
            week: "Astea",
            day: "Eguna",
            list: "Agenda"
        },
        weekLabel: "As",
        allDayHtml: "Egun
osoa",
        eventLimitText: "gehiago",
        noEventsMessage: "Ez dago ekitaldirik erakusteko"
    };

    var _m22 = {
        code: "fa",
        week: {
            dow: 6,
            doy: 12 // The week that contains Jan 1st is the first week of the year.
        },
        dir: 'rtl',
        buttonText: {
            prev: "قبلی",
            next: "بعدی",
            today: "امروز",
            month: "ماه",
            week: "هفته",
            day: "روز",
            list: "برنامه"
        },
        weekLabel: "هف",
        allDayText: "تمام روز",
        eventLimitText: function (n) {
            return "بیش از " + n;
        },
        noEventsMessage: "هیچ رویدادی به نمایش"
    };

    var _m23 = {
        code: "fi",
        week: {
            dow: 1,
            doy: 4 // The week that contains Jan 4th is the first week of the year.
        },
        buttonText: {
            prev: "Edellinen",
            next: "Seuraava",
            today: "Tänään",
            month: "Kuukausi",
            week: "Viikko",
            day: "Päivä",
            list: "Tapahtumat"
        },
        weekLabel: "Vk",
        allDayText: "Koko päivä",
        eventLimitText: "lisää",
        noEventsMessage: "Ei näytettäviä tapahtumia"
    };

    var _m24 = {
        code: "fr",
        buttonText: {
            prev: "Précédent",
            next: "Suivant",
            today: "Aujourd'hui",
            year: "Année",
            month: "Mois",
            week: "Semaine",
            day: "Jour",
            list: "Mon planning"
        },
        weekLabel: "Sem.",
        allDayHtml: "Toute la
journée",
        eventLimitText: "en plus",
        noEventsMessage: "Aucun événement à afficher"
    };

    var _m25 = {
        code: "fr-ch",
        week: {
            dow: 1,
            doy: 4 // The week that contains Jan 4th is the first week of the year.
        },
        buttonText: {
            prev: "Précédent",
            next: "Suivant",
            today: "Courant",
            year: "Année",
            month: "Mois",
            week: "Semaine",
            day: "Jour",
            list: "Mon planning"
        },
        weekLabel: "Sm",
        allDayHtml: "Toute la
journée",
        eventLimitText: "en plus",
        noEventsMessage: "Aucun événement à afficher"
    };

    var _m26 = {
        code: "fr",
        week: {
            dow: 1,
            doy: 4 // The week that contains Jan 4th is the first week of the year.
        },
        buttonText: {
            prev: "Précédent",
            next: "Suivant",
            today: "Aujourd'hui",
            year: "Année",
            month: "Mois",
            week: "Semaine",
            day: "Jour",
            list: "Mon planning"
        },
        weekLabel: "Sem.",
        allDayHtml: "Toute la
journée",
        eventLimitText: "en plus",
        noEventsMessage: "Aucun événement à afficher"
    };

    var _m27 = {
        code: "gl",
        week: {
            dow: 1,
            doy: 4 // The week that contains Jan 4th is the first week of the year.
        },
        buttonText: {
            prev: "Ant",
            next: "Seg",
            today: "Hoxe",
            month: "Mes",
            week: "Semana",
            day: "Día",
            list: "Axenda"
        },
        weekLabel: "Sm",
        allDayHtml: "Todo
o día",
        eventLimitText: "máis",
        noEventsMessage: "Non hai eventos para amosar"
    };

    var _m28 = {
        code: "he",
        dir: 'rtl',
        buttonText: {
            prev: "הקודם",
            next: "הבא",
            today: "היום",
            month: "חודש",
            week: "שבוע",
            day: "יום",
            list: "סדר יום"
        },
        allDayText: "כל היום",
        eventLimitText: "אחר",
        noEventsMessage: "אין אירועים להצגה",
        weekLabel: "שבוע"
    };

    var _m29 = {
        code: "hi",
        week: {
            dow: 0,
            doy: 6 // The week that contains Jan 1st is the first week of the year.
        },
        buttonText: {
            prev: "पिछला",
            next: "अगला",
            today: "आज",
            month: "महीना",
            week: "सप्ताह",
            day: "दिन",
            list: "कार्यसूची"
        },
        weekLabel: "हफ्ता",
        allDayText: "सभी दिन",
        eventLimitText: function (n) {
            return "+अधिक " + n;
        },
        noEventsMessage: "कोई घटनाओं को प्रदर्शित करने के लिए"
    };

    var _m30 = {
        code: "hr",
        week: {
            dow: 1,
            doy: 7 // The week that contains Jan 1st is the first week of the year.
        },
        buttonText: {
            prev: "Prijašnji",
            next: "Sljedeći",
            today: "Danas",
            month: "Mjesec",
            week: "Tjedan",
            day: "Dan",
            list: "Raspored"
        },
        weekLabel: "Tje",
        allDayText: "Cijeli dan",
        eventLimitText: function (n) {
            return "+ još " + n;
        },
        noEventsMessage: "Nema događaja za prikaz"
    };

    var _m31 = {
        code: "hu",
        week: {
            dow: 1,
            doy: 4 // The week that contains Jan 4th is the first week of the year.
        },
        buttonText: {
            prev: "vissza",
            next: "előre",
            today: "ma",
            month: "Hónap",
            week: "Hét",
            day: "Nap",
            list: "Napló"
        },
        weekLabel: "Hét",
        allDayText: "Egész nap",
        eventLimitText: "további",
        noEventsMessage: "Nincs megjeleníthető esemény"
    };

    var _m32 = {
        code: "id",
        week: {
            dow: 1,
            doy: 7 // The week that contains Jan 1st is the first week of the year.
        },
        buttonText: {
            prev: "mundur",
            next: "maju",
            today: "hari ini",
            month: "Bulan",
            week: "Minggu",
            day: "Hari",
            list: "Agenda"
        },
        weekLabel: "Mg",
        allDayHtml: "Sehari
penuh",
        eventLimitText: "lebih",
        noEventsMessage: "Tidak ada acara untuk ditampilkan"
    };

    var _m33 = {
        code: "is",
        week: {
            dow: 1,
            doy: 4 // The week that contains Jan 4th is the first week of the year.
        },
        buttonText: {
            prev: "Fyrri",
            next: "Næsti",
            today: "Í dag",
            month: "Mánuður",
            week: "Vika",
            day: "Dagur",
            list: "Dagskrá"
        },
        weekLabel: "Vika",
        allDayHtml: "Allan
daginn",
        eventLimitText: "meira",
        noEventsMessage: "Engir viðburðir til að sýna"
    };

    var _m34 = {
        code: "it",
        week: {
            dow: 1,
            doy: 4 // The week that contains Jan 4th is the first week of the year.
        },
        buttonText: {
            prev: "Prec",
            next: "Succ",
            today: "Oggi",
            month: "Mese",
            week: "Settimana",
            day: "Giorno",
            list: "Agenda"
        },
        weekLabel: "Sm",
        allDayHtml: "Tutto il
giorno",
        eventLimitText: function (n) {
            return "+altri " + n;
        },
        noEventsMessage: "Non ci sono eventi da visualizzare"
    };

    var _m35 = {
        code: "ja",
        buttonText: {
            prev: "前",
            next: "次",
            today: "今日",
            month: "月",
            week: "週",
            day: "日",
            list: "予定リスト"
        },
        weekLabel: "週",
        allDayText: "終日",
        eventLimitText: function (n) {
            return "他 " + n + " 件";
        },
        noEventsMessage: "表示する予定はありません"
    };

    var _m36 = {
        code: "ka",
        week: {
            dow: 1,
            doy: 7
        },
        buttonText: {
            prev: "წინა",
            next: "შემდეგი",
            today: "დღეს",
            month: "თვე",
            week: "კვირა",
            day: "დღე",
            list: "დღის წესრიგი"
        },
        weekLabel: "კვ",
        allDayText: "მთელი დღე",
        eventLimitText: function (n) {
            return "+ კიდევ " + n;
        },
        noEventsMessage: "ღონისძიებები არ არის"
    };

    var _m37 = {
        code: "kk",
        week: {
            dow: 1,
            doy: 7 // The week that contains Jan 1st is the first week of the year.
        },
        buttonText: {
            prev: "Алдыңғы",
            next: "Келесі",
            today: "Бүгін",
            month: "Ай",
            week: "Апта",
            day: "Күн",
            list: "Күн тәртібі"
        },
        weekLabel: "Не",
        allDayText: "Күні бойы",
        eventLimitText: function (n) {
            return "+ тағы " + n;
        },
        noEventsMessage: "Көрсету үшін оқиғалар жоқ"
    };

    var _m38 = {
        code: "ko",
        buttonText: {
            prev: "이전달",
            next: "다음달",
            today: "오늘",
            month: "월",
            week: "주",
            day: "일",
            list: "일정목록"
        },
        weekLabel: "주",
        allDayText: "종일",
        eventLimitText: "개",
        noEventsMessage: "일정이 없습니다"
    };

    var _m39 = {
        code: "lb",
        week: {
            dow: 1,
            doy: 4 // The week that contains Jan 4th is the first week of the year.
        },
        buttonText: {
            prev: "Zréck",
            next: "Weider",
            today: "Haut",
            month: "Mount",
            week: "Woch",
            day: "Dag",
            list: "Terminiwwersiicht"
        },
        weekLabel: "W",
        allDayText: "Ganzen Dag",
        eventLimitText: "méi",
        noEventsMessage: "Nee Evenementer ze affichéieren"
    };

    var _m40 = {
        code: "lt",
        week: {
            dow: 1,
            doy: 4 // The week that contains Jan 4th is the first week of the year.
        },
        buttonText: {
            prev: "Atgal",
            next: "Pirmyn",
            today: "Šiandien",
            month: "Mėnuo",
            week: "Savaitė",
            day: "Diena",
            list: "Darbotvarkė"
        },
        weekLabel: "SAV",
        allDayText: "Visą dieną",
        eventLimitText: "daugiau",
        noEventsMessage: "Nėra įvykių rodyti"
    };

    var _m41 = {
        code: "lv",
        week: {
            dow: 1,
            doy: 4 // The week that contains Jan 4th is the first week of the year.
        },
        buttonText: {
            prev: "Iepr.",
            next: "Nāk.",
            today: "Šodien",
            month: "Mēnesis",
            week: "Nedēļa",
            day: "Diena",
            list: "Dienas kārtība"
        },
        weekLabel: "Ned.",
        allDayText: "Visu dienu",
        eventLimitText: function (n) {
            return "+vēl " + n;
        },
        noEventsMessage: "Nav notikumu"
    };

    var _m42 = {
        code: "mk",
        buttonText: {
            prev: "претходно",
            next: "следно",
            today: "Денес",
            month: "Месец",
            week: "Недела",
            day: "Ден",
            list: "График"
        },
        weekLabel: "Сед",
        allDayText: "Цел ден",
        eventLimitText: function (n) {
            return "+повеќе " + n;
        },
        noEventsMessage: "Нема настани за прикажување"
    };

    var _m43 = {
        code: "ms",
        week: {
            dow: 1,
            doy: 7 // The week that contains Jan 1st is the first week of the year.
        },
        buttonText: {
            prev: "Sebelum",
            next: "Selepas",
            today: "hari ini",
            month: "Bulan",
            week: "Minggu",
            day: "Hari",
            list: "Agenda"
        },
        weekLabel: "Mg",
        allDayText: "Sepanjang hari",
        eventLimitText: function (n) {
            return "masih ada " + n + " acara";
        },
        noEventsMessage: "Tiada peristiwa untuk dipaparkan"
    };

    var _m44 = {
        code: "nb",
        week: {
            dow: 1,
            doy: 4 // The week that contains Jan 4th is the first week of the year.
        },
        buttonText: {
            prev: "Forrige",
            next: "Neste",
            today: "I dag",
            month: "Måned",
            week: "Uke",
            day: "Dag",
            list: "Agenda"
        },
        weekLabel: "Uke",
        allDayText: "Hele dagen",
        eventLimitText: "til",
        noEventsMessage: "Ingen hendelser å vise"
    };

    var _m45 = {
        code: "nl",
        week: {
            dow: 1,
            doy: 4 // The week that contains Jan 4th is the first week of the year.
        },
        buttonText: {
            prev: "Voorgaand",
            next: "Volgende",
            today: "Vandaag",
            year: "Jaar",
            month: "Maand",
            week: "Week",
            day: "Dag",
            list: "Agenda"
        },
        allDayText: "Hele dag",
        eventLimitText: "extra",
        noEventsMessage: "Geen evenementen om te laten zien"
    };

    var _m46 = {
        code: "nn",
        week: {
            dow: 1,
            doy: 4 // The week that contains Jan 4th is the first week of the year.
        },
        buttonText: {
            prev: "Førre",
            next: "Neste",
            today: "I dag",
            month: "Månad",
            week: "Veke",
            day: "Dag",
            list: "Agenda"
        },
        weekLabel: "Veke",
        allDayText: "Heile dagen",
        eventLimitText: "til",
        noEventsMessage: "Ingen hendelser å vise"
    };

    var _m47 = {
        code: "pl",
        week: {
            dow: 1,
            doy: 4 // The week that contains Jan 4th is the first week of the year.
        },
        buttonText: {
            prev: "Poprzedni",
            next: "Następny",
            today: "Dziś",
            month: "Miesiąc",
            week: "Tydzień",
            day: "Dzień",
            list: "Plan dnia"
        },
        weekLabel: "Tydz",
        allDayText: "Cały dzień",
        eventLimitText: "więcej",
        noEventsMessage: "Brak wydarzeń do wyświetlenia"
    };

    var _m48 = {
        code: "pt-br",
        buttonText: {
            prev: "Anterior",
            next: "Próximo",
            today: "Hoje",
            month: "Mês",
            week: "Semana",
            day: "Dia",
            list: "Compromissos"
        },
        weekLabel: "Sm",
        allDayText: "dia inteiro",
        eventLimitText: function (n) {
            return "mais +" + n;
        },
        noEventsMessage: "Não há eventos para mostrar"
    };

    var _m49 = {
        code: "pt",
        week: {
            dow: 1,
            doy: 4 // The week that contains Jan 4th is the first week of the year.
        },
        buttonText: {
            prev: "Anterior",
            next: "Seguinte",
            today: "Hoje",
            month: "Mês",
            week: "Semana",
            day: "Dia",
            list: "Agenda"
        },
        weekLabel: "Sem",
        allDayText: "Todo o dia",
        eventLimitText: "mais",
        noEventsMessage: "Não há eventos para mostrar"
    };

    var _m50 = {
        code: "ro",
        week: {
            dow: 1,
            doy: 7 // The week that contains Jan 1st is the first week of the year.
        },
        buttonText: {
            prev: "precedentă",
            next: "următoare",
            today: "Azi",
            month: "Lună",
            week: "Săptămână",
            day: "Zi",
            list: "Agendă"
        },
        weekLabel: "Săpt",
        allDayText: "Toată ziua",
        eventLimitText: function (n) {
            return "+alte " + n;
        },
        noEventsMessage: "Nu există evenimente de afișat"
    };

    var _m51 = {
        code: "ru",
        week: {
            dow: 1,
            doy: 4 // The week that contains Jan 4th is the first week of the year.
        },
        buttonText: {
            prev: "Пред",
            next: "След",
            today: "Сегодня",
            month: "Месяц",
            week: "Неделя",
            day: "День",
            list: "Повестка дня"
        },
        weekLabel: "Нед",
        allDayText: "Весь день",
        eventLimitText: function (n) {
            return "+ ещё " + n;
        },
        noEventsMessage: "Нет событий для отображения"
    };

    var _m52 = {
        code: "sk",
        week: {
            dow: 1,
            doy: 4 // The week that contains Jan 4th is the first week of the year.
        },
        buttonText: {
            prev: "Predchádzajúci",
            next: "Nasledujúci",
            today: "Dnes",
            month: "Mesiac",
            week: "Týždeň",
            day: "Deň",
            list: "Rozvrh"
        },
        weekLabel: "Ty",
        allDayText: "Celý deň",
        eventLimitText: function (n) {
            return "+ďalšie: " + n;
        },
        noEventsMessage: "Žiadne akcie na zobrazenie"
    };

    var _m53 = {
        code: "sl",
        week: {
            dow: 1,
            doy: 7 // The week that contains Jan 1st is the first week of the year.
        },
        buttonText: {
            prev: "Prejšnji",
            next: "Naslednji",
            today: "Trenutni",
            month: "Mesec",
            week: "Teden",
            day: "Dan",
            list: "Dnevni red"
        },
        weekLabel: "Teden",
        allDayText: "Ves dan",
        eventLimitText: "več",
        noEventsMessage: "Ni dogodkov za prikaz"
    };

    var _m54 = {
        code: "sq",
        week: {
            dow: 1,
            doy: 4 // The week that contains Jan 4th is the first week of the year.
        },
        buttonText: {
            prev: "mbrapa",
            next: "Përpara",
            today: "sot",
            month: "Muaj",
            week: "Javë",
            day: "Ditë",
            list: "Listë"
        },
        weekLabel: "Ja",
        allDayHtml: "Gjithë
ditën",
        eventLimitText: function (n) {
            return "+më tepër " + n;
        },
        noEventsMessage: "Nuk ka evente për të shfaqur"
    };

    var _m55 = {
        code: "sr-cyrl",
        week: {
            dow: 1,
            doy: 7 // The week that contains Jan 1st is the first week of the year.
        },
        buttonText: {
            prev: "Претходна",
            next: "следећи",
            today: "Данас",
            month: "Месец",
            week: "Недеља",
            day: "Дан",
            list: "Планер"
        },
        weekLabel: "Сед",
        allDayText: "Цео дан",
        eventLimitText: function (n) {
            return "+ још " + n;
        },
        noEventsMessage: "Нема догађаја за приказ"
    };

    var _m56 = {
        code: "sr",
        week: {
            dow: 1,
            doy: 7 // The week that contains Jan 1st is the first week of the year.
        },
        buttonText: {
            prev: "Prethodna",
            next: "Sledeći",
            today: "Danas",
            month: "Mеsеc",
            week: "Nеdеlja",
            day: "Dan",
            list: "Planеr"
        },
        weekLabel: "Sed",
        allDayText: "Cеo dan",
        eventLimitText: function (n) {
            return "+ još " + n;
        },
        noEventsMessage: "Nеma događaja za prikaz"
    };

    var _m57 = {
        code: "sv",
        week: {
            dow: 1,
            doy: 4 // The week that contains Jan 4th is the first week of the year.
        },
        buttonText: {
            prev: "Förra",
            next: "Nästa",
            today: "Idag",
            month: "Månad",
            week: "Vecka",
            day: "Dag",
            list: "Program"
        },
        weekLabel: "v.",
        allDayText: "Heldag",
        eventLimitText: "till",
        noEventsMessage: "Inga händelser att visa"
    };

    var _m58 = {
        code: "th",
        buttonText: {
            prev: "ย้อน",
            next: "ถัดไป",
            today: "วันนี้",
            month: "เดือน",
            week: "สัปดาห์",
            day: "วัน",
            list: "แผนงาน"
        },
        allDayText: "ตลอดวัน",
        eventLimitText: "เพิ่มเติม",
        noEventsMessage: "ไม่มีกิจกรรมที่จะแสดง"
    };

    var _m59 = {
        code: "tr",
        week: {
            dow: 1,
            doy: 7 // The week that contains Jan 1st is the first week of the year.
        },
        buttonText: {
            prev: "geri",
            next: "ileri",
            today: "bugün",
            month: "Ay",
            week: "Hafta",
            day: "Gün",
            list: "Ajanda"
        },
        weekLabel: "Hf",
        allDayText: "Tüm gün",
        eventLimitText: "daha fazla",
        noEventsMessage: "Gösterilecek etkinlik yok"
    };

    var _m60 = {
        code: "uk",
        week: {
            dow: 1,
            doy: 7 // The week that contains Jan 1st is the first week of the year.
        },
        buttonText: {
            prev: "Попередній",
            next: "далі",
            today: "Сьогодні",
            month: "Місяць",
            week: "Тиждень",
            day: "День",
            list: "Порядок денний"
        },
        weekLabel: "Тиж",
        allDayText: "Увесь день",
        eventLimitText: function (n) {
            return "+ще " + n + "...";
        },
        noEventsMessage: "Немає подій для відображення"
    };

    var _m61 = {
        code: "vi",
        week: {
            dow: 1,
            doy: 4 // The week that contains Jan 4th is the first week of the year.
        },
        buttonText: {
            prev: "Trước",
            next: "Tiếp",
            today: "Hôm nay",
            month: "Tháng",
            week: "Tuần",
            day: "Ngày",
            list: "Lịch biểu"
        },
        weekLabel: "Tu",
        allDayText: "Cả ngày",
        eventLimitText: function (n) {
            return "+ thêm " + n;
        },
        noEventsMessage: "Không có sự kiện để hiển thị"
    };

    var _m62 = {
        code: "zh-cn",
        week: {
            // GB/T 7408-1994《数据元和交换格式·信息交换·日期和时间表示法》与ISO 8601:1988等效
            dow: 1,
            doy: 4 // The week that contains Jan 4th is the first week of the year.
        },
        buttonText: {
            prev: "上月",
            next: "下月",
            today: "今天",
            month: "月",
            week: "周",
            day: "日",
            list: "日程"
        },
        weekLabel: "周",
        allDayText: "全天",
        eventLimitText: function (n) {
            return "另外 " + n + " 个";
        },
        noEventsMessage: "没有事件显示"
    };

    var _m63 = {
        code: "zh-tw",
        buttonText: {
            prev: "上月",
            next: "下月",
            today: "今天",
            month: "月",
            week: "週",
            day: "天",
            list: "活動列表"
        },
        weekLabel: "周",
        allDayText: "整天",
        eventLimitText: '顯示更多',
        noEventsMessage: "没有任何活動"
    };

    var _rollupPluginMultiEntry_entryPoint = [
    _m0, _m1, _m2, _m3, _m4, _m5, _m6, _m7, _m8, _m9, _m10, _m11, _m12, _m13, _m14, _m15, _m16, _m17, _m18, _m19, _m20, _m21, _m22, _m23, _m24, _m25, _m26, _m27, _m28, _m29, _m30, _m31, _m32, _m33, _m34, _m35, _m36, _m37, _m38, _m39, _m40, _m41, _m42, _m43, _m44, _m45, _m46, _m47, _m48, _m49, _m50, _m51, _m52, _m53, _m54, _m55, _m56, _m57, _m58, _m59, _m60, _m61, _m62, _m63
    ];

return _rollupPluginMultiEntry_entryPoint;

}));

/*!
FullCalendar Core Package v4.3.1
Docs & License: https://fullcalendar.io/
(c) 2019 Adam Shaw
*/

// Creating
// ----------------------------------------------------------------------------------------------------------------
var elementPropHash = {
    className: true,
    colSpan: true,
    rowSpan: true
};
var containerTagHash = {
    '= rect.left &&
        point.left < rect.right &&
        point.top >= rect.top &&
        point.top < rect.bottom;
}
// Returns a new rectangle that is the intersection of the two rectangles. If they don't intersect, returns false
function intersectRects(rect1, rect2) {
    var res = {
        left: Math.max(rect1.left, rect2.left),
        right: Math.min(rect1.right, rect2.right),
        top: Math.max(rect1.top, rect2.top),
        bottom: Math.min(rect1.bottom, rect2.bottom)
    };
    if (res.left < res.right && res.top < res.bottom) {
        return res;
    }
    return false;
}
function translateRect(rect, deltaX, deltaY) {
    return {
        left: rect.left + deltaX,
        right: rect.right + deltaX,
        top: rect.top + deltaY,
        bottom: rect.bottom + deltaY
    };
}
// Returns a new point that will have been moved to reside within the given rectangle
function constrainPoint(point, rect) {
    return {
        left: Math.min(Math.max(point.left, rect.left), rect.right),
        top: Math.min(Math.max(point.top, rect.top), rect.bottom)
    };
}
// Returns a point that is the center of the given rectangle
function getRectCenter(rect) {
    return {
        left: (rect.left + rect.right) / 2,
        top: (rect.top + rect.bottom) / 2
    };
}
// Subtracts point2's coordinates from point1's coordinates, returning a delta
function diffPoints(point1, point2) {
    return {
        left: point1.left - point2.left,
        top: point1.top - point2.top
    };
}

// Logic for determining if, when the element is right-to-left, the scrollbar appears on the left side
var isRtlScrollbarOnLeft = null;
function getIsRtlScrollbarOnLeft() {
    if (isRtlScrollbarOnLeft === null) {
        isRtlScrollbarOnLeft = computeIsRtlScrollbarOnLeft();
    }
    return isRtlScrollbarOnLeft;
}
function computeIsRtlScrollbarOnLeft() {
    var outerEl = createElement('div', {
        style: {
            position: 'absolute',
            top: -1000,
            left: 0,
            border: 0,
            padding: 0,
            overflow: 'scroll',
            direction: 'rtl'
        }
    }, '

');
    document.body.appendChild(outerEl);
    var innerEl = outerEl.firstChild;
    var res = innerEl.getBoundingClientRect().left > outerEl.getBoundingClientRect().left;
    removeElement(outerEl);
    return res;
}
// The scrollbar width computations in computeEdges are sometimes flawed when it comes to
// retina displays, rounding, and IE11. Massage them into a usable value.
function sanitizeScrollbarWidth(width) {
    width = Math.max(0, width); // no negatives
    width = Math.round(width);
    return width;
}

// Stops a mouse/touch event from doing it's native browser action
function preventDefault(ev) {
    ev.preventDefault();
}
// Event Delegation
// ----------------------------------------------------------------------------------------------------------------
function listenBySelector(container, eventType, selector, handler) {
    function realHandler(ev) {
        var matchedChild = elementClosest(ev.target, selector);
        if (matchedChild) {
            handler.call(matchedChild, ev, matchedChild);
        }
    }
    container.addEventListener(eventType, realHandler);
    return function () {
        container.removeEventListener(eventType, realHandler);
    };
}
function listenToHoverBySelector(container, selector, onMouseEnter, onMouseLeave) {
    var currentMatchedChild;
    return listenBySelector(container, 'mouseover', selector, function (ev, matchedChild) {
        if (matchedChild !== currentMatchedChild) {
            currentMatchedChild = matchedChild;
            onMouseEnter(ev, matchedChild);
            var realOnMouseLeave_1 = function (ev) {
                currentMatchedChild = null;
                onMouseLeave(ev, matchedChild);
                matchedChild.removeEventListener('mouseleave', realOnMouseLeave_1);
            };
            // listen to the next mouseleave, and then unattach
            matchedChild.addEventListener('mouseleave', realOnMouseLeave_1);
        }
    });
}
// Animation
// ----------------------------------------------------------------------------------------------------------------
var transitionEventNames = [
    'webkitTransitionEnd',
    'otransitionend',
    'oTransitionEnd',
    'msTransitionEnd',
    'transitionend'
];
// triggered only when the next single subsequent transition finishes
function whenTransitionDone(el, callback) {
    var realCallback = function (ev) {
        callback(ev);
        transitionEventNames.forEach(function (eventName) {
            el.removeEventListener(eventName, realCallback);
        });
    };
    transitionEventNames.forEach(function (eventName) {
        el.addEventListener(eventName, realCallback); // cross-browser way to determine when the transition finishes
    });
}

/* FullCalendar-specific DOM Utilities
----------------------------------------------------------------------------------------------------------------------*/
// Given the scrollbar widths of some other container, create borders/margins on rowEls in order to match the left
// and right space that was offset by the scrollbars. A 1-pixel border first, then margin beyond that.
function compensateScroll(rowEl, scrollbarWidths) {
    if (scrollbarWidths.left) {
        applyStyle(rowEl, {
            borderLeftWidth: 1,
            marginLeft: scrollbarWidths.left - 1
        });
    }
    if (scrollbarWidths.right) {
        applyStyle(rowEl, {
            borderRightWidth: 1,
            marginRight: scrollbarWidths.right - 1
        });
    }
}
// Undoes compensateScroll and restores all borders/margins
function uncompensateScroll(rowEl) {
    applyStyle(rowEl, {
        marginLeft: '',
        marginRight: '',
        borderLeftWidth: '',
        borderRightWidth: ''
    });
}
// Make the mouse cursor express that an event is not allowed in the current area
function disableCursor() {
    document.body.classList.add('fc-not-allowed');
}
// Returns the mouse cursor to its original look
function enableCursor() {
    document.body.classList.remove('fc-not-allowed');
}
// Given a total available height to fill, have `els` (essentially child rows) expand to accomodate.
// By default, all elements that are shorter than the recommended height are expanded uniformly, not considering
// any other els that are already too tall. if `shouldRedistribute` is on, it considers these tall rows and
// reduces the available height.
function distributeHeight(els, availableHeight, shouldRedistribute) {
    // *FLOORING NOTE*: we floor in certain places because zoom can give inaccurate floating-point dimensions,
    // and it is better to be shorter than taller, to avoid creating unnecessary scrollbars.
    var minOffset1 = Math.floor(availableHeight / els.length); // for non-last element
    var minOffset2 = Math.floor(availableHeight - minOffset1 * (els.length - 1)); // for last element *FLOORING NOTE*
    var flexEls = []; // elements that are allowed to expand. array of DOM nodes
    var flexOffsets = []; // amount of vertical space it takes up
    var flexHeights = []; // actual css height
    var usedHeight = 0;
    undistributeHeight(els); // give all elements their natural height
    // find elements that are below the recommended height (expandable).
    // important to query for heights in a single first pass (to avoid reflow oscillation).
    els.forEach(function (el, i) {
        var minOffset = i === els.length - 1 ? minOffset2 : minOffset1;
        var naturalHeight = el.getBoundingClientRect().height;
        var naturalOffset = naturalHeight + computeVMargins(el);
        if (naturalOffset < minOffset) {
            flexEls.push(el);
            flexOffsets.push(naturalOffset);
            flexHeights.push(naturalHeight);
        }
        else {
            // this element stretches past recommended height (non-expandable). mark the space as occupied.
            usedHeight += naturalOffset;
        }
    });
    // readjust the recommended height to only consider the height available to non-maxed-out rows.
    if (shouldRedistribute) {
        availableHeight -= usedHeight;
        minOffset1 = Math.floor(availableHeight / flexEls.length);
        minOffset2 = Math.floor(availableHeight - minOffset1 * (flexEls.length - 1)); // *FLOORING NOTE*
    }
    // assign heights to all expandable elements
    flexEls.forEach(function (el, i) {
        var minOffset = i === flexEls.length - 1 ? minOffset2 : minOffset1;
        var naturalOffset = flexOffsets[i];
        var naturalHeight = flexHeights[i];
        var newHeight = minOffset - (naturalOffset - naturalHeight); // subtract the margin/padding
        if (naturalOffset < minOffset) { // we check this again because redistribution might have changed things
            el.style.height = newHeight + 'px';
        }
    });
}
// Undoes distrubuteHeight, restoring all els to their natural height
function undistributeHeight(els) {
    els.forEach(function (el) {
        el.style.height = '';
    });
}
// Given `els`, a set of  cells, find the cell with the largest natural width and set the widths of all the
// cells to be that width.
// PREREQUISITE: if you want a cell to take up width, it needs to have a single inner element w/ display:inline
function matchCellWidths(els) {
    var maxInnerWidth = 0;
    els.forEach(function (el) {
        var innerEl = el.firstChild; // hopefully an element
        if (innerEl instanceof HTMLElement) {
            var innerWidth_1 = innerEl.getBoundingClientRect().width;
            if (innerWidth_1 > maxInnerWidth) {
                maxInnerWidth = innerWidth_1;
            }
        }
    });
    maxInnerWidth++; // sometimes not accurate of width the text needs to stay on one line. insurance
    els.forEach(function (el) {
        el.style.width = maxInnerWidth + 'px';
    });
    return maxInnerWidth;
}
// Given one element that resides inside another,
// Subtracts the height of the inner element from the outer element.
function subtractInnerElHeight(outerEl, innerEl) {
    // effin' IE8/9/10/11 sometimes returns 0 for dimensions. this weird hack was the only thing that worked
    var reflowStyleProps = {
        position: 'relative',
        left: -1 // ensure reflow in case the el was already relative. negative is less likely to cause new scroll
    };
    applyStyle(outerEl, reflowStyleProps);
    applyStyle(innerEl, reflowStyleProps);
    var diff = // grab the dimensions
     outerEl.getBoundingClientRect().height -
        innerEl.getBoundingClientRect().height;
    // undo hack
    var resetStyleProps = { position: '', left: '' };
    applyStyle(outerEl, resetStyleProps);
    applyStyle(innerEl, resetStyleProps);
    return diff;
}
/* Selection
----------------------------------------------------------------------------------------------------------------------*/
function preventSelection(el) {
    el.classList.add('fc-unselectable');
    el.addEventListener('selectstart', preventDefault);
}
function allowSelection(el) {
    el.classList.remove('fc-unselectable');
    el.removeEventListener('selectstart', preventDefault);
}
/* Context Menu
----------------------------------------------------------------------------------------------------------------------*/
function preventContextMenu(el) {
    el.addEventListener('contextmenu', preventDefault);
}
function allowContextMenu(el) {
    el.removeEventListener('contextmenu', preventDefault);
}
/* Object Ordering by Field
----------------------------------------------------------------------------------------------------------------------*/
function parseFieldSpecs(input) {
    var specs = [];
    var tokens = [];
    var i;
    var token;
    if (typeof input === 'string') {
        tokens = input.split(/\s*,\s*/);
    }
    else if (typeof input === 'function') {
        tokens = [input];
    }
    else if (Array.isArray(input)) {
        tokens = input;
    }
    for (i = 0; i < tokens.length; i++) {
        token = tokens[i];
        if (typeof token === 'string') {
            specs.push(token.charAt(0) === '-' ?
                { field: token.substring(1), order: -1 } :
                { field: token, order: 1 });
        }
        else if (typeof token === 'function') {
            specs.push({ func: token });
        }
    }
    return specs;
}
function compareByFieldSpecs(obj0, obj1, fieldSpecs) {
    var i;
    var cmp;
    for (i = 0; i < fieldSpecs.length; i++) {
        cmp = compareByFieldSpec(obj0, obj1, fieldSpecs[i]);
        if (cmp) {
            return cmp;
        }
    }
    return 0;
}
function compareByFieldSpec(obj0, obj1, fieldSpec) {
    if (fieldSpec.func) {
        return fieldSpec.func(obj0, obj1);
    }
    return flexibleCompare(obj0[fieldSpec.field], obj1[fieldSpec.field])
        * (fieldSpec.order || 1);
}
function flexibleCompare(a, b) {
    if (!a && !b) {
        return 0;
    }
    if (b == null) {
        return -1;
    }
    if (a == null) {
        return 1;
    }
    if (typeof a === 'string' || typeof b === 'string') {
        return String(a).localeCompare(String(b));
    }
    return a - b;
}
/* String Utilities
----------------------------------------------------------------------------------------------------------------------*/
function capitaliseFirstLetter(str) {
    return str.charAt(0).toUpperCase() + str.slice(1);
}
function padStart(val, len) {
    var s = String(val);
    return '000'.substr(0, len - s.length) + s;
}
/* Number Utilities
----------------------------------------------------------------------------------------------------------------------*/
function compareNumbers(a, b) {
    return a - b;
}
function isInt(n) {
    return n % 1 === 0;
}
/* Weird Utilities
----------------------------------------------------------------------------------------------------------------------*/
function applyAll(functions, thisObj, args) {
    if (typeof functions === 'function') { // supplied a single function
        functions = [functions];
    }
    if (functions) {
        var i = void 0;
        var ret = void 0;
        for (i = 0; i < functions.length; i++) {
            ret = functions[i].apply(thisObj, args) || ret;
        }
        return ret;
    }
}
function firstDefined() {
    var args = [];
    for (var _i = 0; _i < arguments.length; _i++) {
        args[_i] = arguments[_i];
    }
    for (var i = 0; i < args.length; i++) {
        if (args[i] !== undefined) {
            return args[i];
        }
    }
}
// Returns a function, that, as long as it continues to be invoked, will not
// be triggered. The function will be called after it stops being called for
// N milliseconds. If `immediate` is passed, trigger the function on the
// leading edge, instead of the trailing.
// https://github.com/jashkenas/underscore/blob/1.6.0/underscore.js#L714
function debounce(func, wait) {
    var timeout;
    var args;
    var context;
    var timestamp;
    var result;
    var later = function () {
        var last = new Date().valueOf() - timestamp;
        if (last < wait) {
            timeout = setTimeout(later, wait - last);
        }
        else {
            timeout = null;
            result = func.apply(context, args);
            context = args = null;
        }
    };
    return function () {
        context = this;
        args = arguments;
        timestamp = new Date().valueOf();
        if (!timeout) {
            timeout = setTimeout(later, wait);
        }
        return result;
    };
}
// Number and Boolean are only types that defaults or not computed for
// TODO: write more comments
function refineProps(rawProps, processors, defaults, leftoverProps) {
    if (defaults === void 0) { defaults = {}; }
    var refined = {};
    for (var key in processors) {
        var processor = processors[key];
        if (rawProps[key] !== undefined) {
            // found
            if (processor === Function) {
                refined[key] = typeof rawProps[key] === 'function' ? rawProps[key] : null;
            }
            else if (processor) { // a refining function?
                refined[key] = processor(rawProps[key]);
            }
            else {
                refined[key] = rawProps[key];
            }
        }
        else if (defaults[key] !== undefined) {
            // there's an explicit default
            refined[key] = defaults[key];
        }
        else {
            // must compute a default
            if (processor === String) {
                refined[key] = ''; // empty string is default for String
            }
            else if (!processor || processor === Number || processor === Boolean || processor === Function) {
                refined[key] = null; // assign null for other non-custom processor funcs
            }
            else {
                refined[key] = processor(null); // run the custom processor func
            }
        }
    }
    if (leftoverProps) {
        for (var key in rawProps) {
            if (processors[key] === undefined) {
                leftoverProps[key] = rawProps[key];
            }
        }
    }
    return refined;
}
/* Date stuff that doesn't belong in datelib core
----------------------------------------------------------------------------------------------------------------------*/
// given a timed range, computes an all-day range that has the same exact duration,
// but whose start time is aligned with the start of the day.
function computeAlignedDayRange(timedRange) {
    var dayCnt = Math.floor(diffDays(timedRange.start, timedRange.end)) || 1;
    var start = startOfDay(timedRange.start);
    var end = addDays(start, dayCnt);
    return { start: start, end: end };
}
// given a timed range, computes an all-day range based on how for the end date bleeds into the next day
// TODO: give nextDayThreshold a default arg
function computeVisibleDayRange(timedRange, nextDayThreshold) {
    if (nextDayThreshold === void 0) { nextDayThreshold = createDuration(0); }
    var startDay = null;
    var endDay = null;
    if (timedRange.end) {
        endDay = startOfDay(timedRange.end);
        var endTimeMS = timedRange.end.valueOf() - endDay.valueOf(); // # of milliseconds into `endDay`
        // If the end time is actually inclusively part of the next day and is equal to or
        // beyond the next day threshold, adjust the end to be the exclusive end of `endDay`.
        // Otherwise, leaving it as inclusive will cause it to exclude `endDay`.
        if (endTimeMS && endTimeMS >= asRoughMs(nextDayThreshold)) {
            endDay = addDays(endDay, 1);
        }
    }
    if (timedRange.start) {
        startDay = startOfDay(timedRange.start); // the beginning of the day the range starts
        // If end is within `startDay` but not past nextDayThreshold, assign the default duration of one day.
        if (endDay && endDay <= startDay) {
            endDay = addDays(startDay, 1);
        }
    }
    return { start: startDay, end: endDay };
}
// spans from one day into another?
function isMultiDayRange(range) {
    var visibleRange = computeVisibleDayRange(range);
    return diffDays(visibleRange.start, visibleRange.end) > 1;
}
function diffDates(date0, date1, dateEnv, largeUnit) {
    if (largeUnit === 'year') {
        return createDuration(dateEnv.diffWholeYears(date0, date1), 'year');
    }
    else if (largeUnit === 'month') {
        return createDuration(dateEnv.diffWholeMonths(date0, date1), 'month');
    }
    else {
        return diffDayAndTime(date0, date1); // returns a duration
    }
}

/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0

THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.

See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
/* global Reflect, Promise */

function __extends(d, b) {
    extendStatics(d, b);
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}

/*
TODO: fix the terminology of "formatter" vs "formatting func"
*/
/*
At the time of instantiation, this object does not know which cmd-formatting system it will use.
It receives this at the time of formatting, as a setting.
*/
var CmdFormatter = /** @class */ (function () {
    function CmdFormatter(cmdStr, separator) {
        this.cmdStr = cmdStr;
        this.separator = separator;
    }
    CmdFormatter.prototype.format = function (date, context) {
        return context.cmdFormatter(this.cmdStr, createVerboseFormattingArg(date, null, context, this.separator));
    };
    CmdFormatter.prototype.formatRange = function (start, end, context) {
        return context.cmdFormatter(this.cmdStr, createVerboseFormattingArg(start, end, context, this.separator));
    };
    return CmdFormatter;
}());

// Formatter Object Creation
function createFormatter(input, defaultSeparator) {
    if (typeof input === 'object' && input) { // non-null object
        if (typeof defaultSeparator === 'string') {
            input = __assign({ separator: defaultSeparator }, input);
        }
        return new NativeFormatter(input);
    }
    else if (typeof input === 'string') {
        return new CmdFormatter(input, defaultSeparator);
    }
    else if (typeof input === 'function') {
        return new FuncFormatter(input);
    }
}
// String Utils
// timeZoneOffset is in minutes
function buildIsoString(marker, timeZoneOffset, stripZeroTime) {
    if (stripZeroTime === void 0) { stripZeroTime = false; }
    var s = marker.toISOString();
    s = s.replace('.000', '');
    if (stripZeroTime) {
        s = s.replace('T00:00:00Z', '');
    }
    if (s.length > 10) { // time part wasn't stripped, can add timezone info
        if (timeZoneOffset == null) {
            s = s.replace('Z', '');
        }
        else if (timeZoneOffset !== 0) {
            s = s.replace('Z', formatTimeZoneOffset(timeZoneOffset, true));
        }
        // otherwise, its UTC-0 and we want to keep the Z
    }
    return s;
}
function formatIsoTimeString(marker) {
    return padStart(marker.getUTCHours(), 2) + ':' +
        padStart(marker.getUTCMinutes(), 2) + ':' +
        padStart(marker.getUTCSeconds(), 2);
}
function formatTimeZoneOffset(minutes, doIso) {
    if (doIso === void 0) { doIso = false; }
    var sign = minutes < 0 ? '-' : '+';
    var abs = Math.abs(minutes);
    var hours = Math.floor(abs / 60);
    var mins = Math.round(abs % 60);
    if (doIso) {
        return sign + padStart(hours, 2) + ':' + padStart(mins, 2);
    }
    else {
        return 'GMT' + sign + hours + (mins ? ':' + padStart(mins, 2) : '');
    }
}
// Arg Utils
function createVerboseFormattingArg(start, end, context, separator) {
    var startInfo = expandZonedMarker(start, context.calendarSystem);
    var endInfo = end ? expandZonedMarker(end, context.calendarSystem) : null;
    return {
        date: startInfo,
        start: startInfo,
        end: endInfo,
        timeZone: context.timeZone,
        localeCodes: context.locale.codes,
        separator: separator
    };
}
function expandZonedMarker(dateInfo, calendarSystem) {
    var a = calendarSystem.markerToArray(dateInfo.marker);
    return {
        marker: dateInfo.marker,
        timeZoneOffset: dateInfo.timeZoneOffset,
        array: a,
        year: a[0],
        month: a[1],
        day: a[2],
        hour: a[3],
        minute: a[4],
        second: a[5],
        millisecond: a[6]
    };
}

/*
Specifying nextDayThreshold signals that all-day ranges should be sliced.
*/
function sliceEventStore(eventStore, eventUiBases, framingRange, nextDayThreshold) {
    var inverseBgByGroupId = {};
    var inverseBgByDefId = {};
    var defByGroupId = {};
    var bgRanges = [];
    var fgRanges = [];
    var eventUis = compileEventUis(eventStore.defs, eventUiBases);
    for (var defId in eventStore.defs) {
        var def = eventStore.defs[defId];
        if (def.rendering === 'inverse-background') {
            if (def.groupId) {
                inverseBgByGroupId[def.groupId] = [];
                if (!defByGroupId[def.groupId]) {
                    defByGroupId[def.groupId] = def;
                }
            }
            else {
                inverseBgByDefId[defId] = [];
            }
        }
    }
    for (var instanceId in eventStore.instances) {
        var instance = eventStore.instances[instanceId];
        var def = eventStore.defs[instance.defId];
        var ui = eventUis[def.defId];
        var origRange = instance.range;
        var normalRange = (!def.allDay && nextDayThreshold) ?
            computeVisibleDayRange(origRange, nextDayThreshold) :
            origRange;
        var slicedRange = intersectRanges(normalRange, framingRange);
        if (slicedRange) {
            if (def.rendering === 'inverse-background') {
                if (def.groupId) {
                    inverseBgByGroupId[def.groupId].push(slicedRange);
                }
                else {
                    inverseBgByDefId[instance.defId].push(slicedRange);
                }
            }
            else {
                (def.rendering === 'background' ? bgRanges : fgRanges).push({
                    def: def,
                    ui: ui,
                    instance: instance,
                    range: slicedRange,
                    isStart: normalRange.start && normalRange.start.valueOf() === slicedRange.start.valueOf(),
                    isEnd: normalRange.end && normalRange.end.valueOf() === slicedRange.end.valueOf()
                });
            }
        }
    }
    for (var groupId in inverseBgByGroupId) { // BY GROUP
        var ranges = inverseBgByGroupId[groupId];
        var invertedRanges = invertRanges(ranges, framingRange);
        for (var _i = 0, invertedRanges_1 = invertedRanges; _i < invertedRanges_1.length; _i++) {
            var invertedRange = invertedRanges_1[_i];
            var def = defByGroupId[groupId];
            var ui = eventUis[def.defId];
            bgRanges.push({
                def: def,
                ui: ui,
                instance: null,
                range: invertedRange,
                isStart: false,
                isEnd: false
            });
        }
    }
    for (var defId in inverseBgByDefId) {
        var ranges = inverseBgByDefId[defId];
        var invertedRanges = invertRanges(ranges, framingRange);
        for (var _a = 0, invertedRanges_2 = invertedRanges; _a < invertedRanges_2.length; _a++) {
            var invertedRange = invertedRanges_2[_a];
            bgRanges.push({
                def: eventStore.defs[defId],
                ui: eventUis[defId],
                instance: null,
                range: invertedRange,
                isStart: false,
                isEnd: false
            });
        }
    }
    return { bg: bgRanges, fg: fgRanges };
}
function hasBgRendering(def) {
    return def.rendering === 'background' || def.rendering === 'inverse-background';
}
function filterSegsViaEls(view, segs, isMirror) {
    if (view.hasPublicHandlers('eventRender')) {
        segs = segs.filter(function (seg) {
            var custom = view.publiclyTrigger('eventRender', [
                {
                    event: new EventApi(view.calendar, seg.eventRange.def, seg.eventRange.instance),
                    isMirror: isMirror,
                    isStart: seg.isStart,
                    isEnd: seg.isEnd,
                    // TODO: include seg.range once all components consistently generate it
                    el: seg.el,
                    view: view
                }
            ]);
            if (custom === false) { // means don't render at all
                return false;
            }
            else if (custom && custom !== true) {
                seg.el = custom;
            }
            return true;
        });
    }
    for (var _i = 0, segs_1 = segs; _i < segs_1.length; _i++) {
        var seg = segs_1[_i];
        setElSeg(seg.el, seg);
    }
    return segs;
}
function setElSeg(el, seg) {
    el.fcSeg = seg;
}
function getElSeg(el) {
    return el.fcSeg || null;
}
// event ui computation
function compileEventUis(eventDefs, eventUiBases) {
    return mapHash(eventDefs, function (eventDef) {
        return compileEventUi(eventDef, eventUiBases);
    });
}
function compileEventUi(eventDef, eventUiBases) {
    var uis = [];
    if (eventUiBases['']) {
        uis.push(eventUiBases['']);
    }
    if (eventUiBases[eventDef.defId]) {
        uis.push(eventUiBases[eventDef.defId]);
    }
    uis.push(eventDef.ui);
    return combineEventUis(uis);
}

// applies the mutation to ALL defs/instances within the event store
function applyMutationToEventStore(eventStore, eventConfigBase, mutation, calendar) {
    var eventConfigs = compileEventUis(eventStore.defs, eventConfigBase);
    var dest = createEmptyEventStore();
    for (var defId in eventStore.defs) {
        var def = eventStore.defs[defId];
        dest.defs[defId] = applyMutationToEventDef(def, eventConfigs[defId], mutation, calendar.pluginSystem.hooks.eventDefMutationAppliers, calendar);
    }
    for (var instanceId in eventStore.instances) {
        var instance = eventStore.instances[instanceId];
        var def = dest.defs[instance.defId]; // important to grab the newly modified def
        dest.instances[instanceId] = applyMutationToEventInstance(instance, def, eventConfigs[instance.defId], mutation, calendar);
    }
    return dest;
}
function applyMutationToEventDef(eventDef, eventConfig, mutation, appliers, calendar) {
    var standardProps = mutation.standardProps || {};
    // if hasEnd has not been specified, guess a good value based on deltas.
    // if duration will change, there's no way the default duration will persist,
    // and thus, we need to mark the event as having a real end
    if (standardProps.hasEnd == null &&
        eventConfig.durationEditable &&
        (mutation.startDelta || mutation.endDelta)) {
        standardProps.hasEnd = true; // TODO: is this mutation okay?
    }
    var copy = __assign({}, eventDef, standardProps, { ui: __assign({}, eventDef.ui, standardProps.ui) });
    if (mutation.extendedProps) {
        copy.extendedProps = __assign({}, copy.extendedProps, mutation.extendedProps);
    }
    for (var _i = 0, appliers_1 = appliers; _i < appliers_1.length; _i++) {
        var applier = appliers_1[_i];
        applier(copy, mutation, calendar);
    }
    if (!copy.hasEnd && calendar.opt('forceEventDuration')) {
        copy.hasEnd = true;
    }
    return copy;
}
function applyMutationToEventInstance(eventInstance, eventDef, // must first be modified by applyMutationToEventDef
eventConfig, mutation, calendar) {
    var dateEnv = calendar.dateEnv;
    var forceAllDay = mutation.standardProps && mutation.standardProps.allDay === true;
    var clearEnd = mutation.standardProps && mutation.standardProps.hasEnd === false;
    var copy = __assign({}, eventInstance);
    if (forceAllDay) {
        copy.range = computeAlignedDayRange(copy.range);
    }
    if (mutation.datesDelta && eventConfig.startEditable) {
        copy.range = {
            start: dateEnv.add(copy.range.start, mutation.datesDelta),
            end: dateEnv.add(copy.range.end, mutation.datesDelta)
        };
    }
    if (mutation.startDelta && eventConfig.durationEditable) {
        copy.range = {
            start: dateEnv.add(copy.range.start, mutation.startDelta),
            end: copy.range.end
        };
    }
    if (mutation.endDelta && eventConfig.durationEditable) {
        copy.range = {
            start: copy.range.start,
            end: dateEnv.add(copy.range.end, mutation.endDelta)
        };
    }
    if (clearEnd) {
        copy.range = {
            start: copy.range.start,
            end: calendar.getDefaultEventEnd(eventDef.allDay, copy.range.start)
        };
    }
    // in case event was all-day but the supplied deltas were not
    // better util for this?
    if (eventDef.allDay) {
        copy.range = {
            start: startOfDay(copy.range.start),
            end: startOfDay(copy.range.end)
        };
    }
    // handle invalid durations
    if (copy.range.end < copy.range.start) {
        copy.range.end = calendar.getDefaultEventEnd(eventDef.allDay, copy.range.start);
    }
    return copy;
}

// high-level segmenting-aware tester functions
// ------------------------------------------------------------------------------------------------------------------------
function isInteractionValid(interaction, calendar) {
    return isNewPropsValid({ eventDrag: interaction }, calendar); // HACK: the eventDrag props is used for ALL interactions
}
function isDateSelectionValid(dateSelection, calendar) {
    return isNewPropsValid({ dateSelection: dateSelection }, calendar);
}
function isNewPropsValid(newProps, calendar) {
    var view = calendar.view;
    var props = __assign({ businessHours: view ? view.props.businessHours : createEmptyEventStore(), dateSelection: '', eventStore: calendar.state.eventStore, eventUiBases: calendar.eventUiBases, eventSelection: '', eventDrag: null, eventResize: null }, newProps);
    return (calendar.pluginSystem.hooks.isPropsValid || isPropsValid)(props, calendar);
}
function isPropsValid(state, calendar, dateSpanMeta, filterConfig) {
    if (dateSpanMeta === void 0) { dateSpanMeta = {}; }
    if (state.eventDrag && !isInteractionPropsValid(state, calendar, dateSpanMeta, filterConfig)) {
        return false;
    }
    if (state.dateSelection && !isDateSelectionPropsValid(state, calendar, dateSpanMeta, filterConfig)) {
        return false;
    }
    return true;
}
// Moving Event Validation
// ------------------------------------------------------------------------------------------------------------------------
function isInteractionPropsValid(state, calendar, dateSpanMeta, filterConfig) {
    var interaction = state.eventDrag; // HACK: the eventDrag props is used for ALL interactions
    var subjectEventStore = interaction.mutatedEvents;
    var subjectDefs = subjectEventStore.defs;
    var subjectInstances = subjectEventStore.instances;
    var subjectConfigs = compileEventUis(subjectDefs, interaction.isEvent ?
        state.eventUiBases :
        { '': calendar.selectionConfig } // if not a real event, validate as a selection
    );
    if (filterConfig) {
        subjectConfigs = mapHash(subjectConfigs, filterConfig);
    }
    var otherEventStore = excludeInstances(state.eventStore, interaction.affectedEvents.instances); // exclude the subject events. TODO: exclude defs too?
    var otherDefs = otherEventStore.defs;
    var otherInstances = otherEventStore.instances;
    var otherConfigs = compileEventUis(otherDefs, state.eventUiBases);
    for (var subjectInstanceId in subjectInstances) {
        var subjectInstance = subjectInstances[subjectInstanceId];
        var subjectRange = subjectInstance.range;
        var subjectConfig = subjectConfigs[subjectInstance.defId];
        var subjectDef = subjectDefs[subjectInstance.defId];
        // constraint
        if (!allConstraintsPass(subjectConfig.constraints, subjectRange, otherEventStore, state.businessHours, calendar)) {
            return false;
        }
        // overlap
        var overlapFunc = calendar.opt('eventOverlap');
        if (typeof overlapFunc !== 'function') {
            overlapFunc = null;
        }
        for (var otherInstanceId in otherInstances) {
            var otherInstance = otherInstances[otherInstanceId];
            // intersect! evaluate
            if (rangesIntersect(subjectRange, otherInstance.range)) {
                var otherOverlap = otherConfigs[otherInstance.defId].overlap;
                // consider the other event's overlap. only do this if the subject event is a "real" event
                if (otherOverlap === false && interaction.isEvent) {
                    return false;
                }
                if (subjectConfig.overlap === false) {
                    return false;
                }
                if (overlapFunc && !overlapFunc(new EventApi(calendar, otherDefs[otherInstance.defId], otherInstance), // still event
                new EventApi(calendar, subjectDef, subjectInstance) // moving event
                )) {
                    return false;
                }
            }
        }
        // allow (a function)
        var calendarEventStore = calendar.state.eventStore; // need global-to-calendar, not local to component (splittable)state
        for (var _i = 0, _a = subjectConfig.allows; _i < _a.length; _i++) {
            var subjectAllow = _a[_i];
            var subjectDateSpan = __assign({}, dateSpanMeta, { range: subjectInstance.range, allDay: subjectDef.allDay });
            var origDef = calendarEventStore.defs[subjectDef.defId];
            var origInstance = calendarEventStore.instances[subjectInstanceId];
            var eventApi = void 0;
            if (origDef) { // was previously in the calendar
                eventApi = new EventApi(calendar, origDef, origInstance);
            }
            else { // was an external event
                eventApi = new EventApi(calendar, subjectDef); // no instance, because had no dates
            }
            if (!subjectAllow(calendar.buildDateSpanApi(subjectDateSpan), eventApi)) {
                return false;
            }
        }
    }
    return true;
}
// Date Selection Validation
// ------------------------------------------------------------------------------------------------------------------------
function isDateSelectionPropsValid(state, calendar, dateSpanMeta, filterConfig) {
    var relevantEventStore = state.eventStore;
    var relevantDefs = relevantEventStore.defs;
    var relevantInstances = relevantEventStore.instances;
    var selection = state.dateSelection;
    var selectionRange = selection.range;
    var selectionConfig = calendar.selectionConfig;
    if (filterConfig) {
        selectionConfig = filterConfig(selectionConfig);
    }
    // constraint
    if (!allConstraintsPass(selectionConfig.constraints, selectionRange, relevantEventStore, state.businessHours, calendar)) {
        return false;
    }
    // overlap
    var overlapFunc = calendar.opt('selectOverlap');
    if (typeof overlapFunc !== 'function') {
        overlapFunc = null;
    }
    for (var relevantInstanceId in relevantInstances) {
        var relevantInstance = relevantInstances[relevantInstanceId];
        // intersect! evaluate
        if (rangesIntersect(selectionRange, relevantInstance.range)) {
            if (selectionConfig.overlap === false) {
                return false;
            }
            if (overlapFunc && !overlapFunc(new EventApi(calendar, relevantDefs[relevantInstance.defId], relevantInstance))) {
                return false;
            }
        }
    }
    // allow (a function)
    for (var _i = 0, _a = selectionConfig.allows; _i < _a.length; _i++) {
        var selectionAllow = _a[_i];
        var fullDateSpan = __assign({}, dateSpanMeta, selection);
        if (!selectionAllow(calendar.buildDateSpanApi(fullDateSpan), null)) {
            return false;
        }
    }
    return true;
}
// Constraint Utils
// ------------------------------------------------------------------------------------------------------------------------
function allConstraintsPass(constraints, subjectRange, otherEventStore, businessHoursUnexpanded, calendar) {
    for (var _i = 0, constraints_1 = constraints; _i < constraints_1.length; _i++) {
        var constraint = constraints_1[_i];
        if (!anyRangesContainRange(constraintToRanges(constraint, subjectRange, otherEventStore, businessHoursUnexpanded, calendar), subjectRange)) {
            return false;
        }
    }
    return true;
}
function constraintToRanges(constraint, subjectRange, // for expanding a recurring constraint, or expanding business hours
otherEventStore, // for if constraint is an even group ID
businessHoursUnexpanded, // for if constraint is 'businessHours'
calendar // for expanding businesshours
) {
    if (constraint === 'businessHours') {
        return eventStoreToRanges(expandRecurring(businessHoursUnexpanded, subjectRange, calendar));
    }
    else if (typeof constraint === 'string') { // an group ID
        return eventStoreToRanges(filterEventStoreDefs(otherEventStore, function (eventDef) {
            return eventDef.groupId === constraint;
        }));
    }
    else if (typeof constraint === 'object' && constraint) { // non-null object
        return eventStoreToRanges(expandRecurring(constraint, subjectRange, calendar));
    }
    return []; // if it's false
}
// TODO: move to event-store file?
function eventStoreToRanges(eventStore) {
    var instances = eventStore.instances;
    var ranges = [];
    for (var instanceId in instances) {
        ranges.push(instances[instanceId].range);
    }
    return ranges;
}
// TODO: move to geom file?
function anyRangesContainRange(outerRanges, innerRange) {
    for (var _i = 0, outerRanges_1 = outerRanges; _i < outerRanges_1.length; _i++) {
        var outerRange = outerRanges_1[_i];
        if (rangeContainsRange(outerRange, innerRange)) {
            return true;
        }
    }
    return false;
}
// Parsing
// ------------------------------------------------------------------------------------------------------------------------
function normalizeConstraint(input, calendar) {
    if (Array.isArray(input)) {
        return parseEvents(input, '', calendar, true); // allowOpenRange=true
    }
    else if (typeof input === 'object' && input) { // non-null object
        return parseEvents([input], '', calendar, true); // allowOpenRange=true
    }
    else if (input != null) {
        return String(input);
    }
    else {
        return null;
    }
}

// Generates HTML for an anchor to another view into the calendar.
// Will either generate an  tag or a non-clickable  tag, depending on enabled settings.
// `gotoOptions` can either be a DateMarker, or an object with the form:
// { date, type, forceOff }
// `type` is a view-type like "day" or "week". default value is "day".
// `attrs` and `innerHtml` are use to generate the rest of the HTML tag.
function buildGotoAnchorHtml(component, gotoOptions, attrs, innerHtml) {
    var dateEnv = component.dateEnv;
    var date;
    var type;
    var forceOff;
    var finalOptions;
    if (gotoOptions instanceof Date) {
        date = gotoOptions; // a single date-like input
    }
    else {
        date = gotoOptions.date;
        type = gotoOptions.type;
        forceOff = gotoOptions.forceOff;
    }
    finalOptions = {
        date: dateEnv.formatIso(date, { omitTime: true }),
        type: type || 'day'
    };
    if (typeof attrs === 'string') {
        innerHtml = attrs;
        attrs = null;
    }
    attrs = attrs ? ' ' + attrsToStr(attrs) : ''; // will have a leading space
    innerHtml = innerHtml || '';
    if (!forceOff && component.opt('navLinks')) {
        return '' +
            innerHtml +
            '';
    }
    else {
        return '' +
            innerHtml +
            '';
    }
}
function getAllDayHtml(component) {
    return component.opt('allDayHtml') || htmlEscape(component.opt('allDayText'));
}
// Computes HTML classNames for a single-day element
function getDayClasses(date, dateProfile, context, noThemeHighlight) {
    var calendar = context.calendar, view = context.view, theme = context.theme, dateEnv = context.dateEnv;
    var classes = [];
    var todayStart;
    var todayEnd;
    if (!rangeContainsMarker(dateProfile.activeRange, date)) {
        classes.push('fc-disabled-day');
    }
    else {
        classes.push('fc-' + DAY_IDS[date.getUTCDay()]);
        if (view.opt('monthMode') &&
            dateEnv.getMonth(date) !== dateEnv.getMonth(dateProfile.currentRange.start)) {
            classes.push('fc-other-month');
        }
        todayStart = startOfDay(calendar.getNow());
        todayEnd = addDays(todayStart, 1);
        if (date < todayStart) {
            classes.push('fc-past');
        }
        else if (date >= todayEnd) {
            classes.push('fc-future');
        }
        else {
            classes.push('fc-today');
            if (noThemeHighlight !== true) {
                classes.push(theme.getClass('today'));
            }
        }
    }
    return classes;
}

// given a function that resolves a result asynchronously.
// the function can either call passed-in success and failure callbacks,
// or it can return a promise.
// if you need to pass additional params to func, bind them first.
function unpromisify(func, success, failure) {
    // guard against success/failure callbacks being called more than once
    // and guard against a promise AND callback being used together.
    var isResolved = false;
    var wrappedSuccess = function () {
        if (!isResolved) {
            isResolved = true;
            success.apply(this, arguments);
        }
    };
    var wrappedFailure = function () {
        if (!isResolved) {
            isResolved = true;
            if (failure) {
                failure.apply(this, arguments);
            }
        }
    };
    var res = func(wrappedSuccess, wrappedFailure);
    if (res && typeof res.then === 'function') {
        res.then(wrappedSuccess, wrappedFailure);
    }
}

/*
USAGE:
  import { default as EmitterMixin, EmitterInterface } from './EmitterMixin'
in class:
  on: EmitterInterface['on']
  one: EmitterInterface['one']
  off: EmitterInterface['off']
  trigger: EmitterInterface['trigger']
  triggerWith: EmitterInterface['triggerWith']
  hasHandlers: EmitterInterface['hasHandlers']
after class:
  EmitterMixin.mixInto(TheClass)
*/
var EmitterMixin = /** @class */ (function (_super) {
    __extends(EmitterMixin, _super);
    function EmitterMixin() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    EmitterMixin.prototype.on = function (type, handler) {
        addToHash(this._handlers || (this._handlers = {}), type, handler);
        return this; // for chaining
    };
    // todo: add comments
    EmitterMixin.prototype.one = function (type, handler) {
        addToHash(this._oneHandlers || (this._oneHandlers = {}), type, handler);
        return this; // for chaining
    };
    EmitterMixin.prototype.off = function (type, handler) {
        if (this._handlers) {
            removeFromHash(this._handlers, type, handler);
        }
        if (this._oneHandlers) {
            removeFromHash(this._oneHandlers, type, handler);
        }
        return this; // for chaining
    };
    EmitterMixin.prototype.trigger = function (type) {
        var args = [];
        for (var _i = 1; _i < arguments.length; _i++) {
            args[_i - 1] = arguments[_i];
        }
        this.triggerWith(type, this, args);
        return this; // for chaining
    };
    EmitterMixin.prototype.triggerWith = function (type, context, args) {
        if (this._handlers) {
            applyAll(this._handlers[type], context, args);
        }
        if (this._oneHandlers) {
            applyAll(this._oneHandlers[type], context, args);
            delete this._oneHandlers[type]; // will never fire again
        }
        return this; // for chaining
    };
    EmitterMixin.prototype.hasHandlers = function (type) {
        return (this._handlers && this._handlers[type] && this._handlers[type].length) ||
            (this._oneHandlers && this._oneHandlers[type] && this._oneHandlers[type].length);
    };
    return EmitterMixin;
}(Mixin));
function addToHash(hash, type, handler) {
    (hash[type] || (hash[type] = []))
        .push(handler);
}
function removeFromHash(hash, type, handler) {
    if (handler) {
        if (hash[type]) {
            hash[type] = hash[type].filter(function (func) {
                return func !== handler;
            });
        }
    }
    else {
        delete hash[type]; // remove all handler funcs for this type
    }
}

/*
Records offset information for a set of elements, relative to an origin element.
Can record the left/right OR the top/bottom OR both.
Provides methods for querying the cache by position.
*/
var PositionCache = /** @class */ (function () {
    function PositionCache(originEl, els, isHorizontal, isVertical) {
        this.originEl = originEl;
        this.els = els;
        this.isHorizontal = isHorizontal;
        this.isVertical = isVertical;
    }
    // Queries the els for coordinates and stores them.
    // Call this method before using and of the get* methods below.
    PositionCache.prototype.build = function () {
        var originEl = this.originEl;
        var originClientRect = this.originClientRect =
            originEl.getBoundingClientRect(); // relative to viewport top-left
        if (this.isHorizontal) {
            this.buildElHorizontals(originClientRect.left);
        }
        if (this.isVertical) {
            this.buildElVerticals(originClientRect.top);
        }
    };
    // Populates the left/right internal coordinate arrays
    PositionCache.prototype.buildElHorizontals = function (originClientLeft) {
        var lefts = [];
        var rights = [];
        for (var _i = 0, _a = this.els; _i < _a.length; _i++) {
            var el = _a[_i];
            var rect = el.getBoundingClientRect();
            lefts.push(rect.left - originClientLeft);
            rights.push(rect.right - originClientLeft);
        }
        this.lefts = lefts;
        this.rights = rights;
    };
    // Populates the top/bottom internal coordinate arrays
    PositionCache.prototype.buildElVerticals = function (originClientTop) {
        var tops = [];
        var bottoms = [];
        for (var _i = 0, _a = this.els; _i < _a.length; _i++) {
            var el = _a[_i];
            var rect = el.getBoundingClientRect();
            tops.push(rect.top - originClientTop);
            bottoms.push(rect.bottom - originClientTop);
        }
        this.tops = tops;
        this.bottoms = bottoms;
    };
    // Given a left offset (from document left), returns the index of the el that it horizontally intersects.
    // If no intersection is made, returns undefined.
    PositionCache.prototype.leftToIndex = function (leftPosition) {
        var lefts = this.lefts;
        var rights = this.rights;
        var len = lefts.length;
        var i;
        for (i = 0; i < len; i++) {
            if (leftPosition >= lefts[i] && leftPosition < rights[i]) {
                return i;
            }
        }
    };
    // Given a top offset (from document top), returns the index of the el that it vertically intersects.
    // If no intersection is made, returns undefined.
    PositionCache.prototype.topToIndex = function (topPosition) {
        var tops = this.tops;
        var bottoms = this.bottoms;
        var len = tops.length;
        var i;
        for (i = 0; i < len; i++) {
            if (topPosition >= tops[i] && topPosition < bottoms[i]) {
                return i;
            }
        }
    };
    // Gets the width of the element at the given index
    PositionCache.prototype.getWidth = function (leftIndex) {
        return this.rights[leftIndex] - this.lefts[leftIndex];
    };
    // Gets the height of the element at the given index
    PositionCache.prototype.getHeight = function (topIndex) {
        return this.bottoms[topIndex] - this.tops[topIndex];
    };
    return PositionCache;
}());

/*
An object for getting/setting scroll-related information for an element.
Internally, this is done very differently for window versus DOM element,
so this object serves as a common interface.
*/
var ScrollController = /** @class */ (function () {
    function ScrollController() {
    }
    ScrollController.prototype.getMaxScrollTop = function () {
        return this.getScrollHeight() - this.getClientHeight();
    };
    ScrollController.prototype.getMaxScrollLeft = function () {
        return this.getScrollWidth() - this.getClientWidth();
    };
    ScrollController.prototype.canScrollVertically = function () {
        return this.getMaxScrollTop() > 0;
    };
    ScrollController.prototype.canScrollHorizontally = function () {
        return this.getMaxScrollLeft() > 0;
    };
    ScrollController.prototype.canScrollUp = function () {
        return this.getScrollTop() > 0;
    };
    ScrollController.prototype.canScrollDown = function () {
        return this.getScrollTop() < this.getMaxScrollTop();
    };
    ScrollController.prototype.canScrollLeft = function () {
        return this.getScrollLeft() > 0;
    };
    ScrollController.prototype.canScrollRight = function () {
        return this.getScrollLeft() < this.getMaxScrollLeft();
    };
    return ScrollController;
}());
var ElementScrollController = /** @class */ (function (_super) {
    __extends(ElementScrollController, _super);
    function ElementScrollController(el) {
        var _this = _super.call(this) || this;
        _this.el = el;
        return _this;
    }
    ElementScrollController.prototype.getScrollTop = function () {
        return this.el.scrollTop;
    };
    ElementScrollController.prototype.getScrollLeft = function () {
        return this.el.scrollLeft;
    };
    ElementScrollController.prototype.setScrollTop = function (top) {
        this.el.scrollTop = top;
    };
    ElementScrollController.prototype.setScrollLeft = function (left) {
        this.el.scrollLeft = left;
    };
    ElementScrollController.prototype.getScrollWidth = function () {
        return this.el.scrollWidth;
    };
    ElementScrollController.prototype.getScrollHeight = function () {
        return this.el.scrollHeight;
    };
    ElementScrollController.prototype.getClientHeight = function () {
        return this.el.clientHeight;
    };
    ElementScrollController.prototype.getClientWidth = function () {
        return this.el.clientWidth;
    };
    return ElementScrollController;
}(ScrollController));
var WindowScrollController = /** @class */ (function (_super) {
    __extends(WindowScrollController, _super);
    function WindowScrollController() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    WindowScrollController.prototype.getScrollTop = function () {
        return window.pageYOffset;
    };
    WindowScrollController.prototype.getScrollLeft = function () {
        return window.pageXOffset;
    };
    WindowScrollController.prototype.setScrollTop = function (n) {
        window.scroll(window.pageXOffset, n);
    };
    WindowScrollController.prototype.setScrollLeft = function (n) {
        window.scroll(n, window.pageYOffset);
    };
    WindowScrollController.prototype.getScrollWidth = function () {
        return document.documentElement.scrollWidth;
    };
    WindowScrollController.prototype.getScrollHeight = function () {
        return document.documentElement.scrollHeight;
    };
    WindowScrollController.prototype.getClientHeight = function () {
        return document.documentElement.clientHeight;
    };
    WindowScrollController.prototype.getClientWidth = function () {
        return document.documentElement.clientWidth;
    };
    return WindowScrollController;
}(ScrollController));

/*
Embodies a div that has potential scrollbars
*/
var ScrollComponent = /** @class */ (function (_super) {
    __extends(ScrollComponent, _super);
    function ScrollComponent(overflowX, overflowY) {
        var _this = _super.call(this, createElement('div', {
            className: 'fc-scroller'
        })) || this;
        _this.overflowX = overflowX;
        _this.overflowY = overflowY;
        _this.applyOverflow();
        return _this;
    }
    // sets to natural height, unlocks overflow
    ScrollComponent.prototype.clear = function () {
        this.setHeight('auto');
        this.applyOverflow();
    };
    ScrollComponent.prototype.destroy = function () {
        removeElement(this.el);
    };
    // Overflow
    // -----------------------------------------------------------------------------------------------------------------
    ScrollComponent.prototype.applyOverflow = function () {
        applyStyle(this.el, {
            overflowX: this.overflowX,
            overflowY: this.overflowY
        });
    };
    // Causes any 'auto' overflow values to resolves to 'scroll' or 'hidden'.
    // Useful for preserving scrollbar widths regardless of future resizes.
    // Can pass in scrollbarWidths for optimization.
    ScrollComponent.prototype.lockOverflow = function (scrollbarWidths) {
        var overflowX = this.overflowX;
        var overflowY = this.overflowY;
        scrollbarWidths = scrollbarWidths || this.getScrollbarWidths();
        if (overflowX === 'auto') {
            overflowX = (scrollbarWidths.bottom || // horizontal scrollbars?
                this.canScrollHorizontally() // OR scrolling pane with massless scrollbars?
            ) ? 'scroll' : 'hidden';
        }
        if (overflowY === 'auto') {
            overflowY = (scrollbarWidths.left || scrollbarWidths.right || // horizontal scrollbars?
                this.canScrollVertically() // OR scrolling pane with massless scrollbars?
            ) ? 'scroll' : 'hidden';
        }
        applyStyle(this.el, { overflowX: overflowX, overflowY: overflowY });
    };
    ScrollComponent.prototype.setHeight = function (height) {
        applyStyleProp(this.el, 'height', height);
    };
    ScrollComponent.prototype.getScrollbarWidths = function () {
        var edges = computeEdges(this.el);
        return {
            left: edges.scrollbarLeft,
            right: edges.scrollbarRight,
            bottom: edges.scrollbarBottom
        };
    };
    return ScrollComponent;
}(ElementScrollController));

/*
PURPOSES:
- hook up to fg, fill, and mirror renderers
- interface for dragging and hits
*/
var DateComponent = /** @class */ (function (_super) {
    __extends(DateComponent, _super);
    function DateComponent(context, el, isView) {
        var _this = _super.call(this, context, isView) || this;
        _this.el = el;
        return _this;
    }
    DateComponent.prototype.destroy = function () {
        _super.prototype.destroy.call(this);
        removeElement(this.el);
    };
    // TODO: WHAT ABOUT (sourceSeg && sourceSeg.component.doesDragMirror)
    //
    // Event Drag-n-Drop Rendering (for both events and external elements)
    // ---------------------------------------------------------------------------------------------------------------
    /*
    renderEventDragSegs(state: EventSegUiInteractionState) {
      if (state) {
        let { isEvent, segs, sourceSeg } = state

        if (this.eventRenderer) {
          this.eventRenderer.hideByHash(state.affectedInstances)
        }

        // if the user is dragging something that is considered an event with real event data,
        // and this component likes to do drag mirrors OR the component where the seg came from
        // likes to do drag mirrors, then render a drag mirror.
        if (isEvent && (this.doesDragMirror || sourceSeg && sourceSeg.component.doesDragMirror)) {
          if (this.mirrorRenderer) {
            this.mirrorRenderer.renderSegs(segs, { isDragging: true, sourceSeg })
          }
        }

        // if it would be impossible to render a drag mirror OR this component likes to render
        // highlights, then render a highlight.
        if (!isEvent || this.doesDragHighlight) {
          if (this.fillRenderer) {
            this.fillRenderer.renderSegs('highlight', segs)
          }
        }
      }
    }
    */
    // Hit System
    // -----------------------------------------------------------------------------------------------------------------
    DateComponent.prototype.buildPositionCaches = function () {
    };
    DateComponent.prototype.queryHit = function (positionLeft, positionTop, elWidth, elHeight) {
        return null; // this should be abstract
    };
    // Validation
    // -----------------------------------------------------------------------------------------------------------------
    DateComponent.prototype.isInteractionValid = function (interaction) {
        var calendar = this.calendar;
        var dateProfile = this.props.dateProfile; // HACK
        var instances = interaction.mutatedEvents.instances;
        if (dateProfile) { // HACK for DayTile
            for (var instanceId in instances) {
                if (!rangeContainsRange(dateProfile.validRange, instances[instanceId].range)) {
                    return false;
                }
            }
        }
        return isInteractionValid(interaction, calendar);
    };
    DateComponent.prototype.isDateSelectionValid = function (selection) {
        var dateProfile = this.props.dateProfile; // HACK
        if (dateProfile && // HACK for DayTile
            !rangeContainsRange(dateProfile.validRange, selection.range)) {
            return false;
        }
        return isDateSelectionValid(selection, this.calendar);
    };
    // Triggering
    // -----------------------------------------------------------------------------------------------------------------
    // TODO: move to Calendar
    DateComponent.prototype.publiclyTrigger = function (name, args) {
        var calendar = this.calendar;
        return calendar.publiclyTrigger(name, args);
    };
    DateComponent.prototype.publiclyTriggerAfterSizing = function (name, args) {
        var calendar = this.calendar;
        return calendar.publiclyTriggerAfterSizing(name, args);
    };
    DateComponent.prototype.hasPublicHandlers = function (name) {
        var calendar = this.calendar;
        return calendar.hasPublicHandlers(name);
    };
    DateComponent.prototype.triggerRenderedSegs = function (segs, isMirrors) {
        var calendar = this.calendar;
        if (this.hasPublicHandlers('eventPositioned')) {
            for (var _i = 0, segs_1 = segs; _i < segs_1.length; _i++) {
                var seg = segs_1[_i];
                this.publiclyTriggerAfterSizing('eventPositioned', [
                    {
                        event: new EventApi(calendar, seg.eventRange.def, seg.eventRange.instance),
                        isMirror: isMirrors,
                        isStart: seg.isStart,
                        isEnd: seg.isEnd,
                        el: seg.el,
                        view: this // safe to cast because this method is only called on context.view
                    }
                ]);
            }
        }
        if (!calendar.state.loadingLevel) { // avoid initial empty state while pending
            calendar.afterSizingTriggers._eventsPositioned = [null]; // fire once
        }
    };
    DateComponent.prototype.triggerWillRemoveSegs = function (segs, isMirrors) {
        var calendar = this.calendar;
        for (var _i = 0, segs_2 = segs; _i < segs_2.length; _i++) {
            var seg = segs_2[_i];
            calendar.trigger('eventElRemove', seg.el);
        }
        if (this.hasPublicHandlers('eventDestroy')) {
            for (var _a = 0, segs_3 = segs; _a < segs_3.length; _a++) {
                var seg = segs_3[_a];
                this.publiclyTrigger('eventDestroy', [
                    {
                        event: new EventApi(calendar, seg.eventRange.def, seg.eventRange.instance),
                        isMirror: isMirrors,
                        el: seg.el,
                        view: this // safe to cast because this method is only called on context.view
                    }
                ]);
            }
        }
    };
    // Pointer Interaction Utils
    // -----------------------------------------------------------------------------------------------------------------
    DateComponent.prototype.isValidSegDownEl = function (el) {
        return !this.props.eventDrag && // HACK
            !this.props.eventResize && // HACK
            !elementClosest(el, '.fc-mirror') &&
            (this.isPopover() || !this.isInPopover(el));
        // ^above line ensures we don't detect a seg interaction within a nested component.
        // it's a HACK because it only supports a popover as the nested component.
    };
    DateComponent.prototype.isValidDateDownEl = function (el) {
        var segEl = elementClosest(el, this.fgSegSelector);
        return (!segEl || segEl.classList.contains('fc-mirror')) &&
            !elementClosest(el, '.fc-more') && // a "more.." link
            !elementClosest(el, 'a[data-goto]') && // a clickable nav link
            !this.isInPopover(el);
    };
    DateComponent.prototype.isPopover = function () {
        return this.el.classList.contains('fc-popover');
    };
    DateComponent.prototype.isInPopover = function (el) {
        return Boolean(elementClosest(el, '.fc-popover'));
    };
    return DateComponent;
}(Component));
DateComponent.prototype.fgSegSelector = '.fc-event-container > *';
DateComponent.prototype.bgSegSelector = '.fc-bgevent:not(.fc-nonbusiness)';

')); // we always want it to take up height
                        isOnlyButtons = false;
                    }
                    else {
                        if ((customButtonProps = calendarCustomButtons[buttonName])) {
                            buttonClick = function (ev) {
                                if (customButtonProps.click) {
                                    customButtonProps.click.call(buttonEl, ev);
                                }
                            };
                            (buttonIcon = theme.getCustomButtonIconClass(customButtonProps)) ||
                                (buttonIcon = theme.getIconClass(buttonName)) ||
                                (buttonText = customButtonProps.text);
                        }
                        else if ((viewSpec = viewSpecs[buttonName])) {
                            _this.viewsWithButtons.push(buttonName);
                            buttonClick = function () {
                                calendar.changeView(buttonName);
                            };
                            (buttonText = viewSpec.buttonTextOverride) ||
                                (buttonIcon = theme.getIconClass(buttonName)) ||
                                (buttonText = viewSpec.buttonTextDefault);
                        }
                        else if (calendar[buttonName]) { // a calendar method
                            buttonClick = function () {
                                calendar[buttonName]();
                            };
                            (buttonText = calendarButtonTextOverrides[buttonName]) ||
                                (buttonIcon = theme.getIconClass(buttonName)) ||
                                (buttonText = calendarButtonText[buttonName]);
                            //            ^ everything else is considered default
                        }
                        if (buttonClick) {
                            buttonClasses = [
                                'fc-' + buttonName + '-button',
                                theme.getClass('button')
                            ];
                            if (buttonText) {
                                buttonInnerHtml = htmlEscape(buttonText);
                                buttonAriaAttr = '';
                            }
                            else if (buttonIcon) {
                                buttonInnerHtml = "";
                                buttonAriaAttr = ' aria-label="' + buttonName + '"';
                            }
                            buttonEl = htmlToElement(// type="button" so that it doesn't submit a form
                            '' + buttonInnerHtml + '');
                            buttonEl.addEventListener('click', buttonClick);
                            groupChildren.push(buttonEl);
                        }
                    }
                });
                if (groupChildren.length > 1) {
                    groupEl = document.createElement('div');
                    var buttonGroupClassName = theme.getClass('buttonGroup');
                    if (isOnlyButtons && buttonGroupClassName) {
                        groupEl.classList.add(buttonGroupClassName);
                    }
                    appendToElement(groupEl, groupChildren);
                    sectionEl.appendChild(groupEl);
                }
                else {
                    appendToElement(sectionEl, groupChildren); // 1 or 0 children
                }
            });
        }
        return sectionEl;
    };
    Toolbar.prototype.updateToday = function (isTodayEnabled) {
        this.toggleButtonEnabled('today', isTodayEnabled);
    };
    Toolbar.prototype.updatePrev = function (isPrevEnabled) {
        this.toggleButtonEnabled('prev', isPrevEnabled);
    };
    Toolbar.prototype.updateNext = function (isNextEnabled) {
        this.toggleButtonEnabled('next', isNextEnabled);
    };
    Toolbar.prototype.updateTitle = function (text) {
        findElements(this.el, 'h2').forEach(function (titleEl) {
            titleEl.innerText = text;
        });
    };
    Toolbar.prototype.updateActiveButton = function (buttonName) {
        var className = this.theme.getClass('buttonActive');
        findElements(this.el, 'button').forEach(function (buttonEl) {
            if (buttonName && buttonEl.classList.contains('fc-' + buttonName + '-button')) {
                buttonEl.classList.add(className);
            }
            else {
                buttonEl.classList.remove(className);
            }
        });
    };
    Toolbar.prototype.toggleButtonEnabled = function (buttonName, bool) {
        findElements(this.el, '.fc-' + buttonName + '-button').forEach(function (buttonEl) {
            buttonEl.disabled = !bool;
        });
    };
    return Toolbar;
}(Component));

/*
Detects when the user clicks on an event within a DateComponent
*/
var EventClicking = /** @class */ (function (_super) {
    __extends(EventClicking, _super);
    function EventClicking(settings) {
        var _this = _super.call(this, settings) || this;
        _this.handleSegClick = function (ev, segEl) {
            var component = _this.component;
            var seg = getElSeg(segEl);
            if (seg && // might be the

surrounding the more link
                component.isValidSegDownEl(ev.target)) {
                // our way to simulate a link click for elements that can't be  tags
                // grab before trigger fired in case trigger trashes DOM thru rerendering
                var hasUrlContainer = elementClosest(ev.target, '.fc-has-url');
                var url = hasUrlContainer ? hasUrlContainer.querySelector('a[href]').href : '';
                component.publiclyTrigger('eventClick', [
                    {
                        el: segEl,
                        event: new EventApi(component.calendar, seg.eventRange.def, seg.eventRange.instance),
                        jsEvent: ev,
                        view: component.view
                    }
                ]);
                if (url && !ev.defaultPrevented) {
                    window.location.href = url;
                }
            }
        };
        var component = settings.component;
        _this.destroy = listenBySelector(component.el, 'click', component.fgSegSelector + ',' + component.bgSegSelector, _this.handleSegClick);
        return _this;
    }
    return EventClicking;
}(Interaction));

/*
Triggers events and adds/removes core classNames when the user's pointer
enters/leaves event-elements of a component.
*/
var EventHovering = /** @class */ (function (_super) {
    __extends(EventHovering, _super);
    function EventHovering(settings) {
        var _this = _super.call(this, settings) || this;
        // for simulating an eventMouseLeave when the event el is destroyed while mouse is over it
        _this.handleEventElRemove = function (el) {
            if (el === _this.currentSegEl) {
                _this.handleSegLeave(null, _this.currentSegEl);
            }
        };
        _this.handleSegEnter = function (ev, segEl) {
            if (getElSeg(segEl)) { // TODO: better way to make sure not hovering over more+ link or its wrapper
                segEl.classList.add('fc-allow-mouse-resize');
                _this.currentSegEl = segEl;
                _this.triggerEvent('eventMouseEnter', ev, segEl);
            }
        };
        _this.handleSegLeave = function (ev, segEl) {
            if (_this.currentSegEl) {
                segEl.classList.remove('fc-allow-mouse-resize');
                _this.currentSegEl = null;
                _this.triggerEvent('eventMouseLeave', ev, segEl);
            }
        };
        var component = settings.component;
        _this.removeHoverListeners = listenToHoverBySelector(component.el, component.fgSegSelector + ',' + component.bgSegSelector, _this.handleSegEnter, _this.handleSegLeave);
        component.calendar.on('eventElRemove', _this.handleEventElRemove);
        return _this;
    }
    EventHovering.prototype.destroy = function () {
        this.removeHoverListeners();
        this.component.calendar.off('eventElRemove', this.handleEventElRemove);
    };
    EventHovering.prototype.triggerEvent = function (publicEvName, ev, segEl) {
        var component = this.component;
        var seg = getElSeg(segEl);
        if (!ev || component.isValidSegDownEl(ev.target)) {
            component.publiclyTrigger(publicEvName, [
                {
                    el: segEl,
                    event: new EventApi(this.component.calendar, seg.eventRange.def, seg.eventRange.instance),
                    jsEvent: ev,
                    view: component.view
                }
            ]);
        }
    };
    return EventHovering;
}(Interaction));

var NamedTimeZoneImpl = /** @class */ (function () {
    function NamedTimeZoneImpl(timeZoneName) {
        this.timeZoneName = timeZoneName;
    }
    return NamedTimeZoneImpl;
}());

/*
An abstraction for a dragging interaction originating on an event.
Does higher-level things than PointerDragger, such as possibly:
- a "mirror" that moves with the pointer
- a minimum number of pixels or other criteria for a true drag to begin

subclasses must emit:
- pointerdown
- dragstart
- dragmove
- pointerup
- dragend
*/
var ElementDragging = /** @class */ (function () {
    function ElementDragging(el) {
        this.emitter = new EmitterMixin();
    }
    ElementDragging.prototype.destroy = function () {
    };
    ElementDragging.prototype.setMirrorIsVisible = function (bool) {
        // optional if subclass doesn't want to support a mirror
    };
    ElementDragging.prototype.setMirrorNeedsRevert = function (bool) {
        // optional if subclass doesn't want to support a mirror
    };
    ElementDragging.prototype.setAutoScrollEnabled = function (bool) {
        // optional
    };
    return ElementDragging;
}());

// Computes a default column header formatting string if `colFormat` is not explicitly defined
function computeFallbackHeaderFormat(datesRepDistinctDays, dayCnt) {
    // if more than one week row, or if there are a lot of columns with not much space,
    // put just the day numbers will be in each cell
    if (!datesRepDistinctDays || dayCnt > 10) {
        return { weekday: 'short' }; // "Sat"
    }
    else if (dayCnt > 1) {
        return { weekday: 'short', month: 'numeric', day: 'numeric', omitCommas: true }; // "Sat 11/12"
    }
    else {
        return { weekday: 'long' }; // "Saturday"
    }
}
function renderDateCell(dateMarker, dateProfile, datesRepDistinctDays, colCnt, colHeadFormat, context, colspan, otherAttrs) {
    var view = context.view, dateEnv = context.dateEnv, theme = context.theme, options = context.options;
    var isDateValid = rangeContainsMarker(dateProfile.activeRange, dateMarker); // TODO: called too frequently. cache somehow.
    var classNames = [
        'fc-day-header',
        theme.getClass('widgetHeader')
    ];
    var innerHtml;
    if (typeof options.columnHeaderHtml === 'function') {
        innerHtml = options.columnHeaderHtml(dateEnv.toDate(dateMarker));
    }
    else if (typeof options.columnHeaderText === 'function') {
        innerHtml = htmlEscape(options.columnHeaderText(dateEnv.toDate(dateMarker)));
    }
    else {
        innerHtml = htmlEscape(dateEnv.format(dateMarker, colHeadFormat));
    }
    // if only one row of days, the classNames on the header can represent the specific days beneath
    if (datesRepDistinctDays) {
        classNames = classNames.concat(
        // includes the day-of-week class
        // noThemeHighlight=true (don't highlight the header)
        getDayClasses(dateMarker, dateProfile, context, true));
    }
    else {
        classNames.push('fc-' + DAY_IDS[dateMarker.getUTCDay()]); // only add the day-of-week class
    }
    return '' +
        ' 1 ?
            ' colspan="' + colspan + '"' :
            '') +
        (otherAttrs ?
            ' ' + otherAttrs :
            '') +
        '>' +
        (isDateValid ?
            // don't make a link if the heading could represent multiple days, or if there's only one day (forceOff)
            buildGotoAnchorHtml(view, { date: dateMarker, forceOff: !datesRepDistinctDays || colCnt === 1 }, innerHtml) :
            // if not valid, display text, but no link
            innerHtml) +
        '';
}

var DayHeader = /** @class */ (function (_super) {
    __extends(DayHeader, _super);
    function DayHeader(context, parentEl) {
        var _this = _super.call(this, context) || this;
        parentEl.innerHTML = ''; // because might be nbsp
        parentEl.appendChild(_this.el = htmlToElement('

' +
            '' +
            '' +
            '' +
            '

'));
        _this.thead = _this.el.querySelector('thead');
        return _this;
    }
    DayHeader.prototype.destroy = function () {
        removeElement(this.el);
    };
    DayHeader.prototype.render = function (props) {
        var dates = props.dates, datesRepDistinctDays = props.datesRepDistinctDays;
        var parts = [];
        if (props.renderIntroHtml) {
            parts.push(props.renderIntroHtml());
        }
        var colHeadFormat = createFormatter(this.opt('columnHeaderFormat') ||
            computeFallbackHeaderFormat(datesRepDistinctDays, dates.length));
        for (var _i = 0, dates_1 = dates; _i < dates_1.length; _i++) {
            var date = dates_1[_i];
            parts.push(renderDateCell(date, props.dateProfile, datesRepDistinctDays, dates.length, colHeadFormat, this.context));
        }
        if (this.isRtl) {
            parts.reverse();
        }
        this.thead.innerHTML = '' + parts.join('') + '';
    };
    return DayHeader;
}(Component));

// exports
// --------------------------------------------------------------------------------------------------
var version = '4.3.1';

export { Calendar, Component, DateComponent, DateEnv, DateProfileGenerator, DayHeader, DaySeries, DayTable, ElementDragging, ElementScrollController, EmitterMixin, EventApi, FgEventRenderer, FillRenderer, Interaction, Mixin, NamedTimeZoneImpl, PositionCache, ScrollComponent, ScrollController, Slicer, Splitter, Theme, View, WindowScrollController, addDays, addDurations, addMs, addWeeks, allowContextMenu, allowSelection, appendToElement, applyAll, applyMutationToEventStore, applyStyle, applyStyleProp, asRoughMinutes, asRoughMs, asRoughSeconds, buildGotoAnchorHtml, buildSegCompareObj, capitaliseFirstLetter, combineEventUis, compareByFieldSpec, compareByFieldSpecs, compareNumbers, compensateScroll, computeClippingRect, computeEdges, computeFallbackHeaderFormat, computeHeightAndMargins, computeInnerRect, computeRect, computeVisibleDayRange, config, constrainPoint, createDuration, createElement, createEmptyEventStore, createEventInstance, createFormatter, createPlugin, cssToStr, debounce, diffDates, diffDayAndTime, diffDays, diffPoints, diffWeeks, diffWholeDays, diffWholeWeeks, disableCursor, distributeHeight, elementClosest, elementMatches, enableCursor, eventTupleToStore, filterEventStoreDefs, filterHash, findChildren, findElements, flexibleCompare, forceClassName, formatDate, formatIsoTimeString, formatRange, getAllDayHtml, getClippingParents, getDayClasses, getElSeg, getRectCenter, getRelevantEvents, globalDefaults, greatestDurationDenominator, hasBgRendering, htmlEscape, htmlToElement, insertAfterElement, interactionSettingsStore, interactionSettingsToStore, intersectRanges, intersectRects, isArraysEqual, isDateSpansEqual, isInt, isInteractionValid, isMultiDayRange, isPropsEqual, isPropsValid, isSingleDay, isValidDate, listenBySelector, mapHash, matchCellWidths, memoize, memoizeOutput, memoizeRendering, mergeEventStores, multiplyDuration, padStart, parseBusinessHours, parseDragMeta, parseEventDef, parseFieldSpecs, parse as parseMarker, pointInsideRect, prependToElement, preventContextMenu, preventDefault, preventSelection, processScopedUiProps, rangeContainsMarker, rangeContainsRange, rangesEqual, rangesIntersect, refineProps, removeElement, removeExact, renderDateCell, requestJson, sliceEventStore, startOfDay, subtractInnerElHeight, translateRect, uncompensateScroll, undistributeHeight, unpromisify, version, whenTransitionDone, wholeDivideDurations };

/*!
FullCalendar Core Package v4.3.1
Docs & License: https://fullcalendar.io/
(c) 2019 Adam Shaw
*/

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
    typeof define === 'function' && define.amd ? define(['exports'], factory) :
    (global = global || self, factory(global.FullCalendar = {}));
}(this, function (exports) { 'use strict';

    // Creating
    // ----------------------------------------------------------------------------------------------------------------
    var elementPropHash = {
        className: true,
        colSpan: true,
        rowSpan: true
    };
    var containerTagHash = {
        '= rect.left &&
            point.left < rect.right &&
            point.top >= rect.top &&
            point.top < rect.bottom;
    }
    // Returns a new rectangle that is the intersection of the two rectangles. If they don't intersect, returns false
    function intersectRects(rect1, rect2) {
        var res = {
            left: Math.max(rect1.left, rect2.left),
            right: Math.min(rect1.right, rect2.right),
            top: Math.max(rect1.top, rect2.top),
            bottom: Math.min(rect1.bottom, rect2.bottom)
        };
        if (res.left < res.right && res.top < res.bottom) {
            return res;
        }
        return false;
    }
    function translateRect(rect, deltaX, deltaY) {
        return {
            left: rect.left + deltaX,
            right: rect.right + deltaX,
            top: rect.top + deltaY,
            bottom: rect.bottom + deltaY
        };
    }
    // Returns a new point that will have been moved to reside within the given rectangle
    function constrainPoint(point, rect) {
        return {
            left: Math.min(Math.max(point.left, rect.left), rect.right),
            top: Math.min(Math.max(point.top, rect.top), rect.bottom)
        };
    }
    // Returns a point that is the center of the given rectangle
    function getRectCenter(rect) {
        return {
            left: (rect.left + rect.right) / 2,
            top: (rect.top + rect.bottom) / 2
        };
    }
    // Subtracts point2's coordinates from point1's coordinates, returning a delta
    function diffPoints(point1, point2) {
        return {
            left: point1.left - point2.left,
            top: point1.top - point2.top
        };
    }

    // Logic for determining if, when the element is right-to-left, the scrollbar appears on the left side
    var isRtlScrollbarOnLeft = null;
    function getIsRtlScrollbarOnLeft() {
        if (isRtlScrollbarOnLeft === null) {
            isRtlScrollbarOnLeft = computeIsRtlScrollbarOnLeft();
        }
        return isRtlScrollbarOnLeft;
    }
    function computeIsRtlScrollbarOnLeft() {
        var outerEl = createElement('div', {
            style: {
                position: 'absolute',
                top: -1000,
                left: 0,
                border: 0,
                padding: 0,
                overflow: 'scroll',
                direction: 'rtl'
            }
        }, '

');
        document.body.appendChild(outerEl);
        var innerEl = outerEl.firstChild;
        var res = innerEl.getBoundingClientRect().left > outerEl.getBoundingClientRect().left;
        removeElement(outerEl);
        return res;
    }
    // The scrollbar width computations in computeEdges are sometimes flawed when it comes to
    // retina displays, rounding, and IE11. Massage them into a usable value.
    function sanitizeScrollbarWidth(width) {
        width = Math.max(0, width); // no negatives
        width = Math.round(width);
        return width;
    }

    // Stops a mouse/touch event from doing it's native browser action
    function preventDefault(ev) {
        ev.preventDefault();
    }
    // Event Delegation
    // ----------------------------------------------------------------------------------------------------------------
    function listenBySelector(container, eventType, selector, handler) {
        function realHandler(ev) {
            var matchedChild = elementClosest(ev.target, selector);
            if (matchedChild) {
                handler.call(matchedChild, ev, matchedChild);
            }
        }
        container.addEventListener(eventType, realHandler);
        return function () {
            container.removeEventListener(eventType, realHandler);
        };
    }
    function listenToHoverBySelector(container, selector, onMouseEnter, onMouseLeave) {
        var currentMatchedChild;
        return listenBySelector(container, 'mouseover', selector, function (ev, matchedChild) {
            if (matchedChild !== currentMatchedChild) {
                currentMatchedChild = matchedChild;
                onMouseEnter(ev, matchedChild);
                var realOnMouseLeave_1 = function (ev) {
                    currentMatchedChild = null;
                    onMouseLeave(ev, matchedChild);
                    matchedChild.removeEventListener('mouseleave', realOnMouseLeave_1);
                };
                // listen to the next mouseleave, and then unattach
                matchedChild.addEventListener('mouseleave', realOnMouseLeave_1);
            }
        });
    }
    // Animation
    // ----------------------------------------------------------------------------------------------------------------
    var transitionEventNames = [
        'webkitTransitionEnd',
        'otransitionend',
        'oTransitionEnd',
        'msTransitionEnd',
        'transitionend'
    ];
    // triggered only when the next single subsequent transition finishes
    function whenTransitionDone(el, callback) {
        var realCallback = function (ev) {
            callback(ev);
            transitionEventNames.forEach(function (eventName) {
                el.removeEventListener(eventName, realCallback);
            });
        };
        transitionEventNames.forEach(function (eventName) {
            el.addEventListener(eventName, realCallback); // cross-browser way to determine when the transition finishes
        });
    }

    /* FullCalendar-specific DOM Utilities
    ----------------------------------------------------------------------------------------------------------------------*/
    // Given the scrollbar widths of some other container, create borders/margins on rowEls in order to match the left
    // and right space that was offset by the scrollbars. A 1-pixel border first, then margin beyond that.
    function compensateScroll(rowEl, scrollbarWidths) {
        if (scrollbarWidths.left) {
            applyStyle(rowEl, {
                borderLeftWidth: 1,
                marginLeft: scrollbarWidths.left - 1
            });
        }
        if (scrollbarWidths.right) {
            applyStyle(rowEl, {
                borderRightWidth: 1,
                marginRight: scrollbarWidths.right - 1
            });
        }
    }
    // Undoes compensateScroll and restores all borders/margins
    function uncompensateScroll(rowEl) {
        applyStyle(rowEl, {
            marginLeft: '',
            marginRight: '',
            borderLeftWidth: '',
            borderRightWidth: ''
        });
    }
    // Make the mouse cursor express that an event is not allowed in the current area
    function disableCursor() {
        document.body.classList.add('fc-not-allowed');
    }
    // Returns the mouse cursor to its original look
    function enableCursor() {
        document.body.classList.remove('fc-not-allowed');
    }
    // Given a total available height to fill, have `els` (essentially child rows) expand to accomodate.
    // By default, all elements that are shorter than the recommended height are expanded uniformly, not considering
    // any other els that are already too tall. if `shouldRedistribute` is on, it considers these tall rows and
    // reduces the available height.
    function distributeHeight(els, availableHeight, shouldRedistribute) {
        // *FLOORING NOTE*: we floor in certain places because zoom can give inaccurate floating-point dimensions,
        // and it is better to be shorter than taller, to avoid creating unnecessary scrollbars.
        var minOffset1 = Math.floor(availableHeight / els.length); // for non-last element
        var minOffset2 = Math.floor(availableHeight - minOffset1 * (els.length - 1)); // for last element *FLOORING NOTE*
        var flexEls = []; // elements that are allowed to expand. array of DOM nodes
        var flexOffsets = []; // amount of vertical space it takes up
        var flexHeights = []; // actual css height
        var usedHeight = 0;
        undistributeHeight(els); // give all elements their natural height
        // find elements that are below the recommended height (expandable).
        // important to query for heights in a single first pass (to avoid reflow oscillation).
        els.forEach(function (el, i) {
            var minOffset = i === els.length - 1 ? minOffset2 : minOffset1;
            var naturalHeight = el.getBoundingClientRect().height;
            var naturalOffset = naturalHeight + computeVMargins(el);
            if (naturalOffset < minOffset) {
                flexEls.push(el);
                flexOffsets.push(naturalOffset);
                flexHeights.push(naturalHeight);
            }
            else {
                // this element stretches past recommended height (non-expandable). mark the space as occupied.
                usedHeight += naturalOffset;
            }
        });
        // readjust the recommended height to only consider the height available to non-maxed-out rows.
        if (shouldRedistribute) {
            availableHeight -= usedHeight;
            minOffset1 = Math.floor(availableHeight / flexEls.length);
            minOffset2 = Math.floor(availableHeight - minOffset1 * (flexEls.length - 1)); // *FLOORING NOTE*
        }
        // assign heights to all expandable elements
        flexEls.forEach(function (el, i) {
            var minOffset = i === flexEls.length - 1 ? minOffset2 : minOffset1;
            var naturalOffset = flexOffsets[i];
            var naturalHeight = flexHeights[i];
            var newHeight = minOffset - (naturalOffset - naturalHeight); // subtract the margin/padding
            if (naturalOffset < minOffset) { // we check this again because redistribution might have changed things
                el.style.height = newHeight + 'px';
            }
        });
    }
    // Undoes distrubuteHeight, restoring all els to their natural height
    function undistributeHeight(els) {
        els.forEach(function (el) {
            el.style.height = '';
        });
    }
    // Given `els`, a set of  cells, find the cell with the largest natural width and set the widths of all the
    // cells to be that width.
    // PREREQUISITE: if you want a cell to take up width, it needs to have a single inner element w/ display:inline
    function matchCellWidths(els) {
        var maxInnerWidth = 0;
        els.forEach(function (el) {
            var innerEl = el.firstChild; // hopefully an element
            if (innerEl instanceof HTMLElement) {
                var innerWidth_1 = innerEl.getBoundingClientRect().width;
                if (innerWidth_1 > maxInnerWidth) {
                    maxInnerWidth = innerWidth_1;
                }
            }
        });
        maxInnerWidth++; // sometimes not accurate of width the text needs to stay on one line. insurance
        els.forEach(function (el) {
            el.style.width = maxInnerWidth + 'px';
        });
        return maxInnerWidth;
    }
    // Given one element that resides inside another,
    // Subtracts the height of the inner element from the outer element.
    function subtractInnerElHeight(outerEl, innerEl) {
        // effin' IE8/9/10/11 sometimes returns 0 for dimensions. this weird hack was the only thing that worked
        var reflowStyleProps = {
            position: 'relative',
            left: -1 // ensure reflow in case the el was already relative. negative is less likely to cause new scroll
        };
        applyStyle(outerEl, reflowStyleProps);
        applyStyle(innerEl, reflowStyleProps);
        var diff = // grab the dimensions
         outerEl.getBoundingClientRect().height -
            innerEl.getBoundingClientRect().height;
        // undo hack
        var resetStyleProps = { position: '', left: '' };
        applyStyle(outerEl, resetStyleProps);
        applyStyle(innerEl, resetStyleProps);
        return diff;
    }
    /* Selection
    ----------------------------------------------------------------------------------------------------------------------*/
    function preventSelection(el) {
        el.classList.add('fc-unselectable');
        el.addEventListener('selectstart', preventDefault);
    }
    function allowSelection(el) {
        el.classList.remove('fc-unselectable');
        el.removeEventListener('selectstart', preventDefault);
    }
    /* Context Menu
    ----------------------------------------------------------------------------------------------------------------------*/
    function preventContextMenu(el) {
        el.addEventListener('contextmenu', preventDefault);
    }
    function allowContextMenu(el) {
        el.removeEventListener('contextmenu', preventDefault);
    }
    /* Object Ordering by Field
    ----------------------------------------------------------------------------------------------------------------------*/
    function parseFieldSpecs(input) {
        var specs = [];
        var tokens = [];
        var i;
        var token;
        if (typeof input === 'string') {
            tokens = input.split(/\s*,\s*/);
        }
        else if (typeof input === 'function') {
            tokens = [input];
        }
        else if (Array.isArray(input)) {
            tokens = input;
        }
        for (i = 0; i < tokens.length; i++) {
            token = tokens[i];
            if (typeof token === 'string') {
                specs.push(token.charAt(0) === '-' ?
                    { field: token.substring(1), order: -1 } :
                    { field: token, order: 1 });
            }
            else if (typeof token === 'function') {
                specs.push({ func: token });
            }
        }
        return specs;
    }
    function compareByFieldSpecs(obj0, obj1, fieldSpecs) {
        var i;
        var cmp;
        for (i = 0; i < fieldSpecs.length; i++) {
            cmp = compareByFieldSpec(obj0, obj1, fieldSpecs[i]);
            if (cmp) {
                return cmp;
            }
        }
        return 0;
    }
    function compareByFieldSpec(obj0, obj1, fieldSpec) {
        if (fieldSpec.func) {
            return fieldSpec.func(obj0, obj1);
        }
        return flexibleCompare(obj0[fieldSpec.field], obj1[fieldSpec.field])
            * (fieldSpec.order || 1);
    }
    function flexibleCompare(a, b) {
        if (!a && !b) {
            return 0;
        }
        if (b == null) {
            return -1;
        }
        if (a == null) {
            return 1;
        }
        if (typeof a === 'string' || typeof b === 'string') {
            return String(a).localeCompare(String(b));
        }
        return a - b;
    }
    /* String Utilities
    ----------------------------------------------------------------------------------------------------------------------*/
    function capitaliseFirstLetter(str) {
        return str.charAt(0).toUpperCase() + str.slice(1);
    }
    function padStart(val, len) {
        var s = String(val);
        return '000'.substr(0, len - s.length) + s;
    }
    /* Number Utilities
    ----------------------------------------------------------------------------------------------------------------------*/
    function compareNumbers(a, b) {
        return a - b;
    }
    function isInt(n) {
        return n % 1 === 0;
    }
    /* Weird Utilities
    ----------------------------------------------------------------------------------------------------------------------*/
    function applyAll(functions, thisObj, args) {
        if (typeof functions === 'function') { // supplied a single function
            functions = [functions];
        }
        if (functions) {
            var i = void 0;
            var ret = void 0;
            for (i = 0; i < functions.length; i++) {
                ret = functions[i].apply(thisObj, args) || ret;
            }
            return ret;
        }
    }
    function firstDefined() {
        var args = [];
        for (var _i = 0; _i < arguments.length; _i++) {
            args[_i] = arguments[_i];
        }
        for (var i = 0; i < args.length; i++) {
            if (args[i] !== undefined) {
                return args[i];
            }
        }
    }
    // Returns a function, that, as long as it continues to be invoked, will not
    // be triggered. The function will be called after it stops being called for
    // N milliseconds. If `immediate` is passed, trigger the function on the
    // leading edge, instead of the trailing.
    // https://github.com/jashkenas/underscore/blob/1.6.0/underscore.js#L714
    function debounce(func, wait) {
        var timeout;
        var args;
        var context;
        var timestamp;
        var result;
        var later = function () {
            var last = new Date().valueOf() - timestamp;
            if (last < wait) {
                timeout = setTimeout(later, wait - last);
            }
            else {
                timeout = null;
                result = func.apply(context, args);
                context = args = null;
            }
        };
        return function () {
            context = this;
            args = arguments;
            timestamp = new Date().valueOf();
            if (!timeout) {
                timeout = setTimeout(later, wait);
            }
            return result;
        };
    }
    // Number and Boolean are only types that defaults or not computed for
    // TODO: write more comments
    function refineProps(rawProps, processors, defaults, leftoverProps) {
        if (defaults === void 0) { defaults = {}; }
        var refined = {};
        for (var key in processors) {
            var processor = processors[key];
            if (rawProps[key] !== undefined) {
                // found
                if (processor === Function) {
                    refined[key] = typeof rawProps[key] === 'function' ? rawProps[key] : null;
                }
                else if (processor) { // a refining function?
                    refined[key] = processor(rawProps[key]);
                }
                else {
                    refined[key] = rawProps[key];
                }
            }
            else if (defaults[key] !== undefined) {
                // there's an explicit default
                refined[key] = defaults[key];
            }
            else {
                // must compute a default
                if (processor === String) {
                    refined[key] = ''; // empty string is default for String
                }
                else if (!processor || processor === Number || processor === Boolean || processor === Function) {
                    refined[key] = null; // assign null for other non-custom processor funcs
                }
                else {
                    refined[key] = processor(null); // run the custom processor func
                }
            }
        }
        if (leftoverProps) {
            for (var key in rawProps) {
                if (processors[key] === undefined) {
                    leftoverProps[key] = rawProps[key];
                }
            }
        }
        return refined;
    }
    /* Date stuff that doesn't belong in datelib core
    ----------------------------------------------------------------------------------------------------------------------*/
    // given a timed range, computes an all-day range that has the same exact duration,
    // but whose start time is aligned with the start of the day.
    function computeAlignedDayRange(timedRange) {
        var dayCnt = Math.floor(diffDays(timedRange.start, timedRange.end)) || 1;
        var start = startOfDay(timedRange.start);
        var end = addDays(start, dayCnt);
        return { start: start, end: end };
    }
    // given a timed range, computes an all-day range based on how for the end date bleeds into the next day
    // TODO: give nextDayThreshold a default arg
    function computeVisibleDayRange(timedRange, nextDayThreshold) {
        if (nextDayThreshold === void 0) { nextDayThreshold = createDuration(0); }
        var startDay = null;
        var endDay = null;
        if (timedRange.end) {
            endDay = startOfDay(timedRange.end);
            var endTimeMS = timedRange.end.valueOf() - endDay.valueOf(); // # of milliseconds into `endDay`
            // If the end time is actually inclusively part of the next day and is equal to or
            // beyond the next day threshold, adjust the end to be the exclusive end of `endDay`.
            // Otherwise, leaving it as inclusive will cause it to exclude `endDay`.
            if (endTimeMS && endTimeMS >= asRoughMs(nextDayThreshold)) {
                endDay = addDays(endDay, 1);
            }
        }
        if (timedRange.start) {
            startDay = startOfDay(timedRange.start); // the beginning of the day the range starts
            // If end is within `startDay` but not past nextDayThreshold, assign the default duration of one day.
            if (endDay && endDay <= startDay) {
                endDay = addDays(startDay, 1);
            }
        }
        return { start: startDay, end: endDay };
    }
    // spans from one day into another?
    function isMultiDayRange(range) {
        var visibleRange = computeVisibleDayRange(range);
        return diffDays(visibleRange.start, visibleRange.end) > 1;
    }
    function diffDates(date0, date1, dateEnv, largeUnit) {
        if (largeUnit === 'year') {
            return createDuration(dateEnv.diffWholeYears(date0, date1), 'year');
        }
        else if (largeUnit === 'month') {
            return createDuration(dateEnv.diffWholeMonths(date0, date1), 'month');
        }
        else {
            return diffDayAndTime(date0, date1); // returns a duration
        }
    }

    /*! *****************************************************************************
    Copyright (c) Microsoft Corporation. All rights reserved.
    Licensed under the Apache License, Version 2.0 (the "License"); you may not use
    this file except in compliance with the License. You may obtain a copy of the
    License at http://www.apache.org/licenses/LICENSE-2.0

    THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
    KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
    WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
    MERCHANTABLITY OR NON-INFRINGEMENT.

    See the Apache Version 2.0 License for specific language governing permissions
    and limitations under the License.
    ***************************************************************************** */
    /* global Reflect, Promise */

    function __extends(d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    }

    /*
    TODO: fix the terminology of "formatter" vs "formatting func"
    */
    /*
    At the time of instantiation, this object does not know which cmd-formatting system it will use.
    It receives this at the time of formatting, as a setting.
    */
    var CmdFormatter = /** @class */ (function () {
        function CmdFormatter(cmdStr, separator) {
            this.cmdStr = cmdStr;
            this.separator = separator;
        }
        CmdFormatter.prototype.format = function (date, context) {
            return context.cmdFormatter(this.cmdStr, createVerboseFormattingArg(date, null, context, this.separator));
        };
        CmdFormatter.prototype.formatRange = function (start, end, context) {
            return context.cmdFormatter(this.cmdStr, createVerboseFormattingArg(start, end, context, this.separator));
        };
        return CmdFormatter;
    }());

    // Formatter Object Creation
    function createFormatter(input, defaultSeparator) {
        if (typeof input === 'object' && input) { // non-null object
            if (typeof defaultSeparator === 'string') {
                input = __assign({ separator: defaultSeparator }, input);
            }
            return new NativeFormatter(input);
        }
        else if (typeof input === 'string') {
            return new CmdFormatter(input, defaultSeparator);
        }
        else if (typeof input === 'function') {
            return new FuncFormatter(input);
        }
    }
    // String Utils
    // timeZoneOffset is in minutes
    function buildIsoString(marker, timeZoneOffset, stripZeroTime) {
        if (stripZeroTime === void 0) { stripZeroTime = false; }
        var s = marker.toISOString();
        s = s.replace('.000', '');
        if (stripZeroTime) {
            s = s.replace('T00:00:00Z', '');
        }
        if (s.length > 10) { // time part wasn't stripped, can add timezone info
            if (timeZoneOffset == null) {
                s = s.replace('Z', '');
            }
            else if (timeZoneOffset !== 0) {
                s = s.replace('Z', formatTimeZoneOffset(timeZoneOffset, true));
            }
            // otherwise, its UTC-0 and we want to keep the Z
        }
        return s;
    }
    function formatIsoTimeString(marker) {
        return padStart(marker.getUTCHours(), 2) + ':' +
            padStart(marker.getUTCMinutes(), 2) + ':' +
            padStart(marker.getUTCSeconds(), 2);
    }
    function formatTimeZoneOffset(minutes, doIso) {
        if (doIso === void 0) { doIso = false; }
        var sign = minutes < 0 ? '-' : '+';
        var abs = Math.abs(minutes);
        var hours = Math.floor(abs / 60);
        var mins = Math.round(abs % 60);
        if (doIso) {
            return sign + padStart(hours, 2) + ':' + padStart(mins, 2);
        }
        else {
            return 'GMT' + sign + hours + (mins ? ':' + padStart(mins, 2) : '');
        }
    }
    // Arg Utils
    function createVerboseFormattingArg(start, end, context, separator) {
        var startInfo = expandZonedMarker(start, context.calendarSystem);
        var endInfo = end ? expandZonedMarker(end, context.calendarSystem) : null;
        return {
            date: startInfo,
            start: startInfo,
            end: endInfo,
            timeZone: context.timeZone,
            localeCodes: context.locale.codes,
            separator: separator
        };
    }
    function expandZonedMarker(dateInfo, calendarSystem) {
        var a = calendarSystem.markerToArray(dateInfo.marker);
        return {
            marker: dateInfo.marker,
            timeZoneOffset: dateInfo.timeZoneOffset,
            array: a,
            year: a[0],
            month: a[1],
            day: a[2],
            hour: a[3],
            minute: a[4],
            second: a[5],
            millisecond: a[6]
        };
    }

    /*
    Specifying nextDayThreshold signals that all-day ranges should be sliced.
    */
    function sliceEventStore(eventStore, eventUiBases, framingRange, nextDayThreshold) {
        var inverseBgByGroupId = {};
        var inverseBgByDefId = {};
        var defByGroupId = {};
        var bgRanges = [];
        var fgRanges = [];
        var eventUis = compileEventUis(eventStore.defs, eventUiBases);
        for (var defId in eventStore.defs) {
            var def = eventStore.defs[defId];
            if (def.rendering === 'inverse-background') {
                if (def.groupId) {
                    inverseBgByGroupId[def.groupId] = [];
                    if (!defByGroupId[def.groupId]) {
                        defByGroupId[def.groupId] = def;
                    }
                }
                else {
                    inverseBgByDefId[defId] = [];
                }
            }
        }
        for (var instanceId in eventStore.instances) {
            var instance = eventStore.instances[instanceId];
            var def = eventStore.defs[instance.defId];
            var ui = eventUis[def.defId];
            var origRange = instance.range;
            var normalRange = (!def.allDay && nextDayThreshold) ?
                computeVisibleDayRange(origRange, nextDayThreshold) :
                origRange;
            var slicedRange = intersectRanges(normalRange, framingRange);
            if (slicedRange) {
                if (def.rendering === 'inverse-background') {
                    if (def.groupId) {
                        inverseBgByGroupId[def.groupId].push(slicedRange);
                    }
                    else {
                        inverseBgByDefId[instance.defId].push(slicedRange);
                    }
                }
                else {
                    (def.rendering === 'background' ? bgRanges : fgRanges).push({
                        def: def,
                        ui: ui,
                        instance: instance,
                        range: slicedRange,
                        isStart: normalRange.start && normalRange.start.valueOf() === slicedRange.start.valueOf(),
                        isEnd: normalRange.end && normalRange.end.valueOf() === slicedRange.end.valueOf()
                    });
                }
            }
        }
        for (var groupId in inverseBgByGroupId) { // BY GROUP
            var ranges = inverseBgByGroupId[groupId];
            var invertedRanges = invertRanges(ranges, framingRange);
            for (var _i = 0, invertedRanges_1 = invertedRanges; _i < invertedRanges_1.length; _i++) {
                var invertedRange = invertedRanges_1[_i];
                var def = defByGroupId[groupId];
                var ui = eventUis[def.defId];
                bgRanges.push({
                    def: def,
                    ui: ui,
                    instance: null,
                    range: invertedRange,
                    isStart: false,
                    isEnd: false
                });
            }
        }
        for (var defId in inverseBgByDefId) {
            var ranges = inverseBgByDefId[defId];
            var invertedRanges = invertRanges(ranges, framingRange);
            for (var _a = 0, invertedRanges_2 = invertedRanges; _a < invertedRanges_2.length; _a++) {
                var invertedRange = invertedRanges_2[_a];
                bgRanges.push({
                    def: eventStore.defs[defId],
                    ui: eventUis[defId],
                    instance: null,
                    range: invertedRange,
                    isStart: false,
                    isEnd: false
                });
            }
        }
        return { bg: bgRanges, fg: fgRanges };
    }
    function hasBgRendering(def) {
        return def.rendering === 'background' || def.rendering === 'inverse-background';
    }
    function filterSegsViaEls(view, segs, isMirror) {
        if (view.hasPublicHandlers('eventRender')) {
            segs = segs.filter(function (seg) {
                var custom = view.publiclyTrigger('eventRender', [
                    {
                        event: new EventApi(view.calendar, seg.eventRange.def, seg.eventRange.instance),
                        isMirror: isMirror,
                        isStart: seg.isStart,
                        isEnd: seg.isEnd,
                        // TODO: include seg.range once all components consistently generate it
                        el: seg.el,
                        view: view
                    }
                ]);
                if (custom === false) { // means don't render at all
                    return false;
                }
                else if (custom && custom !== true) {
                    seg.el = custom;
                }
                return true;
            });
        }
        for (var _i = 0, segs_1 = segs; _i < segs_1.length; _i++) {
            var seg = segs_1[_i];
            setElSeg(seg.el, seg);
        }
        return segs;
    }
    function setElSeg(el, seg) {
        el.fcSeg = seg;
    }
    function getElSeg(el) {
        return el.fcSeg || null;
    }
    // event ui computation
    function compileEventUis(eventDefs, eventUiBases) {
        return mapHash(eventDefs, function (eventDef) {
            return compileEventUi(eventDef, eventUiBases);
        });
    }
    function compileEventUi(eventDef, eventUiBases) {
        var uis = [];
        if (eventUiBases['']) {
            uis.push(eventUiBases['']);
        }
        if (eventUiBases[eventDef.defId]) {
            uis.push(eventUiBases[eventDef.defId]);
        }
        uis.push(eventDef.ui);
        return combineEventUis(uis);
    }

    // applies the mutation to ALL defs/instances within the event store
    function applyMutationToEventStore(eventStore, eventConfigBase, mutation, calendar) {
        var eventConfigs = compileEventUis(eventStore.defs, eventConfigBase);
        var dest = createEmptyEventStore();
        for (var defId in eventStore.defs) {
            var def = eventStore.defs[defId];
            dest.defs[defId] = applyMutationToEventDef(def, eventConfigs[defId], mutation, calendar.pluginSystem.hooks.eventDefMutationAppliers, calendar);
        }
        for (var instanceId in eventStore.instances) {
            var instance = eventStore.instances[instanceId];
            var def = dest.defs[instance.defId]; // important to grab the newly modified def
            dest.instances[instanceId] = applyMutationToEventInstance(instance, def, eventConfigs[instance.defId], mutation, calendar);
        }
        return dest;
    }
    function applyMutationToEventDef(eventDef, eventConfig, mutation, appliers, calendar) {
        var standardProps = mutation.standardProps || {};
        // if hasEnd has not been specified, guess a good value based on deltas.
        // if duration will change, there's no way the default duration will persist,
        // and thus, we need to mark the event as having a real end
        if (standardProps.hasEnd == null &&
            eventConfig.durationEditable &&
            (mutation.startDelta || mutation.endDelta)) {
            standardProps.hasEnd = true; // TODO: is this mutation okay?
        }
        var copy = __assign({}, eventDef, standardProps, { ui: __assign({}, eventDef.ui, standardProps.ui) });
        if (mutation.extendedProps) {
            copy.extendedProps = __assign({}, copy.extendedProps, mutation.extendedProps);
        }
        for (var _i = 0, appliers_1 = appliers; _i < appliers_1.length; _i++) {
            var applier = appliers_1[_i];
            applier(copy, mutation, calendar);
        }
        if (!copy.hasEnd && calendar.opt('forceEventDuration')) {
            copy.hasEnd = true;
        }
        return copy;
    }
    function applyMutationToEventInstance(eventInstance, eventDef, // must first be modified by applyMutationToEventDef
    eventConfig, mutation, calendar) {
        var dateEnv = calendar.dateEnv;
        var forceAllDay = mutation.standardProps && mutation.standardProps.allDay === true;
        var clearEnd = mutation.standardProps && mutation.standardProps.hasEnd === false;
        var copy = __assign({}, eventInstance);
        if (forceAllDay) {
            copy.range = computeAlignedDayRange(copy.range);
        }
        if (mutation.datesDelta && eventConfig.startEditable) {
            copy.range = {
                start: dateEnv.add(copy.range.start, mutation.datesDelta),
                end: dateEnv.add(copy.range.end, mutation.datesDelta)
            };
        }
        if (mutation.startDelta && eventConfig.durationEditable) {
            copy.range = {
                start: dateEnv.add(copy.range.start, mutation.startDelta),
                end: copy.range.end
            };
        }
        if (mutation.endDelta && eventConfig.durationEditable) {
            copy.range = {
                start: copy.range.start,
                end: dateEnv.add(copy.range.end, mutation.endDelta)
            };
        }
        if (clearEnd) {
            copy.range = {
                start: copy.range.start,
                end: calendar.getDefaultEventEnd(eventDef.allDay, copy.range.start)
            };
        }
        // in case event was all-day but the supplied deltas were not
        // better util for this?
        if (eventDef.allDay) {
            copy.range = {
                start: startOfDay(copy.range.start),
                end: startOfDay(copy.range.end)
            };
        }
        // handle invalid durations
        if (copy.range.end < copy.range.start) {
            copy.range.end = calendar.getDefaultEventEnd(eventDef.allDay, copy.range.start);
        }
        return copy;
    }

    // high-level segmenting-aware tester functions
    // ------------------------------------------------------------------------------------------------------------------------
    function isInteractionValid(interaction, calendar) {
        return isNewPropsValid({ eventDrag: interaction }, calendar); // HACK: the eventDrag props is used for ALL interactions
    }
    function isDateSelectionValid(dateSelection, calendar) {
        return isNewPropsValid({ dateSelection: dateSelection }, calendar);
    }
    function isNewPropsValid(newProps, calendar) {
        var view = calendar.view;
        var props = __assign({ businessHours: view ? view.props.businessHours : createEmptyEventStore(), dateSelection: '', eventStore: calendar.state.eventStore, eventUiBases: calendar.eventUiBases, eventSelection: '', eventDrag: null, eventResize: null }, newProps);
        return (calendar.pluginSystem.hooks.isPropsValid || isPropsValid)(props, calendar);
    }
    function isPropsValid(state, calendar, dateSpanMeta, filterConfig) {
        if (dateSpanMeta === void 0) { dateSpanMeta = {}; }
        if (state.eventDrag && !isInteractionPropsValid(state, calendar, dateSpanMeta, filterConfig)) {
            return false;
        }
        if (state.dateSelection && !isDateSelectionPropsValid(state, calendar, dateSpanMeta, filterConfig)) {
            return false;
        }
        return true;
    }
    // Moving Event Validation
    // ------------------------------------------------------------------------------------------------------------------------
    function isInteractionPropsValid(state, calendar, dateSpanMeta, filterConfig) {
        var interaction = state.eventDrag; // HACK: the eventDrag props is used for ALL interactions
        var subjectEventStore = interaction.mutatedEvents;
        var subjectDefs = subjectEventStore.defs;
        var subjectInstances = subjectEventStore.instances;
        var subjectConfigs = compileEventUis(subjectDefs, interaction.isEvent ?
            state.eventUiBases :
            { '': calendar.selectionConfig } // if not a real event, validate as a selection
        );
        if (filterConfig) {
            subjectConfigs = mapHash(subjectConfigs, filterConfig);
        }
        var otherEventStore = excludeInstances(state.eventStore, interaction.affectedEvents.instances); // exclude the subject events. TODO: exclude defs too?
        var otherDefs = otherEventStore.defs;
        var otherInstances = otherEventStore.instances;
        var otherConfigs = compileEventUis(otherDefs, state.eventUiBases);
        for (var subjectInstanceId in subjectInstances) {
            var subjectInstance = subjectInstances[subjectInstanceId];
            var subjectRange = subjectInstance.range;
            var subjectConfig = subjectConfigs[subjectInstance.defId];
            var subjectDef = subjectDefs[subjectInstance.defId];
            // constraint
            if (!allConstraintsPass(subjectConfig.constraints, subjectRange, otherEventStore, state.businessHours, calendar)) {
                return false;
            }
            // overlap
            var overlapFunc = calendar.opt('eventOverlap');
            if (typeof overlapFunc !== 'function') {
                overlapFunc = null;
            }
            for (var otherInstanceId in otherInstances) {
                var otherInstance = otherInstances[otherInstanceId];
                // intersect! evaluate
                if (rangesIntersect(subjectRange, otherInstance.range)) {
                    var otherOverlap = otherConfigs[otherInstance.defId].overlap;
                    // consider the other event's overlap. only do this if the subject event is a "real" event
                    if (otherOverlap === false && interaction.isEvent) {
                        return false;
                    }
                    if (subjectConfig.overlap === false) {
                        return false;
                    }
                    if (overlapFunc && !overlapFunc(new EventApi(calendar, otherDefs[otherInstance.defId], otherInstance), // still event
                    new EventApi(calendar, subjectDef, subjectInstance) // moving event
                    )) {
                        return false;
                    }
                }
            }
            // allow (a function)
            var calendarEventStore = calendar.state.eventStore; // need global-to-calendar, not local to component (splittable)state
            for (var _i = 0, _a = subjectConfig.allows; _i < _a.length; _i++) {
                var subjectAllow = _a[_i];
                var subjectDateSpan = __assign({}, dateSpanMeta, { range: subjectInstance.range, allDay: subjectDef.allDay });
                var origDef = calendarEventStore.defs[subjectDef.defId];
                var origInstance = calendarEventStore.instances[subjectInstanceId];
                var eventApi = void 0;
                if (origDef) { // was previously in the calendar
                    eventApi = new EventApi(calendar, origDef, origInstance);
                }
                else { // was an external event
                    eventApi = new EventApi(calendar, subjectDef); // no instance, because had no dates
                }
                if (!subjectAllow(calendar.buildDateSpanApi(subjectDateSpan), eventApi)) {
                    return false;
                }
            }
        }
        return true;
    }
    // Date Selection Validation
    // ------------------------------------------------------------------------------------------------------------------------
    function isDateSelectionPropsValid(state, calendar, dateSpanMeta, filterConfig) {
        var relevantEventStore = state.eventStore;
        var relevantDefs = relevantEventStore.defs;
        var relevantInstances = relevantEventStore.instances;
        var selection = state.dateSelection;
        var selectionRange = selection.range;
        var selectionConfig = calendar.selectionConfig;
        if (filterConfig) {
            selectionConfig = filterConfig(selectionConfig);
        }
        // constraint
        if (!allConstraintsPass(selectionConfig.constraints, selectionRange, relevantEventStore, state.businessHours, calendar)) {
            return false;
        }
        // overlap
        var overlapFunc = calendar.opt('selectOverlap');
        if (typeof overlapFunc !== 'function') {
            overlapFunc = null;
        }
        for (var relevantInstanceId in relevantInstances) {
            var relevantInstance = relevantInstances[relevantInstanceId];
            // intersect! evaluate
            if (rangesIntersect(selectionRange, relevantInstance.range)) {
                if (selectionConfig.overlap === false) {
                    return false;
                }
                if (overlapFunc && !overlapFunc(new EventApi(calendar, relevantDefs[relevantInstance.defId], relevantInstance))) {
                    return false;
                }
            }
        }
        // allow (a function)
        for (var _i = 0, _a = selectionConfig.allows; _i < _a.length; _i++) {
            var selectionAllow = _a[_i];
            var fullDateSpan = __assign({}, dateSpanMeta, selection);
            if (!selectionAllow(calendar.buildDateSpanApi(fullDateSpan), null)) {
                return false;
            }
        }
        return true;
    }
    // Constraint Utils
    // ------------------------------------------------------------------------------------------------------------------------
    function allConstraintsPass(constraints, subjectRange, otherEventStore, businessHoursUnexpanded, calendar) {
        for (var _i = 0, constraints_1 = constraints; _i < constraints_1.length; _i++) {
            var constraint = constraints_1[_i];
            if (!anyRangesContainRange(constraintToRanges(constraint, subjectRange, otherEventStore, businessHoursUnexpanded, calendar), subjectRange)) {
                return false;
            }
        }
        return true;
    }
    function constraintToRanges(constraint, subjectRange, // for expanding a recurring constraint, or expanding business hours
    otherEventStore, // for if constraint is an even group ID
    businessHoursUnexpanded, // for if constraint is 'businessHours'
    calendar // for expanding businesshours
    ) {
        if (constraint === 'businessHours') {
            return eventStoreToRanges(expandRecurring(businessHoursUnexpanded, subjectRange, calendar));
        }
        else if (typeof constraint === 'string') { // an group ID
            return eventStoreToRanges(filterEventStoreDefs(otherEventStore, function (eventDef) {
                return eventDef.groupId === constraint;
            }));
        }
        else if (typeof constraint === 'object' && constraint) { // non-null object
            return eventStoreToRanges(expandRecurring(constraint, subjectRange, calendar));
        }
        return []; // if it's false
    }
    // TODO: move to event-store file?
    function eventStoreToRanges(eventStore) {
        var instances = eventStore.instances;
        var ranges = [];
        for (var instanceId in instances) {
            ranges.push(instances[instanceId].range);
        }
        return ranges;
    }
    // TODO: move to geom file?
    function anyRangesContainRange(outerRanges, innerRange) {
        for (var _i = 0, outerRanges_1 = outerRanges; _i < outerRanges_1.length; _i++) {
            var outerRange = outerRanges_1[_i];
            if (rangeContainsRange(outerRange, innerRange)) {
                return true;
            }
        }
        return false;
    }
    // Parsing
    // ------------------------------------------------------------------------------------------------------------------------
    function normalizeConstraint(input, calendar) {
        if (Array.isArray(input)) {
            return parseEvents(input, '', calendar, true); // allowOpenRange=true
        }
        else if (typeof input === 'object' && input) { // non-null object
            return parseEvents([input], '', calendar, true); // allowOpenRange=true
        }
        else if (input != null) {
            return String(input);
        }
        else {
            return null;
        }
    }

    // Generates HTML for an anchor to another view into the calendar.
    // Will either generate an  tag or a non-clickable  tag, depending on enabled settings.
    // `gotoOptions` can either be a DateMarker, or an object with the form:
    // { date, type, forceOff }
    // `type` is a view-type like "day" or "week". default value is "day".
    // `attrs` and `innerHtml` are use to generate the rest of the HTML tag.
    function buildGotoAnchorHtml(component, gotoOptions, attrs, innerHtml) {
        var dateEnv = component.dateEnv;
        var date;
        var type;
        var forceOff;
        var finalOptions;
        if (gotoOptions instanceof Date) {
            date = gotoOptions; // a single date-like input
        }
        else {
            date = gotoOptions.date;
            type = gotoOptions.type;
            forceOff = gotoOptions.forceOff;
        }
        finalOptions = {
            date: dateEnv.formatIso(date, { omitTime: true }),
            type: type || 'day'
        };
        if (typeof attrs === 'string') {
            innerHtml = attrs;
            attrs = null;
        }
        attrs = attrs ? ' ' + attrsToStr(attrs) : ''; // will have a leading space
        innerHtml = innerHtml || '';
        if (!forceOff && component.opt('navLinks')) {
            return '' +
                innerHtml +
                '';
        }
        else {
            return '' +
                innerHtml +
                '';
        }
    }
    function getAllDayHtml(component) {
        return component.opt('allDayHtml') || htmlEscape(component.opt('allDayText'));
    }
    // Computes HTML classNames for a single-day element
    function getDayClasses(date, dateProfile, context, noThemeHighlight) {
        var calendar = context.calendar, view = context.view, theme = context.theme, dateEnv = context.dateEnv;
        var classes = [];
        var todayStart;
        var todayEnd;
        if (!rangeContainsMarker(dateProfile.activeRange, date)) {
            classes.push('fc-disabled-day');
        }
        else {
            classes.push('fc-' + DAY_IDS[date.getUTCDay()]);
            if (view.opt('monthMode') &&
                dateEnv.getMonth(date) !== dateEnv.getMonth(dateProfile.currentRange.start)) {
                classes.push('fc-other-month');
            }
            todayStart = startOfDay(calendar.getNow());
            todayEnd = addDays(todayStart, 1);
            if (date < todayStart) {
                classes.push('fc-past');
            }
            else if (date >= todayEnd) {
                classes.push('fc-future');
            }
            else {
                classes.push('fc-today');
                if (noThemeHighlight !== true) {
                    classes.push(theme.getClass('today'));
                }
            }
        }
        return classes;
    }

    // given a function that resolves a result asynchronously.
    // the function can either call passed-in success and failure callbacks,
    // or it can return a promise.
    // if you need to pass additional params to func, bind them first.
    function unpromisify(func, success, failure) {
        // guard against success/failure callbacks being called more than once
        // and guard against a promise AND callback being used together.
        var isResolved = false;
        var wrappedSuccess = function () {
            if (!isResolved) {
                isResolved = true;
                success.apply(this, arguments);
            }
        };
        var wrappedFailure = function () {
            if (!isResolved) {
                isResolved = true;
                if (failure) {
                    failure.apply(this, arguments);
                }
            }
        };
        var res = func(wrappedSuccess, wrappedFailure);
        if (res && typeof res.then === 'function') {
            res.then(wrappedSuccess, wrappedFailure);
        }
    }

    /*
    USAGE:
      import { default as EmitterMixin, EmitterInterface } from './EmitterMixin'
    in class:
      on: EmitterInterface['on']
      one: EmitterInterface['one']
      off: EmitterInterface['off']
      trigger: EmitterInterface['trigger']
      triggerWith: EmitterInterface['triggerWith']
      hasHandlers: EmitterInterface['hasHandlers']
    after class:
      EmitterMixin.mixInto(TheClass)
    */
    var EmitterMixin = /** @class */ (function (_super) {
        __extends(EmitterMixin, _super);
        function EmitterMixin() {
            return _super !== null && _super.apply(this, arguments) || this;
        }
        EmitterMixin.prototype.on = function (type, handler) {
            addToHash(this._handlers || (this._handlers = {}), type, handler);
            return this; // for chaining
        };
        // todo: add comments
        EmitterMixin.prototype.one = function (type, handler) {
            addToHash(this._oneHandlers || (this._oneHandlers = {}), type, handler);
            return this; // for chaining
        };
        EmitterMixin.prototype.off = function (type, handler) {
            if (this._handlers) {
                removeFromHash(this._handlers, type, handler);
            }
            if (this._oneHandlers) {
                removeFromHash(this._oneHandlers, type, handler);
            }
            return this; // for chaining
        };
        EmitterMixin.prototype.trigger = function (type) {
            var args = [];
            for (var _i = 1; _i < arguments.length; _i++) {
                args[_i - 1] = arguments[_i];
            }
            this.triggerWith(type, this, args);
            return this; // for chaining
        };
        EmitterMixin.prototype.triggerWith = function (type, context, args) {
            if (this._handlers) {
                applyAll(this._handlers[type], context, args);
            }
            if (this._oneHandlers) {
                applyAll(this._oneHandlers[type], context, args);
                delete this._oneHandlers[type]; // will never fire again
            }
            return this; // for chaining
        };
        EmitterMixin.prototype.hasHandlers = function (type) {
            return (this._handlers && this._handlers[type] && this._handlers[type].length) ||
                (this._oneHandlers && this._oneHandlers[type] && this._oneHandlers[type].length);
        };
        return EmitterMixin;
    }(Mixin));
    function addToHash(hash, type, handler) {
        (hash[type] || (hash[type] = []))
            .push(handler);
    }
    function removeFromHash(hash, type, handler) {
        if (handler) {
            if (hash[type]) {
                hash[type] = hash[type].filter(function (func) {
                    return func !== handler;
                });
            }
        }
        else {
            delete hash[type]; // remove all handler funcs for this type
        }
    }

    /*
    Records offset information for a set of elements, relative to an origin element.
    Can record the left/right OR the top/bottom OR both.
    Provides methods for querying the cache by position.
    */
    var PositionCache = /** @class */ (function () {
        function PositionCache(originEl, els, isHorizontal, isVertical) {
            this.originEl = originEl;
            this.els = els;
            this.isHorizontal = isHorizontal;
            this.isVertical = isVertical;
        }
        // Queries the els for coordinates and stores them.
        // Call this method before using and of the get* methods below.
        PositionCache.prototype.build = function () {
            var originEl = this.originEl;
            var originClientRect = this.originClientRect =
                originEl.getBoundingClientRect(); // relative to viewport top-left
            if (this.isHorizontal) {
                this.buildElHorizontals(originClientRect.left);
            }
            if (this.isVertical) {
                this.buildElVerticals(originClientRect.top);
            }
        };
        // Populates the left/right internal coordinate arrays
        PositionCache.prototype.buildElHorizontals = function (originClientLeft) {
            var lefts = [];
            var rights = [];
            for (var _i = 0, _a = this.els; _i < _a.length; _i++) {
                var el = _a[_i];
                var rect = el.getBoundingClientRect();
                lefts.push(rect.left - originClientLeft);
                rights.push(rect.right - originClientLeft);
            }
            this.lefts = lefts;
            this.rights = rights;
        };
        // Populates the top/bottom internal coordinate arrays
        PositionCache.prototype.buildElVerticals = function (originClientTop) {
            var tops = [];
            var bottoms = [];
            for (var _i = 0, _a = this.els; _i < _a.length; _i++) {
                var el = _a[_i];
                var rect = el.getBoundingClientRect();
                tops.push(rect.top - originClientTop);
                bottoms.push(rect.bottom - originClientTop);
            }
            this.tops = tops;
            this.bottoms = bottoms;
        };
        // Given a left offset (from document left), returns the index of the el that it horizontally intersects.
        // If no intersection is made, returns undefined.
        PositionCache.prototype.leftToIndex = function (leftPosition) {
            var lefts = this.lefts;
            var rights = this.rights;
            var len = lefts.length;
            var i;
            for (i = 0; i < len; i++) {
                if (leftPosition >= lefts[i] && leftPosition < rights[i]) {
                    return i;
                }
            }
        };
        // Given a top offset (from document top), returns the index of the el that it vertically intersects.
        // If no intersection is made, returns undefined.
        PositionCache.prototype.topToIndex = function (topPosition) {
            var tops = this.tops;
            var bottoms = this.bottoms;
            var len = tops.length;
            var i;
            for (i = 0; i < len; i++) {
                if (topPosition >= tops[i] && topPosition < bottoms[i]) {
                    return i;
                }
            }
        };
        // Gets the width of the element at the given index
        PositionCache.prototype.getWidth = function (leftIndex) {
            return this.rights[leftIndex] - this.lefts[leftIndex];
        };
        // Gets the height of the element at the given index
        PositionCache.prototype.getHeight = function (topIndex) {
            return this.bottoms[topIndex] - this.tops[topIndex];
        };
        return PositionCache;
    }());

    /*
    An object for getting/setting scroll-related information for an element.
    Internally, this is done very differently for window versus DOM element,
    so this object serves as a common interface.
    */
    var ScrollController = /** @class */ (function () {
        function ScrollController() {
        }
        ScrollController.prototype.getMaxScrollTop = function () {
            return this.getScrollHeight() - this.getClientHeight();
        };
        ScrollController.prototype.getMaxScrollLeft = function () {
            return this.getScrollWidth() - this.getClientWidth();
        };
        ScrollController.prototype.canScrollVertically = function () {
            return this.getMaxScrollTop() > 0;
        };
        ScrollController.prototype.canScrollHorizontally = function () {
            return this.getMaxScrollLeft() > 0;
        };
        ScrollController.prototype.canScrollUp = function () {
            return this.getScrollTop() > 0;
        };
        ScrollController.prototype.canScrollDown = function () {
            return this.getScrollTop() < this.getMaxScrollTop();
        };
        ScrollController.prototype.canScrollLeft = function () {
            return this.getScrollLeft() > 0;
        };
        ScrollController.prototype.canScrollRight = function () {
            return this.getScrollLeft() < this.getMaxScrollLeft();
        };
        return ScrollController;
    }());
    var ElementScrollController = /** @class */ (function (_super) {
        __extends(ElementScrollController, _super);
        function ElementScrollController(el) {
            var _this = _super.call(this) || this;
            _this.el = el;
            return _this;
        }
        ElementScrollController.prototype.getScrollTop = function () {
            return this.el.scrollTop;
        };
        ElementScrollController.prototype.getScrollLeft = function () {
            return this.el.scrollLeft;
        };
        ElementScrollController.prototype.setScrollTop = function (top) {
            this.el.scrollTop = top;
        };
        ElementScrollController.prototype.setScrollLeft = function (left) {
            this.el.scrollLeft = left;
        };
        ElementScrollController.prototype.getScrollWidth = function () {
            return this.el.scrollWidth;
        };
        ElementScrollController.prototype.getScrollHeight = function () {
            return this.el.scrollHeight;
        };
        ElementScrollController.prototype.getClientHeight = function () {
            return this.el.clientHeight;
        };
        ElementScrollController.prototype.getClientWidth = function () {
            return this.el.clientWidth;
        };
        return ElementScrollController;
    }(ScrollController));
    var WindowScrollController = /** @class */ (function (_super) {
        __extends(WindowScrollController, _super);
        function WindowScrollController() {
            return _super !== null && _super.apply(this, arguments) || this;
        }
        WindowScrollController.prototype.getScrollTop = function () {
            return window.pageYOffset;
        };
        WindowScrollController.prototype.getScrollLeft = function () {
            return window.pageXOffset;
        };
        WindowScrollController.prototype.setScrollTop = function (n) {
            window.scroll(window.pageXOffset, n);
        };
        WindowScrollController.prototype.setScrollLeft = function (n) {
            window.scroll(n, window.pageYOffset);
        };
        WindowScrollController.prototype.getScrollWidth = function () {
            return document.documentElement.scrollWidth;
        };
        WindowScrollController.prototype.getScrollHeight = function () {
            return document.documentElement.scrollHeight;
        };
        WindowScrollController.prototype.getClientHeight = function () {
            return document.documentElement.clientHeight;
        };
        WindowScrollController.prototype.getClientWidth = function () {
            return document.documentElement.clientWidth;
        };
        return WindowScrollController;
    }(ScrollController));

    /*
    Embodies a div that has potential scrollbars
    */
    var ScrollComponent = /** @class */ (function (_super) {
        __extends(ScrollComponent, _super);
        function ScrollComponent(overflowX, overflowY) {
            var _this = _super.call(this, createElement('div', {
                className: 'fc-scroller'
            })) || this;
            _this.overflowX = overflowX;
            _this.overflowY = overflowY;
            _this.applyOverflow();
            return _this;
        }
        // sets to natural height, unlocks overflow
        ScrollComponent.prototype.clear = function () {
            this.setHeight('auto');
            this.applyOverflow();
        };
        ScrollComponent.prototype.destroy = function () {
            removeElement(this.el);
        };
        // Overflow
        // -----------------------------------------------------------------------------------------------------------------
        ScrollComponent.prototype.applyOverflow = function () {
            applyStyle(this.el, {
                overflowX: this.overflowX,
                overflowY: this.overflowY
            });
        };
        // Causes any 'auto' overflow values to resolves to 'scroll' or 'hidden'.
        // Useful for preserving scrollbar widths regardless of future resizes.
        // Can pass in scrollbarWidths for optimization.
        ScrollComponent.prototype.lockOverflow = function (scrollbarWidths) {
            var overflowX = this.overflowX;
            var overflowY = this.overflowY;
            scrollbarWidths = scrollbarWidths || this.getScrollbarWidths();
            if (overflowX === 'auto') {
                overflowX = (scrollbarWidths.bottom || // horizontal scrollbars?
                    this.canScrollHorizontally() // OR scrolling pane with massless scrollbars?
                ) ? 'scroll' : 'hidden';
            }
            if (overflowY === 'auto') {
                overflowY = (scrollbarWidths.left || scrollbarWidths.right || // horizontal scrollbars?
                    this.canScrollVertically() // OR scrolling pane with massless scrollbars?
                ) ? 'scroll' : 'hidden';
            }
            applyStyle(this.el, { overflowX: overflowX, overflowY: overflowY });
        };
        ScrollComponent.prototype.setHeight = function (height) {
            applyStyleProp(this.el, 'height', height);
        };
        ScrollComponent.prototype.getScrollbarWidths = function () {
            var edges = computeEdges(this.el);
            return {
                left: edges.scrollbarLeft,
                right: edges.scrollbarRight,
                bottom: edges.scrollbarBottom
            };
        };
        return ScrollComponent;
    }(ElementScrollController));

    /*
    PURPOSES:
    - hook up to fg, fill, and mirror renderers
    - interface for dragging and hits
    */
    var DateComponent = /** @class */ (function (_super) {
        __extends(DateComponent, _super);
        function DateComponent(context, el, isView) {
            var _this = _super.call(this, context, isView) || this;
            _this.el = el;
            return _this;
        }
        DateComponent.prototype.destroy = function () {
            _super.prototype.destroy.call(this);
            removeElement(this.el);
        };
        // TODO: WHAT ABOUT (sourceSeg && sourceSeg.component.doesDragMirror)
        //
        // Event Drag-n-Drop Rendering (for both events and external elements)
        // ---------------------------------------------------------------------------------------------------------------
        /*
        renderEventDragSegs(state: EventSegUiInteractionState) {
          if (state) {
            let { isEvent, segs, sourceSeg } = state

            if (this.eventRenderer) {
              this.eventRenderer.hideByHash(state.affectedInstances)
            }

            // if the user is dragging something that is considered an event with real event data,
            // and this component likes to do drag mirrors OR the component where the seg came from
            // likes to do drag mirrors, then render a drag mirror.
            if (isEvent && (this.doesDragMirror || sourceSeg && sourceSeg.component.doesDragMirror)) {
              if (this.mirrorRenderer) {
                this.mirrorRenderer.renderSegs(segs, { isDragging: true, sourceSeg })
              }
            }

            // if it would be impossible to render a drag mirror OR this component likes to render
            // highlights, then render a highlight.
            if (!isEvent || this.doesDragHighlight) {
              if (this.fillRenderer) {
                this.fillRenderer.renderSegs('highlight', segs)
              }
            }
          }
        }
        */
        // Hit System
        // -----------------------------------------------------------------------------------------------------------------
        DateComponent.prototype.buildPositionCaches = function () {
        };
        DateComponent.prototype.queryHit = function (positionLeft, positionTop, elWidth, elHeight) {
            return null; // this should be abstract
        };
        // Validation
        // -----------------------------------------------------------------------------------------------------------------
        DateComponent.prototype.isInteractionValid = function (interaction) {
            var calendar = this.calendar;
            var dateProfile = this.props.dateProfile; // HACK
            var instances = interaction.mutatedEvents.instances;
            if (dateProfile) { // HACK for DayTile
                for (var instanceId in instances) {
                    if (!rangeContainsRange(dateProfile.validRange, instances[instanceId].range)) {
                        return false;
                    }
                }
            }
            return isInteractionValid(interaction, calendar);
        };
        DateComponent.prototype.isDateSelectionValid = function (selection) {
            var dateProfile = this.props.dateProfile; // HACK
            if (dateProfile && // HACK for DayTile
                !rangeContainsRange(dateProfile.validRange, selection.range)) {
                return false;
            }
            return isDateSelectionValid(selection, this.calendar);
        };
        // Triggering
        // -----------------------------------------------------------------------------------------------------------------
        // TODO: move to Calendar
        DateComponent.prototype.publiclyTrigger = function (name, args) {
            var calendar = this.calendar;
            return calendar.publiclyTrigger(name, args);
        };
        DateComponent.prototype.publiclyTriggerAfterSizing = function (name, args) {
            var calendar = this.calendar;
            return calendar.publiclyTriggerAfterSizing(name, args);
        };
        DateComponent.prototype.hasPublicHandlers = function (name) {
            var calendar = this.calendar;
            return calendar.hasPublicHandlers(name);
        };
        DateComponent.prototype.triggerRenderedSegs = function (segs, isMirrors) {
            var calendar = this.calendar;
            if (this.hasPublicHandlers('eventPositioned')) {
                for (var _i = 0, segs_1 = segs; _i < segs_1.length; _i++) {
                    var seg = segs_1[_i];
                    this.publiclyTriggerAfterSizing('eventPositioned', [
                        {
                            event: new EventApi(calendar, seg.eventRange.def, seg.eventRange.instance),
                            isMirror: isMirrors,
                            isStart: seg.isStart,
                            isEnd: seg.isEnd,
                            el: seg.el,
                            view: this // safe to cast because this method is only called on context.view
                        }
                    ]);
                }
            }
            if (!calendar.state.loadingLevel) { // avoid initial empty state while pending
                calendar.afterSizingTriggers._eventsPositioned = [null]; // fire once
            }
        };
        DateComponent.prototype.triggerWillRemoveSegs = function (segs, isMirrors) {
            var calendar = this.calendar;
            for (var _i = 0, segs_2 = segs; _i < segs_2.length; _i++) {
                var seg = segs_2[_i];
                calendar.trigger('eventElRemove', seg.el);
            }
            if (this.hasPublicHandlers('eventDestroy')) {
                for (var _a = 0, segs_3 = segs; _a < segs_3.length; _a++) {
                    var seg = segs_3[_a];
                    this.publiclyTrigger('eventDestroy', [
                        {
                            event: new EventApi(calendar, seg.eventRange.def, seg.eventRange.instance),
                            isMirror: isMirrors,
                            el: seg.el,
                            view: this // safe to cast because this method is only called on context.view
                        }
                    ]);
                }
            }
        };
        // Pointer Interaction Utils
        // -----------------------------------------------------------------------------------------------------------------
        DateComponent.prototype.isValidSegDownEl = function (el) {
            return !this.props.eventDrag && // HACK
                !this.props.eventResize && // HACK
                !elementClosest(el, '.fc-mirror') &&
                (this.isPopover() || !this.isInPopover(el));
            // ^above line ensures we don't detect a seg interaction within a nested component.
            // it's a HACK because it only supports a popover as the nested component.
        };
        DateComponent.prototype.isValidDateDownEl = function (el) {
            var segEl = elementClosest(el, this.fgSegSelector);
            return (!segEl || segEl.classList.contains('fc-mirror')) &&
                !elementClosest(el, '.fc-more') && // a "more.." link
                !elementClosest(el, 'a[data-goto]') && // a clickable nav link
                !this.isInPopover(el);
        };
        DateComponent.prototype.isPopover = function () {
            return this.el.classList.contains('fc-popover');
        };
        DateComponent.prototype.isInPopover = function (el) {
            return Boolean(elementClosest(el, '.fc-popover'));
        };
        return DateComponent;
    }(Component));
    DateComponent.prototype.fgSegSelector = '.fc-event-container > *';
    DateComponent.prototype.bgSegSelector = '.fc-bgevent:not(.fc-nonbusiness)';

')); // we always want it to take up height
                            isOnlyButtons = false;
                        }
                        else {
                            if ((customButtonProps = calendarCustomButtons[buttonName])) {
                                buttonClick = function (ev) {
                                    if (customButtonProps.click) {
                                        customButtonProps.click.call(buttonEl, ev);
                                    }
                                };
                                (buttonIcon = theme.getCustomButtonIconClass(customButtonProps)) ||
                                    (buttonIcon = theme.getIconClass(buttonName)) ||
                                    (buttonText = customButtonProps.text);
                            }
                            else if ((viewSpec = viewSpecs[buttonName])) {
                                _this.viewsWithButtons.push(buttonName);
                                buttonClick = function () {
                                    calendar.changeView(buttonName);
                                };
                                (buttonText = viewSpec.buttonTextOverride) ||
                                    (buttonIcon = theme.getIconClass(buttonName)) ||
                                    (buttonText = viewSpec.buttonTextDefault);
                            }
                            else if (calendar[buttonName]) { // a calendar method
                                buttonClick = function () {
                                    calendar[buttonName]();
                                };
                                (buttonText = calendarButtonTextOverrides[buttonName]) ||
                                    (buttonIcon = theme.getIconClass(buttonName)) ||
                                    (buttonText = calendarButtonText[buttonName]);
                                //            ^ everything else is considered default
                            }
                            if (buttonClick) {
                                buttonClasses = [
                                    'fc-' + buttonName + '-button',
                                    theme.getClass('button')
                                ];
                                if (buttonText) {
                                    buttonInnerHtml = htmlEscape(buttonText);
                                    buttonAriaAttr = '';
                                }
                                else if (buttonIcon) {
                                    buttonInnerHtml = "";
                                    buttonAriaAttr = ' aria-label="' + buttonName + '"';
                                }
                                buttonEl = htmlToElement(// type="button" so that it doesn't submit a form
                                '' + buttonInnerHtml + '');
                                buttonEl.addEventListener('click', buttonClick);
                                groupChildren.push(buttonEl);
                            }
                        }
                    });
                    if (groupChildren.length > 1) {
                        groupEl = document.createElement('div');
                        var buttonGroupClassName = theme.getClass('buttonGroup');
                        if (isOnlyButtons && buttonGroupClassName) {
                            groupEl.classList.add(buttonGroupClassName);
                        }
                        appendToElement(groupEl, groupChildren);
                        sectionEl.appendChild(groupEl);
                    }
                    else {
                        appendToElement(sectionEl, groupChildren); // 1 or 0 children
                    }
                });
            }
            return sectionEl;
        };
        Toolbar.prototype.updateToday = function (isTodayEnabled) {
            this.toggleButtonEnabled('today', isTodayEnabled);
        };
        Toolbar.prototype.updatePrev = function (isPrevEnabled) {
            this.toggleButtonEnabled('prev', isPrevEnabled);
        };
        Toolbar.prototype.updateNext = function (isNextEnabled) {
            this.toggleButtonEnabled('next', isNextEnabled);
        };
        Toolbar.prototype.updateTitle = function (text) {
            findElements(this.el, 'h2').forEach(function (titleEl) {
                titleEl.innerText = text;
            });
        };
        Toolbar.prototype.updateActiveButton = function (buttonName) {
            var className = this.theme.getClass('buttonActive');
            findElements(this.el, 'button').forEach(function (buttonEl) {
                if (buttonName && buttonEl.classList.contains('fc-' + buttonName + '-button')) {
                    buttonEl.classList.add(className);
                }
                else {
                    buttonEl.classList.remove(className);
                }
            });
        };
        Toolbar.prototype.toggleButtonEnabled = function (buttonName, bool) {
            findElements(this.el, '.fc-' + buttonName + '-button').forEach(function (buttonEl) {
                buttonEl.disabled = !bool;
            });
        };
        return Toolbar;
    }(Component));

    /*
    Detects when the user clicks on an event within a DateComponent
    */
    var EventClicking = /** @class */ (function (_super) {
        __extends(EventClicking, _super);
        function EventClicking(settings) {
            var _this = _super.call(this, settings) || this;
            _this.handleSegClick = function (ev, segEl) {
                var component = _this.component;
                var seg = getElSeg(segEl);
                if (seg && // might be the

    /*
    Triggers events and adds/removes core classNames when the user's pointer
    enters/leaves event-elements of a component.
    */
    var EventHovering = /** @class */ (function (_super) {
        __extends(EventHovering, _super);
        function EventHovering(settings) {
            var _this = _super.call(this, settings) || this;
            // for simulating an eventMouseLeave when the event el is destroyed while mouse is over it
            _this.handleEventElRemove = function (el) {
                if (el === _this.currentSegEl) {
                    _this.handleSegLeave(null, _this.currentSegEl);
                }
            };
            _this.handleSegEnter = function (ev, segEl) {
                if (getElSeg(segEl)) { // TODO: better way to make sure not hovering over more+ link or its wrapper
                    segEl.classList.add('fc-allow-mouse-resize');
                    _this.currentSegEl = segEl;
                    _this.triggerEvent('eventMouseEnter', ev, segEl);
                }
            };
            _this.handleSegLeave = function (ev, segEl) {
                if (_this.currentSegEl) {
                    segEl.classList.remove('fc-allow-mouse-resize');
                    _this.currentSegEl = null;
                    _this.triggerEvent('eventMouseLeave', ev, segEl);
                }
            };
            var component = settings.component;
            _this.removeHoverListeners = listenToHoverBySelector(component.el, component.fgSegSelector + ',' + component.bgSegSelector, _this.handleSegEnter, _this.handleSegLeave);
            component.calendar.on('eventElRemove', _this.handleEventElRemove);
            return _this;
        }
        EventHovering.prototype.destroy = function () {
            this.removeHoverListeners();
            this.component.calendar.off('eventElRemove', this.handleEventElRemove);
        };
        EventHovering.prototype.triggerEvent = function (publicEvName, ev, segEl) {
            var component = this.component;
            var seg = getElSeg(segEl);
            if (!ev || component.isValidSegDownEl(ev.target)) {
                component.publiclyTrigger(publicEvName, [
                    {
                        el: segEl,
                        event: new EventApi(this.component.calendar, seg.eventRange.def, seg.eventRange.instance),
                        jsEvent: ev,
                        view: component.view
                    }
                ]);
            }
        };
        return EventHovering;
    }(Interaction));

    var NamedTimeZoneImpl = /** @class */ (function () {
        function NamedTimeZoneImpl(timeZoneName) {
            this.timeZoneName = timeZoneName;
        }
        return NamedTimeZoneImpl;
    }());

    /*
    An abstraction for a dragging interaction originating on an event.
    Does higher-level things than PointerDragger, such as possibly:
    - a "mirror" that moves with the pointer
    - a minimum number of pixels or other criteria for a true drag to begin

    subclasses must emit:
    - pointerdown
    - dragstart
    - dragmove
    - pointerup
    - dragend
    */
    var ElementDragging = /** @class */ (function () {
        function ElementDragging(el) {
            this.emitter = new EmitterMixin();
        }
        ElementDragging.prototype.destroy = function () {
        };
        ElementDragging.prototype.setMirrorIsVisible = function (bool) {
            // optional if subclass doesn't want to support a mirror
        };
        ElementDragging.prototype.setMirrorNeedsRevert = function (bool) {
            // optional if subclass doesn't want to support a mirror
        };
        ElementDragging.prototype.setAutoScrollEnabled = function (bool) {
            // optional
        };
        return ElementDragging;
    }());

    // Computes a default column header formatting string if `colFormat` is not explicitly defined
    function computeFallbackHeaderFormat(datesRepDistinctDays, dayCnt) {
        // if more than one week row, or if there are a lot of columns with not much space,
        // put just the day numbers will be in each cell
        if (!datesRepDistinctDays || dayCnt > 10) {
            return { weekday: 'short' }; // "Sat"
        }
        else if (dayCnt > 1) {
            return { weekday: 'short', month: 'numeric', day: 'numeric', omitCommas: true }; // "Sat 11/12"
        }
        else {
            return { weekday: 'long' }; // "Saturday"
        }
    }
    function renderDateCell(dateMarker, dateProfile, datesRepDistinctDays, colCnt, colHeadFormat, context, colspan, otherAttrs) {
        var view = context.view, dateEnv = context.dateEnv, theme = context.theme, options = context.options;
        var isDateValid = rangeContainsMarker(dateProfile.activeRange, dateMarker); // TODO: called too frequently. cache somehow.
        var classNames = [
            'fc-day-header',
            theme.getClass('widgetHeader')
        ];
        var innerHtml;
        if (typeof options.columnHeaderHtml === 'function') {
            innerHtml = options.columnHeaderHtml(dateEnv.toDate(dateMarker));
        }
        else if (typeof options.columnHeaderText === 'function') {
            innerHtml = htmlEscape(options.columnHeaderText(dateEnv.toDate(dateMarker)));
        }
        else {
            innerHtml = htmlEscape(dateEnv.format(dateMarker, colHeadFormat));
        }
        // if only one row of days, the classNames on the header can represent the specific days beneath
        if (datesRepDistinctDays) {
            classNames = classNames.concat(
            // includes the day-of-week class
            // noThemeHighlight=true (don't highlight the header)
            getDayClasses(dateMarker, dateProfile, context, true));
        }
        else {
            classNames.push('fc-' + DAY_IDS[dateMarker.getUTCDay()]); // only add the day-of-week class
        }
        return '' +
            ' 1 ?
                ' colspan="' + colspan + '"' :
                '') +
            (otherAttrs ?
                ' ' + otherAttrs :
                '') +
            '>' +
            (isDateValid ?
                // don't make a link if the heading could represent multiple days, or if there's only one day (forceOff)
                buildGotoAnchorHtml(view, { date: dateMarker, forceOff: !datesRepDistinctDays || colCnt === 1 }, innerHtml) :
                // if not valid, display text, but no link
                innerHtml) +
            '';
    }

    var DayHeader = /** @class */ (function (_super) {
        __extends(DayHeader, _super);
        function DayHeader(context, parentEl) {
            var _this = _super.call(this, context) || this;
            parentEl.innerHTML = ''; // because might be nbsp
            parentEl.appendChild(_this.el = htmlToElement('

' +
                '' +
                '' +
                '' +
                '

'));
            _this.thead = _this.el.querySelector('thead');
            return _this;
        }
        DayHeader.prototype.destroy = function () {
            removeElement(this.el);
        };
        DayHeader.prototype.render = function (props) {
            var dates = props.dates, datesRepDistinctDays = props.datesRepDistinctDays;
            var parts = [];
            if (props.renderIntroHtml) {
                parts.push(props.renderIntroHtml());
            }
            var colHeadFormat = createFormatter(this.opt('columnHeaderFormat') ||
                computeFallbackHeaderFormat(datesRepDistinctDays, dates.length));
            for (var _i = 0, dates_1 = dates; _i < dates_1.length; _i++) {
                var date = dates_1[_i];
                parts.push(renderDateCell(date, props.dateProfile, datesRepDistinctDays, dates.length, colHeadFormat, this.context));
            }
            if (this.isRtl) {
                parts.reverse();
            }
            this.thead.innerHTML = '' + parts.join('') + '';
        };
        return DayHeader;
    }(Component));

    // exports
    // --------------------------------------------------------------------------------------------------
    var version = '4.3.1';

    exports.Calendar = Calendar;
    exports.Component = Component;
    exports.DateComponent = DateComponent;
    exports.DateEnv = DateEnv;
    exports.DateProfileGenerator = DateProfileGenerator;
    exports.DayHeader = DayHeader;
    exports.DaySeries = DaySeries;
    exports.DayTable = DayTable;
    exports.ElementDragging = ElementDragging;
    exports.ElementScrollController = ElementScrollController;
    exports.EmitterMixin = EmitterMixin;
    exports.EventApi = EventApi;
    exports.FgEventRenderer = FgEventRenderer;
    exports.FillRenderer = FillRenderer;
    exports.Interaction = Interaction;
    exports.Mixin = Mixin;
    exports.NamedTimeZoneImpl = NamedTimeZoneImpl;
    exports.PositionCache = PositionCache;
    exports.ScrollComponent = ScrollComponent;
    exports.ScrollController = ScrollController;
    exports.Slicer = Slicer;
    exports.Splitter = Splitter;
    exports.Theme = Theme;
    exports.View = View;
    exports.WindowScrollController = WindowScrollController;
    exports.addDays = addDays;
    exports.addDurations = addDurations;
    exports.addMs = addMs;
    exports.addWeeks = addWeeks;
    exports.allowContextMenu = allowContextMenu;
    exports.allowSelection = allowSelection;
    exports.appendToElement = appendToElement;
    exports.applyAll = applyAll;
    exports.applyMutationToEventStore = applyMutationToEventStore;
    exports.applyStyle = applyStyle;
    exports.applyStyleProp = applyStyleProp;
    exports.asRoughMinutes = asRoughMinutes;
    exports.asRoughMs = asRoughMs;
    exports.asRoughSeconds = asRoughSeconds;
    exports.buildGotoAnchorHtml = buildGotoAnchorHtml;
    exports.buildSegCompareObj = buildSegCompareObj;
    exports.capitaliseFirstLetter = capitaliseFirstLetter;
    exports.combineEventUis = combineEventUis;
    exports.compareByFieldSpec = compareByFieldSpec;
    exports.compareByFieldSpecs = compareByFieldSpecs;
    exports.compareNumbers = compareNumbers;
    exports.compensateScroll = compensateScroll;
    exports.computeClippingRect = computeClippingRect;
    exports.computeEdges = computeEdges;
    exports.computeFallbackHeaderFormat = computeFallbackHeaderFormat;
    exports.computeHeightAndMargins = computeHeightAndMargins;
    exports.computeInnerRect = computeInnerRect;
    exports.computeRect = computeRect;
    exports.computeVisibleDayRange = computeVisibleDayRange;
    exports.config = config;
    exports.constrainPoint = constrainPoint;
    exports.createDuration = createDuration;
    exports.createElement = createElement;
    exports.createEmptyEventStore = createEmptyEventStore;
    exports.createEventInstance = createEventInstance;
    exports.createFormatter = createFormatter;
    exports.createPlugin = createPlugin;
    exports.cssToStr = cssToStr;
    exports.debounce = debounce;
    exports.diffDates = diffDates;
    exports.diffDayAndTime = diffDayAndTime;
    exports.diffDays = diffDays;
    exports.diffPoints = diffPoints;
    exports.diffWeeks = diffWeeks;
    exports.diffWholeDays = diffWholeDays;
    exports.diffWholeWeeks = diffWholeWeeks;
    exports.disableCursor = disableCursor;
    exports.distributeHeight = distributeHeight;
    exports.elementClosest = elementClosest;
    exports.elementMatches = elementMatches;
    exports.enableCursor = enableCursor;
    exports.eventTupleToStore = eventTupleToStore;
    exports.filterEventStoreDefs = filterEventStoreDefs;
    exports.filterHash = filterHash;
    exports.findChildren = findChildren;
    exports.findElements = findElements;
    exports.flexibleCompare = flexibleCompare;
    exports.forceClassName = forceClassName;
    exports.formatDate = formatDate;
    exports.formatIsoTimeString = formatIsoTimeString;
    exports.formatRange = formatRange;
    exports.getAllDayHtml = getAllDayHtml;
    exports.getClippingParents = getClippingParents;
    exports.getDayClasses = getDayClasses;
    exports.getElSeg = getElSeg;
    exports.getRectCenter = getRectCenter;
    exports.getRelevantEvents = getRelevantEvents;
    exports.globalDefaults = globalDefaults;
    exports.greatestDurationDenominator = greatestDurationDenominator;
    exports.hasBgRendering = hasBgRendering;
    exports.htmlEscape = htmlEscape;
    exports.htmlToElement = htmlToElement;
    exports.insertAfterElement = insertAfterElement;
    exports.interactionSettingsStore = interactionSettingsStore;
    exports.interactionSettingsToStore = interactionSettingsToStore;
    exports.intersectRanges = intersectRanges;
    exports.intersectRects = intersectRects;
    exports.isArraysEqual = isArraysEqual;
    exports.isDateSpansEqual = isDateSpansEqual;
    exports.isInt = isInt;
    exports.isInteractionValid = isInteractionValid;
    exports.isMultiDayRange = isMultiDayRange;
    exports.isPropsEqual = isPropsEqual;
    exports.isPropsValid = isPropsValid;
    exports.isSingleDay = isSingleDay;
    exports.isValidDate = isValidDate;
    exports.listenBySelector = listenBySelector;
    exports.mapHash = mapHash;
    exports.matchCellWidths = matchCellWidths;
    exports.memoize = memoize;
    exports.memoizeOutput = memoizeOutput;
    exports.memoizeRendering = memoizeRendering;
    exports.mergeEventStores = mergeEventStores;
    exports.multiplyDuration = multiplyDuration;
    exports.padStart = padStart;
    exports.parseBusinessHours = parseBusinessHours;
    exports.parseDragMeta = parseDragMeta;
    exports.parseEventDef = parseEventDef;
    exports.parseFieldSpecs = parseFieldSpecs;
    exports.parseMarker = parse;
    exports.pointInsideRect = pointInsideRect;
    exports.prependToElement = prependToElement;
    exports.preventContextMenu = preventContextMenu;
    exports.preventDefault = preventDefault;
    exports.preventSelection = preventSelection;
    exports.processScopedUiProps = processScopedUiProps;
    exports.rangeContainsMarker = rangeContainsMarker;
    exports.rangeContainsRange = rangeContainsRange;
    exports.rangesEqual = rangesEqual;
    exports.rangesIntersect = rangesIntersect;
    exports.refineProps = refineProps;
    exports.removeElement = removeElement;
    exports.removeExact = removeExact;
    exports.renderDateCell = renderDateCell;
    exports.requestJson = requestJson;
    exports.sliceEventStore = sliceEventStore;
    exports.startOfDay = startOfDay;
    exports.subtractInnerElHeight = subtractInnerElHeight;
    exports.translateRect = translateRect;
    exports.uncompensateScroll = uncompensateScroll;
    exports.undistributeHeight = undistributeHeight;
    exports.unpromisify = unpromisify;
    exports.version = version;
    exports.whenTransitionDone = whenTransitionDone;
    exports.wholeDivideDurations = wholeDivideDurations;

Object.defineProperty(exports, '__esModule', { value: true });

}));

// Generated by dts-bundle v0.7.3-fork.1
// Dependencies for this module:
// ../../../../../@fullcalendar/core

declare module '@fullcalendar/core' {
    export const version = "<%= version %>";
    export { OptionsInput } from '@fullcalendar/core/types/input-types';
    export { EventInput, EventDef, EventDefHash, EventInstance, EventInstanceHash, parseEventDef, createEventInstance, EventTuple } from '@fullcalendar/core/structs/event';
    export { BusinessHoursInput, parseBusinessHours } from '@fullcalendar/core/structs/business-hours';
    export { applyAll, debounce, padStart, isInt, capitaliseFirstLetter, parseFieldSpecs, compareByFieldSpecs, compareByFieldSpec, flexibleCompare, computeVisibleDayRange, refineProps, matchCellWidths, uncompensateScroll, compensateScroll, subtractInnerElHeight, isMultiDayRange, distributeHeight, undistributeHeight, preventSelection, allowSelection, preventContextMenu, allowContextMenu, compareNumbers, enableCursor, disableCursor, diffDates } from '@fullcalendar/core/util/misc';
    export { htmlEscape, cssToStr } from '@fullcalendar/core/util/html';
    export { removeExact, isArraysEqual } from '@fullcalendar/core/util/array';
    export { memoize, memoizeOutput } from '@fullcalendar/core/util/memoize';
    export { memoizeRendering, MemoizedRendering } from '@fullcalendar/core/component/memoized-rendering';
    export { intersectRects, Rect, pointInsideRect, constrainPoint, getRectCenter, diffPoints, Point, translateRect } from '@fullcalendar/core/util/geom';
    export { mapHash, filterHash, isPropsEqual } from '@fullcalendar/core/util/object';
    export { findElements, findChildren, htmlToElement, createElement, insertAfterElement, prependToElement, removeElement, appendToElement, applyStyle, applyStyleProp, elementMatches, elementClosest, forceClassName } from '@fullcalendar/core/util/dom-manip';
    export { EventStore, filterEventStoreDefs, createEmptyEventStore, mergeEventStores, getRelevantEvents, eventTupleToStore } from '@fullcalendar/core/structs/event-store';
    export { EventUiHash, EventUi, processScopedUiProps, combineEventUis } from '@fullcalendar/core/component/event-ui';
    export { default as Splitter, SplittableProps } from '@fullcalendar/core/component/event-splitting';
    export { buildGotoAnchorHtml, getAllDayHtml, getDayClasses } from '@fullcalendar/core/component/date-rendering';
    export { preventDefault, listenBySelector, whenTransitionDone } from '@fullcalendar/core/util/dom-event';
    export { computeInnerRect, computeEdges, computeHeightAndMargins, getClippingParents, computeClippingRect, computeRect } from '@fullcalendar/core/util/dom-geom';
    export { unpromisify } from '@fullcalendar/core/util/promise';
    export { default as EmitterMixin, EmitterInterface } from '@fullcalendar/core/common/EmitterMixin';
    export { DateRange, rangeContainsMarker, intersectRanges, rangesEqual, rangesIntersect, rangeContainsRange } from '@fullcalendar/core/datelib/date-range';
    export { default as Mixin } from '@fullcalendar/core/common/Mixin';
    export { default as PositionCache } from '@fullcalendar/core/common/PositionCache';
    export { default as ScrollComponent, ScrollbarWidths } from '@fullcalendar/core/common/ScrollComponent';
    export { ScrollController, ElementScrollController, WindowScrollController } from '@fullcalendar/core/common/scroll-controller';
    export { default as Theme } from '@fullcalendar/core/theme/Theme';
    export { default as Component, ComponentContext } from '@fullcalendar/core/component/Component';
    export { default as DateComponent, Seg, EventSegUiInteractionState } from '@fullcalendar/core/component/DateComponent';
    export { default as Calendar, DatePointTransform, DateSpanTransform, DateSelectionApi } from '@fullcalendar/core/Calendar';
    export { default as View, ViewProps } from '@fullcalendar/core/View';
    export { default as FgEventRenderer, buildSegCompareObj } from '@fullcalendar/core/component/renderers/FgEventRenderer';
    export { default as FillRenderer } from '@fullcalendar/core/component/renderers/FillRenderer';
    export { default as DateProfileGenerator, DateProfile } from '@fullcalendar/core/DateProfileGenerator';
    export { ViewDef } from '@fullcalendar/core/structs/view-def';
    export { ViewSpec } from '@fullcalendar/core/structs/view-spec';
    export { DateSpan, DateSpanApi, DatePointApi, isDateSpansEqual } from '@fullcalendar/core/structs/date-span';
    export { DateMarker, addDays, startOfDay, addMs, addWeeks, diffWeeks, diffWholeWeeks, diffWholeDays, diffDayAndTime, diffDays, isValidDate } from '@fullcalendar/core/datelib/marker';
    export { Duration, createDuration, isSingleDay, multiplyDuration, addDurations, asRoughMinutes, asRoughSeconds, asRoughMs, wholeDivideDurations, greatestDurationDenominator } from '@fullcalendar/core/datelib/duration';
    export { DateEnv, DateMarkerMeta } from '@fullcalendar/core/datelib/env';
    export { DateFormatter, createFormatter, VerboseFormattingArg, formatIsoTimeString } from '@fullcalendar/core/datelib/formatting';
    export { NamedTimeZoneImpl } from '@fullcalendar/core/datelib/timezone';
    export { parse as parseMarker } from '@fullcalendar/core/datelib/parsing';
    export { EventSourceDef, EventSource, EventSourceHash } from '@fullcalendar/core/structs/event-source';
    export { Interaction, InteractionSettings, interactionSettingsToStore, interactionSettingsStore, InteractionSettingsStore } from '@fullcalendar/core/interactions/interaction';
    export { PointerDragEvent } from '@fullcalendar/core/interactions/pointer';
    export { Hit } from '@fullcalendar/core/interactions/hit';
    export { dateSelectionJoinTransformer } from '@fullcalendar/core/interactions/date-selecting';
    export { eventDragMutationMassager, EventDropTransformers } from '@fullcalendar/core/interactions/event-dragging';
    export { EventResizeJoinTransforms } from '@fullcalendar/core/interactions/event-resizing';
    export { default as ElementDragging } from '@fullcalendar/core/interactions/ElementDragging';
    export { formatDate, formatRange } from '@fullcalendar/core/formatting-api';
    export { globalDefaults, config } from '@fullcalendar/core/options';
    export { RecurringType, ParsedRecurring } from '@fullcalendar/core/structs/recurring-event';
    export { DragMetaInput, DragMeta, parseDragMeta } from '@fullcalendar/core/structs/drag-meta';
    export { createPlugin, PluginDef, PluginDefInput, ViewPropsTransformer, ViewContainerModifier } from '@fullcalendar/core/plugin-system';
    export { reducerFunc, Action, CalendarState } from '@fullcalendar/core/reducers/types';
    export { CalendarComponentProps } from '@fullcalendar/core/CalendarComponent';
    export { default as DayHeader } from '@fullcalendar/core/common/DayHeader';
    export { computeFallbackHeaderFormat, renderDateCell } from '@fullcalendar/core/common/table-utils';
    export { default as DaySeries } from '@fullcalendar/core/common/DaySeries';
    export { EventInteractionState } from '@fullcalendar/core/interactions/event-interaction-state';
    export { EventRenderRange, sliceEventStore, hasBgRendering, getElSeg } from '@fullcalendar/core/component/event-rendering';
    export { default as DayTable, DayTableSeg, DayTableCell } from '@fullcalendar/core/common/DayTable';
    export { default as Slicer, SlicedProps } from '@fullcalendar/core/common/slicing-utils';
    export { EventMutation, applyMutationToEventStore } from '@fullcalendar/core/structs/event-mutation';
    export { Constraint, ConstraintInput, AllowFunc, isPropsValid, isInteractionValid } from '@fullcalendar/core/validation';
    export { default as EventApi } from '@fullcalendar/core/api/EventApi';
    export { default as requestJson } from '@fullcalendar/core/util/requestJson';
}

declare module '@fullcalendar/core/types/input-types' {
    import View from '@fullcalendar/core/View';
    import { EventSourceInput, EventInputTransformer } from '@fullcalendar/core/structs/event-source';
    import { Duration, DurationInput } from '@fullcalendar/core/datelib/duration';
    import { DateInput } from '@fullcalendar/core/datelib/env';
    import { FormatterInput } from '@fullcalendar/core/datelib/formatting';
    import { DateRangeInput } from '@fullcalendar/core/datelib/date-range';
    import { BusinessHoursInput } from '@fullcalendar/core/structs/business-hours';
    import EventApi from '@fullcalendar/core/api/EventApi';
    import { AllowFunc, ConstraintInput, OverlapFunc } from '@fullcalendar/core/validation';
    import { PluginDef } from '@fullcalendar/core/plugin-system';
    import { LocaleSingularArg, RawLocale } from '@fullcalendar/core/datelib/locale';
    export interface ToolbarInput {
        left?: string;
        center?: string;
        right?: string;
    }
    export interface CustomButtonInput {
        text: string;
        icon?: string;
        themeIcon?: string;
        bootstrapFontAwesome?: string;
        click(element: HTMLElement): void;
    }
    export interface ButtonIconsInput {
        prev?: string;
        next?: string;
        prevYear?: string;
        nextYear?: string;
    }
    export interface ButtonTextCompoundInput {
        prev?: string;
        next?: string;
        prevYear?: string;
        nextYear?: string;
        today?: string;
        month?: string;
        week?: string;
        day?: string;
        [viewId: string]: string | undefined;
    }
    export interface EventSegment {
        event: EventApi;
        start: Date;
        end: Date;
        isStart: boolean;
        isEnd: boolean;
    }
    export interface CellInfo {
        date: Date;
        dayEl: HTMLElement;
        moreEl: HTMLElement;
        segs: EventSegment[];
        hiddenSegs: EventSegment[];
    }
    export interface DropInfo {
        start: Date;
        end: Date;
    }
    export type EventHandlerName = '_init' | 'selectAllow' | 'eventAllow' | 'eventDataTransform' | 'datesRender' | 'datesDestroy' | 'dayRender' | 'windowResize' | 'dateClick' | 'eventClick' | 'eventMouseEnter' | 'eventMouseLeave' | 'select' | 'unselect' | 'loading' | 'eventRender' | 'eventPositioned' | '_eventsPositioned' | 'eventDestroy' | 'eventDragStart' | 'eventDragStop' | 'eventDrop' | '_destroyed' | 'drop' | 'eventResizeStart' | 'eventResizeStop' | 'eventResize' | 'eventReceive' | 'eventLeave' | 'viewSkeletonRender' | 'viewSkeletonDestroy' | '_noEventDrop' | '_noEventResize' | 'eventLimitClick' | 'resourceRender';
    export type EventHandlerArgs = Parameters any>>;
    export type EventHandlerArg = EventHandlerArgs[0];
    export interface OptionsInputBase {
        header?: boolean | ToolbarInput;
        footer?: boolean | ToolbarInput;
        customButtons?: {
            [name: string]: CustomButtonInput;
        };
        buttonIcons?: boolean | ButtonIconsInput;
        themeSystem?: 'standard' | string;
        bootstrapFontAwesome?: boolean | ButtonIconsInput;
        firstDay?: number;
        dir?: 'ltr' | 'rtl' | 'auto';
        weekends?: boolean;
        hiddenDays?: number[];
        fixedWeekCount?: boolean;
        weekNumbers?: boolean;
        weekNumbersWithinDays?: boolean;
        weekNumberCalculation?: 'local' | 'ISO' | ((m: Date) => number);
        businessHours?: BusinessHoursInput;
        showNonCurrentDates?: boolean;
        height?: number | 'auto' | 'parent' | (() => number);
        contentHeight?: number | 'auto' | (() => number);
        aspectRatio?: number;
        handleWindowResize?: boolean;
        windowResizeDelay?: number;
        eventLimit?: boolean | number;
        eventLimitClick?: 'popover' | 'week' | 'day' | 'timeGridWeek' | 'timeGridDay' | string | ((arg: {
            date: Date;
            allDay: boolean;
            dayEl: HTMLElement;
            moreEl: HTMLElement;
            segs: any[];
            hiddenSegs: any[];
            jsEvent: MouseEvent;
            view: View;
        }) => void);
        timeZone?: string | boolean;
        now?: DateInput | (() => DateInput);
        defaultView?: string;
        allDaySlot?: boolean;
        allDayText?: string;
        slotDuration?: DurationInput;
        slotLabelFormat?: FormatterInput;
        slotLabelInterval?: DurationInput;
        snapDuration?: DurationInput;
        scrollTime?: DurationInput;
        minTime?: DurationInput;
        maxTime?: DurationInput;
        slotEventOverlap?: boolean;
        listDayFormat?: FormatterInput | boolean;
        listDayAltFormat?: FormatterInput | boolean;
        noEventsMessage?: string;
        defaultDate?: DateInput;
        nowIndicator?: boolean;
        visibleRange?: ((currentDate: Date) => DateRangeInput) | DateRangeInput;
        validRange?: DateRangeInput;
        dateIncrement?: DurationInput;
        dateAlignment?: string;
        duration?: DurationInput;
        dayCount?: number;
        locales?: RawLocale[];
        locale?: LocaleSingularArg;
        eventTimeFormat?: FormatterInput;
        columnHeader?: boolean;
        columnHeaderFormat?: FormatterInput;
        columnHeaderText?: string | ((date: DateInput) => string);
        columnHeaderHtml?: string | ((date: DateInput) => string);
        titleFormat?: FormatterInput;
        weekLabel?: string;
        displayEventTime?: boolean;
        displayEventEnd?: boolean;
        eventLimitText?: string | ((eventCnt: number) => string);
        dayPopoverFormat?: FormatterInput;
        navLinks?: boolean;
        navLinkDayClick?: string | ((date: Date, jsEvent: Event) => void);
        navLinkWeekClick?: string | ((weekStart: any, jsEvent: Event) => void);
        selectable?: boolean;
        selectMirror?: boolean;
        unselectAuto?: boolean;
        unselectCancel?: string;
        defaultAllDayEventDuration?: DurationInput;
        defaultTimedEventDuration?: DurationInput;
        cmdFormatter?: string;
        defaultRangeSeparator?: string;
        selectConstraint?: ConstraintInput;
        selectOverlap?: boolean | OverlapFunc;
        selectAllow?: AllowFunc;
        editable?: boolean;
        eventStartEditable?: boolean;
        eventDurationEditable?: boolean;
        eventConstraint?: ConstraintInput;
        eventOverlap?: boolean | OverlapFunc;
        eventAllow?: AllowFunc;
        eventClassName?: string[] | string;
        eventClassNames?: string[] | string;
        eventBackgroundColor?: string;
        eventBorderColor?: string;
        eventTextColor?: string;
        eventColor?: string;
        events?: EventSourceInput;
        eventSources?: EventSourceInput[];
        allDayDefault?: boolean;
        startParam?: string;
        endParam?: string;
        lazyFetching?: boolean;
        nextDayThreshold?: DurationInput;
        eventOrder?: string | Array<((a: EventApi, b: EventApi) => number) | (string | ((a: EventApi, b: EventApi) => number))>;
        rerenderDelay?: number | null;
        dragRevertDuration?: number;
        dragScroll?: boolean;
        longPressDelay?: number;
        eventLongPressDelay?: number;
        droppable?: boolean;
        dropAccept?: string | ((draggable: any) => boolean);
        eventDataTransform?: EventInputTransformer;
        allDayMaintainDuration?: boolean;
        eventResizableFromStart?: boolean;
        timeGridEventMinHeight?: number;
        allDayHtml?: string;
        eventDragMinDistance?: number;
        eventSourceFailure?: any;
        eventSourceSuccess?: any;
        forceEventDuration?: boolean;
        progressiveEventRendering?: boolean;
        selectLongPressDelay?: number;
        selectMinDistance?: number;
        timeZoneParam?: string;
        titleRangeSeparator?: string;
        datesRender?(arg: {
            view: View;
            el: HTMLElement;
        }): void;
        datesDestroy?(arg: {
            view: View;
            el: HTMLElement;
        }): void;
        dayRender?(arg: {
            view: View;
            date: Date;
            allDay?: boolean;
            el: HTMLElement;
        }): void;
        windowResize?(view: View): void;
        dateClick?(arg: {
            date: Date;
            dateStr: string;
            allDay: boolean;
            resource?: any;
            dayEl: HTMLElement;
            jsEvent: MouseEvent;
            view: View;
        }): void;
        eventClick?(arg: {
            el: HTMLElement;
            event: EventApi;
            jsEvent: MouseEvent;
            view: View;
        }): boolean | void;
        eventMouseEnter?(arg: {
            el: HTMLElement;
            event: EventApi;
            jsEvent: MouseEvent;
            view: View;
        }): void;
        eventMouseLeave?(arg: {
            el: HTMLElement;
            event: EventApi;
            jsEvent: MouseEvent;
            view: View;
        }): void;
        select?(arg: {
            start: Date;
            end: Date;
            startStr: string;
            endStr: string;
            allDay: boolean;
            resource?: any;
            jsEvent: MouseEvent;
            view: View;
        }): void;
        unselect?(arg: {
            view: View;
            jsEvent: Event;
        }): void;
        loading?(isLoading: boolean): void;
        eventRender?(arg: {
            isMirror: boolean;
            isStart: boolean;
            isEnd: boolean;
            event: EventApi;
            el: HTMLElement;
            view: View;
        }): void;
        eventPositioned?(arg: {
            isMirror: boolean;
            isStart: boolean;
            isEnd: boolean;
            event: EventApi;
            el: HTMLElement;
            view: View;
        }): void;
        _eventsPositioned?(arg: {
            view: View;
        }): void;
        eventDestroy?(arg: {
            isMirror: boolean;
            event: EventApi;
            el: HTMLElement;
            view: View;
        }): void;
        eventDragStart?(arg: {
            event: EventApi;
            el: HTMLElement;
            jsEvent: MouseEvent;
            view: View;
        }): void;
        eventDragStop?(arg: {
            event: EventApi;
            el: HTMLElement;
            jsEvent: MouseEvent;
            view: View;
        }): void;
        eventDrop?(arg: {
            el: HTMLElement;
            event: EventApi;
            oldEvent: EventApi;
            delta: Duration;
            revert: () => void;
            jsEvent: Event;
            view: View;
        }): void;
        eventResizeStart?(arg: {
            el: HTMLElement;
            event: EventApi;
            jsEvent: MouseEvent;
            view: View;
        }): void;
        eventResizeStop?(arg: {
            el: HTMLElement;
            event: EventApi;
            jsEvent: MouseEvent;
            view: View;
        }): void;
        eventResize?(arg: {
            el: HTMLElement;
            startDelta: Duration;
            endDelta: Duration;
            prevEvent: EventApi;
            event: EventApi;
            revert: () => void;
            jsEvent: Event;
            view: View;
        }): void;
        drop?(arg: {
            date: Date;
            dateStr: string;
            allDay: boolean;
            draggedEl: HTMLElement;
            jsEvent: MouseEvent;
            view: View;
        }): void;
        eventReceive?(arg: {
            event: EventApi;
            draggedEl: HTMLElement;
            view: View;
        }): void;
        eventLeave?(arg: {
            draggedEl: HTMLElement;
            event: EventApi;
            view: View;
        }): void;
        viewSkeletonRender?(arg: {
            el: HTMLElement;
            view: View;
        }): void;
        viewSkeletonDestroy?(arg: {
            el: HTMLElement;
            view: View;
        }): void;
        _destroyed?(): void;
        _init?(): void;
        _noEventDrop?(): void;
        _noEventResize?(): void;
        resourceRender?(arg: {
            resource: any;
            el: HTMLElement;
            view: View;
        }): void;
    }
    export interface ViewOptionsInput extends OptionsInputBase {
        type?: string;
        buttonText?: string;
    }
    export interface OptionsInput extends OptionsInputBase {
        buttonText?: ButtonTextCompoundInput;
        views?: {
            [viewId: string]: ViewOptionsInput;
        };
        plugins?: (PluginDef | string)[];
    }
}

declare module '@fullcalendar/core/structs/event' {
    import { DateInput } from '@fullcalendar/core/datelib/env';
    import Calendar from '@fullcalendar/core/Calendar';
    import { DateRange } from '@fullcalendar/core/datelib/date-range';
    import { Duration } from '@fullcalendar/core/datelib/duration';
    import { UnscopedEventUiInput, EventUi } from '@fullcalendar/core/component/event-ui';
    export type EventRenderingChoice = '' | 'background' | 'inverse-background' | 'none';
    export interface EventNonDateInput extends UnscopedEventUiInput {
        id?: string | number;
        groupId?: string | number;
        title?: string;
        url?: string;
        rendering?: EventRenderingChoice;
        extendedProps?: object;
        [extendedProp: string]: any;
    }
    export interface EventDateInput {
        start?: DateInput;
        end?: DateInput;
        date?: DateInput;
        allDay?: boolean;
    }
    export type EventInput = EventNonDateInput & EventDateInput;
    export interface EventDef {
        defId: string;
        sourceId: string;
        publicId: string;
        groupId: string;
        allDay: boolean;
        hasEnd: boolean;
        recurringDef: {
            typeId: number;
            typeData: any;
            duration: Duration | null;
        } | null;
        title: string;
        url: string;
        rendering: EventRenderingChoice;
        ui: EventUi;
        extendedProps: any;
    }
    export interface EventInstance {
        instanceId: string;
        defId: string;
        range: DateRange;
        forcedStartTzo: number | null;
        forcedEndTzo: number | null;
    }
    export interface EventTuple {
        def: EventDef;
        instance: EventInstance | null;
    }
    export type EventInstanceHash = {
        [instanceId: string]: EventInstance;
    };
    export type EventDefHash = {
        [defId: string]: EventDef;
    };
    export const NON_DATE_PROPS: {
        id: StringConstructor;
        groupId: StringConstructor;
        title: StringConstructor;
        url: StringConstructor;
        rendering: StringConstructor;
        extendedProps: any;
    };
    export const DATE_PROPS: {
        start: any;
        date: any;
        end: any;
        allDay: any;
    };
    export function parseEvent(raw: EventInput, sourceId: string, calendar: Calendar, allowOpenRange?: boolean): EventTuple | null;
    export function parseEventDef(raw: EventNonDateInput, sourceId: string, allDay: boolean, hasEnd: boolean, calendar: Calendar): EventDef;
    export type eventDefParserFunc = (def: EventDef, props: any, leftovers: any) => void;
    export function createEventInstance(defId: string, range: DateRange, forcedStartTzo?: number, forcedEndTzo?: number): EventInstance;
}

declare module '@fullcalendar/core/structs/business-hours' {
    import Calendar from '@fullcalendar/core/Calendar';
    import { EventInput } from '@fullcalendar/core/structs/event';
    import { EventStore } from '@fullcalendar/core/structs/event-store';
    export type BusinessHoursInput = boolean | EventInput | EventInput[];
    export function parseBusinessHours(input: BusinessHoursInput, calendar: Calendar): EventStore;
}

declare module '@fullcalendar/core/util/misc' {
    import { DateMarker } from '@fullcalendar/core/datelib/marker';
    import { Duration } from '@fullcalendar/core/datelib/duration';
    import { DateEnv } from '@fullcalendar/core/datelib/env';
    import { DateRange, OpenDateRange } from '@fullcalendar/core/datelib/date-range';
    export function compensateScroll(rowEl: HTMLElement, scrollbarWidths: any): void;
    export function uncompensateScroll(rowEl: HTMLElement): void;
    export function disableCursor(): void;
    export function enableCursor(): void;
    export function distributeHeight(els: HTMLElement[], availableHeight: any, shouldRedistribute: any): void;
    export function undistributeHeight(els: HTMLElement[]): void;
    export function matchCellWidths(els: HTMLElement[]): number;
    export function subtractInnerElHeight(outerEl: HTMLElement, innerEl: HTMLElement): number;
    export function preventSelection(el: HTMLElement): void;
    export function allowSelection(el: HTMLElement): void;
    export function preventContextMenu(el: HTMLElement): void;
    export function allowContextMenu(el: HTMLElement): void;
    export function parseFieldSpecs(input: any): any[];
    export function compareByFieldSpecs(obj0: any, obj1: any, fieldSpecs: any): any;
    export function compareByFieldSpec(obj0: any, obj1: any, fieldSpec: any): any;
    export function flexibleCompare(a: any, b: any): number;
    export function capitaliseFirstLetter(str: any): any;
    export function padStart(val: any, len: any): string;
    export function compareNumbers(a: any, b: any): number;
    export function isInt(n: any): boolean;
    export function applyAll(functions: any, thisObj: any, args: any): any;
    export function firstDefined(...args: any[]): any;
    export function debounce(func: any, wait: any): () => any;
    export type GenericHash = {
        [key: string]: any;
    };
    export function refineProps(rawProps: GenericHash, processors: GenericHash, defaults?: GenericHash, leftoverProps?: GenericHash): GenericHash;
    export function computeAlignedDayRange(timedRange: DateRange): DateRange;
    export function computeVisibleDayRange(timedRange: OpenDateRange, nextDayThreshold?: Duration): OpenDateRange;
    export function isMultiDayRange(range: DateRange): boolean;
    export function diffDates(date0: DateMarker, date1: DateMarker, dateEnv: DateEnv, largeUnit?: string): Duration;
}

declare module '@fullcalendar/core/util/html' {
    export function htmlEscape(s: any): string;
    export function cssToStr(cssProps: any): string;
    export function attrsToStr(attrs: any): string;
    export type ClassNameInput = string | string[];
    export function parseClassName(raw: ClassNameInput): string[];
}

declare module '@fullcalendar/core/util/array' {
    export function removeMatching(array: any, testFunc: any): number;
    export function removeExact(array: any, exactVal: any): number;
    export function isArraysEqual(a0: any, a1: any): boolean;
}

declare module '@fullcalendar/core/util/memoize' {
export function memoize(workerFunc: T): T;
export function memoizeOutput(workerFunc: T, equalityFunc: (output0: any, output1: any) => boolean): T;
}

declare module '@fullcalendar/core/component/memoized-rendering' {
    export interface MemoizedRendering {
        (...args: ArgsType): void;
        unrender: () => void;
        dependents: MemoizedRendering[];
    }
    export function memoizeRendering(renderFunc: (...args: ArgsType) => void, unrenderFunc?: (...args: ArgsType) => void, dependencies?: MemoizedRendering[]): MemoizedRendering;
}

declare module '@fullcalendar/core/util/geom' {
    export interface Point {
        left: number;
        top: number;
    }
    export interface Rect {
        left: number;
        right: number;
        top: number;
        bottom: number;
    }
    export function pointInsideRect(point: Point, rect: Rect): boolean;
    export function intersectRects(rect1: Rect, rect2: Rect): Rect | false;
    export function translateRect(rect: Rect, deltaX: number, deltaY: number): Rect;
    export function constrainPoint(point: Point, rect: Rect): Point;
    export function getRectCenter(rect: Rect): Point;
    export function diffPoints(point1: Point, point2: Point): Point;
}

declare module '@fullcalendar/core/util/object' {
    export function mergeProps(propObjs: any, complexProps?: any): any;
    export function filterHash(hash: any, func: any): {};
    export function mapHash(hash: {
        [key: string]: InputItem;
    }, func: (input: InputItem, key: string) => OutputItem): {
        [key: string]: OutputItem;
    };
    export function arrayToHash(a: any): {
        [key: string]: true;
    };
    export function hashValuesToArray(obj: any): any[];
    export function isPropsEqual(obj0: any, obj1: any): boolean;
}

declare module '@fullcalendar/core/util/dom-manip' {
    export function createElement(tagName: string, attrs: object | null, content?: ElementContent): HTMLElement;
    export function htmlToElement(html: string): HTMLElement;
    export function htmlToElements(html: string): HTMLElement[];
    export type ElementContent = string | Node | Node[] | NodeList;
    export function appendToElement(el: HTMLElement, content: ElementContent): void;
    export function prependToElement(parent: HTMLElement, content: ElementContent): void;
    export function insertAfterElement(refEl: HTMLElement, content: ElementContent): void;
    export function removeElement(el: HTMLElement): void;
    export function elementClosest(el: HTMLElement, selector: string): HTMLElement;
    export function elementMatches(el: HTMLElement, selector: string): HTMLElement;
    export function findElements(container: HTMLElement[] | HTMLElement | NodeListOf, selector: string): HTMLElement[];
    export function findChildren(parent: HTMLElement[] | HTMLElement, selector?: string): HTMLElement[];
    export function forceClassName(el: HTMLElement, className: string, bool: any): void;
    export function applyStyle(el: HTMLElement, props: object): void;
    export function applyStyleProp(el: HTMLElement, name: string, val: any): void;
}

declare module '@fullcalendar/core/structs/event-store' {
    import { EventInput, EventDef, EventDefHash, EventInstanceHash, EventTuple } from '@fullcalendar/core/structs/event';
    import { EventSource } from '@fullcalendar/core/structs/event-source';
    import Calendar from '@fullcalendar/core/Calendar';
    import { DateRange } from '@fullcalendar/core/datelib/date-range';
    export interface EventStore {
        defs: EventDefHash;
        instances: EventInstanceHash;
    }
    export function parseEvents(rawEvents: EventInput[], sourceId: string, calendar: Calendar, allowOpenRange?: boolean): EventStore;
    export function eventTupleToStore(tuple: EventTuple, eventStore?: EventStore): EventStore;
    export function expandRecurring(eventStore: EventStore, framingRange: DateRange, calendar: Calendar): EventStore;
    export function getRelevantEvents(eventStore: EventStore, instanceId: string): EventStore;
    export function transformRawEvents(rawEvents: any, eventSource: EventSource, calendar: Calendar): any;
    export function createEmptyEventStore(): EventStore;
    export function mergeEventStores(store0: EventStore, store1: EventStore): EventStore;
    export function filterEventStoreDefs(eventStore: EventStore, filterFunc: (eventDef: EventDef) => boolean): EventStore;
}

declare module '@fullcalendar/core/component/event-ui' {
    import { Constraint, AllowFunc, ConstraintInput } from '@fullcalendar/core/validation';
    import { parseClassName } from '@fullcalendar/core/util/html';
    import Calendar from '@fullcalendar/core/Calendar';
    export interface UnscopedEventUiInput {
        editable?: boolean;
        startEditable?: boolean;
        durationEditable?: boolean;
        constraint?: ConstraintInput;
        overlap?: boolean;
        allow?: AllowFunc;
        className?: string[] | string;
        classNames?: string[] | string;
        backgroundColor?: string;
        borderColor?: string;
        textColor?: string;
        color?: string;
    }
    export interface EventUi {
        startEditable: boolean | null;
        durationEditable: boolean | null;
        constraints: Constraint[];
        overlap: boolean | null;
        allows: AllowFunc[];
        backgroundColor: string;
        borderColor: string;
        textColor: string;
        classNames: string[];
    }
    export type EventUiHash = {
        [defId: string]: EventUi;
    };
    export const UNSCOPED_EVENT_UI_PROPS: {
        editable: BooleanConstructor;
        startEditable: BooleanConstructor;
        durationEditable: BooleanConstructor;
        constraint: any;
        overlap: any;
        allow: any;
        className: typeof parseClassName;
        classNames: typeof parseClassName;
        color: StringConstructor;
        backgroundColor: StringConstructor;
        borderColor: StringConstructor;
        textColor: StringConstructor;
    };
    export function processUnscopedUiProps(rawProps: UnscopedEventUiInput, calendar: Calendar, leftovers?: any): EventUi;
    export function processScopedUiProps(prefix: string, rawScoped: any, calendar: Calendar, leftovers?: any): EventUi;
    export function combineEventUis(uis: EventUi[]): EventUi;
}

declare module '@fullcalendar/core/component/event-splitting' {
    import { EventStore } from '@fullcalendar/core/structs/event-store';
    import { EventDef } from '@fullcalendar/core/structs/event';
    import { EventInteractionState } from '@fullcalendar/core/interactions/event-interaction-state';
    import { EventUiHash, EventUi } from '@fullcalendar/core/component/event-ui';
    import { DateSpan } from '@fullcalendar/core/structs/date-span';
    export interface SplittableProps {
        businessHours: EventStore | null;
        dateSelection: DateSpan | null;
        eventStore: EventStore;
        eventUiBases: EventUiHash;
        eventSelection: string;
        eventDrag: EventInteractionState | null;
        eventResize: EventInteractionState | null;
    }
    export { Splitter as default, Splitter };
    abstract class Splitter {
        abstract getKeyInfo(props: PropsType): {
            [key: string]: {
                ui?: EventUi;
                businessHours?: EventStore;
            };
        };
        abstract getKeysForDateSpan(dateSpan: DateSpan): string[];
        abstract getKeysForEventDef(eventDef: EventDef): string[];
        splitProps(props: PropsType): {
            [key: string]: SplittableProps;
        };
    }
}

declare module '@fullcalendar/core/component/date-rendering' {
    import { DateMarker } from '@fullcalendar/core/datelib/marker';
    import Component, { ComponentContext } from '@fullcalendar/core/component/Component';
    import { DateProfile } from '@fullcalendar/core/DateProfileGenerator';
    export function buildGotoAnchorHtml(component: Component, gotoOptions: any, attrs: any, innerHtml?: any): string;
    export function getAllDayHtml(component: Component): any;
    export function getDayClasses(date: DateMarker, dateProfile: DateProfile, context: ComponentContext, noThemeHighlight?: any): any[];
}

declare module '@fullcalendar/core/util/dom-event' {
    export function preventDefault(ev: any): void;
    export function listenBySelector(container: HTMLElement, eventType: string, selector: string, handler: (ev: Event, matchedTarget: HTMLElement) => void): () => void;
    export function listenToHoverBySelector(container: HTMLElement, selector: string, onMouseEnter: (ev: Event, matchedTarget: HTMLElement) => void, onMouseLeave: (ev: Event, matchedTarget: HTMLElement) => void): () => void;
    export function whenTransitionDone(el: HTMLElement, callback: (ev: Event) => void): void;
}

declare module '@fullcalendar/core/util/dom-geom' {
    import { Rect } from '@fullcalendar/core/util/geom';
    export interface EdgeInfo {
        borderLeft: number;
        borderRight: number;
        borderTop: number;
        borderBottom: number;
        scrollbarLeft: number;
        scrollbarRight: number;
        scrollbarBottom: number;
        paddingLeft?: number;
        paddingRight?: number;
        paddingTop?: number;
        paddingBottom?: number;
    }
    export function computeEdges(el: any, getPadding?: boolean): EdgeInfo;
    export function computeInnerRect(el: any, goWithinPadding?: boolean): {
        left: number;
        right: number;
        top: number;
        bottom: number;
    };
    export function computeRect(el: any): Rect;
    export function computeHeightAndMargins(el: HTMLElement): number;
    export function computeVMargins(el: HTMLElement): number;
    export function getClippingParents(el: HTMLElement): HTMLElement[];
    export function computeClippingRect(el: HTMLElement): Rect;
}

declare module '@fullcalendar/core/util/promise' {
export function unpromisify(func: any, success: any, failure?: any): void;
}

declare module '@fullcalendar/core/common/EmitterMixin' {
    import Mixin from '@fullcalendar/core/common/Mixin';
    export interface EmitterInterface {
        on(types: any, handler: any): any;
        one(types: any, handler: any): any;
        off(types: any, handler: any): any;
        trigger(type: any, ...args: any[]): any;
        triggerWith(type: any, context: any, args: any): any;
        hasHandlers(type: any): any;
    }
    export { EmitterMixin as default, EmitterMixin };
    class EmitterMixin extends Mixin implements EmitterInterface {
        _handlers: any;
        _oneHandlers: any;
        on(type: any, handler: any): this;
        one(type: any, handler: any): this;
        off(type: any, handler?: any): this;
        trigger(type: any, ...args: any[]): this;
        triggerWith(type: any, context: any, args: any): this;
        hasHandlers(type: any): any;
    }
}

declare module '@fullcalendar/core/datelib/date-range' {
    import { DateMarker } from '@fullcalendar/core/datelib/marker';
    import { DateEnv, DateInput } from '@fullcalendar/core/datelib/env';
    export interface DateRangeInput {
        start?: DateInput;
        end?: DateInput;
    }
    export interface OpenDateRange {
        start: DateMarker | null;
        end: DateMarker | null;
    }
    export interface DateRange {
        start: DateMarker;
        end: DateMarker;
    }
    export function parseRange(input: DateRangeInput, dateEnv: DateEnv): OpenDateRange;
    export function invertRanges(ranges: DateRange[], constraintRange: DateRange): DateRange[];
    export function intersectRanges(range0: OpenDateRange, range1: OpenDateRange): OpenDateRange;
    export function rangesEqual(range0: OpenDateRange, range1: OpenDateRange): boolean;
    export function rangesIntersect(range0: OpenDateRange, range1: OpenDateRange): boolean;
    export function rangeContainsRange(outerRange: OpenDateRange, innerRange: OpenDateRange): boolean;
    export function rangeContainsMarker(range: OpenDateRange, date: DateMarker | number): boolean;
    export function constrainMarkerToRange(date: DateMarker, range: DateRange): DateMarker;
}

declare module '@fullcalendar/core/common/Mixin' {
    export { Mixin as default, Mixin };
    class Mixin {
        static mixInto(destClass: any): void;
        static mixIntoObj(destObj: any): void;
        static mixOver(destClass: any): void;
    }
}

declare module '@fullcalendar/core/common/PositionCache' {
    export { PositionCache as default, PositionCache };
    class PositionCache {
        originClientRect: ClientRect;
        els: HTMLElement[];
        originEl: HTMLElement;
        isHorizontal: boolean;
        isVertical: boolean;
        lefts: any;
        rights: any;
        tops: any;
        bottoms: any;
        constructor(originEl: HTMLElement, els: HTMLElement[], isHorizontal: boolean, isVertical: boolean);
        build(): void;
        buildElHorizontals(originClientLeft: number): void;
        buildElVerticals(originClientTop: number): void;
        leftToIndex(leftPosition: number): any;
        topToIndex(topPosition: number): any;
        getWidth(leftIndex: number): number;
        getHeight(topIndex: number): number;
    }
}

declare module '@fullcalendar/core/common/ScrollComponent' {
    import { ElementScrollController } from '@fullcalendar/core/common/scroll-controller';
    export interface ScrollbarWidths {
        left: number;
        right: number;
        bottom: number;
    }
    export { ScrollComponent as default, ScrollComponent };
    class ScrollComponent extends ElementScrollController {
        overflowX: string;
        overflowY: string;
        constructor(overflowX: string, overflowY: string);
        clear(): void;
        destroy(): void;
        applyOverflow(): void;
        lockOverflow(scrollbarWidths: ScrollbarWidths): void;
        setHeight(height: number | string): void;
        getScrollbarWidths(): ScrollbarWidths;
    }
}

declare module '@fullcalendar/core/common/scroll-controller' {
    export abstract class ScrollController {
        abstract getScrollTop(): number;
        abstract getScrollLeft(): number;
        abstract setScrollTop(top: number): void;
        abstract setScrollLeft(left: number): void;
        abstract getClientWidth(): number;
        abstract getClientHeight(): number;
        abstract getScrollWidth(): number;
        abstract getScrollHeight(): number;
        getMaxScrollTop(): number;
        getMaxScrollLeft(): number;
        canScrollVertically(): boolean;
        canScrollHorizontally(): boolean;
        canScrollUp(): boolean;
        canScrollDown(): boolean;
        canScrollLeft(): boolean;
        canScrollRight(): boolean;
    }
    export class ElementScrollController extends ScrollController {
        el: HTMLElement;
        constructor(el: HTMLElement);
        getScrollTop(): number;
        getScrollLeft(): number;
        setScrollTop(top: number): void;
        setScrollLeft(left: number): void;
        getScrollWidth(): number;
        getScrollHeight(): number;
        getClientHeight(): number;
        getClientWidth(): number;
    }
    export class WindowScrollController extends ScrollController {
        getScrollTop(): number;
        getScrollLeft(): number;
        setScrollTop(n: number): void;
        setScrollLeft(n: number): void;
        getScrollWidth(): number;
        getScrollHeight(): number;
        getClientHeight(): number;
        getClientWidth(): number;
    }
}

declare module '@fullcalendar/core/theme/Theme' {
    export { Theme as default, Theme };
    class Theme {
        calendarOptions: any;
        classes: any;
        iconClasses: any;
        baseIconClass: string;
        iconOverrideOption: any;
        iconOverrideCustomButtonOption: any;
        iconOverridePrefix: string;
        constructor(calendarOptions: any);
        processIconOverride(): void;
        setIconOverride(iconOverrideHash: any): void;
        applyIconOverridePrefix(className: any): any;
        getClass(key: any): any;
        getIconClass(buttonName: any): string;
        getCustomButtonIconClass(customButtonProps: any): string;
    }
    export type ThemeClass = {
        new (calendarOptions: any): Theme;
    };
}

declare module '@fullcalendar/core/component/Component' {
    import Calendar from '@fullcalendar/core/Calendar';
    import View from '@fullcalendar/core/View';
    import Theme from '@fullcalendar/core/theme/Theme';
    import { DateEnv } from '@fullcalendar/core/datelib/env';
    export interface ComponentContext {
        options: any;
        dateEnv: DateEnv;
        theme: Theme;
        calendar: Calendar;
        view: View;
    }
    export type EqualityFuncHash = {
        [propName: string]: (obj0: any, obj1: any) => boolean;
    };
    export { Component as default, Component };
    class Component {
        equalityFuncs: EqualityFuncHash;
        uid: string;
        props: PropsType | null;
        context: ComponentContext;
        dateEnv: DateEnv;
        theme: Theme;
        view: View;
        calendar: Calendar;
        isRtl: boolean;
        constructor(context: ComponentContext, isView?: boolean);
        static addEqualityFuncs(newFuncs: EqualityFuncHash): void;
        opt(name: any): any;
        receiveProps(props: PropsType): void;
        protected render(props: PropsType): void;
        destroy(): void;
    }
}

declare module '@fullcalendar/core/component/DateComponent' {
    import Component, { ComponentContext } from '@fullcalendar/core/component/Component';
    import { EventRenderRange } from '@fullcalendar/core/component/event-rendering';
    import { DateSpan } from '@fullcalendar/core/structs/date-span';
    import { EventInstanceHash } from '@fullcalendar/core/structs/event';
    import { Hit } from '@fullcalendar/core/interactions/hit';
    import FgEventRenderer from '@fullcalendar/core/component/renderers/FgEventRenderer';
    import FillRenderer from '@fullcalendar/core/component/renderers/FillRenderer';
    import { EventInteractionState } from '@fullcalendar/core/interactions/event-interaction-state';
    import { EventHandlerName, EventHandlerArgs } from '@fullcalendar/core/types/input-types';
    export type DateComponentHash = {
        [uid: string]: DateComponent;
    };
    export interface Seg {
        component?: DateComponent;
        isStart: boolean;
        isEnd: boolean;
        eventRange?: EventRenderRange;
        el?: HTMLElement;
        [otherProp: string]: any;
    }
    export interface EventSegUiInteractionState {
        affectedInstances: EventInstanceHash;
        segs: Seg[];
        isEvent: boolean;
        sourceSeg: any;
    }
    export { DateComponent as default, DateComponent };
    class DateComponent extends Component {
        fgSegSelector: string;
        bgSegSelector: string;
        largeUnit: any;
        eventRenderer: FgEventRenderer;
        mirrorRenderer: FgEventRenderer;
        fillRenderer: FillRenderer;
        el: HTMLElement;
        constructor(context: ComponentContext, el: HTMLElement, isView?: boolean);
        destroy(): void;
        buildPositionCaches(): void;
        queryHit(positionLeft: number, positionTop: number, elWidth: number, elHeight: number): Hit | null;
        isInteractionValid(interaction: EventInteractionState): boolean;
        isDateSelectionValid(selection: DateSpan): boolean;
        publiclyTrigger(name: T, args?: EventHandlerArgs): any;
        publiclyTriggerAfterSizing(name: T, args: EventHandlerArgs): void;
        hasPublicHandlers(name: T): boolean;
        triggerRenderedSegs(segs: Seg[], isMirrors: boolean): void;
        triggerWillRemoveSegs(segs: Seg[], isMirrors: boolean): void;
        isValidSegDownEl(el: HTMLElement): boolean;
        isValidDateDownEl(el: HTMLElement): boolean;
        isPopover(): boolean;
        isInPopover(el: HTMLElement): boolean;
    }
}

declare module '@fullcalendar/core/Calendar' {
    import { EmitterInterface } from '@fullcalendar/core/common/EmitterMixin';
    import OptionsManager from '@fullcalendar/core/OptionsManager';
    import View from '@fullcalendar/core/View';
    import Theme from '@fullcalendar/core/theme/Theme';
    import { OptionsInput, EventHandlerName, EventHandlerArgs } from '@fullcalendar/core/types/input-types';
    import { RawLocaleMap } from '@fullcalendar/core/datelib/locale';
    import { DateEnv, DateInput } from '@fullcalendar/core/datelib/env';
    import { DateMarker } from '@fullcalendar/core/datelib/marker';
    import { Duration, DurationInput } from '@fullcalendar/core/datelib/duration';
    import { DateSpan, DateSpanApi, DatePointApi } from '@fullcalendar/core/structs/date-span';
    import { DateRangeInput } from '@fullcalendar/core/datelib/date-range';
    import DateProfileGenerator from '@fullcalendar/core/DateProfileGenerator';
    import { EventSourceInput } from '@fullcalendar/core/structs/event-source';
    import { EventInput } from '@fullcalendar/core/structs/event';
    import { CalendarState, Action } from '@fullcalendar/core/reducers/types';
    import EventSourceApi from '@fullcalendar/core/api/EventSourceApi';
    import EventApi from '@fullcalendar/core/api/EventApi';
    import { EventStore } from '@fullcalendar/core/structs/event-store';
    import { EventUiHash, EventUi } from '@fullcalendar/core/component/event-ui';
    import { ViewSpecHash, ViewSpec } from '@fullcalendar/core/structs/view-spec';
    import { PluginSystem } from '@fullcalendar/core/plugin-system';
    import CalendarComponent from '@fullcalendar/core/CalendarComponent';
    import DateComponent from '@fullcalendar/core/component/DateComponent';
    import { PointerDragEvent } from '@fullcalendar/core/interactions/pointer';
    import { InteractionSettingsInput, Interaction } from '@fullcalendar/core/interactions/interaction';
    export interface DateClickApi extends DatePointApi {
        dayEl: HTMLElement;
        jsEvent: UIEvent;
        view: View;
    }
    export interface DateSelectionApi extends DateSpanApi {
        jsEvent: UIEvent;
        view: View;
    }
    export type DatePointTransform = (dateSpan: DateSpan, calendar: Calendar) => any;
    export type DateSpanTransform = (dateSpan: DateSpan, calendar: Calendar) => any;
    export type CalendarInteraction = {
        destroy(): any;
    };
    export type CalendarInteractionClass = {
        new (calendar: Calendar): CalendarInteraction;
    };
    export type OptionChangeHandler = (propValue: any, calendar: Calendar, deepEqual: any) => void;
    export type OptionChangeHandlerMap = {
        [propName: string]: OptionChangeHandler;
    };
    export { Calendar as default, Calendar };
    class Calendar {
        static on: EmitterInterface['on'];
        static off: EmitterInterface['off'];
        static trigger: EmitterInterface['trigger'];
        on: EmitterInterface['on'];
        one: EmitterInterface['one'];
        off: EmitterInterface['off'];
        trigger: EmitterInterface['trigger'];
        triggerWith: EmitterInterface['triggerWith'];
        hasHandlers: EmitterInterface['hasHandlers'];
        eventUiBases: EventUiHash;
        selectionConfig: EventUi;
        optionsManager: OptionsManager;
        viewSpecs: ViewSpecHash;
        dateProfileGenerators: {
            [viewName: string]: DateProfileGenerator;
        };
        theme: Theme;
        dateEnv: DateEnv;
        availableRawLocales: RawLocaleMap;
        pluginSystem: PluginSystem;
        defaultAllDayEventDuration: Duration;
        defaultTimedEventDuration: Duration;
        calendarInteractions: CalendarInteraction[];
        interactionsStore: {
            [componentUid: string]: Interaction[];
        };
        removeNavLinkListener: any;
        windowResizeProxy: any;
        isHandlingWindowResize: boolean;
        state: CalendarState;
        actionQueue: any[];
        isReducing: boolean;
        needsRerender: boolean;
        needsFullRerender: boolean;
        isRendering: boolean;
        renderingPauseDepth: number;
        renderableEventStore: EventStore;
        buildDelayedRerender: typeof buildDelayedRerender;
        delayedRerender: any;
        afterSizingTriggers: any;
        isViewUpdated: boolean;
        isDatesUpdated: boolean;
        isEventsUpdated: boolean;
        el: HTMLElement;
        component: CalendarComponent;
        constructor(el: HTMLElement, overrides?: OptionsInput);
        addPluginInputs(pluginInputs: any): void;
        readonly view: View;
        render(): void;
        destroy(): void;
        bindHandlers(): void;
        unbindHandlers(): void;
        hydrate(): void;
        buildInitialState(): CalendarState;
        reduce(state: CalendarState, action: Action, calendar: Calendar): CalendarState;
        requestRerender(needsFull?: boolean): void;
        tryRerender(): void;
        batchRendering(func: any): void;
        executeRender(): void;
        renderComponent(needsFull: any): void;
        setOption(name: string, val: any): void;
        getOption(name: string): any;
        opt(name: string): any;
        viewOpt(name: string): any;
        viewOpts(): any;
        mutateOptions(updates: any, removals: string[], isDynamic?: boolean, deepEqual?: any): void;
        handleOptions(options: any): void;
        getAvailableLocaleCodes(): string[];
        _buildSelectionConfig(rawOpts: any): EventUi;
        _buildEventUiSingleBase(rawOpts: any): EventUi;
        hasPublicHandlers(name: T): boolean;
        publiclyTrigger(name: T, args?: EventHandlerArgs): any;
        publiclyTriggerAfterSizing(name: T, args: EventHandlerArgs): void;
        releaseAfterSizingTriggers(): void;
        isValidViewType(viewType: string): boolean;
        changeView(viewType: string, dateOrRange?: DateRangeInput | DateInput): void;
        zoomTo(dateMarker: DateMarker, viewType?: string): void;
        getUnitViewSpec(unit: string): ViewSpec | null;
        getInitialDate(): Date;
        prev(): void;
        next(): void;
        prevYear(): void;
        nextYear(): void;
        today(): void;
        gotoDate(zonedDateInput: any): void;
        incrementDate(deltaInput: any): void;
        getDate(): Date;
        formatDate(d: DateInput, formatter: any): string;
        formatRange(d0: DateInput, d1: DateInput, settings: any): any;
        formatIso(d: DateInput, omitTime?: boolean): string;
        windowResize(ev: Event): void;
        updateSize(): void;
        registerInteractiveComponent(component: DateComponent, settingsInput: InteractionSettingsInput): void;
        unregisterInteractiveComponent(component: DateComponent): void;
        select(dateOrObj: DateInput | any, endDate?: DateInput): void;
        unselect(pev?: PointerDragEvent): void;
        triggerDateSelect(selection: DateSpan, pev?: PointerDragEvent): void;
        triggerDateUnselect(pev?: PointerDragEvent): void;
        triggerDateClick(dateSpan: DateSpan, dayEl: HTMLElement, view: View, ev: UIEvent): void;
        buildDatePointApi(dateSpan: DateSpan): import("@fullcalendar/core/structs/date-span").DatePointApi;
        buildDateSpanApi(dateSpan: DateSpan): import("@fullcalendar/core/structs/date-span").DateSpanApi;
        getNow(): DateMarker;
        getDefaultEventEnd(allDay: boolean, marker: DateMarker): DateMarker;
        addEvent(eventInput: EventInput, sourceInput?: EventSourceApi | string | number): EventApi | null;
        getEventById(id: string): EventApi | null;
        getEvents(): EventApi[];
        removeAllEvents(): void;
        rerenderEvents(): void;
        getEventSources(): EventSourceApi[];
        getEventSourceById(id: string | number): EventSourceApi | null;
        addEventSource(sourceInput: EventSourceInput): EventSourceApi;
        removeAllEventSources(): void;
        refetchEvents(): void;
        scrollToTime(timeInput: DurationInput): void;
    }
    function buildDelayedRerender(this: Calendar, wait: any): any;
    export {};
}

declare module '@fullcalendar/core/View' {
    import DateProfileGenerator, { DateProfile } from '@fullcalendar/core/DateProfileGenerator';
    import { DateMarker } from '@fullcalendar/core/datelib/marker';
    import { Duration } from '@fullcalendar/core/datelib/duration';
    import { EmitterInterface } from '@fullcalendar/core/common/EmitterMixin';
    import { ViewSpec } from '@fullcalendar/core/structs/view-spec';
    import { ComponentContext } from '@fullcalendar/core/component/Component';
    import DateComponent from '@fullcalendar/core/component/DateComponent';
    import { EventStore } from '@fullcalendar/core/structs/event-store';
    import { EventUiHash, EventUi } from '@fullcalendar/core/component/event-ui';
    import { EventRenderRange } from '@fullcalendar/core/component/event-rendering';
    import { DateSpan } from '@fullcalendar/core/structs/date-span';
    import { EventInteractionState } from '@fullcalendar/core/interactions/event-interaction-state';
    import { EventDef } from '@fullcalendar/core/structs/event';
    export interface ViewProps {
        dateProfile: DateProfile;
        businessHours: EventStore;
        eventStore: EventStore;
        eventUiBases: EventUiHash;
        dateSelection: DateSpan | null;
        eventSelection: string;
        eventDrag: EventInteractionState | null;
        eventResize: EventInteractionState | null;
    }
    export { View as default, View };
    abstract class View extends DateComponent {
        usesMinMaxTime: boolean;
        dateProfileGeneratorClass: any;
        on: EmitterInterface['on'];
        one: EmitterInterface['one'];
        off: EmitterInterface['off'];
        trigger: EmitterInterface['trigger'];
        triggerWith: EmitterInterface['triggerWith'];
        hasHandlers: EmitterInterface['hasHandlers'];
        viewSpec: ViewSpec;
        dateProfileGenerator: DateProfileGenerator;
        type: string;
        title: string;
        queuedScroll: any;
        eventOrderSpecs: any;
        nextDayThreshold: Duration;
        isNowIndicatorRendered: boolean;
        initialNowDate: DateMarker;
        initialNowQueriedMs: number;
        nowIndicatorTimeoutID: any;
        nowIndicatorIntervalID: any;
        constructor(context: ComponentContext, viewSpec: ViewSpec, dateProfileGenerator: DateProfileGenerator, parentEl: HTMLElement);
        initialize(): void;
        readonly activeStart: Date;
        readonly activeEnd: Date;
        readonly currentStart: Date;
        readonly currentEnd: Date;
        render(props: ViewProps): void;
        destroy(): void;
        updateSize(isResize: boolean, viewHeight: number, isAuto: boolean): void;
        updateBaseSize(isResize: boolean, viewHeight: number, isAuto: boolean): void;
        renderDatesWrap(dateProfile: DateProfile): void;
        unrenderDatesWrap(): void;
        renderDates(dateProfile: DateProfile): void;
        unrenderDates(): void;
        renderBusinessHours(businessHours: EventStore): void;
        unrenderBusinessHours(): void;
        renderDateSelectionWrap(selection: DateSpan): void;
        unrenderDateSelectionWrap(selection: DateSpan): void;
        renderDateSelection(selection: DateSpan): void;
        unrenderDateSelection(selection: DateSpan): void;
        renderEvents(eventStore: EventStore): void;
        unrenderEvents(): void;
        sliceEvents(eventStore: EventStore, allDay: boolean): EventRenderRange[];
        computeEventDraggable(eventDef: EventDef, eventUi: EventUi): boolean;
        computeEventStartResizable(eventDef: EventDef, eventUi: EventUi): any;
        computeEventEndResizable(eventDef: EventDef, eventUi: EventUi): boolean;
        renderEventSelectionWrap(instanceId: string): void;
        unrenderEventSelectionWrap(instanceId: string): void;
        renderEventSelection(instanceId: string): void;
        unrenderEventSelection(instanceId: string): void;
        renderEventDragWrap(state: EventInteractionState): void;
        unrenderEventDragWrap(state: EventInteractionState): void;
        renderEventDrag(state: EventInteractionState): void;
        unrenderEventDrag(state: EventInteractionState): void;
        renderEventResizeWrap(state: EventInteractionState): void;
        unrenderEventResizeWrap(state: EventInteractionState): void;
        renderEventResize(state: EventInteractionState): void;
        unrenderEventResize(state: EventInteractionState): void;
        startNowIndicator(dateProfile: DateProfile): void;
        updateNowIndicator(): void;
        stopNowIndicator(): void;
        getNowIndicatorUnit(dateProfile: DateProfile): void;
        renderNowIndicator(date: any): void;
        unrenderNowIndicator(): void;
        addScroll(scroll: any): void;
        popScroll(isResize: boolean): void;
        applyQueuedScroll(isResize: boolean): void;
        queryScroll(): any;
        applyScroll(scroll: any, isResize: boolean): void;
        computeDateScroll(duration: Duration): {};
        queryDateScroll(): {};
        applyDateScroll(scroll: any): void;
        scrollToDuration(duration: Duration): void;
    }
}

declare module '@fullcalendar/core/component/renderers/FgEventRenderer' {
    import { DateMarker } from '@fullcalendar/core/datelib/marker';
    import { DateFormatter } from '@fullcalendar/core/datelib/formatting';
    import { EventUi } from '@fullcalendar/core/component/event-ui';
    import { EventRenderRange } from '@fullcalendar/core/component/event-rendering';
    import { Seg } from '@fullcalendar/core/component/DateComponent';
    import { ComponentContext } from '@fullcalendar/core/component/Component';
    export { FgEventRenderer as default, FgEventRenderer };
    abstract class FgEventRenderer {
        context: ComponentContext;
        eventTimeFormat: DateFormatter;
        displayEventTime: boolean;
        displayEventEnd: boolean;
        segs: Seg[];
        isSizeDirty: boolean;
        constructor(context: ComponentContext);
        renderSegs(segs: Seg[], mirrorInfo?: any): void;
        unrender(_segs: Seg[], mirrorInfo?: any): void;
        abstract renderSegHtml(seg: Seg, mirrorInfo: any): string;
        abstract attachSegs(segs: Seg[], mirrorInfo: any): any;
        abstract detachSegs(segs: Seg[]): any;
        rangeUpdated(): void;
        renderSegEls(segs: Seg[], mirrorInfo: any): Seg[];
        getSegClasses(seg: Seg, isDraggable: any, isResizable: any, mirrorInfo: any): string[];
        getTimeText(eventRange: EventRenderRange, formatter?: any, displayEnd?: any): any;
        _getTimeText(start: DateMarker, end: DateMarker, allDay: any, formatter?: any, displayEnd?: any, forcedStartTzo?: number, forcedEndTzo?: number): any;
        computeEventTimeFormat(): any;
        computeDisplayEventTime(): boolean;
        computeDisplayEventEnd(): boolean;
        getSkinCss(ui: EventUi): {
            'background-color': string;
            'border-color': string;
            color: string;
        };
        sortEventSegs(segs: any): Seg[];
        computeSizes(force: boolean): void;
        assignSizes(force: boolean): void;
        computeSegSizes(segs: Seg[]): void;
        assignSegSizes(segs: Seg[]): void;
        hideByHash(hash: any): void;
        showByHash(hash: any): void;
        selectByInstanceId(instanceId: string): void;
        unselectByInstanceId(instanceId: string): void;
    }
    export function buildSegCompareObj(seg: Seg): any;
}

declare module '@fullcalendar/core/component/renderers/FillRenderer' {
    import { Seg } from '@fullcalendar/core/component/DateComponent';
    import { ComponentContext } from '@fullcalendar/core/component/Component';
    export { FillRenderer as default, FillRenderer };
    abstract class FillRenderer {
        context: ComponentContext;
        fillSegTag: string;
        containerElsByType: any;
        segsByType: any;
        dirtySizeFlags: any;
        constructor(context: ComponentContext);
        getSegsByType(type: string): any;
        renderSegs(type: any, segs: Seg[]): void;
        unrender(type: any): void;
        renderSegEls(type: any, segs: Seg[]): Seg[];
        renderSegHtml(type: any, seg: Seg): string;
        abstract attachSegs(type: any, segs: Seg[]): HTMLElement[] | void;
        detachSegs(type: any, segs: Seg[]): void;
        computeSizes(force: boolean): void;
        assignSizes(force: boolean): void;
        computeSegSizes(segs: Seg[]): void;
        assignSegSizes(segs: Seg[]): void;
    }
}

declare module '@fullcalendar/core/DateProfileGenerator' {
    import { DateMarker } from '@fullcalendar/core/datelib/marker';
    import { Duration } from '@fullcalendar/core/datelib/duration';
    import { DateRange, OpenDateRange } from '@fullcalendar/core/datelib/date-range';
    import { ViewSpec } from '@fullcalendar/core/structs/view-spec';
    import { DateEnv } from '@fullcalendar/core/datelib/env';
    import Calendar from '@fullcalendar/core/Calendar';
    export interface DateProfile {
        currentRange: DateRange;
        currentRangeUnit: string;
        isRangeAllDay: boolean;
        validRange: OpenDateRange;
        activeRange: DateRange;
        renderRange: DateRange;
        minTime: Duration;
        maxTime: Duration;
        isValid: boolean;
        dateIncrement: Duration;
    }
    export { DateProfileGenerator as default, DateProfileGenerator };
    class DateProfileGenerator {
        viewSpec: ViewSpec;
        options: any;
        dateEnv: DateEnv;
        calendar: Calendar;
        isHiddenDayHash: boolean[];
        constructor(viewSpec: ViewSpec, calendar: Calendar);
        buildPrev(currentDateProfile: DateProfile, currentDate: DateMarker): DateProfile;
        buildNext(currentDateProfile: DateProfile, currentDate: DateMarker): DateProfile;
        build(currentDate: DateMarker, direction?: any, forceToValid?: boolean): DateProfile;
        buildValidRange(): OpenDateRange;
        buildCurrentRangeInfo(date: DateMarker, direction: any): {
            duration: any;
            unit: any;
            range: any;
        };
        getFallbackDuration(): Duration;
        adjustActiveRange(range: DateRange, minTime: Duration, maxTime: Duration): {
            start: Date;
            end: Date;
        };
        buildRangeFromDuration(date: DateMarker, direction: any, duration: Duration, unit: any): any;
        buildRangeFromDayCount(date: DateMarker, direction: any, dayCount: any): {
            start: Date;
            end: Date;
        };
        buildCustomVisibleRange(date: DateMarker): OpenDateRange;
        buildRenderRange(currentRange: DateRange, currentRangeUnit: any, isRangeAllDay: any): DateRange;
        buildDateIncrement(fallback: any): Duration;
        getRangeOption(name: any, ...otherArgs: any[]): OpenDateRange;
        initHiddenDays(): void;
        trimHiddenDays(range: DateRange): DateRange | null;
        isHiddenDay(day: any): boolean;
        skipHiddenDays(date: DateMarker, inc?: number, isExclusive?: boolean): Date;
    }
    export function isDateProfilesEqual(p0: DateProfile, p1: DateProfile): boolean;
}

declare module '@fullcalendar/core/structs/view-def' {
    import { ViewClass, ViewConfigHash } from '@fullcalendar/core/structs/view-config';
    export interface ViewDef {
        type: string;
        class: ViewClass;
        overrides: any;
        defaults: any;
    }
    export type ViewDefHash = {
        [viewType: string]: ViewDef;
    };
    export function compileViewDefs(defaultConfigs: ViewConfigHash, overrideConfigs: ViewConfigHash): ViewDefHash;
}

declare module '@fullcalendar/core/structs/view-spec' {
    import { Duration } from '@fullcalendar/core/datelib/duration';
    import OptionsManager from '@fullcalendar/core/OptionsManager';
    import { ViewConfigInputHash, ViewClass } from '@fullcalendar/core/structs/view-config';
    export interface ViewSpec {
        type: string;
        class: ViewClass;
        duration: Duration;
        durationUnit: string;
        singleUnit: string;
        options: any;
        buttonTextOverride: string;
        buttonTextDefault: string;
    }
    export type ViewSpecHash = {
        [viewType: string]: ViewSpec;
    };
    export function buildViewSpecs(defaultInputs: ViewConfigInputHash, optionsManager: OptionsManager): ViewSpecHash;
}

declare module '@fullcalendar/core/structs/date-span' {
    import { DateRange, OpenDateRange } from '@fullcalendar/core/datelib/date-range';
    import { DateInput, DateEnv } from '@fullcalendar/core/datelib/env';
    import { Duration } from '@fullcalendar/core/datelib/duration';
    import { EventRenderRange } from '@fullcalendar/core/component/event-rendering';
    import { EventUiHash } from '@fullcalendar/core/component/event-ui';
    import Calendar from '@fullcalendar/core/Calendar';
    export interface OpenDateSpanInput {
        start?: DateInput;
        end?: DateInput;
        allDay?: boolean;
        [otherProp: string]: any;
    }
    export interface DateSpanInput extends OpenDateSpanInput {
        start: DateInput;
        end: DateInput;
    }
    export interface OpenDateSpan {
        range: OpenDateRange;
        allDay: boolean;
        [otherProp: string]: any;
    }
    export interface DateSpan extends OpenDateSpan {
        range: DateRange;
    }
    export interface DateSpanApi {
        start: Date;
        end: Date;
        startStr: string;
        endStr: string;
        allDay: boolean;
    }
    export interface DatePointApi {
        date: Date;
        dateStr: string;
        allDay: boolean;
    }
    export function parseDateSpan(raw: DateSpanInput, dateEnv: DateEnv, defaultDuration?: Duration): DateSpan | null;
    export function parseOpenDateSpan(raw: OpenDateSpanInput, dateEnv: DateEnv): OpenDateSpan | null;
    export function isDateSpansEqual(span0: DateSpan, span1: DateSpan): boolean;
    export function buildDateSpanApi(span: DateSpan, dateEnv: DateEnv): DateSpanApi;
    export function buildDatePointApi(span: DateSpan, dateEnv: DateEnv): DatePointApi;
    export function fabricateEventRange(dateSpan: DateSpan, eventUiBases: EventUiHash, calendar: Calendar): EventRenderRange;
}

declare module '@fullcalendar/core/datelib/marker' {
    import { Duration } from '@fullcalendar/core/datelib/duration';
    export type DateMarker = Date;
    export const DAY_IDS: string[];
    export function addWeeks(m: DateMarker, n: number): Date;
    export function addDays(m: DateMarker, n: number): Date;
    export function addMs(m: DateMarker, n: number): Date;
    export function diffWeeks(m0: any, m1: any): number;
    export function diffDays(m0: any, m1: any): number;
    export function diffHours(m0: any, m1: any): number;
    export function diffMinutes(m0: any, m1: any): number;
    export function diffSeconds(m0: any, m1: any): number;
    export function diffDayAndTime(m0: DateMarker, m1: DateMarker): Duration;
    export function diffWholeWeeks(m0: DateMarker, m1: DateMarker): number;
    export function diffWholeDays(m0: DateMarker, m1: DateMarker): number;
    export function startOfDay(m: DateMarker): DateMarker;
    export function startOfHour(m: DateMarker): Date;
    export function startOfMinute(m: DateMarker): Date;
    export function startOfSecond(m: DateMarker): Date;
    export function weekOfYear(marker: any, dow: any, doy: any): number;
    export function dateToLocalArray(date: any): any[];
    export function arrayToLocalDate(a: any): Date;
    export function dateToUtcArray(date: any): any[];
    export function arrayToUtcDate(a: any): Date;
    export function isValidDate(m: DateMarker): boolean;
    export function timeAsMs(m: DateMarker): number;
}

declare module '@fullcalendar/core/datelib/duration' {
    export type DurationInput = DurationObjectInput | string | number;
    export interface DurationObjectInput {
        years?: number;
        year?: number;
        months?: number;
        month?: number;
        weeks?: number;
        week?: number;
        days?: number;
        day?: number;
        hours?: number;
        hour?: number;
        minutes?: number;
        minute?: number;
        seconds?: number;
        second?: number;
        milliseconds?: number;
        millisecond?: number;
        ms?: number;
    }
    export interface Duration {
        years: number;
        months: number;
        days: number;
        milliseconds: number;
    }
    export function createDuration(input: DurationInput, unit?: string): Duration | null;
    export function getWeeksFromInput(obj: DurationObjectInput): number;
    export function durationsEqual(d0: Duration, d1: Duration): boolean;
    export function isSingleDay(dur: Duration): boolean;
    export function addDurations(d0: Duration, d1: Duration): {
        years: number;
        months: number;
        days: number;
        milliseconds: number;
    };
    export function subtractDurations(d1: Duration, d0: Duration): Duration;
    export function multiplyDuration(d: Duration, n: number): {
        years: number;
        months: number;
        days: number;
        milliseconds: number;
    };
    export function asRoughYears(dur: Duration): number;
    export function asRoughMonths(dur: Duration): number;
    export function asRoughDays(dur: Duration): number;
    export function asRoughHours(dur: Duration): number;
    export function asRoughMinutes(dur: Duration): number;
    export function asRoughSeconds(dur: Duration): number;
    export function asRoughMs(dur: Duration): number;
    export function wholeDivideDurations(numerator: Duration, denominator: Duration): number;
    export function greatestDurationDenominator(dur: Duration, dontReturnWeeks?: boolean): {
        unit: string;
        value: number;
    };
}

declare module '@fullcalendar/core/datelib/env' {
    import { DateMarker } from '@fullcalendar/core/datelib/marker';
    import { CalendarSystem } from '@fullcalendar/core/datelib/calendar-system';
    import { Locale } from '@fullcalendar/core/datelib/locale';
    import { NamedTimeZoneImpl, NamedTimeZoneImplClass } from '@fullcalendar/core/datelib/timezone';
    import { Duration } from '@fullcalendar/core/datelib/duration';
    import { DateFormatter } from '@fullcalendar/core/datelib/formatting';
    import { CmdFormatterFunc } from '@fullcalendar/core/datelib/formatting-cmd';
    export interface DateEnvSettings {
        timeZone: string;
        namedTimeZoneImpl?: NamedTimeZoneImplClass;
        calendarSystem: string;
        locale: Locale;
        weekNumberCalculation?: any;
        firstDay?: any;
        weekLabel?: string;
        cmdFormatter?: CmdFormatterFunc;
    }
    export type DateInput = Date | string | number | number[];
    export interface DateMarkerMeta {
        marker: DateMarker;
        isTimeUnspecified: boolean;
        forcedTzo: number | null;
    }
    export class DateEnv {
        timeZone: string;
        namedTimeZoneImpl: NamedTimeZoneImpl;
        canComputeOffset: boolean;
        calendarSystem: CalendarSystem;
        locale: Locale;
        weekDow: number;
        weekDoy: number;
        weekNumberFunc: any;
        weekLabel: string;
        cmdFormatter?: CmdFormatterFunc;
        constructor(settings: DateEnvSettings);
        createMarker(input: DateInput): DateMarker;
        createNowMarker(): DateMarker;
        createMarkerMeta(input: DateInput): DateMarkerMeta;
        parse(s: string): {
            marker: Date;
            isTimeUnspecified: boolean;
            forcedTzo: any;
        };
        getYear(marker: DateMarker): number;
        getMonth(marker: DateMarker): number;
        add(marker: DateMarker, dur: Duration): DateMarker;
        subtract(marker: DateMarker, dur: Duration): DateMarker;
        addYears(marker: DateMarker, n: number): Date;
        addMonths(marker: DateMarker, n: number): Date;
        diffWholeYears(m0: DateMarker, m1: DateMarker): number;
        diffWholeMonths(m0: DateMarker, m1: DateMarker): number;
        greatestWholeUnit(m0: DateMarker, m1: DateMarker): {
            unit: string;
            value: number;
        };
        countDurationsBetween(m0: DateMarker, m1: DateMarker, d: Duration): number;
        startOf(m: DateMarker, unit: string): Date;
        startOfYear(m: DateMarker): DateMarker;
        startOfMonth(m: DateMarker): DateMarker;
        startOfWeek(m: DateMarker): DateMarker;
        computeWeekNumber(marker: DateMarker): number;
        format(marker: DateMarker, formatter: DateFormatter, dateOptions?: {
            forcedTzo?: number;
        }): any;
        formatRange(start: DateMarker, end: DateMarker, formatter: DateFormatter, dateOptions?: {
            forcedStartTzo?: number;
            forcedEndTzo?: number;
            isEndExclusive?: boolean;
        }): any;
        formatIso(marker: DateMarker, extraOptions?: any): string;
        timestampToMarker(ms: number): Date;
        offsetForMarker(m: DateMarker): number;
        toDate(m: DateMarker, forcedTzo?: number): Date;
    }
}

declare module '@fullcalendar/core/datelib/formatting' {
    import { DateMarker } from '@fullcalendar/core/datelib/marker';
    import { CalendarSystem } from '@fullcalendar/core/datelib/calendar-system';
    import { Locale } from '@fullcalendar/core/datelib/locale';
    import { CmdFormatterFunc } from '@fullcalendar/core/datelib/formatting-cmd';
    import { FuncFormatterFunc } from '@fullcalendar/core/datelib/formatting-func';
    export interface ZonedMarker {
        marker: DateMarker;
        timeZoneOffset: number;
    }
    export interface ExpandedZonedMarker extends ZonedMarker {
        array: number[];
        year: number;
        month: number;
        day: number;
        hour: number;
        minute: number;
        second: number;
        millisecond: number;
    }
    export interface VerboseFormattingArg {
        date: ExpandedZonedMarker;
        start: ExpandedZonedMarker;
        end?: ExpandedZonedMarker;
        timeZone: string;
        localeCodes: string[];
        separator: string;
    }
    export interface DateFormattingContext {
        timeZone: string;
        locale: Locale;
        calendarSystem: CalendarSystem;
        computeWeekNumber: (d: DateMarker) => number;
        weekLabel: string;
        cmdFormatter?: CmdFormatterFunc;
    }
    export interface DateFormatter {
        format(date: ZonedMarker, context: DateFormattingContext): any;
        formatRange(start: ZonedMarker, end: ZonedMarker, context: DateFormattingContext): any;
    }
    export type FormatterInput = object | string | FuncFormatterFunc;
    export function createFormatter(input: FormatterInput, defaultSeparator?: string): DateFormatter;
    export function buildIsoString(marker: DateMarker, timeZoneOffset?: number, stripZeroTime?: boolean): string;
    export function formatIsoTimeString(marker: DateMarker): string;
    export function formatTimeZoneOffset(minutes: number, doIso?: boolean): string;
    export function createVerboseFormattingArg(start: ZonedMarker, end: ZonedMarker, context: DateFormattingContext, separator?: string): VerboseFormattingArg;
}

declare module '@fullcalendar/core/datelib/timezone' {
    export abstract class NamedTimeZoneImpl {
        timeZoneName: string;
        constructor(timeZoneName: string);
        abstract offsetForArray(a: number[]): number;
        abstract timestampToArray(ms: number): number[];
    }
    export type NamedTimeZoneImplClass = {
        new (timeZoneName: string): NamedTimeZoneImpl;
    };
}

declare module '@fullcalendar/core/datelib/parsing' {
    export function parse(str: any): {
        marker: Date;
        isTimeUnspecified: boolean;
        timeZoneOffset: any;
    };
}

declare module '@fullcalendar/core/structs/event-source' {
    import { EventInput } from '@fullcalendar/core/structs/event';
    import Calendar from '@fullcalendar/core/Calendar';
    import { DateRange } from '@fullcalendar/core/datelib/date-range';
    import { EventSourceFunc } from '@fullcalendar/core/event-sources/func-event-source';
    import { EventUi } from '@fullcalendar/core/component/event-ui';
    import { ConstraintInput, AllowFunc } from '@fullcalendar/core/validation';
    export type EventSourceError = {
        message: string;
        response?: any;
        [otherProp: string]: any;
    };
    export type EventInputTransformer = (eventInput: EventInput) => EventInput | null;
    export type EventSourceSuccessResponseHandler = (rawData: any, response: any) => EventInput[] | void;
    export type EventSourceErrorResponseHandler = (error: EventSourceError) => void;
    export interface ExtendedEventSourceInput {
        id?: string | number;
        allDayDefault?: boolean;
        eventDataTransform?: EventInputTransformer;
        events?: EventInput[] | EventSourceFunc;
        url?: string;
        method?: string;
        extraParams?: object | (() => object);
        startParam?: string;
        endParam?: string;
        timeZoneParam?: string;
        success?: EventSourceSuccessResponseHandler;
        failure?: EventSourceErrorResponseHandler;
        editable?: boolean;
        startEditable?: boolean;
        durationEditable?: boolean;
        constraint?: ConstraintInput;
        overlap?: boolean;
        allow?: AllowFunc;
        className?: string[] | string;
        classNames?: string[] | string;
        backgroundColor?: string;
        borderColor?: string;
        textColor?: string;
        color?: string;
        [otherProp: string]: any;
    }
    export type EventSourceInput = ExtendedEventSourceInput | // object in extended form
    EventSourceFunc | // just a function
    string;
    export interface EventSource {
        _raw: any;
        sourceId: string;
        sourceDefId: number;
        meta: any;
        publicId: string;
        isFetching: boolean;
        latestFetchId: string;
        fetchRange: DateRange | null;
        allDayDefault: boolean | null;
        eventDataTransform: EventInputTransformer;
        ui: EventUi;
        success: EventSourceSuccessResponseHandler | null;
        failure: EventSourceErrorResponseHandler | null;
        extendedProps: any;
    }
    export type EventSourceHash = {
        [sourceId: string]: EventSource;
    };
    export type EventSourceFetcher = (arg: {
        eventSource: EventSource;
        calendar: Calendar;
        range: DateRange;
    }, success: (res: {
        rawEvents: EventInput[];
        xhr?: XMLHttpRequest;
    }) => void, failure: (error: EventSourceError) => void) => (void | PromiseLike);
    export interface EventSourceDef {
        ignoreRange?: boolean;
        parseMeta: (raw: EventSourceInput) => object | null;
        fetch: EventSourceFetcher;
    }
    export function doesSourceNeedRange(eventSource: EventSource, calendar: Calendar): boolean;
    export function parseEventSource(raw: EventSourceInput, calendar: Calendar): EventSource | null;
}

declare module '@fullcalendar/core/interactions/interaction' {
    import DateComponent from '@fullcalendar/core/component/DateComponent';
    export abstract class Interaction {
        component: DateComponent;
        constructor(settings: InteractionSettings);
        destroy(): void;
    }
    export type InteractionClass = {
        new (settings: InteractionSettings): Interaction;
    };
    export interface InteractionSettingsInput {
        el: HTMLElement;
        useEventCenter?: boolean;
    }
    export interface InteractionSettings {
        component: DateComponent;
        el: HTMLElement;
        useEventCenter: boolean;
    }
    export type InteractionSettingsStore = {
        [componenUid: string]: InteractionSettings;
    };
    export function parseInteractionSettings(component: DateComponent, input: InteractionSettingsInput): InteractionSettings;
    export function interactionSettingsToStore(settings: InteractionSettings): {
        [x: string]: InteractionSettings;
    };
    export let interactionSettingsStore: InteractionSettingsStore;
}

declare module '@fullcalendar/core/interactions/pointer' {
    export interface PointerDragEvent {
        origEvent: UIEvent;
        isTouch: boolean;
        subjectEl: EventTarget;
        pageX: number;
        pageY: number;
        deltaX: number;
        deltaY: number;
    }
}

declare module '@fullcalendar/core/interactions/hit' {
    import DateComponent from '@fullcalendar/core/component/DateComponent';
    import { DateSpan } from '@fullcalendar/core/structs/date-span';
    import { Rect } from '@fullcalendar/core/util/geom';
    export interface Hit {
        component: DateComponent;
        dateSpan: DateSpan;
        dayEl: HTMLElement;
        rect: Rect;
        layer: number;
    }
}

declare module '@fullcalendar/core/interactions/date-selecting' {
import { Hit } from '@fullcalendar/core/interactions/hit';
export type dateSelectionJoinTransformer = (hit0: Hit, hit1: Hit) => any;
}

declare module '@fullcalendar/core/interactions/event-dragging' {
    import Calendar from '@fullcalendar/core/Calendar';
    import { EventMutation } from '@fullcalendar/core/structs/event-mutation';
    import { Hit } from '@fullcalendar/core/interactions/hit';
    import { EventDef } from '@fullcalendar/core/structs/event';
    import { EventUi } from '@fullcalendar/core/component/event-ui';
    import { View } from '@fullcalendar/core';
    export type eventDragMutationMassager = (mutation: EventMutation, hit0: Hit, hit1: Hit) => void;
    export type EventDropTransformers = (mutation: EventMutation, calendar: Calendar) => any;
    export type eventIsDraggableTransformer = (val: boolean, eventDef: EventDef, eventUi: EventUi, view: View) => boolean;
}

declare module '@fullcalendar/core/interactions/event-resizing' {
import { Hit } from '@fullcalendar/core/interactions/hit';
export type EventResizeJoinTransforms = (hit0: Hit, hit1: Hit) => false | object;
}

declare module '@fullcalendar/core/interactions/ElementDragging' {
    import EmitterMixin from '@fullcalendar/core/common/EmitterMixin';
    export { ElementDragging as default, ElementDragging };
    abstract class ElementDragging {
        emitter: EmitterMixin;
        constructor(el: HTMLElement);
        destroy(): void;
        abstract setIgnoreMove(bool: boolean): void;
        setMirrorIsVisible(bool: boolean): void;
        setMirrorNeedsRevert(bool: boolean): void;
        setAutoScrollEnabled(bool: boolean): void;
    }
    export type ElementDraggingClass = {
        new (el: HTMLElement): ElementDragging;
    };
}

declare module '@fullcalendar/core/formatting-api' {
    import { DateInput } from '@fullcalendar/core/datelib/env';
    export function formatDate(dateInput: DateInput, settings?: {}): any;
    export function formatRange(startInput: DateInput, endInput: DateInput, settings: any): any;
}

declare module '@fullcalendar/core/options' {
    import { PluginDef } from '@fullcalendar/core/plugin-system';
    export const config: any;
    export const globalDefaults: {
        defaultRangeSeparator: string;
        titleRangeSeparator: string;
        defaultTimedEventDuration: string;
        defaultAllDayEventDuration: {
            day: number;
        };
        forceEventDuration: boolean;
        nextDayThreshold: string;
        columnHeader: boolean;
        defaultView: string;
        aspectRatio: number;
        header: {
            left: string;
            center: string;
            right: string;
        };
        weekends: boolean;
        weekNumbers: boolean;
        weekNumberCalculation: string;
        editable: boolean;
        scrollTime: string;
        minTime: string;
        maxTime: string;
        showNonCurrentDates: boolean;
        lazyFetching: boolean;
        startParam: string;
        endParam: string;
        timeZoneParam: string;
        timeZone: string;
        locales: any[];
        locale: string;
        timeGridEventMinHeight: number;
        themeSystem: string;
        dragRevertDuration: number;
        dragScroll: boolean;
        allDayMaintainDuration: boolean;
        unselectAuto: boolean;
        dropAccept: string;
        eventOrder: string;
        eventLimit: boolean;
        eventLimitClick: string;
        dayPopoverFormat: {
            month: string;
            day: string;
            year: string;
        };
        handleWindowResize: boolean;
        windowResizeDelay: number;
        longPressDelay: number;
        eventDragMinDistance: number;
    };
    export const rtlDefaults: {
        header: {
            left: string;
            center: string;
            right: string;
        };
        buttonIcons: {
            prev: string;
            next: string;
            prevYear: string;
            nextYear: string;
        };
    };
    export function mergeOptions(optionObjs: any): any;
    export function refinePluginDefs(pluginInputs: any[]): PluginDef[];
}

declare module '@fullcalendar/core/structs/recurring-event' {
    import { EventInput, EventDef } from '@fullcalendar/core/structs/event';
    import { DateRange } from '@fullcalendar/core/datelib/date-range';
    import { DateEnv } from '@fullcalendar/core/datelib/env';
    import { Duration } from '@fullcalendar/core/datelib/duration';
    import { DateMarker } from '@fullcalendar/core/datelib/marker';
    export interface ParsedRecurring {
        typeData: any;
        allDayGuess: boolean | null;
        duration: Duration | null;
    }
    export interface RecurringType {
        parse: (rawEvent: EventInput, leftoverProps: any, dateEnv: DateEnv) => ParsedRecurring | null;
        expand: (typeData: any, framingRange: DateRange, dateEnv: DateEnv) => DateMarker[];
    }
    export function parseRecurring(eventInput: EventInput, allDayDefault: boolean | null, dateEnv: DateEnv, recurringTypes: RecurringType[], leftovers: any): {
        allDay: any;
        duration: Duration;
        typeData: any;
        typeId: number;
    };
    export function expandRecurringRanges(eventDef: EventDef, duration: Duration, framingRange: DateRange, dateEnv: DateEnv, recurringTypes: RecurringType[]): DateMarker[];
}

declare module '@fullcalendar/core/structs/drag-meta' {
    import { Duration, DurationInput } from '@fullcalendar/core/datelib/duration';
    import { EventNonDateInput } from '@fullcalendar/core/structs/event';
    export interface DragMetaInput extends EventNonDateInput {
        startTime?: DurationInput;
        duration?: DurationInput;
        create?: boolean;
        sourceId?: string;
    }
    export interface DragMeta {
        startTime: Duration | null;
        duration: Duration | null;
        create: boolean;
        sourceId: string;
        leftoverProps: object;
    }
    export function parseDragMeta(raw: DragMetaInput): DragMeta;
}

declare module '@fullcalendar/core/plugin-system' {
    import { reducerFunc } from '@fullcalendar/core/reducers/types';
    import { eventDefParserFunc } from '@fullcalendar/core/structs/event';
    import { eventDefMutationApplier } from '@fullcalendar/core/structs/event-mutation';
    import Calendar, { DatePointTransform, DateSpanTransform, CalendarInteractionClass, OptionChangeHandlerMap } from '@fullcalendar/core/Calendar';
    import { ViewConfigInputHash } from '@fullcalendar/core/structs/view-config';
    import { ViewSpec } from '@fullcalendar/core/structs/view-spec';
    import View, { ViewProps } from '@fullcalendar/core/View';
    import { CalendarComponentProps } from '@fullcalendar/core/CalendarComponent';
    import { isPropsValidTester } from '@fullcalendar/core/validation';
    import { eventDragMutationMassager, eventIsDraggableTransformer, EventDropTransformers } from '@fullcalendar/core/interactions/event-dragging';
    import { dateSelectionJoinTransformer } from '@fullcalendar/core/interactions/date-selecting';
    import { EventResizeJoinTransforms } from '@fullcalendar/core/interactions/event-resizing';
    import { ExternalDefTransform } from '@fullcalendar/core/interactions/external-element-dragging';
    import { InteractionClass } from '@fullcalendar/core/interactions/interaction';
    import { ThemeClass } from '@fullcalendar/core/theme/Theme';
    import { EventSourceDef } from '@fullcalendar/core/structs/event-source';
    import { CmdFormatterFunc } from '@fullcalendar/core/datelib/formatting-cmd';
    import { RecurringType } from '@fullcalendar/core/structs/recurring-event';
    import { NamedTimeZoneImplClass } from '@fullcalendar/core/datelib/timezone';
    import { ElementDraggingClass } from '@fullcalendar/core/interactions/ElementDragging';
    export interface PluginDefInput {
        deps?: PluginDef[];
        reducers?: reducerFunc[];
        eventDefParsers?: eventDefParserFunc[];
        isDraggableTransformers?: eventIsDraggableTransformer[];
        eventDragMutationMassagers?: eventDragMutationMassager[];
        eventDefMutationAppliers?: eventDefMutationApplier[];
        dateSelectionTransformers?: dateSelectionJoinTransformer[];
        datePointTransforms?: DatePointTransform[];
        dateSpanTransforms?: DateSpanTransform[];
        views?: ViewConfigInputHash;
        viewPropsTransformers?: ViewPropsTransformerClass[];
        isPropsValid?: isPropsValidTester;
        externalDefTransforms?: ExternalDefTransform[];
        eventResizeJoinTransforms?: EventResizeJoinTransforms[];
        viewContainerModifiers?: ViewContainerModifier[];
        eventDropTransformers?: EventDropTransformers[];
        componentInteractions?: InteractionClass[];
        calendarInteractions?: CalendarInteractionClass[];
        themeClasses?: {
            [themeSystemName: string]: ThemeClass;
        };
        eventSourceDefs?: EventSourceDef[];
        cmdFormatter?: CmdFormatterFunc;
        recurringTypes?: RecurringType[];
        namedTimeZonedImpl?: NamedTimeZoneImplClass;
        defaultView?: string;
        elementDraggingImpl?: ElementDraggingClass;
        optionChangeHandlers?: OptionChangeHandlerMap;
    }
    export interface PluginHooks {
        reducers: reducerFunc[];
        eventDefParsers: eventDefParserFunc[];
        isDraggableTransformers: eventIsDraggableTransformer[];
        eventDragMutationMassagers: eventDragMutationMassager[];
        eventDefMutationAppliers: eventDefMutationApplier[];
        dateSelectionTransformers: dateSelectionJoinTransformer[];
        datePointTransforms: DatePointTransform[];
        dateSpanTransforms: DateSpanTransform[];
        views: ViewConfigInputHash;
        viewPropsTransformers: ViewPropsTransformerClass[];
        isPropsValid: isPropsValidTester | null;
        externalDefTransforms: ExternalDefTransform[];
        eventResizeJoinTransforms: EventResizeJoinTransforms[];
        viewContainerModifiers: ViewContainerModifier[];
        eventDropTransformers: EventDropTransformers[];
        componentInteractions: InteractionClass[];
        calendarInteractions: CalendarInteractionClass[];
        themeClasses: {
            [themeSystemName: string]: ThemeClass;
        };
        eventSourceDefs: EventSourceDef[];
        cmdFormatter?: CmdFormatterFunc;
        recurringTypes: RecurringType[];
        namedTimeZonedImpl?: NamedTimeZoneImplClass;
        defaultView: string;
        elementDraggingImpl?: ElementDraggingClass;
        optionChangeHandlers: OptionChangeHandlerMap;
    }
    export interface PluginDef extends PluginHooks {
        id: string;
        deps: PluginDef[];
    }
    export type ViewPropsTransformerClass = new () => ViewPropsTransformer;
    export interface ViewPropsTransformer {
        transform(viewProps: ViewProps, viewSpec: ViewSpec, calendarProps: CalendarComponentProps, view: View): any;
    }
    export type ViewContainerModifier = (contentEl: HTMLElement, calendar: Calendar) => void;
    export function createPlugin(input: PluginDefInput): PluginDef;
    export class PluginSystem {
        hooks: PluginHooks;
        addedHash: {
            [pluginId: string]: true;
        };
        constructor();
        add(plugin: PluginDef): void;
    }
}

declare module '@fullcalendar/core/reducers/types' {
    import { EventInput, EventInstanceHash } from '@fullcalendar/core/structs/event';
    import { DateRange } from '@fullcalendar/core/datelib/date-range';
    import { EventStore } from '@fullcalendar/core/structs/event-store';
    import { EventMutation } from '@fullcalendar/core/structs/event-mutation';
    import { EventSource, EventSourceHash, EventSourceError } from '@fullcalendar/core/structs/event-source';
    import { DateProfile } from '@fullcalendar/core/DateProfileGenerator';
    import { EventInteractionState } from '@fullcalendar/core/interactions/event-interaction-state';
    import { DateSpan } from '@fullcalendar/core/structs/date-span';
    import { DateEnv } from '@fullcalendar/core/datelib/env';
    import Calendar from '@fullcalendar/core/Calendar';
    import { DateMarker } from '@fullcalendar/core/datelib/marker';
    export interface CalendarState {
        eventSources: EventSourceHash;
        eventSourceLoadingLevel: number;
        loadingLevel: number;
        viewType: string;
        currentDate: DateMarker;
        dateProfile: DateProfile | null;
        eventStore: EventStore;
        dateSelection: DateSpan | null;
        eventSelection: string;
        eventDrag: EventInteractionState | null;
        eventResize: EventInteractionState | null;
    }
    export type reducerFunc = (state: CalendarState, action: Action, calendar: Calendar) => CalendarState;
    export type Action = {
        type: 'INIT';
    } | // wont it create another rerender?
    {
        type: 'PREV';
    } | {
        type: 'NEXT';
    } | {
        type: 'SET_DATE';
        dateMarker: DateMarker;
    } | {
        type: 'SET_VIEW_TYPE';
        viewType: string;
        dateMarker?: DateMarker;
    } | {
        type: 'SELECT_DATES';
        selection: DateSpan;
    } | {
        type: 'UNSELECT_DATES';
    } | {
        type: 'SELECT_EVENT';
        eventInstanceId: string;
    } | {
        type: 'UNSELECT_EVENT';
    } | {
        type: 'SET_EVENT_DRAG';
        state: EventInteractionState;
    } | {
        type: 'UNSET_EVENT_DRAG';
    } | {
        type: 'SET_EVENT_RESIZE';
        state: EventInteractionState;
    } | {
        type: 'UNSET_EVENT_RESIZE';
    } | {
        type: 'ADD_EVENT_SOURCES';
        sources: EventSource[];
    } | {
        type: 'REMOVE_EVENT_SOURCE';
        sourceId: string;
    } | {
        type: 'REMOVE_ALL_EVENT_SOURCES';
    } | {
        type: 'FETCH_EVENT_SOURCES';
        sourceIds?: string[];
    } | // if no sourceIds, fetch all
    {
        type: 'CHANGE_TIMEZONE';
        oldDateEnv: DateEnv;
    } | {
        type: 'RECEIVE_EVENTS';
        sourceId: string;
        fetchId: string;
        fetchRange: DateRange | null;
        rawEvents: EventInput[];
    } | {
        type: 'RECEIVE_EVENT_ERROR';
        sourceId: string;
        fetchId: string;
        fetchRange: DateRange | null;
        error: EventSourceError;
    } | // need all these?
    {
        type: 'ADD_EVENTS';
        eventStore: EventStore;
    } | {
        type: 'MERGE_EVENTS';
        eventStore: EventStore;
    } | {
        type: 'MUTATE_EVENTS';
        instanceId: string;
        mutation: EventMutation;
        fromApi?: boolean;
    } | {
        type: 'REMOVE_EVENT_DEF';
        defId: string;
    } | {
        type: 'REMOVE_EVENT_INSTANCES';
        instances: EventInstanceHash;
    } | {
        type: 'REMOVE_ALL_EVENTS';
    } | {
        type: 'RESET_EVENTS';
    };
}

declare module '@fullcalendar/core/CalendarComponent' {
    import Component, { ComponentContext } from '@fullcalendar/core/component/Component';
    import { ViewSpec } from '@fullcalendar/core/structs/view-spec';
    import View from '@fullcalendar/core/View';
    import Toolbar from '@fullcalendar/core/Toolbar';
    import DateProfileGenerator, { DateProfile } from '@fullcalendar/core/DateProfileGenerator';
    import { EventStore } from '@fullcalendar/core/structs/event-store';
    import { EventUiHash } from '@fullcalendar/core/component/event-ui';
    import { BusinessHoursInput } from '@fullcalendar/core/structs/business-hours';
    import { DateMarker } from '@fullcalendar/core/datelib/marker';
    import { CalendarState } from '@fullcalendar/core/reducers/types';
    export interface CalendarComponentProps extends CalendarState {
        viewSpec: ViewSpec;
        dateProfileGenerator: DateProfileGenerator;
        eventUiBases: EventUiHash;
    }
    export { CalendarComponent as default, CalendarComponent };
    class CalendarComponent extends Component {
        view: View;
        header: Toolbar;
        footer: Toolbar;
        computeTitle: (dateProfile: any, viewOptions: any) => string;
        parseBusinessHours: (input: BusinessHoursInput) => EventStore;
        el: HTMLElement;
        contentEl: HTMLElement;
        isHeightAuto: boolean;
        viewHeight: number;
        constructor(context: ComponentContext, el: HTMLElement);
        destroy(): void;
        toggleElClassNames(bool: boolean): void;
        render(props: CalendarComponentProps): void;
        renderToolbars(viewSpec: ViewSpec, dateProfile: DateProfile, currentDate: DateMarker, dateProfileGenerator: DateProfileGenerator, title: string): void;
        renderView(props: CalendarComponentProps, title: string): void;
        updateSize(isResize?: boolean): void;
        computeHeightVars(): void;
        queryToolbarsHeight(): number;
        freezeHeight(): void;
        thawHeight(): void;
    }
}

declare module '@fullcalendar/core/common/DayHeader' {
    import Component, { ComponentContext } from '@fullcalendar/core/component/Component';
    import { DateMarker } from '@fullcalendar/core/datelib/marker';
    import { DateProfile } from '@fullcalendar/core/DateProfileGenerator';
    export interface DayTableHeaderProps {
        dates: DateMarker[];
        dateProfile: DateProfile;
        datesRepDistinctDays: boolean;
        renderIntroHtml?: () => string;
    }
    export { DayHeader as default, DayHeader };
    class DayHeader extends Component {
        el: HTMLElement;
        thead: HTMLElement;
        constructor(context: ComponentContext, parentEl: HTMLElement);
        destroy(): void;
        render(props: DayTableHeaderProps): void;
    }
}

declare module '@fullcalendar/core/common/table-utils' {
    import { DateMarker } from '@fullcalendar/core/datelib/marker';
    import { DateProfile } from '@fullcalendar/core/DateProfileGenerator';
    import { ComponentContext } from '@fullcalendar/core/component/Component';
    export function computeFallbackHeaderFormat(datesRepDistinctDays: boolean, dayCnt: number): {
        weekday: string;
        month?: undefined;
        day?: undefined;
        omitCommas?: undefined;
    } | {
        weekday: string;
        month: string;
        day: string;
        omitCommas: boolean;
    };
    export function renderDateCell(dateMarker: DateMarker, dateProfile: DateProfile, datesRepDistinctDays: any, colCnt: any, colHeadFormat: any, context: ComponentContext, colspan?: any, otherAttrs?: any): string;
}

declare module '@fullcalendar/core/common/DaySeries' {
    import DateProfileGenerator from '@fullcalendar/core/DateProfileGenerator';
    import { DateMarker } from '@fullcalendar/core/datelib/marker';
    import { DateRange } from '@fullcalendar/core/datelib/date-range';
    export interface DaySeriesSeg {
        firstIndex: number;
        lastIndex: number;
        isStart: boolean;
        isEnd: boolean;
    }
    export { DaySeries as default, DaySeries };
    class DaySeries {
        cnt: number;
        dates: DateMarker[];
        indices: number[];
        constructor(range: DateRange, dateProfileGenerator: DateProfileGenerator);
        sliceRange(range: DateRange): DaySeriesSeg | null;
    }
}

declare module '@fullcalendar/core/interactions/event-interaction-state' {
    import { EventStore } from '@fullcalendar/core/structs/event-store';
    import { Seg } from '@fullcalendar/core/component/DateComponent';
    export interface EventInteractionState {
        affectedEvents: EventStore;
        mutatedEvents: EventStore;
        isEvent: boolean;
        origSeg: Seg | null;
    }
}

declare module '@fullcalendar/core/component/event-rendering' {
    import { EventDef, EventTuple, EventDefHash } from '@fullcalendar/core/structs/event';
    import { EventStore } from '@fullcalendar/core/structs/event-store';
    import { DateRange } from '@fullcalendar/core/datelib/date-range';
    import { Duration } from '@fullcalendar/core/datelib/duration';
    import { Seg } from '@fullcalendar/core/component/DateComponent';
    import View from '@fullcalendar/core/View';
    import { EventUi, EventUiHash } from '@fullcalendar/core/component/event-ui';
    export interface EventRenderRange extends EventTuple {
        ui: EventUi;
        range: DateRange;
        isStart: boolean;
        isEnd: boolean;
    }
    export function sliceEventStore(eventStore: EventStore, eventUiBases: EventUiHash, framingRange: DateRange, nextDayThreshold?: Duration): {
        bg: EventRenderRange[];
        fg: EventRenderRange[];
    };
    export function hasBgRendering(def: EventDef): boolean;
    export function filterSegsViaEls(view: View, segs: Seg[], isMirror: boolean): Seg[];
    export function getElSeg(el: HTMLElement): Seg | null;
    export function compileEventUis(eventDefs: EventDefHash, eventUiBases: EventUiHash): {
        [key: string]: EventUi;
    };
    export function compileEventUi(eventDef: EventDef, eventUiBases: EventUiHash): EventUi;
}

declare module '@fullcalendar/core/common/DayTable' {
    import DaySeries from '@fullcalendar/core/common/DaySeries';
    import { DateRange } from '@fullcalendar/core/datelib/date-range';
    import { DateMarker } from '@fullcalendar/core/datelib/marker';
    import { Seg } from '@fullcalendar/core/component/DateComponent';
    export interface DayTableSeg extends Seg {
        row: number;
        firstCol: number;
        lastCol: number;
    }
    export interface DayTableCell {
        date: DateMarker;
        htmlAttrs?: string;
    }
    export { DayTable as default, DayTable };
    class DayTable {
        rowCnt: number;
        colCnt: number;
        cells: DayTableCell[][];
        headerDates: DateMarker[];
        constructor(daySeries: DaySeries, breakOnWeeks: boolean);
        sliceRange(range: DateRange): DayTableSeg[];
    }
}

declare module '@fullcalendar/core/common/slicing-utils' {
    import { DateRange } from '@fullcalendar/core/datelib/date-range';
    import { EventStore } from '@fullcalendar/core/structs/event-store';
    import { EventUiHash } from '@fullcalendar/core/component/event-ui';
    import { DateProfile } from '@fullcalendar/core/DateProfileGenerator';
    import DateComponent, { Seg, EventSegUiInteractionState } from '@fullcalendar/core/component/DateComponent';
    import { DateSpan } from '@fullcalendar/core/structs/date-span';
    import { EventInteractionState } from '@fullcalendar/core/interactions/event-interaction-state';
    import { Duration } from '@fullcalendar/core/datelib/duration';
    import { DateMarker } from '@fullcalendar/core/datelib/marker';
    export interface SliceableProps {
        dateSelection: DateSpan;
        businessHours: EventStore;
        eventStore: EventStore;
        eventDrag: EventInteractionState | null;
        eventResize: EventInteractionState | null;
        eventSelection: string;
        eventUiBases: EventUiHash;
    }
    export interface SlicedProps {
        dateSelectionSegs: SegType[];
        businessHourSegs: SegType[];
        fgEventSegs: SegType[];
        bgEventSegs: SegType[];
        eventDrag: EventSegUiInteractionState | null;
        eventResize: EventSegUiInteractionState | null;
        eventSelection: string;
    }
    export { Slicer as default, Slicer };
    abstract class Slicer {
        abstract sliceRange(dateRange: DateRange, ...extraArgs: ExtraArgs): SegType[];
        sliceProps(props: SliceableProps, dateProfile: DateProfile, nextDayThreshold: Duration | null, component: DateComponent, // TODO: kill
        ...extraArgs: ExtraArgs): SlicedProps;
        sliceNowDate(// does not memoize
        date: DateMarker, component: DateComponent, // TODO: kill
        ...extraArgs: ExtraArgs): SegType[];
    }
}

declare module '@fullcalendar/core/structs/event-mutation' {
    import { Duration } from '@fullcalendar/core/datelib/duration';
    import { EventStore } from '@fullcalendar/core/structs/event-store';
    import { EventDef } from '@fullcalendar/core/structs/event';
    import Calendar from '@fullcalendar/core/Calendar';
    import { EventUiHash } from '@fullcalendar/core/component/event-ui';
    export interface EventMutation {
        datesDelta?: Duration;
        startDelta?: Duration;
        endDelta?: Duration;
        standardProps?: any;
        extendedProps?: any;
    }
    export function applyMutationToEventStore(eventStore: EventStore, eventConfigBase: EventUiHash, mutation: EventMutation, calendar: Calendar): EventStore;
    export type eventDefMutationApplier = (eventDef: EventDef, mutation: EventMutation, calendar: Calendar) => void;
}

declare module '@fullcalendar/core/validation' {
    import { EventStore } from '@fullcalendar/core/structs/event-store';
    import Calendar from '@fullcalendar/core/Calendar';
    import { DateSpan, DateSpanApi } from '@fullcalendar/core/structs/date-span';
    import EventApi from '@fullcalendar/core/api/EventApi';
    import { EventInput } from '@fullcalendar/core/structs/event';
    import { EventInteractionState } from '@fullcalendar/core/interactions/event-interaction-state';
    import { SplittableProps } from '@fullcalendar/core/component/event-splitting';
    export type ConstraintInput = 'businessHours' | string | EventInput | EventInput[];
    export type Constraint = 'businessHours' | string | EventStore | false;
    export type OverlapFunc = ((stillEvent: EventApi, movingEvent: EventApi | null) => boolean);
    export type AllowFunc = (span: DateSpanApi, movingEvent: EventApi | null) => boolean;
    export type isPropsValidTester = (props: SplittableProps, calendar: Calendar) => boolean;
    export function isInteractionValid(interaction: EventInteractionState, calendar: Calendar): boolean;
    export function isDateSelectionValid(dateSelection: DateSpan, calendar: Calendar): boolean;
    export function isPropsValid(state: SplittableProps, calendar: Calendar, dateSpanMeta?: {}, filterConfig?: any): boolean;
    export function normalizeConstraint(input: ConstraintInput, calendar: Calendar): Constraint | null;
}

declare module '@fullcalendar/core/api/EventApi' {
    import Calendar from '@fullcalendar/core/Calendar';
    import { EventDef, EventInstance } from '@fullcalendar/core/structs/event';
    import { EventMutation } from '@fullcalendar/core/structs/event-mutation';
    import { DateInput } from '@fullcalendar/core/datelib/env';
    import { DurationInput } from '@fullcalendar/core/datelib/duration';
    import { FormatterInput } from '@fullcalendar/core/datelib/formatting';
    import EventSourceApi from '@fullcalendar/core/api/EventSourceApi';
    export { EventApi as default, EventApi };
    class EventApi {
        _calendar: Calendar;
        _def: EventDef;
        _instance: EventInstance | null;
        constructor(calendar: Calendar, def: EventDef, instance?: EventInstance);
        setProp(name: string, val: string): void;
        setExtendedProp(name: string, val: any): void;
        setStart(startInput: DateInput, options?: {
            granularity?: string;
            maintainDuration?: boolean;
        }): void;
        setEnd(endInput: DateInput | null, options?: {
            granularity?: string;
        }): void;
        setDates(startInput: DateInput, endInput: DateInput | null, options?: {
            allDay?: boolean;
            granularity?: string;
        }): void;
        moveStart(deltaInput: DurationInput): void;
        moveEnd(deltaInput: DurationInput): void;
        moveDates(deltaInput: DurationInput): void;
        setAllDay(allDay: boolean, options?: {
            maintainDuration?: boolean;
        }): void;
        formatRange(formatInput: FormatterInput): any;
        mutate(mutation: EventMutation): void;
        remove(): void;
        readonly source: EventSourceApi | null;
        readonly start: Date | null;
        readonly end: Date | null;
        readonly id: string;
        readonly groupId: string;
        readonly allDay: boolean;
        readonly title: string;
        readonly url: string;
        readonly rendering: string;
        readonly startEditable: boolean;
        readonly durationEditable: boolean;
        readonly constraint: any;
        readonly overlap: any;
        readonly allow: any;
        readonly backgroundColor: string;
        readonly borderColor: string;
        readonly textColor: string;
        readonly classNames: string[];
        readonly extendedProps: any;
    }
}

declare module '@fullcalendar/core/util/requestJson' {
export default function requestJson(method: string, url: string, params: object, successCallback: any, failureCallback: any): void;
}

declare module '@fullcalendar/core/datelib/locale' {
    export type LocaleCodeArg = string | string[];
    export type LocaleSingularArg = LocaleCodeArg | RawLocale;
    export interface Locale {
        codeArg: LocaleCodeArg;
        codes: string[];
        week: {
            dow: number;
            doy: number;
        };
        simpleNumberFormat: Intl.NumberFormat;
        options: any;
    }
    export interface RawLocale {
        code: string;
        [otherProp: string]: any;
    }
    export type RawLocaleMap = {
        [code: string]: RawLocale;
    };
    export interface RawLocaleInfo {
        map: RawLocaleMap;
        defaultCode: string;
    }
    export function parseRawLocales(explicitRawLocales: RawLocale[]): RawLocaleInfo;
    export function buildLocale(inputSingular: LocaleSingularArg, available: RawLocaleMap): Locale;
}

declare module '@fullcalendar/core/OptionsManager' {
    export { OptionsManager as default, OptionsManager };
    class OptionsManager {
        dirDefaults: any;
        localeDefaults: any;
        overrides: any;
        dynamicOverrides: any;
        computed: any;
        constructor(overrides: any);
        mutate(updates: any, removals: string[], isDynamic?: boolean): void;
        compute(): void;
    }
}

declare module '@fullcalendar/core/api/EventSourceApi' {
    import Calendar from '@fullcalendar/core/Calendar';
    import { EventSource } from '@fullcalendar/core/structs/event-source';
    export { EventSourceApi as default, EventSourceApi };
    class EventSourceApi {
        calendar: Calendar;
        internalEventSource: EventSource;
        constructor(calendar: Calendar, internalEventSource: EventSource);
        remove(): void;
        refetch(): void;
        readonly id: string;
        readonly url: string;
    }
}

declare module '@fullcalendar/core/structs/view-config' {
    import View from '@fullcalendar/core/View';
    import { ViewSpec } from '@fullcalendar/core/structs/view-spec';
    import { ComponentContext } from '@fullcalendar/core/component/Component';
    import DateProfileGenerator from '@fullcalendar/core/DateProfileGenerator';
    export type ViewClass = new (context: ComponentContext, viewSpec: ViewSpec, dateProfileGenerator: DateProfileGenerator, parentEl: HTMLElement) => View;
    export interface ViewConfigObjectInput {
        type?: string;
        class?: ViewClass;
        [optionName: string]: any;
    }
    export type ViewConfigInput = ViewClass | ViewConfigObjectInput;
    export type ViewConfigInputHash = {
        [viewType: string]: ViewConfigInput;
    };
    export interface ViewConfig {
        superType: string;
        class: ViewClass | null;
        options: any;
    }
    export type ViewConfigHash = {
        [viewType: string]: ViewConfig;
    };
    export function parseViewConfigs(inputs: ViewConfigInputHash): ViewConfigHash;
}

declare module '@fullcalendar/core/datelib/calendar-system' {
    import { DateMarker } from '@fullcalendar/core/datelib/marker';
    export interface CalendarSystem {
        getMarkerYear(d: DateMarker): number;
        getMarkerMonth(d: DateMarker): number;
        getMarkerDay(d: DateMarker): number;
        arrayToMarker(arr: number[]): DateMarker;
        markerToArray(d: DateMarker): number[];
    }
    export function registerCalendarSystem(name: any, theClass: any): void;
    export function createCalendarSystem(name: any): any;
}

declare module '@fullcalendar/core/datelib/formatting-cmd' {
    import { DateFormatter, DateFormattingContext, ZonedMarker, VerboseFormattingArg } from '@fullcalendar/core/datelib/formatting';
    export type CmdFormatterFunc = (cmd: string, arg: VerboseFormattingArg) => string;
    export class CmdFormatter implements DateFormatter {
        cmdStr: string;
        separator: string;
        constructor(cmdStr: string, separator?: string);
        format(date: ZonedMarker, context: DateFormattingContext): string;
        formatRange(start: ZonedMarker, end: ZonedMarker, context: DateFormattingContext): string;
    }
}

declare module '@fullcalendar/core/datelib/formatting-func' {
    import { DateFormatter, DateFormattingContext, ZonedMarker, VerboseFormattingArg } from '@fullcalendar/core/datelib/formatting';
    export type FuncFormatterFunc = (arg: VerboseFormattingArg) => string;
    export class FuncFormatter implements DateFormatter {
        func: FuncFormatterFunc;
        constructor(func: FuncFormatterFunc);
        format(date: ZonedMarker, context: DateFormattingContext): string;
        formatRange(start: ZonedMarker, end: ZonedMarker, context: DateFormattingContext): string;
    }
}

declare module '@fullcalendar/core/event-sources/func-event-source' {
    import { EventSourceError } from '@fullcalendar/core/structs/event-source';
    import { EventInput } from '@fullcalendar/core/structs/event';
    export type EventSourceFunc = (arg: {
        start: Date;
        end: Date;
        timeZone: string;
    }, successCallback: (events: EventInput[]) => void, failureCallback: (error: EventSourceError) => void) => (void | PromiseLike);
    const _default: import("@fullcalendar/core/plugin-system").PluginDef;
    export default _default;
}

declare module '@fullcalendar/core/interactions/external-element-dragging' {
    import { DateSpan } from '@fullcalendar/core/structs/date-span';
    import { DragMeta } from '@fullcalendar/core/structs/drag-meta';
    export type ExternalDefTransform = (dateSpan: DateSpan, dragMeta: DragMeta) => any;
}

declare module '@fullcalendar/core/Toolbar' {
    import Component, { ComponentContext } from '@fullcalendar/core/component/Component';
    export interface ToolbarRenderProps {
        layout: any;
        title: string;
        activeButton: string;
        isTodayEnabled: boolean;
        isPrevEnabled: boolean;
        isNextEnabled: boolean;
    }
    export { Toolbar as default, Toolbar };
    class Toolbar extends Component {
        el: HTMLElement;
        viewsWithButtons: any;
        constructor(context: ComponentContext, extraClassName: any);
        destroy(): void;
        render(props: ToolbarRenderProps): void;
        renderLayout(layout: any): void;
        unrenderLayout(): void;
        renderSection(position: any, buttonStr: any): HTMLElement;
        updateToday(isTodayEnabled: any): void;
        updatePrev(isPrevEnabled: any): void;
        updateNext(isNextEnabled: any): void;
        updateTitle(text: any): void;
        updateActiveButton(buttonName?: any): void;
        toggleButtonEnabled(buttonName: any, bool: any): void;
    }
}

/*!
FullCalendar Core Package v4.3.1
Docs & License: https://fullcalendar.io/
(c) 2019 Adam Shaw
*/
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).FullCalendar={})}(this,function(e){"use strict";var t={className:!0,colSpan:!0,rowSpan:!0},n={"");document.body.appendChild(e);var t=e.firstChild.getBoundingClientRect().left>e.getBoundingClientRect().left;return c(e),t}()),S}function D(e){return e=Math.max(0,e),e=Math.round(e)}function T(e,t){void 0===t&&(t=!1);var n=window.getComputedStyle(e),r=parseInt(n.borderLeftWidth,10)||0,i=parseInt(n.borderRightWidth,10)||0,o=parseInt(n.borderTopWidth,10)||0,a=parseInt(n.borderBottomWidth,10)||0,s=D(e.offsetWidth-e.clientWidth-r-i),u={borderLeft:r,borderRight:i,borderTop:o,borderBottom:a,scrollbarBottom:D(e.offsetHeight-e.clientHeight-o-a),scrollbarLeft:0,scrollbarRight:0};return b()&&"rtl"===n.direction?u.scrollbarLeft=s:u.scrollbarRight=s,t&&(u.paddingLeft=parseInt(n.paddingLeft,10)||0,u.paddingRight=parseInt(n.paddingRight,10)||0,u.paddingTop=parseInt(n.paddingTop,10)||0,u.paddingBottom=parseInt(n.paddingBottom,10)||0),u}function w(e,t){void 0===t&&(t=!1);var n=R(e),r=T(e,t),i={left:n.left+r.borderLeft+r.scrollbarLeft,right:n.right-r.borderRight-r.scrollbarRight,top:n.top+r.borderTop,bottom:n.bottom-r.borderBottom-r.scrollbarBottom};return t&&(i.left+=r.paddingLeft,i.right-=r.paddingRight,i.top+=r.paddingTop,i.bottom-=r.paddingBottom),i}function R(e){var t=e.getBoundingClientRect();return{left:t.left+window.pageXOffset,top:t.top+window.pageYOffset,right:t.right+window.pageXOffset,bottom:t.bottom+window.pageYOffset}}function I(e){return e.getBoundingClientRect().height+C(e)}function C(e){var t=window.getComputedStyle(e);return parseInt(t.marginTop,10)+parseInt(t.marginBottom,10)}function M(e){for(var t=[];e instanceof HTMLElement;){var n=window.getComputedStyle(e);if("fixed"===n.position)break;/(auto|scroll)/.test(n.overflow+n.overflowY+n.overflowX)&&t.push(e),e=e.parentNode}return t}function k(e){e.preventDefault()}function O(e,t,n,r){function i(e){var t=p(e.target,n);t&&r.call(t,e,t)}return e.addEventListener(t,i),function(){e.removeEventListener(t,i)}}var _=["webkitTransitionEnd","otransitionend","oTransitionEnd","msTransitionEnd","transitionend"];var P=["sun","mon","tue","wed","thu","fri","sat"];function x(e,t){var n=Z(e);return n[2]+=t,j(n)}function H(e,t){var n=Z(e);return n[6]+=t,j(n)}function N(e,t){return(t.valueOf()-e.valueOf())/864e5}function z(e,t){var n=B(e),r=B(t);return{years:0,months:0,days:Math.round(N(n,r)),milliseconds:t.valueOf()-r.valueOf()-(e.valueOf()-n.valueOf())}}function U(e,t){var n=L(e,t);return null!==n&&n%7==0?n/7:null}function L(e,t){return q(e)===q(t)?Math.round(N(e,t)):null}function B(e){return j([e.getUTCFullYear(),e.getUTCMonth(),e.getUTCDate()])}function V(e,t,n,r){var i=j([t,0,1+A(t,n,r)]),o=B(e),a=Math.round(N(i,o));return Math.floor(a/7)+1}function A(e,t,n){var r=7+t-n;return-((7+j([e,0,r]).getUTCDay()-t)%7)+r-1}function F(e){return[e.getFullYear(),e.getMonth(),e.getDate(),e.getHours(),e.getMinutes(),e.getSeconds(),e.getMilliseconds()]}function W(e){return new Date(e[0],e[1]||0,null==e[2]?1:e[2],e[3]||0,e[4]||0,e[5]||0)}function Z(e){return[e.getUTCFullYear(),e.getUTCMonth(),e.getUTCDate(),e.getUTCHours(),e.getUTCMinutes(),e.getUTCSeconds(),e.getUTCMilliseconds()]}function j(e){return 1===e.length&&(e=e.concat([0])),new Date(Date.UTC.apply(Date,e))}function Y(e){return!isNaN(e.valueOf())}function q(e){return 1e3*e.getUTCHours()*60*60+1e3*e.getUTCMinutes()*60+1e3*e.getUTCSeconds()+e.getUTCMilliseconds()}var G=["years","months","days","milliseconds"],X=/^(-?)(?:(\d+)\.)?(\d+):(\d\d)(?::(\d\d)(?:\.(\d\d\d))?)?/;function J(e,t){var n;return"string"==typeof e?function(e){var t=X.exec(e);if(t){var n=t[1]?-1:1;return{years:0,months:0,days:n*(t[2]?parseInt(t[2],10):0),milliseconds:n*(60*(t[3]?parseInt(t[3],10):0)*60*1e3+60*(t[4]?parseInt(t[4],10):0)*1e3+1e3*(t[5]?parseInt(t[5],10):0)+(t[6]?parseInt(t[6],10):0))}}return null}(e):"object"==typeof e&&e?K(e):"number"==typeof e?K(((n={})[t||"milliseconds"]=e,n)):null}function K(e){return{years:e.years||e.year||0,months:e.months||e.month||0,days:(e.days||e.day||0)+7*Q(e),milliseconds:60*(e.hours||e.hour||0)*60*1e3+60*(e.minutes||e.minute||0)*1e3+1e3*(e.seconds||e.second||0)+(e.milliseconds||e.millisecond||e.ms||0)}}function Q(e){return e.weeks||e.week||0}function $(e,t){return e.years===t.years&&e.months===t.months&&e.days===t.days&&e.milliseconds===t.milliseconds}function ee(e){return te(e)/864e5}function te(e){return 31536e6*e.years+2592e6*e.months+864e5*e.days+e.milliseconds}function ne(e,t){var n=e.milliseconds;if(n){if(n%1e3!=0)return{unit:"millisecond",value:n};if(n%6e4!=0)return{unit:"second",value:n/1e3};if(n%36e5!=0)return{unit:"minute",value:n/6e4};if(n)return{unit:"hour",value:n/36e5}}return e.days?t||e.days%7!=0?{unit:"day",value:e.days}:{unit:"week",value:e.days/7}:e.months?{unit:"month",value:e.months}:e.years?{unit:"year",value:e.years}:{unit:"millisecond",value:0}}function re(e){e.forEach(function(e){e.style.height=""})}function ie(e){var t,n,r=[],i=[];for("string"==typeof e?i=e.split(/\s*,\s*/):"function"==typeof e?i=[e]:Array.isArray(e)&&(i=e),t=0;t=te(t)&&(r=x(r,1))}return e.start&&(n=B(e.start),r&&r<=n&&(r=x(n,1))),{start:n,end:r}}function ye(e,t,n,r){return"year"===r?J(n.diffWholeYears(e,t),"year"):"month"===r?J(n.diffWholeMonths(e,t),"month"):z(e,t)}var me=function(e,t){return(me=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])})(e,t)};function Ee(e,t){function n(){this.constructor=e}me(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}var Se=function(){return(Se=Object.assign||function(e){for(var t,n=1,r=arguments.length;n=0;o--)if("object"==typeof(a=e[o][r])&&a)i.unshift(a);else if(void 0!==a){u[r]=a;break}i.length&&(u[r]=Te(i))}for(n=e.length-1;n>=0;n--)for(r in s=e[n])r in u||(u[r]=s[r]);return u}function we(e,t){var n={};for(var r in e)t(e[r],r)&&(n[r]=e[r]);return n}function Re(e,t){var n={};for(var r in e)n[r]=t(e[r],r);return n}function Ie(e){for(var t={},n=0,r=e;no&&i.push({start:o,end:r.start}),r.end>o&&(o=r.end);return ot.start)&&(null===e.start||null===t.end||e.start=e.start)&&(null===e.end||null!==t.end&&t.end<=e.end)}function Ze(e,t){return(null===e.start||t>=e.start)&&(null===e.end||t1)||"numeric"!==r.year&&"2-digit"!==r.year||"numeric"!==r.month&&"2-digit"!==r.month||"numeric"!==r.day&&"2-digit"!==r.day||(a=1);var s=this.format(e,n),u=this.format(t,n);if(s===u)return s;var l=nt(function(e,t){var n={};for(var r in e)r in Xe&&!(Xe[r]<=t)||(n[r]=e[r]);return n}(r,a),i,n),c=l(e),d=l(t),f=function(e,t,n,r){var i=0;for(;i/g,">").replace(/'/g,"'").replace(/"/g,""").replace(/\n/g,"
")}function _t(e){var t=[];for(var n in e){var r=e[n];null!=r&&""!==r&&t.push(n+":"+r)}return t.join(";")}function Pt(e){return Array.isArray(e)?e:"string"==typeof e?e.split(/\s+/):[]}var xt={editable:Boolean,startEditable:Boolean,durationEditable:Boolean,constraint:null,overlap:null,allow:null,className:Pt,classNames:Pt,color:String,backgroundColor:String,borderColor:String,textColor:String};function Ht(e,t,n){var r=he(e,xt,{},n),i=function(e,t){return Array.isArray(e)?ke(e,"",t,!0):"object"==typeof e&&e?ke([e],"",t,!0):null!=e?String(e):null}(r.constraint,t);return{startEditable:null!=r.startEditable?r.startEditable:r.editable,durationEditable:null!=r.durationEditable?r.durationEditable:r.editable,constraints:null!=i?[i]:[],overlap:r.overlap,allows:null!=r.allow?[r.allow]:[],backgroundColor:r.backgroundColor||r.color,borderColor:r.borderColor||r.color,textColor:r.textColor,classNames:r.classNames.concat(r.className)}}function Nt(e,t,n,r){var i={},o={};for(var a in xt){var s=e+ue(a);i[a]=t[s],o[s]=!0}if("event"===e&&(i.editable=t.editable),r)for(var a in t)o[a]||(r[a]=t[a]);return Ht(i,n)}var zt={startEditable:null,durationEditable:null,constraints:[],overlap:null,allows:[],backgroundColor:"",borderColor:"",textColor:"",classNames:[]};function Ut(e){return e.reduce(Lt,zt)}function Lt(e,t){return{startEditable:null!=t.startEditable?t.startEditable:e.startEditable,durationEditable:null!=t.durationEditable?t.durationEditable:e.durationEditable,constraints:e.constraints.concat(t.constraints),overlap:"boolean"==typeof t.overlap?t.overlap:e.overlap,allows:e.allows.concat(t.allows),backgroundColor:t.backgroundColor||e.backgroundColor,borderColor:t.borderColor||e.borderColor,textColor:t.textColor||e.textColor,classNames:e.classNames.concat(t.classNames)}}var Bt={id:String,groupId:String,title:String,url:String,rendering:String,extendedProps:null},Vt={start:null,date:null,end:null,allDay:null},At=0;function Ft(e,t,n,r){var i=function(e,t){var n=null;if(e){var r=t.state.eventSources[e];n=r.allDayDefault}null==n&&(n=t.opt("allDayDefault"));return n}(t,n),o={},a=function(e,t,n,r,i){for(var o=0;o'+r+"":""+r+""}function Qt(e,t,n,r){var i,o,a=n.calendar,s=n.view,u=n.theme,l=n.dateEnv,c=[];return Ze(t.activeRange,e)?(c.push("fc-"+P[e.getUTCDay()]),s.opt("monthMode")&&l.getMonth(e)!==l.getMonth(t.currentRange.start)&&c.push("fc-other-month"),o=x(i=B(a.getNow()),1),e=o?c.push("fc-future"):(c.push("fc-today"),!0!==r&&c.push(u.getClass("today")))):c.push("fc-disabled-day"),c}function $t(e,t,n){var r=!1,i=function(){r||(r=!0,t.apply(this,arguments))},o=function(){r||(r=!0,n&&n.apply(this,arguments))},a=e(i,o);a&&"function"==typeof a.then&&a.then(i,o)}var en=function(){function e(){}return e.mixInto=function(e){this.mixIntoObj(e.prototype)},e.mixIntoObj=function(e){var t=this;Object.getOwnPropertyNames(this.prototype).forEach(function(n){e[n]||(e[n]=t.prototype[n])})},e.mixOver=function(e){var t=this;Object.getOwnPropertyNames(this.prototype).forEach(function(n){e.prototype[n]=t.prototype[n]})},e}(),tn=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return Ee(t,e),t.prototype.on=function(e,t){return nn(this._handlers||(this._handlers={}),e,t),this},t.prototype.one=function(e,t){return nn(this._oneHandlers||(this._oneHandlers={}),e,t),this},t.prototype.off=function(e,t){return this._handlers&&rn(this._handlers,e,t),this._oneHandlers&&rn(this._oneHandlers,e,t),this},t.prototype.trigger=function(e){for(var t=[],n=1;n=n[t]&&e=n[t]&&e0},e.prototype.canScrollHorizontally=function(){return this.getMaxScrollLeft()>0},e.prototype.canScrollUp=function(){return this.getScrollTop()>0},e.prototype.canScrollDown=function(){return this.getScrollTop()0},e.prototype.canScrollRight=function(){return this.getScrollLeft() *",pn.prototype.bgSegSelector=".fc-bgevent:not(.fc-nonbusiness)";var hn=0;function vn(e){return{id:String(hn++),deps:e.deps||[],reducers:e.reducers||[],eventDefParsers:e.eventDefParsers||[],isDraggableTransformers:e.isDraggableTransformers||[],eventDragMutationMassagers:e.eventDragMutationMassagers||[],eventDefMutationAppliers:e.eventDefMutationAppliers||[],dateSelectionTransformers:e.dateSelectionTransformers||[],datePointTransforms:e.datePointTransforms||[],dateSpanTransforms:e.dateSpanTransforms||[],views:e.views||{},viewPropsTransformers:e.viewPropsTransformers||[],isPropsValid:e.isPropsValid||null,externalDefTransforms:e.externalDefTransforms||[],eventResizeJoinTransforms:e.eventResizeJoinTransforms||[],viewContainerModifiers:e.viewContainerModifiers||[],eventDropTransformers:e.eventDropTransformers||[],componentInteractions:e.componentInteractions||[],calendarInteractions:e.calendarInteractions||[],themeClasses:e.themeClasses||{},eventSourceDefs:e.eventSourceDefs||[],cmdFormatter:e.cmdFormatter,recurringTypes:e.recurringTypes||[],namedTimeZonedImpl:e.namedTimeZonedImpl,defaultView:e.defaultView||"",elementDraggingImpl:e.elementDraggingImpl,optionChangeHandlers:e.optionChangeHandlers||{}}}var gn=function(){function e(){this.hooks={reducers:[],eventDefParsers:[],isDraggableTransformers:[],eventDragMutationMassagers:[],eventDefMutationAppliers:[],dateSelectionTransformers:[],datePointTransforms:[],dateSpanTransforms:[],views:{},viewPropsTransformers:[],isPropsValid:null,externalDefTransforms:[],eventResizeJoinTransforms:[],viewContainerModifiers:[],eventDropTransformers:[],componentInteractions:[],calendarInteractions:[],themeClasses:{},eventSourceDefs:[],cmdFormatter:null,recurringTypes:[],namedTimeZonedImpl:null,defaultView:"",elementDraggingImpl:null,optionChangeHandlers:{}},this.addedHash={}}return e.prototype.add=function(e){if(!this.addedHash[e.id]){this.addedHash[e.id]=!0;for(var t=0,n=e.deps;t=200&&a.status<400)try{var e=JSON.parse(a.responseText);r(e,a)}catch(e){i("Failure parsing JSON",a)}else i("Request failed",a)},a.onerror=function(){i("Request failed",a)},a.send(o)}function Sn(e){var t=[];for(var n in e)t.push(encodeURIComponent(n)+"="+encodeURIComponent(e[n]));return t.join("&")}var bn=vn({eventSourceDefs:[{parseMeta:function(e){if("string"==typeof e)e={url:e};else if(!e||"object"!=typeof e||!e.url)return null;return{url:e.url,method:(e.method||"GET").toUpperCase(),extraParams:e.extraParams,startParam:e.startParam,endParam:e.endParam,timeZoneParam:e.timeZoneParam}},fetch:function(e,t,n){var r=e.eventSource.meta,i=function(e,t,n){var r,i,o,a,s=n.dateEnv,u={};null==(r=e.startParam)&&(r=n.opt("startParam"));null==(i=e.endParam)&&(i=n.opt("endParam"));null==(o=e.timeZoneParam)&&(o=n.opt("timeZoneParam"));a="function"==typeof e.extraParams?e.extraParams():e.extraParams||{};Se(u,a),u[r]=s.formatIso(t.start),u[i]=s.formatIso(t.end),"local"!==s.timeZone&&(u[o]=s.timeZone);return u}(r,e.range,e.calendar);En(r.method,r.url,i,function(e,n){t({rawEvents:e,xhr:n})},function(e,t){n({message:e,xhr:t})})}}]});var Dn=vn({recurringTypes:[{parse:function(e,t,n){var r,i,o=n.createMarker.bind(n),a=he(e,{daysOfWeek:null,startTime:J,endTime:J,startRecur:o,endRecur:o},{},t),s=!1;for(var u in a)if(null!=a[u]){s=!0;break}if(s){var l=null;return"duration"in t&&(l=J(t.duration),delete t.duration),!l&&a.startTime&&a.endTime&&(r=a.endTime,i=a.startTime,l={years:r.years-i.years,months:r.months-i.months,days:r.days-i.days,milliseconds:r.milliseconds-i.milliseconds}),{allDayGuess:Boolean(!a.startTime&&!a.endTime),duration:l,typeData:a}}return null},expand:function(e,t,n){var r=Ve(t,{start:e.startRecur,end:e.endRecur});return r?function(e,t,n,r){var i=e?Ie(e):null,o=B(n.start),a=n.end,s=[];for(;o0?e[0].code:"en",n=window.FullCalendarLocalesAll||[],r=window.FullCalendarLocales||{},i=n.concat(Ce(r),e),o={en:kn},a=0,s=i;a0;i--){var o=r.slice(0,i).join("-");if(t[o])return t[o]}return null}(n,t)||kn;return Pn(e,n,r)}(e,t):Pn(e.code,[e.code],e)}function Pn(e,t,n){var r=Te([kn,n],["buttonText"]);delete r.code;var i=r.week;return delete r.week,{codeArg:e,codes:t,week:i,simpleNumberFormat:new Intl.NumberFormat(e),options:r}}var xn=function(){function e(e){this.overrides=Se({},e),this.dynamicOverrides={},this.compute()}return e.prototype.mutate=function(e,t,n){var r=n?this.dynamicOverrides:this.overrides;Se(r,e);for(var i=0,o=t;i=1?Math.min(i,o):i}(e,this.weekDow,this.weekDoy)},e.prototype.format=function(e,t,n){return void 0===n&&(n={}),t.format({marker:e,timeZoneOffset:null!=n.forcedTzo?n.forcedTzo:this.offsetForMarker(e)},this)},e.prototype.formatRange=function(e,t,n,r){return void 0===r&&(r={}),r.isEndExclusive&&(t=H(t,-1)),n.formatRange({marker:e,timeZoneOffset:null!=r.forcedStartTzo?r.forcedStartTzo:this.offsetForMarker(e)},{marker:t,timeZoneOffset:null!=r.forcedEndTzo?r.forcedEndTzo:this.offsetForMarker(t)},this)},e.prototype.formatIso=function(e,t){void 0===t&&(t={});var n=null;return t.omitTimeZoneOffset||(n=null!=t.forcedTzo?t.forcedTzo:this.offsetForMarker(e)),function(e,t,n){void 0===n&&(n=!1);var r=e.toISOString();return r=r.replace(".000",""),n&&(r=r.replace("T00:00:00Z","")),r.length>10&&(null==t?r=r.replace("Z",""):0!==t&&(r=r.replace("Z",at(t,!0)))),r}(e,n,t.omitTime)},e.prototype.timestampToMarker=function(e){return"local"===this.timeZone?j(F(new Date(e))):"UTC"!==this.timeZone&&this.namedTimeZoneImpl?j(this.namedTimeZoneImpl.timestampToArray(e)):new Date(e)},e.prototype.offsetForMarker=function(e){return"local"===this.timeZone?-W(Z(e)).getTimezoneOffset():"UTC"===this.timeZone?0:this.namedTimeZoneImpl?this.namedTimeZoneImpl.offsetForArray(Z(e)):null},e.prototype.toDate=function(e,t){return"local"===this.timeZone?W(Z(e)):"UTC"===this.timeZone?new Date(e.valueOf()):this.namedTimeZoneImpl?new Date(e.valueOf()-1e3*this.namedTimeZoneImpl.offsetForArray(Z(e))*60):new Date(e.valueOf()-(t||0))},e}(),Vn={id:String,allDayDefault:Boolean,eventDataTransform:Function,success:Function,failure:Function},An=0;function Fn(e,t){return!t.pluginSystem.hooks.eventSourceDefs[e.sourceDefId].ignoreRange}function Wn(e,t){for(var n=t.pluginSystem.hooks.eventSourceDefs,r=n.length-1;r>=0;r--){var i=n[r].parseMeta(e);if(i){var o=Zn("object"==typeof e?e:{},i,r,t);return o._raw=e,o}}return null}function Zn(e,t,n,r){var i={},o=he(e,Vn,{},i),a={},s=Ht(i,r,a);return o.isFetching=!1,o.latestFetchId="",o.fetchRange=null,o.publicId=String(e.id||""),o.sourceId=String(An++),o.sourceDefId=n,o.meta=t,o.ui=s,o.extendedProps=a,o}function jn(e,t,n,r){switch(t.type){case"ADD_EVENT_SOURCES":return function(e,t,n,r){for(var i={},o=0,a=t;oe.fetchRange.end:!e.latestFetchId}(e,t,n)}),t,n)}function Gn(e,t,n,r){var i={};for(var o in e){var a=e[o];t[o]?i[o]=Xn(a,n,r):i[o]=a}return i}function Xn(e,t,n){var r=n.pluginSystem.hooks.eventSourceDefs[e.sourceDefId],i=String(Yn++);return r.fetch({eventSource:e,calendar:n,range:t},function(r){var o,a,s=r.rawEvents,u=n.opt("eventSourceSuccess");e.success&&(a=e.success(s,r.xhr)),u&&(o=u(s,r.xhr)),s=a||o||s,n.dispatch({type:"RECEIVE_EVENTS",sourceId:e.sourceId,fetchId:i,fetchRange:t,rawEvents:s})},function(r){var o=n.opt("eventSourceFailure");console.warn(r.message,r),e.failure&&e.failure(r),o&&o(r),n.dispatch({type:"RECEIVE_EVENT_ERROR",sourceId:e.sourceId,fetchId:i,fetchRange:t,error:r})}),Se({},e,{isFetching:!0,latestFetchId:i})}var Jn=function(){function e(e,t){this.viewSpec=e,this.options=e.options,this.dateEnv=t.dateEnv,this.calendar=t,this.initHiddenDays()}return e.prototype.buildPrev=function(e,t){var n=this.dateEnv,r=n.subtract(n.startOf(t,e.currentRangeUnit),e.dateIncrement);return this.build(r,-1)},e.prototype.buildNext=function(e,t){var n=this.dateEnv,r=n.add(n.startOf(t,e.currentRangeUnit),e.dateIncrement);return this.build(r,1)},e.prototype.build=function(e,t,n){var r;void 0===n&&(n=!1);var i,o,a,s,u,l,c,d,f;return r=this.buildValidRange(),r=this.trimHiddenDays(r),n&&(d=e,e=null!=(f=r).start&&d=f.end?new Date(f.end.valueOf()-1):d),a=this.buildCurrentRangeInfo(e,t),s=/^(year|month|week|day)$/.test(a.unit),u=this.buildRenderRange(this.trimHiddenDays(a.range),a.unit,s),l=u=this.trimHiddenDays(u),this.options.showNonCurrentDates||(l=Ve(l,a.range)),i=J(this.options.minTime),o=J(this.options.maxTime),l=Ve(l=this.adjustActiveRange(l,i,o),r),c=Fe(a.range,r),{validRange:r,currentRange:a.range,currentRangeUnit:a.unit,isRangeAllDay:s,activeRange:l,renderRange:u,minTime:i,maxTime:o,isValid:c,dateIncrement:this.buildDateIncrement(a.duration)}},e.prototype.buildValidRange=function(){return this.getRangeOption("validRange",this.calendar.getNow())||{start:null,end:null}},e.prototype.buildCurrentRangeInfo=function(e,t){var n,r=this.viewSpec,i=this.dateEnv,o=null,a=null,s=null;return r.duration?(o=r.duration,a=r.durationUnit,s=this.buildRangeFromDuration(e,t,o,a)):(n=this.options.dayCount)?(a="day",s=this.buildRangeFromDayCount(e,t,n)):(s=this.buildCustomVisibleRange(e))?a=i.greatestWholeUnit(s.start,s.end).unit:(a=ne(o=this.getFallbackDuration()).unit,s=this.buildRangeFromDuration(e,t,o,a)),{duration:o,unit:a,range:s}},e.prototype.getFallbackDuration=function(){return J({day:1})},e.prototype.adjustActiveRange=function(e,t,n){var r=this.dateEnv,i=e.start,o=e.end;return this.viewSpec.class.prototype.usesMinMaxTime&&(ee(t)<0&&(i=B(i),i=r.add(i,t)),ee(n)>1&&(o=x(o=B(o),-1),o=r.add(o,n))),{start:i,end:o}},e.prototype.buildRangeFromDuration=function(e,t,n,r){var i,o,a,s,u,l=this.dateEnv,c=this.options.dateAlignment;function d(){a=l.startOf(e,c),s=l.add(a,n),u={start:a,end:s}}return c||((i=this.options.dateIncrement)?(o=J(i),c=te(o) ")),h=!1):((r=d[e])?(c=function(e){r.click&&r.click.call(E,e)},(v=o.getCustomButtonIconClass(r))||(v=o.getIconClass(e))||(g=r.text)):(s=l[e])?(n.viewsWithButtons.push(e),c=function(){a.changeView(e)},(g=s.buttonTextOverride)||(v=o.getIconClass(e))||(g=s.buttonTextDefault)):a[e]&&(c=function(){a[e]()},(g=f[e])||(v=o.getIconClass(e))||(g=p[e])),c&&(m=["fc-"+e+"-button",o.getClass("button")],g?(y=Ot(g),S=""):v&&(y="",S=' aria-label="'+e+'"'),(E=i('"+y+"")).addEventListener("click",c),u.push(E)))}),u.length>1){r=document.createElement("div");var v=o.getClass("buttonGroup");h&&v&&r.classList.add(v),s(r,u),c.appendChild(r)}else s(c,u)}),c},t.prototype.updateToday=function(e){this.toggleButtonEnabled("today",e)},t.prototype.updatePrev=function(e){this.toggleButtonEnabled("prev",e)},t.prototype.updateNext=function(e){this.toggleButtonEnabled("next",e)},t.prototype.updateTitle=function(e){v(this.el,"h2").forEach(function(t){t.innerText=e})},t.prototype.updateActiveButton=function(e){var t=this.theme.getClass("buttonActive");v(this.el,"button").forEach(function(n){e&&n.classList.contains("fc-"+e+"-button")?n.classList.add(t):n.classList.remove(t)})},t.prototype.toggleButtonEnabled=function(e,t){v(this.el,".fc-"+e+"-button").forEach(function(e){e.disabled=!t})},t}(fn),hr=function(e){function t(t,n){var i=e.call(this,t)||this;i._renderToolbars=qt(i.renderToolbars),i.buildViewPropTransformers=Ye(gr),i.el=n,u(n,i.contentEl=r("div",{className:"fc-view-container"}));for(var o=i.calendar,a=0,s=o.pluginSystem.hooks.viewContainerModifiers;a1?{year:"numeric",month:"short",day:"numeric"}:{year:"numeric",month:"long",day:"numeric"}}(e),t.titleRangeSeparator),{isEndExclusive:e.isRangeAllDay})}function gr(e){return e.map(function(e){return new e})}var yr=function(){function e(e){this.component=e.component}return e.prototype.destroy=function(){},e}();var mr={},Er=function(e){function t(t){var n=e.call(this,t)||this;n.handleSegClick=function(e,t){var r=n.component,i=ht(t);if(i&&r.isValidSegDownEl(e.target)){var o=p(e.target,".fc-has-url"),a=o?o.querySelector("a[href]").href:"";r.publiclyTrigger("eventClick",[{el:t,event:new ct(r.calendar,i.eventRange.def,i.eventRange.instance),jsEvent:e,view:r.view}]),a&&!e.defaultPrevented&&(window.location.href=a)}};var r=t.component;return n.destroy=O(r.el,"click",r.fgSegSelector+","+r.bgSegSelector,n.handleSegClick),n}return Ee(t,e),t}(yr),Sr=function(e){function t(t){var n=e.call(this,t)||this;n.handleEventElRemove=function(e){e===n.currentSegEl&&n.handleSegLeave(null,n.currentSegEl)},n.handleSegEnter=function(e,t){ht(t)&&(t.classList.add("fc-allow-mouse-resize"),n.currentSegEl=t,n.triggerEvent("eventMouseEnter",e,t))},n.handleSegLeave=function(e,t){n.currentSegEl&&(t.classList.remove("fc-allow-mouse-resize"),n.currentSegEl=null,n.triggerEvent("eventMouseLeave",e,t))};var r,i,o,a,s,u=t.component;return n.removeHoverListeners=(r=u.el,i=u.fgSegSelector+","+u.bgSegSelector,o=n.handleSegEnter,a=n.handleSegLeave,O(r,"mouseover",i,function(e,t){if(t!==s){s=t,o(e,t);var n=function(e){s=null,a(e,t),t.removeEventListener("mouseleave",n)};t.addEventListener("mouseleave",n)}})),u.calendar.on("eventElRemove",n.handleEventElRemove),n}return Ee(t,e),t.prototype.destroy=function(){this.removeHoverListeners(),this.component.calendar.off("eventElRemove",this.handleEventElRemove)},t.prototype.triggerEvent=function(e,t,n){var r=this.component,i=ht(n);t&&!r.isValidSegDownEl(t.target)||r.publiclyTrigger(e,[{el:n,event:new ct(this.component.calendar,i.eventRange.def,i.eventRange.instance),jsEvent:t,view:r.view}])},t}(yr),br=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return Ee(t,e),t}(cn);br.prototype.classes={widget:"fc-unthemed",widgetHeader:"fc-widget-header",widgetContent:"fc-widget-content",buttonGroup:"fc-button-group",button:"fc-button fc-button-primary",buttonActive:"fc-button-active",popoverHeader:"fc-widget-header",popoverContent:"fc-widget-content",headerRow:"fc-widget-header",dayRow:"fc-widget-content",listView:"fc-widget-content"},br.prototype.baseIconClass="fc-icon",br.prototype.iconClasses={close:"fc-icon-x",prev:"fc-icon-chevron-left",next:"fc-icon-chevron-right",prevYear:"fc-icon-chevrons-left",nextYear:"fc-icon-chevrons-right"},br.prototype.iconOverrideOption="buttonIcons",br.prototype.iconOverrideCustomButtonOption="icon",br.prototype.iconOverridePrefix="fc-icon-";var Dr=function(){function e(e,t){var n=this;this.parseRawLocales=Ye(On),this.buildLocale=Ye(_n),this.buildDateEnv=Ye(Tr),this.buildTheme=Ye(wr),this.buildEventUiSingleBase=Ye(this._buildEventUiSingleBase),this.buildSelectionConfig=Ye(this._buildSelectionConfig),this.buildEventUiBySource=qe(Ir,Me),this.buildEventUiBases=Ye(Cr),this.interactionsStore={},this.actionQueue=[],this.isReducing=!1,this.needsRerender=!1,this.needsFullRerender=!1,this.isRendering=!1,this.renderingPauseDepth=0,this.buildDelayedRerender=Ye(Rr),this.afterSizingTriggers={},this.isViewUpdated=!1,this.isDatesUpdated=!1,this.isEventsUpdated=!1,this.el=e,this.optionsManager=new xn(t||{}),this.pluginSystem=new gn,this.addPluginInputs(this.optionsManager.computed.plugins||[]),this.handleOptions(this.optionsManager.computed),this.publiclyTrigger("_init"),this.hydrate(),this.calendarInteractions=this.pluginSystem.hooks.calendarInteractions.map(function(e){return new e(n)})}return e.prototype.addPluginInputs=function(e){for(var t=function(e){for(var t=[],n=0,r=e;n"+this.fillSegTag+">"},e.prototype.detachSegs=function(e,t){var n=this.containerElsByType[e];n&&(n.forEach(c),delete this.containerElsByType[e])},e.prototype.computeSizes=function(e){for(var t in this.segsByType)(e||this.dirtySizeFlags[t])&&this.computeSegSizes(this.segsByType[t])},e.prototype.assignSizes=function(e){for(var t in this.segsByType)(e||this.dirtySizeFlags[t])&&this.assignSegSizes(this.segsByType[t]);this.dirtySizeFlags={}},e.prototype.computeSegSizes=function(e){},e.prototype.assignSegSizes=function(e){},e}(),Pr=function(e){this.timeZoneName=e},xr=function(){function e(e){this.emitter=new tn}return e.prototype.destroy=function(){},e.prototype.setMirrorIsVisible=function(e){},e.prototype.setMirrorNeedsRevert=function(e){},e.prototype.setAutoScrollEnabled=function(e){},e}();function Hr(e){var t=_n(e.locale||"en",On([]).map);return e=Se({timeZone:Rn.timeZone,calendarSystem:"gregory"},e,{locale:t}),new Bn(e)}var Nr={startTime:J,duration:J,create:Boolean,sourceId:String},zr={create:!0};function Ur(e,t){return!e||t>10?{weekday:"short"}:t>1?{weekday:"short",month:"numeric",day:"numeric",omitCommas:!0}:{weekday:"long"}}function Lr(e,t,n,r,i,o,a,s){var u,l=o.view,c=o.dateEnv,d=o.theme,f=o.options,p=Ze(t.activeRange,e),h=["fc-day-header",d.getClass("widgetHeader")];return u="function"==typeof f.columnHeaderHtml?f.columnHeaderHtml(c.toDate(e)):"function"==typeof f.columnHeaderText?Ot(f.columnHeaderText(c.toDate(e))):Ot(c.format(e,i)),n?h=h.concat(Qt(e,t,o,!0)):h.push("fc-"+P[e.getUTCDay()]),'1?' colspan="'+a+'"':"")+(s?" "+s:"")+">"+(p?Kt(l,{date:e,forceOff:!n||1===r},u):u)+""}var Br=function(e){function t(t,n){var r=e.call(this,t)||this;return n.innerHTML="",n.appendChild(r.el=i('

')),r.thead=r.el.querySelector("thead"),r}return Ee(t,e),t.prototype.destroy=function(){c(this.el)},t.prototype.render=function(e){var t=e.dates,n=e.datesRepDistinctDays,r=[];e.renderIntroHtml&&r.push(e.renderIntroHtml());for(var i=ot(this.opt("columnHeaderFormat")||Ur(n,t.length)),o=0,a=t;o"+r.join("")+""},t}(fn),Vr=function(){function e(e,t){for(var n=e.start,r=e.end,i=[],o=[],a=-1;n=t.length?t[t.length-1]+1:t[n]},e}(),Ar=function(){function e(e,t){var n,r,i,o=e.dates;if(t){for(r=o[0].getUTCDay(),n=1;n1},e.isPropsEqual=Me,e.isPropsValid=Rt,e.isSingleDay=function(e){return 0===e.years&&0===e.months&&1===e.days&&0===e.milliseconds},e.isValidDate=Y,e.listenBySelector=O,e.mapHash=Re,e.matchCellWidths=function(e){var t=0;return e.forEach(function(e){var n=e.firstChild;if(n instanceof HTMLElement){var r=n.getBoundingClientRect().width;r>t&&(t=r)}}),t++,e.forEach(function(e){e.style.width=t+"px"}),t},e.memoize=Ye,e.memoizeOutput=qe,e.memoizeRendering=qt,e.mergeEventStores=Ne,e.multiplyDuration=function(e,t){return{years:e.years*t,months:e.months*t,days:e.days*t,milliseconds:e.milliseconds*t}},e.padStart=le,e.parseBusinessHours=Yt,e.parseDragMeta=function(e){var t={},n=he(e,Nr,zr,t);return n.leftoverProps=t,n},e.parseEventDef=Wt,e.parseFieldSpecs=ie,e.parseMarker=Ln,e.pointInsideRect=function(e,t){return e.left>=t.left&&e.left=t.top&&e.top

/*!
FullCalendar Timeline Plugin v4.3.0
Docs & License: https://fullcalendar.io/scheduler
(c) 2019 Adam Shaw
*/

import { htmlToElement, forceClassName, applyStyle, debounce, preventDefault, ScrollComponent, EmitterMixin, removeElement, createElement, computeEdges, asRoughMs, isSingleDay, getDayClasses, findElements, Component, PositionCache, findChildren, isInt, multiplyDuration, config, createFormatter, greatestDurationDenominator, createDuration, wholeDivideDurations, addDays, startOfDay, computeVisibleDayRange, asRoughMinutes, padStart, asRoughSeconds, diffWholeDays, buildGotoAnchorHtml, htmlEscape, translateRect, rangeContainsMarker, cssToStr, computeHeightAndMargins, applyStyleProp, FgEventRenderer, FillRenderer, memoizeRendering, DateComponent, intersectRanges, addMs, Slicer, View, createPlugin } from '@fullcalendar/core';

/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0

THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.

See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
/* global Reflect, Promise */

function __extends(d, b) {
    extendStatics(d, b);
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}

/*
A rectangular area of content that lives within a Scroller.
Can have "gutters", areas of dead spacing around the perimeter.
Also very useful for forcing a width, which a Scroller cannot do alone.
Has a content area that lives above a background area.
*/
var ScrollerCanvas = /** @class */ (function () {
    function ScrollerCanvas() {
        this.gutters = {};
        this.el = htmlToElement("

");
        this.contentEl = this.el.querySelector('.fc-content');
        this.bgEl = this.el.querySelector('.fc-bg');
    }
    /*
    If falsy, resets all the gutters to 0
    */
    ScrollerCanvas.prototype.setGutters = function (gutters) {
        if (!gutters) {
            this.gutters = {};
        }
        else {
            __assign(this.gutters, gutters);
        }
        this.updateSize();
    };
    ScrollerCanvas.prototype.setWidth = function (width) {
        this.width = width;
        this.updateSize();
    };
    ScrollerCanvas.prototype.setMinWidth = function (minWidth) {
        this.minWidth = minWidth;
        this.updateSize();
    };
    ScrollerCanvas.prototype.clearWidth = function () {
        this.width = null;
        this.minWidth = null;
        this.updateSize();
    };
    ScrollerCanvas.prototype.updateSize = function () {
        var _a = this, gutters = _a.gutters, el = _a.el;
        // is border-box (width includes padding)
        forceClassName(el, 'fc-gutter-left', gutters.left);
        forceClassName(el, 'fc-gutter-right', gutters.right);
        forceClassName(el, 'fc-gutter-top', gutters.top);
        forceClassName(el, 'fc-gutter-bottom', gutters.bottom);
        applyStyle(el, {
            paddingLeft: gutters.left || '',
            paddingRight: gutters.right || '',
            paddingTop: gutters.top || '',
            paddingBottom: gutters.bottom || '',
            width: (this.width != null) ?
                this.width + (gutters.left || 0) + (gutters.right || 0) :
                '',
            minWidth: (this.minWidth != null) ?
                this.minWidth + (gutters.left || 0) + (gutters.right || 0) :
                ''
        });
        applyStyle(this.bgEl, {
            left: gutters.left || '',
            right: gutters.right || '',
            top: gutters.top || '',
            bottom: gutters.bottom || ''
        });
    };
    return ScrollerCanvas;
}());

A

");
    document.body.appendChild(el);
    var system;
    if (el.scrollLeft > 0) {
        system = 'positive';
    }
    else {
        el.scrollLeft = 1;
        if (el.scrollLeft > 0) {
            system = 'reverse';
        }
        else {
            system = 'negative';
        }
    }
    removeElement(el);
    return system;
}

/*
A Scroller, but with a wrapping div that allows "clipping" away of native scrollbars,
giving the appearance that there are no scrollbars.
*/
var ClippedScroller = /** @class */ (function () {
    /*
    Received overflows can be set to 'clipped', meaning scrollbars shouldn't be visible
    to the user, but the area should still scroll.
    */
    function ClippedScroller(overflowX, overflowY, parentEl) {
        this.isHScrollbarsClipped = false;
        this.isVScrollbarsClipped = false;
        if (overflowX === 'clipped-scroll') {
            overflowX = 'scroll';
            this.isHScrollbarsClipped = true;
        }
        if (overflowY === 'clipped-scroll') {
            overflowY = 'scroll';
            this.isVScrollbarsClipped = true;
        }
        this.enhancedScroll = new EnhancedScroller(overflowX, overflowY);
        parentEl.appendChild(this.el = createElement('div', {
            className: 'fc-scroller-clip'
        }));
        this.el.appendChild(this.enhancedScroll.el);
    }
    ClippedScroller.prototype.destroy = function () {
        removeElement(this.el);
    };
    ClippedScroller.prototype.updateSize = function () {
        var enhancedScroll = this.enhancedScroll;
        var scrollEl = enhancedScroll.el;
        var edges = computeEdges(scrollEl);
        var cssProps = { marginLeft: 0, marginRight: 0, marginTop: 0, marginBottom: 0 };
        // give the inner scrolling div negative margins so that its scrollbars
        // are nudged outside of the bounding box of the wrapper, which is overflow:hidden
        if (this.isVScrollbarsClipped) {
            cssProps.marginLeft = -edges.scrollbarLeft;
            cssProps.marginRight = -edges.scrollbarRight;
        }
        if (this.isHScrollbarsClipped) {
            cssProps.marginBottom = -edges.scrollbarBottom;
        }
        applyStyle(scrollEl, cssProps);
        // if we are attempting to hide the scrollbars offscreen, OSX/iOS will still
        // display the floating scrollbars. attach a className to force-hide them.
        if ((this.isHScrollbarsClipped || (enhancedScroll.overflowX === 'hidden')) && // should never show?
            (this.isVScrollbarsClipped || (enhancedScroll.overflowY === 'hidden')) && // should never show?
            !( // doesn't have any scrollbar mass
            edges.scrollbarLeft ||
                edges.scrollbarRight ||
                edges.scrollbarBottom)) {
            scrollEl.classList.add('fc-no-scrollbars');
        }
        else {
            scrollEl.classList.remove('fc-no-scrollbars');
        }
    };
    ClippedScroller.prototype.setHeight = function (height) {
        this.enhancedScroll.setHeight(height);
    };
    /*
    Accounts for 'clipped' scrollbars
    */
    ClippedScroller.prototype.getScrollbarWidths = function () {
        var widths = this.enhancedScroll.getScrollbarWidths();
        if (this.isVScrollbarsClipped) {
            widths.left = 0;
            widths.right = 0;
        }
        if (this.isHScrollbarsClipped) {
            widths.bottom = 0;
        }
        return widths;
    };
    return ClippedScroller;
}());

' +
cell.spanHtml +
'

' +
                        '';
            }
            html += '';
        }
        html += '';
        this.tableEl.innerHTML = html; // TODO: does this work cross-browser?
        this.slatColEls = findElements(this.tableEl, 'col');
        this.innerEls = findElements(this.tableEl.querySelector('tr:last-child'), // compound selector won't work because of query-root problem
        'th .fc-cell-text');
        findElements(this.tableEl.querySelectorAll('tr:not(:last-child)'), // compound selector won't work because of query-root problem
        'th .fc-cell-text').forEach(function (innerEl) {
            innerEl.classList.add('fc-sticky');
        });
    };
    return TimelineHeader;
}(Component));

';
    };
    TimelineSlats.prototype.updateSize = function () {
        this.outerCoordCache.build();
        this.innerCoordCache.build();
    };
    TimelineSlats.prototype.positionToHit = function (leftPosition) {
        var outerCoordCache = this.outerCoordCache;
        var tDateProfile = this.props.tDateProfile;
        var slatIndex = outerCoordCache.leftToIndex(leftPosition);
        if (slatIndex != null) {
            // somewhat similar to what TimeGrid does. consolidate?
            var slatWidth = outerCoordCache.getWidth(slatIndex);
            var partial = this.isRtl ?
                (outerCoordCache.rights[slatIndex] - leftPosition) / slatWidth :
                (leftPosition - outerCoordCache.lefts[slatIndex]) / slatWidth;
            var localSnapIndex = Math.floor(partial * tDateProfile.snapsPerSlot);
            var start = this.dateEnv.add(tDateProfile.slotDates[slatIndex], multiplyDuration(tDateProfile.snapDuration, localSnapIndex));
            var end = this.dateEnv.add(start, tDateProfile.snapDuration);
            return {
                dateSpan: {
                    range: { start: start, end: end },
                    allDay: !this.props.tDateProfile.isTimeScale
                },
                dayEl: this.slatColEls[slatIndex],
                left: outerCoordCache.lefts[slatIndex],
                right: outerCoordCache.rights[slatIndex]
            };
        }
        return null;
    };
    return TimelineSlats;
}(Component));

');
    var val = el.style.position;
    if (val.indexOf('sticky') !== -1) {
        return val;
    }
    else {
        return null;
    }
}

var TimelineLaneEventRenderer = /** @class */ (function (_super) {
    __extends(TimelineLaneEventRenderer, _super);
    function TimelineLaneEventRenderer(context, masterContainerEl, timeAxis) {
        var _this = _super.call(this, context) || this;
        _this.masterContainerEl = masterContainerEl;
        _this.timeAxis = timeAxis;
        return _this;
    }
    TimelineLaneEventRenderer.prototype.renderSegHtml = function (seg, mirrorInfo) {
        var view = this.context.view;
        var eventRange = seg.eventRange;
        var eventDef = eventRange.def;
        var eventUi = eventRange.ui;
        var isDraggable = view.computeEventDraggable(eventDef, eventUi);
        var isResizableFromStart = seg.isStart && view.computeEventStartResizable(eventDef, eventUi);
        var isResizableFromEnd = seg.isEnd && view.computeEventEndResizable(eventDef, eventUi);
        var classes = this.getSegClasses(seg, isDraggable, isResizableFromStart || isResizableFromEnd, mirrorInfo);
        classes.unshift('fc-timeline-event', 'fc-h-event');
        var timeText = this.getTimeText(eventRange);
        return '' +
            (timeText ?
                '' +
                    '' +
                    htmlEscape(timeText) +
                    '' +
                    ''
                :
                    '') +
            '' +
            '' +
            (eventDef.title ? htmlEscape(eventDef.title) : ' ') +
            '' +
            '' +
            (isResizableFromStart ?
                '

' :
                '') +
            (isResizableFromEnd ?
                '

' :
                '') +
            '';
    };
    TimelineLaneEventRenderer.prototype.computeDisplayEventTime = function () {
        return !this.timeAxis.tDateProfile.isTimeScale; // because times should be obvious via axis
    };
    TimelineLaneEventRenderer.prototype.computeDisplayEventEnd = function () {
        return false;
    };
    // Computes a default event time formatting string if `timeFormat` is not explicitly defined
    TimelineLaneEventRenderer.prototype.computeEventTimeFormat = function () {
        return {
            hour: 'numeric',
            minute: '2-digit',
            omitZeroMinute: true,
            meridiem: 'narrow'
        };
    };
    TimelineLaneEventRenderer.prototype.attachSegs = function (segs, mirrorInfo) {
        if (!this.el && this.masterContainerEl) {
            this.el = createElement('div', { className: 'fc-event-container' });
            if (mirrorInfo) {
                this.el.classList.add('fc-mirror-container');
            }
            this.masterContainerEl.appendChild(this.el);
        }
        if (this.el) {
            for (var _i = 0, segs_1 = segs; _i < segs_1.length; _i++) {
                var seg = segs_1[_i];
                this.el.appendChild(seg.el);
            }
        }
    };
    TimelineLaneEventRenderer.prototype.detachSegs = function (segs) {
        for (var _i = 0, segs_2 = segs; _i < segs_2.length; _i++) {
            var seg = segs_2[_i];
            removeElement(seg.el);
        }
    };
    // computes AND assigns (assigns the left/right at least). bad
    TimelineLaneEventRenderer.prototype.computeSegSizes = function (segs) {
        var timeAxis = this.timeAxis;
        for (var _i = 0, segs_3 = segs; _i < segs_3.length; _i++) {
            var seg = segs_3[_i];
            var coords = timeAxis.rangeToCoords(seg); // works because Seg has start/end
            applyStyle(seg.el, {
                left: (seg.left = coords.left),
                right: -(seg.right = coords.right)
            });
        }
    };
    TimelineLaneEventRenderer.prototype.assignSegSizes = function (segs) {
        if (!this.el) {
            return;
        }
        // compute seg verticals
        for (var _i = 0, segs_4 = segs; _i < segs_4.length; _i++) {
            var seg = segs_4[_i];
            seg.height = computeHeightAndMargins(seg.el);
        }
        this.buildSegLevels(segs); // populates above/below props for computeOffsetForSegs
        var totalHeight = computeOffsetForSegs(segs); // also assigns seg.top
        applyStyleProp(this.el, 'height', totalHeight);
        // assign seg verticals
        for (var _a = 0, segs_5 = segs; _a < segs_5.length; _a++) {
            var seg = segs_5[_a];
            applyStyleProp(seg.el, 'top', seg.top);
        }
    };
    TimelineLaneEventRenderer.prototype.buildSegLevels = function (segs) {
        var segLevels = [];
        segs = this.sortEventSegs(segs);
        for (var _i = 0, segs_6 = segs; _i < segs_6.length; _i++) {
            var unplacedSeg = segs_6[_i];
            unplacedSeg.above = [];
            // determine the first level with no collisions
            var level = 0; // level index
            while (level < segLevels.length) {
                var isLevelCollision = false;
                // determine collisions
                for (var _a = 0, _b = segLevels[level]; _a < _b.length; _a++) {
                    var placedSeg = _b[_a];
                    if (timeRowSegsCollide(unplacedSeg, placedSeg)) {
                        unplacedSeg.above.push(placedSeg);
                        isLevelCollision = true;
                    }
                }
                if (isLevelCollision) {
                    level += 1;
                }
                else {
                    break;
                }
            }
            // insert into the first non-colliding level. create if necessary
            (segLevels[level] || (segLevels[level] = []))
                .push(unplacedSeg);
            // record possible colliding segments below (TODO: automated test for this)
            level += 1;
            while (level < segLevels.length) {
                for (var _c = 0, _d = segLevels[level]; _c < _d.length; _c++) {
                    var belowSeg = _d[_c];
                    if (timeRowSegsCollide(unplacedSeg, belowSeg)) {
                        belowSeg.above.push(unplacedSeg);
                    }
                }
                level += 1;
            }
        }
        return segLevels;
    };
    return TimelineLaneEventRenderer;
}(FgEventRenderer));
function computeOffsetForSegs(segs) {
    var max = 0;
    for (var _i = 0, segs_7 = segs; _i < segs_7.length; _i++) {
        var seg = segs_7[_i];
        max = Math.max(max, computeOffsetForSeg(seg));
    }
    return max;
}
function computeOffsetForSeg(seg) {
    if ((seg.top == null)) {
        seg.top = computeOffsetForSegs(seg.above);
    }
    return seg.top + seg.height;
}
function timeRowSegsCollide(seg0, seg1) {
    return (seg0.left < seg1.right) && (seg0.right > seg1.left);
}

var main = createPlugin({
    defaultView: 'timelineDay',
    views: {
        timeline: {
            class: TimelineView,
            eventResizableFromStart: true // how is this consumed for TimelineView tho?
        },
        timelineDay: {
            type: 'timeline',
            duration: { days: 1 }
        },
        timelineWeek: {
            type: 'timeline',
            duration: { weeks: 1 }
        },
        timelineMonth: {
            type: 'timeline',
            duration: { months: 1 }
        },
        timelineYear: {
            type: 'timeline',
            duration: { years: 1 }
        }
    }
});

export default main;
export { HeaderBodyLayout, ScrollJoiner, StickyScroller, TimeAxis, TimelineLane, TimelineView };

/*!
FullCalendar Timeline Plugin v4.3.0
Docs & License: https://fullcalendar.io/scheduler
(c) 2019 Adam Shaw
*/

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@fullcalendar/core')) :
    typeof define === 'function' && define.amd ? define(['exports', '@fullcalendar/core'], factory) :
    (global = global || self, factory(global.FullCalendarTimeline = {}, global.FullCalendar));
}(this, function (exports, core) { 'use strict';

    /*! *****************************************************************************
    Copyright (c) Microsoft Corporation. All rights reserved.
    Licensed under the Apache License, Version 2.0 (the "License"); you may not use
    this file except in compliance with the License. You may obtain a copy of the
    License at http://www.apache.org/licenses/LICENSE-2.0

    THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
    KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
    WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
    MERCHANTABLITY OR NON-INFRINGEMENT.

    See the Apache Version 2.0 License for specific language governing permissions
    and limitations under the License.
    ***************************************************************************** */
    /* global Reflect, Promise */

    function __extends(d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    }

    /*
    A rectangular area of content that lives within a Scroller.
    Can have "gutters", areas of dead spacing around the perimeter.
    Also very useful for forcing a width, which a Scroller cannot do alone.
    Has a content area that lives above a background area.
    */
    var ScrollerCanvas = /** @class */ (function () {
        function ScrollerCanvas() {
            this.gutters = {};
            this.el = core.htmlToElement("

");
            this.contentEl = this.el.querySelector('.fc-content');
            this.bgEl = this.el.querySelector('.fc-bg');
        }
        /*
        If falsy, resets all the gutters to 0
        */
        ScrollerCanvas.prototype.setGutters = function (gutters) {
            if (!gutters) {
                this.gutters = {};
            }
            else {
                __assign(this.gutters, gutters);
            }
            this.updateSize();
        };
        ScrollerCanvas.prototype.setWidth = function (width) {
            this.width = width;
            this.updateSize();
        };
        ScrollerCanvas.prototype.setMinWidth = function (minWidth) {
            this.minWidth = minWidth;
            this.updateSize();
        };
        ScrollerCanvas.prototype.clearWidth = function () {
            this.width = null;
            this.minWidth = null;
            this.updateSize();
        };
        ScrollerCanvas.prototype.updateSize = function () {
            var _a = this, gutters = _a.gutters, el = _a.el;
            // is border-box (width includes padding)
            core.forceClassName(el, 'fc-gutter-left', gutters.left);
            core.forceClassName(el, 'fc-gutter-right', gutters.right);
            core.forceClassName(el, 'fc-gutter-top', gutters.top);
            core.forceClassName(el, 'fc-gutter-bottom', gutters.bottom);
            core.applyStyle(el, {
                paddingLeft: gutters.left || '',
                paddingRight: gutters.right || '',
                paddingTop: gutters.top || '',
                paddingBottom: gutters.bottom || '',
                width: (this.width != null) ?
                    this.width + (gutters.left || 0) + (gutters.right || 0) :
                    '',
                minWidth: (this.minWidth != null) ?
                    this.minWidth + (gutters.left || 0) + (gutters.right || 0) :
                    ''
            });
            core.applyStyle(this.bgEl, {
                left: gutters.left || '',
                right: gutters.right || '',
                top: gutters.top || '',
                bottom: gutters.bottom || ''
            });
        };
        return ScrollerCanvas;
    }());

A

");
        document.body.appendChild(el);
        var system;
        if (el.scrollLeft > 0) {
            system = 'positive';
        }
        else {
            el.scrollLeft = 1;
            if (el.scrollLeft > 0) {
                system = 'reverse';
            }
            else {
                system = 'negative';
            }
        }
        core.removeElement(el);
        return system;
    }

    /*
    A Scroller, but with a wrapping div that allows "clipping" away of native scrollbars,
    giving the appearance that there are no scrollbars.
    */
    var ClippedScroller = /** @class */ (function () {
        /*
        Received overflows can be set to 'clipped', meaning scrollbars shouldn't be visible
        to the user, but the area should still scroll.
        */
        function ClippedScroller(overflowX, overflowY, parentEl) {
            this.isHScrollbarsClipped = false;
            this.isVScrollbarsClipped = false;
            if (overflowX === 'clipped-scroll') {
                overflowX = 'scroll';
                this.isHScrollbarsClipped = true;
            }
            if (overflowY === 'clipped-scroll') {
                overflowY = 'scroll';
                this.isVScrollbarsClipped = true;
            }
            this.enhancedScroll = new EnhancedScroller(overflowX, overflowY);
            parentEl.appendChild(this.el = core.createElement('div', {
                className: 'fc-scroller-clip'
            }));
            this.el.appendChild(this.enhancedScroll.el);
        }
        ClippedScroller.prototype.destroy = function () {
            core.removeElement(this.el);
        };
        ClippedScroller.prototype.updateSize = function () {
            var enhancedScroll = this.enhancedScroll;
            var scrollEl = enhancedScroll.el;
            var edges = core.computeEdges(scrollEl);
            var cssProps = { marginLeft: 0, marginRight: 0, marginTop: 0, marginBottom: 0 };
            // give the inner scrolling div negative margins so that its scrollbars
            // are nudged outside of the bounding box of the wrapper, which is overflow:hidden
            if (this.isVScrollbarsClipped) {
                cssProps.marginLeft = -edges.scrollbarLeft;
                cssProps.marginRight = -edges.scrollbarRight;
            }
            if (this.isHScrollbarsClipped) {
                cssProps.marginBottom = -edges.scrollbarBottom;
            }
            core.applyStyle(scrollEl, cssProps);
            // if we are attempting to hide the scrollbars offscreen, OSX/iOS will still
            // display the floating scrollbars. attach a className to force-hide them.
            if ((this.isHScrollbarsClipped || (enhancedScroll.overflowX === 'hidden')) && // should never show?
                (this.isVScrollbarsClipped || (enhancedScroll.overflowY === 'hidden')) && // should never show?
                !( // doesn't have any scrollbar mass
                edges.scrollbarLeft ||
                    edges.scrollbarRight ||
                    edges.scrollbarBottom)) {
                scrollEl.classList.add('fc-no-scrollbars');
            }
            else {
                scrollEl.classList.remove('fc-no-scrollbars');
            }
        };
        ClippedScroller.prototype.setHeight = function (height) {
            this.enhancedScroll.setHeight(height);
        };
        /*
        Accounts for 'clipped' scrollbars
        */
        ClippedScroller.prototype.getScrollbarWidths = function () {
            var widths = this.enhancedScroll.getScrollbarWidths();
            if (this.isVScrollbarsClipped) {
                widths.left = 0;
                widths.right = 0;
            }
            if (this.isHScrollbarsClipped) {
                widths.bottom = 0;
            }
            return widths;
        };
        return ClippedScroller;
    }());

' +
cell.spanHtml +
'

' +
                            '';
                }
                html += '';
            }
            html += '';
            this.tableEl.innerHTML = html; // TODO: does this work cross-browser?
            this.slatColEls = core.findElements(this.tableEl, 'col');
            this.innerEls = core.findElements(this.tableEl.querySelector('tr:last-child'), // compound selector won't work because of query-root problem
            'th .fc-cell-text');
            core.findElements(this.tableEl.querySelectorAll('tr:not(:last-child)'), // compound selector won't work because of query-root problem
            'th .fc-cell-text').forEach(function (innerEl) {
                innerEl.classList.add('fc-sticky');
            });
        };
        return TimelineHeader;
    }(core.Component));

';
        };
        TimelineSlats.prototype.updateSize = function () {
            this.outerCoordCache.build();
            this.innerCoordCache.build();
        };
        TimelineSlats.prototype.positionToHit = function (leftPosition) {
            var outerCoordCache = this.outerCoordCache;
            var tDateProfile = this.props.tDateProfile;
            var slatIndex = outerCoordCache.leftToIndex(leftPosition);
            if (slatIndex != null) {
                // somewhat similar to what TimeGrid does. consolidate?
                var slatWidth = outerCoordCache.getWidth(slatIndex);
                var partial = this.isRtl ?
                    (outerCoordCache.rights[slatIndex] - leftPosition) / slatWidth :
                    (leftPosition - outerCoordCache.lefts[slatIndex]) / slatWidth;
                var localSnapIndex = Math.floor(partial * tDateProfile.snapsPerSlot);
                var start = this.dateEnv.add(tDateProfile.slotDates[slatIndex], core.multiplyDuration(tDateProfile.snapDuration, localSnapIndex));
                var end = this.dateEnv.add(start, tDateProfile.snapDuration);
                return {
                    dateSpan: {
                        range: { start: start, end: end },
                        allDay: !this.props.tDateProfile.isTimeScale
                    },
                    dayEl: this.slatColEls[slatIndex],
                    left: outerCoordCache.lefts[slatIndex],
                    right: outerCoordCache.rights[slatIndex]
                };
            }
            return null;
        };
        return TimelineSlats;
    }(core.Component));

');
        var val = el.style.position;
        if (val.indexOf('sticky') !== -1) {
            return val;
        }
        else {
            return null;
        }
    }

    var TimelineLaneEventRenderer = /** @class */ (function (_super) {
        __extends(TimelineLaneEventRenderer, _super);
        function TimelineLaneEventRenderer(context, masterContainerEl, timeAxis) {
            var _this = _super.call(this, context) || this;
            _this.masterContainerEl = masterContainerEl;
            _this.timeAxis = timeAxis;
            return _this;
        }
        TimelineLaneEventRenderer.prototype.renderSegHtml = function (seg, mirrorInfo) {
            var view = this.context.view;
            var eventRange = seg.eventRange;
            var eventDef = eventRange.def;
            var eventUi = eventRange.ui;
            var isDraggable = view.computeEventDraggable(eventDef, eventUi);
            var isResizableFromStart = seg.isStart && view.computeEventStartResizable(eventDef, eventUi);
            var isResizableFromEnd = seg.isEnd && view.computeEventEndResizable(eventDef, eventUi);
            var classes = this.getSegClasses(seg, isDraggable, isResizableFromStart || isResizableFromEnd, mirrorInfo);
            classes.unshift('fc-timeline-event', 'fc-h-event');
            var timeText = this.getTimeText(eventRange);
            return '' +
                (timeText ?
                    '' +
                        '' +
                        core.htmlEscape(timeText) +
                        '' +
                        ''
                    :
                        '') +
                '' +
                '' +
                (eventDef.title ? core.htmlEscape(eventDef.title) : ' ') +
                '' +
                '' +
                (isResizableFromStart ?
                    '

' :
                    '') +
                (isResizableFromEnd ?
                    '

' :
                    '') +
                '';
        };
        TimelineLaneEventRenderer.prototype.computeDisplayEventTime = function () {
            return !this.timeAxis.tDateProfile.isTimeScale; // because times should be obvious via axis
        };
        TimelineLaneEventRenderer.prototype.computeDisplayEventEnd = function () {
            return false;
        };
        // Computes a default event time formatting string if `timeFormat` is not explicitly defined
        TimelineLaneEventRenderer.prototype.computeEventTimeFormat = function () {
            return {
                hour: 'numeric',
                minute: '2-digit',
                omitZeroMinute: true,
                meridiem: 'narrow'
            };
        };
        TimelineLaneEventRenderer.prototype.attachSegs = function (segs, mirrorInfo) {
            if (!this.el && this.masterContainerEl) {
                this.el = core.createElement('div', { className: 'fc-event-container' });
                if (mirrorInfo) {
                    this.el.classList.add('fc-mirror-container');
                }
                this.masterContainerEl.appendChild(this.el);
            }
            if (this.el) {
                for (var _i = 0, segs_1 = segs; _i < segs_1.length; _i++) {
                    var seg = segs_1[_i];
                    this.el.appendChild(seg.el);
                }
            }
        };
        TimelineLaneEventRenderer.prototype.detachSegs = function (segs) {
            for (var _i = 0, segs_2 = segs; _i < segs_2.length; _i++) {
                var seg = segs_2[_i];
                core.removeElement(seg.el);
            }
        };
        // computes AND assigns (assigns the left/right at least). bad
        TimelineLaneEventRenderer.prototype.computeSegSizes = function (segs) {
            var timeAxis = this.timeAxis;
            for (var _i = 0, segs_3 = segs; _i < segs_3.length; _i++) {
                var seg = segs_3[_i];
                var coords = timeAxis.rangeToCoords(seg); // works because Seg has start/end
                core.applyStyle(seg.el, {
                    left: (seg.left = coords.left),
                    right: -(seg.right = coords.right)
                });
            }
        };
        TimelineLaneEventRenderer.prototype.assignSegSizes = function (segs) {
            if (!this.el) {
                return;
            }
            // compute seg verticals
            for (var _i = 0, segs_4 = segs; _i < segs_4.length; _i++) {
                var seg = segs_4[_i];
                seg.height = core.computeHeightAndMargins(seg.el);
            }
            this.buildSegLevels(segs); // populates above/below props for computeOffsetForSegs
            var totalHeight = computeOffsetForSegs(segs); // also assigns seg.top
            core.applyStyleProp(this.el, 'height', totalHeight);
            // assign seg verticals
            for (var _a = 0, segs_5 = segs; _a < segs_5.length; _a++) {
                var seg = segs_5[_a];
                core.applyStyleProp(seg.el, 'top', seg.top);
            }
        };
        TimelineLaneEventRenderer.prototype.buildSegLevels = function (segs) {
            var segLevels = [];
            segs = this.sortEventSegs(segs);
            for (var _i = 0, segs_6 = segs; _i < segs_6.length; _i++) {
                var unplacedSeg = segs_6[_i];
                unplacedSeg.above = [];
                // determine the first level with no collisions
                var level = 0; // level index
                while (level < segLevels.length) {
                    var isLevelCollision = false;
                    // determine collisions
                    for (var _a = 0, _b = segLevels[level]; _a < _b.length; _a++) {
                        var placedSeg = _b[_a];
                        if (timeRowSegsCollide(unplacedSeg, placedSeg)) {
                            unplacedSeg.above.push(placedSeg);
                            isLevelCollision = true;
                        }
                    }
                    if (isLevelCollision) {
                        level += 1;
                    }
                    else {
                        break;
                    }
                }
                // insert into the first non-colliding level. create if necessary
                (segLevels[level] || (segLevels[level] = []))
                    .push(unplacedSeg);
                // record possible colliding segments below (TODO: automated test for this)
                level += 1;
                while (level < segLevels.length) {
                    for (var _c = 0, _d = segLevels[level]; _c < _d.length; _c++) {
                        var belowSeg = _d[_c];
                        if (timeRowSegsCollide(unplacedSeg, belowSeg)) {
                            belowSeg.above.push(unplacedSeg);
                        }
                    }
                    level += 1;
                }
            }
            return segLevels;
        };
        return TimelineLaneEventRenderer;
    }(core.FgEventRenderer));
    function computeOffsetForSegs(segs) {
        var max = 0;
        for (var _i = 0, segs_7 = segs; _i < segs_7.length; _i++) {
            var seg = segs_7[_i];
            max = Math.max(max, computeOffsetForSeg(seg));
        }
        return max;
    }
    function computeOffsetForSeg(seg) {
        if ((seg.top == null)) {
            seg.top = computeOffsetForSegs(seg.above);
        }
        return seg.top + seg.height;
    }
    function timeRowSegsCollide(seg0, seg1) {
        return (seg0.left < seg1.right) && (seg0.right > seg1.left);
    }

    var main = core.createPlugin({
        defaultView: 'timelineDay',
        views: {
            timeline: {
                class: TimelineView,
                eventResizableFromStart: true // how is this consumed for TimelineView tho?
            },
            timelineDay: {
                type: 'timeline',
                duration: { days: 1 }
            },
            timelineWeek: {
                type: 'timeline',
                duration: { weeks: 1 }
            },
            timelineMonth: {
                type: 'timeline',
                duration: { months: 1 }
            },
            timelineYear: {
                type: 'timeline',
                duration: { years: 1 }
            }
        }
    });

    exports.HeaderBodyLayout = HeaderBodyLayout;
    exports.ScrollJoiner = ScrollJoiner;
    exports.StickyScroller = StickyScroller;
    exports.TimeAxis = TimeAxis;
    exports.TimelineLane = TimelineLane;
    exports.TimelineView = TimelineView;
    exports.default = main;

Object.defineProperty(exports, '__esModule', { value: true });

}));

// Generated by dts-bundle v0.7.3-fork.1
// Dependencies for this module:
// ../../../../../@fullcalendar/core

declare module '@fullcalendar/timeline' {
    import TimelineView from '@fullcalendar/timeline/TimelineView';
    export { TimelineView };
    export { default as TimelineLane } from '@fullcalendar/timeline/TimelineLane';
    export { default as ScrollJoiner } from '@fullcalendar/timeline/util/ScrollJoiner';
    export { default as StickyScroller } from '@fullcalendar/timeline/util/StickyScroller';
    export { default as TimeAxis } from '@fullcalendar/timeline/TimeAxis';
    export { default as HeaderBodyLayout } from '@fullcalendar/timeline/HeaderBodyLayout';
    const _default: import("@fullcalendar/core").PluginDef;
    export default _default;
}

declare module '@fullcalendar/timeline/TimelineView' {
    import { Hit, View, ViewProps, ComponentContext, ViewSpec, DateProfileGenerator, DateProfile, Duration } from '@fullcalendar/core';
    import TimeAxis from '@fullcalendar/timeline/TimeAxis';
    import TimelineLane from '@fullcalendar/timeline/TimelineLane';
    export { TimelineView as default, TimelineView };
    class TimelineView extends View {
        timeAxis: TimeAxis;
        lane: TimelineLane;
        constructor(context: ComponentContext, viewSpec: ViewSpec, dateProfileGenerator: DateProfileGenerator, parentEl: HTMLElement);
        destroy(): void;
        renderSkeletonHtml(): string;
        render(props: ViewProps): void;
        updateSize(isResize: any, totalHeight: any, isAuto: any): void;
        getNowIndicatorUnit(dateProfile: DateProfile): string;
        renderNowIndicator(date: any): void;
        unrenderNowIndicator(): void;
        computeDateScroll(duration: Duration): {
            left: number;
        };
        applyScroll(scroll: any, isResize: any): void;
        applyDateScroll(scroll: any): void;
        queryScroll(): {
            top: number;
            left: number;
        };
        buildPositionCaches(): void;
        queryHit(positionLeft: number, positionTop: number, elWidth: number, elHeight: number): Hit;
    }
}

declare module '@fullcalendar/timeline/TimelineLane' {
    import { Duration, EventStore, EventUiHash, DateMarker, DateSpan, EventInteractionState, EventSegUiInteractionState, DateComponent, ComponentContext, Seg, DateProfile } from '@fullcalendar/core';
    import TimeAxis from '@fullcalendar/timeline/TimeAxis';
    export interface TimelineLaneSeg extends Seg {
        start: DateMarker;
        end: DateMarker;
    }
    export interface TimelineLaneProps {
        dateProfile: DateProfile;
        nextDayThreshold: Duration;
        businessHours: EventStore | null;
        eventStore: EventStore | null;
        eventUiBases: EventUiHash;
        dateSelection: DateSpan | null;
        eventSelection: string;
        eventDrag: EventInteractionState | null;
        eventResize: EventInteractionState | null;
    }
    export { TimelineLane as default, TimelineLane };
    class TimelineLane extends DateComponent {
        timeAxis: TimeAxis;
        constructor(context: ComponentContext, fgContainerEl: HTMLElement, bgContainerEl: HTMLElement, timeAxis: TimeAxis);
        render(props: TimelineLaneProps): void;
        destroy(): void;
        _renderEventDrag(state: EventSegUiInteractionState): void;
        _unrenderEventDrag(state: EventSegUiInteractionState): void;
        _renderEventResize(state: EventSegUiInteractionState): void;
        _unrenderEventResize(state: EventSegUiInteractionState): void;
        updateSize(isResize: boolean): void;
    }
}

declare module '@fullcalendar/timeline/util/ScrollJoiner' {
    import ClippedScroller from '@fullcalendar/timeline/util/ClippedScroller';
    export { ScrollJoiner as default, ScrollJoiner };
    class ScrollJoiner {
        axis: any;
        scrollers: ClippedScroller[];
        masterScroller: ClippedScroller;
        constructor(axis: any, scrollers: ClippedScroller[]);
        initScroller(scroller: ClippedScroller): void;
        assignMasterScroller(scroller: any): void;
        unassignMasterScroller(): void;
        update(): void;
    }
}

declare module '@fullcalendar/timeline/util/StickyScroller' {
    import { Rect, Point } from '@fullcalendar/core';
    import EnhancedScroller from '@fullcalendar/timeline/util/EnhancedScroller';
    interface ElementGeom {
        parentBound: Rect;
        naturalBound: Rect | null;
        elWidth: number;
        elHeight: number;
        computedTextAlign: string;
        intendedTextAlign: string;
    }
    export { StickyScroller as default, StickyScroller };
    class StickyScroller {
        scroller: EnhancedScroller;
        usingRelative: boolean | null;
        constructor(scroller: EnhancedScroller, isRtl: boolean, isVertical: boolean);
        destroy(): void;
        updateSize: () => void;
        queryElGeoms(els: HTMLElement[]): ElementGeom[];
        computeElDestinations(elGeoms: ElementGeom[], viewportWidth: number): Point[];
    }
    export {};
}

declare module '@fullcalendar/timeline/TimeAxis' {
    import { DateProfile, DateMarker, Component, ComponentContext, Duration } from '@fullcalendar/core';
    import HeaderBodyLayout from '@fullcalendar/timeline/HeaderBodyLayout';
    import TimelineHeader from '@fullcalendar/timeline/TimelineHeader';
    import TimelineSlats from '@fullcalendar/timeline/TimelineSlats';
    import { TimelineDateProfile } from '@fullcalendar/timeline/timeline-date-profile';
    import TimelineNowIndicator from '@fullcalendar/timeline/TimelineNowIndicator';
    import StickyScroller from '@fullcalendar/timeline/util/StickyScroller';
    export interface TimeAxisProps {
        dateProfile: DateProfile;
    }
    export { TimeAxis as default, TimeAxis };
    class TimeAxis extends Component {
        layout: HeaderBodyLayout;
        header: TimelineHeader;
        slats: TimelineSlats;
        nowIndicator: TimelineNowIndicator;
        headStickyScroller: StickyScroller;
        bodyStickyScroller: StickyScroller;
        tDateProfile: TimelineDateProfile;
        constructor(context: ComponentContext, headerContainerEl: any, bodyContainerEl: any);
        destroy(): void;
        render(props: TimeAxisProps): void;
        getNowIndicatorUnit(dateProfile: DateProfile): string;
        renderNowIndicator(date: any): void;
        unrenderNowIndicator(): void;
        updateSize(isResize: any, totalHeight: any, isAuto: any): void;
        updateStickyScrollers(): void;
        computeSlotWidth(): any;
        computeDefaultSlotWidth(tDateProfile: any): number;
        applySlotWidth(slotWidth: number | string): void;
        computeDateSnapCoverage(date: DateMarker): number;
        dateToCoord(date: any): any;
        rangeToCoords(range: any): {
            right: any;
            left: any;
        };
        computeDateScroll(duration: Duration): {
            left: number;
        };
        queryDateScroll(): {
            left: number;
        };
        applyDateScroll(scroll: any): void;
    }
}

declare module '@fullcalendar/timeline/HeaderBodyLayout' {
    import ClippedScroller from '@fullcalendar/timeline/util/ClippedScroller';
    import ScrollJoiner from '@fullcalendar/timeline/util/ScrollJoiner';
    export { HeaderBodyLayout as default, HeaderBodyLayout };
    class HeaderBodyLayout {
        headerScroller: ClippedScroller;
        bodyScroller: ClippedScroller;
        scrollJoiner: ScrollJoiner;
        constructor(headerContainerEl: any, bodyContainerEl: any, verticalScroll: any);
        destroy(): void;
        setHeight(totalHeight: any, isAuto: any): void;
        queryHeadHeight(): number;
    }
}

declare module '@fullcalendar/timeline/util/ClippedScroller' {
    import { ScrollbarWidths } from '@fullcalendar/core';
    import EnhancedScroller from '@fullcalendar/timeline/util/EnhancedScroller';
    export { ClippedScroller as default, ClippedScroller };
    class ClippedScroller {
        el: HTMLElement;
        enhancedScroll: EnhancedScroller;
        isHScrollbarsClipped: boolean;
        isVScrollbarsClipped: boolean;
        constructor(overflowX: string, overflowY: string, parentEl: HTMLElement);
        destroy(): void;
        updateSize(): void;
        setHeight(height: number | string): void;
        getScrollbarWidths(): ScrollbarWidths;
    }
}

declare module '@fullcalendar/timeline/util/EnhancedScroller' {
    import { ScrollComponent, EmitterInterface } from '@fullcalendar/core';
    import ScrollerCanvas from '@fullcalendar/timeline/util/ScrollerCanvas';
    export { EnhancedScroller as default, EnhancedScroller };
    class EnhancedScroller extends ScrollComponent {
        on: EmitterInterface['on'];
        one: EmitterInterface['one'];
        off: EmitterInterface['off'];
        trigger: EmitterInterface['trigger'];
        triggerWith: EmitterInterface['triggerWith'];
        hasHandlers: EmitterInterface['hasHandlers'];
        canvas: ScrollerCanvas;
        isScrolling: boolean;
        isTouching: boolean;
        isMoving: boolean;
        isTouchScrollEnabled: boolean;
        preventTouchScrollHandler: any;
        requestMovingEnd: any;
        constructor(overflowX: string, overflowY: string);
        destroy(): void;
        disableTouchScroll(): void;
        enableTouchScroll(): void;
        bindPreventTouchScroll(): void;
        unbindPreventTouchScroll(): void;
        bindHandlers(): void;
        unbindHandlers(): void;
        reportScroll: () => void;
        reportScrollStart: () => void;
        reportMovingEnd(): void;
        reportScrollEnd(): void;
        reportTouchStart: () => void;
        reportTouchEnd: () => void;
        getScrollLeft(): number;
        setScrollLeft(val: any): void;
        getScrollFromLeft(): number;
    }
}

declare module '@fullcalendar/timeline/TimelineHeader' {
    import { Component, ComponentContext, DateProfile } from '@fullcalendar/core';
    import { TimelineDateProfile } from '@fullcalendar/timeline/timeline-date-profile';
    export interface TimelineHeaderProps {
        dateProfile: DateProfile;
        tDateProfile: TimelineDateProfile;
    }
    export { TimelineHeader as default, TimelineHeader };
    class TimelineHeader extends Component {
        tableEl: HTMLElement;
        slatColEls: HTMLElement[];
        innerEls: HTMLElement[];
        constructor(context: ComponentContext, parentEl: HTMLElement);
        destroy(): void;
        render(props: TimelineHeaderProps): void;
        renderDates(tDateProfile: TimelineDateProfile): void;
    }
}

declare module '@fullcalendar/timeline/TimelineSlats' {
    import { PositionCache, Component, ComponentContext, DateProfile } from '@fullcalendar/core';
    import { TimelineDateProfile } from '@fullcalendar/timeline/timeline-date-profile';
    export interface TimelineSlatsProps {
        dateProfile: DateProfile;
        tDateProfile: TimelineDateProfile;
    }
    export { TimelineSlats as default, TimelineSlats };
    class TimelineSlats extends Component {
        el: HTMLElement;
        slatColEls: HTMLElement[];
        slatEls: HTMLElement[];
        outerCoordCache: PositionCache;
        innerCoordCache: PositionCache;
        constructor(context: ComponentContext, parentEl: HTMLElement);
        destroy(): void;
        render(props: TimelineSlatsProps): void;
        renderDates(tDateProfile: TimelineDateProfile): void;
        slatCellHtml(date: any, isEm: any, tDateProfile: TimelineDateProfile): string;
        updateSize(): void;
        positionToHit(leftPosition: any): {
            dateSpan: {
                range: {
                    start: Date;
                    end: Date;
                };
                allDay: boolean;
            };
            dayEl: HTMLElement;
            left: any;
            right: any;
        };
    }
}

declare module '@fullcalendar/timeline/timeline-date-profile' {
    import { Duration, View, DateProfile, DateMarker, DateEnv, DateRange } from '@fullcalendar/core';
    export interface TimelineDateProfile {
        labelInterval: Duration;
        slotDuration: Duration;
        headerFormats: any;
        isTimeScale: boolean;
        largeUnit: string;
        emphasizeWeeks: boolean;
        snapDuration: Duration;
        snapsPerSlot: number;
        normalizedRange: DateRange;
        timeWindowMs: number;
        slotDates: DateMarker[];
        isWeekStarts: boolean[];
        snapDiffToIndex: number[];
        snapIndexToDiff: number[];
        snapCnt: number;
        slotCnt: number;
        cellRows: TimelineHeaderCell[][];
    }
    export interface TimelineHeaderCell {
        text: string;
        spanHtml: string;
        date: DateMarker;
        colspan: number;
        isWeekStart: boolean;
    }
    export function buildTimelineDateProfile(dateProfile: DateProfile, view: View): TimelineDateProfile;
    export function normalizeDate(date: DateMarker, tDateProfile: TimelineDateProfile, dateEnv: DateEnv): DateMarker;
    export function normalizeRange(range: DateRange, tDateProfile: TimelineDateProfile, dateEnv: DateEnv): DateRange;
    export function isValidDate(date: DateMarker, tDateProfile: TimelineDateProfile, dateProfile: DateProfile, view: View): boolean;
}

declare module '@fullcalendar/timeline/TimelineNowIndicator' {
    export { TimelineNowIndicator as default, TimelineNowIndicator };
    class TimelineNowIndicator {
        headParent: HTMLElement;
        bodyParent: HTMLElement;
        arrowEl: HTMLElement;
        lineEl: HTMLElement;
        constructor(headParent: HTMLElement, bodyParent: HTMLElement);
        render(coord: number, isRtl: boolean): void;
        unrender(): void;
    }
}

declare module '@fullcalendar/timeline/util/ScrollerCanvas' {
    export { ScrollerCanvas as default, ScrollerCanvas };
    class ScrollerCanvas {
        el: HTMLElement;
        contentEl: HTMLElement;
        bgEl: HTMLElement;
        gutters: any;
        width: any;
        minWidth: any;
        constructor();
        setGutters(gutters: any): void;
        setWidth(width: any): void;
        setMinWidth(minWidth: any): void;
        clearWidth(): void;
        updateSize(): void;
    }
}

/*!
FullCalendar Timeline Plugin v4.3.0
Docs & License: https://fullcalendar.io/scheduler
(c) 2019 Adam Shaw
*/
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@fullcalendar/core")):"function"==typeof define&&define.amd?define(["exports","@fullcalendar/core"],t):t((e=e||self).FullCalendarTimeline={},e.FullCalendar)}(this,function(e,t){"use strict";var r=function(e,t){return(r=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var r in t)t.hasOwnProperty(r)&&(e[r]=t[r])})(e,t)};function n(e,t){function n(){this.constructor=e}r(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}var i,o=function(){return(o=Object.assign||function(e){for(var t,r=1,n=arguments.length;r

'),this.contentEl=this.el.querySelector(".fc-content"),this.bgEl=this.el.querySelector(".fc-bg")}return e.prototype.setGutters=function(e){e?o(this.gutters,e):this.gutters={},this.updateSize()},e.prototype.setWidth=function(e){this.width=e,this.updateSize()},e.prototype.setMinWidth=function(e){this.minWidth=e,this.updateSize()},e.prototype.clearWidth=function(){this.width=null,this.minWidth=null,this.updateSize()},e.prototype.updateSize=function(){var e=this.gutters,r=this.el;t.forceClassName(r,"fc-gutter-left",e.left),t.forceClassName(r,"fc-gutter-right",e.right),t.forceClassName(r,"fc-gutter-top",e.top),t.forceClassName(r,"fc-gutter-bottom",e.bottom),t.applyStyle(r,{paddingLeft:e.left||"",paddingRight:e.right||"",paddingTop:e.top||"",paddingBottom:e.bottom||"",width:null!=this.width?this.width+(e.left||0)+(e.right||0):"",minWidth:null!=this.minWidth?this.minWidth+(e.left||0)+(e.right||0):""}),t.applyStyle(this.bgEl,{left:e.left||"",right:e.right||"",top:e.top||"",bottom:e.bottom||""})},e}(),s=function(e){function r(r,n){var i=e.call(this,r,n)||this;return i.reportScroll=function(){i.isScrolling||i.reportScrollStart(),i.trigger("scroll"),i.isMoving=!0,i.requestMovingEnd()},i.reportScrollStart=function(){i.isScrolling||(i.isScrolling=!0,i.trigger("scrollStart",i.isTouching))},i.reportTouchStart=function(){i.isTouching=!0},i.reportTouchEnd=function(){i.isTouching&&(i.isTouching=!1,i.isTouchScrollEnabled&&i.unbindPreventTouchScroll(),i.isMoving||i.reportScrollEnd())},i.isScrolling=!1,i.isTouching=!1,i.isMoving=!1,i.isTouchScrollEnabled=!0,i.requestMovingEnd=t.debounce(i.reportMovingEnd,500),i.canvas=new l,i.el.appendChild(i.canvas.el),i.applyOverflow(),i.bindHandlers(),i}return n(r,e),r.prototype.destroy=function(){e.prototype.destroy.call(this),this.unbindHandlers()},r.prototype.disableTouchScroll=function(){this.isTouchScrollEnabled=!1,this.bindPreventTouchScroll()},r.prototype.enableTouchScroll=function(){this.isTouchScrollEnabled=!0,this.isTouching||this.unbindPreventTouchScroll()},r.prototype.bindPreventTouchScroll=function(){this.preventTouchScrollHandler||this.el.addEventListener("touchmove",this.preventTouchScrollHandler=t.preventDefault)},r.prototype.unbindPreventTouchScroll=function(){this.preventTouchScrollHandler&&(this.el.removeEventListener("touchmove",this.preventTouchScrollHandler),this.preventTouchScrollHandler=null)},r.prototype.bindHandlers=function(){this.el.addEventListener("scroll",this.reportScroll),this.el.addEventListener("touchstart",this.reportTouchStart,{passive:!0}),this.el.addEventListener("touchend",this.reportTouchEnd)},r.prototype.unbindHandlers=function(){this.el.removeEventListener("scroll",this.reportScroll),this.el.removeEventListener("touchstart",this.reportTouchStart,{passive:!0}),this.el.removeEventListener("touchend",this.reportTouchEnd)},r.prototype.reportMovingEnd=function(){this.isMoving=!1,this.isTouching||this.reportScrollEnd()},r.prototype.reportScrollEnd=function(){this.isScrolling&&(this.trigger("scrollEnd"),this.isScrolling=!1)},r.prototype.getScrollLeft=function(){var e=this.el,t=window.getComputedStyle(e).direction,r=e.scrollLeft;if("rtl"===t)switch(a()){case"positive":r=r+e.clientWidth-e.scrollWidth;break;case"reverse":r=-r}return r},r.prototype.setScrollLeft=function(e){var t=this.el;if("rtl"===window.getComputedStyle(t).direction)switch(a()){case"positive":e=e-t.clientWidth+t.scrollWidth;break;case"reverse":e=-e}t.scrollLeft=e},r.prototype.getScrollFromLeft=function(){var e=this.el,t=window.getComputedStyle(e).direction,r=e.scrollLeft;if("rtl"===t)switch(a()){case"negative":r=r-e.clientWidth+e.scrollWidth;break;case"reverse":r=-r-e.clientWidth+e.scrollWidth}return r},r}(t.ScrollComponent);function a(){return i||(i=function(){var e,r=t.htmlToElement('

A

');document.body.appendChild(r),r.scrollLeft>0?e="positive":(r.scrollLeft=1,e=r.scrollLeft>0?"reverse":"negative");return t.removeElement(r),e}())}t.EmitterMixin.mixInto(s);var c=function(){function e(e,r,n){this.isHScrollbarsClipped=!1,this.isVScrollbarsClipped=!1,"clipped-scroll"===e&&(e="scroll",this.isHScrollbarsClipped=!0),"clipped-scroll"===r&&(r="scroll",this.isVScrollbarsClipped=!0),this.enhancedScroll=new s(e,r),n.appendChild(this.el=t.createElement("div",{className:"fc-scroller-clip"})),this.el.appendChild(this.enhancedScroll.el)}return e.prototype.destroy=function(){t.removeElement(this.el)},e.prototype.updateSize=function(){var e=this.enhancedScroll,r=e.el,n=t.computeEdges(r),i={marginLeft:0,marginRight:0,marginTop:0,marginBottom:0};this.isVScrollbarsClipped&&(i.marginLeft=-n.scrollbarLeft,i.marginRight=-n.scrollbarRight),this.isHScrollbarsClipped&&(i.marginBottom=-n.scrollbarBottom),t.applyStyle(r,i),!this.isHScrollbarsClipped&&"hidden"!==e.overflowX||!this.isVScrollbarsClipped&&"hidden"!==e.overflowY||n.scrollbarLeft||n.scrollbarRight||n.scrollbarBottom?r.classList.remove("fc-no-scrollbars"):r.classList.add("fc-no-scrollbars")},e.prototype.setHeight=function(e){this.enhancedScroll.setHeight(e)},e.prototype.getScrollbarWidths=function(){var e=this.enhancedScroll.getScrollbarWidths();return this.isVScrollbarsClipped&&(e.left=0,e.right=0),this.isHScrollbarsClipped&&(e.bottom=0),e},e}(),d=function(){function e(e,t){this.axis=e,this.scrollers=t;for(var r=0,n=this.scrollers;rt.asRoughMs(e.slotDuration),s=t.isSingleDay(e.slotDuration),a="",c=e.slotCnt-1;c>=0;c--)a+="";a+="",a+="";for(var d=0,h=i;d";for(var p=0,f=u;p1?' colspan="'+g.colspan+'"':"")+'>

'+g.spanHtml+"

"}a+=""}a+="",this.tableEl.innerHTML=a,this.slatColEls=t.findElements(this.tableEl,"col"),this.innerEls=t.findElements(this.tableEl.querySelector("tr:last-child"),"th .fc-cell-text"),t.findElements(this.tableEl.querySelectorAll("tr:not(:last-child)"),"th .fc-cell-text").forEach(function(e){e.classList.add("fc-sticky")})},r}(t.Component),p=function(e){function r(r,n){var i=e.call(this,r)||this;return n.appendChild(i.el=t.createElement("div",{className:"fc-slats"})),i}return n(r,e),r.prototype.destroy=function(){t.removeElement(this.el),e.prototype.destroy.call(this)},r.prototype.render=function(e){this.renderDates(e.tDateProfile)},r.prototype.renderDates=function(e){for(var r=this.theme,n=this.view,i=this.dateEnv,o=e.slotDates,l=e.isWeekStarts,s='',a=0;a";s+="",s+="";for(a=0;a",this.el.innerHTML=s,this.slatColEls=t.findElements(this.el,"col"),this.slatEls=t.findElements(this.el,"td");for(a=0;a

'},r.prototype.updateSize=function(){this.outerCoordCache.build(),this.innerCoordCache.build()},r.prototype.positionToHit=function(e){var r=this.outerCoordCache,n=this.props.tDateProfile,i=r.leftToIndex(e);if(null!=i){var o=r.getWidth(i),l=this.isRtl?(r.rights[i]-e)/o:(e-r.lefts[i])/o,s=Math.floor(l*n.snapsPerSlot),a=this.dateEnv.add(n.slotDates[i],t.multiplyDuration(n.snapDuration,s));return{dateSpan:{range:{start:a,end:this.dateEnv.add(a,n.snapDuration)},allDay:!this.props.tDateProfile.isTimeScale},dayEl:this.slatColEls[i],left:r.lefts[i],right:r.rights[i]}}return null},r}(t.Component),f=18,g=6,m=200;t.config.MAX_TIMELINE_SLOTS=1e3;var v=[{years:1},{months:1},{days:1},{hours:1},{minutes:30},{minutes:15},{minutes:10},{minutes:5},{minutes:1},{seconds:30},{seconds:15},{seconds:10},{seconds:5},{seconds:1},{milliseconds:500},{milliseconds:100},{milliseconds:10},{milliseconds:1}];function y(e,r){var n=r.dateEnv,i={labelInterval:E(r,"slotLabelInterval"),slotDuration:E(r,"slotDuration")};!function(e,r,n){var i=r.currentRange;if(e.labelInterval){var o=n.countDurationsBetween(i.start,i.end,e.labelInterval);o>t.config.MAX_TIMELINE_SLOTS&&(console.warn("slotLabelInterval results in too many cells"),e.labelInterval=null)}if(e.slotDuration){var l=n.countDurationsBetween(i.start,i.end,e.slotDuration);l>t.config.MAX_TIMELINE_SLOTS&&(console.warn("slotDuration results in too many cells"),e.slotDuration=null)}if(e.labelInterval&&e.slotDuration){var s=t.wholeDivideDurations(e.labelInterval,e.slotDuration);(null===s||s<1)&&(console.warn("slotLabelInterval must be a multiple of slotDuration"),e.slotDuration=null)}}(i,e,n),D(i,e,n),function(e,r,n){var i=r.currentRange,o=e.slotDuration;if(!o){for(var l=D(e,r,n),s=0,a=v;s1&&h<=g){o=d;break}}if(o){var u=n.countDurationsBetween(i.start,i.end,o);u>m&&(o=null)}o||(o=l),e.slotDuration=o}}(i,e,n);var o=r.opt("slotLabelFormat"),l=Array.isArray(o)?o:null!=o?[o]:function(e,r,n,i){var o,l,s=e.labelInterval,a=t.greatestDurationDenominator(s).unit,c=i.opt("weekNumbers"),d=o=l=null;"week"!==a||c||(a="day");switch(a){case"year":d={year:"numeric"};break;case"month":w("years",r,n)>1&&(d={year:"numeric"}),o={month:"short"};break;case"week":w("years",r,n)>1&&(d={year:"numeric"}),o={week:"narrow"};break;case"day":w("years",r,n)>1?d={year:"numeric",month:"long"}:w("months",r,n)>1&&(d={month:"long"}),c&&(o={week:"short"}),l={weekday:"narrow",day:"numeric"};break;case"hour":c&&(d={week:"short"}),w("days",r,n)>1&&(o={weekday:"short",day:"numeric",month:"numeric",omitCommas:!0}),l={hour:"numeric",minute:"2-digit",omitZeroMinute:!0,meridiem:"short"};break;case"minute":t.asRoughMinutes(s)/60>=g?(d={hour:"numeric",meridiem:"short"},o=function(e){return":"+t.padStart(e.date.minute,2)}):d={hour:"numeric",minute:"numeric",meridiem:"short"};break;case"second":t.asRoughSeconds(s)/60>=g?(d={hour:"numeric",minute:"2-digit",meridiem:"lowercase"},o=function(e){return":"+t.padStart(e.date.second,2)}):d={hour:"numeric",minute:"2-digit",second:"2-digit",meridiem:"lowercase"};break;case"millisecond":d={hour:"numeric",minute:"2-digit",second:"2-digit",meridiem:"lowercase"},o=function(e){return"."+t.padStart(e.millisecond,3)}}return[].concat(d||[],o||[],l||[])}(i,e,n,r);i.headerFormats=l.map(function(e){return t.createFormatter(e)}),i.isTimeScale=Boolean(i.slotDuration.milliseconds);var s=null;if(!i.isTimeScale){var a=t.greatestDurationDenominator(i.slotDuration).unit;/year|month|week/.test(a)&&(s=a)}i.largeUnit=s,i.emphasizeWeeks=t.isSingleDay(i.slotDuration)&&w("weeks",e,n)>=2&&!r.opt("businessHours");var c,d,h=r.opt("snapDuration");h&&(c=t.createDuration(h),d=t.wholeDivideDurations(i.slotDuration,c)),null==d&&(c=i.slotDuration,d=1),i.snapDuration=c,i.snapsPerSlot=d;var u=t.asRoughMs(e.maxTime)-t.asRoughMs(e.minTime),p=S(e.renderRange.start,i,n),f=S(e.renderRange.end,i,n);i.isTimeScale&&(p=n.add(p,e.minTime),f=n.add(t.addDays(f,-1),e.maxTime)),i.timeWindowMs=u,i.normalizedRange={start:p,end:f};for(var y=[],T=p;T1&&h=f)break}e.labelInterval=o}return o}function w(e,r,n){var i=r.currentRange,o=null;return"years"===e?o=n.diffWholeYears(i.start,i.end):"months"===e?o=n.diffWholeMonths(i.start,i.end):"weeks"===e?o=n.diffWholeMonths(i.start,i.end):"days"===e&&(o=t.diffWholeDays(i.start,i.end)),o||0}function C(e,r,n,i){return{text:r,spanHtml:t.buildGotoAnchorHtml(i,{date:e,type:n,forceOff:!n},{class:"fc-cell-text"},t.htmlEscape(r)),date:e,colspan:1,isWeekStart:!1}}var T,R=function(){function e(e,t){this.headParent=e,this.bodyParent=t}return e.prototype.render=function(e,r){var n=r?{right:-e}:{left:e};this.headParent.appendChild(this.arrowEl=t.createElement("div",{className:"fc-now-indicator fc-now-indicator-arrow",style:n})),this.bodyParent.appendChild(this.lineEl=t.createElement("div",{className:"fc-now-indicator fc-now-indicator-line",style:n}))},e.prototype.unrender=function(){this.arrowEl&&t.removeElement(this.arrowEl),this.lineEl&&t.removeElement(this.lineEl)},e}(),x=-1!==(T=t.htmlToElement('

').style.position).indexOf("sticky")?T:null,M=/Edge/.test(navigator.userAgent),z="-webkit-sticky"===x,k="fc-sticky",P=function(){function e(e,r,n){var i=this;this.usingRelative=null,this.updateSize=function(){var e=Array.prototype.slice.call(i.scroller.canvas.el.querySelectorAll("."+k)),r=i.queryElGeoms(e),n=i.scroller.el.clientWidth;i.usingRelative?function(e,r,n){e.forEach(function(e,i){var o=r[i].naturalBound;t.applyStyle(e,{position:"relative",left:n[i].left-o.left,top:n[i].top-o.top})})}(e,r,i.computeElDestinations(r,n)):function(e,r,n){e.forEach(function(e,i){var o=0;"center"===r[i].intendedTextAlign&&(o=(n-r[i].elWidth)/2,"center"===r[i].computedTextAlign&&(e.setAttribute("data-sticky-center",""),e.parentNode.style.textAlign="left")),t.applyStyle(e,{position:x,left:o,right:0,top:0})})}(e,r,n)},this.scroller=e,this.usingRelative=!x||M&&r||(M||z)&&n,this.usingRelative&&e.on("scrollEnd",this.updateSize)}return e.prototype.destroy=function(){this.scroller.off("scrollEnd",this.updateSize)},e.prototype.queryElGeoms=function(e){for(var r=this.scroller.canvas.el.getBoundingClientRect(),n=[],i=0,o=e;in&&(i=l,n="",o=Math.floor(l/r.slotDates.length))}t.headerScroller.enhancedScroll.canvas.setWidth(n),t.headerScroller.enhancedScroll.canvas.setMinWidth(i),t.bodyScroller.enhancedScroll.canvas.setWidth(n),t.bodyScroller.enhancedScroll.canvas.setMinWidth(i),""!==o&&this.header.slatColEls.slice(0,-1).concat(this.slats.slatColEls.slice(0,-1)).forEach(function(e){e.style.width=o+"px"})},r.prototype.computeDateSnapCoverage=function(e){var r=this.dateEnv,n=this.tDateProfile,i=r.countDurationsBetween(n.normalizedRange.start,e,n.snapDuration);if(i<0)return 0;if(i>=n.snapDiffToIndex.length)return n.snapCnt;var o=Math.floor(i),l=n.snapDiffToIndex[o];return t.isInt(l)?l+=i-o:l=Math.ceil(l),l},r.prototype.dateToCoord=function(e){var t=this.tDateProfile,r=this.computeDateSnapCoverage(e)/t.snapsPerSlot,n=Math.floor(r),i=r-(n=Math.min(n,t.slotCnt-1)),o=this.slats,l=o.innerCoordCache,s=o.outerCoordCache;return this.isRtl?s.rights[n]-l.getWidth(n)*i-s.originClientRect.width:s.lefts[n]+l.getWidth(n)*i},r.prototype.rangeToCoords=function(e){return this.isRtl?{right:this.dateToCoord(e.start),left:this.dateToCoord(e.end)}:{left:this.dateToCoord(e.start),right:this.dateToCoord(e.end)}},r.prototype.computeDateScroll=function(e){var r=this.dateEnv,n=this.props.dateProfile,i=0;return n&&(i=this.dateToCoord(r.add(t.startOfDay(n.activeRange.start),e)),!this.isRtl&&i&&(i+=1)),{left:i}},r.prototype.queryDateScroll=function(){return{left:this.layout.bodyScroller.enhancedScroll.getScrollLeft()}},r.prototype.applyDateScroll=function(e){this.layout.bodyScroller.enhancedScroll.setScrollLeft(e.left||0),this.layout.headerScroller.enhancedScroll.setScrollLeft(e.left||0)},r}(t.Component),H=function(e){function r(t,r,n){var i=e.call(this,t)||this;return i.masterContainerEl=r,i.timeAxis=n,i}return n(r,e),r.prototype.renderSegHtml=function(e,r){var n=this.context.view,i=e.eventRange,o=i.def,l=i.ui,s=n.computeEventDraggable(o,l),a=e.isStart&&n.computeEventStartResizable(o,l),c=e.isEnd&&n.computeEventEndResizable(o,l),d=this.getSegClasses(e,s,a||c,r);d.unshift("fc-timeline-event","fc-h-event");var h=this.getTimeText(i);return'"+(h?''+t.htmlEscape(h)+"":"")+''+(o.title?t.htmlEscape(o.title):" ")+""+(a?'

':"")+(c?'

':"")+""},r.prototype.computeDisplayEventTime=function(){return!this.timeAxis.tDateProfile.isTimeScale},r.prototype.computeDisplayEventEnd=function(){return!1},r.prototype.computeEventTimeFormat=function(){return{hour:"numeric",minute:"2-digit",omitZeroMinute:!0,meridiem:"narrow"}},r.prototype.attachSegs=function(e,r){if(!this.el&&this.masterContainerEl&&(this.el=t.createElement("div",{className:"fc-event-container"}),r&&this.el.classList.add("fc-mirror-container"),this.masterContainerEl.appendChild(this.el)),this.el)for(var n=0,i=e;nt.left}var B=function(e){function r(t,r,n){var i=e.call(this,t)||this;return i.masterContainerEl=r,i.timeAxis=n,i}return n(r,e),r.prototype.attachSegs=function(e,r){if(r.length){var n=void 0;n="businessHours"===e?"bgevent":e.toLowerCase();var i=t.createElement("div",{className:"fc-"+n+"-container"});this.masterContainerEl.appendChild(i);for(var o=0,l=r;o '},t.prototype.render=function(t){e.prototype.render.call(this,t),this.timeAxis.receiveProps({dateProfile:t.dateProfile}),this.lane.receiveProps(o({},t,{nextDayThreshold:this.nextDayThreshold}))},t.prototype.updateSize=function(e,t,r){this.timeAxis.updateSize(e,t,r),this.lane.updateSize(e)},t.prototype.getNowIndicatorUnit=function(e){return this.timeAxis.getNowIndicatorUnit(e)},t.prototype.renderNowIndicator=function(e){this.timeAxis.renderNowIndicator(e)},t.prototype.unrenderNowIndicator=function(){this.timeAxis.unrenderNowIndicator()},t.prototype.computeDateScroll=function(e){return this.timeAxis.computeDateScroll(e)},t.prototype.applyScroll=function(t,r){e.prototype.applyScroll.call(this,t,r);var n=this.calendar;(r||n.isViewUpdated||n.isDatesUpdated||n.isEventsUpdated)&&this.timeAxis.updateStickyScrollers()},t.prototype.applyDateScroll=function(e){this.timeAxis.applyDateScroll(e)},t.prototype.queryScroll=function(){var e=this.timeAxis.layout.bodyScroller.enhancedScroll;return{top:e.getScrollTop(),left:e.getScrollLeft()}},t.prototype.buildPositionCaches=function(){this.timeAxis.slats.updateSize()},t.prototype.queryHit=function(e,t,r,n){var i=this.timeAxis.slats.positionToHit(e);if(i)return{component:this,dateSpan:i.dateSpan,rect:{left:i.left,right:i.right,top:0,bottom:n},dayEl:i.dayEl,layer:0}},t}(t.View),F=t.createPlugin({defaultView:"timelineDay",views:{timeline:{class:_,eventResizableFromStart:!0},timelineDay:{type:"timeline",duration:{days:1}},timelineWeek:{type:"timeline",duration:{weeks:1}},timelineMonth:{type:"timeline",duration:{months:1}},timelineYear:{type:"timeline",duration:{years:1}}}});e.HeaderBodyLayout=h,e.ScrollJoiner=d,e.StickyScroller=P,e.TimeAxis=I,e.TimelineLane=O,e.TimelineView=_,e.default=F,Object.defineProperty(e,"__esModule",{value:!0})});

/*!
FullCalendar Resources Common Plugin v4.3.1
Docs & License: https://fullcalendar.io/scheduler
(c) 2019 Adam Shaw
*/

import { memoize, filterHash, rangesIntersect, memoizeOutput, isPropsEqual, mapHash, combineEventUis, refineProps, rangesEqual, processScopedUiProps, parseBusinessHours, EventApi, Calendar, Splitter, mergeEventStores, isPropsValid, appendToElement, htmlEscape, cssToStr, config, isValidDate, addDays, unpromisify, requestJson, htmlToElement, removeElement, createFormatter, computeFallbackHeaderFormat, renderDateCell, findElements, Component, flexibleCompare, compareByFieldSpecs, createPlugin } from '@fullcalendar/core';

/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0

THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.

See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
/* global Reflect, Promise */

function __extends(d, b) {
    extendStatics(d, b);
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}

Calendar.prototype.addResource = function (input, scrollTo) {
    var _a;
    if (scrollTo === void 0) { scrollTo = true; }
    var resourceHash;
    var resource;
    if (input instanceof ResourceApi) {
        resource = input._resource;
        resourceHash = (_a = {}, _a[resource.id] = resource, _a);
    }
    else {
        resourceHash = {};
        resource = parseResource(input, '', resourceHash, this);
    }
    // HACK
    if (scrollTo) {
        this.component.view.addScroll({ forcedRowId: resource.id });
    }
    this.dispatch({
        type: 'ADD_RESOURCE',
        resourceHash: resourceHash
    });
    return new ResourceApi(this, resource);
};
Calendar.prototype.getResourceById = function (id) {
    id = String(id);
    if (this.state.resourceStore) { // guard against calendar with no resource functionality
        var rawResource = this.state.resourceStore[id];
        if (rawResource) {
            return new ResourceApi(this, rawResource);
        }
    }
    return null;
};
Calendar.prototype.getResources = function () {
    var resourceStore = this.state.resourceStore;
    var resourceApis = [];
    if (resourceStore) { // guard against calendar with no resource functionality
        for (var resourceId in resourceStore) {
            resourceApis.push(new ResourceApi(this, resourceStore[resourceId]));
        }
    }
    return resourceApis;
};
Calendar.prototype.getTopLevelResources = function () {
    var resourceStore = this.state.resourceStore;
    var resourceApis = [];
    if (resourceStore) { // guard against calendar with no resource functionality
        for (var resourceId in resourceStore) {
            if (!resourceStore[resourceId].parentId) {
                resourceApis.push(new ResourceApi(this, resourceStore[resourceId]));
            }
        }
    }
    return resourceApis;
};
Calendar.prototype.rerenderResources = function () {
    this.dispatch({
        type: 'RESET_RESOURCES'
    });
};
Calendar.prototype.refetchResources = function () {
    this.dispatch({
        type: 'REFETCH_RESOURCES'
    });
};
function transformDatePoint(dateSpan, calendar) {
    return dateSpan.resourceId ?
        { resource: calendar.getResourceById(dateSpan.resourceId) } :
        {};
}
function transformDateSpan(dateSpan, calendar) {
    return dateSpan.resourceId ?
        { resource: calendar.getResourceById(dateSpan.resourceId) } :
        {};
}

/*
splits things BASED OFF OF which resources they are associated with.
creates a '' entry which is when something has NO resource.
*/
var ResourceSplitter = /** @class */ (function (_super) {
    __extends(ResourceSplitter, _super);
    function ResourceSplitter() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    ResourceSplitter.prototype.getKeyInfo = function (props) {
        return __assign({ '': {} }, props.resourceStore // already has `ui` and `businessHours` keys!
        );
    };
    ResourceSplitter.prototype.getKeysForDateSpan = function (dateSpan) {
        return [dateSpan.resourceId || ''];
    };
    ResourceSplitter.prototype.getKeysForEventDef = function (eventDef) {
        var resourceIds = eventDef.resourceIds;
        if (!resourceIds.length) {
            return [''];
        }
        return resourceIds;
    };
    return ResourceSplitter;
}(Splitter));

function transformExternalDef(dateSpan) {
    return dateSpan.resourceId ?
        { resourceId: dateSpan.resourceId } :
        {};
}

function transformEventResizeJoin(hit0, hit1) {
    var component = hit0.component;
    if (component.allowAcrossResources === false &&
        hit0.dateSpan.resourceId !== hit1.dateSpan.resourceId) {
        return false;
    }
}

EventApi.prototype.getResources = function () {
    var calendar = this._calendar;
    return this._def.resourceIds.map(function (resourceId) {
        return calendar.getResourceById(resourceId);
    });
};
EventApi.prototype.setResources = function (resources) {
    var resourceIds = [];
    // massage resources -> resourceIds
    for (var _i = 0, resources_1 = resources; _i < resources_1.length; _i++) {
        var resource = resources_1[_i];
        var resourceId = null;
        if (typeof resource === 'string') {
            resourceId = resource;
        }
        else if (typeof resource === 'number') {
            resourceId = String(resource);
        }
        else if (resource instanceof ResourceApi) {
            resourceId = resource.id; // guaranteed to always have an ID. hmmm
        }
        else {
            console.warn('unknown resource type: ' + resource);
        }
        if (resourceId) {
            resourceIds.push(resourceId);
        }
    }
    this.mutate({
        standardProps: {
            resourceIds: resourceIds
        }
    });
};

var RELEASE_DATE = '2019-08-10'; // for Scheduler
var UPGRADE_WINDOW = 365 + 7; // days. 1 week leeway, for tz shift reasons too
var LICENSE_INFO_URL = 'http://fullcalendar.io/scheduler/license/';
var PRESET_LICENSE_KEYS = [
    'GPL-My-Project-Is-Open-Source',
    'CC-Attribution-NonCommercial-NoDerivatives'
];
var CSS = {
    position: 'absolute',
    'z-index': 99999,
    bottom: '1px',
    left: '1px',
    background: '#eee',
    'border-color': '#ddd',
    'border-style': 'solid',
    'border-width': '1px 1px 0 0',
    padding: '2px 4px',
    'font-size': '12px',
    'border-top-right-radius': '3px'
};
function injectLicenseWarning(containerEl, calendar) {
    var key = calendar.opt('schedulerLicenseKey');
    if (!isImmuneUrl(window.location.href) && !isValidKey(key)) {
        appendToElement(containerEl, '

' +
'Please use a valid license key. More Info' +
'

');
    }
}
/*
This decryption is not meant to be bulletproof. Just a way to remind about an upgrade.
*/
function isValidKey(key) {
    if (PRESET_LICENSE_KEYS.indexOf(key) !== -1) {
        return true;
    }
    var parts = (key || '').match(/^(\d+)\-fcs\-(\d+)$/);
    if (parts && (parts[1].length === 10)) {
        var purchaseDate = new Date(parseInt(parts[2], 10) * 1000);
        var releaseDate = new Date(config.mockSchedulerReleaseDate || RELEASE_DATE);
        if (isValidDate(releaseDate)) { // token won't be replaced in dev mode
            var minPurchaseDate = addDays(releaseDate, -UPGRADE_WINDOW);
            if (minPurchaseDate < purchaseDate) {
                return true;
            }
        }
    }
    return false;
}
function isImmuneUrl(url) {
    return /\w+\:\/\/fullcalendar\.io\/|\/examples\/[\w-]+\.html$/.test(url);
}

registerResourceSourceDef({
    ignoreRange: true,
    parseMeta: function (raw) {
        if (Array.isArray(raw)) {
            return raw;
        }
        else if (Array.isArray(raw.resources)) {
            return raw.resources;
        }
        return null;
    },
    fetch: function (arg, successCallback) {
        successCallback({
            rawResources: arg.resourceSource.meta
        });
    }
});

registerResourceSourceDef({
    parseMeta: function (raw) {
        if (typeof raw === 'function') {
            return raw;
        }
        else if (typeof raw.resources === 'function') {
            return raw.resources;
        }
        return null;
    },
    fetch: function (arg, success, failure) {
        var dateEnv = arg.calendar.dateEnv;
        var func = arg.resourceSource.meta;
        var publicArg = {};
        if (arg.range) {
            publicArg = {
                start: dateEnv.toDate(arg.range.start),
                end: dateEnv.toDate(arg.range.end),
                startStr: dateEnv.formatIso(arg.range.start),
                endStr: dateEnv.formatIso(arg.range.end),
                timeZone: dateEnv.timeZone
            };
        }
        // TODO: make more dry with EventSourceFunc
        // TODO: accept a response?
        unpromisify(func.bind(null, publicArg), function (rawResources) {
            success({ rawResources: rawResources }); // needs an object response
        }, failure // send errorObj directly to failure callback
        );
    }
});

registerResourceSourceDef({
    parseMeta: function (raw) {
        if (typeof raw === 'string') {
            raw = { url: raw };
        }
        else if (!raw || typeof raw !== 'object' || !raw.url) {
            return null;
        }
        return {
            url: raw.url,
            method: (raw.method || 'GET').toUpperCase(),
            extraParams: raw.extraParams
        };
    },
    fetch: function (arg, successCallback, failureCallback) {
        var meta = arg.resourceSource.meta;
        var requestParams = buildRequestParams(meta, arg.range, arg.calendar);
        requestJson(meta.method, meta.url, requestParams, function (rawResources, xhr) {
            successCallback({ rawResources: rawResources, xhr: xhr });
        }, function (message, xhr) {
            failureCallback({ message: message, xhr: xhr });
        });
    }
});
// TODO: somehow consolidate with event json feed
function buildRequestParams(meta, range, calendar) {
    var dateEnv = calendar.dateEnv;
    var startParam;
    var endParam;
    var timeZoneParam;
    var customRequestParams;
    var params = {};
    if (range) {
        // startParam = meta.startParam
        // if (startParam == null) {
        startParam = calendar.opt('startParam');
        // }
        // endParam = meta.endParam
        // if (endParam == null) {
        endParam = calendar.opt('endParam');
        // }
        // timeZoneParam = meta.timeZoneParam
        // if (timeZoneParam == null) {
        timeZoneParam = calendar.opt('timeZoneParam');
        // }
        params[startParam] = dateEnv.formatIso(range.start);
        params[endParam] = dateEnv.formatIso(range.end);
        if (dateEnv.timeZone !== 'local') {
            params[timeZoneParam] = dateEnv.timeZone;
        }
    }
    // retrieve any outbound GET/POST data from the options
    if (typeof meta.extraParams === 'function') {
        // supplied as a function that returns a key/value object
        customRequestParams = meta.extraParams();
    }
    else {
        // probably supplied as a straight key/value object
        customRequestParams = meta.extraParams || {};
    }
    __assign(params, customRequestParams);
    return params;
}

var ResourceDayHeader = /** @class */ (function (_super) {
    __extends(ResourceDayHeader, _super);
    function ResourceDayHeader(context, parentEl) {
        var _this = _super.call(this, context) || this;
        _this.datesAboveResources = _this.opt('datesAboveResources');
        _this.resourceTextFunc = buildResourceTextFunc(_this.opt('resourceText'), _this.calendar);
        parentEl.innerHTML = ''; // because might be nbsp
        parentEl.appendChild(_this.el = htmlToElement('

' +
            '' +
            '' +
            '' +
            '

'));
        _this.thead = _this.el.querySelector('thead');
        return _this;
    }
    ResourceDayHeader.prototype.destroy = function () {
        removeElement(this.el);
    };
    ResourceDayHeader.prototype.render = function (props) {
        var html;
        this.dateFormat = createFormatter(this.opt('columnHeaderFormat') ||
            computeFallbackHeaderFormat(props.datesRepDistinctDays, props.dates.length));
        if (props.dates.length === 1) {
            html = this.renderResourceRow(props.resources);
        }
        else {
            if (this.datesAboveResources) {
                html = this.renderDayAndResourceRows(props.dates, props.resources);
            }
            else {
                html = this.renderResourceAndDayRows(props.resources, props.dates);
            }
        }
        this.thead.innerHTML = html;
        this.processResourceEls(props.resources);
    };
    ResourceDayHeader.prototype.renderResourceRow = function (resources) {
        var _this = this;
        var cellHtmls = resources.map(function (resource) {
            return _this.renderResourceCell(resource, 1);
        });
        return this.buildTr(cellHtmls);
    };
    ResourceDayHeader.prototype.renderDayAndResourceRows = function (dates, resources) {
        var dateHtmls = [];
        var resourceHtmls = [];
        for (var _i = 0, dates_1 = dates; _i < dates_1.length; _i++) {
            var date = dates_1[_i];
            dateHtmls.push(this.renderDateCell(date, resources.length));
            for (var _a = 0, resources_1 = resources; _a < resources_1.length; _a++) {
                var resource = resources_1[_a];
                resourceHtmls.push(this.renderResourceCell(resource, 1, date));
            }
        }
        return this.buildTr(dateHtmls) +
            this.buildTr(resourceHtmls);
    };
    ResourceDayHeader.prototype.renderResourceAndDayRows = function (resources, dates) {
        var resourceHtmls = [];
        var dateHtmls = [];
        for (var _i = 0, resources_2 = resources; _i < resources_2.length; _i++) {
            var resource = resources_2[_i];
            resourceHtmls.push(this.renderResourceCell(resource, dates.length));
            for (var _a = 0, dates_2 = dates; _a < dates_2.length; _a++) {
                var date = dates_2[_a];
                dateHtmls.push(this.renderDateCell(date, 1, resource));
            }
        }
        return this.buildTr(resourceHtmls) +
            this.buildTr(dateHtmls);
    };
    // Cell Rendering Utils
    // ----------------------------------------------------------------------------------------------
    // a cell with the resource name. might be associated with a specific day
    ResourceDayHeader.prototype.renderResourceCell = function (resource, colspan, date) {
        var dateEnv = this.dateEnv;
        return ' 1 ?
                ' colspan="' + colspan + '"' :
                '') +
            '>' +
            htmlEscape(this.resourceTextFunc(resource)) +
            '';
    };
    // a cell with date text. might have a resource associated with it
    ResourceDayHeader.prototype.renderDateCell = function (date, colspan, resource) {
        var props = this.props;
        return renderDateCell(date, props.dateProfile, props.datesRepDistinctDays, props.dates.length * props.resources.length, this.dateFormat, this.context, colspan, resource ? 'data-resource-id="' + resource.id + '"' : '');
    };
    ResourceDayHeader.prototype.buildTr = function (cellHtmls) {
        if (!cellHtmls.length) {
            cellHtmls = [' '];
        }
        if (this.props.renderIntroHtml) {
            cellHtmls = [this.props.renderIntroHtml()].concat(cellHtmls);
        }
        if (this.isRtl) {
            cellHtmls.reverse();
        }
        return '' +
            cellHtmls.join('') +
            '';
    };
    // Post-rendering
    // ----------------------------------------------------------------------------------------------
    // given a container with already rendered resource cells
    ResourceDayHeader.prototype.processResourceEls = function (resources) {
        var _this = this;
        var view = this.view;
        findElements(this.thead, '.fc-resource-cell').forEach(function (node, col) {
            col = col % resources.length;
            if (_this.isRtl) {
                col = resources.length - 1 - col;
            }
            var resource = resources[col];
            view.publiclyTrigger('resourceRender', [
                {
                    resource: new ResourceApi(_this.calendar, resource),
                    el: node,
                    view: view
                }
            ]);
        });
    };
    return ResourceDayHeader;
}(Component));

/*
doesn't accept grouping
*/
function flattenResources(resourceStore, orderSpecs) {
    return buildRowNodes(resourceStore, [], orderSpecs, false, {}, true)
        .map(function (node) {
        return node.resource;
    });
}
function buildRowNodes(resourceStore, groupSpecs, orderSpecs, isVGrouping, expansions, expansionDefault) {
    var complexNodes = buildHierarchy(resourceStore, isVGrouping ? -1 : 1, groupSpecs, orderSpecs);
    var flatNodes = [];
    flattenNodes(complexNodes, flatNodes, isVGrouping, [], 0, expansions, expansionDefault);
    return flatNodes;
}
function flattenNodes(complexNodes, res, isVGrouping, rowSpans, depth, expansions, expansionDefault) {
    for (var i = 0; i < complexNodes.length; i++) {
        var complexNode = complexNodes[i];
        var group = complexNode.group;
        if (group) {
            if (isVGrouping) {
                var firstRowIndex = res.length;
                var rowSpanIndex = rowSpans.length;
                flattenNodes(complexNode.children, res, isVGrouping, rowSpans.concat(0), depth, expansions, expansionDefault);
                if (firstRowIndex < res.length) {
                    var firstRow = res[firstRowIndex];
                    var firstRowSpans = firstRow.rowSpans = firstRow.rowSpans.slice();
                    firstRowSpans[rowSpanIndex] = res.length - firstRowIndex;
                }
            }
            else {
                var id = group.spec.field + ':' + group.value;
                var isExpanded = expansions[id] != null ? expansions[id] : expansionDefault;
                res.push({ id: id, group: group, isExpanded: isExpanded });
                if (isExpanded) {
                    flattenNodes(complexNode.children, res, isVGrouping, rowSpans, depth + 1, expansions, expansionDefault);
                }
            }
        }
        else if (complexNode.resource) {
            var id = complexNode.resource.id;
            var isExpanded = expansions[id] != null ? expansions[id] : expansionDefault;
            res.push({
                id: id,
                rowSpans: rowSpans,
                depth: depth,
                isExpanded: isExpanded,
                hasChildren: Boolean(complexNode.children.length),
                resource: complexNode.resource,
                resourceFields: complexNode.resourceFields
            });
            if (isExpanded) {
                flattenNodes(complexNode.children, res, isVGrouping, rowSpans, depth + 1, expansions, expansionDefault);
            }
        }
    }
}
function buildHierarchy(resourceStore, maxDepth, groupSpecs, orderSpecs) {
    var resourceNodes = buildResourceNodes(resourceStore, orderSpecs);
    var builtNodes = [];
    for (var resourceId in resourceNodes) {
        var resourceNode = resourceNodes[resourceId];
        if (!resourceNode.resource.parentId) {
            insertResourceNode(resourceNode, builtNodes, groupSpecs, 0, maxDepth, orderSpecs);
        }
    }
    return builtNodes;
}
function buildResourceNodes(resourceStore, orderSpecs) {
    var nodeHash = {};
    for (var resourceId in resourceStore) {
        var resource = resourceStore[resourceId];
        nodeHash[resourceId] = {
            resource: resource,
            resourceFields: buildResourceFields(resource),
            children: []
        };
    }
    for (var resourceId in resourceStore) {
        var resource = resourceStore[resourceId];
        if (resource.parentId) {
            var parentNode = nodeHash[resource.parentId];
            if (parentNode) {
                insertResourceNodeInSiblings(nodeHash[resourceId], parentNode.children, orderSpecs);
            }
        }
    }
    return nodeHash;
}
function insertResourceNode(resourceNode, nodes, groupSpecs, depth, maxDepth, orderSpecs) {
    if (groupSpecs.length && (maxDepth === -1 || depth <= maxDepth)) {
        var groupNode = ensureGroupNodes(resourceNode, nodes, groupSpecs[0]);
        insertResourceNode(resourceNode, groupNode.children, groupSpecs.slice(1), depth + 1, maxDepth, orderSpecs);
    }
    else {
        insertResourceNodeInSiblings(resourceNode, nodes, orderSpecs);
    }
}
function ensureGroupNodes(resourceNode, nodes, groupSpec) {
    var groupValue = resourceNode.resourceFields[groupSpec.field];
    var groupNode;
    var newGroupIndex;
    // find an existing group that matches, or determine the position for a new group
    if (groupSpec.order) {
        for (newGroupIndex = 0; newGroupIndex < nodes.length; newGroupIndex++) {
            var node = nodes[newGroupIndex];
            if (node.group) {
                var cmp = flexibleCompare(groupValue, node.group.value) * groupSpec.order;
                if (cmp === 0) {
                    groupNode = node;
                    break;
                }
                else if (cmp < 0) {
                    break;
                }
            }
        }
    }
    else { // the groups are unordered
        for (newGroupIndex = 0; newGroupIndex < nodes.length; newGroupIndex++) {
            var node = nodes[newGroupIndex];
            if (node.group && groupValue === node.group.value) {
                groupNode = node;
                break;
            }
        }
    }
    if (!groupNode) {
        groupNode = {
            group: {
                value: groupValue,
                spec: groupSpec
            },
            children: []
        };
        nodes.splice(newGroupIndex, 0, groupNode);
    }
    return groupNode;
}
function insertResourceNodeInSiblings(resourceNode, siblings, orderSpecs) {
    var i;
    for (i = 0; i < siblings.length; i++) {
        var cmp = compareByFieldSpecs(siblings[i].resourceFields, resourceNode.resourceFields, orderSpecs);
        if (cmp > 0) { // went 1 past. insert at i
            break;
        }
    }
    siblings.splice(i, 0, resourceNode);
}
function buildResourceFields(resource) {
    var obj = __assign({}, resource.extendedProps, resource.ui, resource);
    delete obj.ui;
    delete obj.extendedProps;
    return obj;
}
function isGroupsEqual(group0, group1) {
    return group0.spec === group1.spec && group0.value === group1.value;
}

var main = createPlugin({
    reducers: [resourcesReducers],
    eventDefParsers: [parseEventDef],
    isDraggableTransformers: [transformIsDraggable],
    eventDragMutationMassagers: [massageEventDragMutation],
    eventDefMutationAppliers: [applyEventDefMutation],
    dateSelectionTransformers: [transformDateSelectionJoin],
    datePointTransforms: [transformDatePoint],
    dateSpanTransforms: [transformDateSpan],
    viewPropsTransformers: [ResourceDataAdder, ResourceEventConfigAdder],
    isPropsValid: isPropsValidWithResources,
    externalDefTransforms: [transformExternalDef],
    eventResizeJoinTransforms: [transformEventResizeJoin],
    viewContainerModifiers: [injectLicenseWarning],
    eventDropTransformers: [transformEventDrop],
    optionChangeHandlers: optionChangeHandlers
});

export default main;
export { AbstractResourceDayTable, DayResourceTable, ResourceApi, ResourceDayHeader, ResourceDayTable, ResourceSplitter, VResourceJoiner, VResourceSplitter, buildResourceFields, buildResourceTextFunc, buildRowNodes, flattenResources, isGroupsEqual };

/*!
FullCalendar Resources Common Plugin v4.3.1
Docs & License: https://fullcalendar.io/scheduler
(c) 2019 Adam Shaw
*/

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@fullcalendar/core')) :
    typeof define === 'function' && define.amd ? define(['exports', '@fullcalendar/core'], factory) :
    (global = global || self, factory(global.FullCalendarResourceCommon = {}, global.FullCalendar));
}(this, function (exports, core) { 'use strict';

    /*! *****************************************************************************
    Copyright (c) Microsoft Corporation. All rights reserved.
    Licensed under the Apache License, Version 2.0 (the "License"); you may not use
    this file except in compliance with the License. You may obtain a copy of the
    License at http://www.apache.org/licenses/LICENSE-2.0

    THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
    KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
    WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
    MERCHANTABLITY OR NON-INFRINGEMENT.

    See the Apache Version 2.0 License for specific language governing permissions
    and limitations under the License.
    ***************************************************************************** */
    /* global Reflect, Promise */

    function __extends(d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    }

    core.Calendar.prototype.addResource = function (input, scrollTo) {
        var _a;
        if (scrollTo === void 0) { scrollTo = true; }
        var resourceHash;
        var resource;
        if (input instanceof ResourceApi) {
            resource = input._resource;
            resourceHash = (_a = {}, _a[resource.id] = resource, _a);
        }
        else {
            resourceHash = {};
            resource = parseResource(input, '', resourceHash, this);
        }
        // HACK
        if (scrollTo) {
            this.component.view.addScroll({ forcedRowId: resource.id });
        }
        this.dispatch({
            type: 'ADD_RESOURCE',
            resourceHash: resourceHash
        });
        return new ResourceApi(this, resource);
    };
    core.Calendar.prototype.getResourceById = function (id) {
        id = String(id);
        if (this.state.resourceStore) { // guard against calendar with no resource functionality
            var rawResource = this.state.resourceStore[id];
            if (rawResource) {
                return new ResourceApi(this, rawResource);
            }
        }
        return null;
    };
    core.Calendar.prototype.getResources = function () {
        var resourceStore = this.state.resourceStore;
        var resourceApis = [];
        if (resourceStore) { // guard against calendar with no resource functionality
            for (var resourceId in resourceStore) {
                resourceApis.push(new ResourceApi(this, resourceStore[resourceId]));
            }
        }
        return resourceApis;
    };
    core.Calendar.prototype.getTopLevelResources = function () {
        var resourceStore = this.state.resourceStore;
        var resourceApis = [];
        if (resourceStore) { // guard against calendar with no resource functionality
            for (var resourceId in resourceStore) {
                if (!resourceStore[resourceId].parentId) {
                    resourceApis.push(new ResourceApi(this, resourceStore[resourceId]));
                }
            }
        }
        return resourceApis;
    };
    core.Calendar.prototype.rerenderResources = function () {
        this.dispatch({
            type: 'RESET_RESOURCES'
        });
    };
    core.Calendar.prototype.refetchResources = function () {
        this.dispatch({
            type: 'REFETCH_RESOURCES'
        });
    };
    function transformDatePoint(dateSpan, calendar) {
        return dateSpan.resourceId ?
            { resource: calendar.getResourceById(dateSpan.resourceId) } :
            {};
    }
    function transformDateSpan(dateSpan, calendar) {
        return dateSpan.resourceId ?
            { resource: calendar.getResourceById(dateSpan.resourceId) } :
            {};
    }

    /*
    splits things BASED OFF OF which resources they are associated with.
    creates a '' entry which is when something has NO resource.
    */
    var ResourceSplitter = /** @class */ (function (_super) {
        __extends(ResourceSplitter, _super);
        function ResourceSplitter() {
            return _super !== null && _super.apply(this, arguments) || this;
        }
        ResourceSplitter.prototype.getKeyInfo = function (props) {
            return __assign({ '': {} }, props.resourceStore // already has `ui` and `businessHours` keys!
            );
        };
        ResourceSplitter.prototype.getKeysForDateSpan = function (dateSpan) {
            return [dateSpan.resourceId || ''];
        };
        ResourceSplitter.prototype.getKeysForEventDef = function (eventDef) {
            var resourceIds = eventDef.resourceIds;
            if (!resourceIds.length) {
                return [''];
            }
            return resourceIds;
        };
        return ResourceSplitter;
    }(core.Splitter));

    function transformExternalDef(dateSpan) {
        return dateSpan.resourceId ?
            { resourceId: dateSpan.resourceId } :
            {};
    }

    function transformEventResizeJoin(hit0, hit1) {
        var component = hit0.component;
        if (component.allowAcrossResources === false &&
            hit0.dateSpan.resourceId !== hit1.dateSpan.resourceId) {
            return false;
        }
    }

    core.EventApi.prototype.getResources = function () {
        var calendar = this._calendar;
        return this._def.resourceIds.map(function (resourceId) {
            return calendar.getResourceById(resourceId);
        });
    };
    core.EventApi.prototype.setResources = function (resources) {
        var resourceIds = [];
        // massage resources -> resourceIds
        for (var _i = 0, resources_1 = resources; _i < resources_1.length; _i++) {
            var resource = resources_1[_i];
            var resourceId = null;
            if (typeof resource === 'string') {
                resourceId = resource;
            }
            else if (typeof resource === 'number') {
                resourceId = String(resource);
            }
            else if (resource instanceof ResourceApi) {
                resourceId = resource.id; // guaranteed to always have an ID. hmmm
            }
            else {
                console.warn('unknown resource type: ' + resource);
            }
            if (resourceId) {
                resourceIds.push(resourceId);
            }
        }
        this.mutate({
            standardProps: {
                resourceIds: resourceIds
            }
        });
    };

    var RELEASE_DATE = '2019-08-10'; // for Scheduler
    var UPGRADE_WINDOW = 365 + 7; // days. 1 week leeway, for tz shift reasons too
    var LICENSE_INFO_URL = 'http://fullcalendar.io/scheduler/license/';
    var PRESET_LICENSE_KEYS = [
        'GPL-My-Project-Is-Open-Source',
        'CC-Attribution-NonCommercial-NoDerivatives'
    ];
    var CSS = {
        position: 'absolute',
        'z-index': 99999,
        bottom: '1px',
        left: '1px',
        background: '#eee',
        'border-color': '#ddd',
        'border-style': 'solid',
        'border-width': '1px 1px 0 0',
        padding: '2px 4px',
        'font-size': '12px',
        'border-top-right-radius': '3px'
    };
    function injectLicenseWarning(containerEl, calendar) {
        var key = calendar.opt('schedulerLicenseKey');
        if (!isImmuneUrl(window.location.href) && !isValidKey(key)) {
            core.appendToElement(containerEl, '

' +
'Please use a valid license key. More Info' +
'

');
        }
    }
    /*
    This decryption is not meant to be bulletproof. Just a way to remind about an upgrade.
    */
    function isValidKey(key) {
        if (PRESET_LICENSE_KEYS.indexOf(key) !== -1) {
            return true;
        }
        var parts = (key || '').match(/^(\d+)\-fcs\-(\d+)$/);
        if (parts && (parts[1].length === 10)) {
            var purchaseDate = new Date(parseInt(parts[2], 10) * 1000);
            var releaseDate = new Date(core.config.mockSchedulerReleaseDate || RELEASE_DATE);
            if (core.isValidDate(releaseDate)) { // token won't be replaced in dev mode
                var minPurchaseDate = core.addDays(releaseDate, -UPGRADE_WINDOW);
                if (minPurchaseDate < purchaseDate) {
                    return true;
                }
            }
        }
        return false;
    }
    function isImmuneUrl(url) {
        return /\w+\:\/\/fullcalendar\.io\/|\/examples\/[\w-]+\.html$/.test(url);
    }

    registerResourceSourceDef({
        ignoreRange: true,
        parseMeta: function (raw) {
            if (Array.isArray(raw)) {
                return raw;
            }
            else if (Array.isArray(raw.resources)) {
                return raw.resources;
            }
            return null;
        },
        fetch: function (arg, successCallback) {
            successCallback({
                rawResources: arg.resourceSource.meta
            });
        }
    });

    registerResourceSourceDef({
        parseMeta: function (raw) {
            if (typeof raw === 'function') {
                return raw;
            }
            else if (typeof raw.resources === 'function') {
                return raw.resources;
            }
            return null;
        },
        fetch: function (arg, success, failure) {
            var dateEnv = arg.calendar.dateEnv;
            var func = arg.resourceSource.meta;
            var publicArg = {};
            if (arg.range) {
                publicArg = {
                    start: dateEnv.toDate(arg.range.start),
                    end: dateEnv.toDate(arg.range.end),
                    startStr: dateEnv.formatIso(arg.range.start),
                    endStr: dateEnv.formatIso(arg.range.end),
                    timeZone: dateEnv.timeZone
                };
            }
            // TODO: make more dry with EventSourceFunc
            // TODO: accept a response?
            core.unpromisify(func.bind(null, publicArg), function (rawResources) {
                success({ rawResources: rawResources }); // needs an object response
            }, failure // send errorObj directly to failure callback
            );
        }
    });

    registerResourceSourceDef({
        parseMeta: function (raw) {
            if (typeof raw === 'string') {
                raw = { url: raw };
            }
            else if (!raw || typeof raw !== 'object' || !raw.url) {
                return null;
            }
            return {
                url: raw.url,
                method: (raw.method || 'GET').toUpperCase(),
                extraParams: raw.extraParams
            };
        },
        fetch: function (arg, successCallback, failureCallback) {
            var meta = arg.resourceSource.meta;
            var requestParams = buildRequestParams(meta, arg.range, arg.calendar);
            core.requestJson(meta.method, meta.url, requestParams, function (rawResources, xhr) {
                successCallback({ rawResources: rawResources, xhr: xhr });
            }, function (message, xhr) {
                failureCallback({ message: message, xhr: xhr });
            });
        }
    });
    // TODO: somehow consolidate with event json feed
    function buildRequestParams(meta, range, calendar) {
        var dateEnv = calendar.dateEnv;
        var startParam;
        var endParam;
        var timeZoneParam;
        var customRequestParams;
        var params = {};
        if (range) {
            // startParam = meta.startParam
            // if (startParam == null) {
            startParam = calendar.opt('startParam');
            // }
            // endParam = meta.endParam
            // if (endParam == null) {
            endParam = calendar.opt('endParam');
            // }
            // timeZoneParam = meta.timeZoneParam
            // if (timeZoneParam == null) {
            timeZoneParam = calendar.opt('timeZoneParam');
            // }
            params[startParam] = dateEnv.formatIso(range.start);
            params[endParam] = dateEnv.formatIso(range.end);
            if (dateEnv.timeZone !== 'local') {
                params[timeZoneParam] = dateEnv.timeZone;
            }
        }
        // retrieve any outbound GET/POST data from the options
        if (typeof meta.extraParams === 'function') {
            // supplied as a function that returns a key/value object
            customRequestParams = meta.extraParams();
        }
        else {
            // probably supplied as a straight key/value object
            customRequestParams = meta.extraParams || {};
        }
        __assign(params, customRequestParams);
        return params;
    }

    var ResourceDayHeader = /** @class */ (function (_super) {
        __extends(ResourceDayHeader, _super);
        function ResourceDayHeader(context, parentEl) {
            var _this = _super.call(this, context) || this;
            _this.datesAboveResources = _this.opt('datesAboveResources');
            _this.resourceTextFunc = buildResourceTextFunc(_this.opt('resourceText'), _this.calendar);
            parentEl.innerHTML = ''; // because might be nbsp
            parentEl.appendChild(_this.el = core.htmlToElement('

' +
                '' +
                '' +
                '' +
                '

'));
            _this.thead = _this.el.querySelector('thead');
            return _this;
        }
        ResourceDayHeader.prototype.destroy = function () {
            core.removeElement(this.el);
        };
        ResourceDayHeader.prototype.render = function (props) {
            var html;
            this.dateFormat = core.createFormatter(this.opt('columnHeaderFormat') ||
                core.computeFallbackHeaderFormat(props.datesRepDistinctDays, props.dates.length));
            if (props.dates.length === 1) {
                html = this.renderResourceRow(props.resources);
            }
            else {
                if (this.datesAboveResources) {
                    html = this.renderDayAndResourceRows(props.dates, props.resources);
                }
                else {
                    html = this.renderResourceAndDayRows(props.resources, props.dates);
                }
            }
            this.thead.innerHTML = html;
            this.processResourceEls(props.resources);
        };
        ResourceDayHeader.prototype.renderResourceRow = function (resources) {
            var _this = this;
            var cellHtmls = resources.map(function (resource) {
                return _this.renderResourceCell(resource, 1);
            });
            return this.buildTr(cellHtmls);
        };
        ResourceDayHeader.prototype.renderDayAndResourceRows = function (dates, resources) {
            var dateHtmls = [];
            var resourceHtmls = [];
            for (var _i = 0, dates_1 = dates; _i < dates_1.length; _i++) {
                var date = dates_1[_i];
                dateHtmls.push(this.renderDateCell(date, resources.length));
                for (var _a = 0, resources_1 = resources; _a < resources_1.length; _a++) {
                    var resource = resources_1[_a];
                    resourceHtmls.push(this.renderResourceCell(resource, 1, date));
                }
            }
            return this.buildTr(dateHtmls) +
                this.buildTr(resourceHtmls);
        };
        ResourceDayHeader.prototype.renderResourceAndDayRows = function (resources, dates) {
            var resourceHtmls = [];
            var dateHtmls = [];
            for (var _i = 0, resources_2 = resources; _i < resources_2.length; _i++) {
                var resource = resources_2[_i];
                resourceHtmls.push(this.renderResourceCell(resource, dates.length));
                for (var _a = 0, dates_2 = dates; _a < dates_2.length; _a++) {
                    var date = dates_2[_a];
                    dateHtmls.push(this.renderDateCell(date, 1, resource));
                }
            }
            return this.buildTr(resourceHtmls) +
                this.buildTr(dateHtmls);
        };
        // Cell Rendering Utils
        // ----------------------------------------------------------------------------------------------
        // a cell with the resource name. might be associated with a specific day
        ResourceDayHeader.prototype.renderResourceCell = function (resource, colspan, date) {
            var dateEnv = this.dateEnv;
            return ' 1 ?
                    ' colspan="' + colspan + '"' :
                    '') +
                '>' +
                core.htmlEscape(this.resourceTextFunc(resource)) +
                '';
        };
        // a cell with date text. might have a resource associated with it
        ResourceDayHeader.prototype.renderDateCell = function (date, colspan, resource) {
            var props = this.props;
            return core.renderDateCell(date, props.dateProfile, props.datesRepDistinctDays, props.dates.length * props.resources.length, this.dateFormat, this.context, colspan, resource ? 'data-resource-id="' + resource.id + '"' : '');
        };
        ResourceDayHeader.prototype.buildTr = function (cellHtmls) {
            if (!cellHtmls.length) {
                cellHtmls = [' '];
            }
            if (this.props.renderIntroHtml) {
                cellHtmls = [this.props.renderIntroHtml()].concat(cellHtmls);
            }
            if (this.isRtl) {
                cellHtmls.reverse();
            }
            return '' +
                cellHtmls.join('') +
                '';
        };
        // Post-rendering
        // ----------------------------------------------------------------------------------------------
        // given a container with already rendered resource cells
        ResourceDayHeader.prototype.processResourceEls = function (resources) {
            var _this = this;
            var view = this.view;
            core.findElements(this.thead, '.fc-resource-cell').forEach(function (node, col) {
                col = col % resources.length;
                if (_this.isRtl) {
                    col = resources.length - 1 - col;
                }
                var resource = resources[col];
                view.publiclyTrigger('resourceRender', [
                    {
                        resource: new ResourceApi(_this.calendar, resource),
                        el: node,
                        view: view
                    }
                ]);
            });
        };
        return ResourceDayHeader;
    }(core.Component));

    /*
    doesn't accept grouping
    */
    function flattenResources(resourceStore, orderSpecs) {
        return buildRowNodes(resourceStore, [], orderSpecs, false, {}, true)
            .map(function (node) {
            return node.resource;
        });
    }
    function buildRowNodes(resourceStore, groupSpecs, orderSpecs, isVGrouping, expansions, expansionDefault) {
        var complexNodes = buildHierarchy(resourceStore, isVGrouping ? -1 : 1, groupSpecs, orderSpecs);
        var flatNodes = [];
        flattenNodes(complexNodes, flatNodes, isVGrouping, [], 0, expansions, expansionDefault);
        return flatNodes;
    }
    function flattenNodes(complexNodes, res, isVGrouping, rowSpans, depth, expansions, expansionDefault) {
        for (var i = 0; i < complexNodes.length; i++) {
            var complexNode = complexNodes[i];
            var group = complexNode.group;
            if (group) {
                if (isVGrouping) {
                    var firstRowIndex = res.length;
                    var rowSpanIndex = rowSpans.length;
                    flattenNodes(complexNode.children, res, isVGrouping, rowSpans.concat(0), depth, expansions, expansionDefault);
                    if (firstRowIndex < res.length) {
                        var firstRow = res[firstRowIndex];
                        var firstRowSpans = firstRow.rowSpans = firstRow.rowSpans.slice();
                        firstRowSpans[rowSpanIndex] = res.length - firstRowIndex;
                    }
                }
                else {
                    var id = group.spec.field + ':' + group.value;
                    var isExpanded = expansions[id] != null ? expansions[id] : expansionDefault;
                    res.push({ id: id, group: group, isExpanded: isExpanded });
                    if (isExpanded) {
                        flattenNodes(complexNode.children, res, isVGrouping, rowSpans, depth + 1, expansions, expansionDefault);
                    }
                }
            }
            else if (complexNode.resource) {
                var id = complexNode.resource.id;
                var isExpanded = expansions[id] != null ? expansions[id] : expansionDefault;
                res.push({
                    id: id,
                    rowSpans: rowSpans,
                    depth: depth,
                    isExpanded: isExpanded,
                    hasChildren: Boolean(complexNode.children.length),
                    resource: complexNode.resource,
                    resourceFields: complexNode.resourceFields
                });
                if (isExpanded) {
                    flattenNodes(complexNode.children, res, isVGrouping, rowSpans, depth + 1, expansions, expansionDefault);
                }
            }
        }
    }
    function buildHierarchy(resourceStore, maxDepth, groupSpecs, orderSpecs) {
        var resourceNodes = buildResourceNodes(resourceStore, orderSpecs);
        var builtNodes = [];
        for (var resourceId in resourceNodes) {
            var resourceNode = resourceNodes[resourceId];
            if (!resourceNode.resource.parentId) {
                insertResourceNode(resourceNode, builtNodes, groupSpecs, 0, maxDepth, orderSpecs);
            }
        }
        return builtNodes;
    }
    function buildResourceNodes(resourceStore, orderSpecs) {
        var nodeHash = {};
        for (var resourceId in resourceStore) {
            var resource = resourceStore[resourceId];
            nodeHash[resourceId] = {
                resource: resource,
                resourceFields: buildResourceFields(resource),
                children: []
            };
        }
        for (var resourceId in resourceStore) {
            var resource = resourceStore[resourceId];
            if (resource.parentId) {
                var parentNode = nodeHash[resource.parentId];
                if (parentNode) {
                    insertResourceNodeInSiblings(nodeHash[resourceId], parentNode.children, orderSpecs);
                }
            }
        }
        return nodeHash;
    }
    function insertResourceNode(resourceNode, nodes, groupSpecs, depth, maxDepth, orderSpecs) {
        if (groupSpecs.length && (maxDepth === -1 || depth <= maxDepth)) {
            var groupNode = ensureGroupNodes(resourceNode, nodes, groupSpecs[0]);
            insertResourceNode(resourceNode, groupNode.children, groupSpecs.slice(1), depth + 1, maxDepth, orderSpecs);
        }
        else {
            insertResourceNodeInSiblings(resourceNode, nodes, orderSpecs);
        }
    }
    function ensureGroupNodes(resourceNode, nodes, groupSpec) {
        var groupValue = resourceNode.resourceFields[groupSpec.field];
        var groupNode;
        var newGroupIndex;
        // find an existing group that matches, or determine the position for a new group
        if (groupSpec.order) {
            for (newGroupIndex = 0; newGroupIndex < nodes.length; newGroupIndex++) {
                var node = nodes[newGroupIndex];
                if (node.group) {
                    var cmp = core.flexibleCompare(groupValue, node.group.value) * groupSpec.order;
                    if (cmp === 0) {
                        groupNode = node;
                        break;
                    }
                    else if (cmp < 0) {
                        break;
                    }
                }
            }
        }
        else { // the groups are unordered
            for (newGroupIndex = 0; newGroupIndex < nodes.length; newGroupIndex++) {
                var node = nodes[newGroupIndex];
                if (node.group && groupValue === node.group.value) {
                    groupNode = node;
                    break;
                }
            }
        }
        if (!groupNode) {
            groupNode = {
                group: {
                    value: groupValue,
                    spec: groupSpec
                },
                children: []
            };
            nodes.splice(newGroupIndex, 0, groupNode);
        }
        return groupNode;
    }
    function insertResourceNodeInSiblings(resourceNode, siblings, orderSpecs) {
        var i;
        for (i = 0; i < siblings.length; i++) {
            var cmp = core.compareByFieldSpecs(siblings[i].resourceFields, resourceNode.resourceFields, orderSpecs);
            if (cmp > 0) { // went 1 past. insert at i
                break;
            }
        }
        siblings.splice(i, 0, resourceNode);
    }
    function buildResourceFields(resource) {
        var obj = __assign({}, resource.extendedProps, resource.ui, resource);
        delete obj.ui;
        delete obj.extendedProps;
        return obj;
    }
    function isGroupsEqual(group0, group1) {
        return group0.spec === group1.spec && group0.value === group1.value;
    }

    var main = core.createPlugin({
        reducers: [resourcesReducers],
        eventDefParsers: [parseEventDef],
        isDraggableTransformers: [transformIsDraggable],
        eventDragMutationMassagers: [massageEventDragMutation],
        eventDefMutationAppliers: [applyEventDefMutation],
        dateSelectionTransformers: [transformDateSelectionJoin],
        datePointTransforms: [transformDatePoint],
        dateSpanTransforms: [transformDateSpan],
        viewPropsTransformers: [ResourceDataAdder, ResourceEventConfigAdder],
        isPropsValid: isPropsValidWithResources,
        externalDefTransforms: [transformExternalDef],
        eventResizeJoinTransforms: [transformEventResizeJoin],
        viewContainerModifiers: [injectLicenseWarning],
        eventDropTransformers: [transformEventDrop],
        optionChangeHandlers: optionChangeHandlers
    });

    exports.AbstractResourceDayTable = AbstractResourceDayTable;
    exports.DayResourceTable = DayResourceTable;
    exports.ResourceApi = ResourceApi;
    exports.ResourceDayHeader = ResourceDayHeader;
    exports.ResourceDayTable = ResourceDayTable;
    exports.ResourceSplitter = ResourceSplitter;
    exports.VResourceJoiner = VResourceJoiner;
    exports.VResourceSplitter = VResourceSplitter;
    exports.buildResourceFields = buildResourceFields;
    exports.buildResourceTextFunc = buildResourceTextFunc;
    exports.buildRowNodes = buildRowNodes;
    exports.default = main;
    exports.flattenResources = flattenResources;
    exports.isGroupsEqual = isGroupsEqual;

Object.defineProperty(exports, '__esModule', { value: true });

}));

// Generated by dts-bundle v0.7.3-fork.1
// Dependencies for this module:
// ambient.d.ts

declare module '@fullcalendar/resource-common' {
    import '@fullcalendar/resource-common/ambient';
    import '@fullcalendar/resource-common/api/EventApi';
    import '@fullcalendar/resource-common/resource-sources/resource-array';
    import '@fullcalendar/resource-common/resource-sources/resource-func';
    import '@fullcalendar/resource-common/resource-sources/resource-json-feed';
    const _default: import("@fullcalendar/core").PluginDef;
    export default _default;
    export { default as ResourceDayHeader } from '@fullcalendar/resource-common/common/ResourceDayHeader';
    export { VResourceJoiner, AbstractResourceDayTable, ResourceDayTable, DayResourceTable, VResourceSplitter } from '@fullcalendar/resource-common/common/resource-day-table';
    export { Resource, ResourceHash } from '@fullcalendar/resource-common/structs/resource';
    export { ResourceViewProps } from '@fullcalendar/resource-common/View';
    export { flattenResources, Group, isGroupsEqual, GroupNode, ResourceNode, buildRowNodes, buildResourceFields } from '@fullcalendar/resource-common/common/resource-hierarchy';
    export { buildResourceTextFunc } from '@fullcalendar/resource-common/common/resource-rendering';
    export { default as ResourceApi } from '@fullcalendar/resource-common/api/ResourceApi';
    export { default as ResourceSplitter } from '@fullcalendar/resource-common/common/ResourceSplitter';
}

declare module '@fullcalendar/resource-common/ambient' {
    import ResourceApi from '@fullcalendar/resource-common/api/ResourceApi';
    import { ResourceSourceInput, ResourceSource } from '@fullcalendar/resource-common/structs/resource-source';
    import { View } from '@fullcalendar/core';
    import { ResourceHash } from '@fullcalendar/resource-common/structs/resource';
    import { ResourceEntityExpansions } from '@fullcalendar/resource-common/reducers/resourceEntityExpansions';
    import { ResourceAction } from '@fullcalendar/resource-common/reducers/resources';
    module '@fullcalendar/core' {
        interface Calendar {
            addResource(input: ResourceSourceInput): ResourceApi;
            getResourceById(id: string): ResourceApi | null;
            getResources(): ResourceApi[];
            getTopLevelResources(): ResourceApi[];
            rerenderResources(): void;
            refetchResources(): void;
        }
        interface Calendar {
            dispatch(action: ResourceAction): any;
        }
        interface CalendarState {
            resourceSource?: ResourceSource | null;
            resourceStore?: ResourceHash;
            resourceEntityExpansions?: ResourceEntityExpansions;
        }
        interface OptionsInput {
            schedulerLicenseKey?: string;
            resources?: ResourceSourceInput;
            resourceLabelText?: string;
            resourceOrder?: any;
            filterResourcesWithEvents?: any;
            resourceText?: any;
            resourceGroupField?: any;
            resourceGroupText?: any;
            resourceAreaWidth?: any;
            resourceColumns?: any;
            resourcesInitiallyExpanded?: any;
            slotWidth?: any;
            datesAboveResources?: any;
            eventResourceEditable?: boolean;
            refetchResourcesOnNavigate?: boolean;
            resourceRender?(arg: {
                resource: ResourceApi;
                el: HTMLElement;
                view: View;
            }): void;
        }
        interface DatePointApi {
            resource?: ResourceApi;
        }
        interface DateSpanApi {
            resource?: ResourceApi;
        }
        interface EventMutation {
            resourceMutation?: {
                matchResourceId: string;
                setResourceId: string;
            };
        }
        interface EventApi {
            getResources: () => ResourceApi[];
            setResources: (resources: (string | ResourceApi)[]) => void;
        }
        interface EventDef {
            resourceIds: string[];
            resourceEditable: boolean;
        }
    }
}

declare module '@fullcalendar/resource-common/api/EventApi' {
import '@fullcalendar/resource-common/ambient';
}

declare module '@fullcalendar/resource-common/resource-sources/resource-array' {
export {};
}

declare module '@fullcalendar/resource-common/resource-sources/resource-func' {
    import { ResourceSourceError } from '@fullcalendar/resource-common/structs/resource-source';
    import { ResourceInput } from '@fullcalendar/resource-common/structs/resource';
    export type ResourceFunc = (arg: {
        start: Date;
        end: Date;
        timeZone: string;
    }, successCallback: (events: ResourceInput[]) => void, failureCallback: (errorObj: ResourceSourceError) => void) => any;
}

declare module '@fullcalendar/resource-common/resource-sources/resource-json-feed' {
export {};
}

declare module '@fullcalendar/resource-common/common/ResourceDayHeader' {
    import { Component, ComponentContext, DateMarker, DateProfile, DateFormatter } from '@fullcalendar/core';
    import { Resource } from '@fullcalendar/resource-common/structs/resource';
    export interface ResourceDayHeaderProps {
        dates: DateMarker[];
        dateProfile: DateProfile;
        datesRepDistinctDays: boolean;
        resources: Resource[];
        renderIntroHtml?: () => string;
    }
    export { ResourceDayHeader as default, ResourceDayHeader };
    class ResourceDayHeader extends Component {
        datesAboveResources: boolean;
        resourceTextFunc: (resource: Resource) => string;
        dateFormat: DateFormatter;
        el: HTMLElement;
        thead: HTMLElement;
        constructor(context: ComponentContext, parentEl: HTMLElement);
        destroy(): void;
        render(props: ResourceDayHeaderProps): void;
        renderResourceRow(resources: Resource[]): string;
        renderDayAndResourceRows(dates: DateMarker[], resources: Resource[]): string;
        renderResourceAndDayRows(resources: Resource[], dates: DateMarker[]): string;
        renderResourceCell(resource: Resource, colspan: number, date?: DateMarker): string;
        renderDateCell(date: DateMarker, colspan: number, resource?: Resource): string;
        buildTr(cellHtmls: string[]): string;
        processResourceEls(resources: Resource[]): void;
    }
}

declare module '@fullcalendar/resource-common/common/resource-day-table' {
    import { SlicedProps, EventDef, Splitter, DayTable, DayTableCell, SplittableProps, DateSpan, Seg, EventSegUiInteractionState } from '@fullcalendar/core';
    import { Resource } from '@fullcalendar/resource-common/structs/resource';
    export interface ResourceDayTableCell extends DayTableCell {
        resource: Resource;
    }
    export abstract class AbstractResourceDayTable {
        cells: ResourceDayTableCell[][];
        rowCnt: number;
        colCnt: number;
        dayTable: DayTable;
        resources: Resource[];
        resourceIndex: ResourceIndex;
        constructor(dayTable: DayTable, resources: Resource[]);
        abstract computeCol(dateI: any, resourceI: any): number;
        abstract computeColRanges(dateStartI: any, dateEndI: any, resourceI: any): {
            firstCol: number;
            lastCol: number;
            isStart: boolean;
            isEnd: boolean;
        }[];
        buildCells(): ResourceDayTableCell[][];
    }
    export class ResourceDayTable extends AbstractResourceDayTable {
        computeCol(dateI: any, resourceI: any): any;
        computeColRanges(dateStartI: any, dateEndI: any, resourceI: any): {
            firstCol: any;
            lastCol: any;
            isStart: boolean;
            isEnd: boolean;
        }[];
    }
    export class DayResourceTable extends AbstractResourceDayTable {
        computeCol(dateI: any, resourceI: any): any;
        computeColRanges(dateStartI: any, dateEndI: any, resourceI: any): any[];
    }
    export class ResourceIndex {
        indicesById: {
            [resourceId: string]: number;
        };
        ids: string[];
        length: number;
        constructor(resources: Resource[]);
    }
    export interface VResourceProps extends SplittableProps {
        resourceDayTable: AbstractResourceDayTable;
    }
    export class VResourceSplitter extends Splitter {
        getKeyInfo(props: VResourceProps): any;
        getKeysForDateSpan(dateSpan: DateSpan): string[];
        getKeysForEventDef(eventDef: EventDef): string[];
    }
    export abstract class VResourceJoiner {
        joinProps(propSets: {
            [resourceId: string]: SlicedProps;
        }, resourceDayTable: AbstractResourceDayTable): SlicedProps;
        joinSegs(resourceDayTable: AbstractResourceDayTable, ...segGroups: SegType[][]): SegType[];
        expandSegs(resourceDayTable: AbstractResourceDayTable, segs: SegType[]): any[];
        joinInteractions(resourceDayTable: AbstractResourceDayTable, ...interactions: EventSegUiInteractionState[]): EventSegUiInteractionState;
        abstract transformSeg(seg: SegType, resourceDayTable: AbstractResourceDayTable, resourceI: number): SegType[];
    }
}

declare module '@fullcalendar/resource-common/structs/resource' {
    import { ConstraintInput, AllowFunc, EventStore, Calendar, EventUi, BusinessHoursInput } from '@fullcalendar/core';
    export interface ResourceInput {
        id?: string;
        parentId?: string;
        children?: ResourceInput[];
        title?: string;
        businessHours?: BusinessHoursInput;
        eventEditable?: boolean;
        eventStartEditable?: boolean;
        eventDurationEditable?: boolean;
        eventConstraint?: ConstraintInput;
        eventOverlap?: boolean;
        eventAllow?: AllowFunc;
        eventClassName?: string[] | string;
        eventClassNames?: string[] | string;
        eventBackgroundColor?: string;
        eventBorderColor?: string;
        eventTextColor?: string;
        eventColor?: string;
        extendedProps?: {
            [extendedProp: string]: any;
        };
        [otherProp: string]: any;
    }
    export interface Resource {
        id: string;
        parentId: string;
        title: string;
        businessHours: EventStore | null;
        ui: EventUi;
        extendedProps: {
            [extendedProp: string]: any;
        };
    }
    export type ResourceHash = {
        [resourceId: string]: Resource;
    };
    export function parseResource(input: ResourceInput, parentId: string, store: ResourceHash, calendar: Calendar): Resource;
    export function getPublicId(id: string): string;
}

declare module '@fullcalendar/resource-common/View' {
    import { View, ViewProps, ViewSpec, ViewPropsTransformer, CalendarComponentProps, EventUi, EventUiHash, EventDefHash, EventDef, EventStore, DateRange } from '@fullcalendar/core';
    import { ResourceHash } from '@fullcalendar/resource-common/structs/resource';
    import { ResourceEntityExpansions } from '@fullcalendar/resource-common/reducers/resourceEntityExpansions';
    export interface ResourceViewProps extends ViewProps {
        resourceStore: ResourceHash;
        resourceEntityExpansions: ResourceEntityExpansions;
    }
    export class ResourceDataAdder implements ViewPropsTransformer {
        filterResources: typeof filterResources;
        transform(viewProps: ViewProps, viewSpec: ViewSpec, calendarProps: CalendarComponentProps, view: View): {
            resourceStore: ResourceHash;
            resourceEntityExpansions: ResourceEntityExpansions;
        };
    }
    function filterResources(resourceStore: ResourceHash, doFilterResourcesWithEvents: boolean, eventStore: EventStore, activeRange: DateRange): ResourceHash;
    export class ResourceEventConfigAdder implements ViewPropsTransformer {
        buildResourceEventUis: typeof buildResourceEventUis;
        injectResourceEventUis: typeof injectResourceEventUis;
        transform(viewProps: ViewProps, viewSpec: ViewSpec, calendarProps: CalendarComponentProps): {
            eventUiBases: {
                [key: string]: EventUi;
            };
        };
    }
    function buildResourceEventUis(resourceStore: ResourceHash): {
        [key: string]: EventUi;
    };
    function injectResourceEventUis(eventUiBases: EventUiHash, eventDefs: EventDefHash, resourceEventUis: EventUiHash): {
        [key: string]: EventUi;
    };
    export function transformIsDraggable(val: boolean, eventDef: EventDef, eventUi: EventUi, view: View): boolean;
    export {};
}

declare module '@fullcalendar/resource-common/common/resource-hierarchy' {
    import { ResourceHash, Resource } from '@fullcalendar/resource-common/structs/resource';
    import { ResourceEntityExpansions } from '@fullcalendar/resource-common/reducers/resourceEntityExpansions';
    export interface Group {
        value: any;
        spec: any;
    }
    export interface GroupNode {
        id: string;
        isExpanded: boolean;
        group: Group;
    }
    export interface ResourceNode {
        id: string;
        rowSpans: number[];
        depth: number;
        isExpanded: boolean;
        hasChildren: boolean;
        resource: Resource;
        resourceFields: any;
    }
    export function flattenResources(resourceStore: ResourceHash, orderSpecs: any): Resource[];
    export function buildRowNodes(resourceStore: ResourceHash, groupSpecs: any, orderSpecs: any, isVGrouping: boolean, expansions: ResourceEntityExpansions, expansionDefault: boolean): (GroupNode | ResourceNode)[];
    export function buildResourceFields(resource: Resource): {
        id: string;
        parentId: string;
        title: string;
        businessHours: import("@fullcalendar/core").EventStore;
        ui: import("@fullcalendar/core").EventUi;
        extendedProps: {
            [extendedProp: string]: any;
        };
        startEditable: boolean;
        durationEditable: boolean;
        constraints: import("@fullcalendar/core").Constraint[];
        overlap: boolean;
        allows: import("@fullcalendar/core").AllowFunc[];
        backgroundColor: string;
        borderColor: string;
        textColor: string;
        classNames: string[];
    };
    export function isGroupsEqual(group0: Group, group1: Group): boolean;
}

declare module '@fullcalendar/resource-common/common/resource-rendering' {
import { Resource } from '@fullcalendar/resource-common/structs/resource';
export function buildResourceTextFunc(resourceTextSetting: any, calendar: any): (resource: Resource) => any;
}

declare module '@fullcalendar/resource-common/api/ResourceApi' {
    import { Calendar, EventApi } from '@fullcalendar/core';
    import { Resource } from '@fullcalendar/resource-common/structs/resource';
    export { ResourceApi as default, ResourceApi };
    class ResourceApi {
        _calendar: Calendar;
        _resource: Resource;
        constructor(calendar: Calendar, rawResource: Resource);
        setProp(name: string, value: any): void;
        remove(): void;
        getParent(): ResourceApi | null;
        getChildren(): ResourceApi[];
        getEvents(): EventApi[];
        readonly id: string;
        readonly title: string;
        readonly eventConstraint: any;
        readonly eventOverlap: any;
        readonly eventAllow: any;
        readonly eventBackgroundColor: string;
        readonly eventBorderColor: string;
        readonly eventTextColor: string;
        readonly eventClassNames: string[];
        readonly extendedProps: any;
    }
}

declare module '@fullcalendar/resource-common/common/ResourceSplitter' {
    import { Splitter, SplittableProps, DateSpan, EventDef } from '@fullcalendar/core';
    import { ResourceHash } from '@fullcalendar/resource-common/structs/resource';
    export interface SplittableResourceProps extends SplittableProps {
        resourceStore: ResourceHash;
    }
    export { ResourceSplitter as default, ResourceSplitter };
    class ResourceSplitter extends Splitter {
        getKeyInfo(props: SplittableResourceProps): {
            '': {};
        };
        getKeysForDateSpan(dateSpan: DateSpan): string[];
        getKeysForEventDef(eventDef: EventDef): string[];
    }
}

declare module '@fullcalendar/resource-common/structs/resource-source' {
    import { DateRange, Calendar } from '@fullcalendar/core';
    import { ResourceInput } from '@fullcalendar/resource-common/structs/resource';
    import { ResourceFunc } from '@fullcalendar/resource-common/resource-sources/resource-func';
    export type ResourceSourceError = {
        message: string;
        xhr?: XMLHttpRequest;
        [otherProp: string]: any;
    };
    export type ResourceFetcher = (arg: {
        resourceSource: ResourceSource;
        calendar: Calendar;
        range: DateRange | null;
    }, success: (res: {
        rawResources: ResourceInput[];
        xhr?: XMLHttpRequest;
    }) => void, failure: (error: ResourceSourceError) => void) => void;
    export interface ExtendedResourceSourceInput {
        id?: string;
        resources?: ResourceInput[];
        url?: string;
        method?: string;
        extraParams?: object | (() => object);
    }
    export type ResourceSourceInput = ResourceInput[] | ExtendedResourceSourceInput | ResourceFunc | string;
    export interface ResourceSource {
        _raw: any;
        sourceId: string;
        sourceDefId: number;
        meta: any;
        publicId: string;
        isFetching: boolean;
        latestFetchId: string;
        fetchRange: DateRange | null;
    }
    export interface ResourceSourceDef {
        ignoreRange?: boolean;
        parseMeta: (raw: ResourceSourceInput) => object | null;
        fetch: ResourceFetcher;
    }
    export function registerResourceSourceDef(def: ResourceSourceDef): void;
    export function getResourceSourceDef(id: number): ResourceSourceDef;
    export function doesSourceIgnoreRange(source: ResourceSource): boolean;
    export function parseResourceSource(input: ResourceSourceInput): ResourceSource;
}

declare module '@fullcalendar/resource-common/reducers/resourceEntityExpansions' {
    import { ResourceAction } from '@fullcalendar/resource-common/reducers/resources';
    export type ResourceEntityExpansions = {
        [id: string]: boolean;
    };
    export function reduceResourceEntityExpansions(expansions: ResourceEntityExpansions, action: ResourceAction): ResourceEntityExpansions;
}

declare module '@fullcalendar/resource-common/reducers/resources' {
    import { Calendar, CalendarState, Action, DateRange } from '@fullcalendar/core';
    import { ResourceSourceError } from '@fullcalendar/resource-common/structs/resource-source';
    import { ResourceHash, ResourceInput } from '@fullcalendar/resource-common/structs/resource';
    export type ResourceAction = Action | {
        type: 'FETCH_RESOURCE';
    } | {
        type: 'RECEIVE_RESOURCES';
        rawResources: ResourceInput[];
        fetchId: string;
        fetchRange: DateRange | null;
    } | {
        type: 'RECEIVE_RESOURCE_ERROR';
        error: ResourceSourceError;
        fetchId: string;
        fetchRange: DateRange | null;
    } | {
        type: 'ADD_RESOURCE';
        resourceHash: ResourceHash;
    } | // use a hash because needs to accept children
    {
        type: 'REMOVE_RESOURCE';
        resourceId: string;
    } | {
        type: 'SET_RESOURCE_PROP';
        resourceId: string;
        propName: string;
        propValue: any;
    } | {
        type: 'SET_RESOURCE_ENTITY_EXPANDED';
        id: string;
        isExpanded: boolean;
    } | {
        type: 'RESET_RESOURCES';
    } | {
        type: 'RESET_RESOURCE_SOURCE';
        resourceSourceInput: any;
    } | {
        type: 'REFETCH_RESOURCES';
    };
    export default function (state: CalendarState, action: ResourceAction, calendar: Calendar): {
        resourceSource: import("@fullcalendar/resource-common/structs/resource-source").ResourceSource;
        resourceStore: ResourceHash;
        resourceEntityExpansions: import("@fullcalendar/resource-common/reducers/resourceEntityExpansions").ResourceEntityExpansions;
        eventSources: import("@fullcalendar/core").EventSourceHash;
        eventSourceLoadingLevel: number;
        loadingLevel: number;
        viewType: string;
        currentDate: Date;
        dateProfile: import("@fullcalendar/core").DateProfile;
        eventStore: import("@fullcalendar/core").EventStore;
        dateSelection: import("@fullcalendar/core").DateSpan;
        eventSelection: string;
        eventDrag: import("@fullcalendar/core").EventInteractionState;
        eventResize: import("@fullcalendar/core").EventInteractionState;
    };
}

/*!
FullCalendar Resources Common Plugin v4.3.1
Docs & License: https://fullcalendar.io/scheduler
(c) 2019 Adam Shaw
*/
!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("@fullcalendar/core")):"function"==typeof define&&define.amd?define(["exports","@fullcalendar/core"],r):r((e=e||self).FullCalendarResourceCommon={},e.FullCalendar)}(this,function(e,r){"use strict";var t=function(e,r){return(t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,r){e.__proto__=r}||function(e,r){for(var t in r)r.hasOwnProperty(t)&&(e[t]=r[t])})(e,r)};function n(e,r){function n(){this.constructor=e}t(e,r),e.prototype=null===r?Object.create(r):(n.prototype=r.prototype,new n)}var o=function(){return(o=Object.assign||function(e){for(var r,t=1,n=arguments.length;t=0;r--){var t=f[r].parseMeta(e);if(t){var n=v("object"==typeof e&&e?e:{},t,r);return n._raw=e,n}}return null}(e);return!t&&r.opt("refetchResourcesOnNavigate")||(n=E(n,null,r)),n}return null}function E(e,r,t){var n,s=(n=e.sourceDefId,f[n]),u=String(R++);return s.fetch({resourceSource:e,calendar:t,range:r},function(e){t.afterSizingTriggers._resourcesRendered=[null],t.dispatch({type:"RECEIVE_RESOURCES",fetchId:u,fetchRange:r,rawResources:e.rawResources})},function(e){t.dispatch({type:"RECEIVE_RESOURCE_ERROR",fetchId:u,fetchRange:r,error:e})}),o({},e,{isFetching:!0,latestFetchId:u})}var m={id:String,title:String,parentId:String,businessHours:null,children:null,extendedProps:null},S="_fc:",I=0;function b(e,t,n,s){void 0===t&&(t="");var u={},i=r.refineProps(e,m,{},u),a={},c=r.processScopedUiProps("event",u,s,a);if(i.id||(i.id=S+I++),i.parentId||(i.parentId=t),i.businessHours=i.businessHours?r.parseBusinessHours(i.businessHours,s):null,i.ui=c,i.extendedProps=o({},a,i.extendedProps),Object.freeze(c.classNames),Object.freeze(i.extendedProps),n[i.id]);else if(n[i.id]=i,i.children){for(var l=0,d=i.children;l')),o.thead=o.el.querySelector("thead"),o}return n(t,e),t.prototype.destroy=function(){r.removeElement(this.el)},t.prototype.render=function(e){var t;this.dateFormat=r.createFormatter(this.opt("columnHeaderFormat")||r.computeFallbackHeaderFormat(e.datesRepDistinctDays,e.dates.length)),t=1===e.dates.length?this.renderResourceRow(e.resources):this.datesAboveResources?this.renderDayAndResourceRows(e.dates,e.resources):this.renderResourceAndDayRows(e.resources,e.dates),this.thead.innerHTML=t,this.processResourceEls(e.resources)},t.prototype.renderResourceRow=function(e){var r=this,t=e.map(function(e){return r.renderResourceCell(e,1)});return this.buildTr(t)},t.prototype.renderDayAndResourceRows=function(e,r){for(var t=[],n=[],o=0,s=e;o1?' colspan="'+t+'"':"")+">"+r.htmlEscape(this.resourceTextFunc(e))+""},t.prototype.renderDateCell=function(e,t,n){var o=this.props;return r.renderDateCell(e,o.dateProfile,o.datesRepDistinctDays,o.dates.length*o.resources.length,this.dateFormat,this.context,t,n?'data-resource-id="'+n.id+'"':"")},t.prototype.buildTr=function(e){return e.length||(e=[" "]),this.props.renderIntroHtml&&(e=[this.props.renderIntroHtml()].concat(e)),this.isRtl&&e.reverse(),""+e.join("")+""},t.prototype.processResourceEls=function(e){var t=this,n=this.view;r.findElements(this.thead,".fc-resource-cell").forEach(function(r,o){o%=e.length,t.isRtl&&(o=e.length-1-o);var s=e[o];n.publiclyTrigger("resourceRender",[{resource:new w(t.calendar,s),el:r,view:n}])})},t}(r.Component),z=function(){function e(e,r){this.dayTable=e,this.resources=r,this.resourceIndex=new V(r),this.rowCnt=e.rowCnt,this.colCnt=e.colCnt*r.length,this.cells=this.buildCells()}return e.prototype.buildCells=function(){for(var e=this.rowCnt,r=this.dayTable,t=this.resources,n=[],o=0;o0)break}t.splice(o,0,e)}function J(e){var r=o({},e.extendedProps,e.ui,e);return delete r.ui,delete r.extendedProps,r}var W=r.createPlugin({reducers:[function(e,r,t){var n=g(e.resourceSource,r,e.dateProfile,t),s=C(e.resourceStore,r,n,t),u=function(e,r){var t;switch(r.type){case"INIT":return{};case"SET_RESOURCE_ENTITY_EXPANDED":return o({},e,((t={})[r.id]=r.isExpanded,t));default:return e}}(e.resourceEntityExpansions,r);return o({},e,{resourceSource:n,resourceStore:s,resourceEntityExpansions:u})}],eventDefParsers:[function(e,t,n){var o=r.refineProps(t,_,{},n),s=o.resourceIds;o.resourceId&&s.push(o.resourceId),e.resourceIds=s,e.resourceEditable=o.resourceEditable}],isDraggableTransformers:[function(e,r,t,n){return!(e||!n.viewSpec.class.needsResourceData||!s(r,n.calendar))||e}],eventDragMutationMassagers:[function(e,r,t){var n=r.dateSpan.resourceId,o=t.dateSpan.resourceId;n&&o&&n!==o&&(e.resourceMutation={matchResourceId:n,setResourceId:o})}],eventDefMutationAppliers:[function(e,r,t){var n=r.resourceMutation;if(n&&s(e,t)){var o=e.resourceIds.indexOf(n.matchResourceId);if(-1!==o){var u=e.resourceIds.slice();u.splice(o,1),-1===u.indexOf(n.setResourceId)&&u.push(n.setResourceId),e.resourceIds=u}}}],dateSelectionTransformers:[function(e,r){var t=e.dateSpan.resourceId,n=r.dateSpan.resourceId;if(t&&n)return(!1!==e.component.allowAcrossResources||t===n)&&{resourceId:t}}],datePointTransforms:[function(e,r){return e.resourceId?{resource:r.getResourceById(e.resourceId)}:{}}],dateSpanTransforms:[function(e,r){return e.resourceId?{resource:r.getResourceById(e.resourceId)}:{}}],viewPropsTransformers:[u,a],isPropsValid:function(e,t){var n=(new P).splitProps(o({},e,{resourceStore:t.state.resourceStore}));for(var s in n){var u=n[s];if(s&&n[""]&&(u=o({},u,{eventStore:r.mergeEventStores(n[""].eventStore,u.eventStore),eventUiBases:o({},n[""].eventUiBases,u.eventUiBases)})),!r.isPropsValid(u,t,{resourceId:s},O.bind(null,s)))return!1}return!0},externalDefTransforms:[function(e){return e.resourceId?{resourceId:e.resourceId}:{}}],eventResizeJoinTransforms:[function(e,r){if(!1===e.component.allowAcrossResources&&e.dateSpan.resourceId!==r.dateSpan.resourceId)return!1}],viewContainerModifiers:[function(e,t){var n,o=t.opt("schedulerLicenseKey");n=window.location.href,/\w+\:\/\/fullcalendar\.io\/|\/examples\/[\w-]+\.html$/.test(n)||function(e){if(-1!==F.indexOf(e))return!0;var t=(e||"").match(/^(\d+)\-fcs\-(\d+)$/);if(t&&10===t[1].length){var n=new Date(1e3*parseInt(t[2],10)),o=new Date(r.config.mockSchedulerReleaseDate||T);if(r.isValidDate(o)){var s=r.addDays(o,-D);if(sPlease use a valid license key. More Info')}],eventDropTransformers:[function(e,r){var t=e.resourceMutation;return t?{oldResource:r.getResourceById(t.matchResourceId),newResource:r.getResourceById(t.setResourceId)}:{oldResource:null,newResource:null}}],optionChangeHandlers:A});e.AbstractResourceDayTable=z,e.DayResourceTable=N,e.ResourceApi=w,e.ResourceDayHeader=B,e.ResourceDayTable=M,e.ResourceSplitter=P,e.VResourceJoiner=q,e.VResourceSplitter=k,e.buildResourceFields=J,e.buildResourceTextFunc=H,e.buildRowNodes=L,e.default=W,e.flattenResources=function(e,r){return L(e,[],r,!1,{},!0).map(function(e){return e.resource})},e.isGroupsEqual=function(e,r){return e.spec===r.spec&&e.value===r.value},Object.defineProperty(e,"__esModule",{value:!0})});

/*!
FullCalendar Resource Time Grid Plugin v4.3.0
Docs & License: https://fullcalendar.io/scheduler
(c) 2019 Adam Shaw
*/

import { memoize, mapHash, DateComponent, parseFieldSpecs, createPlugin } from '@fullcalendar/core';
import ResourceCommonPlugin, { VResourceSplitter, VResourceJoiner, flattenResources, ResourceDayHeader, DayResourceTable, ResourceDayTable } from '@fullcalendar/resource-common';
import TimeGridPlugin, { buildDayRanges, TimeGridSlicer, AbstractTimeGridView, buildDayTable } from '@fullcalendar/timegrid';
import { ResourceDayGrid } from '@fullcalendar/resource-daygrid';

/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0

THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.

See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
/* global Reflect, Promise */

function __extends(d, b) {
    extendStatics(d, b);
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}

var main = createPlugin({
    deps: [ResourceCommonPlugin, TimeGridPlugin],
    defaultView: 'resourceTimeGridDay',
    views: {
        resourceTimeGrid: {
            class: ResourceTimeGridView,
            // TODO: wish we didn't have to C&P from timeGrid's file
            allDaySlot: true,
            slotDuration: '00:30:00',
            slotEventOverlap: true // a bad name. confused with overlap/constraint system
        },
        resourceTimeGridDay: {
            type: 'resourceTimeGrid',
            duration: { days: 1 }
        },
        resourceTimeGridWeek: {
            type: 'resourceTimeGrid',
            duration: { weeks: 1 }
        }
    }
});

export default main;
export { ResourceTimeGrid, ResourceTimeGridView };

/*!
FullCalendar Resource Time Grid Plugin v4.3.0
Docs & License: https://fullcalendar.io/scheduler
(c) 2019 Adam Shaw
*/

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@fullcalendar/core'), require('@fullcalendar/resource-common'), require('@fullcalendar/timegrid'), require('@fullcalendar/resource-daygrid')) :
    typeof define === 'function' && define.amd ? define(['exports', '@fullcalendar/core', '@fullcalendar/resource-common', '@fullcalendar/timegrid', '@fullcalendar/resource-daygrid'], factory) :
    (global = global || self, factory(global.FullCalendarResourceTimeGrid = {}, global.FullCalendar, global.FullCalendarResourceCommon, global.FullCalendarTimeGrid, global.FullCalendarResourceDayGrid));
}(this, function (exports, core, ResourceCommonPlugin, TimeGridPlugin, resourceDaygrid) { 'use strict';

var ResourceCommonPlugin__default = 'default' in ResourceCommonPlugin ? ResourceCommonPlugin['default'] : ResourceCommonPlugin;
var TimeGridPlugin__default = 'default' in TimeGridPlugin ? TimeGridPlugin['default'] : TimeGridPlugin;

    /*! *****************************************************************************
    Copyright (c) Microsoft Corporation. All rights reserved.
    Licensed under the Apache License, Version 2.0 (the "License"); you may not use
    this file except in compliance with the License. You may obtain a copy of the
    License at http://www.apache.org/licenses/LICENSE-2.0

    THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
    KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
    WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
    MERCHANTABLITY OR NON-INFRINGEMENT.

    See the Apache Version 2.0 License for specific language governing permissions
    and limitations under the License.
    ***************************************************************************** */
    /* global Reflect, Promise */

    function __extends(d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    }

    var main = core.createPlugin({
        deps: [ResourceCommonPlugin__default, TimeGridPlugin__default],
        defaultView: 'resourceTimeGridDay',
        views: {
            resourceTimeGrid: {
                class: ResourceTimeGridView,
                // TODO: wish we didn't have to C&P from timeGrid's file
                allDaySlot: true,
                slotDuration: '00:30:00',
                slotEventOverlap: true // a bad name. confused with overlap/constraint system
            },
            resourceTimeGridDay: {
                type: 'resourceTimeGrid',
                duration: { days: 1 }
            },
            resourceTimeGridWeek: {
                type: 'resourceTimeGrid',
                duration: { weeks: 1 }
            }
        }
    });

    exports.ResourceTimeGrid = ResourceTimeGrid;
    exports.ResourceTimeGridView = ResourceTimeGridView;
    exports.default = main;

Object.defineProperty(exports, '__esModule', { value: true });

}));

// Generated by dts-bundle v0.7.3-fork.1
// Dependencies for this module:
//   ../../../../../@fullcalendar/core
//   ../../../../../@fullcalendar/timegrid
//   ../../../../../@fullcalendar/resource-common
//   ../../../../../@fullcalendar/resource-daygrid

declare module '@fullcalendar/resource-timegrid' {
    import ResourceTimeGridView from '@fullcalendar/resource-timegrid/ResourceTimeGridView';
    export { ResourceTimeGridView };
    export { default as ResourceTimeGrid } from '@fullcalendar/resource-timegrid/ResourceTimeGrid';
    const _default: import("@fullcalendar/core").PluginDef;
    export default _default;
}

declare module '@fullcalendar/resource-timegrid/ResourceTimeGridView' {
    import { ComponentContext, ViewSpec, DateProfileGenerator } from '@fullcalendar/core';
    import { AbstractTimeGridView } from '@fullcalendar/timegrid';
    import { ResourceDayHeader, ResourceViewProps } from '@fullcalendar/resource-common';
    import { ResourceDayGrid } from '@fullcalendar/resource-daygrid';
    import ResourceTimeGrid from '@fullcalendar/resource-timegrid/ResourceTimeGrid';
    export { ResourceTimeGridView as default, ResourceTimeGridView };
    class ResourceTimeGridView extends AbstractTimeGridView {
        static needsResourceData: boolean;
        props: ResourceViewProps;
        header: ResourceDayHeader;
        resourceTimeGrid: ResourceTimeGrid;
        resourceDayGrid: ResourceDayGrid;
        constructor(context: ComponentContext, viewSpec: ViewSpec, dateProfileGenerator: DateProfileGenerator, parentEl: HTMLElement);
        destroy(): void;
        render(props: ResourceViewProps): void;
        renderNowIndicator(date: any): void;
    }
}

declare module '@fullcalendar/resource-timegrid/ResourceTimeGrid' {
    import { DateSpan, DateComponent, DateProfile, EventStore, EventUiHash, EventInteractionState, ComponentContext, DateMarker, Hit } from '@fullcalendar/core';
    import { TimeGrid } from '@fullcalendar/timegrid';
    import { AbstractResourceDayTable } from '@fullcalendar/resource-common';
    export interface ResourceTimeGridProps {
        dateProfile: DateProfile | null;
        resourceDayTable: AbstractResourceDayTable;
        businessHours: EventStore;
        eventStore: EventStore;
        eventUiBases: EventUiHash;
        dateSelection: DateSpan | null;
        eventSelection: string;
        eventDrag: EventInteractionState | null;
        eventResize: EventInteractionState | null;
    }
    export { ResourceTimeGrid as default, ResourceTimeGrid };
    class ResourceTimeGrid extends DateComponent {
        timeGrid: TimeGrid;
        constructor(context: ComponentContext, timeGrid: TimeGrid);
        destroy(): void;
        render(props: ResourceTimeGridProps): void;
        renderNowIndicator(date: DateMarker): void;
        buildPositionCaches(): void;
        queryHit(positionLeft: number, positionTop: number): Hit;
    }
}

/*!
FullCalendar Resource Time Grid Plugin v4.3.0
Docs & License: https://fullcalendar.io/scheduler
(c) 2019 Adam Shaw
*/
!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("@fullcalendar/core"),require("@fullcalendar/resource-common"),require("@fullcalendar/timegrid"),require("@fullcalendar/resource-daygrid")):"function"==typeof define&&define.amd?define(["exports","@fullcalendar/core","@fullcalendar/resource-common","@fullcalendar/timegrid","@fullcalendar/resource-daygrid"],r):r((e=e||self).FullCalendarResourceTimeGrid={},e.FullCalendar,e.FullCalendarResourceCommon,e.FullCalendarTimeGrid,e.FullCalendarResourceDayGrid)}(this,function(e,r,t,i,o){"use strict";var s="default"in t?t.default:t,a="default"in i?i.default:i,n=function(e,r){return(n=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,r){e.__proto__=r}||function(e,r){for(var t in r)r.hasOwnProperty(t)&&(e[t]=r[t])})(e,r)};function l(e,r){function t(){this.constructor=e}n(e,r),e.prototype=null===r?Object.create(r):(t.prototype=r.prototype,new t)}var c=function(){return(c=Object.assign||function(e){for(var r,t=1,i=arguments.length;t

/*!
FullCalendar Resource Timeline Plugin v4.3.0
Docs & License: https://fullcalendar.io/scheduler
(c) 2019 Adam Shaw
*/

import { removeElement, Component, memoizeRendering, createElement, htmlToElement, htmlEscape, isArraysEqual, EmitterMixin, memoize, parseFieldSpecs, PositionCache, applyStyleProp, View, createPlugin } from '@fullcalendar/core';
import TimelinePlugin, { TimelineLane, HeaderBodyLayout, TimeAxis, ScrollJoiner, StickyScroller } from '@fullcalendar/timeline';
import ResourceCommonPlugin, { isGroupsEqual, buildResourceFields, buildResourceTextFunc, ResourceApi, ResourceSplitter, buildRowNodes } from '@fullcalendar/resource-common';

/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0

THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.

See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
/* global Reflect, Promise */

function __extends(d, b) {
    extendStatics(d, b);
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}

.
        // there will be no content
        this.timeAxisTr.appendChild(createElement('td', { className: 'fc-divider' }, this.timeAxisHeightEl = document.createElement('div')));
    };
    GroupRow.prototype.unrenderCells = function () {
        this.spreadsheetTr.innerHTML = '';
        this.timeAxisTr.innerHTML = '';
    };
    /*
    Renders the content wrapper element that will be inserted into this row's TD cell.
    */
    GroupRow.prototype.renderSpreadsheetContent = function (group) {
        var text = this.renderCellText(group);
        var contentEl = htmlToElement('

' +
            '' +
            '' +
            '' +
            '' +
            (text ? htmlEscape(text) : ' ') +
            '' +
            '

');
        var filter = group.spec.render;
        if (typeof filter === 'function') {
            contentEl = filter(contentEl, group.value) || contentEl;
        }
        return contentEl;
    };
    GroupRow.prototype.renderCellText = function (group) {
        var text = group.value || ''; // might be null/undefined if an ad-hoc grouping
        var filter = group.spec.text;
        if (typeof filter === 'function') {
            text = filter(text) || text;
        }
        return text;
    };
    GroupRow.prototype.getHeightEls = function () {
        return [this.spreadsheetHeightEl, this.timeAxisHeightEl];
    };
    GroupRow.prototype.updateExpanderIcon = function (isExpanded) {
        updateExpanderIcon(this.expanderIconEl, isExpanded);
    };
    return GroupRow;
}(Row));
GroupRow.addEqualityFuncs({
    group: isGroupsEqual // HACK for ResourceTimelineView::renderRows
});

' +
                (colSpec.isMain ? renderIconHtml(depth) : '') +
                '' +
                (text ? htmlEscape(text) : ' ') +
                '' +
                '

');
            if (typeof colSpec.render === 'function') { // a filter function for the element
                contentEl = colSpec.render(new ResourceApi(calendar, resource), contentEl) || contentEl;
            }
            if (rowSpan > 1) {
                contentEl.classList.add('fc-sticky');
            }
            var td = createElement('td', {
                className: theme.getClass('widgetContent'),
                rowspan: rowSpan
            }, contentEl);
            // the first cell of the row needs to have an inner div for setTrInnerHeight
            if (colSpec.isMain) {
                td.appendChild(this.heightEl = createElement('div', null, td.childNodes) // inner wrap
                );
                mainTd = td;
            }
            tr.appendChild(td);
        }
        this.expanderIconEl = tr.querySelector('.fc-expander-space .fc-icon');
        // wait until very end
        view.publiclyTrigger('resourceRender', [
            {
                resource: new ResourceApi(calendar, resource),
                el: mainTd,
                view: view
            }
        ]);
    };
    SpreadsheetRow.prototype.unrenderRow = function () {
        this.tr.innerHTML = '';
    };
    SpreadsheetRow.prototype.updateExpanderIcon = function (hasChildren, isExpanded) {
        var expanderIconEl = this.expanderIconEl;
        var expanderEl = expanderIconEl.parentElement;
        if (expanderIconEl &&
            expanderEl // why would this be null?? was the case in IE11
        ) {
            if (hasChildren) {
                expanderEl.addEventListener('click', this.onExpanderClick);
                expanderEl.classList.add('fc-expander');
                updateExpanderIcon(expanderIconEl, isExpanded);
            }
            else {
                expanderEl.removeEventListener('click', this.onExpanderClick);
                expanderEl.classList.remove('fc-expander');
                clearExpanderIcon(expanderIconEl);
            }
        }
    };
    return SpreadsheetRow;
}(Component));
/*
Renders the HTML responsible for the subrow expander area,
as well as the space before it (used to align expanders of similar depths)
*/
function renderIconHtml(depth) {
    var html = '';
    for (var i = 0; i < depth; i++) {
        html += '';
    }
    html +=
        '' +
            '' +
            '';
    return html;
}

' +
                    '' +
                    htmlEscape(props.superHeaderText) +
                    '' +
                    '

' +
                    '' +
                    '';
        }
        html += '';
        for (var i = 0; i < colSpecs.length; i++) {
            var o = colSpecs[i];
            var isLast = i === (colSpecs.length - 1);
            html +=
                "" +
                    '

' +
'

' +
                    (o.isMain ?
                        '' +
                            '' +
                            '' :
                        '') +
                    '' +
                    htmlEscape(o.labelText || '') + // what about normalizing this value ahead of time?
                    '' +
                    '

' +
(!isLast ? '

' : '') +
'

' +
                    '';
        }
        html += '';
        html += '';
        this.tableEl.innerHTML = html;
        this.thEls = Array.prototype.slice.call(this.tableEl.querySelectorAll('th'));
        this.colEls = Array.prototype.slice.call(this.tableEl.querySelectorAll('col'));
        this.resizerEls = Array.prototype.slice.call(this.tableEl.querySelectorAll('.fc-col-resizer'));
        this.initColResizing();
    };
    SpreadsheetHeader.prototype.initColResizing = function () {
        var _this = this;
        var ElementDraggingImpl = this.calendar.pluginSystem.hooks.elementDraggingImpl;
        if (ElementDraggingImpl) {
            this.resizables = this.resizerEls.map(function (handleEl, colIndex) {
                var dragging = new ElementDraggingImpl(handleEl);
                var startWidth;
                dragging.emitter.on('dragstart', function () {
                    startWidth = _this.colWidths[colIndex];
                    if (typeof startWidth !== 'number') {
                        startWidth = _this.thEls[colIndex].getBoundingClientRect().width;
                    }
                });
                dragging.emitter.on('dragmove', function (pev) {
                    _this.colWidths[colIndex] = Math.max(startWidth + pev.deltaX * (_this.isRtl ? -1 : 1), COL_MIN_WIDTH);
                    _this.emitter.trigger('colwidthchange', _this.colWidths);
                });
                dragging.setAutoScrollEnabled(false); // because gets weird with auto-scrolling time area
                return dragging;
            });
        }
    };
    return SpreadsheetHeader;
}(Component));

var main = createPlugin({
    deps: [ResourceCommonPlugin, TimelinePlugin],
    defaultView: 'resourceTimelineDay',
    views: {
        resourceTimeline: {
            class: ResourceTimelineView,
            resourceAreaWidth: '30%',
            resourcesInitiallyExpanded: true,
            eventResizableFromStart: true // TODO: not DRY with this same setting in the main timeline config
        },
        resourceTimelineDay: {
            type: 'resourceTimeline',
            duration: { days: 1 }
        },
        resourceTimelineWeek: {
            type: 'resourceTimeline',
            duration: { weeks: 1 }
        },
        resourceTimelineMonth: {
            type: 'resourceTimeline',
            duration: { months: 1 }
        },
        resourceTimelineYear: {
            type: 'resourceTimeline',
            duration: { years: 1 }
        }
    }
});

export default main;
export { ResourceTimelineView };

/*!
FullCalendar Resource Timeline Plugin v4.3.0
Docs & License: https://fullcalendar.io/scheduler
(c) 2019 Adam Shaw
*/

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@fullcalendar/core'), require('@fullcalendar/timeline'), require('@fullcalendar/resource-common')) :
    typeof define === 'function' && define.amd ? define(['exports', '@fullcalendar/core', '@fullcalendar/timeline', '@fullcalendar/resource-common'], factory) :
    (global = global || self, factory(global.FullCalendarResourceTimeline = {}, global.FullCalendar, global.FullCalendarTimeline, global.FullCalendarResourceCommon));
}(this, function (exports, core, TimelinePlugin, ResourceCommonPlugin) { 'use strict';

var TimelinePlugin__default = 'default' in TimelinePlugin ? TimelinePlugin['default'] : TimelinePlugin;
var ResourceCommonPlugin__default = 'default' in ResourceCommonPlugin ? ResourceCommonPlugin['default'] : ResourceCommonPlugin;

    /*! *****************************************************************************
    Copyright (c) Microsoft Corporation. All rights reserved.
    Licensed under the Apache License, Version 2.0 (the "License"); you may not use
    this file except in compliance with the License. You may obtain a copy of the
    License at http://www.apache.org/licenses/LICENSE-2.0

    THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
    KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
    WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
    MERCHANTABLITY OR NON-INFRINGEMENT.

    See the Apache Version 2.0 License for specific language governing permissions
    and limitations under the License.
    ***************************************************************************** */
    /* global Reflect, Promise */

    function __extends(d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    }

.
            // there will be no content
            this.timeAxisTr.appendChild(core.createElement('td', { className: 'fc-divider' }, this.timeAxisHeightEl = document.createElement('div')));
        };
        GroupRow.prototype.unrenderCells = function () {
            this.spreadsheetTr.innerHTML = '';
            this.timeAxisTr.innerHTML = '';
        };
        /*
        Renders the content wrapper element that will be inserted into this row's TD cell.
        */
        GroupRow.prototype.renderSpreadsheetContent = function (group) {
            var text = this.renderCellText(group);
            var contentEl = core.htmlToElement('

' +
                '' +
                '' +
                '' +
                '' +
                (text ? core.htmlEscape(text) : ' ') +
                '' +
                '

');
            var filter = group.spec.render;
            if (typeof filter === 'function') {
                contentEl = filter(contentEl, group.value) || contentEl;
            }
            return contentEl;
        };
        GroupRow.prototype.renderCellText = function (group) {
            var text = group.value || ''; // might be null/undefined if an ad-hoc grouping
            var filter = group.spec.text;
            if (typeof filter === 'function') {
                text = filter(text) || text;
            }
            return text;
        };
        GroupRow.prototype.getHeightEls = function () {
            return [this.spreadsheetHeightEl, this.timeAxisHeightEl];
        };
        GroupRow.prototype.updateExpanderIcon = function (isExpanded) {
            updateExpanderIcon(this.expanderIconEl, isExpanded);
        };
        return GroupRow;
    }(Row));
    GroupRow.addEqualityFuncs({
        group: ResourceCommonPlugin.isGroupsEqual // HACK for ResourceTimelineView::renderRows
    });

' +
                    (colSpec.isMain ? renderIconHtml(depth) : '') +
                    '' +
                    (text ? core.htmlEscape(text) : ' ') +
                    '' +
                    '

');
                if (typeof colSpec.render === 'function') { // a filter function for the element
                    contentEl = colSpec.render(new ResourceCommonPlugin.ResourceApi(calendar, resource), contentEl) || contentEl;
                }
                if (rowSpan > 1) {
                    contentEl.classList.add('fc-sticky');
                }
                var td = core.createElement('td', {
                    className: theme.getClass('widgetContent'),
                    rowspan: rowSpan
                }, contentEl);
                // the first cell of the row needs to have an inner div for setTrInnerHeight
                if (colSpec.isMain) {
                    td.appendChild(this.heightEl = core.createElement('div', null, td.childNodes) // inner wrap
                    );
                    mainTd = td;
                }
                tr.appendChild(td);
            }
            this.expanderIconEl = tr.querySelector('.fc-expander-space .fc-icon');
            // wait until very end
            view.publiclyTrigger('resourceRender', [
                {
                    resource: new ResourceCommonPlugin.ResourceApi(calendar, resource),
                    el: mainTd,
                    view: view
                }
            ]);
        };
        SpreadsheetRow.prototype.unrenderRow = function () {
            this.tr.innerHTML = '';
        };
        SpreadsheetRow.prototype.updateExpanderIcon = function (hasChildren, isExpanded) {
            var expanderIconEl = this.expanderIconEl;
            var expanderEl = expanderIconEl.parentElement;
            if (expanderIconEl &&
                expanderEl // why would this be null?? was the case in IE11
            ) {
                if (hasChildren) {
                    expanderEl.addEventListener('click', this.onExpanderClick);
                    expanderEl.classList.add('fc-expander');
                    updateExpanderIcon(expanderIconEl, isExpanded);
                }
                else {
                    expanderEl.removeEventListener('click', this.onExpanderClick);
                    expanderEl.classList.remove('fc-expander');
                    clearExpanderIcon(expanderIconEl);
                }
            }
        };
        return SpreadsheetRow;
    }(core.Component));
    /*
    Renders the HTML responsible for the subrow expander area,
    as well as the space before it (used to align expanders of similar depths)
    */
    function renderIconHtml(depth) {
        var html = '';
        for (var i = 0; i < depth; i++) {
            html += '';
        }
        html +=
            '' +
                '' +
                '';
        return html;
    }

' +
                        '' +
                        core.htmlEscape(props.superHeaderText) +
                        '' +
                        '

' +
                        '' +
                        '';
            }
            html += '';
            for (var i = 0; i < colSpecs.length; i++) {
                var o = colSpecs[i];
                var isLast = i === (colSpecs.length - 1);
                html +=
                    "" +
                        '

' +
'

' +
                        (o.isMain ?
                            '' +
                                '' +
                                '' :
                            '') +
                        '' +
                        core.htmlEscape(o.labelText || '') + // what about normalizing this value ahead of time?
                        '' +
                        '

' +
(!isLast ? '

' : '') +
'

' +
                        '';
            }
            html += '';
            html += '';
            this.tableEl.innerHTML = html;
            this.thEls = Array.prototype.slice.call(this.tableEl.querySelectorAll('th'));
            this.colEls = Array.prototype.slice.call(this.tableEl.querySelectorAll('col'));
            this.resizerEls = Array.prototype.slice.call(this.tableEl.querySelectorAll('.fc-col-resizer'));
            this.initColResizing();
        };
        SpreadsheetHeader.prototype.initColResizing = function () {
            var _this = this;
            var ElementDraggingImpl = this.calendar.pluginSystem.hooks.elementDraggingImpl;
            if (ElementDraggingImpl) {
                this.resizables = this.resizerEls.map(function (handleEl, colIndex) {
                    var dragging = new ElementDraggingImpl(handleEl);
                    var startWidth;
                    dragging.emitter.on('dragstart', function () {
                        startWidth = _this.colWidths[colIndex];
                        if (typeof startWidth !== 'number') {
                            startWidth = _this.thEls[colIndex].getBoundingClientRect().width;
                        }
                    });
                    dragging.emitter.on('dragmove', function (pev) {
                        _this.colWidths[colIndex] = Math.max(startWidth + pev.deltaX * (_this.isRtl ? -1 : 1), COL_MIN_WIDTH);
                        _this.emitter.trigger('colwidthchange', _this.colWidths);
                    });
                    dragging.setAutoScrollEnabled(false); // because gets weird with auto-scrolling time area
                    return dragging;
                });
            }
        };
        return SpreadsheetHeader;
    }(core.Component));

    var main = core.createPlugin({
        deps: [ResourceCommonPlugin__default, TimelinePlugin__default],
        defaultView: 'resourceTimelineDay',
        views: {
            resourceTimeline: {
                class: ResourceTimelineView,
                resourceAreaWidth: '30%',
                resourcesInitiallyExpanded: true,
                eventResizableFromStart: true // TODO: not DRY with this same setting in the main timeline config
            },
            resourceTimelineDay: {
                type: 'resourceTimeline',
                duration: { days: 1 }
            },
            resourceTimelineWeek: {
                type: 'resourceTimeline',
                duration: { weeks: 1 }
            },
            resourceTimelineMonth: {
                type: 'resourceTimeline',
                duration: { months: 1 }
            },
            resourceTimelineYear: {
                type: 'resourceTimeline',
                duration: { years: 1 }
            }
        }
    });

exports.ResourceTimelineView = ResourceTimelineView;
exports.default = main;

Object.defineProperty(exports, '__esModule', { value: true });

}));

// Generated by dts-bundle v0.7.3-fork.1
// Dependencies for this module:
//   ../../../../../@fullcalendar/core
//   ../../../../../@fullcalendar/timeline
//   ../../../../../@fullcalendar/resource-common

declare module '@fullcalendar/resource-timeline' {
    import ResourceTimelineView from '@fullcalendar/resource-timeline/ResourceTimelineView';
    export { ResourceTimelineView };
    const _default: import("@fullcalendar/core").PluginDef;
    export default _default;
}

declare module '@fullcalendar/resource-timeline/ResourceTimelineView' {
    import { ElementDragging, SplittableProps, PositionCache, Hit, View, ViewSpec, ComponentContext, DateProfileGenerator, DateProfile, Duration } from '@fullcalendar/core';
    import { ScrollJoiner, TimelineLane, StickyScroller, TimeAxis } from '@fullcalendar/timeline';
    import { GroupNode, ResourceNode, ResourceViewProps } from '@fullcalendar/resource-common';
    import GroupRow from '@fullcalendar/resource-timeline/GroupRow';
    import ResourceRow from '@fullcalendar/resource-timeline/ResourceRow';
    import Spreadsheet from '@fullcalendar/resource-timeline/Spreadsheet';
    export { ResourceTimelineView as default, ResourceTimelineView };
    class ResourceTimelineView extends View {
        static needsResourceData: boolean;
        props: ResourceViewProps;
        spreadsheet: Spreadsheet;
        timeAxis: TimeAxis;
        lane: TimelineLane;
        bodyScrollJoiner: ScrollJoiner;
        spreadsheetBodyStickyScroller: StickyScroller;
        isStickyScrollDirty: boolean;
        timeAxisTbody: HTMLElement;
        miscHeight: number;
        rowNodes: (GroupNode | ResourceNode)[];
        rowComponents: (GroupRow | ResourceRow)[];
        rowComponentsById: {
            [id: string]: (GroupRow | ResourceRow);
        };
        resourceAreaHeadEl: HTMLElement;
        resourceAreaWidth?: number;
        resourceAreaWidthDraggings: ElementDragging[];
        superHeaderText: any;
        isVGrouping: any;
        isHGrouping: any;
        groupSpecs: any;
        colSpecs: any;
        orderSpecs: any;
        rowPositions: PositionCache;
        constructor(context: ComponentContext, viewSpec: ViewSpec, dateProfileGenerator: DateProfileGenerator, parentEl: HTMLElement);
        renderSkeletonHtml(): string;
        render(props: ResourceViewProps): void;
        updateHasNesting(isNesting: boolean): void;
        diffRows(newNodes: any): void;
        addRow(index: any, rowNode: any): void;
        removeRows(startIndex: any, len: any, oldRowNodes: any): void;
        buildChildComponent(node: (GroupNode | ResourceNode), spreadsheetTbody: HTMLElement, spreadsheetNext: HTMLElement, timeAxisTbody: HTMLElement, timeAxisNext: HTMLElement): GroupRow | ResourceRow;
        renderRows(dateProfile: DateProfile, fallbackBusinessHours: any, splitProps: {
            [resourceId: string]: SplittableProps;
        }): void;
        updateSize(isResize: any, viewHeight: any, isAuto: any): void;
        syncHeadHeights(): void;
        updateRowSizes(isResize: boolean): number;
        destroy(): void;
        getNowIndicatorUnit(dateProfile: DateProfile): string;
        renderNowIndicator(date: any): void;
        unrenderNowIndicator(): void;
        queryScroll(): any;
        applyScroll(scroll: any, isResize: any): void;
        computeDateScroll(duration: Duration): {
            left: number;
        };
        queryDateScroll(): {
            left: number;
        };
        applyDateScroll(scroll: any): void;
        queryResourceScroll(): any;
        applyResourceScroll(scroll: any): void;
        buildPositionCaches(): void;
        queryHit(positionLeft: number, positionTop: number): Hit;
        setResourceAreaWidth(widthVal: any): void;
        initResourceAreaWidthDragging(): void;
    }
}

declare module '@fullcalendar/resource-timeline/GroupRow' {
    import { Group } from '@fullcalendar/resource-common';
    import Row from '@fullcalendar/resource-timeline/Row';
    export interface GroupRowProps {
        spreadsheetColCnt: number;
        id: string;
        isExpanded: boolean;
        group: Group;
    }
    export { GroupRow as default, GroupRow };
    class GroupRow extends Row {
        spreadsheetHeightEl: HTMLElement;
        timeAxisHeightEl: HTMLElement;
        expanderIconEl: HTMLElement;
        render(props: GroupRowProps): void;
        destroy(): void;
        renderCells(group: Group, spreadsheetColCnt: number): void;
        unrenderCells(): void;
        renderSpreadsheetContent(group: Group): HTMLElement;
        renderCellText(group: Group): any;
        getHeightEls(): HTMLElement[];
        updateExpanderIcon(isExpanded: boolean): void;
        onExpanderClick: (ev: UIEvent) => void;
    }
}

declare module '@fullcalendar/resource-timeline/ResourceRow' {
    import { Duration, ComponentContext, EventInteractionState, DateSpan, EventUiHash, EventStore, DateProfile } from '@fullcalendar/core';
    import { TimelineLane, TimeAxis } from '@fullcalendar/timeline';
    import Row from '@fullcalendar/resource-timeline/Row';
    import SpreadsheetRow from '@fullcalendar/resource-timeline/SpreadsheetRow';
    import { Resource } from '@fullcalendar/resource-common';
    export interface ResourceRowProps {
        dateProfile: DateProfile;
        nextDayThreshold: Duration;
        businessHours: EventStore | null;
        eventStore: EventStore | null;
        eventUiBases: EventUiHash;
        dateSelection: DateSpan | null;
        eventSelection: string;
        eventDrag: EventInteractionState | null;
        eventResize: EventInteractionState | null;
        colSpecs: any;
        id: string;
        rowSpans: number[];
        depth: number;
        isExpanded: boolean;
        hasChildren: boolean;
        resource: Resource;
    }
    export { ResourceRow as default, ResourceRow };
    class ResourceRow extends Row {
        innerContainerEl: HTMLElement;
        spreadsheetRow: SpreadsheetRow;
        lane: TimelineLane;
        constructor(context: ComponentContext, a: any, b: any, c: any, d: any, timeAxis: TimeAxis);
        destroy(): void;
        render(props: ResourceRowProps): void;
        updateSize(isResize: boolean): void;
        getHeightEls(): HTMLElement[];
    }
}

declare module '@fullcalendar/resource-timeline/Spreadsheet' {
    import { Component, ComponentContext } from '@fullcalendar/core';
    import { HeaderBodyLayout } from '@fullcalendar/timeline';
    import SpreadsheetHeader from '@fullcalendar/resource-timeline/SpreadsheetHeader';
    export interface SpreadsheetProps {
        superHeaderText: string;
        colSpecs: any;
    }
    export { Spreadsheet as default, Spreadsheet };
    class Spreadsheet extends Component {
        header: SpreadsheetHeader;
        layout: HeaderBodyLayout;
        bodyContainerEl: HTMLElement;
        bodyColGroup: HTMLElement;
        bodyTbody: HTMLElement;
        bodyColEls: HTMLElement[];
        constructor(context: ComponentContext, headParentEl: HTMLElement, bodyParentEl: HTMLElement);
        destroy(): void;
        render(props: SpreadsheetProps): void;
        renderCells(superHeaderText: any, colSpecs: any): void;
        unrenderCells(): void;
        renderColTags(colSpecs: any): string;
        updateSize(isResize: any, totalHeight: any, isAuto: any): void;
        applyColWidths(colWidths: (number | string)[]): void;
    }
}

declare module '@fullcalendar/resource-timeline/Row' {
    import { Component, ComponentContext } from '@fullcalendar/core';
    export { Row as default, Row };
    abstract class Row extends Component {
        spreadsheetTr: HTMLElement;
        timeAxisTr: HTMLElement;
        isSizeDirty: boolean;
        constructor(context: ComponentContext, spreadsheetParent: HTMLElement, spreadsheetNextSibling: HTMLElement, timeAxisParent: HTMLElement, timeAxisNextSibling: HTMLElement);
        destroy(): void;
        abstract getHeightEls(): HTMLElement[];
        updateSize(isResize: boolean): void;
    }
}

declare module '@fullcalendar/resource-timeline/SpreadsheetRow' {
    import { Component, ComponentContext } from '@fullcalendar/core';
    import { Resource } from '@fullcalendar/resource-common';
    export interface SpreadsheetRowProps {
        colSpecs: any;
        id: string;
        rowSpans: number[];
        depth: number;
        isExpanded: boolean;
        hasChildren: boolean;
        resource: Resource;
    }
    export { SpreadsheetRow as default, SpreadsheetRow };
    class SpreadsheetRow extends Component {
        tr: HTMLElement;
        heightEl: HTMLElement;
        expanderIconEl: HTMLElement;
        constructor(context: ComponentContext, tr: HTMLElement);
        render(props: SpreadsheetRowProps): void;
        destroy(): void;
        renderRow(resource: Resource, rowSpans: number[], depth: number, colSpecs: any): void;
        unrenderRow(): void;
        updateExpanderIcon(hasChildren: boolean, isExpanded: boolean): void;
        onExpanderClick: (ev: UIEvent) => void;
    }
}

declare module '@fullcalendar/resource-timeline/SpreadsheetHeader' {
    import { ElementDragging, Component, ComponentContext, EmitterMixin } from '@fullcalendar/core';
    export interface SpreadsheetHeaderProps {
        superHeaderText: string;
        colSpecs: any;
        colTags: string;
    }
    export { SpreadsheetHeader as default, SpreadsheetHeader };
    class SpreadsheetHeader extends Component {
        tableEl: HTMLElement;
        resizerEls: HTMLElement[];
        resizables: ElementDragging[];
        thEls: HTMLElement[];
        colEls: HTMLElement[];
        colWidths: number[];
        emitter: EmitterMixin;
        constructor(context: ComponentContext, parentEl: HTMLElement);
        destroy(): void;
        render(props: SpreadsheetHeaderProps): void;
        initColResizing(): void;
    }
}

/*!
FullCalendar Resource Timeline Plugin v4.3.0
Docs & License: https://fullcalendar.io/scheduler
(c) 2019 Adam Shaw
*/
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@fullcalendar/core"),require("@fullcalendar/timeline"),require("@fullcalendar/resource-common")):"function"==typeof define&&define.amd?define(["exports","@fullcalendar/core","@fullcalendar/timeline","@fullcalendar/resource-common"],t):t((e=e||self).FullCalendarResourceTimeline={},e.FullCalendar,e.FullCalendarTimeline,e.FullCalendarResourceCommon)}(this,function(e,t,r,o){"use strict";var i="default"in r?r.default:r,s="default"in o?o.default:o,n=function(e,t){return(n=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var r in t)t.hasOwnProperty(r)&&(e[r]=t[r])})(e,t)};function l(e,t){function r(){this.constructor=e}n(e,t),e.prototype=null===t?Object.create(t):(r.prototype=t.prototype,new r)}var a=function(){return(a=Object.assign||function(e){for(var t,r=1,o=arguments.length;r'+(r?t.htmlEscape(r):" ")+""),i=e.spec.render;return"function"==typeof i&&(o=i(o,e.value)||o),o},r.prototype.renderCellText=function(e){var t=e.value||"",r=e.spec.text;return"function"==typeof r&&(t=r(t)||t),t},r.prototype.getHeightEls=function(){return[this.spreadsheetHeightEl,this.timeAxisHeightEl]},r.prototype.updateExpanderIcon=function(e){d(this.expanderIconEl,e)},r}(c);u.addEqualityFuncs({group:o.isGroupsEqual});var h=function(e){function r(r,o){var i=e.call(this,r)||this;return i._renderRow=t.memoizeRendering(i.renderRow,i.unrenderRow),i._updateTrResourceId=t.memoizeRendering(p,null,[i._renderRow]),i._updateExpanderIcon=t.memoizeRendering(i.updateExpanderIcon,null,[i._renderRow]),i.onExpanderClick=function(e){var t=i.props;i.calendar.dispatch({type:"SET_RESOURCE_ENTITY_EXPANDED",id:t.id,isExpanded:!t.isExpanded})},i.tr=o,i}return l(r,e),r.prototype.render=function(e){this._renderRow(e.resource,e.rowSpans,e.depth,e.colSpecs),this._updateTrResourceId(this.tr,e.resource.id),this._updateExpanderIcon(e.hasChildren,e.isExpanded)},r.prototype.destroy=function(){e.prototype.destroy.call(this),this._renderRow.unrender()},r.prototype.renderRow=function(e,r,i,s){for(var n,l=this.tr,a=this.theme,c=this.calendar,d=this.view,p=o.buildResourceFields(e),u=0;u'+(h.isMain?y(i):"")+''+(m?t.htmlEscape(m):" ")+"");"function"==typeof h.render&&(g=h.render(new o.ResourceApi(c,e),g)||g),f>1&&g.classList.add("fc-sticky");var v=t.createElement("td",{className:a.getClass("widgetContent"),rowspan:f},g);h.isMain&&(v.appendChild(this.heightEl=t.createElement("div",null,v.childNodes)),n=v),l.appendChild(v)}}this.expanderIconEl=l.querySelector(".fc-expander-space .fc-icon"),d.publiclyTrigger("resourceRender",[{resource:new o.ResourceApi(c,e),el:n,view:d}])},r.prototype.unrenderRow=function(){this.tr.innerHTML=""},r.prototype.updateExpanderIcon=function(e,t){var r,o=this.expanderIconEl,i=o.parentElement;o&&i&&(e?(i.addEventListener("click",this.onExpanderClick),i.classList.add("fc-expander"),d(o,t)):(i.removeEventListener("click",this.onExpanderClick),i.classList.remove("fc-expander"),(r=o.classList).remove("fc-icon-minus-square"),r.remove("fc-icon-plus-square")))},r}(t.Component);function y(e){for(var t="",r=0;r';return t+=''}var f=function(e){function o(o,i,s,n,l,a){var c=e.call(this,o,i,s,n,l)||this;return c._updateTrResourceId=t.memoizeRendering(p),c.spreadsheetRow=new h(o,c.spreadsheetTr),c.timeAxisTr.appendChild(t.createElement("td",{className:c.theme.getClass("widgetContent")},c.innerContainerEl=document.createElement("div"))),c.lane=new r.TimelineLane(o,c.innerContainerEl,c.innerContainerEl,a),c}return l(o,e),o.prototype.destroy=function(){this.spreadsheetRow.destroy(),this.lane.destroy(),e.prototype.destroy.call(this)},o.prototype.render=function(e){this.spreadsheetRow.receiveProps({colSpecs:e.colSpecs,id:e.id,rowSpans:e.rowSpans,depth:e.depth,isExpanded:e.isExpanded,hasChildren:e.hasChildren,resource:e.resource}),this._updateTrResourceId(this.timeAxisTr,e.resource.id),this.lane.receiveProps({dateProfile:e.dateProfile,nextDayThreshold:e.nextDayThreshold,businessHours:e.businessHours,eventStore:e.eventStore,eventUiBases:e.eventUiBases,dateSelection:e.dateSelection,eventSelection:e.eventSelection,eventDrag:e.eventDrag,eventResize:e.eventResize}),this.isSizeDirty=!0},o.prototype.updateSize=function(t){e.prototype.updateSize.call(this,t),this.lane.updateSize(t)},o.prototype.getHeightEls=function(){return[this.spreadsheetRow.heightEl,this.innerContainerEl]},o}(c);f.addEqualityFuncs({rowSpans:t.isArraysEqual});var m=function(e){function r(r,o){var i=e.call(this,r)||this;return i.resizables=[],i.colWidths=[],i.emitter=new t.EmitterMixin,o.appendChild(i.tableEl=t.createElement("table",{className:i.theme.getClass("tableGrid")})),i}return l(r,e),r.prototype.destroy=function(){for(var r=0,o=this.resizables;r"+e.colTags+"";e.superHeaderText&&(i+='

'+t.htmlEscape(e.superHeaderText)+"

"),i+="";for(var s=0;s

'+(n.isMain?'':"")+''+t.htmlEscape(n.labelText||"")+"

"+(l?"":'

')+"

"}i+="",i+="",this.tableEl.innerHTML=i,this.thEls=Array.prototype.slice.call(this.tableEl.querySelectorAll("th")),this.colEls=Array.prototype.slice.call(this.tableEl.querySelectorAll("col")),this.resizerEls=Array.prototype.slice.call(this.tableEl.querySelectorAll(".fc-col-resizer")),this.initColResizing()},r.prototype.initColResizing=function(){var e=this,t=this.calendar.pluginSystem.hooks.elementDraggingImpl;t&&(this.resizables=this.resizerEls.map(function(r,o){var i,s=new t(r);return s.emitter.on("dragstart",function(){"number"!=typeof(i=e.colWidths[o])&&(i=e.thEls[o].getBoundingClientRect().width)}),s.emitter.on("dragmove",function(t){e.colWidths[o]=Math.max(i+t.deltaX*(e.isRtl?-1:1),30),e.emitter.trigger("colwidthchange",e.colWidths)}),s.setAutoScrollEnabled(!1),s}))},r}(t.Component),g=function(e){function o(o,i,s){var n=e.call(this,o)||this;n._renderCells=t.memoizeRendering(n.renderCells,n.unrenderCells),n.layout=new r.HeaderBodyLayout(i,s,"clipped-scroll");var l=n.layout.headerScroller.enhancedScroll,a=n.layout.bodyScroller.enhancedScroll;return n.header=new m(o,l.canvas.contentEl),n.header.emitter.on("colwidthchange",function(e){n.applyColWidths(e)}),a.canvas.contentEl.appendChild(n.bodyContainerEl=t.createElement("div",{className:"fc-rows"},"")),n.bodyColGroup=n.bodyContainerEl.querySelector("colgroup"),n.bodyTbody=n.bodyContainerEl.querySelector("tbody"),n}return l(o,e),o.prototype.destroy=function(){this.header.destroy(),this.layout.destroy(),this._renderCells.unrender(),e.prototype.destroy.call(this)},o.prototype.render=function(e){this._renderCells(e.superHeaderText,e.colSpecs)},o.prototype.renderCells=function(e,t){var r=this.renderColTags(t);this.header.receiveProps({superHeaderText:e,colSpecs:t,colTags:r}),this.bodyColGroup.innerHTML=r,this.bodyColEls=Array.prototype.slice.call(this.bodyColGroup.querySelectorAll("col")),this.applyColWidths(t.map(function(e){return e.width}))},o.prototype.unrenderCells=function(){this.bodyColGroup.innerHTML=""},o.prototype.renderColTags=function(e){for(var t="",r=0,o=e;r':t+=""}return t},o.prototype.updateSize=function(e,t,r){this.layout.setHeight(t,r)},o.prototype.applyColWidths=function(e){var t=this;e.forEach(function(e,r){var o,i=t.header.colEls[r],s=t.bodyColEls[r];"number"==typeof e?o=e+"px":null==typeof e&&(o=""),i.style.width=s.style.width=o})},o}(t.Component),v=function(e){function i(i,s,n,l){var a=e.call(this,i,s,n,l)||this;a.isStickyScrollDirty=!1,a.rowNodes=[],a.rowComponents=[],a.rowComponentsById={},a.resourceAreaWidthDraggings=[],a.splitter=new o.ResourceSplitter,a.hasResourceBusinessHours=t.memoize(S),a.buildRowNodes=t.memoize(o.buildRowNodes),a.hasNesting=t.memoize(x),a._updateHasNesting=t.memoizeRendering(a.updateHasNesting);var c=a.opt("resourceColumns")||[],d=a.opt("resourceLabelText"),p=null;c.length?p=d:c.push({labelText:d||"Resources",text:o.buildResourceTextFunc(a.opt("resourceText"),a.calendar)});for(var u=[],h=[],y=[],f=!1,m=!1,v=0,E=c;v");return a.timeAxis.layout.bodyScroller.enhancedScroll.canvas.contentEl.appendChild(_),a.timeAxisTbody=_.querySelector("tbody"),a.lane=new r.TimelineLane(a.context,null,a.timeAxis.layout.bodyScroller.enhancedScroll.canvas.bgEl,a.timeAxis),a.bodyScrollJoiner=new r.ScrollJoiner("vertical",[a.spreadsheet.layout.bodyScroller,a.timeAxis.layout.bodyScroller]),a.spreadsheetBodyStickyScroller=new r.StickyScroller(a.spreadsheet.layout.bodyScroller.enhancedScroll,a.isRtl,!0),a.spreadsheet.receiveProps({superHeaderText:a.superHeaderText,colSpecs:a.colSpecs}),i.calendar.registerInteractiveComponent(a,{el:a.timeAxis.slats.el}),a}return l(i,e),i.prototype.renderSkeletonHtml=function(){var e=this.theme;return' '},i.prototype.render=function(t){e.prototype.render.call(this,t);var r=this.splitter.splitProps(t),o=this.hasResourceBusinessHours(t.resourceStore);this.timeAxis.receiveProps({dateProfile:t.dateProfile}),this.lane.receiveProps(a({},r[""],{dateProfile:t.dateProfile,nextDayThreshold:this.nextDayThreshold,businessHours:o?null:t.businessHours}));var i=this.buildRowNodes(t.resourceStore,this.groupSpecs,this.orderSpecs,this.isVGrouping,t.resourceEntityExpansions,this.opt("resourcesInitiallyExpanded"));this._updateHasNesting(this.hasNesting(i)),this.diffRows(i),this.renderRows(t.dateProfile,o?t.businessHours:null,r)},i.prototype.updateHasNesting=function(e){var t=this.el.classList;e?t.remove("fc-flat"):t.add("fc-flat")},i.prototype.diffRows=function(e){var t=this.rowNodes,r=t.length,o={},i=0,s=0;for(i=0;i=i?(this.removeRows(s,l-i,t),i=l+1):this.addRow(s,n)}this.removeRows(s,r-i,t),this.rowNodes=e},i.prototype.addRow=function(e,t){var r=this.rowComponents,o=this.rowComponentsById,i=r[e],s=this.buildChildComponent(t,this.spreadsheet.bodyTbody,i?i.spreadsheetTr:null,this.timeAxisTbody,i?i.timeAxisTr:null);r.splice(e,0,s),o[t.id]=s},i.prototype.removeRows=function(e,t,r){if(t){for(var o=this.rowComponents,i=this.rowComponentsById,s=0;st)&&(t=i)}return t}),d=0;do){r.rowId=n.id,r.bottom=l-o;break}}return r},i.prototype.applyResourceScroll=function(e){var t=e.forcedRowId||e.rowId;if(t){var r=this.rowComponentsById[t];if(r){var o=r.timeAxisTr;if(o){var i=this.timeAxis.layout.bodyScroller.enhancedScroll.canvas.el.getBoundingClientRect().top,s=o.getBoundingClientRect(),n=(e.forcedRowId?s.top:s.bottom-e.bottom)-i;this.timeAxis.layout.bodyScroller.enhancedScroll.setScrollTop(n),this.spreadsheet.layout.bodyScroller.enhancedScroll.setScrollTop(n)}}}},i.prototype.buildPositionCaches=function(){this.timeAxis.slats.updateSize(),this.rowPositions.build()},i.prototype.queryHit=function(e,t){var r=this.rowPositions,o=this.timeAxis.slats,i=r.topToIndex(t);if(null!=i){var s=this.rowNodes[i].resource;if(s){var n=o.positionToHit(e);if(n)return{component:this,dateSpan:{range:n.dateSpan.range,allDay:n.dateSpan.allDay,resourceId:s.id},rect:{left:n.left,right:n.right,top:r.tops[i],bottom:r.bottoms[i]},dayEl:n.dayEl,layer:0}}}},i.prototype.setResourceAreaWidth=function(e){this.resourceAreaWidth=e,t.applyStyleProp(this.resourceAreaHeadEl,"width",e||"")},i.prototype.initResourceAreaWidthDragging=function(){var e=this,t=Array.prototype.slice.call(this.el.querySelectorAll(".fc-col-resizer")),r=this.calendar.pluginSystem.hooks.elementDraggingImpl;r&&(this.resourceAreaWidthDraggings=t.map(function(t){var o,i,s=new r(t);return s.emitter.on("dragstart",function(){"number"!=typeof(o=e.resourceAreaWidth)&&(o=e.resourceAreaHeadEl.getBoundingClientRect().width),i=e.el.getBoundingClientRect().width}),s.emitter.on("dragmove",function(t){var r=o+t.deltaX*(e.isRtl?-1:1);r=Math.max(r,30),r=Math.min(r,i-30),e.setResourceAreaWidth(r)}),s.setAutoScrollEnabled(!1),s}))},i.needsResourceData=!0,i}(t.View);function S(e){for(var t in e){if(e[t].businessHours)return!0}return!1}function x(e){for(var t=0,r=e;t

/*!
FullCalendar Resource Day Grid Plugin v4.3.0
Docs & License: https://fullcalendar.io/scheduler
(c) 2019 Adam Shaw
*/

import { mapHash, DateComponent, memoize, parseFieldSpecs, createPlugin } from '@fullcalendar/core';
import ResourceCommonPlugin, { VResourceSplitter, VResourceJoiner, flattenResources, ResourceDayHeader, DayResourceTable, ResourceDayTable } from '@fullcalendar/resource-common';
import DayGridPlugin, { DayGridSlicer, AbstractDayGridView, buildBasicDayTable } from '@fullcalendar/daygrid';

/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0

THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.

See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
/* global Reflect, Promise */

function __extends(d, b) {
    extendStatics(d, b);
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}

var main = createPlugin({
    deps: [ResourceCommonPlugin, DayGridPlugin],
    defaultView: 'resourceDayGridDay',
    views: {
        resourceDayGrid: ResourceDayGridView,
        resourceDayGridDay: {
            type: 'resourceDayGrid',
            duration: { days: 1 }
        },
        resourceDayGridWeek: {
            type: 'resourceDayGrid',
            duration: { weeks: 1 }
        },
        resourceDayGridMonth: {
            type: 'resourceDayGrid',
            duration: { months: 1 },
            // TODO: wish we didn't have to C&P from dayGrid's file
            monthMode: true,
            fixedWeekCount: true
        }
    }
});

export default main;
export { ResourceDayGrid, ResourceDayGridView };

/*!
FullCalendar Resource Day Grid Plugin v4.3.0
Docs & License: https://fullcalendar.io/scheduler
(c) 2019 Adam Shaw
*/

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@fullcalendar/core'), require('@fullcalendar/resource-common'), require('@fullcalendar/daygrid')) :
    typeof define === 'function' && define.amd ? define(['exports', '@fullcalendar/core', '@fullcalendar/resource-common', '@fullcalendar/daygrid'], factory) :
    (global = global || self, factory(global.FullCalendarResourceDayGrid = {}, global.FullCalendar, global.FullCalendarResourceCommon, global.FullCalendarDayGrid));
}(this, function (exports, core, ResourceCommonPlugin, DayGridPlugin) { 'use strict';

var ResourceCommonPlugin__default = 'default' in ResourceCommonPlugin ? ResourceCommonPlugin['default'] : ResourceCommonPlugin;
var DayGridPlugin__default = 'default' in DayGridPlugin ? DayGridPlugin['default'] : DayGridPlugin;

    /*! *****************************************************************************
    Copyright (c) Microsoft Corporation. All rights reserved.
    Licensed under the Apache License, Version 2.0 (the "License"); you may not use
    this file except in compliance with the License. You may obtain a copy of the
    License at http://www.apache.org/licenses/LICENSE-2.0

    THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
    KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
    WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
    MERCHANTABLITY OR NON-INFRINGEMENT.

    See the Apache Version 2.0 License for specific language governing permissions
    and limitations under the License.
    ***************************************************************************** */
    /* global Reflect, Promise */

    function __extends(d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    }

    var main = core.createPlugin({
        deps: [ResourceCommonPlugin__default, DayGridPlugin__default],
        defaultView: 'resourceDayGridDay',
        views: {
            resourceDayGrid: ResourceDayGridView,
            resourceDayGridDay: {
                type: 'resourceDayGrid',
                duration: { days: 1 }
            },
            resourceDayGridWeek: {
                type: 'resourceDayGrid',
                duration: { weeks: 1 }
            },
            resourceDayGridMonth: {
                type: 'resourceDayGrid',
                duration: { months: 1 },
                // TODO: wish we didn't have to C&P from dayGrid's file
                monthMode: true,
                fixedWeekCount: true
            }
        }
    });

    exports.ResourceDayGrid = ResourceDayGrid;
    exports.ResourceDayGridView = ResourceDayGridView;
    exports.default = main;

Object.defineProperty(exports, '__esModule', { value: true });

}));

// Generated by dts-bundle v0.7.3-fork.1
// Dependencies for this module:
//   ../../../../../@fullcalendar/core
//   ../../../../../@fullcalendar/daygrid
//   ../../../../../@fullcalendar/resource-common

declare module '@fullcalendar/resource-daygrid' {
    import ResourceDayGridView from '@fullcalendar/resource-daygrid/ResourceDayGridView';
    export { ResourceDayGridView };
    export { default as ResourceDayGrid } from '@fullcalendar/resource-daygrid/ResourceDayGrid';
    const _default: import("@fullcalendar/core").PluginDef;
    export default _default;
}

declare module '@fullcalendar/resource-daygrid/ResourceDayGridView' {
    import { ComponentContext, ViewSpec, DateProfileGenerator } from '@fullcalendar/core';
    import { AbstractDayGridView } from '@fullcalendar/daygrid';
    import { ResourceDayHeader, ResourceViewProps } from '@fullcalendar/resource-common';
    import ResourceDayGrid from '@fullcalendar/resource-daygrid/ResourceDayGrid';
    export { ResourceDayGridView as default, ResourceDayGridView };
    class ResourceDayGridView extends AbstractDayGridView {
        static needsResourceData: boolean;
        props: ResourceViewProps;
        header: ResourceDayHeader;
        resourceDayGrid: ResourceDayGrid;
        constructor(context: ComponentContext, viewSpec: ViewSpec, dateProfileGenerator: DateProfileGenerator, parentEl: HTMLElement);
        destroy(): void;
        render(props: ResourceViewProps): void;
    }
}

declare module '@fullcalendar/resource-daygrid/ResourceDayGrid' {
    import { Hit, DateSpan, DateComponent, DateProfile, EventStore, EventUiHash, EventInteractionState, ComponentContext, Duration } from '@fullcalendar/core';
    import { DayGrid } from '@fullcalendar/daygrid';
    import { AbstractResourceDayTable } from '@fullcalendar/resource-common';
    export interface ResourceDayGridProps {
        dateProfile: DateProfile | null;
        resourceDayTable: AbstractResourceDayTable;
        businessHours: EventStore;
        eventStore: EventStore;
        eventUiBases: EventUiHash;
        dateSelection: DateSpan | null;
        eventSelection: string;
        eventDrag: EventInteractionState | null;
        eventResize: EventInteractionState | null;
        isRigid: boolean;
        nextDayThreshold: Duration;
    }
    export { ResourceDayGrid as default, ResourceDayGrid };
    class ResourceDayGrid extends DateComponent {
        dayGrid: DayGrid;
        constructor(context: ComponentContext, dayGrid: DayGrid);
        destroy(): void;
        render(props: ResourceDayGridProps): void;
        buildPositionCaches(): void;
        queryHit(positionLeft: number, positionTop: number): Hit;
    }
}

/*!
FullCalendar Resource Day Grid Plugin v4.3.0
Docs & License: https://fullcalendar.io/scheduler
(c) 2019 Adam Shaw
*/
!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("@fullcalendar/core"),require("@fullcalendar/resource-common"),require("@fullcalendar/daygrid")):"function"==typeof define&&define.amd?define(["exports","@fullcalendar/core","@fullcalendar/resource-common","@fullcalendar/daygrid"],r):r((e=e||self).FullCalendarResourceDayGrid={},e.FullCalendar,e.FullCalendarResourceCommon,e.FullCalendarDayGrid)}(this,function(e,r,t,o){"use strict";var i="default"in t?t.default:t,a="default"in o?o.default:o,s=function(e,r){return(s=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,r){e.__proto__=r}||function(e,r){for(var t in r)r.hasOwnProperty(t)&&(e[t]=r[t])})(e,r)};function n(e,r){function t(){this.constructor=e}s(e,r),e.prototype=null===r?Object.create(r):(t.prototype=r.prototype,new t)}var l=function(){return(l=Object.assign||function(e){for(var r,t=1,o=arguments.length;t

/*!
FullCalendar Moment Timezone Plugin v4.3.0
Docs & License: https://fullcalendar.io/
(c) 2019 Adam Shaw
*/

import * as momentNs from 'moment';
import 'moment-timezone/builds/moment-timezone-with-data';
import { createPlugin, NamedTimeZoneImpl } from '@fullcalendar/core';

/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0

THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.

See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
/* global Reflect, Promise */

function __extends(d, b) {
    extendStatics(d, b);
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}

export default main;

/*!
FullCalendar Moment Timezone Plugin v4.3.0
Docs & License: https://fullcalendar.io/
(c) 2019 Adam Shaw
*/

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('moment'), require('moment-timezone/builds/moment-timezone-with-data'), require('@fullcalendar/core')) :
    typeof define === 'function' && define.amd ? define(['exports', 'moment', 'moment-timezone/builds/moment-timezone-with-data', '@fullcalendar/core'], factory) :
    (global = global || self, factory(global.FullCalendarMomentTimezone = {}, global.moment, global.moment, global.FullCalendar));
}(this, function (exports, momentNs, momentTimezoneWithData, core) { 'use strict';

    /*! *****************************************************************************
    Copyright (c) Microsoft Corporation. All rights reserved.
    Licensed under the Apache License, Version 2.0 (the "License"); you may not use
    this file except in compliance with the License. You may obtain a copy of the
    License at http://www.apache.org/licenses/LICENSE-2.0

    THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
    KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
    WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
    MERCHANTABLITY OR NON-INFRINGEMENT.

    See the Apache Version 2.0 License for specific language governing permissions
    and limitations under the License.
    ***************************************************************************** */
    /* global Reflect, Promise */

    function __extends(d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    }

exports.default = main;

Object.defineProperty(exports, '__esModule', { value: true });

}));

// Generated by dts-bundle v0.7.3-fork.1
// Dependencies for this module:
// ../../../../../moment-timezone/builds/moment-timezone-with-data
// ../../../../../@fullcalendar/core

declare module '@fullcalendar/moment-timezone' {
    import 'moment-timezone/builds/moment-timezone-with-data';
    const _default: import("@fullcalendar/core").PluginDef;
    export default _default;
}

/*!
FullCalendar Moment Timezone Plugin v4.3.0
Docs & License: https://fullcalendar.io/
(c) 2019 Adam Shaw
*/
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("moment"),require("moment-timezone/builds/moment-timezone-with-data"),require("@fullcalendar/core")):"function"==typeof define&&define.amd?define(["exports","moment","moment-timezone/builds/moment-timezone-with-data","@fullcalendar/core"],t):t((e=e||self).FullCalendarMomentTimezone={},e.moment,e.moment,e.FullCalendar)}(this,function(e,t,n,o){"use strict";var r=function(e,t){return(r=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])})(e,t)};var i=t,u=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return function(e,t){function n(){this.constructor=e}r(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}(t,e),t.prototype.offsetForArray=function(e){return i.tz(e,this.timeZoneName).utcOffset()},t.prototype.timestampToArray=function(e){return i.tz(e,this.timeZoneName).toArray()},t}(o.NamedTimeZoneImpl),m=o.createPlugin({namedTimeZonedImpl:u});e.default=m,Object.defineProperty(e,"__esModule",{value:!0})});

//= require fullcalendar/core/main.js
//= require fullcalendar/daygrid/main.js
//= require fullcalendar/timegrid/main.js
//= require fullcalendar/premium/timeline/main.js
//= require fullcalendar/premium/resource-common/main.js
//= require fullcalendar/premium/resource-timeline/main.js
//= require fullcalendar/interaction/main.js

{
  "name": "@fullcalendar/bootstrap",
  "version": "4.3.0",
  "title": "FullCalendar Bootstrap Plugin",
  "description": "Bootstrap 4 theming for your calendar",
  "keywords": [
    "calendar",
    "event",
    "full-sized"
  ],
  "homepage": "https://fullcalendar.io/",
  "docs": "https://fullcalendar.io/docs/bootstrap-theme",
  "bugs": "https://fullcalendar.io/reporting-bugs",
  "repository": {
    "type": "git",
    "url": "https://github.com/fullcalendar/fullcalendar.git",
    "homepage": "https://github.com/fullcalendar/fullcalendar"
  },
  "license": "MIT",
  "author": {
    "name": "Adam Shaw",
    "email": "arshaw@arshaw.com",
    "url": "http://arshaw.com/"
  },
  "copyright": "2019 Adam Shaw",
  "peerDependencies": {
    "@fullcalendar/core": "~4.3.0"
  },
  "main": "main.js",
  "module": "main.esm.js",
  "unpkg": "main.min.js",
  "types": "main.d.ts"
}

/*!
FullCalendar Bootstrap Plugin v4.3.0
Docs & License: https://fullcalendar.io/
(c) 2019 Adam Shaw
*/

import { createPlugin, Theme } from '@fullcalendar/core';

/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0

THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.

See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
/* global Reflect, Promise */

function __extends(d, b) {
    extendStatics(d, b);
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}

export default main;
export { BootstrapTheme };

/*!
FullCalendar Bootstrap Plugin v4.3.0
Docs & License: https://fullcalendar.io/
(c) 2019 Adam Shaw
*/

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@fullcalendar/core')) :
    typeof define === 'function' && define.amd ? define(['exports', '@fullcalendar/core'], factory) :
    (global = global || self, factory(global.FullCalendarBootstrap = {}, global.FullCalendar));
}(this, function (exports, core) { 'use strict';

    /*! *****************************************************************************
    Copyright (c) Microsoft Corporation. All rights reserved.
    Licensed under the Apache License, Version 2.0 (the "License"); you may not use
    this file except in compliance with the License. You may obtain a copy of the
    License at http://www.apache.org/licenses/LICENSE-2.0

    THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
    KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
    WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
    MERCHANTABLITY OR NON-INFRINGEMENT.

    See the Apache Version 2.0 License for specific language governing permissions
    and limitations under the License.
    ***************************************************************************** */
    /* global Reflect, Promise */

    function __extends(d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    }

exports.BootstrapTheme = BootstrapTheme;
exports.default = main;

Object.defineProperty(exports, '__esModule', { value: true });

}));

// Generated by dts-bundle v0.7.3-fork.1
// Dependencies for this module:
// ../../../../../@fullcalendar/core

declare module '@fullcalendar/bootstrap' {
    import { Theme } from '@fullcalendar/core';
    export class BootstrapTheme extends Theme {
    }
    const _default: import("@fullcalendar/core").PluginDef;
    export default _default;
}

/*!
FullCalendar Bootstrap Plugin v4.3.0
Docs & License: https://fullcalendar.io/
(c) 2019 Adam Shaw
*/
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@fullcalendar/core")):"function"==typeof define&&define.amd?define(["exports","@fullcalendar/core"],t):t((e=e||self).FullCalendarBootstrap={},e.FullCalendar)}(this,function(e,t){"use strict";var o=function(e,t){return(o=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var o in t)t.hasOwnProperty(o)&&(e[o]=t[o])})(e,t)};var r=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return function(e,t){function r(){this.constructor=e}o(e,t),e.prototype=null===t?Object.create(t):(r.prototype=t.prototype,new r)}(t,e),t}(t.Theme);r.prototype.classes={widget:"fc-bootstrap",tableGrid:"table-bordered",tableList:"table",tableListHeading:"table-active",buttonGroup:"btn-group",button:"btn btn-primary",buttonActive:"active",today:"alert alert-info",popover:"card card-primary",popoverHeader:"card-header",popoverContent:"card-body",headerRow:"table-bordered",dayRow:"table-bordered",listView:"card card-primary"},r.prototype.baseIconClass="fa",r.prototype.iconClasses={close:"fa-times",prev:"fa-chevron-left",next:"fa-chevron-right",prevYear:"fa-angle-double-left",nextYear:"fa-angle-double-right"},r.prototype.iconOverrideOption="bootstrapFontAwesome",r.prototype.iconOverrideCustomButtonOption="bootstrapFontAwesome",r.prototype.iconOverridePrefix="fa-";var a=t.createPlugin({themeClasses:{bootstrap:r}});e.BootstrapTheme=r,e.default=a,Object.defineProperty(e,"__esModule",{value:!0})});

Error reading file: wrong argument type nil (expected String)

// Place all the styles related to the Messages controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

.app-chat {
  overflow: hidden;
  .mdk-drawer-layout,
  .mdk-header-layout,
  .mdk-header-layout__content {
    height: 100%;
  }
  .page {
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    padding-bottom: 0;
  }
  &-container {
    flex: 1 1 0%;
    position: relative;
    height: 100%;
    overflow: hidden;
    z-index: 0;
  }
}

.trello {
  overflow: hidden;
  .mdk-drawer-layout,
  .mdk-header-layout,
  .mdk-header-layout__content {
    height: 100%;
  }
  .page {
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    padding-bottom: 0;
  }
  &-container {
    flex: 1 1 0%;
    position: relative;
    height: 100%;
    overflow: hidden;
  }

  &-board {
    display: block;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    height: 100%;

    &__tasks {
      display: inline-flex;
      align-items: start;
      width: 22rem;
      height: 100%;

      &:not(:last-child) {
        margin-right: 1.25rem;
      }

      .card {
        width: 100%;
        max-height: calc(100% - 1.5625rem);
      }

      .card-body {
        height: 100%;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
      }

      &-list {
        min-height: 10px;
      }

      &-item {
        margin-bottom: $card-spacer-x/2;
        border-color: rgba($body-color, .1) !important;
        &:hover {
         background: rgba($body-color, .03);
        }
      }
    }
  }
}

.layout-login {
  background-size: cover;
  background-image: url('../images/login/alexandre-godreau-431553-unsplash.jpg');
  background-repeat: no-repeat;
  position: relative;
  &__overlay {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(theme-color('dark'), .5);
    z-index: -1;
    pointer-events: none;
  }

  &__form {
    padding: 2rem;
    position: relative;
  }

  @include media-breakpoint-up(md) {
    display: flex;
    &__form {
      min-width: calc(320px + 3rem * 2);
      padding: 3rem;
    }
  }
}

.page-separator {
  position: relative;
  color: $text-muted;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 0;
  margin: .5rem 0;

  &::before {
    content: '';
    height: 1px;
    background-color: $border-color;
    width: 100%;
    top: 50%;
    left: 0;
    position: absolute;
    z-index: -1;
  }
  &__text {
    display: inline-flex;
    padding: .25rem 1rem;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: $dark-gray;
    line-height: .9375rem;
    font-weight: bold;
    background-color: white;
    max-width: 90%;
    @include hover {
      text-decoration: none;
    }
  }
}

.pricing {
  &__title {
    font-size: 1.25rem;
    font-weight: 400;
    letter-spacing: normal;
  }
  &__amount {
    font-size: 3.4rem;
    line-height: 4.2rem;
    font-weight: 600;
    margin-right: .466rem;
  }
  &__currency {
    font-size: 1.4rem;
    line-height: 1.5rem;
    font-weight: 600;

  }
  &__duration {
    font-size: .933rem;
    letter-spacing: 1.4px;
    line-height: 1.066rem;
  }

  &__card--popular {
    background-color: #F6FAFD;
    position: relative;
    .pricing__card-badge {
      background-color: #EE4059;
      color: white;
      padding: .2rem .66rem;
      border-radius: .2rem .2rem 0 0;
      font-weight: 700;
      font-size: .66rem;
      font-style: italic;
      letter-spacing: 1px;
      line-height: .8rem;
      position: absolute;
      top: -1.2rem;
      right: 1.2rem;
      display: inline-block;
      text-transform: uppercase;
    }
  }

  &__features {
    letter-spacing: 1.4px;
    line-height: 1.86rem;
    li {
      padding-left: 1.466rem;
      position: relative;
      &::after {
        content: '';
        width: .5rem;
        height: .5rem;
        background-color: $primary;
        border-radius: 100%;
        left: 0;
        top: .6rem;
        position: absolute;
      }
    }
  }
}

.layout-login-centered-boxed {
height: initial;

  &__form {
    padding: 2rem;
    position: relative;
    max-width: 26rem;
    margin: 2rem 0;
  }

  @include media-breakpoint-up(md) {
    display: flex;
    justify-content: center;
    align-items: center;
    &__form {
      min-width: calc(320px + 3rem * 2);
      padding: 3rem;
    }
  }
}

.card-header-tabs-basic {
  padding-top: 0;
  padding-bottom: 0;
  display: flex;
  > div {
    display: flex;
  }
  a {
    padding: .5rem .75rem;
    color: rgba($body-color, .54);
    font-weight: 600;
    &:hover {
      text-decoration: none;
      color: rgba(17,43,74,.84);
    }
  }
  .active {
    color: rgba(17,43,74,.84);
    border-bottom: 2px solid $primary;
  }
}

.navbar {
  min-height: $navbar-height;
  padding-top: 0;
  padding-bottom: 0;
  font-size: .9rem;

  .dropdown-menu {
    position: absolute;
  }

  &.navbar-expand {
    @each $breakpoint in map-keys($grid-breakpoints) {
      $next: breakpoint-next($breakpoint, $grid-breakpoints);
      $infix: breakpoint-infix($next, $grid-breakpoints);

      {$infix} {
        @include media-breakpoint-up($next) {
          .nav-item {
            height: $navbar-height;
            display: flex;
            align-items: center;
          }
          .dropdown-menu {
            max-height: calc(100vh - #{$navbar-height * 2});
          }
        }
      }
    }
  }
}
.navbar-brand {
  font-size: 1.5rem;
  font-weight: 600;
  padding-top: 0;
  padding-bottom: 0;
  margin-right: $navbar-item-spacing;
  display: flex;
  align-items: center;
  // @include media-breakpoint-between(lg, xl) {
  //   .layout-default & {
  //     min-width: calc(#{$mdk-drawer-width} - #{$navbar-item-spacing});
  //   }
  // }
  // @include media-breakpoint-up(xl) {
  //   .layout-default & {
  //     min-width: calc(#{$mdk-drawer-width} + 2.6875rem - #{$navbar-padding-x} - #{$navbar-item-spacing});
  //   }
  // }
}
.navbar-brand-icon {
  margin-right: $navbar-padding-x/2;
}
.navbar-toggler {
  border: none;
  width: $navbar-height;
  height: $navbar-height;
  padding: 0;
  text-align: center;
  display: inline-block;
}
.navbar-toggler-right {
  order: 1;
}
.navbar-toggler-custom {
  display: flex;
  align-items: center;
  .material-icons {
    font-size: 2.0625rem;
  }
}
.navbar-height {
  height: $navbar-height;
}
.navbar-nav .nav-link {
  font-weight: 600;
}
.navbar-nav .nav-icon {
  font-size: 22px;
}

.navbar-secondary {
  min-height: 60px;
  &.navbar-expand {
    @each $breakpoint in map-keys($grid-breakpoints) {
      $next: breakpoint-next($breakpoint, $grid-breakpoints);
      $infix: breakpoint-infix($next, $grid-breakpoints);

      {$infix} {
        @include media-breakpoint-up($next) {
          .nav-item + .nav-item {
            margin-left: $nav-link-padding-x;
          }
          .navbar-nav,
          .nav-item {
            display: flex;
            align-items: center;
          }
          .nav-item {
            height: 60px;
          }
        }
      }
    }
  }
}

.navbar-main {
  &.navbar-light {
    box-shadow: 0 2px 2px rgba(0,0,0, .05);
  }
  #account_menu {
    right: 10px;
    min-width: 200px;
  }
}

.navbar .search-form {
  max-width: 300px;
  .form-control {
    box-shadow: none;
    &::placeholder {
      letter-spacing: 1.4px;
    }
  }
  .btn {
    color: $primary;
    background-color: transparent;
  }
}

.navbar-notifications-indicator {
  position: relative;
  &::after {
    width: 6px;
    height: 6px;
    content: "";
    background: $success;
    position: absolute;
    top: -3px;
    right: 2px;
    border-radius: 100px;
  }
}

.dropdown-menu.navbar-notifications-menu {
  width: 320px;
  min-height: 240px;
  line-height: 1.5;
  padding: 0;
  .dropdown-item {
    text-transform: none;
    letter-spacing: initial;
    font-size: $font-size-base;
    font-weight: normal;
    color: $body-color;
  }
  > .dropdown-item {
    background: $body-bg;
    border-bottom: 1px solid $border-color;
  }
  .navbar-notifications-menu__title {
    letter-spacing: initial;
    font-weight: 600;
  }
  .navbar-notifications-menu__content {
    max-height: 220px;
    .dropdown-item {
      white-space: normal;
    }
  }
  .navbar-notifications-menu__footer {
    border-bottom-left-radius: $border-radius;
    border-bottom-right-radius: $border-radius;
    border-top: 1px solid $border-color;
    font-weight: 600;
    &:hover {
      color: $link-color;
    }
  }
}

/////////////////////////////////////////////////////////////////////////////////////////////////////
//                                     //
//                                    //
//   search //
//                                                                                          //
/////////////////////////////////////////////////////////////////////////////////////////////////////

.search-form {
  display: flex;
  align-items: center;
  background-color: $input-bg;
  border: $input-btn-border-width solid $input-border-color;
  @if $enable-rounded {
    border-radius: $input-border-radius;
  } @else {
    border-radius: 0;
  }
  .form-control {
    border-color: transparent;
    background-color: transparent;
    box-shadow: none;
    &:focus {
      border-color: transparent;
      box-shadow: none;
    }
  }
  &:not([class^="input-group-"]) .btn {
    padding: 0 .5rem;
  }
  .btn + .form-control {
    padding-left: 0;
  }
}

.search-form--light {
  .btn {
    background: transparent;
    color: rgba(0, 0, 0, .4);
  }
  .form-control:focus + .btn {
    color: $input-color;
    @include hover {
      color: $body-color;
    }
  }
}

.map {
  width: 100%;
  min-height: 300px;
  position: relative;
  overflow: hidden;
}

.map-pin {
  width: 64px;
  height: 50px;
  position: absolute;
  top: -25px;
  left: -32px;
  background-size: 32px 32px;
  background-repeat: no-repeat;
  text-align: center;
  background-position: top center;
  color: #888;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
}

.map-pin span {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  left: 0;
}

.blue {
background-image: url(<%= asset_path 'stack/marker/blue.png' %>)
}

.jqvmap-zoomin,
.jqvmap-zoomout {
  box-sizing: content-box;
  background: $primary;
  padding: .25rem;
}
.jqvmap-label {
  z-index: 1;
  border: 1px solid $border-color;
  border-radius: $border-radius;
  background: white;
  padding: .25rem .5rem;
  color: $body-color;
}

.daterangepicker td.active {
  &,
  &:hover {
    background-color: $primary;
  }
}

.daterangepicker .ranges li.active {
background-color: $primary;
}

@import 'sidebar-style-guide/sass/style';

.sidebar {
  height: 100%;
  text-align: initial;
  &:not([data-simplebar]) {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .simplebar-content {
    height: 100%;
    overflow-x: hidden !important;
  }
}

[data-simplebar-force-enabled="true"] .simplebar-content::-webkit-scrollbar {
display: none;
}

.sidebar-heading {
margin-bottom: $sidebar-spacing-y/2;
}

.sidebar-menu + .sidebar-heading {
  margin-top: 1.625rem;
}
.sidebar-heading + .sidebar-heading {
  margin-top: 2.25rem;
}
.sidebar-heading:first-child {
  margin-top: 1.25rem;
}

.sidebar-menu-item.active {
  &:not(.open) {
    border-right: 2px solid $primary;
  }
}
.sidebar-submenu > .sidebar-menu-item:last-child {
  margin-bottom: 1rem;
}

.sidebar-submenu .sidebar-menu-text {
padding-left: 1rem;
margin-left: .75rem;
}

.sidebar .progress {
height: 7px;
}

.sidebar-light .sidebar-submenu {
  .sidebar-menu-text {
    border-left: 1px dotted rgba($dark-gray, .24);
  }
}

.sidebar-dark .sidebar-submenu {
  .sidebar-menu-text {
    border-left: 1px dotted rgba($dark-gray, .24);
  }
}

.sidebar-menu-toggle-icon {
font-weight: normal;
}

.mdk-header {
margin-bottom: $spacer;
height: auto;

  &__content {
    display: flex;
    flex-direction: column;
  }
}

@import './variables';

.select2-selection__arrow {
display: none;
}

.select2.select2-container {
width: 100% !important;
}

.select2-results__options {
margin: 0 !important;
}

.select2-container--bootstrap4.select2-container--focus .select2-selection--multiple,
.select2-container--bootstrap4 .select2-search--dropdown .select2-search__field,
.select2-container--bootstrap4 .select2-selection--multiple,
.select2-container .select2-selection--single {
  font-size: $font-size-base;
  line-height: $line-height-base;
  display: block;
  width: 100%;
  height: calc(2.40625rem + 2px);
  padding: .5rem .75rem;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  color: $input-color;
  border: 1px solid $input-border-color;
  border-radius: $input-border-radius;
  background-color: $input-bg;
  background-clip: padding-box
}

@media screen and (prefers-reduced-motion:reduce) {
  .select2-container--bootstrap4.select2-container--focus .select2-selection--multiple,
  .select2-container--bootstrap4 .select2-search--dropdown .select2-search__field,
  .select2-container--bootstrap4 .select2-selection--multiple,
  .select2-container .select2-selection--single {
      transition: none
  }
}

.select2-container--bootstrap4.select2-container--focus .select2-selection--multiple::-ms-expand,
.select2-container--bootstrap4 .select2-search--dropdown .select2-search__field::-ms-expand,
.select2-container--bootstrap4 .select2-selection--multiple::-ms-expand,
.select2-container .select2-selection--single::-ms-expand {
border: 0;
background-color: transparent
}

.select2-container--bootstrap4.select2-container--focus .select2-selection--multiple:focus,
.select2-container--bootstrap4 .select2-search--dropdown .select2-search__field:focus,
.select2-container--bootstrap4 .select2-selection--multiple:focus,
.select2-container .select2-selection--single:focus {
  color: $input-focus-color;
  border-color: $input-focus-border-color;
  outline: 0;
  background-color: $input-focus-bg;
  box-shadow: $input-box-shadow, $input-focus-box-shadow;
}

.select2-container--bootstrap4.select2-container--focus .select2-selection--multiple::placeholder,
.select2-container--bootstrap4 .select2-search--dropdown .select2-search__field::placeholder,
.select2-container--bootstrap4 .select2-selection--multiple::placeholder,
.select2-container .select2-selection--single::placeholder {
opacity: 1;
color: $input-placeholder-color;
}

.select2-container--bootstrap4.select2-container--focus .select2-selection--multiple:disabled,
.select2-container--bootstrap4.select2-container--focus .select2-selection--multiple[readonly],
.select2-container--bootstrap4 .select2-search--dropdown .select2-search__field:disabled,
.select2-container--bootstrap4 .select2-search--dropdown .select2-search__field[readonly],
.select2-container--bootstrap4 .select2-selection--multiple:disabled,
.select2-container--bootstrap4 .select2-selection--multiple[readonly],
.select2-container .select2-selection--single:disabled, .select2-container .select2-selection--single[readonly] {
opacity: 1;
background-color: $input-disabled-bg;
}

.select2-container .select2-selection--single .select2-selection__rendered {
  overflow: inherit;
  padding: 0;
  white-space: inherit;
  text-overflow: inherit
}

.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
line-height: inherit;
color: inherit
}

.select2-dropdown {
  padding: .5rem 0;
  border: $dropdown-border-width solid $dropdown-border-color;
  background-color: $dropdown-bg;
  @include border-radius($dropdown-border-radius);
  @include box-shadow($dropdown-box-shadow);
}

.select2-results__option {
  padding: .375rem .75rem;
  color: rgba($input-color, .54);
  background-color: transparent;
  display: flex;
  align-items: center;
}

.select2-results__option:hover {
color: $input-color;
}

.select2-container--bootstrap4 .select2-results__option--highlighted[aria-selected],
.select2-container--bootstrap4 .select2-results__option[aria-selected=true] {
  color: $input-color;
  background-color: transparent;
  font-weight: 600;
}

.select2-container--bootstrap4 .select2-results__option[aria-disabled=true] {
color: #95aac9;
}

.select2-container--bootstrap4.select2-container--focus .select2-selection--multiple,
.select2-container--bootstrap4 .select2-selection--multiple {
height: auto;
min-height: calc(2.40625rem + 2px)
}

.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__rendered {
  display: block;
  margin: 0 0 -.25rem -.25rem;
  padding: 0
}

.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
  font-size: .8125rem;
  line-height: 1.40625rem;
  display: inline-flex;
  margin: 0 0 .25rem .25rem;
  padding: 0 .5rem;
  // color: $input-color;
  border: none;
  border-radius: $border-radius-sm;
  background-color: $body-bg;
  color: #fff;
  background-color: #17a2b8;
  box-sizing: border-box;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove {
  margin-left: .5rem;
  color: rgba($input-color, .54);
  order: 2;
}

.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove:hover {
color: $input-color;
}

.select2-search--dropdown {
padding: .375rem .75rem;
}

.form-control-sm + .select2-container--bootstrap4.select2-container--focus .select2-selection--multiple,
.form-control-sm + .select2-container--bootstrap4 .select2-selection--multiple,
.form-control-sm + .select2-container .select2-selection--single,
.select2-container--bootstrap4 .select2-search--dropdown .select2-search__field {
  font-size: .8125rem;
  line-height: 1.75;
  height: calc(1.67188rem + 2px);
  padding: .125rem .5rem;
  border-radius: .25rem
}

.form-control-sm + .select2-container--bootstrap4.select2-container--focus .select2-selection--multiple,
.form-control-sm + .select2-container--bootstrap4 .select2-selection--multiple {
min-height: calc(1.67188rem + 2px)
}

.form-control-sm + .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
line-height: 1.42188rem
}

.form-control-lg + .select2-container--bootstrap4.select2-container--focus .select2-selection--multiple,
.form-control-lg + .select2-container--bootstrap4 .select2-selection--multiple,
.form-control-lg + .select2-container .select2-selection--single {
  font-size: 1.0625rem;
  line-height: 1.5;
  height: calc(2.59375rem + 2px);
  padding: .5rem 1rem;
  border-radius: .5rem
}

.form-control-lg + .select2-container--bootstrap4.select2-container--focus .select2-selection--multiple,
.form-control-lg + .select2-container--bootstrap4 .select2-selection--multiple {
min-height: calc(2.59375rem + 2px)
}

.form-control-lg + .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
line-height: 1.59375rem
}

.button-list > .btn {
margin-bottom: .75rem;
margin-left: .5rem;
}

.btn-rounded {
border-radius: 100px;
}

.btn .material-icons {
  font-size:18px;
  vertical-align: middle;
  position:relative;
  top: -1px;
}

.btn-light {
@include button-variant($background: white, $border: $border-color);
}

.btn-flush {
  padding: 0;
  background: none;
  color: inherit;
  line-height: 1;
  box-shadow: none;
}

/* Material Design Icons - Setup Method 2. Self hosting
* http://google.github.io/material-design-icons/ */

$MD-icon-path-name: $material-design-icons-font-path + 'MaterialIcons-Regular' !default;

@font-face {
   font-family: 'Material Icons';
   font-style: normal;
   font-weight: 400;
   src: url(asset-path("#{$MD-icon-path-name}.eot")); /* For IE6-8 */
   src: local("Material Icons"),
        local("MaterialIcons-Regular"),
        url(asset-path("#{$MD-icon-path-name}.woff2")) format('woff2'),
        url(asset-path("#{$MD-icon-path-name}.woff")) format('woff'),
        url(asset-path("#{$MD-icon-path-name}.ttf")) format('truetype');
}

.material-icons {
   font-family: 'Material Icons';
   font-weight: normal;
   font-style: normal;
   font-size: 24px;  /* Preferred icon size */
   display: inline-block;
   line-height: 1;
   text-transform: none;
   letter-spacing: normal;
   word-wrap: normal;
   white-space: nowrap;
   direction: ltr;

   /* Support for all WebKit browsers. */
   -webkit-font-smoothing: antialiased;
   /* Support for Safari and Chrome. */
   text-rendering: optimizeLegibility;

   /* Support for Firefox. */
   -moz-osx-font-smoothing: grayscale;

   /* Support for IE. */
   font-feature-settings: 'liga';

   &.md-14 { font-size: 14px; }
   &.md-18 { font-size: 18px; }
   &.md-24 { font-size: 24px; }
   &.md-36 { font-size: 36px; }
   &.md-48 { font-size: 48px; }
   &.md-128 { font-size: 128px; }
}

.comment-counter{
   position: relative;
   span {
     position: absolute;
     background: rgba(239,244,248,1);
     left: 15px;
     top: -5px;
     width: 1rem;
     text-align: center;
     font-size: 1rem;
     border-radius: 50%;
     color:$body-color;
     border:1px solid $body-color;
   }
}

.md-top-1 {
   position:relative;
   top: -1px;
}

.material-icons {
vertical-align: middle;
}

.icon-muted {
color: rgba(#374D67, .2) !important;
}

a.icon-muted:hover .material-icons {
color: $primary;
}

.icon-16pt {
  font-size: 1rem !important;
}
.icon-20pt {
  font-size: 1.25rem !important;
}
.icon-30pt {
  font-size: 30px !important;
}
.icon-40pt {
  font-size: 40px !important;
}
.icon-60pt {
  font-size: 60px !important;
}

#app-icons {
  .col-auto {
  padding: 1rem;
  height: 120px;
  width: 20%;
  }
  .title {
  max-width: 112px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 .35rem;
  }
}

.chart {
position: relative;
height: 300px;
}

.chart-legend {
  display: flex;
  margin-top: 2.5rem;
  white-space: nowrap;
  justify-content: center;

  &-item {
    display: flex;
    align-items: center;
    justify-content: start;
  }

  &:not(&--vertical) {
    .chart-legend-item + .chart-legend-item {
      margin-left: 1rem;
    }
  }

  &--vertical {
    flex-direction: column;
  }
}

.chart-legend-indicator {
  display: block;
  width: .5rem;
  height: .5rem;
  margin-right: 1rem;
  border-radius: 50%;
}

#chart-tooltip {
z-index: 0;
pointer-events: none;
}

#chart-tooltip .arrow {
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateX(-.5rem);
}

.popover-header {
border-bottom: 0;
}

.popover-body-label, .popover-body-value {
margin-left: .25rem;
}

.popover-body-indicator {
  display: inline-block;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
}

@import "./_vendor-flatpickr-vars";

$calendarBackground: #fff;
$calendarBorderColor: #eee;

$monthForeground: #3c3f40;
$monthBackground: transparent;

$weekdaysBackground: transparent;
$weekdays_color: #757575;

$dayForeground: #404848;
$dayHoverBackground: #e9e9e9;
$disabled_border_color: $dayHoverBackground;

$disabled_day_color: rgba(black, 0.15);

$todayColor: #F64747;
$today_fg_color: #fff;

$selectedDayBackground: #4f99ff;
$selectedDayForeground: #fff;

.flatpickr-calendar {
width: $daysWidth;
}

.dayContainer {
padding: 0;
border-right: 0;
}

span.flatpickr-day {
  &, &.prevMonthDay, &.nextMonthDay {
    border-radius: 0 !important;
    border: 1px solid $dayHoverBackground;
    max-width: none;
    border-right-color: transparent;

    &:nth-child(n+8) {
      border-top-color: transparent;
    }

    &:nth-child(7n-6) {
      border-left: 0;
    }

    &:nth-child(n+36) {
      border-bottom: 0;
    }

    &:nth-child(-n+7) {
      margin-top: 0;
    }

    &.today:not(.selected) {
      border-color: $dayHoverBackground;
      border-right-color: transparent;
      border-top-color: transparent;
      border-bottom-color: $todayColor;

      &:hover {
        border: 1px solid $todayColor;
      }
    }

    &.startRange, &.endRange {
      border-color: $selectedDayBackground;
    }

    &.today, &.selected {
      z-index: 2;
    }
  }
}

.rangeMode .flatpickr-day {
margin-top: -1px;
}

.flatpickr-weekwrapper .flatpickr-weeks {
box-shadow: none;
}

.flatpickr-weekwrapper span.flatpickr-day {
border: 0;
margin: -1px 0 0 -1px;
}

.hasWeeks .flatpickr-days {
border-right: 0;
}

@import "./_vendor-flatpickr-vars.scss";

@-webkit-keyframes fpFadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -20px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@-moz-keyframes fpFadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -20px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@-ms-keyframes fpFadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -20px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@-o-keyframes fpFadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -20px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fpFadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -20px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.flatpickr-calendar {
  background: transparent;
  opacity: 0;
  display: none;
  text-align: center;
  visibility: hidden;
  padding: 0;
  animation: none;
  direction: ltr;
  border: 0;
  font-size: 14px;
  line-height: 24px;
  border-radius: 5px;
  position: absolute;
  width: $calendarWidth;
  box-sizing: border-box;
  touch-action: manipulation;

  @if $noCalendarBorder {
    box-shadow: 0 3px 13px rgba(black, 0.08);
  } @else {

    background: $calendarBackground;
    box-shadow: 1px 0 0 $calendarBorderColor,
                -1px 0 0 $calendarBorderColor,
                0 1px 0 $calendarBorderColor,
                0 -1px 0 $calendarBorderColor,
                0 3px 13px rgba(black, 0.08);
  }

  &.open, &.inline {
    opacity: 1;
    max-height: 640px;
    visibility: visible;
  }

  &.open {
    display: inline-block;
    z-index: 99999;
  }

  &.animate.open {
    animation: fpFadeInDown 300ms $bezier;
  }

  &.inline {
    display: block;
    position: relative;
    top: 2px;
  }

  &.static {
    position: absolute;
    top: calc(100% + 2px);

    &.open {
      z-index: 999;
      display: block;
    }
  }

  &.multiMonth {
    .flatpickr-days .dayContainer:nth-child(n+1) {
      & .flatpickr-day.inRange:nth-child(7n+7) {
        box-shadow: none !important;
      }
    }

    .flatpickr-days .dayContainer:nth-child(n+2) {
      & .flatpickr-day.inRange:nth-child(7n+1) {
        box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
      }
    }
  }

  .hasWeeks, .hasTime {
    .dayContainer {
      border-bottom: 0;
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 0;
    }
  }

  @if $noCalendarBorder {
    .hasWeeks .dayContainer {
      border-left: 0;
    }
  }

  &.showTimeInput.hasTime {
    .flatpickr-time {
      height: $timeHeight;
      border-top: 1px solid $calendarBorderColor;
    }

    @if $noCalendarBorder {
      .flatpickr-innerContainer {
        border-bottom: 0;
      }

      .flatpickr-time {
        border: 1px solid $calendarBorderColor;
      }
    }
  }

  &.noCalendar.hasTime {
    .flatpickr-time {
      height: auto;
    }
  }

  &:before, &:after {
    position: absolute;
    display: block;
    pointer-events: none;
    border: solid transparent;
    content: '';
    height: 0;
    width: 0;
    left: 22px;
  }

  &.rightMost {
    &:before, &:after {
      left: auto;
      right: 22px;
    }
  }

  &:before {
    border-width: 5px;
    margin: 0 -5px;
  }

  &:after {
    border-width: 4px;
    margin: 0 -4px;
  }

  &.arrowTop {
    &:before, &:after {
      bottom: 100%;
    }
    &:before {
      border-bottom-color: $calendarBorderColor;
    }
    &:after {
      @if $noCalendarBorder {
        border-bottom-color: $monthBackground;
      } @else {
        border-bottom-color: $calendarBackground;
      }
    }
  }

  &.arrowBottom {
    &:before, &:after {
      top: 100%;
    }
    &:before {
      border-top-color: $calendarBorderColor;
    }
    &:after {
      @if $noCalendarBorder {
        border-top-color: $monthBackground;
      } @else {
        border-top-color: $calendarBackground;
      }
    }
  }

  &:focus {
    outline: 0;
  }
}

.flatpickr-wrapper {
position: relative;
display: inline-block;
}

.flatpickr-months {
display: flex;

  .flatpickr-month {
    @if $noCalendarBorder {
      border-radius: 5px 5px 0 0;
    }
    background: $monthBackground;
    color: $monthForeground;
    fill: $monthForeground;
    height: $monthNavHeight;
    line-height: 1;
    text-align: center;
    position: relative;
    user-select: none;
    overflow: hidden;
    flex: 1;
  }

  .flatpickr-prev-month, .flatpickr-next-month {
    text-decoration: none;
    cursor: pointer;
    position: absolute;
    top: 0px;
    line-height: 16px;
    height: $monthNavHeight;
    padding: 10px;
    z-index: 3;
    color: $monthForeground;
    fill: $monthForeground;

    &.disabled {
      display: none;
    }

    i {
      position: relative;
    }

    &.flatpickr-prev-month {
      /*!
      /*rtl:begin:ignore*/      /*
      */
      left: 0;
      /*!
      /*rtl:end:ignore*/      /*
      */
    }

    &.flatpickr-next-month {
      /*!
      /*rtl:begin:ignore*/      /*
      */
      right: 0;
      /*!
      /*rtl:end:ignore*/      /*
      */
    }

    &:hover {
      color: $todayColor;
      svg {
        @if $arrow_hover_color {
          fill: $arrow_hover_color;
        } @else {

          fill: $todayColor;
        }
      }
    }

    svg {
      width: 14px;
      height: 14px;

      path {
        transition: fill 0.1s;
        fill: inherit;
      }
    }
  }
}

.numInputWrapper {
position: relative;
height: auto;

  input, span {
    display: inline-block;
  }

  input {
    width: 100%;
    &::-ms-clear {
      display: none;
    }
  }

  span {
    position: absolute;
    right: 0;
    width: 14px;
    padding: 0 4px 0 2px;
    height: 50%;
    line-height: 50%;
    opacity: 0;
    cursor: pointer;
    border: 1px solid rgba($dayForeground, 0.15);
    box-sizing: border-box;

    &:hover {
      background: rgba($invertedBg, 0.1);
    }

    &:active {
      background: rgba($invertedBg, 0.2);
    }

    &:after {
      display: block;
      content: "";
      position: absolute;
    }

    &.arrowUp {
      top: 0;
      border-bottom: 0;

      &:after {
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-bottom: 4px solid rgba($dayForeground, 0.6);
        top: 26%;
      }
    }

&.arrowDown {
top: 50%;

      &:after {
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 4px solid rgba($dayForeground, 0.6);
        top: 40%;
      }
    }

    svg {
      width: inherit;
      height: auto;
      path {
        fill: rgba($monthForeground, 0.5);
      }
    }
  }

&:hover {
background: rgba($invertedBg, 0.05);

    span {
      opacity: 1;
    }
  }
}

.flatpickr-current-month {
  font-size: 135%;
  line-height: inherit;
  font-weight: 300;
  color: inherit;
  position: absolute;
  width: 75%;
  left: 12.5%;
  padding: 0.22 * $monthNavHeight 0 0 0;
  line-height: 1;
  height: $monthNavHeight;
  display: inline-block;
  text-align: center;
  transform: translate3d(0px, 0px, 0px);

  span.cur-month {
    font-family: inherit;
    font-weight: 700;
    color: inherit;
    display: inline-block;
    margin-left: 0.5ch;
    padding: 0;

    &:hover {
      background: rgba($invertedBg, 0.05);
    }
  }

  .numInputWrapper {
    width: 6ch;
    width: unquote("7ch\0");
    display: inline-block;

    span.arrowUp:after {
      border-bottom-color: $monthForeground;
    }

    span.arrowDown:after {
      border-top-color: $monthForeground;
    }
  }

  input.cur-year {
    background: transparent;
    box-sizing: border-box;
    color: inherit;
    cursor: text;
    padding: 0 0 0 0.5ch;
    margin: 0;
    display: inline-block;
    font-size: inherit;
    font-family: inherit;
    font-weight: 300;
    line-height: inherit;
    height: auto;
    border: 0;
    border-radius: 0;
    vertical-align: initial;

    &:focus {
      outline: 0;
    }

    &[disabled], &[disabled]:hover {
      font-size: 100%;
      color: rgba($monthForeground, 0.5);
      background: transparent;
      pointer-events: none;
    }
  }
}

.flatpickr-weekdays {
  background: $weekdaysBackground;
  text-align: center;
  overflow: hidden;
  width: 100%;
  display: flex;
  align-items: center;
  height: $weekdaysHeight;

  .flatpickr-weekdaycontainer {
    display: flex;
    flex: 1;
  }
}

span.flatpickr-weekday {
  cursor: default;
  font-size: 90%;
  background: $monthBackground;
  color: $weekdaysForeground;
  line-height: 1;
  margin: 0;
  text-align: center;
  display: block;
  flex: 1;
  font-weight: bolder;
}

.dayContainer, .flatpickr-weeks {
padding: 1px 0 0 0;
}

.flatpickr-days {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  width: $daysWidth;

  &:focus {
    outline: 0;
  }

  @if $noCalendarBorder {
    border-left: 1px solid $calendarBorderColor;
    border-right: 1px solid $calendarBorderColor;
  }
}

.dayContainer {
  padding: 0;
  outline: 0;
  text-align: left;
  width: $daysWidth;
  min-width: $daysWidth;
  max-width: $daysWidth;
  box-sizing: border-box;
  display: inline-block;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -ms-flex-pack: justify;
  justify-content: space-around;
  transform: translate3d(0px, 0px, 0px);
  opacity: 1;

  & + .dayContainer {
    box-shadow: -1px 0 0 $calendarBorderColor;
  }
}

.flatpickr-day {
  background: none;
  border: 1px solid transparent;
  border-radius: 150px;
  box-sizing: border-box;
  color: $dayForeground;
  cursor: pointer;

  font-weight: 400;
  width: 14.2857143%;
  flex-basis: 14.2857143%;
  max-width: $daySize;
  height: $daySize;
  line-height: $daySize;
  margin: 0;

  display: inline-block;
  position: relative;
  justify-content: center;
  text-align: center;

  &, &.prevMonthDay, &.nextMonthDay {
    &.inRange, &.today.inRange, &:hover, &:focus {
      cursor: pointer;
      outline: 0;
      background: $dayHoverBackground;
      border-color: $dayHoverBackground;
    }
  }

&.today {
border-color: $todayColor;

    &:hover, &:focus {
      border-color: $todayColor;
      background: $todayColor;
      @if $today_fg_color {
        color: $today_fg_color;
      } @else {
        color: white;
      }
    }
  }

  &.selected, &.startRange, &.endRange {
    &, &.inRange, &:focus, &:hover, &.prevMonthDay, &.nextMonthDay {
      background: $selectedDayBackground;
      box-shadow: none;

      @if $selectedDayForeground {
        color: $selectedDayForeground;
      } @else {
        color: white;
      }

border-color: $selectedDayBackground;
}

    &.startRange {
      border-radius: 50px 0 0 50px;
    }

    &.endRange {
      border-radius: 0 50px 50px 0;
    }
    &.startRange + .endRange:not(:nth-child(7n+1)) {
      box-shadow: -5 * $dayMargin 0 0 $selectedDayBackground;
    }

    &.startRange.endRange {
      border-radius: 50px;
    }
  }

  &.inRange {
    border-radius: 0;
    box-shadow: -2.5 * $dayMargin 0 0 $dayHoverBackground, 2.5 * $dayMargin 0 0 $dayHoverBackground;
  }

  &.disabled, &.disabled:hover,
  &.prevMonthDay, &.nextMonthDay,
  &.notAllowed, &.notAllowed.prevMonthDay, &.notAllowed.nextMonthDay {
    color: rgba($dayForeground, 0.3);
    background: transparent;

    @if $disabled_border_color {
      border-color: $disabled_border_color;
    } @else {

      border-color: transparent;
    }
    cursor: default;
  }

  &.disabled, &.disabled:hover {
    cursor: not-allowed;
    color: rgba($dayForeground, 0.1);
  }

  &.week.selected {
    border-radius: 0;
    box-shadow: -2.5 * $dayMargin 0 0 $selectedDayBackground, 2.5 * $dayMargin 0 0 $selectedDayBackground;
  }

  &.hidden {
    visibility: hidden;
  }
}

.rangeMode .flatpickr-day {
margin-top: 1px;
}

.flatpickr-weekwrapper {
display: inline-block;
float: left;

  .flatpickr-weeks {
    padding: 0 12px;
    @if $noCalendarBorder {
      border-left: 1px solid $calendarBorderColor;
    } @else {
      box-shadow: 1px 0 0 $calendarBorderColor;
    }
  }

  .flatpickr-weekday {
    float: none;
    width: 100%;
    line-height: $weekdaysHeight;
  }

  span.flatpickr-day {
    &, &:hover {
      display: block;
      width: 100%;
      max-width: none;
      color: rgba($dayForeground, 0.3);
      background: transparent;
      cursor: default;
      border: none;
    }
  }
}

.flatpickr-innerContainer {
  display: block;
  display: flex;
  box-sizing: border-box;
  overflow: hidden;

  @if $noCalendarBorder {
    background: $calendarBackground;
    border-bottom: 1px solid $calendarBorderColor;
  }
}

.flatpickr-rContainer {
  display: inline-block;
  padding: 0;
  box-sizing: border-box;
}

.flatpickr-time {
  text-align: center;
  outline: 0;
  display: block;
  height: 0;
  line-height: $timeHeight;
  max-height: $timeHeight;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;

  @if $noCalendarBorder {
    background: $calendarBackground;
    border-radius: 0 0 5px 5px;
  }

  &:after {
    content: "";
    display: table;
    clear: both;
  }

  .numInputWrapper {
    flex: 1;
    width: 40%;
    height: $timeHeight;
    float: left;

    span.arrowUp:after {
      border-bottom-color: $dayForeground;
    }

    span.arrowDown:after {
      border-top-color: $dayForeground;
    }
  }

  &.hasSeconds .numInputWrapper {
    width: 26%;
  }

  &.time24hr .numInputWrapper {
    width: 49%;
  }

  input {
    background: transparent;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    text-align: center;
    margin: 0;
    padding: 0;
    height: inherit;
    line-height: inherit;
    color: $dayForeground;
    font-size: 14px;
    position: relative;
    box-sizing: border-box;

    &.flatpickr-hour {
      font-weight: bold;
    }

    &.flatpickr-minute, &.flatpickr-second {
      font-weight: 400;
    }

    &:focus {
      outline: 0;
      border: 0;
    }
  }

  .flatpickr-time-separator, .flatpickr-am-pm {
    height: inherit;
    display: inline-block;
    float: left;
    line-height: inherit;
    color: $dayForeground;
    font-weight: bold;
    width: 2%;
    user-select: none;
    align-self: center;
  }

  .flatpickr-am-pm {
    outline: 0;
    width: 18%;
    cursor: pointer;
    text-align: center;
    font-weight: 400;
  }

  input, .flatpickr-am-pm {
    &:hover, &:focus {
      background: lighten($dayHoverBackground, 5);
    }
  }
}

.flatpickr-input[readonly] {
cursor: pointer;
}

.dashboard-location-tabs {
  &__tab {
    margin-bottom: $grid-gutter-width/3;
    cursor: pointer;

    &:not(.active) {
      .progress-bar {
        background: $text-muted !important;
      }
    }
  }
}

.preloader {
  height: 100%;
  width: 100%;
  top: 0px;
  position: fixed;
  z-index: 99999;
  background: $dark;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

@import './variables';

/*
* The MIT License
* Copyright (c) 2012 Matias Meno
*/

@keyframes passing-through {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  30%, 70% {
    opacity: 1;
    transform: translateY(0px);
  }
  100% {
    opacity: 0;
    transform: translateY(-40px);
  }
}

@keyframes slide-in {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  30% {
    opacity: 1;
    transform: translateY(0px);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  10% {
    transform: scale(1.1);
  }
  20% {
    transform: scale(1);
  }
}

.dropzone {
  // min-height: 150px;
  // border: 2px solid rgba(0, 0, 0, 0.3);
  // background: white;
  // padding: 20px 20px;

  position: relative;
  display: flex;
  flex-direction: column;
}
.dropzone.dz-clickable {
  cursor: pointer;
}
.dropzone.dz-clickable * {
  cursor: default;
}
.dropzone.dz-clickable .dz-message,
.dropzone.dz-clickable .dz-message * {
  cursor: pointer;
}
.dropzone.dz-started .dz-message {
  display: none;
}
.dropzone.dz-drag-hover {
  border-style: solid;
}
.dropzone.dz-drag-hover .dz-message {
  opacity: 0.5;
}
.dropzone .dz-message {
  text-align: center;
  padding: 2rem 1rem;
  color: #95aac9;
  border: 1px dashed $border-color;
  border-radius: $border-radius;
  background-color: white;
  order: -1;
}
.dropzone .dz-preview:hover {
  z-index: 1000;
}
.dropzone .dz-preview:hover .dz-details {
  opacity: 1;
}
.dropzone .dz-preview.dz-file-preview .dz-image {
  border-radius: 20px;
  background: #999;
  background: linear-gradient(to bottom, #eee, #ddd);
}
.dropzone .dz-preview.dz-file-preview .dz-details {
  opacity: 1;
}
.dropzone .dz-preview.dz-image-preview {
  background: white;
}
.dropzone .dz-preview.dz-image-preview .dz-details {
  transition: opacity 0.2s linear;
}
.dropzone .dz-preview .dz-remove {
  font-size: 14px;
  text-align: center;
  display: block;
  cursor: pointer;
  border: none;
}
.dropzone .dz-preview .dz-remove:hover {
  text-decoration: underline;
}
.dropzone .dz-preview:hover .dz-details {
  opacity: 1;
}
.dropzone .dz-preview .dz-details {
  z-index: 20;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  font-size: 13px;
  min-width: 100%;
  max-width: 100%;
  padding: 2em 1em;
  text-align: center;
  color: rgba(0, 0, 0, 0.9);
  line-height: 150%;
}
.dropzone .dz-preview .dz-details .dz-size {
  margin-bottom: 1em;
  font-size: 16px;
}
.dropzone .dz-preview .dz-details .dz-filename {
  white-space: nowrap;
}
.dropzone .dz-preview .dz-details .dz-filename:hover span {
  border: 1px solid rgba(200, 200, 200, 0.8);
  background-color: rgba(255, 255, 255, 0.8);
}
.dropzone .dz-preview .dz-details .dz-filename:not(:hover) {
  overflow: hidden;
  text-overflow: ellipsis;
}
.dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
  border: 1px solid transparent;
}
.dropzone .dz-preview .dz-details .dz-filename span, .dropzone .dz-preview .dz-details .dz-size span {
  background-color: rgba(255, 255, 255, 0.4);
  padding: 0 0.4em;
  border-radius: 3px;
}
.dropzone .dz-preview:hover .dz-image img {
  transform: scale(1.05, 1.05);
  filter: blur(8px);
}
.dropzone .dz-preview .dz-image {
  border-radius: 20px;
  overflow: hidden;
  width: 120px;
  height: 120px;
  position: relative;
  display: block;
  z-index: 10;
}
.dropzone .dz-preview .dz-image img {
  display: block;
}
.dropzone .dz-preview.dz-success .dz-success-mark {
  animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
}
.dropzone .dz-preview.dz-error .dz-error-mark {
  opacity: 1;
  animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
}
.dropzone .dz-preview .dz-success-mark, .dropzone .dz-preview .dz-error-mark {
  pointer-events: none;
  opacity: 0;
  z-index: 500;
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  margin-left: -27px;
  margin-top: -27px;
}
.dropzone .dz-preview .dz-success-mark svg, .dropzone .dz-preview .dz-error-mark svg {
  display: block;
  width: 54px;
  height: 54px;
}
.dropzone .dz-preview.dz-processing .dz-progress {
  opacity: 1;
  transition: all 0.2s linear;
}
.dropzone .dz-preview.dz-complete .dz-progress {
  opacity: 0;
  transition: opacity 0.4s ease-in;
}
.dropzone .dz-preview:not(.dz-processing) .dz-progress {
  animation: pulse 6s ease infinite;
}
.dropzone .dz-preview .dz-progress {
  opacity: 1;
  z-index: 1000;
  pointer-events: none;
  position: absolute;
  height: 16px;
  left: 50%;
  top: 50%;
  margin-top: -8px;
  width: 80px;
  margin-left: -40px;
  background: rgba(255, 255, 255, 0.9);
  -webkit-transform: scale(1);
  border-radius: 8px;
  overflow: hidden;
}
.dropzone .dz-preview .dz-progress .dz-upload {
  background: #333;
  background: linear-gradient(to bottom, #666, #444);
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0;
  transition: width 300ms ease-in-out;
}
.dropzone .dz-preview.dz-error .dz-error-message {
  display: block;
}
.dropzone .dz-preview.dz-error:hover .dz-error-message {
  opacity: 1;
  pointer-events: auto;
}
.dropzone .dz-preview .dz-error-message {
  pointer-events: none;
  z-index: 1000;
  position: absolute;
  display: block;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 8px;
  font-size: 13px;
  top: 130px;
  left: -10px;
  width: 140px;
  background: #be2626;
  background: linear-gradient(to bottom, #be2626, #a92222);
  padding: 0.5em 1.2em;
  color: white;
}
.dropzone .dz-preview .dz-error-message:after {
  content: '';
  position: absolute;
  top: -6px;
  left: 64px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #be2626;
}

// Alternate styles with softer background color
//
// Generate contextual modifier classes for colorizing the alert.

@each $color, $value in $theme-colors {
  .alert-soft-#{$color} {
    @include alert-variant(
      rgba(theme-color($color), .05),
      theme-color-level($color, $alert-border-level),
      theme-color($color)
    );
  }
}

.alert-light,
.alert-soft-light {
  color: theme-color-level('light', $alert-color-level);
  @include gradient-bg(theme-color('light'));
  border-color: darken(theme-color('light'), 5%);

  hr {
    border-top-color: darken(theme-color('light'), 5%);
  }
}

.list-group-small > .list-group-item {
padding-top: .8125rem;
padding-bottom: .8125rem;
}

.custom-checkbox-toggle {
  width: 3rem;
  height: 1.5rem;
  padding-left: 0;

  .custom-control-label {
    position: relative;
    width: 100%;
    height: 100%;

    &::after,
    &::before {
      position: absolute;
      top: 0;
      left: 0;
      content: "";
      transition: all .2s ease;
      border-radius: 1.5rem;
    }

    &:before {
      width: 100%;
      height: 100%;
      background-color: #e3ebf6;
    }

    &::after {
      width: 1.5rem;
      height: 100%;
      transform: scale(.8);
      background-color: #fff;
    }
  }

  .custom-control-input:checked ~ .custom-control-label::after {
    right: 0;
    left: 1.5rem;
    background-color: #fff;
  }
}

@import './variables';

$bezier: cubic-bezier(0.23, 1, 0.32, 1);
$slideTime: 400ms;

$daySize: 39px;
$padding: $daySize / 16;
$dayMargin: 2px;
$daysWidth: $daySize * 7 + $dayMargin * 14 + $padding * 2 + 2;
$calendarWidth: $daysWidth;

$monthNavHeight: 28px !default;
$weekdaysHeight: 28px !default;
$timeHeight: 40px;

$calendarBackground: #ffffff !default;
$calendarBorderColor: #e6e6e6 !default;
$noCalendarBorder: false !default;

$monthForeground: rgba(black, 0.9) !default;
$arrow_hover_color: #f64747 !default;

$monthBackground: transparent !default;

$weekdaysBackground: transparent !default;
$weekdaysForeground: rgba(black, 0.54) !default;

$dayForeground: #393939 !default;
$dayHoverBackground: #e6e6e6 !default;

$today_fg_color: false !default;
$todayColor: #959ea9 !default;
$selectedDayBackground: $primary !default;
$selectedDayForeground: false !default;
$disabled-border-color: false !default;

$invertedBg: invert($calendarBackground);

@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .border#{$infix}         { border: $border-width solid $border-color !important; }
    .border-top#{$infix}     { border-top: $border-width solid $border-color !important; }
    .border-right#{$infix}   { border-right: $border-width solid $border-color !important; }
    .border-bottom#{$infix}  { border-bottom: $border-width solid $border-color !important; }
    .border-left#{$infix}    { border-left: $border-width solid $border-color !important; }

    .border#{$infix}-0        { border: 0 !important; }
    .border-top#{$infix}-0    { border-top: 0 !important; }
    .border-right#{$infix}-0  { border-right: 0 !important; }
    .border-bottom#{$infix}-0 { border-bottom: 0 !important; }
    .border-left#{$infix}-0   { border-left: 0 !important; }

    .rounded#{$infix} {
      border-radius: $border-radius !important;
    }
    .rounded-top#{$infix} {
      border-top-left-radius: $border-radius !important;
      border-top-right-radius: $border-radius !important;
    }
    .rounded-right#{$infix} {
      border-top-right-radius: $border-radius !important;
      border-bottom-right-radius: $border-radius !important;
    }
    .rounded-bottom#{$infix} {
      border-bottom-right-radius: $border-radius !important;
      border-bottom-left-radius: $border-radius !important;
    }
    .rounded-left#{$infix} {
      border-top-left-radius: $border-radius !important;
      border-bottom-left-radius: $border-radius !important;
    }

    .rounded#{$infix}-0 {
      border-radius: 0 !important;
    }
    .rounded-top#{$infix}-0 {
      border-top-left-radius: 0 !important;
      border-top-right-radius: 0 !important;
    }
    .rounded-left#{$infix}-0 {
      border-top-left-radius: 0 !important;
      border-bottom-left-radius: 0 !important;
    }
    .rounded-right#{$infix}-0 {
      border-top-right-radius: 0 !important;
      border-bottom-right-radius: 0 !important;
    }
  }
}

.badge {
  box-sizing:border-box;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  vertical-align:middle;
}
.badge-light-gray {
  color: rgba(#66768A, .4);
}

@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .flex#{$infix} {
      flex: 1 1 0% !important;
    }
    .flex#{$infix}-none,
    .flex#{$infix}-0 {
      flex: none !important;
    }
    .flex#{$infix}-grow {
      flex: 1 1 auto !important;
    }
    .flex#{$infix}-shrink-0 {
      flex-shrink: 0 !important;
    }
  }
}

@import "font-awesome";

// Variables
@import './variables';

// Material Icons
@import 'material-design-icons-iconfont/dist/material-design-icons.scss';

.list-todo {
  &:last-child {
    margin-bottom: 0;
  }
  li {
    padding-left: 1rem;
    &:not(:last-child) {
      margin-bottom: 1rem;
    }
  }
  .custom-control-input:checked ~ .custom-control-label {
    text-decoration: line-through;
  }
  .custom-control {
    padding-left: 2rem;
  }
  .custom-control-label {
    &::before,
    &::after {
      left: -2rem;
    }
  }
}

.input-group-text .material-icons {
  font-size: inherit;
}
.input-group.input-group-merge {
  .field_with_errors {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    margin-bottom: 0;
  }
  .form-control {
    box-shadow: none;

    &:focus ~ [class*=input-group] .input-group-text {
      border-color: $input-focus-border-color;
      border-width: 1px;
      color: $input-focus-border-color;
    }

    &.is-valid ~ [class*=input-group] .input-group-text,
    .was-validated &:valid ~ [class*=input-group] .input-group-text {
      border-color: $form-feedback-valid-color;
      color: $form-feedback-valid-color;
    }
    &.is-invalid ~ [class*=input-group] .input-group-text,
    .was-validated &:invalid ~ [class*=input-group] .input-group-text {
      border-color: $form-feedback-invalid-color;
      color: $form-feedback-invalid-color;
    }
  }
  .form-control-prepended {
    padding-left: 10px;
    border-left-width: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    @include border-right-radius($input-border-radius);
  }
  .form-control-appended {
    padding-right: 0;
    border-right-width: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .input-group-prepend {
    order: -1;
    > .input-group-text {
      border-right-width: 0 !important;
      @include border-left-radius($input-border-radius);
    }
  }
  .input-group-append > .input-group-text {
    border-left-width: 0 !important;
    @include border-right-radius($input-border-radius);
  }

  &.input-group-rounded {
    .form-control-prepended {
      @include border-right-radius(20rem);
    }
    .form-control-appended {
      @include border-left-radius(20rem);
    }
    .input-group-prepend > .input-group-text {
      @include border-left-radius(20rem);
    }
    .input-group-append > .input-group-text {
      @include border-right-radius(20rem);
    }
  }
}

.table thead th {
  font-size: .825rem;
  // color: rgba(#374D67, .54);
  color: #555555;
}
.table tbody td {
  vertical-align: middle;
}
.thead-border-top-0 thead th {
  border-top: 0;
}
.table tbody .selected > td {
  background-color: rgba(#5897E0, .05);
}

.table .sort {
  color: inherit;
  display: flex-inline;
  align-items: center;
  text-decoration: none;

  &::after {
    margin-left: .5rem;
    content: str-replace(url("data:image/svg+xml;utf8,"), "#", "%23");
  }

  &.asc,
  &.desc {
    color: $body-color;
    text-decoration: underline;
  }

  & + .sort {
    margin-left: 1rem;
  }
}

table a.rating-link {
color: theme-color("light-gray");
&:hover, &.active {
color: theme-color("warning");
}
}

.progress {
box-shadow: none;
}

.avatar {
  font-size: 1rem;
  display: inline-block;
  width: 3rem;
  height: 3rem;
  position: relative;
  z-index: 0;

  &-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  &-online,
  &-offline {
    &::before,
    &::after {
      position: absolute;
      right: 5%;
      bottom: 5%;
      width: 20%;
      height: 20%;
      content: "";
      border-radius: 50%;
    }

    &::before {
      width: 22%;
      height: 22%;
      right: 4%;
      bottom: 4%;
      background-color: white;
    }
  }

  &-online::after {
    background-color: $success;
  }

  &-offline::after {
    background-color: theme-color('dark-gray');
  }

  &-title {
    display: flex;
    width: 100%;
    height: 100%;
    color: #fff;
    background-color: theme-color('dark-gray');
    align-items: center;
    justify-content: center;
  }

  &-xl,
  &-xxl {
    font-size: 1.70833rem;
    width: 5.125rem;
    height: 5.125rem;
  }

  &-lg {
    font-size: 1.33333rem;
    width: 4rem;
    height: 4rem;
  }

  &-sm {
    width: 2.5rem;
    height: 2.5rem;
    font-weight: bold;
  }

  &-xs {
    font-size: .54167rem;
    width: 35px;
    height: 35px;
    font-weight: bold;
  }
  &-xxs {
    font-size: .54167rem;
    width: 20px;
    height: 20px;
    font-weight: bold;

    &.avatar-online,
    &.avatar-offline {
      &::before,
      &::after {
        position: absolute;
        right: -1px;
        bottom: -1px;
        width: 25%;
        height: 25%;
        content: "";
        border-radius: 50%;
      }
    }
  }

  @include media-breakpoint-up(md) {
    &-xxl {
      font-size: 2.66667rem;
      width: 8rem;
      height: 8rem;
    }
  }

  &.avatar-4by3 {
    width: 4rem;
  }

  &-xxl.avatar-4by3 {
    width: 10.66667rem;
  }

  &-xl.avatar-4by3 {
    width: 6.83333rem;
  }

  &-lg.avatar-4by3 {
    width: 5.33333rem;
  }

&-group {
display: inline-flex;

    .avatar {
      // mask-image: url(../images/avatar-group-mask.svg);
      // mask-size: 100% 100%;
    }

    .avatar:hover {
      z-index: 1;
      // mask-image: none;
    }

    .avatar-img,
    .avatar-title {
      border: 2px solid white;
    }

    .avatar+.avatar {
      margin-left: -.75rem;
    }
    .avatar-lg+.avatar-lg {
      margin-left: -1rem;
    }
    .avatar-xl+.avatar-xl {
      margin-left: -1.28125rem;
    }
    .avatar-xxl+.avatar-xxl {
      margin-left: -2rem;
    }
    .avatar-sm+.avatar-sm {
      margin-left: -.625rem;
    }
    .avatar-xs+.avatar-xs {
      margin-left: -.40625rem;
    }
  }
}

.avatar-list {
  > .avatar,
  > .avatar-group {
    margin-bottom: .75rem;
    margin-left: .5rem;
  }
}

.flatpickr-input[readonly] {
  background-color: $input-bg;
}
.flatpickr-wrapper {
  display: block;
}
.flatpickr-hidden-input {
  visibility: hidden;
  height: 0;
}

.bg-primary-dark {
  background-color: $primary-dark !important;
}
.border-style-dashed {
  border-style: dashed !important;
}
.border-bottom-2 {
  border-bottom: 2px solid $border-color;
}
.text-body {
  color: $body-color;
  &[href] {
    @include hover {
      color: $body-color;
    }
  }
}
.text-underline {
  text-decoration: underline;
}
.text-underline-0 {
  text-decoration: none;
  @include hover {
    text-decoration: none;
  }
}

// .fc button {
//   height: auto;
// }
.fc td {
  padding: 0 !important;
}
.fc-event {
  line-height: 1.5;
  border-color: transparent;
  border-radius: $border-radius;
  padding: .25rem .5rem;
}
.fc-title {
  font-weight: 300;
}
.fc-popover .fc-header {
  position: relative;
  padding: .25rem .5rem;
  .fc-close {
    position: absolute;
    top: .6rem;
    right: .5rem;
  }
}

.external-event {
  padding: .25rem .5rem;
  color: white;
  margin-bottom: .5rem;
  display: flex;
  border-radius: $border-radius;
  cursor: move;
}

.appointment-message-badge { //used for showing that there's an unread message/notification on this appointment
  height: 15px;
  width: 25px;
  background-color: #d9534f;
  border-radius: 90%;
  margin-left: -12px;
  margin-top: -8px;
}

.fc-filterEmployeesDropdown-button {
  background: none! important;
  border: none! important;
  padding: 0! important;
  color: #069! important;
}

.card {
  // box-shadow: 0 10px 25px 0 rgba(50,50,93,0.07), 0 5px 15px 0 rgba(0,0,0,0.07);
  border: none;

  margin-bottom: $grid-gutter-width / 2;

  @include media-breakpoint-up(lg) {
    margin-bottom: $grid-gutter-width;
  }
}

.card-margin {
  margin-bottom: $grid-gutter-width / 2;

  @include media-breakpoint-up(lg) {
    margin-bottom: $grid-gutter-width;
  }
}

.form-row .card.form-row__card {
margin-bottom: 10px;
}

.card-list > .card:last-child {
margin-bottom: 0;
}

.card-group {
  @include media-breakpoint-up(sm) {
    margin-bottom: $grid-gutter-width;
    box-shadow: 0 10px 25px 0 rgba(50,50,93,0.07), 0 5px 15px 0 rgba(0,0,0,0.07);
    @if $enable-rounded {
      @include border-radius($card-border-radius);
    }
    > .card {
      box-shadow: none;
      border: $card-border-width solid $card-border-color;
    }
  }
}

.card-header {
  background-color: #F7F8F9;
}
.card-header__title {
  font-size: 1.25rem;
  font-weight: 600;
  font-family: $font-family-base;
  letter-spacing: 0;
  color: $headings-color;
  &:last-child {
    margin-bottom: 0;
  }
  .active & {
    color: $primary;
  }
}

.card-header-large {
padding-top: 1.4375rem;
padding-bottom: 1.4375rem;
}

.card-header-sm {
padding-top: .85rem;
padding-bottom: .85rem;
}

.card-footer {
background-color: white;
}

.card-body-lg {
  padding: 1.6875rem;
}
.card-body-x-lg {
  padding-left: 1.6875rem;
  padding-right: 1.6875rem;
}

///////////////////////////////////////////////////////
// CARD GROUP combined with GRID //
// //
//

//
//

//
///////////////////////////////////////////////////////

.card-group-row {
  display: flex;
  flex-flow: row wrap;
  &__col {
    display: flex;
  }
  &__card {
    flex: 1 0 0;
  }
}

html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

body {
line-height: 1.25rem;
}

b,
strong {
font-weight: 600;
}

.bold {
font-weight: 700;
}

h1, .h1 {
font-weight: 700;
}

.headings-color {
color: $headings-color;
}

.text-15pt {
font-size: .9375rem !important;
}

.decoration-0 {
  @include hover {
    text-decoration: none;
  }
}

.link-date {
  color: $link-color;
  position: relative;
  overflow: hidden;
  background: rgba($primary, .05);
  padding: 2px 4px;
  border-radius: 2px;

  &::after {
    content: "................................................................";
    color: rgba($dark-gray, .4);
    font-size: .75rem;
    position: absolute;
    left: 0;
    overflow: hidden;
    width: 100%;
    top: .525rem;
    white-space: nowrap;
  }

  @include hover {
    text-decoration: none;
  }
}

.text-amount {
  font-size: 30px;
  letter-spacing: 2.1px;
  color: #112B4A;
  line-height: 2.1875rem;
}

.text-stats {
  font-weight: bold;
  letter-spacing: 0.93px;
  font-size: .8125rem;
  display: flex;
  align-items: center;

  .material-icons {
    margin-left: .125rem;
    font-size: 1rem;
  }
}

html,
body {
  height: 100%;
  position: relative;
}
.mdk-header-layout,
.mdk-drawer-layout,
.mdk-drawer-layout__content {
  height: initial;
  min-height: 100%;
}

.page {
padding-bottom: $grid-gutter-width;
}

.page__container,
.page__heading-container {
  .layout-default &,
  .layout-fluid & {
    @include media-breakpoint-up(xl) {
      padding-left: $grid-gutter-width;
      padding-right: $grid-gutter-width;
    }
  }
  .layout-fluid & {
    max-width: 1300px;
  }
  .layout-default & {
    max-width: 1300px;
  }
}

.page__heading {
  h1 {line-height: 1;}
  padding-top: $grid-gutter-width /2;
  padding-bottom: $grid-gutter-width/2;
  @include media-breakpoint-up(xl) {
    &:not(.page__heading--xl_small) {
      padding-top: $grid-gutter-width;
      padding-bottom: $grid-gutter-width;

    }
  }
}
.layout-default, .layout-fixed, .layout-mini
  {
    .page__heading {
      border-bottom:1px solid $border-color;
      margin-bottom: $grid-gutter-width/2;
      @include media-breakpoint-up(xl) {
        &:not(.page__heading--xl_small) {
          margin-bottom: $grid-gutter-width;
        }
      }
    }
}

.page__header {
  background: white;
  box-shadow: 0 5px 15px 0 rgba(227,227,227,0.50);
  margin-bottom: $grid-gutter-width/2;
  @include media-breakpoint-up(xl) {
    margin-bottom: $grid-gutter-width;
  }
  z-index: 3;
  & + .page__header {
    z-index: 2;
  }
  position: relative;
}

// sticky subnav

.layout-sticky-subnav {
  .mdk-header-layout {
    overflow: initial;
  }
  .page__header {
    &-nav {
      position: sticky;
      top: $navbar-height;
      z-index: 1;
    }
    &:first-child {
      margin-bottom: 0;
      box-shadow: none;
    }
  }
  .page__container {
    z-index: 0;
    position: relative;
  }
}

.mdk-header--shadow::after {
  box-shadow: 0 5px 15px 0 rgba(227,227,227,0.50);
  bottom: 0;
  height: $navbar-height;
}

.projects-item {
  margin-bottom: 0 !important;
  padding-bottom: .4375rem;
  border-left: 1px dotted rgba(55, 77, 103, 0.2);
  margin-left: 10px;
}

.bottom-spacing {
  margin-bottom: $grid-gutter-width / 2;

  @include media-breakpoint-up(lg) {
    margin-bottom: $grid-gutter-width;
  }
}

.dropdown-toggle:focus {
outline: 0;
}

[data-caret="false"] {
  &::before,
  &::after {
    display: none;
  }
}

.dropdown-menu {
  visibility: hidden;
  opacity: 0;
  transition: opacity .3s ease, margin-top .3s ease, visibility .3s ease;
  margin-top: 20px !important;

  background-clip: initial;
  &::before,
  &::after {
    border: 8px solid transparent;
    border-bottom-color: $dropdown-bg;
    content: "";
    height: 0;
    left: 10px;
    opacity: 0;
    transition: .1s opacity cubic-bezier(.3, .5, .5, 1);
    position: absolute;
    top: -16px;
    width: 1px;
  }
  &::before {
    top: -17px;
    border-bottom-color: $dropdown-border-color;
  }
}
.dropdown-menu-right {
  &::before,
  &::after {
    left: initial;
    right: 10px;
  }
}

.dropup {
  .dropdown-menu {
    transform-origin: 10% bottom;
    &::before,
    &::after {
      top: auto;
      bottom: -16px;
      border-bottom-color: transparent;
      border-top-color: $dropdown-bg;
    }
    &::before {
      bottom: -17px;
      border-top-color: $dropdown-border-color;
    }
  }
  .dropdown-menu-right {
    transform-origin: 90% bottom;
  }
}

.show > .dropdown-menu,
.dropdown-menu.show {
  visibility: visible;
  opacity: 1;
  margin-top: $dropdown-spacer !important;

  &::before,
  &::after {
    opacity: 1;
  }
}

.dropdown-menu-caret-center {
  transform-origin: 50% top;
  .dropup & {
    transform-origin: 50% bottom;
  }
  &::before,
  &::after {
    left: 50%;
    margin-left: -4px;
  }
}

@import './variables';

/*!
* Quill Editor v1.3.6
* https://quilljs.com/
* Copyright (c) 2014, Jason Chen
* Copyright (c) 2013, salesforce.com
*/
.ql-container {
  background-color: white;
  height: 100%;
  margin: 0px;
  position: relative;
  border-radius: 0 0 $border-radius $border-radius;
  &:not(:last-child) {
    margin-bottom: 1.5rem;
  }
}
.ql-container.ql-disabled .ql-tooltip {
  visibility: hidden;
}
.ql-container.ql-disabled .ql-editor ul[data-checked] > li::before {
  pointer-events: none;
}
.ql-clipboard {
  left: -100000px;
  height: 1px;
  overflow-y: hidden;
  position: absolute;
  top: 50%;
}
.ql-clipboard p {
  margin: 0;
  padding: 0;
}
.ql-editor {
  box-sizing: border-box;
  height: 100%;
  outline: none;
  overflow-y: auto;
  padding: .5rem .75rem;
  tab-size: 4;
  text-align: left;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.ql-editor > * {
  cursor: text;
}
.ql-editor p,
.ql-editor ol,
.ql-editor ul,
.ql-editor pre,
.ql-editor blockquote,
.ql-editor h1,
.ql-editor h2,
.ql-editor h3,
.ql-editor h4,
.ql-editor h5,
.ql-editor h6 {
  margin: 0;
  padding: 0;
  counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol,
.ql-editor ul {
  padding-left: 1.5em;
}
.ql-editor ol > li,
.ql-editor ul > li {
  list-style-type: none;
}
.ql-editor ul > li::before {
  content: '\2022';
}
.ql-editor ul[data-checked=true],
.ql-editor ul[data-checked=false] {
  pointer-events: none;
}
.ql-editor ul[data-checked=true] > li *,
.ql-editor ul[data-checked=false] > li * {
  pointer-events: all;
}
.ql-editor ul[data-checked=true] > li::before,
.ql-editor ul[data-checked=false] > li::before {
  color: #777;
  cursor: pointer;
  pointer-events: all;
}
.ql-editor ul[data-checked=true] > li::before {
  content: '\2611';
}
.ql-editor ul[data-checked=false] > li::before {
  content: '\2610';
}
.ql-editor li::before {
  display: inline-block;
  white-space: nowrap;
  width: 1.2em;
}
.ql-editor li:not(.ql-direction-rtl)::before {
  margin-left: -1.5em;
  margin-right: 0.3em;
  text-align: right;
}
.ql-editor li.ql-direction-rtl::before {
  margin-left: 0.3em;
  margin-right: -1.5em;
}
.ql-editor ol li:not(.ql-direction-rtl),
.ql-editor ul li:not(.ql-direction-rtl) {
  padding-left: 1.5em;
}
.ql-editor ol li.ql-direction-rtl,
.ql-editor ul li.ql-direction-rtl {
  padding-right: 1.5em;
}
.ql-editor ol li {
  counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  counter-increment: list-0;
}
.ql-editor ol li:before {
  content: counter(list-0, decimal) '. ';
}
.ql-editor ol li.ql-indent-1 {
  counter-increment: list-1;
}
.ql-editor ol li.ql-indent-1:before {
  content: counter(list-1, lower-alpha) '. ';
}
.ql-editor ol li.ql-indent-1 {
  counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-2 {
  counter-increment: list-2;
}
.ql-editor ol li.ql-indent-2:before {
  content: counter(list-2, lower-roman) '. ';
}
.ql-editor ol li.ql-indent-2 {
  counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-3 {
  counter-increment: list-3;
}
.ql-editor ol li.ql-indent-3:before {
  content: counter(list-3, decimal) '. ';
}
.ql-editor ol li.ql-indent-3 {
  counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-4 {
  counter-increment: list-4;
}
.ql-editor ol li.ql-indent-4:before {
  content: counter(list-4, lower-alpha) '. ';
}
.ql-editor ol li.ql-indent-4 {
  counter-reset: list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-5 {
  counter-increment: list-5;
}
.ql-editor ol li.ql-indent-5:before {
  content: counter(list-5, lower-roman) '. ';
}
.ql-editor ol li.ql-indent-5 {
  counter-reset: list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-6 {
  counter-increment: list-6;
}
.ql-editor ol li.ql-indent-6:before {
  content: counter(list-6, decimal) '. ';
}
.ql-editor ol li.ql-indent-6 {
  counter-reset: list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-7 {
  counter-increment: list-7;
}
.ql-editor ol li.ql-indent-7:before {
  content: counter(list-7, lower-alpha) '. ';
}
.ql-editor ol li.ql-indent-7 {
  counter-reset: list-8 list-9;
}
.ql-editor ol li.ql-indent-8 {
  counter-increment: list-8;
}
.ql-editor ol li.ql-indent-8:before {
  content: counter(list-8, lower-roman) '. ';
}
.ql-editor ol li.ql-indent-8 {
  counter-reset: list-9;
}
.ql-editor ol li.ql-indent-9 {
  counter-increment: list-9;
}
.ql-editor ol li.ql-indent-9:before {
  content: counter(list-9, decimal) '. ';
}
.ql-editor .ql-indent-1:not(.ql-direction-rtl) {
  padding-left: 3em;
}
.ql-editor li.ql-indent-1:not(.ql-direction-rtl) {
  padding-left: 4.5em;
}
.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right {
  padding-right: 3em;
}
.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right {
  padding-right: 4.5em;
}
.ql-editor .ql-indent-2:not(.ql-direction-rtl) {
  padding-left: 6em;
}
.ql-editor li.ql-indent-2:not(.ql-direction-rtl) {
  padding-left: 7.5em;
}
.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right {
  padding-right: 6em;
}
.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right {
  padding-right: 7.5em;
}
.ql-editor .ql-indent-3:not(.ql-direction-rtl) {
  padding-left: 9em;
}
.ql-editor li.ql-indent-3:not(.ql-direction-rtl) {
  padding-left: 10.5em;
}
.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right {
  padding-right: 9em;
}
.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right {
  padding-right: 10.5em;
}
.ql-editor .ql-indent-4:not(.ql-direction-rtl) {
  padding-left: 12em;
}
.ql-editor li.ql-indent-4:not(.ql-direction-rtl) {
  padding-left: 13.5em;
}
.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right {
  padding-right: 12em;
}
.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right {
  padding-right: 13.5em;
}
.ql-editor .ql-indent-5:not(.ql-direction-rtl) {
  padding-left: 15em;
}
.ql-editor li.ql-indent-5:not(.ql-direction-rtl) {
  padding-left: 16.5em;
}
.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right {
  padding-right: 15em;
}
.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right {
  padding-right: 16.5em;
}
.ql-editor .ql-indent-6:not(.ql-direction-rtl) {
  padding-left: 18em;
}
.ql-editor li.ql-indent-6:not(.ql-direction-rtl) {
  padding-left: 19.5em;
}
.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right {
  padding-right: 18em;
}
.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right {
  padding-right: 19.5em;
}
.ql-editor .ql-indent-7:not(.ql-direction-rtl) {
  padding-left: 21em;
}
.ql-editor li.ql-indent-7:not(.ql-direction-rtl) {
  padding-left: 22.5em;
}
.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right {
  padding-right: 21em;
}
.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right {
  padding-right: 22.5em;
}
.ql-editor .ql-indent-8:not(.ql-direction-rtl) {
  padding-left: 24em;
}
.ql-editor li.ql-indent-8:not(.ql-direction-rtl) {
  padding-left: 25.5em;
}
.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right {
  padding-right: 24em;
}
.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right {
  padding-right: 25.5em;
}
.ql-editor .ql-indent-9:not(.ql-direction-rtl) {
  padding-left: 27em;
}
.ql-editor li.ql-indent-9:not(.ql-direction-rtl) {
  padding-left: 28.5em;
}
.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right {
  padding-right: 27em;
}
.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right {
  padding-right: 28.5em;
}
.ql-editor .ql-video {
  display: block;
  max-width: 100%;
}
.ql-editor .ql-video.ql-align-center {
  margin: 0 auto;
}
.ql-editor .ql-video.ql-align-right {
  margin: 0 0 0 auto;
}
.ql-editor .ql-bg-black {
  background-color: #000;
}
.ql-editor .ql-bg-red {
  background-color: #e60000;
}
.ql-editor .ql-bg-orange {
  background-color: #f90;
}
.ql-editor .ql-bg-yellow {
  background-color: #ff0;
}
.ql-editor .ql-bg-green {
  background-color: #008a00;
}
.ql-editor .ql-bg-blue {
  background-color: #06c;
}
.ql-editor .ql-bg-purple {
  background-color: #93f;
}
.ql-editor .ql-color-white {
  color: #fff;
}
.ql-editor .ql-color-red {
  color: #e60000;
}
.ql-editor .ql-color-orange {
  color: #f90;
}
.ql-editor .ql-color-yellow {
  color: #ff0;
}
.ql-editor .ql-color-green {
  color: #008a00;
}
.ql-editor .ql-color-blue {
  color: #06c;
}
.ql-editor .ql-color-purple {
  color: #93f;
}
.ql-editor .ql-font-serif {
  font-family: Georgia, Times New Roman, serif;
}
.ql-editor .ql-font-monospace {
  font-family: Monaco, Courier New, monospace;
}
.ql-editor .ql-size-small {
  font-size: 0.75em;
}
.ql-editor .ql-size-large {
  font-size: 1.5em;
}
.ql-editor .ql-size-huge {
  font-size: 2.5em;
}
.ql-editor .ql-direction-rtl {
  direction: rtl;
  text-align: inherit;
}
.ql-editor .ql-align-center {
  text-align: center;
}
.ql-editor .ql-align-justify {
  text-align: justify;
}
.ql-editor .ql-align-right {
  text-align: right;
}
.ql-editor.ql-blank::before {
  color: rgba(0,0,0,0.6);
  content: attr(data-placeholder);
  font-style: italic;
  left: 15px;
  pointer-events: none;
  position: absolute;
  right: 15px;
}
.ql-snow.ql-toolbar:after,
.ql-snow .ql-toolbar:after {
  clear: both;
  content: '';
  display: table;
}
.ql-snow.ql-toolbar button,
.ql-snow .ql-toolbar button {
  background: none;
  border: none;
  cursor: pointer;
  display: inline-block;
  float: left;
  height: 24px;
  padding: 3px 5px;
  width: 28px;
}
.ql-snow.ql-toolbar button svg,
.ql-snow .ql-toolbar button svg {
  float: left;
  height: 100%;
}
.ql-snow.ql-toolbar button:active:hover,
.ql-snow .ql-toolbar button:active:hover {
  outline: none;
}
.ql-snow.ql-toolbar input.ql-image[type=file],
.ql-snow .ql-toolbar input.ql-image[type=file] {
  display: none;
}
.ql-snow.ql-toolbar button:hover,
.ql-snow .ql-toolbar button:hover,
.ql-snow.ql-toolbar button:focus,
.ql-snow .ql-toolbar button:focus,
.ql-snow.ql-toolbar button.ql-active,
.ql-snow .ql-toolbar button.ql-active,
.ql-snow.ql-toolbar .ql-picker-label:hover,
.ql-snow .ql-toolbar .ql-picker-label:hover,
.ql-snow.ql-toolbar .ql-picker-label.ql-active,
.ql-snow .ql-toolbar .ql-picker-label.ql-active,
.ql-snow.ql-toolbar .ql-picker-item:hover,
.ql-snow .ql-toolbar .ql-picker-item:hover,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected {
  color: #06c;
}
.ql-snow.ql-toolbar button:hover .ql-fill,
.ql-snow .ql-toolbar button:hover .ql-fill,
.ql-snow.ql-toolbar button:focus .ql-fill,
.ql-snow .ql-toolbar button:focus .ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-fill,
.ql-snow .ql-toolbar button.ql-active .ql-fill,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,
.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,
.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,
.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,
.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,
.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill {
  fill: #06c;
}
.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow .ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button:focus .ql-stroke,
.ql-snow .ql-toolbar button:focus .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke,
.ql-snow .ql-toolbar button.ql-active .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
.ql-snow.ql-toolbar button:hover .ql-stroke-miter,
.ql-snow .ql-toolbar button:hover .ql-stroke-miter,
.ql-snow.ql-toolbar button:focus .ql-stroke-miter,
.ql-snow .ql-toolbar button:focus .ql-stroke-miter,
.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,
.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
  stroke: #06c;
}
@media (pointer: coarse) {
  .ql-snow.ql-toolbar button:hover:not(.ql-active),
  .ql-snow .ql-toolbar button:hover:not(.ql-active) {
    color: $body-color;
  }
  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,
  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,
  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,
  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill {
    fill: $body-color;
  }
  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,
  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,
  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,
  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter {
    stroke: $body-color;
  }
}
.ql-snow {
  box-sizing: border-box;
}
.ql-snow * {
  box-sizing: border-box;
}
.ql-snow .ql-hidden {
  display: none;
}
.ql-snow .ql-out-bottom,
.ql-snow .ql-out-top {
  visibility: hidden;
}
.ql-snow .ql-tooltip {
  position: absolute;
  transform: translateY(10px);
}
.ql-snow .ql-tooltip a {
  cursor: pointer;
  text-decoration: none;
}
.ql-snow .ql-tooltip.ql-flip {
  transform: translateY(-10px);
}
.ql-snow .ql-formats {
  display: inline-block;
  vertical-align: middle;
}
.ql-snow .ql-formats:after {
  clear: both;
  content: '';
  display: table;
}
.ql-snow .ql-stroke {
  fill: none;
  stroke: $body-color;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}
.ql-snow .ql-stroke-miter {
  fill: none;
  stroke: $body-color;
  stroke-miterlimit: 10;
  stroke-width: 2;
}
.ql-snow .ql-fill,
.ql-snow .ql-stroke.ql-fill {
  fill: $body-color;
}
.ql-snow .ql-empty {
  fill: none;
}
.ql-snow .ql-even {
  fill-rule: evenodd;
}
.ql-snow .ql-thin,
.ql-snow .ql-stroke.ql-thin {
  stroke-width: 1;
}
.ql-snow .ql-transparent {
  opacity: 0.4;
}
.ql-snow .ql-direction svg:last-child {
  display: none;
}
.ql-snow .ql-direction.ql-active svg:last-child {
  display: inline;
}
.ql-snow .ql-direction.ql-active svg:first-child {
  display: none;
}
.ql-snow .ql-editor h1 {
  font-size: 2em;
}
.ql-snow .ql-editor h2 {
  font-size: 1.5em;
}
.ql-snow .ql-editor h3 {
  font-size: 1.17em;
}
.ql-snow .ql-editor h4 {
  font-size: 1em;
}
.ql-snow .ql-editor h5 {
  font-size: 0.83em;
}
.ql-snow .ql-editor h6 {
  font-size: 0.67em;
}
.ql-snow .ql-editor a {
  text-decoration: underline;
}
.ql-snow .ql-editor blockquote {
  border-left: 4px solid $border-color;
  margin-bottom: 5px;
  margin-top: 5px;
  padding-left: 16px;
}
.ql-snow .ql-editor code,
.ql-snow .ql-editor pre {
  background-color: #f0f0f0;
  border-radius: 3px;
}
.ql-snow .ql-editor pre {
  white-space: pre-wrap;
  margin-bottom: 5px;
  margin-top: 5px;
  padding: 5px 10px;
}
.ql-snow .ql-editor code {
  font-size: 85%;
  padding: 2px 4px;
}
.ql-snow .ql-editor pre.ql-syntax {
  background-color: #23241f;
  color: #f8f8f2;
  overflow: visible;
}
.ql-snow .ql-editor img {
  max-width: 100%;
}
.ql-snow .ql-picker {
  color: $body-color;
  display: inline-block;
  float: left;
  font-size: 14px;
  font-weight: 600;
  height: 24px;
  position: relative;
  vertical-align: middle;
}
.ql-snow .ql-picker-label {
  cursor: pointer;
  display: inline-block;
  height: 100%;
  padding-left: 8px;
  padding-right: 2px;
  position: relative;
  width: 100%;
}
.ql-snow .ql-picker-label::before {
  display: inline-block;
  line-height: 22px;
}
.ql-snow .ql-picker-options {
  background-color: #fff;
  display: none;
  min-width: 100%;
  padding: 4px 8px;
  position: absolute;
  white-space: nowrap;
}
.ql-snow .ql-picker-options .ql-picker-item {
  cursor: pointer;
  display: block;
  padding-bottom: 5px;
  padding-top: 5px;
}
.ql-snow .ql-picker.ql-expanded .ql-picker-label {
  color: $border-color;
  z-index: 2;
}
.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
  fill: $border-color;
}
.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
  stroke: $border-color;
}
.ql-snow .ql-picker.ql-expanded .ql-picker-options {
  display: block;
  margin-top: -1px;
  top: 100%;
  z-index: 1;
}
.ql-snow .ql-color-picker,
.ql-snow .ql-icon-picker {
  width: 28px;
}
.ql-snow .ql-color-picker .ql-picker-label,
.ql-snow .ql-icon-picker .ql-picker-label {
  padding: 2px 4px;
}
.ql-snow .ql-color-picker .ql-picker-label svg,
.ql-snow .ql-icon-picker .ql-picker-label svg {
  right: 4px;
}
.ql-snow .ql-icon-picker .ql-picker-options {
  padding: 4px 0px;
}
.ql-snow .ql-icon-picker .ql-picker-item {
  height: 24px;
  width: 24px;
  padding: 2px 4px;
}
.ql-snow .ql-color-picker .ql-picker-options {
  padding: 3px 5px;
  width: 152px;
}
.ql-snow .ql-color-picker .ql-picker-item {
  border: 1px solid transparent;
  float: left;
  height: 16px;
  margin: 2px;
  padding: 0px;
  width: 16px;
}
.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg {
  position: absolute;
  margin-top: -9px;
  right: 0;
  top: 50%;
  width: 18px;
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=''])::before,
.ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=''])::before,
.ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=''])::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=''])::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=''])::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=''])::before {
  content: attr(data-label);
}
.ql-snow .ql-picker.ql-header {
  width: 98px;
}
.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: 'Normal';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: 'Heading 1';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: 'Heading 2';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: 'Heading 3';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: 'Heading 4';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: 'Heading 5';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: 'Heading 6';
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  font-size: 2em;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  font-size: 1.5em;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  font-size: 1.17em;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  font-size: 1em;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  font-size: 0.83em;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  font-size: 0.67em;
}
.ql-snow .ql-picker.ql-font {
  width: 108px;
}
.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: 'Sans Serif';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
  content: 'Serif';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
  content: 'Monospace';
}
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
  font-family: Georgia, Times New Roman, serif;
}
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
  font-family: Monaco, Courier New, monospace;
}
.ql-snow .ql-picker.ql-size {
  width: 98px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: 'Normal';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
  content: 'Small';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
  content: 'Large';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
  content: 'Huge';
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
  font-size: 10px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
  font-size: 18px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
  font-size: 32px;
}
.ql-snow .ql-color-picker.ql-background .ql-picker-item {
  background-color: #fff;
}
.ql-snow .ql-color-picker.ql-color .ql-picker-item {
  background-color: #000;
}
.ql-toolbar.ql-snow {
  border: 1px solid $border-color;
  padding: 8px;
  background-color: white;
  border-radius: $border-radius $border-radius 0 0;
}
.ql-toolbar.ql-snow .ql-formats {
  margin-right: 15px;
}
.ql-toolbar.ql-snow .ql-picker-label {
  border: 1px solid transparent;
}
.ql-toolbar.ql-snow .ql-picker-options {
  border: 1px solid transparent;
  box-shadow: rgba($body-color,0.2) 0 2px 8px;
}
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
  border-color: $border-color;
}
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
  border-color: $border-color;
}
.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,
.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover {
  border-color: #000;
}
.ql-toolbar.ql-snow + .ql-container.ql-snow {
  border-top: 0px;
}
.ql-snow .ql-tooltip {
  background-color: #fff;
  border: 1px solid $border-color;
  box-shadow: 0px 0px 5px #ddd;
  color: inherit;
  padding: 5px 12px;
  white-space: nowrap;
}
.ql-snow .ql-tooltip::before {
  content: "Visit URL:";
  line-height: 26px;
  margin-right: 8px;
}
.ql-snow .ql-tooltip input[type=text] {
  display: none;
  border: 1px solid $border-color;
  font-size: 13px;
  height: 26px;
  margin: 0px;
  padding: 3px 5px;
  width: 170px;
}
.ql-snow .ql-tooltip a.ql-preview {
  display: inline-block;
  max-width: 200px;
  overflow-x: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}
.ql-snow .ql-tooltip a.ql-action::after {
  border-right: 1px solid $border-color;
  content: 'Edit';
  margin-left: 16px;
  padding-right: 8px;
}
.ql-snow .ql-tooltip a.ql-remove::before {
  content: 'Remove';
  margin-left: 8px;
}
.ql-snow .ql-tooltip a {
  line-height: 26px;
}
.ql-snow .ql-tooltip.ql-editing a.ql-preview,
.ql-snow .ql-tooltip.ql-editing a.ql-remove {
  display: none;
}
.ql-snow .ql-tooltip.ql-editing input[type=text] {
  display: inline-block;
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
  border-right: 0px;
  content: 'Save';
  padding-right: 0px;
}
.ql-snow .ql-tooltip[data-mode=link]::before {
  content: "Enter link:";
}
.ql-snow .ql-tooltip[data-mode=formula]::before {
  content: "Enter formula:";
}
.ql-snow .ql-tooltip[data-mode=video]::before {
  content: "Enter video:";
}
.ql-snow a {
  color: $link-color;
}
.ql-container.ql-snow {
  border: 1px solid $border-color;
}

.text-editor {
height: 350px;
}

.navbar-dark {
  &.bg-dark [class*="border-"] {
    border-color: rgba(0,0,0,.34) !important;
  }

  &[class*=primary] [class*="border-"] {
    border-color: rgba(white,.24) !important;
  }

  .search-form {
    border-color: transparent;
    .form-control {
      color: rgba(white, .84);
    }
  }

  &.bg-dark .search-form {
    background-color: rgba(0,0,0,.24);
    .form-control::placeholder {
      color: #66768A;
      font-weight: 500;

    }
    .btn {
      color: rgba(white, .54);
    }
  }

  &[class*=primary] .search-form {
    background-color: rgba(0,0,0,.12);
    .form-control::placeholder {
      color: white;
    }
    .btn {
      color: rgba(white, .54);
    }
  }

  .navbar-toggler-custom {
    background-color: rgba(black, .24);
    .material-icons {
      color: white;
    }
  }
  .nav-icon,
  .navbar-notifications-indicator {
    color: white;
  }
}

.list-skills {
  li {
    display: flex;
    align-items: center;
    &:not(:last-child) {
      margin-bottom: 1rem;
    }
    > div + div {
      padding-left: 1rem;
    }
    > div:first-child {
      width: 110px;
    }
  }
  &:last-child {
    margin-bottom: 0;
  }
}

@import url('https://fonts.googleapis.com/css?family=Open+Sans:600,700|Source+Sans+Pro:400,400i,600,700');

// $material-design-icons-font-path: '../fonts/material-icons/' !default;
$material-design-icons-font-path: 'material-design-icons-iconfont/dist/fonts/' !default;

$body-bg:                           #F7F8F9 !default;
$body-color:                        #112b4a !default;
$link-color:                        #4a90e2 !default;
$text-muted:                        rgba(#374D67, .54) !default;

$primary:                           #308AF3 !default;
$primary-dark:                      darken($primary, 10%) !default;
$success:                           #48BA16 !default;
$dark:                              #364C66 !default;
$info:                              #51A7C5 !default;

$enable-shadows: false !default; //https://github.com/twbs/bootstrap/issues/32019
$gutter: 1rem;

$mdc-theme-secondary: $primary !default;

$dark-gray: #939FAD !default;
$light-gray: #ECEEF0 !default;

$theme-colors: (
  "teal": #16BA71,
  "purple": #5163C5,
  "dark-gray": $dark-gray,
  "light-gray": $light-gray,
  "muted-light": #DBDFE4,
) !default;

$font-size-base: .9375rem !default; // 15px
$font-family-base: 'Source Sans Pro', sans-serif;

$headings-font-family: 'Open Sans', monospace !default;

$small-font-size: .8125rem !default;

$headings-color: rgba($body-color, .84) !default;

// $paragraph-margin-bottom: .9375rem !default;
$bottom-spacing: 0.9375rem * 2 !default;

$border-color: #efefef !default;

$badge-font-size:                   .675rem !default;
$badge-font-weight:                 bold !default;
$badge-padding-y:                   .25rem !default;
$badge-padding-x:                   .25rem !default;
$badge-border-radius:               2px !default;

$breadcrumb-padding-y:              0 !default;
$breadcrumb-padding-x:              0 !default;
$breadcrumb-bg:                     transparent;
$breadcrumb-divider-color:          rgba(#364C66, .24) !default;
$breadcrumb-active-color:           rgba(#364C66, .54) !default;

$table-border-color: $border-color !default;
$table-cell-padding: .35rem 1rem !default;
//

// Buttons + Forms
//
// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
$btn-font-weight: 600 !default;

$input-btn-padding-y:         .375rem !default;
$input-btn-padding-x:         .875rem !default;
$input-btn-font-size:         .875rem !default;

$input-btn-padding-y-sm:      .15rem !default;
$input-btn-padding-x-sm:      .5rem !default;
$input-btn-font-size-sm:      .65rem !default;

$input-btn-padding-y-lg:      .35rem !default;
$input-btn-padding-x-lg:      .85rem !default;
$input-btn-font-size-lg:      1rem !default;

//
$input-border-color:                #DBDFE4 !default;
$input-placeholder-color:           #A6B0BC !default;
$input-focus-border-color:          $primary !default;

$input-group-addon-bg: white !default;
$input-group-addon-color: $dark-gray !default;

$navbar-height:                     64px !default;
$navbar-item-spacing:               1rem !default;
$navbar-nav-link-padding-x:         .75rem !default;

$navbar-light-color: rgba(#384E68, .54) !default;
$navbar-light-active-color: rgba(17,43,74,.84) !default;

$navbar-dark-color: rgba(white, .54) !default;

$mdk-drawer-width: 300px !default;
$layout-mini-drawer-width: 64px !default;

$sidebar-spacing-x: 1.25rem !default;
$sidebar-spacing-y: 1rem !default;

$sidebar-heading-font-size:         .6875rem !default;
$sidebar-heading-letter-spacing:    .92px !default;
$sidebar-heading-font-weight:       bold !default;
$sidebar-light-heading-color:      rgba(17,43,74,.84) !default;
$sidebar-dark-heading-color:       rgba(255,255,255,.84) !default;

$sm-icon-spacing-x:                 .625rem !default;
$sm-button-font-weight:             600 !default;
$sm-button-font-size:              1rem !default;

$ssm-button-height: 2rem !default;
$ssm-button-font-size: .875rem !default;

$sm-light-button-color:             $dark-gray !default;
$sm-light-open-bg:                  #F7F8F9 !default;
$sm-light-icon-color:               rgba(#A4AFBA, .5) !default;
$sm-light-hover-icon-color:         $dark-gray !default;
$sm-light-active-button-color:      rgba(#354B66, .84) !default;
$sm-light-active-icon-color:        $primary !default;
$sm-light-toggle-color:             #BBBCBD !default;
$sm-light-hover-button-bg:          transparent !default;

$ssm-light-button-color:            $sm-light-button-color !default;
$sm-light-open-button-color:        #384E68 !default;
$sm-light-open-icon-color:          $primary !default;

$sidebar-light-container-border-color: $border-color !default;
$sidebar-light-border-color: $border-color !default;
$sidebar-light-heading-color: rgba(#364C66, .3) !default;

$sidebar-dark-heading-color:        rgba(white, .18) !default;
$sm-dark-button-color:              rgba($dark-gray, .84) !default;
$sm-dark-icon-color:                rgba(#A4AFBA, .5) !default;
$sm-dark-active-button-color:       rgba(white, .84) !default;
$sm-dark-active-icon-color:         $primary !default;

$sm-toggle-font-size:               18px !default;
$sm-toggle-icon:                    "\e148" !default;
$sm-open-toggle-icon:               "\e15d" !default;

$dropdown-padding-y:                .625rem !default;
$dropdown-border-color:             $border-color !default;
$dropdown-border-radius:            5px !default;
$dropdown-box-shadow:               0 5px 11px 0 rgba(0,0,0,0.07) !default;

// $dropdown-link-color:               $dark-gray !default;
$dropdown-link-hover-color:         #384E68 !default;
$dropdown-link-hover-bg:            transparent !default;

$dropdown-link-active-color: $primary !default;
$dropdown-link-active-bg: transparent !default;

$dropdown-item-padding-y: .25rem !default;
$dropdown-item-padding-x: 1.25rem !default;

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 966px
) !default;

$card-border-color: $border-color !default;

$list-group-item-padding-y: 1rem !default;
$list-group-border-color: $border-color !default;

$pagination-color:                  #929EAC !default;
$pagination-border-width:           0 !default;
$pagination-line-height:            30px !default;
$pagination-bg:                     #ECEEF0 !default;
$pagination-active-bg:              $primary;

$pagination-disabled-bg: rgba($pagination-bg, .5) !default;
$pagination-disabled-color: rgba($pagination-color, .3) !default;

@import 'bootstrap/scss/functions';
@import 'bootstrap/scss/variables';
@import 'bootstrap/scss/mixins';

// Sidebar style guide (default)
@import 'sidebar-style-guide/sass/variables';

// MDK (default)
@import 'material-design-kit/src/variables';

.page-item + .page-item {
margin-left: .05rem;
}

.page-link {
  min-width: $pagination-line-height;
  height: $pagination-line-height;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.5;
  padding-top: 0;
  padding-bottom: 0;
  font-weight: 600;
  &:hover {
    background: $pagination-active-bg;
    color: #fff;
  }
}

.pagination-rounded {
  .page-link {
    border-radius: 100px;
  }

  .page-item + .page-item {
    margin-left: .625rem;
  }

  .page-item {
    &:first-child .page-link,
    &:last-child .page-link {
      @include border-radius(100px);
    }
  }
}

.pagination-light {
  .page-item:not(.active) .page-link {
    background: transparent;
    &:hover {
      color: $primary;
    }
  }
  .page-item .page-link {
    border-radius: 100px;
  }
  .page-item {
    &:first-child .page-link,
    &:last-child .page-link {
      @include border-radius(100px);
    }
  }
}

.is-loading {
position: relative;
color: transparent !important;
}

.is-loading:after,
.loader {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  animation: 1s is-loading linear infinite;
  border: 3px solid $body-color;
  border-bottom-color: transparent;
  border-radius: 50%;
  background: transparent;
}

.is-loading-sm:after, .loader-sm {
  width: 1rem;
  height: 1rem;
  border-width: 2px;
}

.is-loading-lg:after, .loader-lg {
  width: 2rem;
  height: 2rem;
  border-width: 5px;
}

.is-loading > * {
opacity: 0 !important;
}

.is-loading:after {
  position: absolute;
  top: calc(50% - 1.5rem / 2);
  left: calc(50% - 1.5rem / 2);
  content: "";
}

.is-loading-sm:after {
top: calc(50% - 1rem / 2);
left: calc(50% - 1rem / 2);
}

.is-loading-lg:after {
top: calc(50% - 2rem / 2);
left: calc(50% - 2rem / 2);
}

@each $color, $value in $theme-colors {
  .is-loading-#{$color}:after,
  .btn-outline-#{$color}.is-loading:after,
  .loader-#{$color} {
    border-color: $value;
    border-bottom-color: transparent;
  }
  .btn-#{$color}.is-loading:after {
    border-color: color-yiq($value);
    border-bottom-color: transparent;
  }
}

@keyframes is-loading {
  0% {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(1turn);
  }
}

.loader-list {
  display: flex;
  align-items: center;
  > .loader {
    margin-bottom: .75rem;
    margin-left: .5rem;
  }
}

.mdk-drawer__content {
background: transparent;
}

.mdk-header-layout .mdk-drawer__content {
top: $navbar-height;
}

.layout-mini {
  .mdk-drawer__content {
    display: flex;
  }
  .sidebar-mini {
    width: $layout-mini-drawer-width;
    .active.show .sidebar-menu-icon {
      color: $dark;
    }

    .sidebar-menu > li.sidebar-menu-item.active {
      &:not(.open) {
        border-right: 0px;
      }
    }

    .sidebar-menu-text,
    .sidebar-badge,
    .sidebar-menu-toggle-icon {
      display: none;
    }

    .sidebar-menu-button {
      justify-content: center;
      padding-top: .5rem;
      padding-bottom: .5rem;
    }
    .sidebar-menu-icon {
      margin: 0;
    }
  }

  @include media-breakpoint-up(sm) {
    .navbar {
      padding-left: 0;
    }

    .navbar-brand {
      width: $layout-mini-drawer-width;
      min-width: $layout-mini-drawer-width;
      justify-content: center;
      .navbar-brand-icon {
        margin: 0;
      }
      > span {
        display: none;
      }
    }

    & &__d-none {
      display: none;
    }
  }
}

.dashboard-area-tabs {
  &__tab {
    display: flex;
    flex-direction: column;
    @include hover {
      text-decoration: none;
    }

    .text-label-large {
      color: theme-color('muted-light');
    }
    &:not(.active) {
      background-color: theme-color('light');
      .text-amount {
        color: theme-color('dark-gray');
      }
    }

    &.active .text-label-large {
      color: $primary;
    }
  }
}

.navbar-light {
  .navbar-brand {
    color: $dark;
  }
  .navbar-nav {
    > .active {
      position: relative;
      &::before {
        content: "";
        background-color: $primary;
        height: 2px;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
      }
    }
  }
  .text-light {
    color: $navbar-light-active-color !important;
  }
}

//** CORE
// Variables
@import 'variables';
// Bootstrap
@import 'bootstrap/scss/bootstrap';
// MDK
@import 'material-design-kit/src/style';
// SIMPLEBAR (SCROLL)
@import 'simplebar/dist/simplebar';

//** PLUGINS (NODE_MODULES)
@import "daterangepicker/daterangepicker";
@import "jqvmap/dist/jqvmap.min";

@import "toastr/toastr";
@import "toastr/toastr";

@import "vendor-select2";
@import "select2/dist/css/select2.min";

@import "dragula/dist/dragula.min";
@import "fullcalendar/dist/fullcalendar.min";
@import "fullcalendar";

@import "vendor-fontawesome-free";
@import "vendor-quill";
@import "vendor-dropzone";

//** APP
@import 'flexbox';
@import 'icons';
@import 'type';
@import 'layout';
@import 'dropdown';
@import 'header';
@import 'search-form';
@import 'navbar';
@import 'navbar-dark';
@import 'navbar-light';
@import 'drawer';
@import 'sidebar';
@import 'card';
@import 'table';
@import 'button';
@import 'breadcrumb';
@import 'form';
@import 'input-group';
@import 'progress';
@import 'tabs';
@import 'list-group';
@import 'borders';
@import 'custom-checkbox-toggle';
@import 'alert';
@import 'loader';
@import 'helpers';
@import 'badge';
@import 'avatar';
@import 'chart';
@import 'pagination';
@import 'page-separator';
@import 'apps/trello';
@import 'apps/chat';
@import 'daterangepicker';
@import 'toastr';
@import 'fullcalendar';
@import 'preloader';

//** PAGES
@import 'dashboard-area-tabs';
@import 'dashboard-location-tabs';
@import 'todo';
@import 'skills';
@import 'login';
@import 'login-centered-boxed';
@import 'stories';
@import 'pricing';
@import 'map';

.stories {
  &-card {
    margin-bottom: $grid-gutter-width/2;


    &:last-child {
      margin-bottom: 0;
    }
    &__content {
      padding: $spacer/2;
    }
    &__title {
      white-space: nowrap;
    }
    &__title,
    .card-title,
    .card-title > a {
      max-width: 180px;
    }

    .card-title > a {
      display: inline-block;
      overflow-x: hidden;
      text-overflow: ellipsis;
    }
    @include media-breakpoint-down(lg) {
      &__meta {
        margin-top: .4375rem;
        padding-top: .4375rem;
        border-top: 1px solid $border-color;
        width: 100%;
        order: 3;
        align-items: flex-start;
      }
    }
    @include media-breakpoint-up(sm) {
      &__tag {
        width: 100px;
      }
      &__date {
        width: 140px;
      }
      &__title,
      .card-title,
      .card-title > a {
        max-width: 300px;
      }
    }
  }
  &-cards {
    margin-bottom: $card-group-margin;
  }

  &-card-popular {
    position: relative;
    overflow: hidden;
    &__content {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(theme-color('dark'), .125);
    }
    .card-img {
      height: 256px;
      object-fit: cover;
    }
    a {
      color: white;
    }
    &__title {
      position: absolute;
      left: 0;
      bottom: 0;
      .text-muted {
        color: rgba(255,255,255, .54) !important;
      }

    }
  }
}

.custom-control-label::before {
  box-shadow: none;
  background-color: white;
  border: 1px solid #EFEFEF;
}

.custom-control-input {
  &:checked ~ .custom-control-label::before {
    border: none;
  }
}

%label {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: rgba($dark-gray, .84);
  line-height: .9375rem;
  margin-bottom: .5rem;
  font-weight: bold;
}

.text-label {
@extend %label;
}

.text-label-large {
  @extend %label;
  font-size: $font-size-base;
  letter-spacing: 1px;
  font-weight: bold;
  line-height: 1.5rem;
}

.card-form {
  .card-body {
    padding: 1.6875rem;
  }
  .card-body-form-group {
    padding: $card-spacer-x;
    padding-bottom: $card-spacer-x - $form-group-margin-bottom;
  }
  &__body {
    background-color: #F3F5F6;

    label:not([class]) {
      @extend %label;
    }
  }
}

.form-control:focus {
box-shadow: none !important;
}

.form-control-rounded {
border-radius: 20rem;
}

.form-control-flush {
  padding: 0;
  border-width: 0;
  box-shadow: none;
  background-color: transparent;
  &:focus {
    background-color: transparent;
    box-shadow: none;
  }
}

.custom-file-naked {
  cursor: pointer;
  width: auto;
  height: auto;
  .custom-file-input {
    width: auto;
    height: auto;
    cursor: pointer;
    line-height: 1;
  }
  .custom-file-label {
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    height: auto;
    cursor: pointer;
    line-height: 1;
    box-shadow: none;
    &:after {
      display: none;
    }
  }
}

.custom-select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

#toast-container > div {
opacity: 1;
box-shadow: 0 10px 25px 0 rgba(50,50,93,0.07), 0 5px 15px 0 rgba(0,0,0,0.07);
}

@each $color, $value in $theme-colors {
  .toast-#{$color} {
    background-color: $value;
  }
}

.breadcrumb-item {
  text-transform: uppercase;
  letter-spacing: 0.85px;
  font-size: .825rem;
  font-weight: 600;
  i.material-icons {
    position: relative;
    top: -1px;
  }
  a {
    color: #364C66;
    &:hover {
      color: $link-color;
    }
  }
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  & + [aria-label="breadcrumb"] {
    margin-top: -.6rem;
  }
}

/*!
* baguetteBox.js
* @author  feimosi
* @version 1.11.0
* @url https://github.com/feimosi/baguetteBox.js
*/
#baguetteBox-overlay {
    display: none;
    opacity: 0;
    position: fixed;
    overflow: hidden;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000000;
    background-color: #222;
    background-color: rgba(0, 0, 0, 0.8);
    -webkit-transition: opacity .5s ease;
    transition: opacity .5s ease; }
    #baguetteBox-overlay.visible {
      opacity: 1; }
    #baguetteBox-overlay .full-image {
      display: inline-block;
      position: relative;
      width: 100%;
      height: 100%;
      text-align: center; }
      #baguetteBox-overlay .full-image figure {
        display: inline;
        margin: 0;
        height: 100%; }
      #baguetteBox-overlay .full-image img {
        display: inline-block;
        width: auto;
        height: auto;
        max-height: 100%;
        max-width: 100%;
        vertical-align: middle;
        -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
           -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
                box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); }
      #baguetteBox-overlay .full-image figcaption {
        display: block;
        position: absolute;
        bottom: 0;
        width: 100%;
        text-align: center;
        line-height: 1.8;
        white-space: normal;
        color: #ccc;
        background-color: #000;
        background-color: rgba(0, 0, 0, 0.6);
        font-family: sans-serif; }
      #baguetteBox-overlay .full-image:before {
        content: "";
        display: inline-block;
        height: 50%;
        width: 1px;
        margin-right: -1px; }

  #baguetteBox-slider {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    white-space: nowrap;
    -webkit-transition: left .4s ease, -webkit-transform .4s ease;
    transition: left .4s ease, -webkit-transform .4s ease;
    transition: left .4s ease, transform .4s ease;
    transition: left .4s ease, transform .4s ease, -webkit-transform .4s ease, -moz-transform .4s ease; }
    #baguetteBox-slider.bounce-from-right {
      -webkit-animation: bounceFromRight .4s ease-out;
              animation: bounceFromRight .4s ease-out; }
    #baguetteBox-slider.bounce-from-left {
      -webkit-animation: bounceFromLeft .4s ease-out;
              animation: bounceFromLeft .4s ease-out; }

  @-webkit-keyframes bounceFromRight {
    0% {
      margin-left: 0; }
    50% {
      margin-left: -30px; }
    100% {
      margin-left: 0; } }

  @keyframes bounceFromRight {
    0% {
      margin-left: 0; }
    50% {
      margin-left: -30px; }
    100% {
      margin-left: 0; } }

  @-webkit-keyframes bounceFromLeft {
    0% {
      margin-left: 0; }
    50% {
      margin-left: 30px; }
    100% {
      margin-left: 0; } }

  @keyframes bounceFromLeft {
    0% {
      margin-left: 0; }
    50% {
      margin-left: 30px; }
    100% {
      margin-left: 0; } }

  .baguetteBox-button#next-button, .baguetteBox-button#previous-button {
    top: 50%;
    top: calc(50% - 30px);
    width: 44px;
    height: 60px; }

  .baguetteBox-button {
    position: absolute;
    cursor: pointer;
    outline: none;
    padding: 0;
    margin: 0;
    border: 0;
    -moz-border-radius: 15%;
         border-radius: 15%;
    background-color: #323232;
    background-color: rgba(50, 50, 50, 0.5);
    color: #ddd;
    font: 1.6em sans-serif;
    -webkit-transition: background-color .4s ease;
    transition: background-color .4s ease; }
    .baguetteBox-button:focus, .baguetteBox-button:hover {
      background-color: rgba(50, 50, 50, 0.9); }
    .baguetteBox-button#next-button {
      right: 2%; }
    .baguetteBox-button#previous-button {
      left: 2%; }
    .baguetteBox-button#close-button {
      top: 20px;
      right: 2%;
      right: calc(2% + 6px);
      width: 30px;
      height: 30px; }
    .baguetteBox-button svg {
      position: absolute;
      left: 0;
      top: 0; }

  /*
      Preloader
      Borrowed from http://tobiasahlin.com/spinkit/
  */
  .baguetteBox-spinner {
    width: 40px;
    height: 40px;
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -20px;
    margin-left: -20px; }

  .baguetteBox-double-bounce1,
  .baguetteBox-double-bounce2 {
    width: 100%;
    height: 100%;
    -moz-border-radius: 50%;
         border-radius: 50%;
    background-color: #fff;
    opacity: .6;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: bounce 2s infinite ease-in-out;
            animation: bounce 2s infinite ease-in-out; }

  .baguetteBox-double-bounce2 {
    -webkit-animation-delay: -1s;
            animation-delay: -1s; }

  @-webkit-keyframes bounce {
    0%, 100% {
      -webkit-transform: scale(0);
              transform: scale(0); }
    50% {
      -webkit-transform: scale(1);
              transform: scale(1); } }

  @keyframes bounce {
    0%, 100% {
      -webkit-transform: scale(0);
         -moz-transform: scale(0);
              transform: scale(0); }
    50% {
      -webkit-transform: scale(1);
         -moz-transform: scale(1);
              transform: scale(1); } }

// Place all the styles related to the PublishedJobPages controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: https://sass-lang.com/

// Place all the styles related to the locations controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

@media only screen and (max-width: 400px) {
.invoice-box {
overflow-x: auto !important;

        table td {
            font-size: 12px;
        }

        .li-delete-btn {
            font-size: 20px !important;
        }

        .li-desc {
            width: 95vw;
        }

        .custom-font-size {
            font-size: 1rem;
        }
    }
}

@media(max-width: 450px) {
    .logo-container{
        max-width: 95%;
        max-height: 95%;
    }
}

@media(min-width: 451px) {
    .logo-container{
        max-width: 75%;
        max-height: 75%;
    }
}

.logo-container{
position: relative;

    .logo-upload {
        position: absolute;
        height: 40px;
        width: 40px;
        background: white;
        box-shadow: rgba(153, 104, 104, 0.35) 0px 5px 15px;
        border-radius: 50%;
        top: 80%;
        left: 45%;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: all 0.3s;
        cursor: pointer;
        z-index: 1040;
    }

    .logo-upload:hover {
        box-shadow: rgba(100, 100, 111, 20%) 0px 7px 29px 0px;
    }

    .logo-option {
        display: none;
        font-size: 12px;
        padding: 0;
        margin: 0;
        position: absolute;
        list-style: none;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: white;
        box-shadow: rgba(149, 157, 165, 20%) 0px 8px 24px;
        top: 100%;
        left: 55%;
        border-radius: 5px;

        li {
            display: flex;
            height: 40px;
            width: 100px;
            justify-content: center;
            align-items: center;
            padding: 0 4px;
            cursor: pointer;
        }

        li:hover {
            background: rgba(0,0,0,0.05);
        }
    }
}

.editable-icon {
    position: absolute;
    height: 25px;
    width: 25px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    right: -30px;
    transition: all 0.3s;
}

.restrict-remove {
    color: white;
    background: rgba(255, 0, 0, 0.5);
    cursor: not-allowed;

    &:hover {
        background: rgba(255, 0, 0, 0.5) !important;
        cursor: not-allowed !important;
    }
}

// Place all the styles related to the products controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

// Place all the styles related to the line_item_templates controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

// Place all the styles related to the subscriptions controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

// Place all the styles related to the AppointmentColors controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

// Place all the styles related to the payments controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

// Place all the styles related to the job_statuses controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

// Place all the styles related to the Timesheets controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: https://sass-lang.com/
.timesheet-card-header{
border-radius: 13px !important; //Adding !important because bootstrap.scss is overriding because we have the _card class on it..
}

.container {
    max-width: 960px;
  }

  /*
   * Custom translucent site header
   */

  .site-header {
    background-color: rgba(0, 0, 0, .85);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
  }
  .site-header a {
    color: #999;
    transition: ease-in-out color .15s;
  }
  .site-header a:hover {
    color: #fff;
    text-decoration: none;
  }

  /*
   * Dummy devices (replace them with your own or something else entirely!)
   */

  .product-device {
    position: absolute;
    right: 10%;
    bottom: -30%;
    width: 300px;
    height: 540px;
    background-color: #333;
    border-radius: 21px;
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
  }

  .product-device::before {
    position: absolute;
    top: 10%;
    right: 10px;
    bottom: 10%;
    left: 10px;
    content: "";
    background-color: rgba(255, 255, 255, .1);
    border-radius: 5px;
  }

  .product-device-2 {
    top: -25%;
    right: auto;
    bottom: 0;
    left: 5%;
    background-color: #e5e5e5;
  }


  /*
   * Extra utilities
   */

  .border-top { border-top: 1px solid #e5e5e5; }
  .border-bottom { border-bottom: 1px solid #e5e5e5; }

  .box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }

  .flex-equal > * {
    -ms-flex: 1;
    -webkit-box-flex: 1;
    flex: 1;
  }
  @media (min-width: 768px) {
    .flex-md-equal > * {
      -ms-flex: 1;
      -webkit-box-flex: 1;
      flex: 1;
    }
  }

  .overflow-hidden { overflow: hidden; }

html {
    font-size: 14px;
  }
  @media (min-width: 768px) {
    html {
      font-size: 16px;
    }
  }

  .container {
    max-width: 960px;
  }

  .pricing-header {
    max-width: 700px;
  }

  .card-deck .card {
    min-width: 220px;
  }

  .border-top { border-top: 1px solid #e5e5e5; }
  .border-bottom { border-bottom: 1px solid #e5e5e5; }

  .box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }

@tailwind base;
@tailwind components;
@tailwind utilities;

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/

.chat {
    border: solid 1px #EEE;
  }

.message-info{
    color: grey;
    font-size:78%;
}

.message-info-mine {
@extend .message-info;
text-align: right
}

.message-info-yours{
@extend .message-info;
text-align: left
}

  .messages {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
  }

  .hsc-message {
    border-radius: 20px;
    padding: 8px 15px;
    margin-top: 5px;
    margin-bottom: 5px;
    display: inline-block;
  }

  .yours {
    align-items: flex-start;
  }

  .yours .hsc-message {
    margin-right: 25%;
    background-color: #eee;
    position: relative;
  }

  .yours .hsc-message.last:before {
    content: "";
    position: absolute;
    z-index: 0;
    bottom: 0;
    left: -7px;
    height: 20px;
    width: 20px;
    background: #eee;
    border-bottom-right-radius: 15px;
  }
  .yours .hsc-message.last:after {
    content: "";
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: -10px;
    width: 10px;
    height: 20px;
    background: white;
    border-bottom-right-radius: 10px;
  }

  .mine {
    align-items: flex-end;
  }

  .mine .hsc-message {
    color: white;
    margin-left: 25%;
    // background: linear-gradient(to bottom, #00D0EA 0%, #0085D1 100%);
    background: #0085D1;
    background-attachment: fixed;
    position: relative;
  }

  .mine .hsc-message.last:before {
    content: "";
    position: absolute;
    z-index: 0;
    bottom: 0;
    right: -8px;
    height: 20px;
    width: 20px;
    // background: linear-gradient(to bottom, #00D0EA 0%, #0085D1 100%);
    background:#0085D1;
    background-attachment: fixed;
    border-bottom-left-radius: 15px;
  }

  .mine .hsc-message.last:after {
    content: "";
    position: absolute;
    z-index: 1;
    bottom: 0;
    right: -10px;
    width: 10px;
    height: 20px;
    background: white;
    border-bottom-left-radius: 10px;
  }

// Place all the styles related to the Events controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: https://sass-lang.com/

// Place all the styles related to the Calls controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

// Place all the styles related to the branches controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

// Place all the styles related to the text_templates controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

// Place all the styles related to the Jobs controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

@import "ace";

#search-field-group {
    display: inline;
    font-size: 20px;
    margin-bottom: 0.5rem;
    position: relative;

    i {
        position: absolute;
        left: 0;
        padding: 9px 8px;
        color: #666;
    }

    input {
        display: inline;
        width: 35%;
        padding-left: 40px;
        -webkit-transition: width 0.4s ease-in-out;
        transition: width 0.6s ease-in-out;

        &:focus {
            width: 98%;
        }

        &:focus + i {
            color: #333;
        }
    }
}

.weekly-assignment-viewer{

text-align: center;
}

.remove-mobile-longpress-menu{
-webkit-touch-callout: none !important;
-webkit-user-select: none !important;
}

.topnav {
    overflow: hidden;
    background-color: #ffff;
  }

  .topnav a {
    float: left;
    color: #202020;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }

  .topnav button {
    float: left;
    color: #202020;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    background: none!important;
    border: none;
    padding: 0!important;
    /*optional*/
    /*input has OS specific font-family*/
    cursor: pointer;
  }

  .topnav a:hover, button:hover {
    text-decoration: none;
    color: $company-red;
  }

  .topnav  button.active {
    color: $company-blue;
  }

header.masthead {
  position: relative;
  overflow: hidden;
  padding-top: calc(7rem + 72px);
  padding-bottom: 7rem;
  background: linear-gradient(0deg, #54504e 0%, #100a0d 100%);
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: scroll;
  background-size: cover;
  .masthead-content {
    z-index: 1;
    position: relative;
    .masthead-heading {
      font-size: 4rem;
    }
    .masthead-subheading {
      font-size: 2rem;
    }
  }
  .bg-circle {
    z-index: 0;
    position: absolute;
    border-radius: 100%;
    background: linear-gradient(0deg, $primary 0%, $secondary 100%);
  }
  .bg-circle-1 {
    height: 90rem;
    width: 90rem;
    bottom: -55rem;
    left: -55rem;
  }
  .bg-circle-2 {
    height: 50rem;
    width: 50rem;
    top: -25rem;
    right: -25rem;
  }
  .bg-circle-3 {
    height: 20rem;
    width: 20rem;
    bottom: -10rem;
    right: 5%;
  }
  .bg-circle-4 {
    height: 30rem;
    width: 30rem;
    top: -5rem;
    right: 35%;
  }
}

@media (min-width: 992px) {
  header.masthead {
    padding-top: calc(10rem + 55px);
    padding-bottom: 10rem;
    .masthead-content {
      .masthead-heading {
        font-size: 6rem;
      }
      .masthead-subheading {
        font-size: 4rem;
      }
    }
  }
}

.bg-primary {
background-color: $primary !important;
}

.btn-primary {
  background-color: $primary;
  border-color: $primary;
  &:active,
  &:focus,
  &:hover {
    background-color: darken($primary, 10%) !important;
    border-color: darken($primary, 10%) !important;
  }
  &:focus {
    box-shadow: 0 0 0 0.2rem fade-out($primary, 0.5);
  }
}

.btn-secondary {
  background-color: $secondary;
  border-color: $secondary;
  &:active,
  &:focus,
  &:hover {
    background-color: darken($secondary, 10%) !important;
    border-color: darken($secondary, 10%) !important;
  }
  &:focus {
    box-shadow: 0 0 0 0.2rem fade-out($secondary, 0.5);
  }
}

// Core variables and mixins
@import "variables.scss";
// Global CSS
@import "global.scss";
// Components
@import "masthead.scss";
@import "bootstrap-overrides.scss";

.btn-xl {
  text-transform: uppercase;
  padding: 1.5rem 3rem;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.1rem;
}

.bg-black {
background-color: $black !important;
}

.rounded-pill {
border-radius: 5rem;
}

// Variables

// Restated Bootstrap Variables

$white: #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #868e96 !default;
$gray-700: #b7babd !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;
$black: #000 !default;

$primary: #858282 !default;
$secondary: #868483 !default;

$company-blue: #6080b0;
$company-blue-hover: darken( $company-blue, 10% );

$company-red: #5a9404;
$company-bright-red: #b71422;
$company-red-hover: darken( $company-bright-red, 5% );

$company-grey: #626060;
$company-grey-hover: darken( $company-grey, 5% );

a {
@extend .company-link;
}

.company-header {
// color: $company-blue;
// text-transform: uppercase;
}

.btn-company-danger {
    background-color: $company-bright-red;
    border-color: $company-bright-red;
    color:white;
}

.btn-company-danger:hover {
    background-color: $company-red-hover;
    border-color: $company-red-hover;
    color:white;
}

.btn-company-success {
    background-color: $company-bright-red;
    border-color: $company-bright-red;
    color:white;
}

.btn-company-success:hover {
    background-color: $company-red-hover;
    border-color: $company-red-hover;
    color:white;
}

.btn-company-primary {
    background-color: $company-blue;
    border-color: $company-blue;
    color:white;
}

.btn-company-primary:hover{
    background-color: $company-blue-hover;
    border-color: $company-blue-hover;
    color:white;
}

.btn-company-warning {
    color: white;
    background-color: $company-grey;
    border-color: $company-grey;
}

.btn-company-warning:hover {
    color: white;
    background-color: $company-grey-hover;
    border-color: $company-grey-hover;
}

.company-link {
    color: $company-blue;
    :hover {
        color: $company-red;
        text-decoration: none;
    }
}

.btn-company-link {
    @extend .company-link;
    border:none;
    background-color:inherit;
}

.sidebar-menu-text{
color: #444444;
}

.sidebar-menu-button{
color: #444444;
}

.med-text{
font-size:1.3em;
}

.clickable-card:hover{
transform:scale(1.1);
}

/////END COMPANY SPECIFIC STUFF

/**
* The css styling for our custom context menu.
*/

.custom-menu {
    display: none;
    z-index: 1000;
    position: absolute;
    overflow: hidden;
    border: 1px solid #CCC;
    white-space: nowrap;
    font-family: sans-serif;
    background: #FFF;
    color: #333;
    border-radius: 5px;
    padding-left: 0;
  }

  .custom-menu li {
    padding: 8px 12px;
    cursor: pointer;
    list-style-type: none; //Get rid of the bullet points on our custom context menu
  }

  .custom-menu li:hover {
    background-color: #DEF;
  }

body {
    // background-image: linear-gradient(to top, #ecedee 0%, #eceeef 75%, #e7e8e9 100%);
    min-height: 100vh;
    font: normal 16px sans-serif;
    padding: 60px 0;
}

.container.gallery-container {
    background-color: #fff;
    color: #35373a;
    min-height: 100vh;
    border-radius: 20px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.06);
}

.gallery-container h1 {
    text-align: center;
    margin-top: 70px;
    font-family: 'Droid Sans', sans-serif;
    font-weight: bold;
}

.gallery-container p.page-description {
    text-align: center;
    max-width: 800px;
    margin: 25px auto;
    color: #888;
    font-size: 18px;
}

.tz-gallery {
padding: 40px;
}

.tz-gallery .lightbox img {
    width: 100%;
    margin-bottom: 30px;
    transition: 0.2s ease-in-out;
    box-shadow: 0 2px 3px rgba(0,0,0,0.2);
}

.tz-gallery .lightbox img:hover {
transform: scale(1.05);
box-shadow: 0 8px 15px rgba(0,0,0,0.3);
}

.tz-gallery img {
border-radius: 4px;
}

.baguetteBox-button {
background-color: transparent !important;
}

@media(max-width: 768px) {
    body {
        padding: 0;
    }

    .container.gallery-container {
        border-radius: 0;
    }
}

// Place all the styles related to the Invoices controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
.invoice-box {
    max-width: 800px;
    margin: auto;
    padding: 30px;
    border: 1px solid #eee;
    box-shadow: 0 0 10px rgba(0, 0, 0, .15);
    font-size: 16px;
    line-height: 24px;
    font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
    color: #555;
    // overflow-x: auto !important;
}

.invoice-box table {
    width: 100%;
    line-height: inherit;
    text-align: left;
}

.invoice-box table td {
padding: 5px;
vertical-align: top;
}

.invoice-box table tr td:nth-child(2) { //This is what was causing the line items to get justified in a funky way -- "3 or 4 spaces between words". As Spencer Townsend said.
// text-align: justify;
}

.invoice-box table tr.top table td {
padding-bottom: 20px;
}

.invoice-box table tr.top table td.title {
    font-size: 45px;
    line-height: 45px;
    color: #333;
}

.invoice-box table tr.information table td {
padding-bottom: 40px;
}

.invoice-box table tr.heading td {
    background: #eee;
    border-bottom: 1px solid #ddd;
    font-weight: bold;
}

.invoice-box table tr.details td {
padding-bottom: 20px;
}

.invoice-box table tr.line-item td{
border-bottom: 1px solid #eee;
}

.invoice-box table tr.line-item.last td {
border-bottom: none;
}

.invoice-box table tr.total td:nth-child(2) {
border-top: 2px solid #eee;
font-weight: bold;
}

.line-item-mobile-container {
border:#333;
}

.isDisabled {
    color: currentColor;
    cursor: not-allowed;
    opacity: 0.5;
    text-decoration: none;
  }

// @media only screen and (min-width: 960px) {
//     /* styles for browsers larger than 960px; */
// }
// @media only screen and (min-width: 1440px) {
//     /* styles for browsers larger than 1440px; */
// }
// @media only screen and (min-width: 2000px) {
//     /* for sumo sized (mac) screens */
// }
@media only screen and (max-device-width: 480px) {
   /* styles for mobile browsers smaller than 480px; (iPhone) */
   .line-item-desktop {
        display: none;
    }
    .invoice-desktop {
        display: none;
    }

    .invoice-box {
        padding: 5px;
        overflow-x: auto !important;
    }

}
@media only screen and (min-device-width: 481px) {
   /* default iPad screens */
   .line-item-mobile {
        display:none;
    }

    .invoice-mobile
    {
        display:none;
    }
}
// /* different techniques for iPad screening */
// @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
//   /* For portrait layouts only */
// }

// @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
// /* For landscape layouts only */
// }

/** RTL **/
.rtl {
direction: rtl;
font-family: Tahoma, 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
}

.rtl table {
text-align: right;
}

.rtl table tr td:nth-child(2) {
text-align: left;
}

.line-item-price {
white-space: no-wrap;
}

.gallery_container {
max-width: 800px;
margin: 0 auto;

    .tz-gallery {
        padding: 40px;
        img {
            transition: 0.2s ease-in-out;
            border-radius: 4px;

            &:hover {
                transform: scale(1.05);
                box-shadow: 0 8px 15px #0000004d;
            }
        }
    }
}

.edit-page-invoice-images {
border-top: 1px solid rgba(0, 0, 0, 0.1);
}

//CSS for Payment Button
.ibx-pay-button {background-image: linear-gradient(to right, #314755 0%, #26a0da  51%, #314755  100%)}
.ibx-pay-button {
    display: inline-block;
    font-weight: 1000;
    text-align: center;
    vertical-align: middle;
    padding: 5px 15px;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;
    box-shadow: 0 0 20px #eee;
    border-radius: 5px;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    font-size: 0.875rem;
    line-height: 1.5;
}

.ibx-pay-button:hover {
    background-position: right center; /* change the direction of the change here */
    color: #fff;
    text-decoration: none;
}

.ibx-pay-button:disabled {
opacity: 0.65;
}

//------------------------------CUSTOM CSS FOR INVOICE PAY PAGE------------------------------
.gradient-buttons {
    font-size: 15px;
    font-weight: bold;
    background-image: linear-gradient(to bottom, rgba(255,255,255,0.5), rgba(255,255,255,0.2) 49%, rgba(0,0,0,0.15) 51%, rgba(0,0,0,0.05));
    background-repeat: repeat-x;
}

#payment-modal-shadow {
    display: none;
    height: 100%;
    width: 100%;
    background: black;
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0.5;
    z-index: 1040;
}

#require-signature-notice {
color: #b53416;
display: none;
}

// .modal-backdrop {
// display: none;
// }

#payment_modal_style{
    .modal{
        top: 15% !important;
    }

    .times_btn {
        position: absolute;
        top: 25px;
        left: 5px;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .input-group-text {
        border-radius: 0.25rem 0 0 0.25rem;
    }

    .m-head {
        justify-content: center;
    }

    .m-title {
        font-weight: bold;
    }

    #payment_button {
        width:100%;
        font-size: inherit;
        font-weight: bold;
    }
}

// Place all the styles related to the HomePages controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: https://sass-lang.com/

// Place all the styles related to the LineItems controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: https://sass-lang.com/

body {
  background-color: #fff;
  color: #333;
  margin: 33px;
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 13px;
  line-height: 18px;
}

p, ol, ul, td {
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 13px;
  line-height: 18px;
}

pre {
  background-color: #eee;
  padding: 10px;
  font-size: 11px;
}

a {
color: #000;

  &:visited {
    color: #666;
  }

  &:hover {
    color: #fff;
    background-color: #000;
  }
}

th {
padding-bottom: 5px;
}

td {
padding: 0 5px 7px;
}

div {
  &.field, &.actions {
    margin-bottom: 10px;
  }
}

#notice {
color: green;
}

.field_with_errors {
  padding: 2px;
  background-color: red;
  display: table;
}

#error_explanation {
  width: 450px;
  border: 2px solid red;
  padding: 7px 7px 0;
  margin-bottom: 20px;
  background-color: #f0f0f0;

  h2 {
    text-align: left;
    font-weight: bold;
    padding: 5px 5px 5px 15px;
    font-size: 12px;
    margin: -7px -7px 0;
    background-color: #c00;
    color: #fff;
  }

  ul li {
    font-size: 12px;
    list-style: square;
  }
}

label {
display: block;
}

/*
* bootstrap-tagsinput v0.8.0
*
*/

.bootstrap-tagsinput {
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  display: inline-block;
  padding: 4px 6px;
  color: #555;
  vertical-align: middle;
  border-radius: 4px;
  width: 100%;
  line-height: 22px;
  cursor: text;
}
.bootstrap-tagsinput input {
  border: none;
  box-shadow: none;
  outline: none;
  background-color: transparent;
  padding: 0 6px;
  margin: 0;
  width: auto;
  max-width: inherit;
}
.bootstrap-tagsinput.form-control input::-moz-placeholder {
  color: #777;
  opacity: 1;
}
.bootstrap-tagsinput.form-control input:-ms-input-placeholder {
  color: #777;
}
.bootstrap-tagsinput.form-control input::-webkit-input-placeholder {
  color: #777;
}
.bootstrap-tagsinput input:focus {
  border: none;
  box-shadow: none;
}
.bootstrap-tagsinput .badge {
  margin: 2px 0;
  padding:5px 8px;
}
.bootstrap-tagsinput .badge [data-role="remove"] {
  margin-left: 8px;
  cursor: pointer;
}
.bootstrap-tagsinput .badge [data-role="remove"]:after {
  content: "×";
  padding: 0px 4px;
  background-color:rgba(0, 0, 0, 0.1);
  border-radius:50%;
  font-size:13px
}
.bootstrap-tagsinput .badge [data-role="remove"]:hover:after {

background-color:rgba(0, 0, 0, 0.62);}
.bootstrap-tagsinput .badge [data-role="remove"]:hover:active {
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.tt-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    list-style: none;
    font-size: 14px;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    background-clip: padding-box;
    cursor: pointer;
}

.tt-suggestion {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: normal;
    line-height: 1.428571429;
    color: #333333;
    white-space: nowrap;
}

.tt-suggestion:hover,
.tt-suggestion:focus {
  color: #ffffff;
  text-decoration: none;
  outline: 0;
  background-color: #428bca;
}

/*! Flickity v2.3.0
https://flickity.metafizzy.co
---------------------------------------------- */

.flickity-enabled {
    position: relative;
  }

  .flickity-enabled:focus { outline: none; }

  .flickity-viewport {
    overflow: hidden;
    position: relative;
    height: 100%;
  }

  .flickity-slider {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  /* draggable */

  .flickity-enabled.is-draggable {
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
  }

  .flickity-enabled.is-draggable .flickity-viewport {
    cursor: move;
    cursor: -webkit-grab;
    cursor: grab;
  }

  .flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
    cursor: -webkit-grabbing;
    cursor: grabbing;
  }

  /* ---- flickity-button ---- */

  .flickity-button {
    position: absolute;
    background: hsla(0, 0%, 100%, 0.75);
    border: none;
    color: #333;
  }

  .flickity-button:hover {
    background: white;
    cursor: pointer;
  }

  .flickity-button:focus {
    outline: none;
    box-shadow: 0 0 0 5px #19F;
  }

  .flickity-button:active {
    opacity: 0.6;
  }

  .flickity-button:disabled {
    opacity: 0.3;
    cursor: auto;
    /* prevent disabled button from capturing pointer up event. #716 */
    pointer-events: none;
  }

  .flickity-button-icon {
    fill: currentColor;
  }

  /* ---- previous/next buttons ---- */

  .flickity-prev-next-button {
    top: 50%;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    /* vertically center */
    transform: translateY(-50%);
  }

  .flickity-prev-next-button.previous { left: 10px; }
  .flickity-prev-next-button.next { right: 10px; }
  /* right to left */
  .flickity-rtl .flickity-prev-next-button.previous {
    left: auto;
    right: 10px;
  }
  .flickity-rtl .flickity-prev-next-button.next {
    right: auto;
    left: 10px;
  }

  .flickity-prev-next-button .flickity-button-icon {
    position: absolute;
    left: 20%;
    top: 20%;
    width: 60%;
    height: 60%;
  }

  /* ---- page dots ---- */

  .flickity-page-dots {
    position: absolute;
    width: 100%;
    bottom: -25px;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
    line-height: 1;
  }

  .flickity-rtl .flickity-page-dots { direction: rtl; }

  .flickity-page-dots .dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 8px;
    background: #333;
    border-radius: 50%;
    opacity: 0.25;
    cursor: pointer;
  }

  .flickity-page-dots .dot.is-selected {
    opacity: 1;
  }

// Place all the styles related to the customer_contact controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

#images-upload-modal {
    .modal-footer {
        display: none;
    }

    .footer-buttons{
        float: right;
    }

}

#image_upload {
    display: none;
    background-color: white;
    position: fixed;
    width: 50vw;
    height: fit-content;
    padding: 0 !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: #959da5 0px 8px 24px;
    border-radius: 10px;
    z-index: 9999;
    opacity: 1;
    overflow: visible;

    @media only screen and (max-width: 768px) {
        width: 80vw;
    }

.modal-header {
align-items: center;

        .container {
            width: fit-content;
        }
    }

    .modal-dialog {
        transform: translate(0, 0) !important;
        max-width: 100% !important;
        margin: 0;
    }
}

.btn-underline {
border-bottom: 1px solid #8080803d;
}

.modal-btn-grp {
width: fit-content;
}

.btn-underline-dark {
border-bottom: 1px solid gray;
}

.modal-img {
    height: 150px;
    width: 150px;
    box-shadow: #959DA5 0px 8px 24px;
}

.menu-btn{
height: 300px;
overflow-y: auto;

    div {
        height: 100%;
        text-align: center;
    }
}

.btn-top-border {
border-top: 1px solid #8080803d;
}

// Place all the styles related to the invoice_templates controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
#template_name {
    width: 90%;
    text-align: center;
    padding: 4px;
}

// Place all the styles related to the ForwardingNumbers controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: https://sass-lang.com/

// Place all the styles related to the Reviews controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: https://sass-lang.com/

// Place all the styles related to the JobRequests controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

:root {
  --black: #1f1e1e;
  --litegray: #f0f0f0;
  --gray: #777777;
  --night: #0f0f1e;
}
.job-request {
    font-family: "Poppins", sans-serif;
    .container {
        max-width: 1200px;
        margin: auto;
    }
    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .logo123 {
        width: 100%;
        max-width: 250px;
        max-height: 300px;
    }
    .wraper {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 5em;
        align-items: center;
        margin: 5em 0;
        margin-top: 7em;
    }
    .header {
        text-align: right;
        color: var(--black);
    }
    .title {
        font-size: 50px;
    }
    .sub-title {
        font-size: 20px;
    }
    form {
        width: 100%;
        background: white;
        padding: 3em;
        border-radius: 10px;
        box-shadow: -10px 20px 70px #0000002d;
    }
    form input,
    textarea,
    select {
        width: 100%;
        outline: none;
        background: var(--litegray) !important;
        padding: 0 15px;
        border-radius: 5px;
        height: 45px;
    }
    select {
        margin: 1em 0;
        font-size: 16px;
        color: var(--black);
        font-weight: 600;
        border-radius: 5px;
    }
    textarea {
        height: 150px;
        resize: none;
        padding: 15px;
    }
    textarea::placeholder {
        font-size: 16px;
        color: var(--gray);
        font-weight: 600;
    }
    .row-sm {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1em;
    }
    .upload {
        background: var(--litegray);
        height: 45px;
        width: 100%;
        margin: 1em 0;
        display: flex;
        align-items: center;
        border-radius: 5px;
        cursor: pointer;
        justify-content: center;
    }
    input[type="file"] {
        display: none;
    }
    label span {
        margin-right: 10px;
    }
    .upload label {
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--gray);
        cursor: pointer;
        font-weight: 500;
    }
    .input .lebel {
        color: var(--gray);
        font-size: 16px;
        text-transform: uppercase;
        font-weight: 500;
        margin: 0;
        padding: 0;
    }
    .input {
        margin-bottom: 1em;
    }
    .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        outline: none;
        margin: auto;
        height: 45px;
        margin-top: 50px;
        cursor: pointer;
        color: white;
        background: linear-gradient(93.36deg, #ea3223 0%, #f26a5f 98.82%);
        border-radius: 5px;
        font-size: 18px;
        text-transform: uppercase;
    }
    .btn i {
        margin-left: 10%;
    }
    .art {
        margin-bottom: 5em;
    }
    .main {
        padding: 5em 0;
        padding-bottom: 8em;
    }

    /* indicator */
    .left,
    .header,
    .title {
        position: relative;
    }
    .left::before {
        content: "";
        left: 0;
        height: 100%;
        width: 2px;
        background: var(--black);
        position: absolute;
        top: 38px;
    }
    .arr {
        color: var(--black);
        position: absolute;
        bottom: -40px;
        width: 100%;
    }

    .main img {
        width: 30%;
    }
    .tnx {
        text-transform: capitalize;
    }
    .s-tnx {
        font-size: 25px;
        color: var(--gray);
        font-weight: 500;
    }
    .buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 50%;
        margin: auto;
        gap: 1em;
        margin-top: 50px;
    }
    .btn-2 {
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        background: linear-gradient(93.36deg, #ea3223 0%, #f26a5f 98.82%);
        border: none;
        height: 50px;
        font-size: 18px;
        border-radius: 5px;
        cursor: pointer;
    }
    .btn-2:nth-child(1) {
        background: transparent;
        color: var(--black);
        border: 1px solid #ea3223;
        transition: 0.3s;
    }
    .btn-2:nth-child(1):hover {
        color: white;
        background: linear-gradient(93.36deg, #ea3223 0%, #f26a5f 98.82%);
        border: none;
    }
    .btn-2 span {
        margin-right: 10px;
    }
    footer {
        background: var(--black);
        padding: 1em 0;
    }
    footer .container {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    footer img {
        width: 20%;
    }
    footer p {
        color: white;
        font-size: 16px;
    }
    footer a {
        color: #ea3223;
        text-decoration: none;
    }

    @media (max-width: 991px) {
        .logo123 {
        width: 235px;
        }
        .title {
        font-size: 30px;
        }
        .sub-title {
        font-size: 16px;
        }
        .container {
        padding: 0 15px;
        }
        .wraper {
        grid-template-columns: 1fr;
        margin-top: 40%;
        }
        .left::before {
        top: 23px;
        }
        .arr {
        width: 50%;
        bottom: -26px;
        }
        .row-sm {
        grid-template-columns: 1fr;
        }
        form {
        padding: 3em 1.5em;
        }
        .main {
        display: flex;
        padding: 10rem 0!important;
        align-items: center;
        justify-content: center;
        padding: 0;
        padding-bottom: 0;
        }
        .main img {
        width: 60%;
        }
        .buttons {
        width: 100%;
        }
        footer .container {
        flex-direction: column;
        }
        footer img {
        width: 50%;
        }
        footer p {
        font-size: 12px;
        text-align: center;
        margin-top: 15px;
        }
        .buttons {
        grid-template-columns: 1fr;
        }
    }

    #detail_table_jr {
        margin-top: 30px;
        display:none;

        th {
            background-color: var(--litegray);
        }
    }

    .button_div{
        text-align:center;
        grid-template-columns: auto;

        button {
            max-width: 550px;
            margin: 0 auto;
            width: 100%;
        }
    }

    .img-gallery {
        width: 80%;
        margin: 2rem auto;

        a img {
            min-width: 150px !important;
            border-radius: 5px;
            transition: all 0.3s;

            &:hover {
                transform: scale(1.05);
            }
        }

        .table, th{
            background: var(--litegray);
        }
    }

    .invalid-text {
        color:#dc3545 !important;
    }

    .email-invalid-text{
        @extend .invalid-text;
    }

    .phone-invalid-text{
        @extend .invalid-text;
    }
}

/* Styling for the previewContainer */
#upload-preview {
    display: flex;
    flex-wrap: wrap; /* This will allow items to wrap to the next row if there's not enough space in the current row */
    justify-content: space-between; /* This spaces out the items evenly */
}

/* Styling for the child divs (containing images or PDFs) */
#upload-preview > div {
    flex: 1 1 auto; /* This allows the div to grow and shrink according to the content and available space */
    max-width: 200px; /* You can adjust this value based on your preference */
    margin: 10px; /* Adding a little margin for separation */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: For a subtle shadow effect */
}

/* Styling for the images */
#upload-preview img {
    max-width: 100%;
    height: auto;
    object-fit: cover; /* This ensures that the image covers the frame without losing its aspect ratio */
}

/* Styling for the iframes (PDFs) */
#upload-preview iframe {
max-width: 100%;
height: 300px; /* Adjust based on your preference */
}

/* the norm */
#gritter-notice-wrapper {
    position:fixed;
    top:20px;
    right:20px;
    width:301px;
    z-index:9999;
}
#gritter-notice-wrapper.top-left {
    left: 20px;
    right: auto;
}
#gritter-notice-wrapper.bottom-right {
    top: auto;
    left: auto;
    bottom: 20px;
    right: 20px;
}
#gritter-notice-wrapper.bottom-left {
    top: auto;
    right: auto;
    bottom: 20px;
    left: 20px;
}
.gritter-item-wrapper {
    position:relative;
  margin:0 0 10px 0;
  background: image-url("ie-spacer.gif");
}

.gritter-item {
  display:block;
  background: image-url("gritter.png");
    color:#eee;
    padding:2px 11px 8px 11px;
    font-size: 11px;
    font-family:verdana;
}
.hover .gritter-item {
    background-position:right -40px;
}
.gritter-item p {
    padding:0;
    margin:0;
    word-wrap:break-word;
}
.gritter-close {
    display:none;
    position:absolute;
    top:2px;
  left:275px; //Used to push close button to right of gritter notification.
  background: image-url("gritter.png") no-repeat left top;
    cursor:pointer;
    width:30px;
    height:30px;
    text-indent:-9999em;
}
.gritter-title {
    font-size:14px;
    font-weight:bold;
    padding:0 0 7px 0;
    display:block;
}
.gritter-image {
    width:48px;
    height:48px;
    float:left;
}
.gritter-with-image,
.gritter-without-image {
    padding:0;
}
.gritter-with-image {
    width:220px;
    float:right;
}
/* for the light (white) version of the gritter notice */
.gritter-light .gritter-item,
.gritter-light .gritter-bottom,
.gritter-light .gritter-top,
.gritter-light .gritter-close {
    background-image: url(../images/gritter-light.png);
    color: #222;
}
.gritter-light .gritter-title {
    text-shadow: none;
}
#gritter-notice-wrapper {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 301px;
  z-index: 9999;
}
#gritter-notice-wrapper.top-left {
  left: 20px;
  right: auto;
}
#gritter-notice-wrapper.bottom-right {
  top: auto;
  left: auto;
  bottom: 20px;
  right: 20px;
}
#gritter-notice-wrapper.bottom-left {
  top: auto;
  right: auto;
  bottom: 20px;
  left: 20px;
}
#gritter-notice-wrapper .gritter-item-wrapper {
  position: relative;
  margin: 0 0 10px 0;
}
#gritter-notice-wrapper .gritter-item-wrapper .gritter-item {
  display: block;
  background: #657791;
  border: 1px solid #455264;
  color: #ffffff;
  padding: 10px 11px;
  font-size: 12px;
  border-radius: 3px;
  transition: all;
  transition: all all ease-out;
  transition-duration: 0.4s;
}
#gritter-notice-wrapper .gritter-item-wrapper .gritter-item:hover {
  background: #72849e;
}
#gritter-notice-wrapper .gritter-item-wrapper .gritter-item p {
  padding: 0;
  margin: 0;
  word-wrap: break-word;
}
#gritter-notice-wrapper .gritter-item-wrapper .gritter-item .gritter-close {
  position: absolute;
  top: 5px;
  right: 7px;
  cursor: pointer;
}
#gritter-notice-wrapper .gritter-item-wrapper .gritter-item .gritter-close i {
  font-size: 16px;
  color: #ffffff;
  transition: background;
  transition: all background ease-out;
  transition-duration: 0.4s;
}
#gritter-notice-wrapper .gritter-item-wrapper .gritter-item .gritter-close:hover i {
  color: #f7f7f7;
}
#gritter-notice-wrapper .gritter-item-wrapper .gritter-item .gritter-image {
  width: 48px;
  height: 48px;
  float: left;
  border-radius: 3px;
}
#gritter-notice-wrapper .gritter-item-wrapper .gritter-item .gritter-icon {
  margin-top: 0;
  margin-right: 15px;
  float: left;
  font-size: 32px;
  padding-bottom: 10px;
}
#gritter-notice-wrapper .gritter-item-wrapper .gritter-item .gritter-with-image {
  width: 220px;
  float: right;
  padding: 0;
}
#gritter-notice-wrapper .gritter-item-wrapper .gritter-item .gritter-without-image {
  padding: 0;
}
#gritter-notice-wrapper .gritter-item-wrapper .gritter-item .gritter-title {
  font-size: 14px;
  font-weight: bold;
  padding: 0;
  display: block;
}
#gritter-notice-wrapper .gritter-item-wrapper.success-notice .gritter-item {
  color: #0a776c;
  background: #b2ede8;
  border: 1px solid #63c8be;
}
#gritter-notice-wrapper .gritter-item-wrapper.success-notice .gritter-item:hover {
  background: #c7f2ee;
}
#gritter-notice-wrapper .gritter-item-wrapper.success-notice .gritter-item .gritter-close i {
  color: #0a776c;
}
#gritter-notice-wrapper .gritter-item-wrapper.success-notice .gritter-item .gritter-close:hover i {
  color: #09695f;
}
#gritter-notice-wrapper .gritter-item-wrapper.info-notice .gritter-item {
  color: #2a6891;
  background: #cfebff;
  border: 1px solid #94bedb;
}
#gritter-notice-wrapper .gritter-item-wrapper.info-notice .gritter-item:hover {
  background: #e9f6ff;
}
#gritter-notice-wrapper .gritter-item-wrapper.info-notice .gritter-item .gritter-close i {
  color: #2a6891;
}
#gritter-notice-wrapper .gritter-item-wrapper.info-notice .gritter-item .gritter-close:hover i {
  color: #275f85;
}
#gritter-notice-wrapper .gritter-item-wrapper.error-notice .gritter-item {
  color: #933230;
  background: #fddede;
  border: 1px solid #cb7c7a;
}
#gritter-notice-wrapper .gritter-item-wrapper.error-notice .gritter-item:hover {
  background: #fef6f6;
}
#gritter-notice-wrapper .gritter-item-wrapper.error-notice .gritter-item .gritter-close i {
  color: #933230;
}
#gritter-notice-wrapper .gritter-item-wrapper.error-notice .gritter-item .gritter-close:hover i {
  color: #872e2c;
}
#gritter-notice-wrapper .gritter-item-wrapper.success-notice .gritter-item {
  color: #1a410d;
  background: #a1df91;
  border: 1px solid #59b95e;
}
#gritter-notice-wrapper .gritter-item-wrapper.success-notice .gritter-item:hover {
  background: #fef6f6;
}
#gritter-notice-wrapper .gritter-item-wrapper.success-notice .gritter-item .gritter-close i {
  color: #080606;
}
#gritter-notice-wrapper .gritter-item-wrapper.success-notice .gritter-item .gritter-close:hover i {
  color: #70b16a;
}

.survey-answer {
    border: solid;
    border-color: #ff5a5a;
    border-radius: 12px;
    background-color: white;
    color: #4f4f4f
}

.survey-answer:hover{
color: #4f4f4f;
transition: 500ms;
}

.mobile-download-button{
    color: #4f4f4f;
    border-radius: "12px";
    background-color: "#ede8e8";
    padding: "15px";
    margin: "15px";
    border: "none"
}

.mobile-download-button:hover{
    color: black;
    box-shadow: rgb(204, 204, 204) -3px 3px;
    transform:scale(1.025);
    transition: 500ms;
}

// Place all the styles related to the Customers controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

table td input {
width:100%;
}

/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
* vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*/

// Gem style assets.
@import "bootstrap";
@import "gritter";
@import "flatpickr";

// Custom style assets.
@import "base.scss";
@import "customers.scss";
@import "jobs.scss";
@import "dataviz.scss";
@import "modal.scss";
@import "react_invoices.scss";
@import "job_requests.scss";
@import "ios_messages.scss";
@import "3rdparty/bootstrap-tagsinput.scss";
@import "stack/application";
@import "ace.scss";
@import "invoices.scss";
@import "custom-context-menu.scss";
@import "invoice_templates.scss";
@import "timesheets.scss";
@import "job_history.scss";
@import "get_started.scss"

/* app/assets/stylesheets/job_history.css */

/* Table styles */
.job-history-table {
    width: 100%;
    border-collapse: collapse;
  }

  .job-history-table th,
  .job-history-table td {
    padding: 10px;
    text-align: left;
    border: 1px solid #ccc;
  }

  .job-history-table thead {
    background-color: #f5f5f5;
    font-weight: bold;
  }

  .job-history-table tbody tr:nth-child(even) {
    background-color: #f2f2f2;
  }

[contenteditable][placeholder]:empty:before {
    content: attr(placeholder);
    color: gray;
    background-color: transparent;
    width: initial;
    height: initial;
    padding: 0 .2em;
    cursor: text;
  }

.dropdown-toggle::after {
display: none;
}

@media(max-width: 768px) {
  .fc-button
  {
    margin: .5px !important;
  }

  .hide-if-small-screen { //used to hide the company name on the navbar because it is causing the navbar to add an extra line on mobile devices which takes up more screen space. If we hide the company name when the device screen size is smaller, it gives them more real estate and makes it more functional
    display: none;
  }
}

.job-modal-overflow {
overflow: auto;
}

.title{
text-transform: uppercase;
letter-spacing: 0.25px;
}

.speech-bubble {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background-color: #F2F2F2;
  border-radius: 10px;
  padding: 15px;
  margin: 10px 0;
  padding: 0.5em 1em;
  margin: 0.5em;
  border-radius: 1em;
  font-size: 1.2em;
}
.speech-bubble.right {
  align-items: flex-end;
}
.speech-bubble.spk_1 {
  align-items: flex-end;
}

.speech-bubbles-container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.spk_0 {
background-color: lightblue;
}

.spk_1 {
background-color: pink;
}

.customer-info-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.customer-info-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.customer-info-header {
font-size: 1.5em;
margin-bottom: 0.5em;
}

.customer-info-value {
font-size: 1.2em;
font-weight: bold;
}

.transcription-header {
font-size: 1.5em;
margin-bottom: 0.5em;
}

.transcription-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.green-checkbox {
  color: green;
  font-weight: bold;
  font-size: 15px; /* adjust as needed */
}

.red-x {
  color: red;
  background-color: #FFD5D5; /* light red for circle */
  border-radius: 30%; /* makes the background a circle */
  padding: 3px; /* space around the X */
  font-weight: bold;
  font-size: 12px; /* adjust as needed */
}

.get-started{
font-family: "Poppins", sans-serif;
}

.fr-pill-button{
    margin: 10px;
    padding: 15px;
    border-radius: 30px;
    background-color: #EA3223;
    color: rgb(254, 254, 254);
    border: none;
    font-weight: 600;
    box-shadow: rgb(204, 204, 204) -1px 2px;
    min-width: 150px;
}

.fr-pill-button:hover {
  box-shadow: rgb(204, 204, 204) -3px 3px;
  transform:scale(1.025);
  color: rgb(254, 254, 254);
  transition: 500ms;
}

.fr-pill-button-disabled{
  margin: 10px;
  padding: 15px;
  border-radius: 30px;
  background-color: #999393;
  color: rgb(254, 254, 254);
  border: none;
  font-weight: 600;
  box-shadow: rgb(204, 204, 204) -1px 2px;
  min-width: 150px;
}

.fr-pill-button-disabled:hover {
  box-shadow: rgb(204, 204, 204) -3px 3px;
  transform:scale(1.025);
  color: rgb(254, 254, 254);
  transition: 500ms;
}

.fr-link{
text-decoration: underline;
color: rgb(255, 90, 90);
}

.fr-link:hover{
text-decoration: none;
color: rgb(255, 90, 90);
}

body {
    font-family: 'Raleway', sans-serif;
    /* font-family: 'Roboto', sans-serif; */
    font-size: 20px;
}

@import "font-awesome";
@import "3rdparty/flickity";

/* Main content */
.main {
margin-top: 13%; /* Add a top margin to avoid content overlay */
}

p {
    font-size: 18px;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    color: #777;
}

.business-header {
    text-align: center;
    font-size: 1em !important; /* Define a base size for the business header */
    padding: 5px;
    margin: 5px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: bold !important;
}
.business-header h1 h2 h3 h4 h5 h6{
    font-weight: bold !important;
}

/* Descriptions & Headers of Description. */
.description-header{
    text-align: center;
    font-size: 1em !important; /* Define a base size for the business header */
    font-weight: normal; /* Normal font weight */
    padding: 5px;
    margin: 5px;
}

.description-text{
width: 70%;
}

.section-header{
text-transform: uppercase;
}

#phone-header {
    text-align: center;
    font-size: 3em; /* 50% larger than business-header */
    font-weight: bold; /* Bolder text */
}

.content {
    margin: 20px;
}
.button {
    background-color: #ffff;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    font-weight: bold;
    text-transform: uppercase;
}
img {
    width: 100px;
    height: 100px;
}
.navbar {
    // padding: 0 5vw; /* 5% of viewport width padding on both left and right */
    overflow: hidden;
    position: fixed; /* Set the navbar to fixed position */
    top: 0; /* Position the navbar at the top of the page */
    width: 100%; /* Full width */
    background-color: #fff;
    z-index: 999;
}
.navbar a {
    float: left;
    display: block;
    color: #333;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
.navbar a:hover {
    color: #f8f9fa //<%= @home_page.secondary_color%>;
}

.navbar-toggler {
    // width: 1%;
    // height: auto;
    margin-right: 15px
}

/* NAVBAR HAMBURGER TOGGLE BUTTON */
label.hamburger {
    display: block;
    background: #fff;
    width: 40px; /* less width = square hamburger */
    height: 60px;
    position: relative;
    cursor: pointer;
}

input#hamburger {
   display:none
}

.line {
    position: absolute;
    height: 5px;
    width: 80%;
    background: #000;
    transition: 0.5s;
}
/* steps of 12 are optional, could also be 10, 13 etc */
.line:nth-child(1) { top: 12px; }
.line:nth-child(2) { top: 24px; }
.line:nth-child(3) { top: 36px; }

/* translateY must be same as */
#hamburger:checked + .hamburger .line:nth-child(1){
    transform: translateY(12px) rotate(-45deg);
}

#hamburger:checked + .hamburger .line:nth-child(2){
    opacity:0;
}

#hamburger:checked + .hamburger .line:nth-child(3){
    transform: translateY(-12px) rotate(45deg);
}

/* END NAVBAR HAMBURGER TOGGLE BUTTON */
.nav-link {
    font-size: 2vh;
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
}
.logo-image{
    height: auto; /* adjust this as needed */
    width: 50%;
    max-width: 540px; /* optional, but good practice */
    overflow: hidden;
    margin-right: 10px;
}
.footer {
    font-weight: normal;
    padding: 20px;
    background-color: #f8f9fa;
    /* position: absolute; */
    margin-top: 20px;
    bottom: 0;
    width: 100%;
    text-align: left;
}
/* Default style for large screens and desktops */
.social-btn {
    width: 75px;
}

/* Style for medium screens (tablets, etc.) */
@media (max-width: 768px) {
    .social-btn {
        width: 75px;
    }
}

/* Style for small screens (phones, etc.) */
@media (max-width: 480px) {
    .social-btn {
        width: 65px;
    }
}

.contact-info {
margin: 10px 0;
}

.primary-button {
background-color: #333;//<%= @home_page.primary_color%>;
}

.contact-us-button {
    background-color: #f8f9fa; //<%= @home_page.tertiary_color%>;
    border: 1px solid lightgrey;
    color: white; /* Text color */
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}

.section-white {
background-color: #fff;
}

.section-gray {
background-color: #f8f9f9;
}

.section-subtitle {
    color: #aaaaaa;
    display: inline-block;
    margin-bottom: 13px;
    margin-bottom: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: bold;
}

/* Styles applied when the viewport width is less than 481px*/
@media (max-width: 480px) {
    /* Main content */
    .main {
        margin-top: 40%; /* Add a top margin to avoid content overlay */
    }

    .section-subtitle {
        font-size: 12px;
        margin: 5px;
        padding-left: 10px;
        padding-right: 10px;
    }
    p {
        font-size: 18.5px;
    }
    .description-text{
        width: 95%;
    }

    .button {
        font-size: 12px;
    }
}

/* Styles applied when the viewport width is between 481px and 768px */
@media (min-width: 480px) and (max-width: 768px) {
    .main {
        margin-top: 32%; /* Add a top margin to avoid content overlay */
    }

    .section-subtitle {
        font-size: 14px;
        margin: 5px;
        padding-left: 10px;
        padding-right: 10px;
    }
    p {
        font-size: 18.5px;
    }
    .description-text{
        width: 85%;
    }
}

/* Styles applied when the viewport width is between 768 and 1024 */
@media (min-width: 768px) and (max-width: 1024px){
    #business-name {
        font-size: 2.75rem; /* 50% larger than business-header */
    }
    .main {
        margin-top: 25%; /* Add a top margin to avoid content overlay */
    }
    .section-subtitle {
        font-size: 16px;
    }
    .description-text{
        width: 75%;
    }
    #phone-header-number {
        font-size: 110%; /* 50% larger than business-header */
    }
}

/* Styles applied when the viewport width is above 1024 */
@media (min-width: 1024px){
    #business-name {
        font-size: 3rem; /* 50% larger than business-header */
    }

    #business-name {
        font-size: 3.25rem; /* 50% larger than business-header */
    }
    .main {
        margin-top: 13%; /* Add a top margin to avoid content overlay */
    }

    .section-subtitle {
        font-size: 18px;
    }
    #phone-header-number {
        font-size: 130%; /* 50% larger than business-header */
    }
}

// Place all the styles related to the marketing_sources controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

Error reading file: U_STRING_NOT_TERMINATED_WARNING

@charset "UTF-8";.fc-timeGrid-view .fc-day-grid{position:relative;z-index:2}.fc-timeGrid-view .fc-day-grid .fc-row{min-height:3em}.fc-timeGrid-view .fc-day-grid .fc-row .fc-content-skeleton{padding-bottom:1em}.fc .fc-axis{vertical-align:middle;padding:0 4px;white-space:nowrap}.fc-ltr .fc-axis{text-align:right}.fc-rtl .fc-axis{text-align:left}.fc-time-grid,.fc-time-grid-container{position:relative;z-index:1}.fc-time-grid{min-height:100%}.fc-time-grid table{border:0 hidden transparent}.fc-time-grid>.fc-bg{z-index:1}.fc-time-grid .fc-slats,.fc-time-grid>hr{position:relative;z-index:2}.fc-time-grid .fc-content-col{position:relative}.fc-time-grid .fc-content-skeleton{position:absolute;z-index:3;top:0;left:0;right:0}.fc-time-grid .fc-business-container{position:relative;z-index:1}.fc-time-grid .fc-bgevent-container{position:relative;z-index:2}.fc-time-grid .fc-highlight-container{z-index:3;position:relative}.fc-time-grid .fc-event-container{position:relative;z-index:4}.fc-time-grid .fc-now-indicator-line{z-index:5}.fc-time-grid .fc-mirror-container{position:relative;z-index:6}.fc-time-grid .fc-slats td{height:1.5em;border-bottom:0}.fc-time-grid .fc-slats .fc-minor td{border-top-style:dotted}.fc-time-grid .fc-highlight{position:absolute;left:0;right:0}.fc-ltr .fc-time-grid .fc-event-container{margin:0 2.5% 0 2px}.fc-rtl .fc-time-grid .fc-event-container{margin:0 2px 0 2.5%}.fc-time-grid .fc-bgevent,.fc-time-grid .fc-event{position:absolute;z-index:1}.fc-time-grid .fc-bgevent{left:0;right:0}.fc-time-grid-event{margin-bottom:1px}.fc-time-grid-event-inset{-webkit-box-shadow:0 0 0 1px #fff;box-shadow:0 0 0 1px #fff}.fc-time-grid-event.fc-not-start{border-top-width:0;padding-top:1px;border-top-left-radius:0;border-top-right-radius:0}.fc-time-grid-event.fc-not-end{border-bottom-width:0;padding-bottom:1px;border-bottom-left-radius:0;border-bottom-right-radius:0}.fc-time-grid-event .fc-content{overflow:hidden;max-height:100%}.fc-time-grid-event .fc-time,.fc-time-grid-event .fc-title{padding:0 1px}.fc-time-grid-event .fc-time{font-size:.85em;white-space:nowrap}.fc-time-grid-event.fc-short .fc-content{white-space:nowrap}.fc-time-grid-event.fc-short .fc-time,.fc-time-grid-event.fc-short .fc-title{display:inline-block;vertical-align:top}.fc-time-grid-event.fc-short .fc-time span{display:none}.fc-time-grid-event.fc-short .fc-time:before{content:attr(data-start)}.fc-time-grid-event.fc-short .fc-time:after{content:" - "}.fc-time-grid-event.fc-short .fc-title{font-size:.85em;padding:0}.fc-time-grid-event.fc-allow-mouse-resize .fc-resizer{left:0;right:0;bottom:0;height:8px;overflow:hidden;line-height:8px;font-size:11px;font-family:monospace;text-align:center;cursor:s-resize}.fc-time-grid-event.fc-allow-mouse-resize .fc-resizer:after{content:"="}.fc-time-grid-event.fc-selected .fc-resizer{border-radius:5px;border-width:1px;width:8px;height:8px;border-style:solid;border-color:inherit;background:#fff;left:50%;margin-left:-5px;bottom:-5px}.fc-time-grid .fc-now-indicator-line{border-top-width:1px;left:0;right:0}.fc-time-grid .fc-now-indicator-arrow{margin-top:-5px}.fc-ltr .fc-time-grid .fc-now-indicator-arrow{left:0;border-width:5px 0 5px 6px;border-top-color:transparent;border-bottom-color:transparent}.fc-rtl .fc-time-grid .fc-now-indicator-arrow{right:0;border-width:5px 6px 5px 0;border-top-color:transparent;border-bottom-color:transparent}

@charset "UTF-8";
/* TimeGridView all-day area
--------------------------------------------------------------------------------------------------*/
.fc-timeGrid-view .fc-day-grid {
  position: relative;
  z-index: 2;
  /* so the "more.." popover will be over the time grid */
}

.fc-timeGrid-view .fc-day-grid .fc-row {
min-height: 3em;
/* all-day section will never get shorter than this */
}

.fc-timeGrid-view .fc-day-grid .fc-row .fc-content-skeleton {
padding-bottom: 1em;
/* give space underneath events for clicking/selecting days */
}

/* TimeGrid axis running down the side (for both the all-day area and the slot area)
--------------------------------------------------------------------------------------------------*/
.fc .fc-axis {
  /* .fc to overcome default cell styles */
  vertical-align: middle;
  padding: 0 4px;
  white-space: nowrap;
}

.fc-ltr .fc-axis {
text-align: right;
}

.fc-rtl .fc-axis {
text-align: left;
}

/* TimeGrid Structure
--------------------------------------------------------------------------------------------------*/
.fc-time-grid-container,
.fc-time-grid {
  /* so slats/bg/content/etc positions get scoped within here */
  position: relative;
  z-index: 1;
}

.fc-time-grid {
min-height: 100%;
/* so if height setting is 'auto', .fc-bg stretches to fill height */
}

.fc-time-grid table {
/* don't put outer borders on slats/bg/content/etc */
border: 0 hidden transparent;
}

.fc-time-grid > .fc-bg {
z-index: 1;
}

.fc-time-grid .fc-slats,
.fc-time-grid > hr {
/* the

TimeGridView injects when grid is shorter than scroller */
position: relative;
z-index: 2;
}

.fc-time-grid .fc-content-col {
position: relative;
/* because now-indicator lives directly inside */
}

.fc-time-grid .fc-content-skeleton {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  right: 0;
}

/* divs within a cell within the fc-content-skeleton */
.fc-time-grid .fc-business-container {
position: relative;
z-index: 1;
}

.fc-time-grid .fc-bgevent-container {
position: relative;
z-index: 2;
}

.fc-time-grid .fc-highlight-container {
position: relative;
z-index: 3;
}

.fc-time-grid .fc-event-container {
position: relative;
z-index: 4;
}

.fc-time-grid .fc-now-indicator-line {
z-index: 5;
}

.fc-time-grid .fc-mirror-container {
  /* also is fc-event-container */
  position: relative;
  z-index: 6;
}

/* TimeGrid Slats (lines that run horizontally)
--------------------------------------------------------------------------------------------------*/
.fc-time-grid .fc-slats td {
  height: 1.5em;
  border-bottom: 0;
  /* each cell is responsible for its top border */
}

.fc-time-grid .fc-slats .fc-minor td {
border-top-style: dotted;
}

/* TimeGrid Highlighting Slots
--------------------------------------------------------------------------------------------------*/
.fc-time-grid .fc-highlight-container {
  /* a div within a cell within the fc-highlight-skeleton */
  position: relative;
  /* scopes the left/right of the fc-highlight to be in the column */
}

.fc-time-grid .fc-highlight {
  position: absolute;
  left: 0;
  right: 0;
  /* top and bottom will be in by JS */
}

/* TimeGrid Event Containment
--------------------------------------------------------------------------------------------------*/
.fc-ltr .fc-time-grid .fc-event-container {
/* space on the sides of events for LTR (default) */
margin: 0 2.5% 0 2px;
}

.fc-rtl .fc-time-grid .fc-event-container {
/* space on the sides of events for RTL */
margin: 0 2px 0 2.5%;
}

.fc-time-grid .fc-event,
.fc-time-grid .fc-bgevent {
  position: absolute;
  z-index: 1;
  /* scope inner z-index's */
}

.fc-time-grid .fc-bgevent {
  /* background events always span full width */
  left: 0;
  right: 0;
}

/* TimeGrid Event Styling
----------------------------------------------------------------------------------------------------
We use the full "fc-time-grid-event" class instead of using descendants because the event won't
be a descendant of the grid when it is being dragged.
*/
.fc-time-grid-event {
margin-bottom: 1px;
}

.fc-time-grid-event-inset {
-webkit-box-shadow: 0px 0px 0px 1px #fff;
box-shadow: 0px 0px 0px 1px #fff;
}

.fc-time-grid-event.fc-not-start {
  /* events that are continuing from another day */
  /* replace space made by the top border with padding */
  border-top-width: 0;
  padding-top: 1px;
  /* remove top rounded corners */
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.fc-time-grid-event.fc-not-end {
  /* replace space made by the top border with padding */
  border-bottom-width: 0;
  padding-bottom: 1px;
  /* remove bottom rounded corners */
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.fc-time-grid-event .fc-content {
overflow: hidden;
max-height: 100%;
}

.fc-time-grid-event .fc-time,
.fc-time-grid-event .fc-title {
padding: 0 1px;
}

.fc-time-grid-event .fc-time {
font-size: 0.85em;
white-space: nowrap;
}

/* short mode, where time and title are on the same line */
.fc-time-grid-event.fc-short .fc-content {
/* don't wrap to second line (now that contents will be inline) */
white-space: nowrap;
}

.fc-time-grid-event.fc-short .fc-time,
.fc-time-grid-event.fc-short .fc-title {
  /* put the time and title on the same line */
  display: inline-block;
  vertical-align: top;
}

.fc-time-grid-event.fc-short .fc-time span {
display: none;
/* don't display the full time text... */
}

.fc-time-grid-event.fc-short .fc-time:before {
content: attr(data-start);
/* ...instead, display only the start time */
}

.fc-time-grid-event.fc-short .fc-time:after {
content: " - ";
/* seperate with a dash, wrapped in nbsp's */
}

.fc-time-grid-event.fc-short .fc-title {
  font-size: 0.85em;
  /* make the title text the same size as the time */
  padding: 0;
  /* undo padding from above */
}

/* resizer (cursor device) */
.fc-time-grid-event.fc-allow-mouse-resize .fc-resizer {
  left: 0;
  right: 0;
  bottom: 0;
  height: 8px;
  overflow: hidden;
  line-height: 8px;
  font-size: 11px;
  font-family: monospace;
  text-align: center;
  cursor: s-resize;
}

.fc-time-grid-event.fc-allow-mouse-resize .fc-resizer:after {
content: "=";
}

/* resizer (touch device) */
.fc-time-grid-event.fc-selected .fc-resizer {
  /* 10x10 dot */
  border-radius: 5px;
  border-width: 1px;
  width: 8px;
  height: 8px;
  border-style: solid;
  border-color: inherit;
  background: #fff;
  /* horizontally center */
  left: 50%;
  margin-left: -5px;
  /* center on the bottom edge */
  bottom: -5px;
}

/* Now Indicator
--------------------------------------------------------------------------------------------------*/
.fc-time-grid .fc-now-indicator-line {
  border-top-width: 1px;
  left: 0;
  right: 0;
}

/* arrow on axis */
.fc-time-grid .fc-now-indicator-arrow {
margin-top: -5px;
/* vertically center on top coordinate */
}

.fc-ltr .fc-time-grid .fc-now-indicator-arrow {
  left: 0;
  /* triangle pointing right... */
  border-width: 5px 0 5px 6px;
  border-top-color: transparent;
  border-bottom-color: transparent;
}

.fc-rtl .fc-time-grid .fc-now-indicator-arrow {
  right: 0;
  /* triangle pointing left... */
  border-width: 5px 6px 5px 0;
  border-top-color: transparent;
  border-bottom-color: transparent;
}

.fc-dayGridDay-view .fc-content-skeleton,.fc-dayGridWeek-view .fc-content-skeleton{padding-bottom:1em}.fc-dayGrid-view .fc-body .fc-row{min-height:4em}.fc-row.fc-rigid{overflow:hidden}.fc-row.fc-rigid .fc-content-skeleton{position:absolute;top:0;left:0;right:0}.fc-day-top.fc-other-month{opacity:.3}.fc-dayGrid-view .fc-day-number,.fc-dayGrid-view .fc-week-number{padding:2px}.fc-dayGrid-view th.fc-day-number,.fc-dayGrid-view th.fc-week-number{padding:0 2px}.fc-ltr .fc-dayGrid-view .fc-day-top .fc-day-number{float:right}.fc-rtl .fc-dayGrid-view .fc-day-top .fc-day-number{float:left}.fc-ltr .fc-dayGrid-view .fc-day-top .fc-week-number{float:left;border-radius:0 0 3px}.fc-rtl .fc-dayGrid-view .fc-day-top .fc-week-number{float:right;border-radius:0 0 0 3px}.fc-dayGrid-view .fc-day-top .fc-week-number{min-width:1.5em;text-align:center;background-color:#f2f2f2;color:grey}.fc-dayGrid-view td.fc-week-number{text-align:center}.fc-dayGrid-view td.fc-week-number>*{display:inline-block;min-width:1.25em}

/* DayGridView
--------------------------------------------------------------------------------------------------*/
/* day row structure */
.fc-dayGridWeek-view .fc-content-skeleton,
.fc-dayGridDay-view .fc-content-skeleton {
  /* there may be week numbers in these views, so no padding-top */
  padding-bottom: 1em;
  /* ensure a space at bottom of cell for user selecting/clicking */
}

.fc-dayGrid-view .fc-body .fc-row {
min-height: 4em;
/* ensure that all rows are at least this tall */
}

/* a "rigid" row will take up a constant amount of height because content-skeleton is absolute */
.fc-row.fc-rigid {
overflow: hidden;
}

.fc-row.fc-rigid .fc-content-skeleton {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

/* week and day number styling */
.fc-day-top.fc-other-month {
opacity: 0.3;
}

.fc-dayGrid-view .fc-week-number,
.fc-dayGrid-view .fc-day-number {
padding: 2px;
}

.fc-dayGrid-view th.fc-week-number,
.fc-dayGrid-view th.fc-day-number {
padding: 0 2px;
/* column headers can't have as much v space */
}

.fc-ltr .fc-dayGrid-view .fc-day-top .fc-day-number {
float: right;
}

.fc-rtl .fc-dayGrid-view .fc-day-top .fc-day-number {
float: left;
}

.fc-ltr .fc-dayGrid-view .fc-day-top .fc-week-number {
float: left;
border-radius: 0 0 3px 0;
}

.fc-rtl .fc-dayGrid-view .fc-day-top .fc-week-number {
float: right;
border-radius: 0 0 0 3px;
}

.fc-dayGrid-view .fc-day-top .fc-week-number {
  min-width: 1.5em;
  text-align: center;
  background-color: #f2f2f2;
  color: #808080;
}

/* when week/day number have own column */
.fc-dayGrid-view td.fc-week-number {
text-align: center;
}

.fc-dayGrid-view td.fc-week-number > * {
  /* work around the way we do column resizing and ensure a minimum width */
  display: inline-block;
  min-width: 1.25em;
}

.fc-event-dot{display:inline-block;width:10px;height:10px;border-radius:5px}.fc-rtl .fc-list-view{direction:rtl}.fc-list-view{border-width:1px;border-style:solid}.fc .fc-list-table{table-layout:auto}.fc-list-table td{border-width:1px 0 0;padding:8px 14px}.fc-list-table tr:first-child td{border-top-width:0}.fc-list-heading{border-bottom-width:1px}.fc-list-heading td{font-weight:700}.fc-ltr .fc-list-heading-main{float:left}.fc-ltr .fc-list-heading-alt,.fc-rtl .fc-list-heading-main{float:right}.fc-rtl .fc-list-heading-alt{float:left}.fc-list-item.fc-has-url{cursor:pointer}.fc-list-item-marker,.fc-list-item-time{white-space:nowrap;width:1px}.fc-ltr .fc-list-item-marker{padding-right:0}.fc-rtl .fc-list-item-marker{padding-left:0}.fc-list-item-title a{text-decoration:none;color:inherit}.fc-list-item-title a[href]:hover{text-decoration:underline}.fc-list-empty-wrap2{position:absolute;top:0;left:0;right:0;bottom:0}.fc-list-empty-wrap1{width:100%;height:100%;display:table}.fc-list-empty{display:table-cell;vertical-align:middle;text-align:center}.fc-unthemed .fc-list-empty{background-color:#eee}

/* List View
--------------------------------------------------------------------------------------------------*/
/* possibly reusable */
.fc-event-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 5px;
}

/* view wrapper */
.fc-rtl .fc-list-view {
direction: rtl;
/* unlike core views, leverage browser RTL */
}

.fc-list-view {
border-width: 1px;
border-style: solid;
}

/* table resets */
.fc .fc-list-table {
table-layout: auto;
/* for shrinkwrapping cell content */
}

.fc-list-table td {
border-width: 1px 0 0;
padding: 8px 14px;
}

.fc-list-table tr:first-child td {
border-top-width: 0;
}

/* day headings with the list */
.fc-list-heading {
border-bottom-width: 1px;
}

.fc-list-heading td {
font-weight: bold;
}

.fc-ltr .fc-list-heading-main {
float: left;
}

.fc-ltr .fc-list-heading-alt {
float: right;
}

.fc-rtl .fc-list-heading-main {
float: right;
}

.fc-rtl .fc-list-heading-alt {
float: left;
}

/* event list items */
.fc-list-item.fc-has-url {
cursor: pointer;
/* whole row will be clickable */
}

.fc-list-item-marker,
.fc-list-item-time {
white-space: nowrap;
width: 1px;
}

/* make the dot closer to the event title */
.fc-ltr .fc-list-item-marker {
padding-right: 0;
}

.fc-rtl .fc-list-item-marker {
padding-left: 0;
}

.fc-list-item-title a {
  /* every event title cell has an  tag */
  text-decoration: none;
  color: inherit;
}

.fc-list-item-title a[href]:hover {
/* hover effect only on titles with hrefs */
text-decoration: underline;
}

/* message when no events */
.fc-list-empty-wrap2 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.fc-list-empty-wrap1 {
  width: 100%;
  height: 100%;
  display: table;
}

.fc-list-empty {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.fc-unthemed .fc-list-empty {
/* theme will provide own background */
background-color: #eee;
}

@charset "UTF-8";.fc-button:not(:disabled),.fc-event.fc-draggable,.fc-event[href],.fc-popover .fc-header .fc-close,a.fc-more,a[data-goto]{cursor:pointer}.fc-bg,.fc-row .fc-bgevent-skeleton,.fc-row .fc-highlight-skeleton{bottom:0}.fc{direction:ltr;text-align:left}.fc-rtl{text-align:right}body .fc{font-size:1em}.fc-highlight{background:#bce8f1;opacity:.3}.fc-bgevent{background:#8fdf82;opacity:.3}.fc-nonbusiness{background:#d7d7d7}.fc-popover{position:absolute;box-shadow:0 2px 6px rgba(0,0,0,.15)}.fc-popover .fc-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:2px 4px}.fc-rtl .fc-popover .fc-header{flex-direction:row-reverse}.fc-popover .fc-header .fc-title{margin:0 2px}.fc-popover .fc-header .fc-close{opacity:.65;font-size:1.1em}.fc-divider{border-style:solid;border-width:1px}hr.fc-divider{height:0;margin:0;padding:0 0 2px;border-width:1px 0}.fc-bg table,.fc-row .fc-bgevent-skeleton table,.fc-row .fc-highlight-skeleton table{height:100%}.fc-bg,.fc-bgevent-skeleton,.fc-highlight-skeleton,.fc-mirror-skeleton{position:absolute;top:0;left:0;right:0}.fc table{width:100%;box-sizing:border-box;table-layout:fixed;border-collapse:collapse;border-spacing:0;font-size:1em}.fc th{text-align:center}.fc td,.fc th{border-style:solid;border-width:1px;padding:0;vertical-align:top}.fc td.fc-today{border-style:double}a[data-goto]:hover{text-decoration:underline}.fc .fc-row{border-style:solid;border-width:0}.fc-row table{border-left:0 hidden transparent;border-right:0 hidden transparent;border-bottom:0 hidden transparent}.fc-row:first-child table{border-top:0 hidden transparent}.fc-row{position:relative}.fc-row .fc-bg{z-index:1}.fc-row .fc-bgevent-skeleton td,.fc-row .fc-highlight-skeleton td{border-color:transparent}.fc-row .fc-bgevent-skeleton{z-index:2}.fc-row .fc-highlight-skeleton{z-index:3}.fc-row .fc-content-skeleton{position:relative;z-index:4;padding-bottom:2px}.fc-row .fc-mirror-skeleton{z-index:5}.fc .fc-row .fc-content-skeleton table,.fc .fc-row .fc-content-skeleton td,.fc .fc-row .fc-mirror-skeleton td{background:0 0;border-color:transparent}.fc-row .fc-content-skeleton td,.fc-row .fc-mirror-skeleton td{border-bottom:0}.fc-row .fc-content-skeleton tbody td,.fc-row .fc-mirror-skeleton tbody td{border-top:0}.fc-scroller{-webkit-overflow-scrolling:touch}.fc-scroller>.fc-day-grid,.fc-scroller>.fc-time-grid{position:relative;width:100%}.fc-event{position:relative;display:block;font-size:.85em;line-height:1.4;border-radius:3px;border:1px solid #3788d8}.fc-event,.fc-event-dot{background-color:#3788d8}.fc-event,.fc-event:hover{color:#fff;text-decoration:none}.fc-not-allowed,.fc-not-allowed .fc-event{cursor:not-allowed}.fc-event .fc-content{position:relative;z-index:2}.fc-event .fc-resizer{position:absolute;z-index:4;display:none}.fc-event.fc-allow-mouse-resize .fc-resizer,.fc-event.fc-selected .fc-resizer{display:block}.fc-event.fc-selected .fc-resizer:before{content:"";position:absolute;z-index:9999;top:50%;left:50%;width:40px;height:40px;margin-left:-20px;margin-top:-20px}.fc-event.fc-selected{z-index:9999!important;box-shadow:0 2px 5px rgba(0,0,0,.2)}.fc-event.fc-selected:after{content:"";position:absolute;z-index:1;top:-1px;right:-1px;bottom:-1px;left:-1px;background:#000;opacity:.25}.fc-event.fc-dragging.fc-selected{box-shadow:0 2px 7px rgba(0,0,0,.3)}.fc-event.fc-dragging:not(.fc-selected){opacity:.75}.fc-h-event.fc-selected:before{content:"";position:absolute;z-index:3;top:-10px;bottom:-10px;left:0;right:0}.fc-ltr .fc-h-event.fc-not-start,.fc-rtl .fc-h-event.fc-not-end{margin-left:0;border-left-width:0;padding-left:1px;border-top-left-radius:0;border-bottom-left-radius:0}.fc-ltr .fc-h-event.fc-not-end,.fc-rtl .fc-h-event.fc-not-start{margin-right:0;border-right-width:0;padding-right:1px;border-top-right-radius:0;border-bottom-right-radius:0}.fc-ltr .fc-h-event .fc-start-resizer,.fc-rtl .fc-h-event .fc-end-resizer{cursor:w-resize;left:-1px}.fc-ltr .fc-h-event .fc-end-resizer,.fc-rtl .fc-h-event .fc-start-resizer{cursor:e-resize;right:-1px}.fc-h-event.fc-allow-mouse-resize .fc-resizer{width:7px;top:-1px;bottom:-1px}.fc-h-event.fc-selected .fc-resizer{border-radius:4px;border-width:1px;width:6px;height:6px;border-style:solid;border-color:inherit;background:#fff;top:50%;margin-top:-4px}.fc-ltr .fc-h-event.fc-selected .fc-start-resizer,.fc-rtl .fc-h-event.fc-selected .fc-end-resizer{margin-left:-4px}.fc-ltr .fc-h-event.fc-selected .fc-end-resizer,.fc-rtl .fc-h-event.fc-selected .fc-start-resizer{margin-right:-4px}.fc-day-grid-event{margin:1px 2px 0;padding:0 1px}tr:first-child>td>.fc-day-grid-event{margin-top:2px}.fc-mirror-skeleton tr:first-child>td>.fc-day-grid-event{margin-top:0}.fc-day-grid-event .fc-content{white-space:nowrap;overflow:hidden}.fc-day-grid-event .fc-time{font-weight:700}.fc-ltr .fc-day-grid-event.fc-allow-mouse-resize .fc-start-resizer,.fc-rtl .fc-day-grid-event.fc-allow-mouse-resize .fc-end-resizer{margin-left:-2px}.fc-ltr .fc-day-grid-event.fc-allow-mouse-resize .fc-end-resizer,.fc-rtl .fc-day-grid-event.fc-allow-mouse-resize .fc-start-resizer{margin-right:-2px}a.fc-more{margin:1px 3px;font-size:.85em;text-decoration:none}a.fc-more:hover{text-decoration:underline}.fc-limited{display:none}.fc-button,.fc-icon{display:inline-block;font-weight:400;text-align:center}.fc-day-grid .fc-row{z-index:1}.fc-more-popover{z-index:2;width:220px}.fc-more-popover .fc-event-container{padding:10px}.fc-now-indicator{position:absolute;border:0 solid red}.fc-unselectable{-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}.fc-unthemed .fc-content,.fc-unthemed .fc-divider,.fc-unthemed .fc-list-heading td,.fc-unthemed .fc-list-view,.fc-unthemed .fc-popover,.fc-unthemed .fc-row,.fc-unthemed tbody,.fc-unthemed td,.fc-unthemed th,.fc-unthemed thead{border-color:#ddd}.fc-unthemed .fc-popover{background-color:#fff}.fc-unthemed .fc-divider,.fc-unthemed .fc-list-heading td,.fc-unthemed .fc-popover .fc-header{background:#eee}.fc-unthemed td.fc-today{background:#fcf8e3}.fc-unthemed .fc-disabled-day{background:#d7d7d7;opacity:.3}@font-face{font-family:fcicons;src:url("data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBfAAAAC8AAAAYGNtYXAXVtKNAAABHAAAAFRnYXNwAAAAEAAAAXAAAAAIZ2x5ZgYydxIAAAF4AAAFNGhlYWQUJ7cIAAAGrAAAADZoaGVhB20DzAAABuQAAAAkaG10eCIABhQAAAcIAAAALGxvY2ED4AU6AAAHNAAAABhtYXhwAA8AjAAAB0wAAAAgbmFtZXsr690AAAdsAAABhnBvc3QAAwAAAAAI9AAAACAAAwPAAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpBgPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAOAAAAAoACAACAAIAAQAg6Qb//f//AAAAAAAg6QD//f//AAH/4xcEAAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAWIAjQKeAskAEwAAJSc3NjQnJiIHAQYUFwEWMjc2NCcCnuLiDQ0MJAz/AA0NAQAMJAwNDcni4gwjDQwM/wANIwz/AA0NDCMNAAAAAQFiAI0CngLJABMAACUBNjQnASYiBwYUHwEHBhQXFjI3AZ4BAA0N/wAMJAwNDeLiDQ0MJAyNAQAMIw0BAAwMDSMM4uINIwwNDQAAAAIA4gC3Ax4CngATACcAACUnNzY0JyYiDwEGFB8BFjI3NjQnISc3NjQnJiIPAQYUHwEWMjc2NCcB87e3DQ0MIw3VDQ3VDSMMDQ0BK7e3DQ0MJAzVDQ3VDCQMDQ3zuLcMJAwNDdUNIwzWDAwNIwy4twwkDA0N1Q0jDNYMDA0jDAAAAgDiALcDHgKeABMAJwAAJTc2NC8BJiIHBhQfAQcGFBcWMjchNzY0LwEmIgcGFB8BBwYUFxYyNwJJ1Q0N1Q0jDA0Nt7cNDQwjDf7V1Q0N1QwkDA0Nt7cNDQwkDLfWDCMN1Q0NDCQMt7gMIw0MDNYMIw3VDQ0MJAy3uAwjDQwMAAADAFUAAAOrA1UAMwBoAHcAABMiBgcOAQcOAQcOARURFBYXHgEXHgEXHgEzITI2Nz4BNz4BNz4BNRE0JicuAScuAScuASMFITIWFx4BFx4BFx4BFREUBgcOAQcOAQcOASMhIiYnLgEnLgEnLgE1ETQ2Nz4BNz4BNz4BMxMhMjY1NCYjISIGFRQWM9UNGAwLFQkJDgUFBQUFBQ4JCRULDBgNAlYNGAwLFQkJDgUFBQUFBQ4JCRULDBgN/aoCVgQIBAQHAwMFAQIBAQIBBQMDBwQECAT9qgQIBAQHAwMFAQIBAQIBBQMDBwQECASAAVYRGRkR/qoRGRkRA1UFBAUOCQkVDAsZDf2rDRkLDBUJCA4FBQUFBQUOCQgVDAsZDQJVDRkLDBUJCQ4FBAVVAgECBQMCBwQECAX9qwQJAwQHAwMFAQICAgIBBQMDBwQDCQQCVQUIBAQHAgMFAgEC/oAZEhEZGRESGQAAAAADAFUAAAOrA1UAMwBoAIkAABMiBgcOAQcOAQcOARURFBYXHgEXHgEXHgEzITI2Nz4BNz4BNz4BNRE0JicuAScuAScuASMFITIWFx4BFx4BFx4BFREUBgcOAQcOAQcOASMhIiYnLgEnLgEnLgE1ETQ2Nz4BNz4BNz4BMxMzFRQWMzI2PQEzMjY1NCYrATU0JiMiBh0BIyIGFRQWM9UNGAwLFQkJDgUFBQUFBQ4JCRULDBgNAlYNGAwLFQkJDgUFBQUFBQ4JCRULDBgN/aoCVgQIBAQHAwMFAQIBAQIBBQMDBwQECAT9qgQIBAQHAwMFAQIBAQIBBQMDBwQECASAgBkSEhmAERkZEYAZEhIZgBEZGREDVQUEBQ4JCRUMCxkN/asNGQsMFQkIDgUFBQUFBQ4JCBUMCxkNAlUNGQsMFQkJDgUEBVUCAQIFAwIHBAQIBf2rBAkDBAcDAwUBAgICAgEFAwMHBAMJBAJVBQgEBAcCAwUCAQL+gIASGRkSgBkSERmAEhkZEoAZERIZAAABAOIAjQMeAskAIAAAExcHBhQXFjI/ARcWMjc2NC8BNzY0JyYiDwEnJiIHBhQX4uLiDQ0MJAzi4gwkDA0N4uINDQwkDOLiDCQMDQ0CjeLiDSMMDQ3h4Q0NDCMN4uIMIw0MDOLiDAwNIwwAAAABAAAAAQAAa5n0y18PPPUACwQAAAAAANivOVsAAAAA2K85WwAAAAADqwNVAAAACAACAAAAAAAAAAEAAAPA/8AAAAQAAAAAAAOrAAEAAAAAAAAAAAAAAAAAAAALBAAAAAAAAAAAAAAAAgAAAAQAAWIEAAFiBAAA4gQAAOIEAABVBAAAVQQAAOIAAAAAAAoAFAAeAEQAagCqAOoBngJkApoAAQAAAAsAigADAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAA4ArgABAAAAAAABAAcAAAABAAAAAAACAAcAYAABAAAAAAADAAcANgABAAAAAAAEAAcAdQABAAAAAAAFAAsAFQABAAAAAAAGAAcASwABAAAAAAAKABoAigADAAEECQABAA4ABwADAAEECQACAA4AZwADAAEECQADAA4APQADAAEECQAEAA4AfAADAAEECQAFABYAIAADAAEECQAGAA4AUgADAAEECQAKADQApGZjaWNvbnMAZgBjAGkAYwBvAG4Ac1ZlcnNpb24gMS4wAFYAZQByAHMAaQBvAG4AIAAxAC4AMGZjaWNvbnMAZgBjAGkAYwBvAG4Ac2ZjaWNvbnMAZgBjAGkAYwBvAG4Ac1JlZ3VsYXIAUgBlAGcAdQBsAGEAcmZjaWNvbnMAZgBjAGkAYwBvAG4Ac0ZvbnQgZ2VuZXJhdGVkIGJ5IEljb01vb24uAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=") format("truetype");font-weight:400;font-style:normal}.fc-icon{font-family:fcicons!important;speak:none;font-style:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;width:1em;height:1em}.fc-icon-chevron-left:before{content:""}.fc-icon-chevron-right:before{content:""}.fc-icon-chevrons-left:before{content:""}.fc-icon-chevrons-right:before{content:""}.fc-icon-minus-square:before{content:""}.fc-icon-plus-square:before{content:""}.fc-icon-x:before{content:""}.fc-button{overflow:visible;text-transform:none;margin:0;font-family:inherit}.fc-button::-moz-focus-inner{padding:0;border-style:none}.fc-button{-webkit-appearance:button;color:#212529;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:transparent;border:1px solid transparent;padding:.4em .65em;font-size:1em;line-height:1.5;border-radius:.25em}.fc-button:hover{color:#212529;text-decoration:none}.fc-button:focus{outline:0;-webkit-box-shadow:0 0 0 .2rem rgba(44,62,80,.25);box-shadow:0 0 0 .2rem rgba(44,62,80,.25)}.fc-button:disabled{opacity:.65}.fc-button-primary{color:#fff;background-color:#2C3E50;border-color:#2C3E50}.fc-button-primary:hover{color:#fff;background-color:#1e2b37;border-color:#1a252f}.fc-button-primary:focus{-webkit-box-shadow:0 0 0 .2rem rgba(76,91,106,.5);box-shadow:0 0 0 .2rem rgba(76,91,106,.5)}.fc-button-primary:disabled{color:#fff;background-color:#2C3E50;border-color:#2C3E50}.fc-button-primary:not(:disabled).fc-button-active,.fc-button-primary:not(:disabled):active{color:#fff;background-color:#1a252f;border-color:#151e27}.fc-button-primary:not(:disabled).fc-button-active:focus,.fc-button-primary:not(:disabled):active:focus{-webkit-box-shadow:0 0 0 .2rem rgba(76,91,106,.5);box-shadow:0 0 0 .2rem rgba(76,91,106,.5)}.fc-button .fc-icon{vertical-align:middle;font-size:1.5em}.fc-button-group{position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle}.fc-button-group>.fc-button{position:relative;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.fc-button-group>.fc-button.fc-button-active,.fc-button-group>.fc-button:active,.fc-button-group>.fc-button:focus,.fc-button-group>.fc-button:hover{z-index:1}.fc-button-group>.fc-button:not(:first-child){margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}.fc-button-group>.fc-button:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.fc-unthemed .fc-popover{border-width:1px;border-style:solid}.fc-unthemed .fc-list-item:hover td{background-color:#f5f5f5}.fc-toolbar{display:flex;justify-content:space-between;align-items:center}.fc-toolbar.fc-header-toolbar{margin-bottom:1.5em}.fc-toolbar.fc-footer-toolbar{margin-top:1.5em}.fc-toolbar>*>:not(:first-child){margin-left:.75em}.fc-toolbar h2{font-size:1.75em;margin:0}.fc-view-container{position:relative}.fc-view-container *,.fc-view-container :after,.fc-view-container :before{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}.fc-view,.fc-view>table{position:relative;z-index:1}@media print{.fc-bg,.fc-bgevent-container,.fc-bgevent-skeleton,.fc-business-container,.fc-event .fc-resizer,.fc-highlight-container,.fc-highlight-skeleton,.fc-mirror-container,.fc-mirror-skeleton{display:none}.fc tbody .fc-row,.fc-time-grid{min-height:0!important}.fc-time-grid .fc-event.fc-not-end:after,.fc-time-grid .fc-event.fc-not-start:before{content:"..."}.fc{max-width:100%!important}.fc-event{background:#fff!important;color:#000!important;page-break-inside:avoid}.fc hr,.fc tbody,.fc td,.fc th,.fc thead,.fc-row{border-color:#ccc!important;background:#fff!important}.fc tbody .fc-row{height:auto!important}.fc tbody .fc-row .fc-content-skeleton{position:static;padding-bottom:0!important}.fc tbody .fc-row .fc-content-skeleton tbody tr:last-child td{padding-bottom:1em}.fc tbody .fc-row .fc-content-skeleton table{height:1em}.fc-more,.fc-more-cell{display:none!important}.fc tr.fc-limited{display:table-row!important}.fc td.fc-limited{display:table-cell!important}.fc-popover,.fc-timeGrid-view .fc-axis{display:none}.fc-slats,.fc-time-grid hr{display:none!important}.fc button,.fc-button-group,.fc-time-grid .fc-event .fc-time span{display:none}.fc-time-grid .fc-content-skeleton{position:static}.fc-time-grid .fc-content-skeleton table{height:4em}.fc-time-grid .fc-event-container{margin:0!important}.fc-time-grid .fc-event{position:static!important;margin:3px 2px!important}.fc-time-grid .fc-event.fc-not-end{border-bottom-width:1px!important}.fc-time-grid .fc-event.fc-not-start{border-top-width:1px!important}.fc-time-grid .fc-event .fc-time{white-space:normal!important}.fc-time-grid .fc-event .fc-time:after{content:attr(data-full)}.fc-day-grid-container,.fc-scroller,.fc-time-grid-container{overflow:visible!important;height:auto!important}.fc-row{border:0!important;margin:0!important}}

@import "ace.scss";

@charset "UTF-8";
.fc {
direction: ltr;
text-align: left;
}

.fc-rtl {
text-align: right;
}

body .fc {
/* extra precedence to overcome jqui */
font-size: 1em;
}

/* Colors
--------------------------------------------------------------------------------------------------*/
.fc-highlight {
  /* when user is selecting cells */
  background: #bce8f1;
  opacity: 0.3;
}

.fc-bgevent {
  /* default look for background events */
  background: #8fdf82;
  opacity: 0.3;
}

.fc-nonbusiness {
  /* default look for non-business-hours areas */
  /* will inherit .fc-bgevent's styles */
  background: #d7d7d7;
}

/* Popover
--------------------------------------------------------------------------------------------------*/
.fc-popover {
position: absolute;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.fc-popover .fc-header {
  /* TODO: be more consistent with fc-head/fc-body */
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 2px 4px;
}

.fc-rtl .fc-popover .fc-header {
flex-direction: row-reverse;
}

.fc-popover .fc-header .fc-title {
margin: 0 2px;
}

.fc-popover .fc-header .fc-close {
  cursor: pointer;
  opacity: 0.65;
  font-size: 1.1em;
}

/* Misc Reusable Components
--------------------------------------------------------------------------------------------------*/
.fc-divider {
border-style: solid;
border-width: 1px;
}

hr.fc-divider {
  height: 0;
  margin: 0;
  padding: 0 0 2px;
  /* height is unreliable across browsers, so use padding */
  border-width: 1px 0;
}

.fc-bg,
.fc-bgevent-skeleton,
.fc-highlight-skeleton,
.fc-mirror-skeleton {
  /* these element should always cling to top-left/right corners */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.fc-bg {
bottom: 0;
/* strech bg to bottom edge */
}

.fc-bg table {
height: 100%;
/* strech bg to bottom edge */
}

/* Tables
--------------------------------------------------------------------------------------------------*/
.fc table {
  width: 100%;
  box-sizing: border-box;
  /* fix scrollbar issue in firefox */
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 1em;
  /* normalize cross-browser */
}

.fc th {
text-align: center;
}

.fc th,
.fc td {
  border-style: solid;
  border-width: 1px;
  padding: 0;
  vertical-align: top;
}

.fc td.fc-today {
border-style: double;
/* overcome neighboring borders */
}

/* Internal Nav Links
--------------------------------------------------------------------------------------------------*/
a[data-goto] {
cursor: pointer;
}

a[data-goto]:hover {
text-decoration: underline;
}

/* Fake Table Rows
--------------------------------------------------------------------------------------------------*/
.fc .fc-row {
  /* extra precedence to overcome themes forcing a 1px border */
  /* no visible border by default. but make available if need be (scrollbar width compensation) */
  border-style: solid;
  border-width: 0;
}

.fc-row table {
  /* don't put left/right border on anything within a fake row.
     the outer tbody will worry about this */
  border-left: 0 hidden transparent;
  border-right: 0 hidden transparent;
  /* no bottom borders on rows */
  border-bottom: 0 hidden transparent;
}

.fc-row:first-child table {
border-top: 0 hidden transparent;
/* no top border on first row */
}

/* Day Row (used within the header and the DayGrid)
--------------------------------------------------------------------------------------------------*/
.fc-row {
position: relative;
}

.fc-row .fc-bg {
z-index: 1;
}

/* highlighting cells & background event skeleton */
.fc-row .fc-bgevent-skeleton,
.fc-row .fc-highlight-skeleton {
bottom: 0;
/* stretch skeleton to bottom of row */
}

.fc-row .fc-bgevent-skeleton table,
.fc-row .fc-highlight-skeleton table {
height: 100%;
/* stretch skeleton to bottom of row */
}

.fc-row .fc-highlight-skeleton td,
.fc-row .fc-bgevent-skeleton td {
border-color: transparent;
}

.fc-row .fc-bgevent-skeleton {
z-index: 2;
}

.fc-row .fc-highlight-skeleton {
z-index: 3;
}

/*
row content (which contains day/week numbers and events) as well as "mirror" (which contains
temporary rendered events).
*/
.fc-row .fc-content-skeleton {
  position: relative;
  z-index: 4;
  padding-bottom: 2px;
  /* matches the space above the events */
}

.fc-row .fc-mirror-skeleton {
z-index: 5;
}

.fc .fc-row .fc-content-skeleton table,
.fc .fc-row .fc-content-skeleton td,
.fc .fc-row .fc-mirror-skeleton td {
  /* see-through to the background below */
  /* extra precedence to prevent theme-provided backgrounds */
  background: none;
  /* in case s are globally styled */
  border-color: transparent;
}

.fc-row .fc-content-skeleton td,
.fc-row .fc-mirror-skeleton td {
/* don't put a border between events and/or the day number */
border-bottom: 0;
}

.fc-row .fc-content-skeleton tbody td,
.fc-row .fc-mirror-skeleton tbody td {
/* don't put a border between event cells */
border-top: 0;
}

/* Scrolling Container
--------------------------------------------------------------------------------------------------*/
.fc-scroller {
-webkit-overflow-scrolling: touch;
}

/* TODO: move to timegrid/daygrid */
.fc-scroller > .fc-day-grid,
.fc-scroller > .fc-time-grid {
  position: relative;
  /* re-scope all positions */
  width: 100%;
  /* hack to force re-sizing this inner element when scrollbars appear/disappear */
}

/* Global Event Styles
--------------------------------------------------------------------------------------------------*/
.fc-event {
  position: relative;
  /* for resize handle and other inner positioning */
  display: block;
  /* make the  tag block */
  font-size: 0.85em;
  line-height: 1.4;
  border-radius: 3px;
  border: 1px solid #3788d8;
}

.fc-event,
.fc-event-dot {
background-color: #3788d8;
/* default BACKGROUND color */
}

.fc-event,
.fc-event:hover {
  color: #fff;
  /* default TEXT color */
  text-decoration: none;
  /* if  has an href */
}

.fc-event[href],
.fc-event.fc-draggable {
cursor: pointer;
/* give events with links and draggable events a hand mouse pointer */
}

.fc-not-allowed,
.fc-not-allowed .fc-event {
/* to override an event's custom cursor */
cursor: not-allowed;
}

.fc-event .fc-content {
position: relative;
z-index: 2;
}

/* resizer (cursor AND touch devices) */
.fc-event .fc-resizer {
position: absolute;
z-index: 4;
}

/* resizer (touch devices) */
.fc-event .fc-resizer {
display: none;
}

.fc-event.fc-allow-mouse-resize .fc-resizer,
.fc-event.fc-selected .fc-resizer {
/* only show when hovering or selected (with touch) */
display: block;
}

/* hit area */
.fc-event.fc-selected .fc-resizer:before {
  /* 40x40 touch area */
  content: "";
  position: absolute;
  z-index: 9999;
  /* user of this util can scope within a lower z-index */
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin-left: -20px;
  margin-top: -20px;
}

/* Event Selection (only for touch devices)
--------------------------------------------------------------------------------------------------*/
.fc-event.fc-selected {
  z-index: 9999 !important;
  /* overcomes inline z-index */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.fc-event.fc-selected:after {
  content: "";
  position: absolute;
  z-index: 1;
  /* same z-index as fc-bg, behind text */
  /* overcome the borders */
  top: -1px;
  right: -1px;
  bottom: -1px;
  left: -1px;
  /* darkening effect */
  background: #000;
  opacity: 0.25;
}

/* Event Dragging
--------------------------------------------------------------------------------------------------*/
.fc-event.fc-dragging.fc-selected {
box-shadow: 0 2px 7px rgba(0, 0, 0, 0.3);
}

.fc-event.fc-dragging:not(.fc-selected) {
opacity: 0.75;
}

/* Horizontal Events
--------------------------------------------------------------------------------------------------*/
/* bigger touch area when selected */
.fc-h-event.fc-selected:before {
  content: "";
  position: absolute;
  z-index: 3;
  /* below resizers */
  top: -10px;
  bottom: -10px;
  left: 0;
  right: 0;
}

/* events that are continuing to/from another week. kill rounded corners and butt up against edge */
.fc-ltr .fc-h-event.fc-not-start,
.fc-rtl .fc-h-event.fc-not-end {
  margin-left: 0;
  border-left-width: 0;
  padding-left: 1px;
  /* replace the border with padding */
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.fc-ltr .fc-h-event.fc-not-end,
.fc-rtl .fc-h-event.fc-not-start {
  margin-right: 0;
  border-right-width: 0;
  padding-right: 1px;
  /* replace the border with padding */
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* resizer (cursor AND touch devices) */
/* left resizer  */
.fc-ltr .fc-h-event .fc-start-resizer,
.fc-rtl .fc-h-event .fc-end-resizer {
  cursor: w-resize;
  left: -1px;
  /* overcome border */
}

/* right resizer */
.fc-ltr .fc-h-event .fc-end-resizer,
.fc-rtl .fc-h-event .fc-start-resizer {
  cursor: e-resize;
  right: -1px;
  /* overcome border */
}

/* resizer (mouse devices) */
.fc-h-event.fc-allow-mouse-resize .fc-resizer {
  width: 7px;
  top: -1px;
  /* overcome top border */
  bottom: -1px;
  /* overcome bottom border */
}

/* resizer (touch devices) */
.fc-h-event.fc-selected .fc-resizer {
  /* 8x8 little dot */
  border-radius: 4px;
  border-width: 1px;
  width: 6px;
  height: 6px;
  border-style: solid;
  border-color: inherit;
  background: #fff;
  /* vertically center */
  top: 50%;
  margin-top: -4px;
}

/* left resizer  */
.fc-ltr .fc-h-event.fc-selected .fc-start-resizer,
.fc-rtl .fc-h-event.fc-selected .fc-end-resizer {
  margin-left: -4px;
  /* centers the 8x8 dot on the left edge */
}

/* right resizer */
.fc-ltr .fc-h-event.fc-selected .fc-end-resizer,
.fc-rtl .fc-h-event.fc-selected .fc-start-resizer {
margin-right: -4px;
/* centers the 8x8 dot on the right edge */
}

/* DayGrid events
----------------------------------------------------------------------------------------------------
We use the full "fc-day-grid-event" class instead of using descendants because the event won't
be a descendant of the grid when it is being dragged.
*/
.fc-day-grid-event {
  margin: 1px 2px 0;
  /* spacing between events and edges */
  padding: 0 1px;
}

tr:first-child > td > .fc-day-grid-event {
margin-top: 2px;
/* a little bit more space before the first event */
}

.fc-mirror-skeleton tr:first-child > td > .fc-day-grid-event {
margin-top: 0;
/* except for mirror skeleton */
}

.fc-day-grid-event .fc-content {
  /* force events to be one-line tall */
  white-space: nowrap;
  overflow: hidden;
}

.fc-day-grid-event .fc-time {
font-weight: bold;
}

/* resizer (cursor devices) */
/* left resizer  */
.fc-ltr .fc-day-grid-event.fc-allow-mouse-resize .fc-start-resizer,
.fc-rtl .fc-day-grid-event.fc-allow-mouse-resize .fc-end-resizer {
  margin-left: -2px;
  /* to the day cell's edge */
}

/* right resizer */
.fc-ltr .fc-day-grid-event.fc-allow-mouse-resize .fc-end-resizer,
.fc-rtl .fc-day-grid-event.fc-allow-mouse-resize .fc-start-resizer {
margin-right: -2px;
/* to the day cell's edge */
}

/* Event Limiting
--------------------------------------------------------------------------------------------------*/
/* "more" link that represents hidden events */
a.fc-more {
  margin: 1px 3px;
  font-size: 0.85em;
  cursor: pointer;
  text-decoration: none;
}

a.fc-more:hover {
text-decoration: underline;
}

.fc-limited {
/* rows and cells that are hidden because of a "more" link */
display: none;
}

/* popover that appears when "more" link is clicked */
.fc-day-grid .fc-row {
z-index: 1;
/* make the "more" popover one higher than this */
}

.fc-more-popover {
z-index: 2;
width: 220px;
}

.fc-more-popover .fc-event-container {
padding: 10px;
}

/* Now Indicator
--------------------------------------------------------------------------------------------------*/
.fc-now-indicator {
position: absolute;
border: 0 solid red;
}

/* Utilities
--------------------------------------------------------------------------------------------------*/
.fc-unselectable {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/*
TODO: more distinction between this file and common.css
*/
/* Colors
--------------------------------------------------------------------------------------------------*/
.fc-unthemed th,
.fc-unthemed td,
.fc-unthemed thead,
.fc-unthemed tbody,
.fc-unthemed .fc-divider,
.fc-unthemed .fc-row,
.fc-unthemed .fc-content,
.fc-unthemed .fc-popover,
.fc-unthemed .fc-list-view,
.fc-unthemed .fc-list-heading td {
border-color: #ddd;
}

.fc-unthemed .fc-popover {
background-color: #fff;
}

.fc-unthemed .fc-divider,
.fc-unthemed .fc-popover .fc-header,
.fc-unthemed .fc-list-heading td {
background: #eee;
}

.fc-unthemed td.fc-today {
background: #fcf8e3;
}

.fc-unthemed .fc-disabled-day {
background: #d7d7d7;
opacity: 0.3;
}

/* Icons
--------------------------------------------------------------------------------------------------
from https://feathericons.com/ and built with IcoMoon
*/
@font-face {
  font-family: "fcicons";
  src: url("data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBfAAAAC8AAAAYGNtYXAXVtKNAAABHAAAAFRnYXNwAAAAEAAAAXAAAAAIZ2x5ZgYydxIAAAF4AAAFNGhlYWQUJ7cIAAAGrAAAADZoaGVhB20DzAAABuQAAAAkaG10eCIABhQAAAcIAAAALGxvY2ED4AU6AAAHNAAAABhtYXhwAA8AjAAAB0wAAAAgbmFtZXsr690AAAdsAAABhnBvc3QAAwAAAAAI9AAAACAAAwPAAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpBgPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAOAAAAAoACAACAAIAAQAg6Qb//f//AAAAAAAg6QD//f//AAH/4xcEAAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAWIAjQKeAskAEwAAJSc3NjQnJiIHAQYUFwEWMjc2NCcCnuLiDQ0MJAz/AA0NAQAMJAwNDcni4gwjDQwM/wANIwz/AA0NDCMNAAAAAQFiAI0CngLJABMAACUBNjQnASYiBwYUHwEHBhQXFjI3AZ4BAA0N/wAMJAwNDeLiDQ0MJAyNAQAMIw0BAAwMDSMM4uINIwwNDQAAAAIA4gC3Ax4CngATACcAACUnNzY0JyYiDwEGFB8BFjI3NjQnISc3NjQnJiIPAQYUHwEWMjc2NCcB87e3DQ0MIw3VDQ3VDSMMDQ0BK7e3DQ0MJAzVDQ3VDCQMDQ3zuLcMJAwNDdUNIwzWDAwNIwy4twwkDA0N1Q0jDNYMDA0jDAAAAgDiALcDHgKeABMAJwAAJTc2NC8BJiIHBhQfAQcGFBcWMjchNzY0LwEmIgcGFB8BBwYUFxYyNwJJ1Q0N1Q0jDA0Nt7cNDQwjDf7V1Q0N1QwkDA0Nt7cNDQwkDLfWDCMN1Q0NDCQMt7gMIw0MDNYMIw3VDQ0MJAy3uAwjDQwMAAADAFUAAAOrA1UAMwBoAHcAABMiBgcOAQcOAQcOARURFBYXHgEXHgEXHgEzITI2Nz4BNz4BNz4BNRE0JicuAScuAScuASMFITIWFx4BFx4BFx4BFREUBgcOAQcOAQcOASMhIiYnLgEnLgEnLgE1ETQ2Nz4BNz4BNz4BMxMhMjY1NCYjISIGFRQWM9UNGAwLFQkJDgUFBQUFBQ4JCRULDBgNAlYNGAwLFQkJDgUFBQUFBQ4JCRULDBgN/aoCVgQIBAQHAwMFAQIBAQIBBQMDBwQECAT9qgQIBAQHAwMFAQIBAQIBBQMDBwQECASAAVYRGRkR/qoRGRkRA1UFBAUOCQkVDAsZDf2rDRkLDBUJCA4FBQUFBQUOCQgVDAsZDQJVDRkLDBUJCQ4FBAVVAgECBQMCBwQECAX9qwQJAwQHAwMFAQICAgIBBQMDBwQDCQQCVQUIBAQHAgMFAgEC/oAZEhEZGRESGQAAAAADAFUAAAOrA1UAMwBoAIkAABMiBgcOAQcOAQcOARURFBYXHgEXHgEXHgEzITI2Nz4BNz4BNz4BNRE0JicuAScuAScuASMFITIWFx4BFx4BFx4BFREUBgcOAQcOAQcOASMhIiYnLgEnLgEnLgE1ETQ2Nz4BNz4BNz4BMxMzFRQWMzI2PQEzMjY1NCYrATU0JiMiBh0BIyIGFRQWM9UNGAwLFQkJDgUFBQUFBQ4JCRULDBgNAlYNGAwLFQkJDgUFBQUFBQ4JCRULDBgN/aoCVgQIBAQHAwMFAQIBAQIBBQMDBwQECAT9qgQIBAQHAwMFAQIBAQIBBQMDBwQECASAgBkSEhmAERkZEYAZEhIZgBEZGREDVQUEBQ4JCRUMCxkN/asNGQsMFQkIDgUFBQUFBQ4JCBUMCxkNAlUNGQsMFQkJDgUEBVUCAQIFAwIHBAQIBf2rBAkDBAcDAwUBAgICAgEFAwMHBAMJBAJVBQgEBAcCAwUCAQL+gIASGRkSgBkSERmAEhkZEoAZERIZAAABAOIAjQMeAskAIAAAExcHBhQXFjI/ARcWMjc2NC8BNzY0JyYiDwEnJiIHBhQX4uLiDQ0MJAzi4gwkDA0N4uINDQwkDOLiDCQMDQ0CjeLiDSMMDQ3h4Q0NDCMN4uIMIw0MDOLiDAwNIwwAAAABAAAAAQAAa5n0y18PPPUACwQAAAAAANivOVsAAAAA2K85WwAAAAADqwNVAAAACAACAAAAAAAAAAEAAAPA/8AAAAQAAAAAAAOrAAEAAAAAAAAAAAAAAAAAAAALBAAAAAAAAAAAAAAAAgAAAAQAAWIEAAFiBAAA4gQAAOIEAABVBAAAVQQAAOIAAAAAAAoAFAAeAEQAagCqAOoBngJkApoAAQAAAAsAigADAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAA4ArgABAAAAAAABAAcAAAABAAAAAAACAAcAYAABAAAAAAADAAcANgABAAAAAAAEAAcAdQABAAAAAAAFAAsAFQABAAAAAAAGAAcASwABAAAAAAAKABoAigADAAEECQABAA4ABwADAAEECQACAA4AZwADAAEECQADAA4APQADAAEECQAEAA4AfAADAAEECQAFABYAIAADAAEECQAGAA4AUgADAAEECQAKADQApGZjaWNvbnMAZgBjAGkAYwBvAG4Ac1ZlcnNpb24gMS4wAFYAZQByAHMAaQBvAG4AIAAxAC4AMGZjaWNvbnMAZgBjAGkAYwBvAG4Ac2ZjaWNvbnMAZgBjAGkAYwBvAG4Ac1JlZ3VsYXIAUgBlAGcAdQBsAGEAcmZjaWNvbnMAZgBjAGkAYwBvAG4Ac0ZvbnQgZ2VuZXJhdGVkIGJ5IEljb01vb24uAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=") format("truetype");
  font-weight: normal;
  font-style: normal;
}
.fc-icon {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "fcicons" !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fc-icon-chevron-left:before {
content: "";
}

.fc-icon-chevron-right:before {
content: "";
}

.fc-icon-chevrons-left:before {
content: "";
}

.fc-icon-chevrons-right:before {
content: "";
}

.fc-icon-minus-square:before {
content: "";
}

.fc-icon-plus-square:before {
content: "";
}

.fc-icon-x:before {
content: "";
}

.fc-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  text-align: center;
}

/* Buttons
--------------------------------------------------------------------------------------------------
Lots taken from Flatly (MIT): https://bootswatch.com/4/flatly/bootstrap.css
*/
/* reset */
.fc-button {
  border-radius: 0;
  overflow: visible;
  text-transform: none;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

.fc-button:focus {
outline: 1px dotted;
outline: 5px auto -webkit-focus-ring-color;
}

.fc-button {
-webkit-appearance: button;
}

.fc-button:not(:disabled) {
cursor: pointer;
}

.fc-button::-moz-focus-inner {
padding: 0;
border-style: none;
}

/* theme */
.fc-button {
  display: inline-block;
  font-weight: 400;
  color: #212529;
  text-align: center;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding: 0.4em 0.65em;
  font-size: 1em;
  line-height: 1.5;
  border-radius: 0.25em;
}

.fc-button:hover {
color: #212529;
text-decoration: none;
}

.fc-button:focus {
  outline: 0;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(44, 62, 80, 0.25);
  box-shadow: 0 0 0 0.2rem rgba(44, 62, 80, 0.25);
}

.fc-button:disabled {
opacity: 0.65;
}

/* "primary" coloring */
.fc-button-primary {
  // color: #fff;
  background-color: $company-blue;
  border-color: $company-blue;
  color:white;
  /* background-color: #2C3E50;
  border-color: #2C3E50; */
}

.fc-button-primary:hover {
  background-color: $company-blue-hover;
  border-color: $company-blue-hover;
  color:white;
}

.fc-button-primary:focus {
-webkit-box-shadow: 0 0 0 0.2rem rgba(76, 91, 106, 0.5);
box-shadow: 0 0 0 0.2rem rgba(76, 91, 106, 0.5);
}

.fc-button-primary:disabled {
  color: #fff;
  background-color: #2C3E50;
  border-color: #2C3E50;
}

.fc-button-primary:not(:disabled):active,
.fc-button-primary:not(:disabled).fc-button-active {
  color: #fff;
  background-color: #1a252f;
  border-color: #151e27;
}

.fc-button-primary:not(:disabled):active:focus,
.fc-button-primary:not(:disabled).fc-button-active:focus {
-webkit-box-shadow: 0 0 0 0.2rem rgba(76, 91, 106, 0.5);
box-shadow: 0 0 0 0.2rem rgba(76, 91, 106, 0.5);
}

/* icons within buttons */
.fc-button .fc-icon {
vertical-align: middle;
font-size: 1.5em;
}

/* Buttons Groups
--------------------------------------------------------------------------------------------------*/
.fc-button-group {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  vertical-align: middle;
}

.fc-button-group > .fc-button {
  position: relative;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
}

.fc-button-group > .fc-button:hover {
z-index: 1;
}

.fc-button-group > .fc-button:focus,
.fc-button-group > .fc-button:active,
.fc-button-group > .fc-button.fc-button-active {
z-index: 1;
}

.fc-button-group > .fc-button:not(:first-child) {
margin-left: -1px;
}

.fc-button-group > .fc-button:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}

.fc-button-group > .fc-button:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}

/* Popover
--------------------------------------------------------------------------------------------------*/
.fc-unthemed .fc-popover {
border-width: 1px;
border-style: solid;
}

/* List View
--------------------------------------------------------------------------------------------------*/
.fc-unthemed .fc-list-item:hover td {
background-color: #f5f5f5;
}

/* Toolbar
--------------------------------------------------------------------------------------------------*/
.fc-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.fc-toolbar.fc-header-toolbar {
margin-bottom: 1.5em;
}

.fc-toolbar.fc-footer-toolbar {
margin-top: 1.5em;
}

/* inner content */
.fc-toolbar > * > :not(:first-child) {
margin-left: 0.75em;
}

.fc-toolbar h2 {
font-size: 1.75em;
margin: 0;
}

/* View Structure
--------------------------------------------------------------------------------------------------*/
.fc-view-container {
position: relative;
}

/* undo twitter bootstrap's box-sizing rules. normalizes positioning techniques */
/* don't do this for the toolbar because we'll want bootstrap to style those buttons as some pt */
.fc-view-container *,
.fc-view-container *:before,
.fc-view-container *:after {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

.fc-view,
.fc-view > table {
  /* so dragged elements can be above the view's main element */
  position: relative;
  z-index: 1;
}

@media print {
  .fc {
    max-width: 100% !important;
  }

  /* Global Event Restyling
  --------------------------------------------------------------------------------------------------*/
  .fc-event {
    background: #fff !important;
    color: #000 !important;
    page-break-inside: avoid;
  }

  .fc-event .fc-resizer {
    display: none;
  }

  /* Table & Day-Row Restyling
  --------------------------------------------------------------------------------------------------*/
  .fc th,
.fc td,
.fc hr,
.fc thead,
.fc tbody,
.fc-row {
    border-color: #ccc !important;
    background: #fff !important;
  }

  /* kill the overlaid, absolutely-positioned components */
  /* common... */
  .fc-bg,
.fc-bgevent-skeleton,
.fc-highlight-skeleton,
.fc-mirror-skeleton,
.fc-bgevent-container,
.fc-business-container,
.fc-highlight-container,
.fc-mirror-container {
    display: none;
  }

  /* don't force a min-height on rows (for DayGrid) */
  .fc tbody .fc-row {
    height: auto !important;
    /* undo height that JS set in distributeHeight */
    min-height: 0 !important;
    /* undo the min-height from each view's specific stylesheet */
  }

  .fc tbody .fc-row .fc-content-skeleton {
    position: static;
    /* undo .fc-rigid */
    padding-bottom: 0 !important;
    /* use a more border-friendly method for this... */
  }

  .fc tbody .fc-row .fc-content-skeleton tbody tr:last-child td {
    /* only works in newer browsers */
    padding-bottom: 1em;
    /* ...gives space within the skeleton. also ensures min height in a way */
  }

  .fc tbody .fc-row .fc-content-skeleton table {
    /* provides a min-height for the row, but only effective for IE, which exaggerates this value,
       making it look more like 3em. for other browers, it will already be this tall */
    height: 1em;
  }

  /* Undo month-view event limiting. Display all events and hide the "more" links
  --------------------------------------------------------------------------------------------------*/
  .fc-more-cell,
.fc-more {
    display: none !important;
  }

  .fc tr.fc-limited {
    display: table-row !important;
  }

  .fc td.fc-limited {
    display: table-cell !important;
  }

  .fc-popover {
    display: none;
    /* never display the "more.." popover in print mode */
  }

  /* TimeGrid Restyling
  --------------------------------------------------------------------------------------------------*/
  /* undo the min-height 100% trick used to fill the container's height */
  .fc-time-grid {
    min-height: 0 !important;
  }

  /* don't display the side axis at all ("all-day" and time cells) */
  .fc-timeGrid-view .fc-axis {
    display: none;
  }

  /* don't display the horizontal lines */
  .fc-slats,
.fc-time-grid hr {
    /* this hr is used when height is underused and needs to be filled */
    display: none !important;
    /* important overrides inline declaration */
  }

  /* let the container that holds the events be naturally positioned and create real height */
  .fc-time-grid .fc-content-skeleton {
    position: static;
  }

  /* in case there are no events, we still want some height */
  .fc-time-grid .fc-content-skeleton table {
    height: 4em;
  }

  /* kill the horizontal spacing made by the event container. event margins will be done below */
  .fc-time-grid .fc-event-container {
    margin: 0 !important;
  }

  /* TimeGrid *Event* Restyling
  --------------------------------------------------------------------------------------------------*/
  /* naturally position events, vertically stacking them */
  .fc-time-grid .fc-event {
    position: static !important;
    margin: 3px 2px !important;
  }

  /* for events that continue to a future day, give the bottom border back */
  .fc-time-grid .fc-event.fc-not-end {
    border-bottom-width: 1px !important;
  }

  /* indicate the event continues via "..." text */
  .fc-time-grid .fc-event.fc-not-end:after {
    content: "...";
  }

  /* for events that are continuations from previous days, give the top border back */
  .fc-time-grid .fc-event.fc-not-start {
    border-top-width: 1px !important;
  }

  /* indicate the event is a continuation via "..." text */
  .fc-time-grid .fc-event.fc-not-start:before {
    content: "...";
  }

  /* time */
  /* undo a previous declaration and let the time text span to a second line */
  .fc-time-grid .fc-event .fc-time {
    white-space: normal !important;
  }

  /* hide the the time that is normally displayed... */
  .fc-time-grid .fc-event .fc-time span {
    display: none;
  }

  /* ...replace it with a more verbose version (includes AM/PM) stored in an html attribute */
  .fc-time-grid .fc-event .fc-time:after {
    content: attr(data-full);
  }

  /* Vertical Scroller & Containers
  --------------------------------------------------------------------------------------------------*/
  /* kill the scrollbars and allow natural height */
  .fc-scroller,
.fc-day-grid-container,
.fc-time-grid-container {
    /* */
    overflow: visible !important;
    height: auto !important;
  }

  /* kill the horizontal border/padding used to compensate for scrollbars */
  .fc-row {
    border: 0 !important;
    margin: 0 !important;
  }

  /* Button Controls
  --------------------------------------------------------------------------------------------------*/
  .fc-button-group,
.fc button {
    display: none;
    /* don't display any button-related controls */
  }
}

.fc-scroller-clip{overflow:hidden;position:relative}.fc-no-scrollbars{background:rgba(255,255,255,0)}.fc-no-scrollbars::-webkit-scrollbar{width:0;height:0}.fc-scroller-canvas{position:relative;box-sizing:border-box;min-height:100%}.fc-scroller-canvas>.fc-bg{z-index:1}.fc-scroller-canvas>.fc-content{z-index:2;position:relative;border-style:solid;border-width:0}.fc-scroller-canvas.fc-gutter-left>.fc-content{border-left-width:1px;margin-left:-1px}.fc-scroller-canvas.fc-gutter-right>.fc-content{border-right-width:1px;margin-right:-1px}.fc-scroller-canvas.fc-gutter-top>.fc-content{border-top-width:1px;margin-top:-1px}.fc-rtl .fc-timeline{direction:rtl}.fc-scrolled .fc-head .fc-scroller{z-index:2}.fc-timeline.fc-scrolled .fc-head .fc-scroller{box-shadow:0 3px 4px rgba(0,0,0,.075)}.fc-timeline .fc-body .fc-scroller{z-index:1}.fc-timeline .fc-scroller-canvas>div>div>table,.fc-timeline .fc-scroller-canvas>div>table{border-style:hidden}.fc-timeline .fc-scroller-canvas>.fc-content>.fc-rows>table{border-bottom-style:none}.fc-timeline td,.fc-timeline th{white-space:nowrap}.fc-timeline .fc-cell-content{overflow:hidden}.fc-timeline .fc-cell-text{display:inline-block;padding-left:4px;padding-right:4px}.fc-timeline th{vertical-align:middle}.fc-timeline .fc-head .fc-cell-content{padding-top:3px;padding-bottom:3px}.fc-timeline .fc-head .fc-time-area .fc-cell-content{overflow:visible}.fc-time-area col{min-width:2.2em}.fc-ltr .fc-time-area .fc-chrono th{text-align:left}.fc-rtl .fc-time-area .fc-chrono th{text-align:right}.fc-time-area .fc-slats{position:absolute;z-index:1;top:0;left:0;right:0;bottom:0}.fc-time-area .fc-slats table{height:100%}.fc-time-area .fc-slats .fc-minor{border-style:dotted}.fc-time-area .fc-slats td{border-width:0 1px}.fc-ltr .fc-time-area .fc-slats td{border-right-width:0}.fc-rtl .fc-time-area .fc-slats td{border-left-width:0}.fc-time-area .fc-bgevent-container,.fc-time-area .fc-highlight-container{position:absolute;z-index:2;top:0;bottom:0;width:0}.fc-ltr .fc-time-area .fc-bgevent-container,.fc-ltr .fc-time-area .fc-highlight-container,.fc-ltr .fc-time-area .fc-mirror-container{left:0}.fc-rtl .fc-time-area .fc-bgevent-container,.fc-rtl .fc-time-area .fc-highlight-container,.fc-rtl .fc-time-area .fc-mirror-container{right:0}.fc-time-area .fc-bgevent,.fc-time-area .fc-highlight{position:absolute;top:0;bottom:0}.fc-timeline .fc-now-indicator{z-index:3;top:0}.fc-time-area .fc-now-indicator-arrow{margin:0 -6px;border-width:6px 5px 0;border-left-color:transparent;border-right-color:transparent}.fc-time-area .fc-now-indicator-line{margin:0 -1px;bottom:0;border-left-width:1px}.fc-time-area .fc-event-container{position:relative;z-index:2;width:0}.fc-time-area .fc-mirror-container{position:absolute;z-index:3;top:0}.fc-time-area .fc-event-container{padding-bottom:8px;top:-1px}.fc-time-area tr:first-child .fc-event-container{top:0}.fc-no-overlap .fc-time-area .fc-event-container{padding-bottom:0;top:0}.fc-timeline-event{position:absolute;display:flex;border-radius:0;padding:2px 1px;margin-bottom:1px}.fc-no-overlap .fc-timeline-event{padding-top:5px;padding-bottom:5px;margin-bottom:0}.fc-ltr .fc-timeline-event{flex-direction:row;margin-right:1px}.fc-rtl .fc-timeline-event{margin-left:1px}.fc-timeline-event .fc-time-wrap{flex-shrink:0;min-width:0}.fc-timeline-event .fc-title-wrap{flex-grow:1;min-width:0}.fc-timeline-event .fc-time,.fc-timeline-event .fc-title{display:inline-block;vertical-align:top;max-width:100%;padding:0 2px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;white-space:nowrap;overflow:hidden}.fc-timeline-event .fc-time{font-weight:700}.fc-timeline-event.fc-not-end:after,.fc-timeline-event.fc-not-start:before{content:"";align-self:center;width:0;height:0;margin:0 1px;border:5px solid #000;border-top-color:transparent;border-bottom-color:transparent;opacity:.5}.fc-ltr .fc-timeline-event.fc-not-start:before,.fc-rtl .fc-timeline-event.fc-not-end:after{border-left:0}.fc-ltr .fc-timeline-event.fc-not-end:after,.fc-rtl .fc-timeline-event.fc-not-start:before{border-right:0}

/* Scroller
--------------------------------------------------------------------------------------------------*/
.fc-scroller-clip {
  overflow: hidden;
  /* for clipping scrollbars */
  position: relative;
  /* so things like scrollfollowers can attach to this */
}

/* supresses rendering of native scrollbars */
/* on .fc-scroller */
.fc-no-scrollbars {
background: rgba(255, 255, 255, 0);
/* hack for dynamic DOM nodes (in Chrome OSX at least) */
}

.fc-no-scrollbars::-webkit-scrollbar {
width: 0;
height: 0;
}

.fc-scroller-canvas {
  position: relative;
  /* origin for bg */
  box-sizing: border-box;
  /* so that padding (for gutter) will be part of height */
  min-height: 100%;
}

.fc-scroller-canvas > .fc-bg {
z-index: 1;
/* make default? */
}

.fc-scroller-canvas > .fc-content {
  z-index: 2;
  /* make default? */
  position: relative;
  /* origin for inner content */
  border-style: solid;
  border-width: 0;
}

.fc-scroller-canvas.fc-gutter-left > .fc-content {
border-left-width: 1px;
margin-left: -1px;
}

.fc-scroller-canvas.fc-gutter-right > .fc-content {
border-right-width: 1px;
margin-right: -1px;
}

.fc-scroller-canvas.fc-gutter-top > .fc-content {
border-top-width: 1px;
margin-top: -1px;
}

/* content is responsible for bottom border */
/* View Structure
--------------------------------------------------------------------------------------------------*/
.fc-rtl .fc-timeline {
direction: rtl;
}

.fc-scrolled .fc-head .fc-scroller {
z-index: 2;
/* so drop shadow will go above body panes */
}

.fc-timeline.fc-scrolled .fc-head .fc-scroller {
box-shadow: 0 3px 4px rgba(0, 0, 0, 0.075);
}

.fc-timeline .fc-body .fc-scroller {
z-index: 1;
}

/*
on most tables that expand to the edges, kill the outer border,
because the container elements take care of it.
example tables:
.fc-scroller-canvas .fc-content table
.fc-scroller-canvas .fc-bg .fc-slats table
*/
.fc-timeline .fc-scroller-canvas > div > table,
.fc-timeline .fc-scroller-canvas > div > div > table {
border-style: hidden;
}

/*
for resource rows (in both the spreadsheet and timeline areas),
undo previous rule in order to always show last border.
*/
.fc-timeline .fc-scroller-canvas > .fc-content > .fc-rows > table {
border-bottom-style: none;
}

/* Table Cell Common
--------------------------------------------------------------------------------------------------*/
.fc-timeline th,
.fc-timeline td {
white-space: nowrap;
}

.fc-timeline .fc-cell-content {
overflow: hidden;
}

.fc-timeline .fc-cell-text {
  display: inline-block;
  padding-left: 4px;
  padding-right: 4px;
}

/*
Cells at the start of a week
TODO: figure out better styling

.fc-ltr .fc-timeline .fc-em-cell div {
  border-left: 3px solid #eee;
  height: 100%;
}
.fc-rtl .fc-timeline .fc-em-cell {
  border-right-width: 3px;
}
*/
/* head */
.fc-timeline th {
  vertical-align: middle;
}

.fc-timeline .fc-head .fc-cell-content {
padding-top: 3px;
padding-bottom: 3px;
}

.fc-timeline .fc-head .fc-time-area .fc-cell-content {
overflow: visible;
}

/* Time Area
--------------------------------------------------------------------------------------------------*/
.fc-time-area col {
min-width: 2.2em;
/* detected by JS */
}

/* head */
.fc-ltr .fc-time-area .fc-chrono th {
text-align: left;
}

.fc-rtl .fc-time-area .fc-chrono th {
text-align: right;
}

/* body slats (vertical lines) */
.fc-time-area .fc-slats {
  /* fc-bg is responsible for a lot of this now! */
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.fc-time-area .fc-slats table {
height: 100%;
}

.fc-time-area .fc-slats .fc-minor {
border-style: dotted;
}

.fc-time-area .fc-slats td {
border-width: 0 1px;
/* need to do this. sometimes -1 margin wouldn't hide the dotted */
}

.fc-ltr .fc-time-area .fc-slats td {
border-right-width: 0;
}

.fc-rtl .fc-time-area .fc-slats td {
border-left-width: 0;
}

/* body content containers
   can be within rows or directly within the pane's content
*/
.fc-time-area .fc-bgevent-container,
.fc-time-area .fc-highlight-container {
  position: absolute;
  z-index: 2;
  /* only for directly within pane. not for row. overridden later */
  top: 0;
  bottom: 0;
  width: 0;
}

.fc-ltr .fc-time-area .fc-mirror-container,
.fc-ltr .fc-time-area .fc-bgevent-container,
.fc-ltr .fc-time-area .fc-highlight-container {
left: 0;
}

.fc-rtl .fc-time-area .fc-mirror-container,
.fc-rtl .fc-time-area .fc-bgevent-container,
.fc-rtl .fc-time-area .fc-highlight-container {
right: 0;
}

.fc-time-area .fc-bgevent,
.fc-time-area .fc-highlight {
  position: absolute;
  top: 0;
  bottom: 0;
}

/* Now Indicator
--------------------------------------------------------------------------------------------------*/
.fc-timeline .fc-now-indicator {
  /* both the arrow and the line */
  z-index: 3;
  /* one above scroller's fc-content */
  top: 0;
}

.fc-time-area .fc-now-indicator-arrow {
  margin: 0 -6px;
  /* 5, then one more to counteract scroller's negative margins */
  /* triangle pointing down... */
  border-width: 6px 5px 0 5px;
  border-left-color: transparent;
  border-right-color: transparent;
}

.fc-time-area .fc-now-indicator-line {
  margin: 0 -1px;
  /* counteract scroller's negative margins */
  bottom: 0;
  border-left-width: 1px;
}

/* Event Container
--------------------------------------------------------------------------------------------------*/
.fc-time-area .fc-event-container {
  position: relative;
  z-index: 2;
  /* above bgevent and highlight */
  width: 0;
  /* for event positioning. will end up on correct side based on dir */
}

.fc-time-area .fc-mirror-container {
  /* also an fc-event-container */
  position: absolute;
  z-index: 3;
  top: 0;
}

.fc-time-area .fc-event-container {
padding-bottom: 8px;
top: -1px;
}

.fc-time-area tr:first-child .fc-event-container {
top: 0;
}

.fc-no-overlap .fc-time-area .fc-event-container {
padding-bottom: 0;
top: 0;
}

/* Time Grid Events
--------------------------------------------------------------------------------------------------*/
.fc-timeline-event {
  position: absolute;
  display: flex;
  border-radius: 0;
  padding: 2px 1px;
  margin-bottom: 1px;
}

.fc-no-overlap .fc-timeline-event {
  padding-top: 5px;
  padding-bottom: 5px;
  margin-bottom: 0;
}

.fc-ltr .fc-timeline-event {
flex-direction: row;
margin-right: 1px;
}

.fc-rtl .fc-timeline-event {
margin-left: 1px;
}

.fc-timeline-event .fc-time-wrap {
flex-shrink: 0;
min-width: 0;
}

.fc-timeline-event .fc-title-wrap {
flex-grow: 1;
min-width: 0;
}

.fc-timeline-event .fc-time,
.fc-timeline-event .fc-title {
  display: inline-block;
  vertical-align: top;
  max-width: 100%;
  padding: 0 2px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
}

.fc-timeline-event .fc-time {
font-weight: bold;
}

.fc-timeline-event.fc-not-start:before,
.fc-timeline-event.fc-not-end:after {
  content: "";
  align-self: center;
  width: 0;
  height: 0;
  margin: 0 1px;
  border: 5px solid #000;
  border-top-color: transparent;
  border-bottom-color: transparent;
  opacity: 0.5;
}

.fc-ltr .fc-timeline-event.fc-not-start:before,
.fc-rtl .fc-timeline-event.fc-not-end:after {
border-left: 0;
}

.fc-ltr .fc-timeline-event.fc-not-end:after,
.fc-rtl .fc-timeline-event.fc-not-start:before {
border-right: 0;
}

.fc-timeline .fc-divider{width:3px;border-style:double}.fc-timeline .fc-head>tr>.fc-divider{border-bottom:0}.fc-timeline .fc-body>tr>.fc-divider{border-top:0}.fc-resource-area{width:30%}.fc-resource-area col{width:40%;min-width:70px}.fc-resource-area col.fc-main-col{width:60%}.fc-flat .fc-expander-space{display:none}.fc-ltr .fc-resource-area tr>*{text-align:left}.fc-rtl .fc-resource-area tr>*{text-align:right}.fc-resource-area .fc-cell-content{padding-left:4px;padding-right:4px}.fc-resource-area .fc-super th{text-align:center}.fc-resource-area th>div{position:relative}.fc-resource-area th .fc-cell-content{position:relative;z-index:1}.fc-resource-area th .fc-col-resizer{position:absolute;z-index:2;top:0;bottom:0;width:5px}.fc-timeline .fc-col-resizer{cursor:col-resize}.fc-ltr .fc-resource-area th .fc-col-resizer{right:-3px}.fc-rtl .fc-resource-area th .fc-col-resizer{left:-3px}.fc-body .fc-resource-area .fc-cell-content{padding-top:8px;padding-bottom:8px}.fc-no-overlap .fc-body .fc-resource-area .fc-cell-content{padding-top:6px;padding-bottom:6px}.fc-resource-area .fc-icon{display:inline-block;width:1em;text-align:center}.fc-resource-area .fc-expander{cursor:pointer;opacity:.65}.fc-time-area .fc-rows{position:relative;z-index:3}.fc-time-area .fc-rows td>div{position:relative}.fc-time-area .fc-rows .fc-bgevent-container,.fc-time-area .fc-rows .fc-highlight-container{z-index:1}

/* Divider between resources and time area
--------------------------------------------------------------------------------------------------*/
.fc-timeline .fc-divider {
  width: 3px;
  border-style: double;
  /* overcome neighboring borders */
}

.fc-timeline .fc-head > tr > .fc-divider {
border-bottom: 0;
}

.fc-timeline .fc-body > tr > .fc-divider {
border-top: 0;
}

/* Resource Area
--------------------------------------------------------------------------------------------------*/
.fc-resource-area {
width: 30%;
}

.fc-resource-area col {
  width: 40%;
  min-width: 70px;
  /* will be read by JS */
}

.fc-resource-area col.fc-main-col {
width: 60%;
/* make the first column in a nested setup bigger */
}

.fc-flat .fc-expander-space {
/* fc-flat is opposite of fc-nested */
display: none;
}

.fc-ltr .fc-resource-area tr > * {
text-align: left;
}

.fc-rtl .fc-resource-area tr > * {
text-align: right;
}

.fc-resource-area .fc-cell-content {
padding-left: 4px;
padding-right: 4px;
}

/* head */
.fc-resource-area .fc-super th {
text-align: center;
}

.fc-resource-area th > div {
position: relative;
}

.fc-resource-area th .fc-cell-content {
position: relative;
z-index: 1;
}

.fc-resource-area th .fc-col-resizer {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  width: 5px;
}

.fc-timeline .fc-col-resizer {
cursor: col-resize;
}

.fc-ltr .fc-resource-area th .fc-col-resizer {
right: -3px;
}

.fc-rtl .fc-resource-area th .fc-col-resizer {
left: -3px;
}

/* body */
.fc-body .fc-resource-area .fc-cell-content {
  /* might BE the cell */
  padding-top: 8px;
  padding-bottom: 8px;
}

.fc-no-overlap .fc-body .fc-resource-area .fc-cell-content {
  /* might BE the cell */
  padding-top: 6px;
  padding-bottom: 6px;
}

.fc-resource-area .fc-icon {
  /* the expander and spacers before the expander */
  display: inline-block;
  width: 1em;
  /* ensure constant width, esp for empty icons */
  text-align: center;
}

.fc-resource-area .fc-expander {
cursor: pointer;
opacity: 0.65;
}

/* body resource rows */
.fc-time-area .fc-rows {
position: relative;
z-index: 3;
}

.fc-time-area .fc-rows td > div {
position: relative;
}

.fc-time-area .fc-rows .fc-bgevent-container,
.fc-time-area .fc-rows .fc-highlight-container {
z-index: 1;
}

.fc.fc-bootstrap a{text-decoration:none}.fc.fc-bootstrap a[data-goto]:hover{text-decoration:underline}.fc-bootstrap hr.fc-divider{border-color:inherit}.fc-bootstrap .fc-today.alert{border-radius:0}.fc-bootstrap a.fc-event:not([href]):not([tabindex]){color:#fff}.fc-bootstrap .fc-popover.card{position:absolute}.fc-bootstrap .fc-popover .card-body{padding:0}.fc-bootstrap .fc-time-grid .fc-slats table{background:0 0}

.fc.fc-bootstrap a {
text-decoration: none;
}

.fc.fc-bootstrap a[data-goto]:hover {
text-decoration: underline;
}

.fc-bootstrap hr.fc-divider {
border-color: inherit;
}

.fc-bootstrap .fc-today.alert {
border-radius: 0;
}

.fc-bootstrap a.fc-event:not([href]):not([tabindex]) {
color: #fff;
}

.fc-bootstrap .fc-popover.card {
position: absolute;
}

/* Popover
--------------------------------------------------------------------------------------------------*/
.fc-bootstrap .fc-popover .card-body {
padding: 0;
}

/* TimeGrid Slats (lines that run horizontally)
--------------------------------------------------------------------------------------------------*/
.fc-bootstrap .fc-time-grid .fc-slats table {
/* some themes have background color. see through to slats */
background: none;
}

// Place all the styles related to the email_templates controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

//= link_tree ../images
//= link_tree ../audios
//= link_directory ../javascripts .js
//= link_directory ../stylesheets .css
//= link application.js
//= link_tree ../builds

Error reading file: wrong argument type nil (expected String)

      CS

      SM

Error reading file: wrong argument type nil (expected String)

      .cls-1 {        fill: #1f1e1e;      }    

      .cls-1 {        fill: #3ddc84;      }    

Error reading file: wrong argument type nil (expected String)

   <![CDATA[
    .fil1 {fill:#FEFEFE}
    .fil0 {fill:#373435}
   ]]>
  

Error reading file: wrong argument type nil (expected String)

/*! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}html{-webkit-text-size-adjust:100%;font-feature-settings:normal;font-family:Inter var,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}::-webkit-datetime-edit,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-meridiem-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-year-field{padding-bottom:0;padding-top:0}select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;-webkit-print-color-adjust:exact;print-color-adjust:exact}[type=checkbox]:checked,[type=radio]:checked{background-color:currentColor;background-position:50%;background-repeat:no-repeat;background-size:100% 100%;border-color:#0000}[type=checkbox]:checked{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E")}[type=checkbox]:checked:focus,[type=checkbox]:checked:hover,[type=radio]:checked:focus,[type=radio]:checked:hover{background-color:currentColor;border-color:#0000}[type=checkbox]:indeterminate{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3E%3C/svg%3E");background-size:100% 100%}[type=file]:focus{outline:1px solid ButtonText;outline:1px auto -webkit-focus-ring-color}.tooltip-arrow,.tooltip-arrow:before{background:inherit;height:8px;position:absolute;width:8px}.tooltip-arrow{visibility:hidden}.tooltip-arrow:before{content:"";transform:rotate(45deg);visibility:visible}[data-tooltip-style^=light]+.tooltip>.tooltip-arrow:before{border-color:#e5e7eb;border-style:solid}[data-tooltip-style^=light]+.tooltip[data-popper-placement^=top]>.tooltip-arrow:before{border-bottom-width:1px;border-right-width:1px}[data-tooltip-style^=light]+.tooltip[data-popper-placement^=right]>.tooltip-arrow:before{border-bottom-width:1px;border-left-width:1px}[data-tooltip-style^=light]+.tooltip[data-popper-placement^=bottom]>.tooltip-arrow:before{border-left-width:1px;border-top-width:1px}[data-tooltip-style^=light]+.tooltip[data-popper-placement^=left]>.tooltip-arrow:before{border-right-width:1px;border-top-width:1px}.tooltip[data-popper-placement^=top]>.tooltip-arrow{bottom:-4px}.tooltip[data-popper-placement^=bottom]>.tooltip-arrow{top:-4px}.tooltip[data-popper-placement^=left]>.tooltip-arrow{right:-4px}.tooltip[data-popper-placement^=right]>.tooltip-arrow{left:-4px}.tooltip.invisible>.tooltip-arrow:before{visibility:hidden}[data-popper-arrow],[data-popper-arrow]:before{background:inherit;height:8px;position:absolute;width:8px}[data-popper-arrow]{visibility:hidden}[data-popper-arrow]:after,[data-popper-arrow]:before{content:"";transform:rotate(45deg);visibility:visible}[data-popper-arrow]:after{background:inherit;height:9px;position:absolute;width:9px}[role=tooltip]>[data-popper-arrow]:before{border-color:#e5e7eb;border-style:solid}.dark [role=tooltip]>[data-popper-arrow]:before{border-color:#4b5563;border-style:solid}[role=tooltip]>[data-popper-arrow]:after{border-color:#e5e7eb;border-style:solid}.dark [role=tooltip]>[data-popper-arrow]:after{border-color:#4b5563;border-style:solid}[data-popover][role=tooltip][data-popper-placement^=top]>[data-popper-arrow]:after,[data-popover][role=tooltip][data-popper-placement^=top]>[data-popper-arrow]:before{border-bottom-width:1px;border-right-width:1px}[data-popover][role=tooltip][data-popper-placement^=right]>[data-popper-arrow]:after,[data-popover][role=tooltip][data-popper-placement^=right]>[data-popper-arrow]:before{border-bottom-width:1px;border-left-width:1px}[data-popover][role=tooltip][data-popper-placement^=bottom]>[data-popper-arrow]:after,[data-popover][role=tooltip][data-popper-placement^=bottom]>[data-popper-arrow]:before{border-left-width:1px;border-top-width:1px}[data-popover][role=tooltip][data-popper-placement^=left]>[data-popper-arrow]:after,[data-popover][role=tooltip][data-popper-placement^=left]>[data-popper-arrow]:before{border-right-width:1px;border-top-width:1px}[data-popover][role=tooltip][data-popper-placement^=top]>[data-popper-arrow]{bottom:-5px}[data-popover][role=tooltip][data-popper-placement^=bottom]>[data-popper-arrow]{top:-5px}[data-popover][role=tooltip][data-popper-placement^=left]>[data-popper-arrow]{right:-5px}[data-popover][role=tooltip][data-popper-placement^=right]>[data-popper-arrow]{left:-5px}[role=tooltip].invisible>[data-popper-arrow]:after,[role=tooltip].invisible>[data-popper-arrow]:before{visibility:hidden}[multiple],[type=date],[type=datetime-local],[type=email],[type=month],[type=number],[type=password],[type=search],[type=tel],[type=text],[type=time],[type=url],[type=week],select,textarea{--tw-shadow:0 0 #0000;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#6b7280;border-radius:0;border-width:1px;font-size:1rem;line-height:1.5rem;padding:.5rem .75rem}[multiple]:focus,[type=date]:focus,[type=datetime-local]:focus,[type=email]:focus,[type=month]:focus,[type=number]:focus,[type=password]:focus,[type=search]:focus,[type=tel]:focus,[type=text]:focus,[type=time]:focus,[type=url]:focus,[type=week]:focus,select:focus,textarea:focus{--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#1c64f2;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);border-color:#1c64f2;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);outline:2px solid #0000;outline-offset:2px}input::-moz-placeholder,textarea::-moz-placeholder{color:#6b7280;opacity:1}input::placeholder,textarea::placeholder{color:#6b7280;opacity:1}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-date-and-time-value{min-height:1.5em}select:not([size]){background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' aria-hidden='true' viewBox='0 0 10 6'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 1 4 4 4-4'/%3E%3C/svg%3E");background-position:right .75rem center;background-repeat:no-repeat;background-size:.75em .75em;padding-right:2.5rem;-webkit-print-color-adjust:exact;print-color-adjust:exact}:is([dir=rtl]) select:not([size]){background-position:left .75rem center;padding-left:0;padding-right:.75rem}[multiple]{background-image:none;background-position:0 0;background-repeat:unset;background-size:initial;padding-right:.75rem;-webkit-print-color-adjust:unset;print-color-adjust:unset}[type=checkbox],[type=radio]{--tw-shadow:0 0 #0000;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;background-origin:border-box;border-color:#6b7280;border-width:1px;color:#1c64f2;display:inline-block;flex-shrink:0;height:1rem;padding:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:1rem}[type=checkbox]{border-radius:0}[type=radio]{border-radius:100%}[type=checkbox]:focus,[type=radio]:focus{--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:2px;--tw-ring-offset-color:#fff;--tw-ring-color:#1c64f2;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);outline:2px solid #0000;outline-offset:2px}.dark [type=checkbox]:checked,.dark [type=radio]:checked,[type=checkbox]:checked,[type=radio]:checked{background-color:currentColor;background-position:50%;background-repeat:no-repeat;background-size:.55em .55em;border-color:#0000}[type=checkbox]:checked{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' aria-hidden='true' viewBox='0 0 16 12'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M1 5.917 5.724 10.5 15 1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:.55em .55em;-webkit-print-color-adjust:exact;print-color-adjust:exact}.dark [type=radio]:checked,[type=radio]:checked{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E");background-size:1em 1em}[type=checkbox]:indeterminate{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' aria-hidden='true' viewBox='0 0 16 12'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M.5 6h14'/%3E%3C/svg%3E");background-position:50%;background-repeat:no-repeat;background-size:.55em .55em;-webkit-print-color-adjust:exact;print-color-adjust:exact}[type=checkbox]:indeterminate,[type=checkbox]:indeterminate:focus,[type=checkbox]:indeterminate:hover{background-color:currentColor;border-color:#0000}[type=file]{background:unset;border-color:inherit;border-radius:0;border-width:0;font-size:unset;line-height:inherit;padding:0}[type=file]:focus{outline:1px auto inherit}input[type=file]::file-selector-button{-webkit-margin-start:-1rem;-webkit-margin-end:1rem;background:#1f2937;border:0;color:#fff;cursor:pointer;font-size:.875rem;font-weight:500;margin-inline-end:1rem;margin-inline-start:-1rem;padding:.625rem 1rem .625rem 2rem}input[type=file]::file-selector-button:hover{background:#374151}:is([dir=rtl]) input[type=file]::file-selector-button{padding-left:1rem;padding-right:2rem}.dark input[type=file]::file-selector-button{background:#4b5563;color:#fff}.dark input[type=file]::file-selector-button:hover{background:#6b7280}input[type=range]::-webkit-slider-thumb{appearance:none;-moz-appearance:none;-webkit-appearance:none;background:#1c64f2;border:0;border-radius:9999px;cursor:pointer;height:1.25rem;width:1.25rem}input[type=range]:disabled::-webkit-slider-thumb{background:#9ca3af}.dark input[type=range]:disabled::-webkit-slider-thumb{background:#6b7280}input[type=range]:focus::-webkit-slider-thumb{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-opacity:1px;--tw-ring-color:rgb(164 202 254/var(--tw-ring-opacity));box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);outline:2px solid #0000;outline-offset:2px}input[type=range]::-moz-range-thumb{appearance:none;-moz-appearance:none;-webkit-appearance:none;background:#1c64f2;border:0;border-radius:9999px;cursor:pointer;height:1.25rem;width:1.25rem}input[type=range]:disabled::-moz-range-thumb{background:#9ca3af}.dark input[type=range]:disabled::-moz-range-thumb{background:#6b7280}input[type=range]::-moz-range-progress{background:#3f83f8}input[type=range]::-ms-fill-lower{background:#3f83f8}.toggle-bg:after{background:#fff;border-color:#d1d5db;border-radius:9999px;border-width:1px;box-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color);content:"";height:1.25rem;left:.125rem;position:absolute;top:.125rem;transition-duration:.15s;transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;width:1.25rem}input:checked+.toggle-bg:after{border-color:#fff;transform:translateX(100%);}input:checked+.toggle-bg{background:#1c64f2;border-color:#1c64f2}*,::backdrop,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3f83f880;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.aspect-h-9{--tw-aspect-h:9}.aspect-w-16{--tw-aspect-w:16;padding-bottom:calc(var(--tw-aspect-h)/var(--tw-aspect-w)*100%);position:relative}.aspect-w-16>*{bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}.sr-only{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.invisible{visibility:hidden}.collapse{visibility:collapse}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.-top-1{top:-.25rem}.-top-1\.5{top:-.375rem}.bottom-0{bottom:0}.bottom-20{bottom:5rem}.bottom-24{bottom:6rem}.bottom-4{bottom:1rem}.bottom-\[60px\]{bottom:60px}.left-0{left:0}.left-1\/2{left:50%}.left-4{left:1rem}.right-0{right:0}.right-4{right:1rem}.right-6{right:1.5rem}.top-0{top:0}.top-1\/2{top:50%}.top-4{top:1rem}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-40{z-index:40}.z-50{z-index:50}.col-auto{grid-column:auto}.float-right{float:right}.m-0{margin:0}.m-1{margin:.25rem}.m-2{margin:.5rem}.m-3{margin:.75rem}.m-5{margin:1.25rem}.mx-1{margin-left:.25rem;margin-right:.25rem}.mx-2{margin-left:.5rem;margin-right:.5rem}.mx-4{margin-left:1rem;margin-right:1rem}.mx-auto{margin-left:auto;margin-right:auto}.my-0{margin-bottom:0;margin-top:0}.my-2{margin-bottom:.5rem;margin-top:.5rem}.my-3{margin-bottom:.75rem;margin-top:.75rem}.my-4{margin-bottom:1rem;margin-top:1rem}.my-5{margin-bottom:1.25rem;margin-top:1.25rem}.-ml-1{margin-left:-.25rem}.-mt-20{margin-top:-5rem}.-mt-4{margin-top:-1rem}.mb-0{margin-bottom:0}.mb-1{margin-bottom:.25rem}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mb-16{margin-bottom:4rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.me-2{-webkit-margin-end:.5rem;margin-inline-end:.5rem}.ml-1{margin-left:.25rem}.ml-10{margin-left:2.5rem}.ml-2{margin-left:.5rem}.ml-3{margin-left:.75rem}.ml-4{margin-left:1rem}.ml-8{margin-left:2rem}.ml-auto{margin-left:auto}.mr-0{margin-right:0}.mr-1{margin-right:.25rem}.mr-1\.5{margin-right:.375rem}.mr-2{margin-right:.5rem}.mr-3{margin-right:.75rem}.mr-4{margin-right:1rem}.mr-auto{margin-right:auto}.mt-1{margin-top:.25rem}.mt-10{margin-top:2.5rem}.mt-12{margin-top:3rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.mt-auto{margin-top:auto}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.table{display:table}.table-column{display:table-column}.grid{display:grid}.contents{display:contents}.hidden{display:none}.h-1{height:.25rem}.h-10{height:2.5rem}.h-12{height:3rem}.h-14{height:3.5rem}.h-16{height:4rem}.h-24{height:6rem}.h-3{height:.75rem}.h-3\.5{height:.875rem}.h-32{height:8rem}.h-4{height:1rem}.h-48{height:12rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-64{height:16rem}.h-8{height:2rem}.h-80{height:20rem}.h-9{height:2.25rem}.h-96{height:24rem}.h-\[576px\]{height:576px}.h-auto{height:auto}.h-full{height:100%}.max-h-0{max-height:0}.max-h-\[32px\]{max-height:32px}.max-h-\[40px\]{max-height:40px}.max-h-screen{max-height:100vh}.min-h-\[128px\]{min-height:128px}.min-h-screen{min-height:100vh}.w-1\/2{width:50%}.w-10{width:2.5rem}.w-10\/12{width:83.333333%}.w-12{width:3rem}.w-16{width:4rem}.w-20{width:5rem}.w-3{width:.75rem}.w-3\.5{width:.875rem}.w-4{width:1rem}.w-4\/12{width:33.333333%}.w-44{width:11rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-6\/12{width:50%}.w-64{width:16rem}.w-8{width:2rem}.w-\[480px\]{width:480px}.w-auto{width:auto}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.w-max{width:-moz-max-content;width:max-content}.min-w-\[10rem\]{min-width:10rem}.min-w-\[12rem\]{min-width:12rem}.min-w-\[14rem\]{min-width:14rem}.min-w-\[200px\]{min-width:200px}.min-w-\[640px\]{min-width:640px}.min-w-\[6rem\]{min-width:6rem}.min-w-\[7rem\]{min-width:7rem}.min-w-full{min-width:100%}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-7xl{max-width:80rem}.max-w-\[32px\]{max-width:32px}.max-w-\[40px\]{max-width:40px}.max-w-full{max-width:100%}.max-w-md{max-width:28rem}.max-w-screen-2xl{max-width:1536px}.max-w-screen-md{max-width:768px}.flex-1{flex:1 1 0%}.flex-shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.flex-grow{flex-grow:1}.table-auto{table-layout:auto}.border-collapse{border-collapse:collapse}.-translate-x-1\/2{--tw-translate-x:-50%}.-translate-x-1\/2,.-translate-x-6{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-x-6{--tw-translate-x:-1.5rem}.-translate-x-full{--tw-translate-x:-100%}.-translate-x-full,.-translate-y-1\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\/2{--tw-translate-y:-50%}.-translate-y-8{--tw-translate-y:-2rem}.-translate-y-8,.-translate-y-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-full{--tw-translate-y:-100%}.translate-x-0{--tw-translate-x:0px}.translate-x-0,.translate-x-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-full{--tw-translate-x:100%}.translate-y-0{--tw-translate-y:0px}.translate-y-0,.translate-y-1\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-1\/2{--tw-translate-y:50%}.translate-y-\[-100\%\]{--tw-translate-y:-100%}.translate-y-\[-100\%\],.translate-y-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-full{--tw-translate-y:100%}.rotate-180{--tw-rotate:180deg}.rotate-180,.rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-45{--tw-rotate:45deg}.scale-100{--tw-scale-x:1;--tw-scale-y:1}.scale-100,.scale-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-90{--tw-scale-x:.9;--tw-scale-y:.9}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform-none{transform:none}.cursor-default{cursor:default}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.resize-none{resize:none}.resize{resize:both}.list-inside{list-style-position:inside}.list-decimal{list-style-type:decimal}.list-disc{list-style-type:disc}.appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-wrap{flex-wrap:wrap}.place-items-center{place-items:center}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.gap-1{gap:.25rem}.gap-10{gap:2.5rem}.gap-12{gap:3rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-x-6{-moz-column-gap:1.5rem;column-gap:1.5rem}.gap-x-8{-moz-column-gap:2rem;column-gap:2rem}.gap-y-10{row-gap:2.5rem}.gap-y-2{row-gap:.5rem}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.5rem*var(--tw-space-x-reverse))}.space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.75rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.75rem*var(--tw-space-x-reverse))}.space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(1rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(1rem*var(--tw-space-x-reverse))}.space-x-5>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(1.25rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(1.25rem*var(--tw-space-x-reverse))}.space-x-8>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(2rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(2rem*var(--tw-space-x-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.5rem*var(--tw-space-y-reverse));margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.75rem*var(--tw-space-y-reverse));margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(1rem*var(--tw-space-y-reverse));margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(1.5rem*var(--tw-space-y-reverse));margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-bottom-width:calc(1px*var(--tw-divide-y-reverse));border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)))}.divide-gray-100>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(243 244 246/var(--tw-divide-opacity))}.self-start{align-self:flex-start}.self-end{align-self:flex-end}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.overflow-x-scroll{overflow-x:scroll}.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:.25rem}.rounded-\[7px\]{border-radius:7px}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-sm{border-radius:.125rem}.rounded-xl{border-radius:.75rem}.rounded-e-lg{border-end-end-radius:.5rem;border-start-end-radius:.5rem}.rounded-l-lg{border-bottom-left-radius:.5rem;border-top-left-radius:.5rem}.rounded-r-lg{border-bottom-right-radius:.5rem;border-top-right-radius:.5rem}.rounded-s-lg{border-end-start-radius:.5rem;border-start-start-radius:.5rem}.rounded-t-2xl{border-top-left-radius:1rem;border-top-right-radius:1rem}.rounded-bl-full{border-bottom-left-radius:9999px}.rounded-br-lg{border-bottom-right-radius:.5rem}.rounded-tl-full{border-top-left-radius:9999px}.rounded-tr-full{border-top-right-radius:9999px}.border{border-width:1px}.border-0{border-width:0}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-b-2{border-bottom-width:2px}.border-b-4{border-bottom-width:4px}.border-l{border-left-width:1px}.border-t{border-top-width:1px}.border-t-2{border-top-width:2px}.border-solid{border-style:solid}.border-blue-600{--tw-border-opacity:1;border-color:rgb(28 100 242/var(--tw-border-opacity))}.border-blue-700{--tw-border-opacity:1;border-color:rgb(26 86 219/var(--tw-border-opacity))}.border-gray-100{--tw-border-opacity:1;border-color:rgb(243 244 246/var(--tw-border-opacity))}.border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity))}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity))}.border-gray-700{--tw-border-opacity:1;border-color:rgb(55 65 81/var(--tw-border-opacity))}.border-green-400{--tw-border-opacity:1;border-color:rgb(49 196 141/var(--tw-border-opacity))}.border-red-400{--tw-border-opacity:1;border-color:rgb(249 128 128/var(--tw-border-opacity))}.border-transparent{border-color:#0000}.border-white{--tw-border-opacity:1;border-color:rgb(255 255 255/var(--tw-border-opacity))}.border-t-transparent{border-top-color:#0000}.bg-\[\#ff6600\]{--tw-bg-opacity:1;background-color:rgb(255 102 0/var(--tw-bg-opacity))}.bg-\[\#fff0e6\]{--tw-bg-opacity:1;background-color:rgb(255 240 230/var(--tw-bg-opacity))}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity))}.bg-blue-100{--tw-bg-opacity:1;background-color:rgb(225 239 254/var(--tw-bg-opacity))}.bg-blue-500{--tw-bg-opacity:1;background-color:rgb(63 131 248/var(--tw-bg-opacity))}.bg-blue-600{--tw-bg-opacity:1;background-color:rgb(28 100 242/var(--tw-bg-opacity))}.bg-blue-700{--tw-bg-opacity:1;background-color:rgb(26 86 219/var(--tw-bg-opacity))}.bg-blue-900{--tw-bg-opacity:1;background-color:rgb(35 56 118/var(--tw-bg-opacity))}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity))}.bg-gray-800{--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity))}.bg-gray-900{--tw-bg-opacity:1;background-color:rgb(17 24 39/var(--tw-bg-opacity))}.bg-gray-900\/50{background-color:#11182780}.bg-green-100{--tw-bg-opacity:1;background-color:rgb(222 247 236/var(--tw-bg-opacity))}.bg-green-200{--tw-bg-opacity:1;background-color:rgb(188 240 218/var(--tw-bg-opacity))}.bg-green-50{--tw-bg-opacity:1;background-color:rgb(243 250 247/var(--tw-bg-opacity))}.bg-green-500{--tw-bg-opacity:1;background-color:rgb(14 159 110/var(--tw-bg-opacity))}.bg-red-100{--tw-bg-opacity:1;background-color:rgb(253 232 232/var(--tw-bg-opacity))}.bg-red-50{--tw-bg-opacity:1;background-color:rgb(253 242 242/var(--tw-bg-opacity))}.bg-red-700{--tw-bg-opacity:1;background-color:rgb(200 30 30/var(--tw-bg-opacity))}.bg-transparent{background-color:initial}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-white\/50{background-color:#ffffff80}.bg-yellow-100{--tw-bg-opacity:1;background-color:rgb(253 246 178/var(--tw-bg-opacity))}.bg-opacity-50{--tw-bg-opacity:0.5}.bg-opacity-60{--tw-bg-opacity:0.6}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.bg-gradient-to-tr{background-image:linear-gradient(to top right,var(--tw-gradient-stops))}.from-blue-600{--tw-gradient-from:#1c64f2 var(--tw-gradient-from-position);--tw-gradient-to:#1c64f200 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-gray-100{--tw-gradient-from:#f3f4f6 var(--tw-gradient-from-position);--tw-gradient-to:#f3f4f600 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-green-600{--tw-gradient-from:#057a55 var(--tw-gradient-from-position);--tw-gradient-to:#057a5500 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-orange-600{--tw-gradient-from:#d03801 var(--tw-gradient-from-position);--tw-gradient-to:#d0380100 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-pink-600{--tw-gradient-from:#d61f69 var(--tw-gradient-from-position);--tw-gradient-to:#d61f6900 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-red-500{--tw-gradient-from:#f05252 var(--tw-gradient-from-position);--tw-gradient-to:#f0525200 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.to-blue-400{--tw-gradient-to:#76a9fa var(--tw-gradient-to-position)}.to-gray-200{--tw-gradient-to:#e5e7eb var(--tw-gradient-to-position)}.to-green-400{--tw-gradient-to:#31c48d var(--tw-gradient-to-position)}.to-orange-400{--tw-gradient-to:#ff8a4c var(--tw-gradient-to-position)}.to-pink-400{--tw-gradient-to:#f17eb8 var(--tw-gradient-to-position)}.to-red-700{--tw-gradient-to:#c81e1e var(--tw-gradient-to-position)}.bg-cover{background-size:cover}.bg-clip-border{background-clip:initial}.bg-center{background-position:50%}.bg-repeat{background-repeat:repeat}.bg-no-repeat{background-repeat:no-repeat}.fill-current{fill:currentColor}.object-cover{-o-object-fit:cover;object-fit:cover}.p-0{padding:0}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-2\.5{padding:.625rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-0{padding-left:0;padding-right:0}.px-10{padding-left:2.5rem;padding-right:2.5rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-0{padding-bottom:0;padding-top:0}.py-0\.5{padding-bottom:.125rem;padding-top:.125rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-1\.5{padding-bottom:.375rem;padding-top:.375rem}.py-10{padding-bottom:2.5rem;padding-top:2.5rem}.py-12{padding-bottom:3rem;padding-top:3rem}.py-16{padding-bottom:4rem;padding-top:4rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.py-2\.5{padding-bottom:.625rem;padding-top:.625rem}.py-20{padding-bottom:5rem;padding-top:5rem}.py-3{padding-bottom:.75rem;padding-top:.75rem}.py-4{padding-bottom:1rem;padding-top:1rem}.py-48{padding-bottom:12rem;padding-top:12rem}.py-5{padding-bottom:1.25rem;padding-top:1.25rem}.py-6{padding-bottom:1.5rem;padding-top:1.5rem}.py-8{padding-bottom:2rem;padding-top:2rem}.pb-10{padding-bottom:2.5rem}.pb-2{padding-bottom:.5rem}.pb-20{padding-bottom:5rem}.pb-3{padding-bottom:.75rem}.pb-32{padding-bottom:8rem}.pb-4{padding-bottom:1rem}.pb-5{padding-bottom:1.25rem}.pl-0{padding-left:0}.pl-20{padding-left:5rem}.pl-4{padding-left:1rem}.pr-0{padding-right:0}.pr-2{padding-right:.5rem}.pr-4{padding-right:1rem}.pt-0{padding-top:0}.pt-10{padding-top:2.5rem}.pt-2{padding-top:.5rem}.pt-20{padding-top:5rem}.pt-3{padding-top:.75rem}.pt-40{padding-top:10rem}.pt-5{padding-top:1.25rem}.pt-60{padding-top:15rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.align-middle{vertical-align:middle}.font-sans{font-family:Inter var,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-5xl{font-size:3rem;line-height:1}.text-\[11px\]{font-size:11px}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.italic{font-style:italic}.leading-6{line-height:1.5rem}.leading-9{line-height:2.25rem}.leading-none{line-height:1}.leading-normal{line-height:1.5}.leading-relaxed{line-height:1.625}.leading-snug{line-height:1.375}.leading-tight{line-height:1.25}.tracking-normal{letter-spacing:0}.text-\[\#333333\]{--tw-text-opacity:1;color:rgb(51 51 51/var(--tw-text-opacity))}.text-\[\#993d00\]{--tw-text-opacity:1;color:rgb(153 61 0/var(--tw-text-opacity))}.text-\[\#ff6600\]{--tw-text-opacity:1;color:rgb(255 102 0/var(--tw-text-opacity))}.text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity))}.text-blue-500{--tw-text-opacity:1;color:rgb(63 131 248/var(--tw-text-opacity))}.text-blue-600{--tw-text-opacity:1;color:rgb(28 100 242/var(--tw-text-opacity))}.text-blue-900{--tw-text-opacity:1;color:rgb(35 56 118/var(--tw-text-opacity))}.text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity))}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity))}.text-gray-800{--tw-text-opacity:1;color:rgb(31 41 55/var(--tw-text-opacity))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity))}.text-green-500{--tw-text-opacity:1;color:rgb(14 159 110/var(--tw-text-opacity))}.text-green-600{--tw-text-opacity:1;color:rgb(5 122 85/var(--tw-text-opacity))}.text-green-700{--tw-text-opacity:1;color:rgb(4 108 78/var(--tw-text-opacity))}.text-green-800{--tw-text-opacity:1;color:rgb(3 84 63/var(--tw-text-opacity))}.text-indigo-600{--tw-text-opacity:1;color:rgb(88 80 236/var(--tw-text-opacity))}.text-purple-500{--tw-text-opacity:1;color:rgb(144 97 249/var(--tw-text-opacity))}.text-red-500{--tw-text-opacity:1;color:rgb(240 82 82/var(--tw-text-opacity))}.text-red-600{--tw-text-opacity:1;color:rgb(224 36 36/var(--tw-text-opacity))}.text-red-700{--tw-text-opacity:1;color:rgb(200 30 30/var(--tw-text-opacity))}.text-red-800{--tw-text-opacity:1;color:rgb(155 28 28/var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.text-yellow-400{--tw-text-opacity:1;color:rgb(227 160 8/var(--tw-text-opacity))}.text-yellow-800{--tw-text-opacity:1;color:rgb(114 59 19/var(--tw-text-opacity))}.text-opacity-50{--tw-text-opacity:0.5}.text-opacity-70{--tw-text-opacity:0.7}.text-opacity-90{--tw-text-opacity:0.9}.underline{text-decoration-line:underline}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.placeholder-gray-400::-moz-placeholder{--tw-placeholder-opacity:1;color:rgb(156 163 175/var(--tw-placeholder-opacity))}.placeholder-gray-400::placeholder{--tw-placeholder-opacity:1;color:rgb(156 163 175/var(--tw-placeholder-opacity))}.opacity-0{opacity:0}.opacity-100{opacity:1}.opacity-50{opacity:.5}.shadow{--tw-shadow:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-inner{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-inner{--tw-shadow:inset 0 2px 4px 0 #0000000d;--tw-shadow-colored:inset 0 2px 4px 0 var(--tw-shadow-color)}.shadow-lg{--tw-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-lg,.shadow-md{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.shadow-none{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}.shadow-none,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.shadow-blue-500\/40{--tw-shadow-color:#3f83f866;--tw-shadow:var(--tw-shadow-colored)}.shadow-green-500\/40{--tw-shadow-color:#0e9f6e66;--tw-shadow:var(--tw-shadow-colored)}.shadow-orange-500\/40{--tw-shadow-color:#ff5a1f66;--tw-shadow:var(--tw-shadow-colored)}.shadow-pink-500\/40{--tw-shadow-color:#e7469466;--tw-shadow:var(--tw-shadow-colored)}.outline-none{outline:2px solid #0000;outline-offset:2px}.outline{outline-style:solid}.outline-0{outline-width:0}.blur{--tw-blur:blur(8px)}.blur,.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-opacity{transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-shadow{transition-duration:.15s;transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-150,.transition-transform{transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.before\:pointer-events-none:before{content:var(--tw-content);pointer-events:none}.before\:mr-1:before{content:var(--tw-content);margin-right:.25rem}.before\:mt-\[6\.5px\]:before{content:var(--tw-content);margin-top:6.5px}.before\:box-border:before{box-sizing:border-box;content:var(--tw-content)}.before\:block:before{content:var(--tw-content);display:block}.before\:h-1:before{content:var(--tw-content);height:.25rem}.before\:h-1\.5:before{content:var(--tw-content);height:.375rem}.before\:w-2:before{content:var(--tw-content);width:.5rem}.before\:w-2\.5:before{content:var(--tw-content);width:.625rem}.before\:rounded-tl-md:before{border-top-left-radius:.375rem;content:var(--tw-content)}.before\:border-l:before{border-left-width:1px;content:var(--tw-content)}.before\:border-t:before{border-top-width:1px;content:var(--tw-content)}.before\:transition-all:before{content:var(--tw-content);transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.after\:pointer-events-none:after{content:var(--tw-content);pointer-events:none}.after\:ml-1:after{content:var(--tw-content);margin-left:.25rem}.after\:mt-\[6\.5px\]:after{content:var(--tw-content);margin-top:6.5px}.after\:box-border:after{box-sizing:border-box;content:var(--tw-content)}.after\:block:after{content:var(--tw-content);display:block}.after\:h-1:after{content:var(--tw-content);height:.25rem}.after\:h-1\.5:after{content:var(--tw-content);height:.375rem}.after\:w-2:after{content:var(--tw-content);width:.5rem}.after\:w-2\.5:after{content:var(--tw-content);width:.625rem}.after\:flex-grow:after{content:var(--tw-content);flex-grow:1}.after\:rounded-tr-md:after{border-top-right-radius:.375rem;content:var(--tw-content)}.after\:border-r:after{border-right-width:1px;content:var(--tw-content)}.after\:border-t:after{border-top-width:1px;content:var(--tw-content)}.after\:transition-all:after{content:var(--tw-content);transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.placeholder-shown\:border:-moz-placeholder-shown{border-width:1px}.placeholder-shown\:border:placeholder-shown{border-width:1px}.hover\:scale-105:hover{--tw-scale-x:1.05;--tw-scale-y:1.05;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:border-blue-800:hover{--tw-border-opacity:1;border-color:rgb(30 66 159/var(--tw-border-opacity))}.hover\:border-gray-300:hover{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity))}.hover\:bg-blue-50:hover{--tw-bg-opacity:1;background-color:rgb(235 245 255/var(--tw-bg-opacity))}.hover\:bg-blue-600:hover{--tw-bg-opacity:1;background-color:rgb(28 100 242/var(--tw-bg-opacity))}.hover\:bg-blue-700:hover{--tw-bg-opacity:1;background-color:rgb(26 86 219/var(--tw-bg-opacity))}.hover\:bg-blue-800:hover{--tw-bg-opacity:1;background-color:rgb(30 66 159/var(--tw-bg-opacity))}.hover\:bg-gray-100:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.hover\:bg-gray-200:hover{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity))}.hover\:bg-gray-700:hover{--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity))}.hover\:bg-red-800:hover{--tw-bg-opacity:1;background-color:rgb(155 28 28/var(--tw-bg-opacity))}.hover\:bg-white:hover{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.hover\:bg-yellow-600:hover{--tw-bg-opacity:1;background-color:rgb(159 88 10/var(--tw-bg-opacity))}.hover\:bg-opacity-80:hover{--tw-bg-opacity:0.8}.hover\:bg-opacity-90:hover{--tw-bg-opacity:0.9}.hover\:from-red-600:hover{--tw-gradient-from:#e02424 var(--tw-gradient-from-position);--tw-gradient-to:#e0242400 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.hover\:to-red-800:hover{--tw-gradient-to:#9b1c1c var(--tw-gradient-to-position)}.hover\:text-black:hover{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity))}.hover\:text-blue-200:hover{--tw-text-opacity:1;color:rgb(195 221 253/var(--tw-text-opacity))}.hover\:text-blue-500:hover{--tw-text-opacity:1;color:rgb(63 131 248/var(--tw-text-opacity))}.hover\:text-blue-600:hover{--tw-text-opacity:1;color:rgb(28 100 242/var(--tw-text-opacity))}.hover\:text-blue-800:hover{--tw-text-opacity:1;color:rgb(30 66 159/var(--tw-text-opacity))}.hover\:text-gray-300:hover{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity))}.hover\:text-gray-600:hover{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity))}.hover\:text-gray-700:hover{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity))}.hover\:text-gray-900:hover{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity))}.hover\:text-red-400:hover{--tw-text-opacity:1;color:rgb(249 128 128/var(--tw-text-opacity))}.hover\:text-red-600:hover{--tw-text-opacity:1;color:rgb(224 36 36/var(--tw-text-opacity))}.hover\:text-red-700:hover{--tw-text-opacity:1;color:rgb(200 30 30/var(--tw-text-opacity))}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.hover\:text-opacity-70:hover{--tw-text-opacity:0.7}.hover\:underline:hover{text-decoration-line:underline}.hover\:opacity-100:hover{opacity:1}.hover\:shadow-lg:hover{--tw-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.hover\:shadow-lg:hover,.hover\:shadow-md:hover{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\:shadow-md:hover{--tw-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.focus\:z-10:focus{z-index:10}.focus\:border-2:focus{border-width:2px}.focus\:border-blue-500:focus{--tw-border-opacity:1;border-color:rgb(63 131 248/var(--tw-border-opacity))}.focus\:border-blue-600:focus{--tw-border-opacity:1;border-color:rgb(28 100 242/var(--tw-border-opacity))}.focus\:border-gray-200:focus{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity))}.focus\:border-indigo-300:focus{--tw-border-opacity:1;border-color:rgb(180 198 252/var(--tw-border-opacity))}.focus\:border-indigo-500:focus{--tw-border-opacity:1;border-color:rgb(104 117 245/var(--tw-border-opacity))}.focus\:border-transparent:focus{border-color:#0000}.focus\:border-t-transparent:focus{border-top-color:#0000}.focus\:outline-none:focus{outline:2px solid #0000;outline-offset:2px}.focus\:outline-0:focus{outline-width:0}.focus\:ring:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus\:ring-0:focus,.focus\:ring:focus{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-0:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus\:ring-2:focus,.focus\:ring-4:focus{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-4:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus\:ring-blue-300:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(164 202 254/var(--tw-ring-opacity))}.focus\:ring-blue-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(63 131 248/var(--tw-ring-opacity))}.focus\:ring-blue-700:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(26 86 219/var(--tw-ring-opacity))}.focus\:ring-gray-200:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(229 231 235/var(--tw-ring-opacity))}.focus\:ring-indigo-200:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(205 219 254/var(--tw-ring-opacity))}.focus\:ring-indigo-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(104 117 245/var(--tw-ring-opacity))}.focus\:ring-red-300:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(248 180 180/var(--tw-ring-opacity))}.focus\:ring-opacity-50:focus{--tw-ring-opacity:0.5}.focus\:ring-opacity-75:focus{--tw-ring-opacity:0.75}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:border-0:disabled{border-width:0}.disabled\:opacity-50:disabled{opacity:.5}.disabled\:shadow-none:disabled{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.peer:-moz-placeholder-shown~.peer-placeholder-shown\:text-sm{font-size:.875rem;line-height:1.25rem}.peer:placeholder-shown~.peer-placeholder-shown\:text-sm{font-size:.875rem;line-height:1.25rem}.peer:-moz-placeholder-shown~.peer-placeholder-shown\:leading-\[3\.75\]{line-height:3.75}.peer:placeholder-shown~.peer-placeholder-shown\:leading-\[3\.75\]{line-height:3.75}.peer:-moz-placeholder-shown~.peer-placeholder-shown\:text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}.peer:placeholder-shown~.peer-placeholder-shown\:text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}.peer:-moz-placeholder-shown~.peer-placeholder-shown\:before\:border-transparent:before{border-color:#0000;content:var(--tw-content)}.peer:placeholder-shown~.peer-placeholder-shown\:before\:border-transparent:before{border-color:#0000;content:var(--tw-content)}.peer:-moz-placeholder-shown~.peer-placeholder-shown\:after\:border-transparent:after{border-color:#0000;content:var(--tw-content)}.peer:placeholder-shown~.peer-placeholder-shown\:after\:border-transparent:after{border-color:#0000;content:var(--tw-content)}.peer:focus~.peer-focus\:text-\[11px\]{font-size:11px}.peer:focus~.peer-focus\:leading-tight{line-height:1.25}.peer:focus~.peer-focus\:text-blue-500{--tw-text-opacity:1;color:rgb(63 131 248/var(--tw-text-opacity))}.peer:focus~.peer-focus\:before\:border-l-2:before{border-left-width:2px;content:var(--tw-content)}.peer:focus~.peer-focus\:before\:border-t-2:before{border-top-width:2px;content:var(--tw-content)}.peer:focus~.peer-focus\:before\:border-blue-500:before{--tw-border-opacity:1;border-color:rgb(63 131 248/var(--tw-border-opacity));content:var(--tw-content)}.peer:focus~.peer-focus\:after\:border-r-2:after{border-right-width:2px;content:var(--tw-content)}.peer:focus~.peer-focus\:after\:border-t-2:after{border-top-width:2px;content:var(--tw-content)}.peer:focus~.peer-focus\:after\:border-blue-500:after{--tw-border-opacity:1;border-color:rgb(63 131 248/var(--tw-border-opacity));content:var(--tw-content)}.peer:disabled~.peer-disabled\:text-transparent{color:#0000}.peer:disabled~.peer-disabled\:after\:border-transparent:after,.peer:disabled~.peer-disabled\:before\:border-transparent:before{border-color:#0000;content:var(--tw-content)}:is([dir=rtl] .rtl\:rotate-180){--tw-rotate:180deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}:is([dir=rtl] .rtl\:space-x-reverse)>:not([hidden])~:not([hidden]){--tw-space-x-reverse:1}:is(.dark .dark\:divide-gray-600)>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(75 85 99/var(--tw-divide-opacity))}:is(.dark .dark\:border-blue-500){--tw-border-opacity:1;border-color:rgb(63 131 248/var(--tw-border-opacity))}:is(.dark .dark\:border-gray-600){--tw-border-opacity:1;border-color:rgb(75 85 99/var(--tw-border-opacity))}:is(.dark .dark\:border-gray-700){--tw-border-opacity:1;border-color:rgb(55 65 81/var(--tw-border-opacity))}:is(.dark .dark\:border-transparent){border-color:#0000}:is(.dark .dark\:bg-blue-600){--tw-bg-opacity:1;background-color:rgb(28 100 242/var(--tw-bg-opacity))}:is(.dark .dark\:bg-gray-600){--tw-bg-opacity:1;background-color:rgb(75 85 99/var(--tw-bg-opacity))}:is(.dark .dark\:bg-gray-700){--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity))}:is(.dark .dark\:bg-gray-800){--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity))}:is(.dark .dark\:bg-gray-800\/50){background-color:#1f293780}:is(.dark .dark\:bg-gray-900){--tw-bg-opacity:1;background-color:rgb(17 24 39/var(--tw-bg-opacity))}:is(.dark .dark\:bg-gray-900\/80){background-color:#111827cc}:is(.dark .dark\:bg-green-100){--tw-bg-opacity:1;background-color:rgb(222 247 236/var(--tw-bg-opacity))}:is(.dark .dark\:bg-red-100){--tw-bg-opacity:1;background-color:rgb(253 232 232/var(--tw-bg-opacity))}:is(.dark .dark\:bg-red-600){--tw-bg-opacity:1;background-color:rgb(224 36 36/var(--tw-bg-opacity))}:is(.dark .dark\:bg-yellow-100){--tw-bg-opacity:1;background-color:rgb(253 246 178/var(--tw-bg-opacity))}:is(.dark .dark\:text-blue-500){--tw-text-opacity:1;color:rgb(63 131 248/var(--tw-text-opacity))}:is(.dark .dark\:text-gray-200){--tw-text-opacity:1;color:rgb(229 231 235/var(--tw-text-opacity))}:is(.dark .dark\:text-gray-400){--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity))}:is(.dark .dark\:text-green-800){--tw-text-opacity:1;color:rgb(3 84 63/var(--tw-text-opacity))}:is(.dark .dark\:text-red-800){--tw-text-opacity:1;color:rgb(155 28 28/var(--tw-text-opacity))}:is(.dark .dark\:text-white){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}:is(.dark .dark\:text-yellow-800){--tw-text-opacity:1;color:rgb(114 59 19/var(--tw-text-opacity))}:is(.dark .dark\:ring-offset-gray-800){--tw-ring-offset-color:#1f2937}:is(.dark .dark\:hover\:bg-blue-700:hover){--tw-bg-opacity:1;background-color:rgb(26 86 219/var(--tw-bg-opacity))}:is(.dark .dark\:hover\:bg-gray-600:hover){--tw-bg-opacity:1;background-color:rgb(75 85 99/var(--tw-bg-opacity))}:is(.dark .dark\:hover\:bg-gray-700:hover){--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity))}:is(.dark .dark\:hover\:bg-gray-800:hover){--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity))}:is(.dark .dark\:hover\:bg-red-700:hover){--tw-bg-opacity:1;background-color:rgb(200 30 30/var(--tw-bg-opacity))}:is(.dark .dark\:hover\:text-blue-500:hover){--tw-text-opacity:1;color:rgb(63 131 248/var(--tw-text-opacity))}:is(.dark .dark\:hover\:text-gray-300:hover){--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity))}:is(.dark .dark\:hover\:text-white:hover){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}:is(.dark .dark\:focus\:ring-gray-700:focus){--tw-ring-opacity:1;--tw-ring-color:rgb(55 65 81/var(--tw-ring-opacity))}:is(.dark .dark\:focus\:ring-red-900:focus){--tw-ring-opacity:1;--tw-ring-color:rgb(119 29 29/var(--tw-ring-opacity))}@media (min-width:640px){.sm\:mb-0{margin-bottom:0}.sm\:mt-0{margin-top:0}.sm\:inline{display:inline}.sm\:h-36{height:9rem}.sm\:w-full{width:100%}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(1rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(1rem*var(--tw-space-x-reverse))}.sm\:space-y-0>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(0px*var(--tw-space-y-reverse));margin-top:calc(0px*(1 - var(--tw-space-y-reverse)))}.sm\:rounded-lg{border-radius:.5rem}.sm\:px-10{padding-left:2.5rem;padding-right:2.5rem}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:py-5{padding-bottom:1.25rem;padding-top:1.25rem}.sm\:py-8{padding-bottom:2rem;padding-top:2rem}.sm\:text-sm{font-size:.875rem;line-height:1.25rem}}@media (min-width:768px){.md\:col-span-2{grid-column:span 2/span 2}.md\:mb-0{margin-bottom:0}.md\:mr-4{margin-right:1rem}.md\:mr-6{margin-right:1.5rem}.md\:mt-0{margin-top:0}.md\:block{display:block}.md\:flex{display:flex}.md\:grid{display:grid}.md\:hidden{display:none}.md\:w-1\/2{width:50%}.md\:w-10\/12{width:83.333333%}.md\:w-2\/3{width:66.666667%}.md\:w-4\/12{width:33.333333%}.md\:w-56{width:14rem}.md\:w-6\/12{width:50%}.md\:w-8\/12{width:66.666667%}.md\:w-auto{width:auto}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:grid-cols-\[1fr_200px\]{grid-template-columns:1fr 200px}.md\:flex-row{flex-direction:row}.md\:items-center{align-items:center}.md\:justify-between{justify-content:space-between}.md\:gap-4{gap:1rem}.md\:space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(1rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(1rem*var(--tw-space-x-reverse))}.md\:space-y-0>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(0px*var(--tw-space-y-reverse));margin-top:calc(0px*(1 - var(--tw-space-y-reverse)))}.md\:p-8{padding:2rem}.md\:px-10{padding-left:2.5rem;padding-right:2.5rem}.md\:py-20{padding-bottom:5rem;padding-top:5rem}.md\:py-64{padding-bottom:16rem;padding-top:16rem}.md\:pb-20{padding-bottom:5rem}.md\:pb-32{padding-bottom:8rem}.md\:pb-48{padding-bottom:12rem}.md\:pl-10{padding-left:2.5rem}.md\:pl-20{padding-left:5rem}.md\:pl-48{padding-left:12rem}.md\:pl-8{padding-left:2rem}.md\:pt-20{padding-top:5rem}.md\:pt-72{padding-top:18rem}.md\:text-5xl{font-size:3rem;line-height:1}.md\:text-xl{font-size:1.25rem;line-height:1.75rem}}@media (min-width:1024px){.lg\:flex{display:flex}.lg\:w-1\/2{width:50%}.lg\:w-10\/12{width:83.333333%}.lg\:w-2\/3{width:66.666667%}.lg\:w-6\/12{width:50%}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:flex-row{flex-direction:row}.lg\:px-12{padding-left:3rem;padding-right:3rem}.lg\:px-8{padding-left:2rem;padding-right:2rem}.lg\:pl-96{padding-left:24rem}}@media (min-width:1280px){.xl\:flex{display:flex}.xl\:hidden{display:none}.xl\:w-8\/12{width:66.666667%}.xl\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.xl\:grid-cols-\[minmax$620px\2c _1fr$_minmax$min-content\2c _400px$\]{grid-template-columns:minmax(620px,1fr) minmax(min-content,400px)}.xl\:text-6xl{font-size:3.75rem;line-height:1}}

module ApplicationCable
  class Connection < ActionCable::Connection::Base
    # identified_by :current_business
    # def connect
    #   self.current_user = find_current_business
    # end

    private
      # def find_current_business
      #   if verified_user = User.find_by(id: cookies.encrypted[:user_id])
      #     verified_user
      #   else
      #     reject_unauthorized_connection
      #   end
      # end

end
end

module ApplicationCable
class Channel < ActionCable::Channel::Base
end
end

class MessagesChannel < ApplicationCable::Channel
    #To test from Rails Console: Business.first.messages.where(to: "8017973803").first.action_cable_update_messages_view_and_attach_image({})
    def subscribed
        @current_business = Business.find(params[:business_id])
        stream_for @current_business
    end

def receive(data)
end
end

// Run this example by adding <%= javascript_pack_tag 'hello_react' %> to the head of your layout file,
// like app/views/layouts/application.html.erb. All it does is render

Hello React

at the bottom
// of the page.

import React from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'

const Hello = props => (

Hello {props.name}!

)

Hello.defaultProps = {
name: 'David'
}

Hello.propTypes = {
name: PropTypes.string
}

document.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render(
    ,
    document.body.appendChild(document.createElement('div')),
  )
})

/* eslint no-console:0 */
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.
//
// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
// layout file, like app/views/layouts/application.html.erb

// Support component names relative to this directory:
var componentRequireContext = require.context("components", true)
var ReactRailsUJS = require("react_ujs")
ReactRailsUJS.useContext(componentRequireContext)
// Support component names relative to this directory:
var componentRequireContext = require.context("components", true);
var ReactRailsUJS = require("react_ujs");
ReactRailsUJS.useContext(componentRequireContext);

// By default, this pack is loaded for server-side rendering.
// It must expose react_ujs as `ReactRailsUJS` and prepare a require context.
var componentRequireContext = require.context("components", true);
var ReactRailsUJS = require("react_ujs");
ReactRailsUJS.useContext(componentRequireContext);

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

e

import React, { Component, useState, useEffect } from "react";
import ProgressBar from "../shared/ProgressBar";
import FieldRocketLogo from "../shared/FieldRocketLogo";
import FRPillButton from "../shared/Buttons/FRPillButton";
import WhatsYourNameStep from "./steps/WhatsYourNameStep";
import AskUserHighestPrioritySurveyOnRegistration from "./steps/AskUserHighestPrioritySurveyOnRegistration";
import PhoneNumberStep from "./steps/PhoneNumberStep";
import ConfirmAccessCodeStep from "./steps/ConfirmAccessCodeStep";
import DoneStep from "./steps/DoneStep";
import ArrowLeftIcon from 'images/icons/arrow-left.png'; // Adjust the path as per your directory structure
import AppleIcon from 'images/social/apple-Icon-metro.svg'; // Adjust the path as per your directory structure
import AndroidIcon from 'images/social/android-Icon-material.svg'; // Adjust the path as per your directory structure
import HowDidYouHearAboutUs from "./steps/HowDidYouHearAboutUs";

const GetStarted=() => {
    const [registrationStep, setRegistrationStep] = useState(1);
    const [titleText, setTitleText] = useState("Let's get started!");
    const [buttonText, setButtonText] = useState("Register New Account");



    //NOTE: This must match the same userOptions in the AskUserHighestPriority.jsx to make sure the server gets the right info.
    const userSurveyOptions = [
        "Invoicing & Payments", "Estimates & Closing", "Scheduling Customers", "Growth & Marketing", "Other"
    ];
    const [surveyAnswer, setSurveyAnswer] = useState(-1);

    const [freeFormSurveyAnswer, setFreeFormSurveyAnswer] = useState("");
    const [nextButtonEnabled, setNextButtonEnabled] = useState(true);

    const[ howDidYouHearAboutUsAnswer, setHowDidYouHearaboutUsAnswer] = useState("");

    const LETS_GET_STARTED_STEP = 1;
    const WHATS_YOUR_NAME_STEP = 2;
    const ASK_USER_HIGHEST_PRIORITY_SURVEY_QUESTION = 3;
    const HOW_DID_YOU_HEAR_ABOUT_US_QUESTION = 4;
    const PHONE_NUMBER_STEP = 5;
    const CONFIRM_ACCESS_CODE_STEP = 6;
    const DONE_STEP = 7;

    const [firstName, setFirstName] = useState("");
    const [businessName, setBusinessName] = useState("");
    const [email, setEmail] = useState("");
    const [phone, setPhone] = useState("");
    const [accessCode, setAccessCode] = useState("");
    const [showBackArrow, setShowBackArrow] = useState(false); // for the user to navigate back to the previous step

    // We need to make the "Next" button disabled if they need to fill out fields,
    // or if a field is incorrect (like email/phone number), etc.
    const [currentFormIsValid, setCurrentFormIsValid] = useState(true);

    const [employeeId, setEmployeeId] = useState(null);
    const [businessId, setBusinessId] = useState(null);
    // const [accessCode, setAccessCode] = useState(null);

    /**
     * Responsible for changing the title text and button text depending on what's being rendered
     */
    useEffect(() => {
        //Only let the user navigate backwards if they've gone past the first page.
        setShowBackArrow(registrationStep > 1);

        switch(registrationStep){
            case LETS_GET_STARTED_STEP:
                setTitleText("Let's get started!");
                setButtonText("Register New Account");
                setCurrentFormIsValid(true);
                break;
            case WHATS_YOUR_NAME_STEP:
                setTitleText("What's your name?");
                setButtonText("Next");
                break;
            case PHONE_NUMBER_STEP:
                setTitleText("What's Your Phone Number?");
                setCurrentFormIsValid(false);
                break;
            case CONFIRM_ACCESS_CODE_STEP:
                registerBusinessAndSendAccessCode();
                //TODO: This is where we need to attempt to do a POST.. in between these two steps.
                //TODO: This is where we will do a POST!
                setTitleText("We Just Texted You a Code.");
                break;
            case ASK_USER_HIGHEST_PRIORITY_SURVEY_QUESTION:
                setTitleText("What's Your #1 Priority for Using Field Rocket?");
                setCurrentFormIsValid(false);
                break;
            case HOW_DID_YOU_HEAR_ABOUT_US_QUESTION:
                setTitleText("How Did You Hear About Field Rocket?");
                setCurrentFormIsValid(false);
                break;
            case DONE_STEP:
                verifyAccessCodeAndFinishRegistration(); // This is where we validate the access code.. or at least do a POST to the server.
                setTitleText("Done, welcome!");
                break;
        }
    }, [registrationStep])

    const getCurrentStepComponent = () => {
        switch(registrationStep){
            case LETS_GET_STARTED_STEP:
                return (

Field Rocket

                             window.location='https://apps.apple.com/us/app/field-rocket/id1602587569'}
                                >

                                Download iPhone

                             window.location='https://play.google.com/store/apps/details?id=com.getservicerocket.mobile&hl=en_US&gl=US'}
                            >

                            Download Android

Or

s

                );
            case WHATS_YOUR_NAME_STEP:
                return (

                );
            case ASK_USER_HIGHEST_PRIORITY_SURVEY_QUESTION:
                return (

                );
            case HOW_DID_YOU_HEAR_ABOUT_US_QUESTION:
                return (

                );
            case PHONE_NUMBER_STEP:
                return (

                );
            case CONFIRM_ACCESS_CODE_STEP:
                return (

                );

            case DONE_STEP:
                return (

                );
            default:
                return

Invalid Step

;
}
}

    const onBackArrowPressed = () => {
        if (registrationStep > 1){ // don't let the registration step get below 1
            setRegistrationStep(registrationStep - 1);
        }
    }

    const setInputIsValidated=(isValid, invalidMessage = null)=>{
        setIsInputValid(isValid);
        setInvalidInputMessage(invalidMessage);
    }

    /**
     * This request does a POST request to the server to create
     * the business entity.
     *
     * If there is an error, then we need to display the error
     * very clearly to the user so they can resolve it, and take them back
     * to the appropriate step.
     *
     */
    const registerBusinessAndSendAccessCode = () => {
        //POST /businesses - to the right route to create a business and trigger an access code to be sent via Twilio.

let readableSurveyAnswer = userSurveyOptions[surveyAnswer]

    /**
     * This request does a POST request to verify the access code and finish activating our user's account
     *
     * TODO: If there is an error, then we need to display the error
     * very clearly to the user so they can resolve it, and take them back
     * to the appropriate step.
     *
     */
    const verifyAccessCodeAndFinishRegistration = () => {
        const body = {
          access_code: "990099",
          business_id: businessId
        };

        $.ajax({
          url: "/employees/" + employeeId + "/verify_access_code.json",
          type: "POST",
          contentType: "application/json",
          data: JSON.stringify(body),
          success: function(response) {
            console.log("Verification Successful", response);
            //TODO: Fix. Push them through without verification
            // Handle success scenario (e.g., update UI, redirect, etc.)
          },
          error: function(xhr, status, error) {
            console.error("Verification Failed", xhr, status, error);
            // Handle error scenario
          }
        });
      };

    return (

{showBackArrow ?

: null }

{titleText}

                {getCurrentStepComponent()}

                {registrationStep != DONE_STEP &&

setRegistrationStep(registrationStep+1)}/>

                }

Already have an account?

By proceeding, you acknowledge you've read and agree to our EULA & Privacy Policy.

);
}

export default GetStarted;

import React, {useEffect} from "react";
import InputField from "../../shared/Forms/InputField";

//NOTE: This must match the same surveyUserOptions in the GetStarted.jsx to make sure the server gets the right info.
const userOptions = [
"Invoicing & Payments", "Estimates & Closing", "Scheduling Customers", "Growth & Marketing", "Other"
];

// const surveyUserOptions = ["Invoicing & Payments", "Estimates & Closing", "Scheduling Customers", "Growth & Marketing", "Other"];

const AskUserHighestPrioritySurveyOnRegistration = ({
  surveyAnswer,
  setSurveyAnswer,
  freeFormSurveyAnswer,
  setFreeFormSurveyAnswer,
  setEnableNextButton
}) => {

  useEffect(() => {
    let nextButtonShouldBeEnabled = surveyAnswer != undefined && surveyAnswer != null && surveyAnswer >= 0;

    if (surveyAnswer == 4) {//3 is hardcoded to be the "other" selection.
      nextButtonShouldBeEnabled = !isBlank(freeFormSurveyAnswer) // is not blank
      console.log(!isBlank(freeFormSurveyAnswer));
    }

console.log("Survey answer is: " + userOptions[surveyAnswer])

setEnableNextButton(nextButtonShouldBeEnabled);

}, [surveyAnswer, freeFormSurveyAnswer])

return (

{/*

What Is The Main Thing You Hope To Accomplish With Field Rocket?

*/}

Pick one.

{userOptions.map((item, index) => (

                 setSurveyAnswer(surveyAnswer === index ? null : index)}
                    key={index}
                    style={{width: "100%"}}
                >
                    {item}
                     {
                        setSurveyAnswer(e.target.checked ? index : null);
                    }}
                    />

))}

        {surveyAnswer === 4 && (
             !isBlank(answer)}
            />
          //  {
          //     setFreeFormSurveyAnswer(e.target.value)
          //   }}
          //   placeholder="What would you like to accomplish?"
          //   className="textInput"
          // />
        )}

);
};

export default AskUserHighestPrioritySurveyOnRegistration;

import React, {useEffect} from "react";
import InputField from "../../shared/Forms/InputField";

const HowDidYouHearAboutUs = ({
  howDidYouHearAboutUsAnswer,
  setHowDidYouHearaboutUsAnswer,
  setEnableNextButton
}) => {

  useEffect(() => {
    let nextButtonShouldBeEnabled = howDidYouHearAboutUsAnswer != undefined && howDidYouHearAboutUsAnswer != null && !isBlank(howDidYouHearAboutUsAnswer);
    setEnableNextButton(nextButtonShouldBeEnabled);
  }, [howDidYouHearAboutUsAnswer])

return (

{/*

How did you hear about Field Rocket?

*/}
         !isBlank(answer)}
            />

);
};

export default HowDidYouHearAboutUs;

import React, {useEffect, useState} from "react";
import InputField from "../../shared/Forms/InputField";

const PhoneNumberStep = ({ phone, setPhone, setEnableNextButton }) => {
const [isValid, setIsValid] = useState(true);
const [invalidMessage, setInvalidMessage] = useState("");

    /**
     * This is a super annoying hack, because phone-mask.js for some reason isn't running on this page after the
     * className is set properly in InputField. So I'm just re-running the code needed to add the formatting for the
     * phone number here.
     */
    useEffect(() => {
        $('.phone_mask').mask('(000) 000-0000');
        $('.phone_mask').bind('paste', (event) => { //I added this in so that you could copy and paste from iPhone phone numbers into the app.. the +1 was throwing off our phone_masking.
            var pastedData = event.originalEvent.clipboardData.getData('text')
            if (pastedData[0] == "+" && pastedData[1] == "1"){
                let filteredPhoneNumber = pastedData.substring(2); //trim out the +1 from phone number if it exists..
                console.log(`Modified Pasted phone number from: ${pastedData} to: ${filteredPhoneNumber}!`);
                // event.originalEvent.clipboardData.setData('text/plain', filteredPhoneNumber);
                event.target.value = filteredPhoneNumber
            }
        });
    })

    useEffect(() => {
        let formattedPhoneNumber = formatPhoneNumber(phone);
        let isValid = isValidPhoneNumber(formattedPhoneNumber);
        setEnableNextButton(isValid);
    }, [phone])

return (

);
}

export default PhoneNumberStep;

import React from "react";
import AppleIcon from 'images/social/apple-Icon-metro.svg'; // Adjust the path as per your directory structure
import AndroidIcon from 'images/social/android-Icon-material.svg'; // Adjust the path as per your directory structure

const DoneStep = ({email}) => {
return (

Set a password and sign in

After setting your password, make sure to click "Already have an account?"

{/* Download Mobile App */}

                 window.location='https://apps.apple.com/us/app/field-rocket/id1602587569'}
                    >

                    Download iPhone

                 window.location='https://play.google.com/store/apps/details?id=com.getservicerocket.mobile&hl=en_US&gl=US'}
                >

                Download Android

);
}

export default DoneStep;

import React from "react";

const ConfirmAccessCodeStep = ({ accessCode, setAccessCode }) => {
return (

                Access Code
                 setAccessCode(e.target.value)}
                    placeholder="Enter your access code"
                />

);
}

export default ConfirmAccessCodeStep;

import React, {useState, useEffect} from "react";
import InputField from "../../shared/Forms/InputField";
import EmailInputField from "../../shared/Forms/EmailInputField";

const WhatsYourNameStep = ({ firstName, setFirstName, businessName, setBusinessName, email, setEmail, setEnableNextButton }) => {

    useEffect(() => { //all of these need to be true in order to be valid.
        setEnableNextButton(!isBlank(firstName) && !isBlank(businessName) && !isBlank(email) && isValidEmail(email));
        // setEnableNextButton(true);
    }, [firstName, businessName, email])

return (

             !isBlank(name)}
                />

             !isBlank(name)}
                />


            {/*

                    Email
                     setEmail(e.target.value)}
                        onBlur={e => validateEmailInput(e.target.value)}
                        style={{borderColor: emailIsValid ? "" : 'red'}}
                    />

*/}

);
}

export default WhatsYourNameStep;

import React, {Component} from "react"
import ConversationPreview from "./ConversationPreview"

class AllConversations extends Component{
    constructor(props){
        super(props);
    }

    render(){
        const {messageThreads, businessPhoneNumber, setMessageThreadCallback, pageNumber} = this.props;
        return(

                        {messageThreads.map((data, index) => { //data[1]gets all the messages, [0] gets the first one that we'll use to preview the convo.
                            return ( [ '8013499925'
                                recipientName = {data[2]} //data[2] => 'John Doe'
                                hasUnreadMessage = {true}
                                businessPhoneNumber={businessPhoneNumber}
                                urls={data[1]["urls"]}
                                key = {`conversation-preview-${index}`}>
                            );
                    })}

                {pageNumber > 0 ?


                 : }
                 Page {pageNumber + 1}

)
}
}

export default AllConversations;

import React, {Component} from "react";

class ConversationPreview extends Component{
    constructor(props){
        super(props);
        this.getUnreadIcon = this.getUnreadIcon.bind(this);
    }

    getUnreadIcon = (message)=>{
        console.log(`rendering message preview for2 ${message.has_been_read}`)
        if (!message.has_been_read){
            return (


                )
        }
        else {
            return ()
        }
    }

    render(){
        const {messageThread,
             setMessageThreadCallback,
             recipient,
             recipientName,
             urls,
             businessPhoneNumber} = this.props;
        return(

{
                        setMessageThreadCallback(messageThread, recipient, recipientName, urls);
                        $(`#conversation-${messageThread[0].sent_from}-${messageThread[0].to}`).hide();//Remove the unread notification when they click this convo-thread if it's there.
                        $('#conversation-previews').hide();
                        $('#current-conversation').show();
                        $('#chat-window').scrollTop($('#chat-window')[0].scrollHeight)

const { id } = recipientName;
const noImage = $('

No Image Found

');
$('#photos-to-attach-to-message').empty();
$('#photos-to-attach-to-message').append(noImage);

                        if(id){
                            $.get({
                                url: `/messages/${id}/customer_uploaded_images.json`,
                                success: function(data){
                                        if(data.length > 0){
                                            const imageContainer = $('

');
$('#photos-to-attach-to-message').empty();

                                            data.forEach((image)=>{
                                                imageContainer.append(
                                                    $('', {
                                                        'src': `${image['url']}`,
                                                        'style': 'width: 150px  !important; height: 150px;',
                                                        'class': 'm-1 btn p-0 modal-img',
                                                        'data-id': `${image['id']}`,
                                                        'onclick': 'imageClickHandler(event)'
                                                    })
                                                )
                                            })
                                            $('#photos-to-attach-to-message').append(imageContainer);
                                        }
                                },
                                error: function(data){
                                    console.log("error");
                                    console.log(data);
                                }
                            });
                        }
                    }
                }>

{this.getUnreadIcon(messageThread[0])}

{messageThread[0].sent_from == businessPhoneNumber ? messageThread[0].to : messageThread[0].sent_from}

{/*name*/}

{recipientName["full_name"]}

{moment(messageThread[messageThread.length-1].sent).calendar()}

{/*time/date*/}

{messageThread[messageThread.length-1].content}

{/*content*/}

)
}
}

export default ConversationPreview;

import React, {Component} from "react";

class MessageBubbleSent extends Component{
    constructor(props){
        super(props);
    }

render(){
const {content, time, imageSrc} = this.props;

        if (!imageSrc && !content) {
            return null
        }

const image = ( imageSrc == null || imageSrc.trim() === '' ?

:

)

return (

{image}

{content}

{time}

);
}
}
export default MessageBubbleSent;

import React, { Component } from "react";
class NewConversationButton extends Component{
    constructor(props) {
        super(props);
    }

    render(){
        const {selectNewConversationThreadCallback} = this.props;
        return(
             selectNewConversationThreadCallback()}>


        )
    }
}

export default NewConversationButton;

import React, { Component } from "react";
import MessageBubbleSent from "./MessageBubbleSent";
import MessageBubbleReceived from "./MessageBubbleReceived";
import ToggleConversations from "./ToggleConversations";
import SendMessageToolbar from "./SendMessageToolbar"
import NewConversationButton from "./NewConversationButton";

class Conversation extends Component{
    constructor(props) {
        super(props);
        this.state = {
            recipientName: props.recipientName,
            recipient: props.recipient,
            context: props.context,
        }
        // this.ajaxGetRecipientNameFromNumber = this.ajaxGetRecipientNameFromNumber.bind(this);
    }

    componentDidMount() {
        $('#chat-window').scrollTop($('#chat-window')[0].scrollHeight)
    }

    componentDidUpdate(){
        $('.phone_mask').mask('(000) 000-0000')
    }

    render(){
        const { context,
                messagesImageUrls,
                businessPhoneNumber,
                recipient,
                recipientName,
                addNewMessageCallback,
                openNewConversationCallback } = this.props;

        //This is to determine if it's a new conversation thread..
        let recipientElement = null;
        if (recipient == "New Conversation"){
            //This is going to render a field where they type in a phone number to send to.
            //Then on send, it will turn into a normal recipient.
            recipientElement = ()
        }
        else {
            recipientElement =

{recipient}

}

        let recipientNameElement = null;
        if (recipientName && recipientName["full_name"] != null && recipientName["id"] != null){
            if (recipientName["customer_id"] != null){
                recipientNameElement = ({recipientName["full_name"]});
            }
            else {
                recipientNameElement = ({recipientName["full_name"]});
            }
        }
        else {
            recipientNameElement = "";
        }

return(

{recipientElement}

{recipientNameElement}

                        {context.map((message, index) => (
                            message.sent_from == businessPhoneNumber ?


                            :


                        ))}

);
}
}

export default Conversation;

import React, { Component } from "react";
import Conversation from "./Conversation";
import AllConversations from "./AllConversations"

class Index extends Component {
    constructor(props) {
        super(props);
        this.state = {//messageThreads[0] => ['8013499925', { messages: [], urls: [urls] }, 'Bob Doe']
            currentConversation: [],
            currentConversationImageUrls: [],
            currentRecipient: this.findRecipientFromParam(),
            currentRecipientName: this.findRecipientNameFromParam(),
            conversationWasSetInParamater: this.wasConversationSetInParameter(),
            businessPhoneNumber: props.businessPhoneNumber,
            messageThreads: props.messageThreads,
            employeeName: props.employeeName
        }

        this.wasConversationSetInParameter = this.wasConversationSetInParameter.bind(this);
        this.setMessageThread = this.setMessageThread.bind(this);
        this.findRecipientNameFromParam = this.findRecipientNameFromParam.bind(this);
        this.addNewMessage = this.addNewMessage.bind(this);
        this.setupMessageSubscription = this.setupMessageSubscription.bind(this);
        this.receivedMessageFromActionCableSubscription = this.receivedMessageFromActionCableSubscription.bind(this);
        this.scrollToBottomOfCurrentConversation = this.scrollToBottomOfCurrentConversation.bind(this);
        this.openNewConversation = this.openNewConversation.bind(this);
        this.createLinkElement = this.createLinkElement.bind(this);
        this.setCurrentThreadViewAndImageUrls = this.setCurrentThreadViewAndImageUrls.bind(this);
    }

    componentDidMount() {
        this.setCurrentThreadViewAndImageUrls()
        this.setupMessageSubscription();
        this.setMessageContentFromParam();
    }

    // Fetching current conversation image_urls and messages
    setCurrentThreadViewAndImageUrls() {
        let currentThreadMessages = {};
        if (this.props.threadToView == null){
            currentThreadMessages =  this.props.messageThreads[0][1];
        }
        else {
            for (let i = 0; i < this.props.messageThreads.length; i++){
                let currentThread = this.props.messageThreads[i];
                let number = currentThread[0];
                if (number == this.props.threadToView){
                    currentThreadMessages =  this.props.messageThreads[i][1];
                }
            }
        }

        const { urls, messages } = currentThreadMessages;
        this.setState({
            currentConversation: messages || [],
            currentConversationImageUrls: urls || []
        })
    }

    wasConversationSetInParameter(){
        return this.props.threadToView == null
    }

    //checks if the conversation url param was set, and sets the recipient from that param, otherwise defaults to first in the list.
    findRecipientFromParam(){
        if (this.props.threadToView == null){
            return this.props.messageThreads[0][0]
        }
        else{
            return this.props.threadToView
        }
    }

    //checks if the conversation url param was set, and sets the recipient name from that param, otherwise defaults to first in the list.
    findRecipientNameFromParam(){
        if (this.props.threadToView == null){
            return this.props.messageThreads[0][2]
        }
        else{
            $.get({
                url: '/resolve_phone',
                data: {phone: this.props.threadToView},
                success: function(data){
                    //sets the recipientName when url is set with a conversation number
                    let wasCustomer = data["customer"] != null;
                    let wasContact = data["contact"] != null;
                    let couldntResolve = data == [];
                    if (!couldntResolve){
                        if (wasCustomer){
                            var recipientNameElement = this.createLinkElement('View Customer', data["customer"]["full_name"], `/customers/${data["customer"]["id"]}`);
                            $('#convo-recipient-name').append(recipientNameElement);
                        }
                        else if (wasContact){
                            var recipientNameElement = this.createLinkElement('View Customer', data["contact"]["full_name"], `/customers/${data["contact"]["customer_id"]}`);
                            $('#convo-recipient-name').append(recipientNameElement);
                        }
                    }
                }.bind(this),
                error: function(data){
                    console.log("Error getting the recipent name from the phone number");
                }
            })
            return ""
        }
    }

    createLinkElement(title, text, href){
        var a = document.createElement('a');
        var linkText = document.createTextNode(text);
        a.appendChild(linkText);
        a.title = title;
        a.href = href;
        return a;
    }

    //if the message url param was set, it fills the message box. Useful for creating links with prefilled text messages.
    setMessageContentFromParam(){
        if (this.props.content != null){
            $('#message_to_send').val(this.props.content);
        }
    }

    //Received a new message from the application, so this callback adds the message button and notification.
    receivedMessageFromActionCableSubscription(data){
        console.log(`Received incoming message from: ${data["sent_from"]}`); //Just received a message.. We are assuming it's a received message because message.rb doesn't broadcast on actioncable when we created & sent a message out. Therefore, we know that data["to"] is who sent the message to us.
        console.log(`content: ${data["content"]}`); //Just received a message.. We are assuming it's a received message because message.rb doesn't broadcast on actioncable when we created & sent a message out. Therefore, we know that data["to"] is who sent the message to us.
        console.log(`to: ${data["to"]}`); //Just received a message.. We are assuming it's a received message because message.rb doesn't broadcast on actioncable when we created & sent a message out. Therefore, we know that data["to"] is who sent the message to us.
        console.log(`sent on: ${data["sent"]}`); //Just received a message.. We are assuming it's a received message because message.rb doesn't broadcast on actioncable when we created & sent a message out. Therefore, we know that data["to"] is who sent the message to us.
        const receivedMessage = {sent_from: data["sent_from"], to: data["to"], content: data["content"], sent: data["sent"]};
        const imageUrl = data["image_url"];
        if (this.state.currentRecipient === data["sent_from"]){
            this.setState({
                currentConversation: [ ...this.state.currentConversation, receivedMessage ],
                currentConversationImageUrls: [ ...this.state.currentConversationImageUrls, imageUrl ]
            });
            this.scrollToBottomOfCurrentConversation();//Scroll to bottom of current convo page
        }
        else{
            for(let i = 0; i < this.state.messageThreads.length; i++){
                if (this.state.messageThreads[i][0] === data["sent_from"]){

                    const messageThreads = this.state.messageThreads
                    messageThreads[i][1]['messages'] = [...messageThreads[i][1]['messages'], receivedMessage]
                    messageThreads[i][1]['urls'] = [...messageThreads[i][1]['urls'], imageUrl]
                    this.setState({
                        messageThreads: messageThreads,
                    });
                    return;
                }
            }

            //If we made it this far, we need to create a whole new thread.
            const thread = [ data["to"], { messages: [receivedMessage], urls: [imageUrl] }];
            this.setState({
                messageThreads: [...messageThreads, thread]
            })
        }
    }

    setupMessageSubscription(){
        console.log("Setting up message subscription!");
        App.messages = App.cable.subscriptions.create('MessagesChannel', {
            received: (data) => this.receivedMessageFromActionCableSubscription(data)
        });
    }

    //Given a conversation & recipient, we set the message thread
    setMessageThread(conversation, recipient, recipientName, urls){
        this.setState({
            currentConversation: conversation,
            currentRecipient: recipient,
            currentRecipientName: recipientName,
            currentConversationImageUrls: urls || []
        });
        $.post({
            url: '/mark_as_read.json',
            data: {number: recipient},
            error: function(data){
                gritterError("Error", "Couldn't mark these sms messages as being seen")
            }
        });
        $('#chat-window').scrollTop($('#chat-window')[0].scrollHeight);//Scroll to bottom of current convo pagej
    }

    //Callback for when you want to send a message by typing in a phone number
    openNewConversation(){
        console.log("Open new conversation button clicked");
        this.setState({
            currentRecipient: "New Conversation",
            currentRecipientName: "",
            currentConversation: []
        });
    }

    //when sending a new message, this is the callback for adding the new message bubble in the conversation
    addNewMessage(messagePayload, resetImageDataCallback){
        const { image: { imageUrl, file, id }, message } = messagePayload;

        if (isBlank(message) && isBlank(imageUrl)){ //Don't want to send a message if it's blank
            return;
        }

let sendTo = this.state.currentRecipient != "New Conversation" ? this.state.currentRecipient : $('#new-phone-number').val();

        const messageFormData = new FormData();
        messageFormData.append('file', file)
        messageFormData.append('id', id)
        messageFormData.append('name', this.state.employeeName)
        messageFormData.append('content', message)
        messageFormData.append('to', sendTo)
        messageFormData.append('sent_from', this.state.businessPhoneNumber)

        $.ajax({
            url: '/messages.json',
            type: "POST",
            dataType: 'json',
            data: messageFormData,
            processData: false,
            contentType: false,
            success:function(data){
                const new_message = {to: this.state.currentRecipient, sent_from: this.state.businessPhoneNumber, content: message}
                this.setState({
                    currentConversation: [ ...this.state.currentConversation, new_message ],
                    currentConversationImageUrls: [ ...this.state.currentConversationImageUrls, imageUrl ],
                    currentRecipient: sendTo,
                    currentRecipientName: this.state.currentRecipientName,
                })
                resetImageDataCallback();
                $('#chat-window').scrollTop($('#chat-window')[0].scrollHeight);//Scroll to bottom of current convo page
            }.bind(this), //binding to 'this' so we can access 'this' from within the success callback.
            error: function(data){
                showError("Couldn't Send Message", data); //shows gritter errors
            }.bind(this)
        });
    }

    scrollToBottomOfCurrentConversation(){ //TODO: Replace all times we scroll to bottom with this function call for readability
        $('#chat-window').scrollTop($('#chat-window')[0].scrollHeight);
    }
    render() {
        const { messageThreads, businessPhoneNumber } = this.props;
        //We need to show the conversation previews if they just went to messages. If they navigated to conversations with a conversation in mind, we'll hide the previews and only show the current conversation.
        let shouldHideConversation = this.state.conversationWasSetInParamater //if currentRecipient is null it wasn't set.
        return (

                 thread[1].messages.length > 0)} //We filter this because it doesn't make sense to have an empty preview for a conversation if it doesn't have any messages in it. This mainly happens when a user specifies a conversation that hasn't had any messages sent back and forth between the business yet. This is also because our messaging components are highly dependent on each other and tightly coupled, otherwise I would prefer just rendering the single conversation component, but for now we have to render the entire messaging component starting with the messages/Index.jsx
                    businessPhoneNumber={businessPhoneNumber}
                    setMessageThreadCallback = {this.setMessageThread}
                    pageNumber = {this.props.pageNumber}>

);
}
}

export default Index;

import React, { Component } from "react";
class SendMessageToolbar extends Component{
constructor(props) {
super(props);

        this.changeHandler = this.changeHandler.bind(this);
        this.resetImage = this.resetImage.bind(this);
        this.handleSend = this.handleSend.bind(this);
        this.resetData = this.resetData.bind(this);
    }

    changeHandler(event) {
        let src = event.target.value;
        if(src) {
            $('#image_avatar_url_id').val('');
            const url = window.URL.createObjectURL(event.target.files[0])

            $('#attached-image').attr('src',url);
            $('#attached-image-container').show();
            $('#image_upload').hide();
        }
    }

    resetImage() {
        $('#image_avatar').val('')
        $('#image_avatar_url_id').val('');
        $("#attached-image-container").hide()
        $("#attached-image").attr("src", '');
        this.setState({ imageSrc: '', file: {}})
    }

    resetData() {
        this.resetImage();
        $('#message_to_send').val('');
    }

    handleSend() {
        const imageSrc = $('#attached-image').attr('src')
        const file = $('#image_avatar')[0].files[0] || {}
        const uploadedImageId = $('#image_avatar_url_id').val();

        const messagePayload = {
            image: {
                file: file,
                imageUrl: imageSrc,
                id: uploadedImageId
            },
            message: $('#message_to_send').val()
        }

        const { addNewMessageCallback } = this.props;
        addNewMessageCallback(messagePayload, this.resetData);
    }

render(){

return(

                 {
                        e.preventDefault();
                    }}>

                                 this.resetImage()}
                                >
                                    ×

                         {
                                this.changeHandler(event)
                            }}
                        />
                         {
                                this.urlChangeHandler(event)
                            }}
                        />

$('#image_upload').show()}>

                             {
                                    this.handleSend()
                                }}
                                id="send_text_button">

)
}
}

export default SendMessageToolbar;

import React, {Component} from "react";

class MessageBubbleSent extends Component{
    constructor(props){
        super(props);
    }

    render(){
        const {content, time, from, imageSrc, status} = this.props;
        //TODO: On click we want to display the image from Baguette Box
        const image = ( imageSrc == null || imageSrc.trim() === '' ?

:
// This width height should only be happening on image messages..

{/*

*/}

)

return (

{image}

{content}

                     {from}, {time}

                        {status == "undelivered" ?
                                ✖
                            :
                            status == "delivered" ?
                                ✔
                            :
                            "" //if not undelivered or delivered, leave blank for now.
                        }

                {
                    // status == "undelivered" ?
                    //

                    //         {/* TODO: Add undelivered icon */}
                    //         undelivered!
                    //

// :

// status == "delivered" ?
//

                    //         {/* TODO: Add delivered icon */}
                    //         delivered!
                    //

                    // :
                    // null
                }

);
}
}
export default MessageBubbleSent;

import React, {Component} from "react";

class ToggleConversations extends Component {
    constructor(props){
        super(props);
    }

    render(){
        return (
             {
                $('#conversation-previews').show();
                $('#current-conversation').hide();
            }}>


        )
    }
}

export default ToggleConversations;

import React, { Component } from 'react';

class TableBody extends Component {
    constructor(props) {
        super(props);
    }

render() {
const { tableData } = this.props;

        return (

            {
                tableData.map((data, index) => (


                        { data.employee_name }
                        { data.time_start }
                        { data.time_end }

                ))
            }

        );
    }
}

export default TableBody;

import React, { Component } from 'react';
import TableBody from "./TableBody";
import TableHeader from "./TableHeader";

class Table extends Component {
    constructor(props) {
        super(props);
    }

render() {
const { tableData } = this.props;

return (

);
}
}

export default Table;

import React, { Component } from "react";

class TableHeader extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (







                    Employee
                    Start Time
                    End Time


        );
    }
}

export default TableHeader;

import React from 'react';

const PublishedJobTableRow = ({ published_job_page }) => {
  return (

                {/*moment(published_job_page.created_at).format('MM-DD-YYYY')*/}
                {formatReadableDate(published_job_page.created_at)}

{published_job_page.address}

{published_job_page.title}

{published_job_page.slug}

{published_job_page.target_keywords}

{published_job_page.views}

  );
};

export default PublishedJobTableRow;

import React, {useState} from "react";
import ExpandableTableRow from "./ExpandableTableRow";
import ExpandedBodyRow from "./ExpandedBodyRow";

const ExpandableTableBody = ({publishableJobs}) => { //TODO: how do we handle this..
    //We want our data to be.
    // City -> Customer Name -> Title -> Invoice/Estimate -> Amount -> Pictures -> Status -> Pictures -> Category/Type of Work? -> Keywords? -> Number of Views ->
    // Images need to be queried.? But not number of images.
    // I think this needs to come from the invoices controller?
    // JSON object structure?
    // invoice:  { published_job.? }
    // }
    // }

const [expandedIndex, setExpandedIndex] = useState(null);

    return(

            {publishableJobs.map((publishableJob, index) => (

                     toggleAccordion(index)}/>


            ))}

    )
}

export default ExpandableTableBody;

import React, {useState, useEffect} from "react";

return (

{images.map((image, idx) => (

))}
{/*

*/}

                {
                    publishableJob.published_job_page?.slug != null
                    ?
                        (

Published

View on their Website:

                        )
                    :
                        (

Not Published

                        )
                }

Details

                {publishableJob.notes}

                {publishableJob.line_items.map((lineItem, idx) => (

{lineItem.description} - ${lineItem.price}

))}

Address

                    {publishableJob.display_address}

Total Amount

                    ${publishableJob.total_price}

Customer Name

{publishableJob.customer_name}

Brand

Apple

Sold by

Flowbite

Ships from

Flowbite

Dimensions (cm)

105 x 15 x 23

Item weight

12kg

                Edit

                 {window.location.href = `/published_job_pages/new?invoice_id=${publishableJob.id}`}}
                >
                Publish





                    Delete

)}

export default ExpandedBodyRow;

import React from "react";

const ExpandableTableHead = () => {
    return(

                      checkbox

                    Expand/Collapse Row

                  Customer

                    Date





                    City





                    Price





                    Status





                    Total Views





                    Return On Investment






    )
}

export default ExpandableTableHead;

import React, {useEffect} from "react";

const ExpandableTableRow = ({publishableJob, index, toggleAccordion }) => {

    useEffect(() => {
        console.log("publishable Job: ", publishableJob)
    }, [])

    return(

             event.stopPropagation()}
            className="w-4 h-4 text-primary-600 bg-gray-100 rounded border-gray-300 focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
            />

            checkbox

        {/*  */}

        {publishableJob.customer_name}


        {moment(publishableJob.created_at).format('YYYY-MM-DD')}


        {publishableJob.job_address?.city + ', ' + publishableJob.job_address?.state}


        ${publishableJob.total_price}


            {/* { false ? ( */}

            {publishableJob.published_job_page?.id != null && publishableJob.published_job_page?.slug != null ? (

Published

                ) : (
                publishableJob.published_job_page?.id != null ? (

Created

) : (

Not Published

                )
            )}



            {publishableJob.published_job_page?.number_of_views || 0}

$0

)
}

export default ExpandableTableRow;

import React, {useState, useEffect} from 'react';
import PublishedJobTableRow from "./PublishedJobTableRow";

const PerformanceForPublishedJobs = ({published_job_pages}) => {
const [publishedJobs, setPublishedJobs] = useState([]);

    useEffect(() => {
        //TODO: Query all the published_job_pages for our current business?
    }, []);

return(

Projects

                {published_job_pages.length} published

Date

City

Post

Published

Keywords

Views

                {published_job_pages
                  .sort((a, b) => new Date(b.created_at) - new Date(a.created_at))
                  .map((published_job_page, index) => (

                ))}

                {/*

Add the New Pricing Page

$500

25%

*/}

    );
  };

  export default PerformanceForPublishedJobs;

import React, {useState, useEffect} from 'react';

import ExpandableTableHead from './PublishableJobTable/ExpandableTableHead';
import ExpandableTableBody from "./PublishableJobTable/ExpandableTableBody";

const PublishableJobsTable = () => {

const [publishableJobs, setPublishableJobs] = useState([])

  useEffect(() => {
    // Define a function to fetch the data
    const fetchData = async () => {
      try {
        // Fetch data from the server
        const response = await fetch('/invoices/publishable_jobs.json');
        // Parse the JSON from the response
        const data = await response.json();
        // Update the state with the fetched data
        setPublishableJobs(data);
      } catch (error) {
        // If there's an error, log it to the console
        console.error('Failed to fetch publishable jobs:', error);
      }
    };

    // Call the fetch function
    fetchData();
  }, []); // The empty array ensures this effect only runs once, after the initial render

  return (

Jobs to Publish

x results

                More info

Showing 1-10 of 6,560 results

                Add new product





                Manage Columns

                Actions

Mass Edit

Delete all

                Brand

                  Brand
                  Samsung
                  Apple
                  Pink
                  Green

                Price

                  Price
                  $ 1-100
                  $ 101-500
                  $ 501-1000
                  $ 1001+

                Category

                  Category
                  PC
                  Phone
                  Tablet
                  Gaming/Console

                Color

                  Color
                  Purple
                  primary
                  Pink
                  Green

Purchase price

$ 3,567,890

Total selling price

$ 8,489,400

                Print barcodes


                Duplicate


                Export CSV

)
}

export default PublishableJobsTable;

import React from 'react';

const StatsForMarketingDashboard = () => {
return (

Today's Money

$x

+xx% than last week

Today's Users

x

+x% than last month

New Clients

x

-x% than yesterday

Sales

$x

+x% than yesterday

);
};

export default StatsForMarketingDashboard;

import React, { useState, useEffect } from 'react';

const NewPublishableJobPage = ({
    invoice,
    notes: initialNotes,
    keywords: initialKeywords,
    customerName: initialCustomerName,
    address: initialAddress,
    customTitlePrompt: initialCustomTitlePrompt,
    customHtmlPrompt: initialCustomHtmlPrompt
  }) => {
    const [includePrice, setIncludePrice] = useState(false);
    const [notes, setNotes] = useState(initialNotes);
    const [notesWithoutPrice, setNotesWithoutPrice] = useState(notesWithoutPrice);
    const [keywords, setKeywords] = useState(initialKeywords);
    const [customerName, setCustomerName] = useState(initialCustomerName);
    const [address, setAddress] = useState(initialAddress);
    const [selectedPictures, setSelectedPictures] = useState([]);

    const [customPrompt, setCustomPrompt] = useState(false);
    const [customTitlePrompt, setCustomTitlePrompt] = useState(initialCustomTitlePrompt);
    const [customHtmlPrompt, setCustomHtmlPrompt] = useState(initialCustomHtmlPrompt);

const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    if (includePrice) {
      setNotes(notes);
    } else {
      setNotes(notesWithoutPrice);
    }
  }, [includePrice]);

  // useEffect(() => {
  //   console.log(selectedPictures);
  // }, [selectedPictures]);

  const handleSubmit = async (event) => {
    event.preventDefault();
    console.log("made it!");

    // #   "published_job_page" => {
    //   #     "notes" => "Job Notes: Removal of tree stump and roots\r\nItem: Stump grind small stump and roots in front flower bed leaving stump 4-6\" below grade. Clean up and backfill. (Mulch removal not included)\r\nItem: Add stump in backyard ",
    //   #     "keywords" => "stump removal, stump grinding, stump poisoning, trunk removal",
    //   #     "customer_name" => "Alayna",
    //   #     "address" => "Riverton, UT",
    //   #     "job_id" => "11921",
    //   #     "invoice_id" => "6318"
    //   #   },
    // #   "attachments" => {
    //   #     "IMG_0232.JPG" => "9270"
    //   #   }, ^^ ABOVE IS THE CORRECT WAY TO NEST THE FORM DATA

    const form_data = {
      published_job_page: {
        invoice_id: invoice.id,
        job_id: invoice?.job?.id,
        notes: notes,
        keywords: keywords,
        customer_name: customerName,
        address: address,
        use_custom_prompt_on_generation: customPrompt,
        custom_title_prompt: customTitlePrompt,
        custom_html_prompt: customHtmlPrompt,
      },
      attachments: getAttachedImages(),
    };

// debugger;
console.log(form_data);

    setIsLoading(true);
    try {
      const response = await fetch('/published_job_pages.json', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Accept': 'application/json'
        },
        body: JSON.stringify(form_data)
      });

      if (response.ok) {
        const data = await response.json();
        console.log('Success:', data);
        let publishedJobPageId = data.id;
        document.location.href = `/published_job_pages/${publishedJobPageId}`;
        // setIsLoading(false);
        // Handle success (e.g., redirect to the new job page)
      } else {
        const errorData = await response.json();
        console.error('Error:', errorData);
        setIsLoading(false);
        // Handle error (e.g., display error messages)
      }
    } catch (error) {
      console.error('Error:', error);
      setIsLoading(false);
      // Handle network error
    }
  }

const getAttachedImages = () => {
const checkboxes = document.querySelectorAll('input[type="checkbox"][name^="attachments"]');

// Initialize an object to store selected images
const selectedImages = {};

    // Iterate through each checkbox and add it to the object if checked
    checkboxes.forEach(checkbox => {
      if (checkbox.checked) {
        // Assuming the value is in the format "filename:id"
        // const [filename, id] = checkbox.value.split(':');

        const filename = checkbox.name.split('[')[1].replace(']', '')
        const id = checkbox.value

        selectedImages[filename] = id;
        // debugger;
      }
    });

return selectedImages;
}

  return (

Add New Published Job Page

              {/* Include Price Checkbox */}

                   setIncludePrice(!includePrice)}
                  />
                  Include Price

{/* Notes */}

                  Notes: the following notes will be used to generate this post showcasing your work.
                   setNotes(e.target.value)}
                  />

{/* Keywords */}

                  Keywords
                   setKeywords(e.target.value)}
                  />

{/* Customer Name */}

                  Customer Name
                   setCustomerName(e.target.value)}
                  />

{/* Address */}

                  Address
                   setAddress(e.target.value)}
                  />

{/* Custom Prompt Checkbox */}

                   setCustomPrompt(!customPrompt)}
                  />
                  Modify Prompt

              {/* Custom Prompts */}
              {customPrompt && (

                      Custom Title Prompt
                       setCustomTitlePrompt(e.target.value)}
                      />

                      Custom HTML Prompt
                       setCustomHtmlPrompt(e.target.value)}
                      />

)}

{/* Submit Button */}

                  {
                    isLoading ?

                    :
                    Submit
                  }

);
};

export default NewPublishableJobPage;

import React, {useState, useEffect} from "react"
import TableDataNotEditable from "../shared/TableDataNotEditable"
import Modal from 'react-bootstrap/Modal'
import Button from 'react-bootstrap/Button';

export default function ContactsTable({contacts, setContacts}){
    const [isOpen, setIsOpen] = useState(false);
    const [isSaveButtonLoading, setIsSaveButtonLoading] = useState(false);
    const [activeContactId, setActiveContactId] = useState(0);

    const [firstName, setFirstName] = useState("");
    const [lastName, setLastName] = useState("");
    const [phone, setPhone] = useState(null);
    const [email, setEmail] = useState(null);
    const [notes, setNotes] = useState(null);
    const [modalTitle, setModalTitle] = useState("");

    const editButtonClicked = (contactId, contactData) => {
        console.log("Edit button clicked for contact! About to hit debugger");
        console.log("Contact Id: " + contactId);
        console.log("Contact data: ");
        console.log(contactData);
        setActiveContactId(contactId);

        const selectedContact = contacts.find(contact => contact.id == contactId);
        console.log("Selected contact: ", selectedContact);
        setFirstName(selectedContact.first_name);
        setLastName(selectedContact.last_name);
        setPhone(selectedContact.phone);
        setEmail(selectedContact.email);
        setNotes(selectedContact.notes);
        setModalTitle("Edit Contact");
        setIsOpen(true);
    }; //after a timesheet gets edited.. we need to modify the state somehow.

    return(

             [
                        contact.id,
                        contact.full_name,
                        formatPhoneNumber(contact.phone),
                        contact.email,
                        contact.notes])}
                actions={{delete: true, edit: true}}
                editModalOnClick={editButtonClicked}
            />

             setIsOpen(false)} centered>

                {modalTitle}



                        {/* TODO: customer contact fields/form. */}
                        First Name:
                         setFirstName(e.target.value)} />

Last Name:
setLastName(e.target.value)} />

Phone:
setPhone(e.target.value)} />

                        Email:
                         setEmail(e.target.value)} />

                        Notes:
                         setNotes(e.target.value)} />



                 setIsOpen(false)}>
                    Close

                {isSaveButtonLoading ?


                        Saving...

                        :

                        Save Changes

                }



        )
}

import React, { Component, useState } from "react"
import ContactsTable from "./ContactsTable";

export default function ContactsIndex(props){
    const [contacts, setContacts] = useState(props.contacts);
        return(

        )
}

import React, { Component } from 'react';

class TableBody extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        const { tableData } = this.props;
        return (

            {
                tableData.map((data, index) => (

                        { data.first_name }
                        { data.last_name }
                        { data.email }
                        { data.phone }

                        { data.name }
                        { this._tools(data) }

                ))
            }

        );
    }

_tools(data) {
const { permissions } = this.props;

        if( permissions["destroy"] && permissions["update"] ) {
            return(

                    {
                        data.deactivated_at
                            ?


                            :


                    }




            );
        } else if( permissions["destroy"] ) {
            return(





            );
        } else if( permissions["update"] ) {
            return(





            );
        } else {
            return();
        }
    }
}

export default TableBody;

import React, { Component } from "react";
import Table from "./Table";
import TableTop from "./TableTop";

class Index extends Component {
    constructor(props) {
        super(props);
    }

render() {
const { tableData, permissions, displayGroup } = this.props;

return (

);
}
}

export default Index;

import React, { Component } from 'react';
import TableBody from "./TableBody";
import TableHeader from "./TableHeader";

class Table extends Component {
    constructor(props) {
        super(props);
    }

render() {
const { tableData, permissions } = this.props;

return (

);
}
}

export default Table;

import React, { Component } from "react";
import SortLink from "../shared/SortLink";

class TableHeader extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (


                     Avatar


                    Email
                    Phone
                    Color
                    Group



        );
    }
}

export default TableHeader;

import React, { Component } from "react";
import SearchField from "../shared/SearchField";

class TableTop extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (

{ this._newLink() }

{/*

{ this._inviteLink() }

*/}
{/*

{ this._groupLink() }

*/}

);
}

_groupLink() {
const { displayGroup } = this.props;

if( displayGroup ) {
return();

        } else {
            return null;
        }
    }

_inviteLink() {
const { permissions } = this.props;

        if( permissions["create"] ) {
            return(

            );
        } else {
            return null;
        }
    }

_newLink(){
const { permissions } = this.props;

        if( permissions["create"] ) {
            return(

            );
        } else {
            return null;
        }
    }
}

export default TableTop;

import React, { Component } from 'react';

class TableBody extends Component {
    constructor(props) {
        super(props);
    }

render() {
const { tableData } = this.props;

        return (

            {
                tableData.map((data, index) => (

                        { data.name }
                        { this._tools(data) }

                ))
            }

        );
    }

_tools(data) {
const { permissions } = this.props;

        if( permissions["destroy"] && permissions["update"] ) {
            return(











            );
        } else if( permissions["destroy"] ) {
            return(








            );
        } else if( permissions["update"] ) {
            return(








            );
        } else {
            return(





            );
        }
    }
}

export default TableBody;

import React, { Component } from "react";
import Table from "./Table";
import TableTop from "./TableTop";

class Index extends Component {
    constructor(props) {
        super(props);
    }

render() {
const { tableData, permissions } = this.props;

return (

);
}
}

export default Index;

import React, { Component } from 'react';
import TableBody from "./TableBody";
import TableHeader from "./TableHeader";

class Table extends Component {
    constructor(props) {
        super(props);
    }

render() {
const { tableData, permissions } = this.props;

return (

);
}
}

export default Table;

import React, { Component } from "react";
import SortLink from "../shared/SortLink";

class TableHeader extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (






        );
    }
}

export default TableHeader;

import React, { Component } from "react";
import SearchField from "../shared/SearchField";

class TableTop extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (

                { this._newLink() }

);
}

_newLink() {
const { permissions } = this.props;

        if( permissions["create"] ) {
            return();
        } else {
            return null;
        }
    }
}

export default TableTop;

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const ChatBot = ({ first_name, context }) => {
  const [messages, setMessages] = useState([]);
  const [isOpen, setIsOpen] = useState(false);
  const [userInput, setUserInput] = useState('');
  const [isLoading, setIsLoading] = useState(false);

console.log("ChatBot props:", { first_name, context });

  useEffect(() => {
    // Add initial greeting message when component mounts
    // console.log("app context is:" + context);
    setMessages([
      { text: `What do you want to build?`, sender: 'bot' }
    ]);
  }, [first_name]);

  useEffect(() => {
    // Add initial greeting message when component mounts
    console.log("app context is:", context);
    setMessages([
      { text: `What do you want to build?`, sender: 'bot' }
    ]);
  }, [context]);

  const styles = {
    chatBubbleContainer: {
      position: 'fixed',
      bottom: '16px',
      right: '16px',
      zIndex: 50,
    },
    chatIcon: {
      width: '64px',
      height: '64px',
      backgroundColor: '#3B82F6', // blue-500
      borderRadius: '50%',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      cursor: 'pointer',
    },
    chatIconImage: {
      width: '48px',
      height: '48px',
    },
    messageBubble: {
      position: 'absolute',
      bottom: '80px',
      right: '0',
      backgroundColor: '#1F2937', // gray-800
      borderRadius: '8px',
      padding: '12px',
      boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
    },
    messageBubbleText: {
      color: 'white',
      fontSize: '14px',
      whiteSpace: 'nowrap',
    },
    messageBubbleTail: {
      position: 'absolute',
      bottom: '-6px',
      right: '24px',
      width: '12px',
      height: '12px',
      backgroundColor: '#1F2937', // gray-800
      transform: 'rotate(45deg)',
    },
    chatbotContainer: {
      position: 'fixed',
      bottom: '90px',
      right: '20px',
      width: '300px',
      height: '400px',
      border: '1px solid #ccc',
      borderRadius: '8px',
      overflow: 'hidden',
      boxShadow: '0 2px 10px rgba(0,0,0,0.2)',
      zIndex: 1000,
      display: isOpen ? 'flex' : 'none',
      flexDirection: 'column',
      backgroundColor: '#fff',
    },
    chatbotHeader: {
      padding: '10px',
      backgroundColor: '#007bff',
      color: '#fff',
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'center',
    },
    closeButton: {
      background: 'none',
      border: 'none',
      color: '#fff',
      fontSize: '20px',
      cursor: 'pointer',
    },
    chatbotMessages: {
      flexGrow: 1,
      overflowY: 'auto',
      padding: '10px',
    },
    message: {
      margin: '5px 0',
      padding: '8px',
      borderRadius: '8px',
    },
    botMessage: {
      backgroundColor: '#e6f2ff',
      alignSelf: 'flex-start',
    },
    userMessage: {
      backgroundColor: '#dcf8c6',
      alignSelf: 'flex-end',
    },
    inputContainer: {
      display: 'flex',
      padding: '10px',
    },
    input: {
      flexGrow: 1,
      marginRight: '10px',
      padding: '5px',
    },
    sendButton: {
      padding: '5px 10px',
      backgroundColor: '#007bff',
      color: '#fff',
      border: 'none',
      borderRadius: '4px',
      cursor: 'pointer',
    },
  };

  const loadingIndicatorStyle = {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    padding: '10px',
  };

  const toggleChat = () => {
    setIsOpen(!isOpen);
  };

  const handleInputChange = (e) => {
    setUserInput(e.target.value);
  };

const handleSendMessage = async () => {
if (userInput.trim() === '') return;

    const newUserMessage = { text: userInput, sender: 'user' };
    setMessages([...messages, newUserMessage]);
    setUserInput('');
    setIsLoading(true);

    try {
      const response = await axios.post('/chatbot/message', { message: userInput, context: context });
      const botResponse = { text: response.data.response, sender: 'bot' };
      setMessages((prevMessages) => [...prevMessages, botResponse]);
    } catch (error) {
      console.error('Error sending message to ChatGPT:', error);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <>

What do you want to build?

          What do you want to build?
          ×

{messages.map((message, index) => (

{message.text}

          ))}
          {isLoading && (

Thinking...

)}

            Send

>
);
};

export default ChatBot;

import React, {Component} from 'react';

class SidebarMenuItem extends Component {
    constructor(props){
        super(props);
    }

render(){
const {title, path, icon} = this.props;

return (

                    {icon}
                    {title}

        );
    }
}

export default SidebarMenuItem;

import React, { Component } from 'react';

class SidebarSubmenuItem extends Component {
    constructor(props){
        super(props);
    }

    render(){
        const {title, path} = this.props;//Input Params

return ( //TODO: we need to figure out "active" vs. "non-active"

                    {title}

);
}
}

export default SidebarSubmenuItem;

import React, { Component } from "react";
import Request from "./Request"

class RequestsDraggable extends Component {
    constructor(props){
        super(props);
    }

    componentDidMount(){
        let draggableContaineEl = document.getElementById('job_request_container');
        new FullCalendarInteraction.Draggable(draggableContaineEl, {
            itemSelector: '.draggable-el',
            eventData: function(eventEl) {
                return {
                    title: eventEl.innerText,
                    duration: '02:00',
                    extendedProps: { //extended props set's the event info fields for fullcalendar to use, pulling data from the data attribute tags
                        requestId: eventEl.dataset.requestid,
                        customerId: eventEl.dataset.customerid,
                        locationId: eventEl.dataset.locationid,
                        firstName: eventEl.dataset.firstname,
                        lastName: eventEl.dataset.lastname,
                        email: eventEl.dataset.email,
                        phone: eventEl.dataset.phone,
                        streetAddress: eventEl.dataset.streetaddress,
                        zip: eventEl.dataset.zip,
                        city: eventEl.dataset.city,
                        state: eventEl.dataset.state,
                        summary: eventEl.dataset.summary,
                        notes: eventEl.dataset.notes,
                        requestId: eventEl.dataset.requestid,
                        marketingSourceId: eventEl.dataset.marketingsourceid,
                        marketingSourceName: eventEl.dataset.marketingsourcename
                    }
                }
            }
        });
    }

    render(){
        const {requests} = this.props;
        return ( //todo: each draggable.

Drag to Schedule

                        {
                            requests.map((request, index) => (

                            ))
                        }

        )
    }

}

export default RequestsDraggable;

import React, {Component} from "react";

class Request extends Component{
    constructor(props){
        super(props);
    }

    render(){
        const {request} = this.props;
        return(

{request.first_name} {request.last_name} in {request.city}, {request.notes}

{moment(request.created_at).calendar(null, {sameElse: 'MMMM DD, hh:mm a'})}

)
}
}

export default Request;

import React, { Component } from "react";
import Select from "react-select";
import AsyncSelect from 'react-select/async';

class BillToDifferentCustomer extends Component {
    constructor(props) {
        super(props);
    }

render() {
const { showingDiffCust, selectedDiffCustOption } = this.props;

        return (

                         Bill To Different Customer

                    {
                        showingDiffCust &&
                    }

        );
    }
}

export default BillToDifferentCustomer;

import React, { Component } from "react";
import PaidInvoices from "./PaidInvoices";
import OutstandingInvoices from "./OutstandingInvoices";
import LateInvoices from "./LateInvoices";

class InvoiceTracking extends Component {
    constructor(props) {
        super(props);
    }

render() {
const { outstandingInvoices, lateInvoices, paidInvoices } = this.props;

return (

                        Invoice Title
                        Amount Due
                        Due On

);
}
}

export default InvoiceTracking;

import React, { Component } from 'react';

class TableBody extends Component {
    constructor(props) {
        super(props);
    }

render() {
const { tableData } = this.props;

        return (

            {
                tableData.map((data, index) => (

                     { data.title }
                        { formatCurrency(data.total_price) }
                        { data.issued_on }
                        { data.delivered_on }, {this._markAsDelivered(data.delivered_on != "Not Delivered", data.id) }
                         { data.paid_in_full } { this._canMarkAsPaid(data.paid_in_full == "No", data.id) }
                        { this._tools(data) }

                ))
            }

        );
    }

    _tools(data) {
        const { tableData } = this.props;
            return(











            );
    }

    _canMarkAsPaid(wasntPaid, id){
        if (wasntPaid){
            return(
                 this._markInvoiceAsPaid(id, this)}>


            );
        }
    }

    _markAsDelivered(wasDelivered, id){
        if (!wasDelivered){
            return(
                 this._emailInvoiceToCustomer(id, this)}>


            );
        }
        else {
            return  this._emailInvoiceToCustomer(id,this)}>


        }
    }

    _emailInvoiceToCustomer(id){
        emailInvoiceToCustomer(id);
        window.location.reload();
    }

    _markInvoiceAsPaid(id, toReRender){
        $.post({
            url: `../../invoices/${id}/mark_as_paid`,
            data: {id: id},
            success: function(){
                gritterSuccess("Successfully Marked as Paid",
                    `You've successfully marked invoice: ${id} as paid in full`);
                window.location.reload();
            },
            error: function(data){
                gritterError("Couldn't mark invoice as paid", "", "10000");
            }
        })
    }
}

export default TableBody;

import React, { Component } from "react";

class LateInvoices extends Component {
constructor(props){
super(props);

        this.styles = {
          a: {color: "black", float: "left", padding: 0}
        };
    }

render(){
const { invoices } = this.props;

        if (invoices == null || invoices == undefined)
            return null;

        return (
            invoices.map((data, index) => (



                        { data.title }


                    {data.amount_due}
                    {data.due_date}

            ))
        );
    }
}

export default LateInvoices;

import React, { Component } from "react";

class PaidInvoices extends Component {
constructor(props){
super(props);

        this.styles = {
          a: {color: "black", float: "left", padding: 0}
        };
    }

    render(){
        const { invoices } = this.props;

        if (invoices == null || invoices == undefined)
            return null;

        return (
            invoices.map((data, index) => (



                        { data.title }


                    {data.amount_due}
                    {data.due_date}

            ))
        );
    }
}

export default PaidInvoices;

import React, { Component } from "react";
import InvoiceDocument from "./InvoiceDocument/InvoiceDocument";
import Select from "react-select";
import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
import ToggleButton from "@mui/material/ToggleButton";
import BillToDifferentCustomer from "./BillToDifferentCustomer";

class InvoiceEditPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            invoiceType: this.props.invoice.invoice_type || "Invoice",
            disableSave: false,
            showingDiffCust: this.props.shouldInvoiceOtherCustomer,
            selectedDiffCustOption: this.props.invoice.invoice_to ? {value: this.props.invoice.invoice_to_id, label: this.props.invoice.invoice_to.full_name} : {value: this.props.customerToInvoice?.id, label: this.props.customerToInvoice?.full_name},
        }
        this.handleInvoiceEstimateTypeSelection = this.handleInvoiceEstimateTypeSelection.bind(this);
        this.onInvoiceTemplateSelected = this.onInvoiceTemplateSelected.bind(this);
        this.onDifferentCustomerSelected = this.onDifferentCustomerSelected.bind(this);
        this.toDifferentCustomerCheckbox = this.toDifferentCustomerCheckbox.bind(this);
        this.setInvoiceType = this.setInvoiceType.bind(this);
        this.onSaveButtonClick = this.onSaveButtonClick.bind(this);
        this.getCustomerSearchOptions = this.getCustomerSearchOptions.bind(this);
    }

    handleInvoiceEstimateTypeSelection(event){
        this.invoiceDocument.setInvoiceType(event);
    }

    onInvoiceTemplateSelected(event){
        this.invoiceDocument.updateSelectedTemplateValues(event);
    }

    onDifferentCustomerSelected(event){
        this.setState({
            ...this.state,
            selectedDiffCustOption: {value: event.customer.id, label: event.customer.full_name},
        })

        this.invoiceDocument.updateServiceToData(event);
    }

    toDifferentCustomerCheckbox(event){
        if(!event.currentTarget.checked){
            this.invoiceDocument.updateInvoiceTo();
        }

        this.setState({
            ...this.state,
            showingDiffCust: event.currentTarget.checked,
        })
    }

    onSaveButtonClick(event){
        if (!this.state.disableSave){
            this.invoiceDocument.saveInvoiceToServer();
        }

        this.setState({
            ...this.state,
            disableSave: true,
        })
    }

    setInvoiceType(event){
        this.setState({
            ...this.state,
            invoiceType: event.target.value
        })
    }

    getCustomerSearchOptions(input, callback){
        fetch(`/customer_data/?name=${input}`)
        .then(res => res.json())
        .then(
            (result) => {
                callback(result)
            },
            (error) => {
                console.log(error);
            }
        )
    }

    render() {
        return (

                            Invoice
                            Estimate

                        {/* onclick="$('#attach_images').trigger('click')" */}
                             {
                                gritterSuccess("Coming Soon", "Uploading images directly to invoices is coming soon");
                             }} title="Attach Images" className="isDisabled">


                            {/*  */}

                 {this.invoiceDocument = ip}}
                    setInvoiceType={this.setInvoiceType}
                    showServiceTo={this.state.showingDiffCust}

                    toDifferentCustomerCheckbox={this.toDifferentCustomerCheckbox}
                    showingDiffCust={this.state.showingDiffCust}
                    onDifferentCustomerSelected={this.onDifferentCustomerSelected}
                    getCustomerSearchOptions={this.getCustomerSearchOptions}
                    selectedDiffCustOption={this.state.selectedDiffCustOption}
                />

        );
    }
}

export default InvoiceEditPage;

import React, { Component } from "react";

class MarkInvoiceAsPaidIcon extends Component {
    constructor(props) {
        super(props);
    }

render() {
const { invoiceId } = this.props;

        return (
             markAsPaid(invoiceId, this)}>
                 Mark as Paid (Manual)

        );
    }
}

export default MarkInvoiceAsPaidIcon;

import React, { Component } from "react"

class SignaturePad extends Component {
    constructor(props){
        super(props);
    }

    componentDidMount(){

        // var canvas = document.getElementById("signature-pad");
        // console.log("Canvas is: " + canvas);

        // var signaturePad = new SignaturePad(canvas);
        // submittingForm = canvas.closest("form");

        // canvas.addEventListener('mousedown', function() {
        //     console.log("Mouse down on the canvas element");
        //     enablePayment();
        // }, false);

        // canvas.addEventListener('mouseup', function() {
        //     console.log("Mouse up on the canvas element");
        //     document.getElementById("signature-pad-value").value = signaturePad.toDataURL();
        // }, false);

        // $('button[type="submit"]').click(function(e){//here's where I could check if the signature was present, if it's not, prevent default and alert that they need to sign.
        //     document.getElementById("signature-pad-value").value = signaturePad.toDataURL();
        // })

        // if(props.signature != null)
        // {
        //     setSignatureToBeEdited(props.signature);
        // }
        // else
        // {
        //     disablePaymentIfNoSignature(); // call this after we set the signature
        // }

        // setSignatureToBeEdited = function(dataPoints){ //sets the signature from an invoice that's already been signed
        //     signaturePad.fromDataURL(dataPoints);
        // }

        // document.getElementById('clear-signature').addEventListener('click', function () {
        //     signaturePad.clear();
        //     document.getElementById("signature-pad-value").value = "";
        //     disablePayment(); // we don't want them to be able to pay if they just cleared the signature, because there's no signature now haha.
        // });

        // disablePaymentIfNoSignature = function(){
        //     if (signaturePad.isEmpty()){
        //         disablePayment();
        //     }
        // }

        // function disablePayment(){
        //     // document.getElementById("elavon-button").disabled=true;
        //     if(document.getElementById("payment_gateway_name").value == 'stripe'){
        //         document.getElementsByClassName("stripe-button-el")[0].disabled=true;
        //     } else{
        //         document.getElementsByClassName("ibx-pay-button")[0].disabled=true;
        //     }

// $('#require-signature-notice').show();
// }

        // function enablePayment(){
        //     // document.getElementById("elavon-button").disabled=false;
        //     if(document.getElementById("payment_gateway_name").value == 'stripe'){
        //         document.getElementsByClassName("stripe-button-el")[0].disabled=false;
        //     } else{
        //         document.getElementsByClassName("ibx-pay-button")[0].disabled=false;
        //     }

        //     $('#require-signature-notice').hide();
        // }
    }

    render() {
        return (

Sign Above

Clear

        )
    }
}

export default SignaturePad;

import React, { Component } from "react";

//** TODO: Implement. */
class Pay extends Component {
    constructor(props) {
        super(props);
    }

render() {
const { acceptCardPayment, payWithStripe, payWithIbx, amountWithoutTransactionFee, transactionFee, invoice, } = this.props;

return (

);
}
}

export default Pay;

import React, { Component } from "react";

class EmailInvoiceIcon extends Component {
    constructor(props) {
        super(props);
    }

render() {
const { invoiceId } = this.props;

        return (
             emailInvoiceToCustomer(invoiceId, this)}>


        );
    }
}

export default EmailInvoiceIcon;

import React, {Component} from "react";

class LegalDisclaimer extends Component{
    constructor(props){
        super(props)
    }

    render(){
        const { invoiceType, invoiceTerms, estimateTerms } = this.props;
        return (

                {
                  invoiceType == 'Invoice'
                  ?

:

}

        );
    }
}

export default LegalDisclaimer;

import React, {Component} from "react";

class Signature extends Component{
    constructor(props){
        super(props)
    }

    render(){
        const { signatureUrl } = this.props;
        return (

Signature:

        );
    }
}

export default Signature;

import React, { Component, useState } from "react";
import LegalDisclaimer from "./LegalDisclaimer";
import TotalDue from "./TotalDue";
import LineItems from "./LineItems/LineItems";
import Header from "./Header/Header";
import Information from "./Information/Information";
import { Button } from "bootstrap";
import { success } from "toastr";

class InvoiceTemplateDocument extends Component {
    constructor(props) {
        super(props);
        let oldPriceSum = 0;

const { invoice, lineItems, handlingInvoiceTemplate, logo, customerToInvoice, alternateLogoFromTemplate, business } = props;
const { amount_paid } = invoice;

lineItems.map((value)=>{ oldPriceSum += parseFloat(value.price) * parseInt(value.quantity); })

const oldTotalAmount = parseFloat(oldPriceSum).toFixed(2) ? parseFloat(oldPriceSum).toFixed(2) : 0.00;

        const amountDue = parseFloat(oldTotalAmount).toFixed(2) || 0.00;
        const totalAmount = parseFloat(oldTotalAmount) || 0.00;
        const amountPaid = amount_paid || 0;
        const businessName = invoice.business_name || business.name;

        this.state = {
          invoiceTemplateId: invoice.id,
          customerToInvoice: customerToInvoice,
          notes: invoice.description || "",
          lineItems: lineItems || [],
          amountDue: amountDue,
          amountPaid: amountPaid,
          totalPrice: totalAmount,
          issuedDate: invoice.issued_on,
          logo: logo,
          alternateLogoFromTemplate: alternateLogoFromTemplate,
          alternativeBusinessName: businessName,
          handlingInvoiceTemplate: true,
          invoiceTemplateDisplayNumber: '0',
          invoiceType: 'Template',
          file: {}
        }

        this.updateLineItems = this.updateLineItems.bind(this);
        this.saveInvoiceTemplateToServer = this.saveInvoiceTemplateToServer.bind(this);
        this.setNotes = this.setNotes.bind(this);
        this.setLogo = this.setLogo.bind(this);
        this.removeLogo = this.removeLogo.bind(this);
        this.updateAlternateBusinessName = this.updateAlternateBusinessName.bind(this);
    }

    saveInvoiceTemplateToServer(redirectUrl){
        const formData = new FormData();
        const basePath = 'invoice_templates';
        const { file, alternativeBusinessName, invoiceTemplateId, notes, lineItems } = this.state;
        const { updateDisableSave, templateName, invoice } = this.props;
        const url = `/${basePath}/${ invoiceTemplateId ? invoiceTemplateId : ''}`;

        //url will be POST /invoices or POST /invoice_templates or PUT "/invoices/:id" or PUT "/invoice_templates/:id"
        //if invoiceTemplateId == null, do a POST to create new invoice, if invoiceTemplateId == not null, do a PUT to update the invoice.
        const requestType = `${invoiceTemplateId ? "PUT" : "POST"}`;
        const name = invoice.id ? templateName || invoice.name : templateName

        if(file) {
            formData.append('logo', file)
        }

        // if(!this.props.templateName || !notes) {
        //   updateDisableSave(false);
        //   return gritterError(`Error`, notes ? "Notes can't be blank" : "Template name can't be blank" )
        // }

        const invoiceTemplate = {
            'name': name,
            'id': invoiceTemplateId,
            'description': notes,
            'line_items': lineItems,
            'business_name': alternativeBusinessName,
            'redirect_url': redirectUrl
        }

        formData.append('invoice_template', JSON.stringify(invoiceTemplate));

        $.ajax({
            url: url,
            type: requestType,
            dataType: 'json',
            data: formData,
            processData: false,
            contentType: false,
            success: function(data){
                console.log("Successfully saved invoice!");
                gritterSuccess("Success", "Successfully saved invoice!");
                window.location.href = `/${basePath}/${data.id}`;
            },
            error: function(data){
                console.log("Error Ocurred");
                updateDisableSave(false);
                gritterError(`Error`, "Something went wrong");
            }
        });
    }

    render() {
        return (

);
}

    setNotes(event, exactValue = null){
      this.setState({
        ...this.state,
        notes: exactValue || event.target.innerText
      })
    }

    updateLineItems(items, notes = null) {
      const priceSum = items.reduce(
        (previousValue, lineItem) => previousValue + (parseFloat(lineItem.price ? lineItem.price : 0.00) * lineItem.quantity), 0.00
      )

const newTotalAmount = parseFloat(priceSum).toFixed(2) ? parseFloat(priceSum).toFixed(2) : 0.00;
// const newDueAmount = newTotalAmount - parseFloat(this.props.invoice.amount_paid).toFixed(2);

      this.setState({
        ...this.state,
        lineItems: [...items],
        totalPrice: newTotalAmount,
        amountDue: newTotalAmount,
        notes: notes || this.state.notes,
      });
    }

    updateNotesAndLineItemsFromTemplateSelect(selection) {
      this.updateLineItems([...this.state.lineItems,
        ...selection.line_items.map(
          function(item) {
            return {
              id: item.id,
              name: item.name,
              price: item.price,
              product_id: item.product_id,
              quantity: item.quantity || 1} //this is to ensure there's no null quantity
          })
      ],
      selection.notes);//Hacky to tack on this notes to the updateLineItems call.
      //TODO: Add invoiceTemplateId to save onto this if it was seleted from template select.
    }

    setLogo(event) {
      console.log('Image Changed');
      const src = event.target.value;

      if(src) {
          const file = event.target.files[0];
          const path = window.URL.createObjectURL(event.target.files[0]);

          this.setState({
            ...this.state,
            alternateLogoFromTemplate: path,
            file: file
          });
      }
    }

removeLogo() {
const { alternateLogoFromTemplate, invoiceTemplateId } = this.state;

if(alternateLogoFromTemplate) {
console.log('Remove logo');

        this.setState({
          ...this.state,
          alternateLogoFromTemplate: '',
          file: {}
        });

$('#logoUpload').val('');

        if(invoiceTemplateId) {
          $.ajax({
            'url': `/invoice_template/${invoiceTemplateId}/logo`,
            'method': 'DELETE',
            'success': function(){
              gritterSuccess('Success', 'Logo removed successfully');
            },
            'error': function(error){
              console.log(error)
              gritterError('Error', 'Unable to delete logo');
            }
          })
        }
      }
    }

    updateAlternateBusinessName(event) {
        const { business } = this.props;
        const newBusinessName = event.target.innerText || business.name;
        console.log(newBusinessName)

        this.setState({
            ...this.state,
            alternativeBusinessName: newBusinessName
        })
    }
}

export default InvoiceTemplateDocument;

import React, {Component} from "react";
import ContentEditable from "react-contenteditable"

class BusinessInformation extends Component {
    constructor(props){
        super(props);
    }

    render() {
        const { business, businessPhone, handlingInvoiceTemplate, editable, updateAlternateBusinessName, alternativeBusinessName } = this.props;
        const { name: defaultBusinessName, email: businessEmail, street_address: businessSreetAddress, city: businessCity, state: businessState, zip_code: businessZipCode, notes: businessNotes } = business;
        const businessName = alternativeBusinessName || defaultBusinessName;

        return(

                    {/*  {this.props.alternativeBusinessName ? this.props.alternativeBusinessName : this.props.business.name}
*/}

                            {businessName}

                        {
                            handlingInvoiceTemplate && editable &&

document.getElementById("businessName").focus()}>

}

                      {businessPhone}

                      {businessEmail}

                     { `${businessSreetAddress}, ${businessCity}, ${businessState} ${businessZipCode} `}


                    { !isBlank(businessNotes) && {businessNotes} }

                    {
                        !isBlank(this.props.invoice.owner) &&

                             Customer Rep:  {this.props.invoice.owner.full_name}

                             Phone:  { this.props.invoice.owner.phone}

                             Email:  { this.props.invoice.owner.email }

                    }

        );
    }
}

export default BusinessInformation;

import React, {Component} from "react";
import ContentEditable from "react-contenteditable"
import BusinessInformation from "./BusinessInformation";
import CustomerInformation from "./CustomerInformation";

class Information extends Component {
    constructor(props){
        super(props);
        this.formatHtmlForNotes = this.formatHtmlForNotes.bind(this);
    }

    formatHtmlForNotes(notes){
        let notesArray = notes.split('\n');
        let htmlString = ""

        for (let i = 0; i < notesArray.length; i++){
            let item = notesArray[i];
            if (i == notesArray.length-1){
                htmlString +=  item + "";
            }
            else {
                htmlString += `${item}
`
            }
        }
        return isBlank(htmlString) ? "" : htmlString;
    }

    render() {
        return(







                                    {
                                        this.props.customerToInvoice &&
                                    }

Notes

        );
    }
}

export default Information;

import React, {Component} from "react";
import ServiceTo from './ServiceTo';
import AddressModal from '../../../shared/AddressModal';
import AddressGenericModal from "../../../shared/AddressGenericModal";

class CustomerInformation extends Component {
    constructor(props){
        super(props);
        const { job, customerLocations } = props
        this.state = {
            addressModalShow: false,
            showGenericModal: false,
            customerLocations: customerLocations || [],
            job: job
        }

        this.openAddressModal = this.openAddressModal.bind(this);
        this.closeLocationModal = this.closeLocationModal.bind(this);
        this.openAddressGenericModal = this.openAddressGenericModal.bind(this);
        this.makeServiceAddress = this.makeServiceAddress.bind(this);
        this.updateAddressForm = this.updateAddressForm.bind(this);
    }

    openAddressModal(event){
        this.setState({
            ...this.state,
            addressModalShow: true
        })
    }

    closeLocationModal(event){
        this.setState({
            ...this.state,
            addressModalShow: false,
        })
    }

    openAddressGenericModal(showAddressModal) {
        this.setState({ ...this.state, showGenericModal: showAddressModal })
    }

makeServiceAddress(newServiceAddress){
$(".address-menu").css('display','none');

        const { id } = newServiceAddress;
        const { id:job_id } = this.props.job;
        const that = this;

        $.ajax({
            method: 'PUT',
            url: `/jobs/${job_id}/update_attribute`,
            data: {attribute: 'location_id', value: id},
            success: function(data){
                that.setState({
                    ...that.state,
                    job: data
                })
                gritterSuccess("Success", "Successfully Set Service Address");
            },
            error: function(data){
                gritterError("Error", "Something Error", "10000");
            }
        });
    }

    updateAddressForm(){
        const that = this;
        const { streetAddress, city, state, zipCode, id:newLocationId } = this.genericAddressModal?.state?.addressFormData;
        const locationMethod = newLocationId != '' ? 'PUT' : 'POST';
        const locationUrl = newLocationId != '' ? "/locations/" + newLocationId + ".json" : "/locations.json";

        const location = {
            location: {
                street_address: streetAddress,
                city: city,
                zip_code: zipCode,
                state: state,
                customer_id: this.state?.job?.location?.customer_id
            }
        };

        $.ajax({
            method: locationMethod,
            url: locationUrl,
            data: location,
            success: function(data){
                $.ajax({
                    method: 'GET',
                    url: `/jobs/${that.props.job.id}.json`,
                    success: function(data){
                        that.setState({
                            ...that.state,
                            job: data
                        })
                    },
                    error: function(data){
                        gritterError("Error", "Service Address Not Changed", "10000");
                    }
                });

                newLocationId != ''
                    ? that.setState({
                        ...that.state,
                        customerLocations: that.state.customerLocations.map(ldata => ldata.id == data.id ? data : ldata),
                    })
                    : that.setState({
                        ...that.state,
                        customerLocations: [ ...that.state.customerLocations, data ],
                    })

                if(that.state?.job?.location?.id == data?.id) {
                    const updatedJob = { ...that.state.job, location: data }
                    that.setState({ ...that.state, job: updatedJob, })
                }

                that.genericAddressModal.handleAddressFormShow(false);
                gritterSuccess("Success", "Address Saved Successfully");
            },
            error: function(data){
                gritterError("Error", "Something Error", "10000");
            }
        });
    }

    render() {
        const { invoiceType, handlingInvoiceTemplate, customerToInvoice, serviceTo, invoice, showServiceTo, editable } = this.props;
        const { id:customerId, full_name:fullName, default_location_display:defaultLocationDisplay, email:customerEmail, phone: customerPhone, default_location: customerDefaultLocation} = customerToInvoice;
        const { addressModalShow, job } = this.state;

        return(

                        { editable && !isBlank(job) && !isBlank(job.location) && }
                         { invoiceType }  To:



                        { fullName }




                        { !isBlank(defaultLocationDisplay?.replace(",","")) && defaultLocationDisplay }


                    {!isBlank(customerEmail) &&   { customerEmail }
}
                    {!isBlank(customerPhone) &&   { formatPhoneNumber(customerPhone) }  }

                {
                    (handlingInvoiceTemplate || ( customerId != this.props.serviceTo?.id)) && showServiceTo && serviceTo
                    &&
                }
                {
                    !isBlank(job)
                    && !isBlank(job.location)
                    &&

{ editable && {this.openAddressGenericModal(true)}} >} Service Address:

{ this.state?.job?.display_address }

                }

                {
                    this.state.showGenericModal
                    &&  {this.genericAddressModal = ip}}
                        modalTitle='Manage Properties'
                        openAddressGenericModal={this.openAddressGenericModal}
                        serviceAddress={this.state?.job?.location}
                        customerLocations={this.state?.customerLocations}
                        makeServiceAddress={this.makeServiceAddress}
                        updateAddressForm={this.updateAddressForm}
                    />
                }

        );
    }
}

export default CustomerInformation;

import React, {Component} from "react";

class ServiceTo extends Component {
    constructor(props){
        super(props);
    }

    render() {
        const { handlingInvoiceTemplate, serviceTo } = this.props;
        const { full_name: serviceToFullName, email: serviceToEmail, phone: serviceToPhone, default_location_display: serviceToDefaultLocationDisplay, default_location: serviceTodisplayAddress} = serviceTo;

        return(

                     Service To:

                     {serviceToFullName }



                        {
                            handlingInvoiceTemplate
                                ? serviceToDefaultLocationDisplay
                                : !isBlank(serviceTodisplayAddress.display_address) && serviceTodisplayAddress.display_address
                        }


                     { serviceToEmail }

                     { formatPhoneNumber(serviceToPhone) }

        );
    }
}

export default ServiceTo;

import React, {Component} from "react";
import { getMobileOperatingSystem } from "../../../../../assets/javascripts/fullcalendar_helpers/FCTools";

import LineItemHeaderDesktop from "./Desktop/LineItemHeader";
import LineItemHeaderMobile from "./Mobile/LineItemHeader";

class LineItemDesktopHeader extends Component {
    constructor(props){
        super(props);
    }

    render() {
        return(




        );
    }
}

export default LineItemDesktopHeader;

import React, {Component} from "react";

//Desktop Line Item Header

class LineItemHeader extends Component {
    constructor(props){
        super(props);
    }

    render() {
        return(



                    Category


                    Description


                    Product ID


                    Quantity


                    Price

                    {this.props.enable_total_from_multiplying_by_quantity && (
                        Amount
                    )}
                    {
                        this.props.editable &&



                    }



        );
    }
}

export default LineItemHeader;

import React, {Component} from "react";
import ContentEditable from "react-contenteditable"
import Select from "react-select"
//Desktop Line Item

class LineItem extends Component {
    constructor(props){
        super(props);
    }

    render() {
        const {name, description, quantity, price, productId, enable_total_from_multiplying_by_quantity} = this.props;
        const total = parseFloat(price) * parseFloat(quantity);

        const productSelectWidth = isBlank(name) ? "initial" : `${(8*(name || "").length) + 50}`;
        return(



                      { this.props.editable
                        ?
                        :
                         {name}
                      }


                       {
                          if (e.which == 13) e.preventDefault()
                        }}
                        onBlur={this.props.onLineItemChange}
                        placeholder={this.props.editable ? "Enter Description Here.." : ""}
                        disabled={!this.props.editable}
                      />









                  {enable_total_from_multiplying_by_quantity && (



                    )}
                  {this.props.editable &&

                  }


        );
    }
}

export default LineItem;

import React, {Component} from "react";

import LineItem from "./LineItem";
import LineItemHeader from "./LineItemHeader"

class LineItems extends Component {
    constructor(props){
        super(props);
        this.addLineItem = this.addLineItem.bind(this);
    }

    addLineItem() {
        const { updateLineItems, lineItems } = this.props;
        const newLineItem = {
            name: null,
            product_id: null,
            description: null,
            quantity: 1,
            price: 0,
        }
        updateLineItems([...lineItems, newLineItem])
    }

render() {
const { lineItems, editable, updateLineItems, enable_total_from_multiplying_by_quantity } = this.props;

        //Second sort for safety. This sort was originally here before the one on InvoiceDocument.jsx was added, but this one alone wasn't sufficient.
        // This second sort might be redundant now, however we are leaving it in because it is currently working and we don't want to break it.
        const sortedByPositionLineItems = [...lineItems].sort((a, b) => { //sorts this by position, but appears to not match up with the index. CAREFUL. This part of the code is somewhat fragile. Test well before deploying changes.
            const posA = typeof a.position === "number" ? a.position : Infinity;
            const posB = typeof b.position === "number" ? b.position : Infinity;
            return posA - posB;
        });

        //Note: This is kind of hacky/bad because I don't really understand this code super well. How it is doing this based off the index and based off the position is confusing.
        // In essence, this 'position' attribute modifies where it gets shown to the user, but it doesn't update the 'index' of the original array because the original array
        // is based off the server's position.

        return(


                {
                    sortedByPositionLineItems.map(
                        (lineItem, index) =>

                    )
                }

        );
    }
}

export default LineItems;

import React, {Component} from "react";

//Mobile Line Item Header

class LineItemHeader extends Component {
    constructor(props){
        super(props);
    }

    render() {
        return(



                        Items



                            {this.props.editable &&

                            }



        );
    }
}

export default LineItemHeader;

import React, {Component} from "react";
import Select from "react-select";
import ContentEditable from "react-contenteditable";

//Mobile Line Item

class LineItem extends Component {
    constructor(props){
        super(props); //Need an update method to edit the contents of the line item.
    }

    render() {
        const {name, description, quantity, price, productId} = this.props; //How to handle editable???
        return(


                { this.props.editable ?










                    :

                            {name}

                    }

                         {
                            if (e.which == 13) e.preventDefault()
                            }} //disable newlines
                            onBlur={this.props.onLineItemChange}
                            placeholder={this.props.editable ? "Enter Description Here.." : ""}
                            disabled={!this.props.editable}
                            className='li-desc custom-font-size'
                        />







                        Qty:





                {
                    this.props.enable_total_from_multiplying_by_quantity &&





                            Total:





                }

        );
    }
}

export default LineItem;

import React, {Component} from "react";

import LineItemDesktop from "./Desktop/LineItem";
import LineItemMobile from "./Mobile/LineItem";

class LineItem extends Component {
    constructor(props){
        super(props);
        this.removeLineItem = this.removeLineItem.bind(this);
        this.onLineItemChange = this.onLineItemChange.bind(this);
        this.onLineItemFocus = this.onLineItemFocus.bind(this);
        this.onCategoryLineSelected = this.onCategoryLineSelected.bind(this);

        this.defaultLineItemValues = {
            name: null,
            description: null,
            quantity: 1,
            price: 0,
            product_id: null,
        }
    }

    removeLineItem() {
        const { updateLineItems, lineItems, index} = this.props;
        const newLineItems = lineItems.filter((lineitem, itemIndex)=> itemIndex != index);
        updateLineItems([...newLineItems]);
    }

    onLineItemFocus(event){
        //if event.target === default value.?
        const changedAttribute = event.currentTarget.dataset.attribute;

        switch (changedAttribute) {
            case "description":
                if (event.target.innerHTML == this.defaultLineItemValues.description)
                    window.getSelection().selectAllChildren(event.target)
                break;
            case "name":
                if (event.target.innerHTML == this.defaultLineItemValues.name)
                    window.getSelection().selectAllChildren(event.target)
                break;
            case "quantity":
                    window.getSelection().selectAllChildren(event.target)
                break;
            case "price":
                    window.getSelection().selectAllChildren(event.target)
                break;
        }
    }

    onLineItemChange(event) {
        // debugger;
        console.log("Line item changed!");
        const { lineItems, index, updateLineItems } = this.props;
        const changedAttribute = event.currentTarget.dataset.attribute;
        const updatedLineItems = [...lineItems];
        let cleanedValue = event.target.innerHTML || event.target.value;

        switch (changedAttribute) {
            case "quantity":
                cleanedValue = parseFloat(cleanedValue) ? parseFloat(cleanedValue) : 1;
                break;
            case "price":
                cleanedValue = cleanedValue.replace('$', '').replace(',', '')
                cleanedValue = parseFloat(cleanedValue) ? parseFloat(cleanedValue) : 0.00;
                break;
            case "description":
                cleanedValue = cleanedValue.replace(/ /g, ' '); //clear out any nbsp that comes here. This is due to calling event.target.innerHTML, it is getting HTML elements from it.
                break;
        }

        updatedLineItems[index][changedAttribute] = cleanedValue;
        updateLineItems([...updatedLineItems]);
    }

    onCategoryLineSelected(event){
        const { lineItems, index, updateLineItems } = this.props;
        const updatedLineItems = [...lineItems];

        const productId = event.value;
        const productName = event.label;
        const description = event.data_description;
        const price = event.data_price

updatedLineItems[index].product_id = productId;
updatedLineItems[index].name = productName;

        if (isBlank(lineItems[index].description)){
            updatedLineItems[index].description = description;
        }

        if (lineItems[index].price == this.defaultLineItemValues.price){
            updatedLineItems[index].price = price;
        }

updateLineItems([...updatedLineItems]);
}

    render() {
        const {name, description, quantity, price, editable, index, productId} = this.props;
        return(

        );
    }
}

export default LineItem;

import React, {Component} from "react";

class TotalDue extends Component {
    constructor(props){
        super(props);
    }

    render() {
        const { totalAmount, totalAmountPaid, amountDue, subtotalAmount, salesTaxAmount, enableSalesTaxCalculation, salesTax } = this.props;
        return(
            //TODO: Mike - if (invoice.subTotal > 0 && invoice.sales_tax > 0)

                    {enableSalesTaxCalculation && subtotalAmount > 0 && salesTaxAmount > 0 &&
                        <>

                                    Subtotal:

                                        {formatCurrency(subtotalAmount)}

                                    HST @ {salesTax*100}%:

                                        {formatCurrency(salesTaxAmount)}

                        >
                    }

                            Due:

                            { formatCurrency(amountDue) }

                         Paid:  {formatCurrency(totalAmountPaid)}

                         Original Total:  { formatCurrency(totalAmount) }





        );
    }
}

export default TotalDue;

import React, {Component} from "react";

class InvoiceTemplateLogo extends Component {
    constructor(props){
        //Only needs the image src url for the logo, the invoice document type, the invoice number, (need to be able to set invoice number too), the date + due date.
        super(props);
    }

    render() {
        const { onLogoChange, removeLogo, alternateLogoFromTemplate } = this.props;
        return(

                {

$('#logoOption').toggle()}>

}

{ $('#logoOption').hide(); $('#logoUpload').click()} }>

                        Upload

{ $('#logoOption').hide(); removeLogo();} }>

                        Remove

        );
    }
}

export default InvoiceTemplateLogo;

import React, {Component} from "react";

class InvoiceNumberReadOnly extends Component {
    constructor(props){
        //Only needs the image src url for the logo, the invoice document type, the invoice number, (need to be able to set invoice number too), the date + due date.
        super(props);
    }

    //TODO: how to handle mobile..??
    render() {
        return(

                     Date:

                        { this.props.issuedDate }




                        {this.props.dueDateLabel}

                        { this.props.dueDate }

        );
    }
}

export default InvoiceNumberReadOnly;

import React, {Component} from "react";

class InvoiceNumberEditable extends Component {
    constructor(props){
        //Only needs the image src url for the logo, the invoice document type, the invoice number, (need to be able to set invoice number too), the date + due date.
        super(props);
    }

    render() {
        return(

                     Date:

                        { this.props.issuedDate }




                        {this.props.dueDateLabel}

                        { this.props.dueDate }

        );
    }
}

export default InvoiceNumberEditable;

import React, {Component} from "react";
import ContentEditable from "react-contenteditable"

class IssuedDateReadOnly extends Component {
    constructor(props){
        //Only needs the image src url for the logo, the invoice document type, the invoice number, (need to be able to set invoice number too), the date + due date.
        super(props);

        this.onDueDateChange = this.onDueDateChange.bind(this);
        this.onIssueDateChange = this.onIssueDateChange.bind(this);
        this.invoiceDueText = this.invoiceDueText.bind(this);
    }

    componentDidMount() {
        flatpickr("#invoice-date", {
            altInput: true,
            altFormat: "F j, Y",
            disableMobile: "true",
            onChange: this.onIssueDateChange
        });

        flatpickr("#invoice-due-date", {
            altInput: true,
            altFormat: "F j, Y",
            disableMobile: "true",
            onChange: this.onDueDateChange
        });

SetFlatpickr('invoice-date', this.props.issuedDate);

SetFlatpickr('invoice-due-date', this.props.dueDate);
}

    invoiceDueText(invoiceType){
        if (invoiceType == "Invoice")
            return "Due"
        else if  (invoiceType == "Estimate")
            return "Expires"
        else
            return ""
    }

    onIssueDateChange(selectedDates, date_str, instance) {
        const { setDates } = this.props;
        const currentInvoiceDueDate = $('#invoice-due-date').val();

        setDates(date_str, false)
        if(Number(new Date(date_str)) > new Date(currentInvoiceDueDate)) {
            setDates(date_str, true); //Updating due date when issue date is selected beyond due date
            SetFlatpickr('invoice-due-date', date_str);
        }
    }

    onDueDateChange(selectedDates, date_str, instance) {
        const { setDates } = this.props;
        const currentInvoiceIssuedDate = $('#invoice-date').val();

        setDates(date_str, true)
        if(Number(new Date(date_str)) < new Date(currentInvoiceIssuedDate)) {
            setDates(date_str, false); //Updating isseue date when due date is selected before issue date
            SetFlatpickr('invoice-date', date_str);
        }
    }

render() {

        return(

                        { this.props.handlingInvoiceTemplate ? 'Template ' : this.props.invoiceType + " "}


                        Number:

                             Date:

                        {

                                    {this.invoiceDueText(this.props.invoiceType)}:

                        }

        );
    }
}

export default IssuedDateReadOnly;

import React, {Component} from "react";
import IssuedDateEditable from "./IssuedDateEditable";
import IssuedDateReadOnly from "./IssuedDateReadOnly";
import InvoiceTemplateLogo from "./InvoiceTemplateLogo";

class Header extends Component {
    constructor(props){
        //Only needs the image src url for the logo, the invoice document type, the invoice number, (need to be able to set invoice number too), the date + due date.
        super(props);
    }

componentDidMount(){
$('#logoOption').hide();

        //Handling outside click
        $(window).click(function(event){
            const classes = event.target.classList.value;
            const isInsideClicked = classes.includes('inside')
            if(!isInsideClicked) {
                $('#logoOption').hide()
            }
        });

    }

    render() {
        const { defaultLogo, onLogoChange, removeLogo, editable, setDates, handlingInvoiceTemplate, alternateLogoFromTemplate} = this.props;
        const imageSrc = alternateLogoFromTemplate || defaultLogo;
        return(






                                    {/* This table data column is for the logo, and it should only take up 50% of the invoice document width. */}

                                            {
                                                handlingInvoiceTemplate
                                                && editable
                                                &&
                                            }

                                        {
                                            editable && !handlingInvoiceTemplate
                                            ?
                                            :
                                        }







        );
    }
}

export default Header;

import moment from "moment";
import React, {Component} from "react";

class IssuedDateEditable extends Component {
    constructor(props){
        //Only needs the image src url for the logo, the invoice document type, the invoice number, (need to be able to set invoice number too), the date + due date.
        super(props);
        this.invoiceDueText = this.invoiceDueText.bind(this);
        this.formatHumanReadableDate = this.formatHumanReadableDate.bind(this);
    }

    invoiceDueText(invoiceType){
        if (invoiceType == "Invoice")
            return "Due"
        else if  (invoiceType == "Estimate")
            return "Expires"
        else
            return ""
    }

    formatHumanReadableDate(dateStr){
        return moment(dateStr).format("MMMM Do, YYYY");
    }

    render() {
        return(

                            { this.props.handlingInvoiceTemplate ? 'Template ' : this.props.invoiceType + " "}


                            Number:


                            { this.props.invoiceDisplayNumber }

                 Date:

                    {/* <%= @invoice.issued_on.strftime("%B %d, %Y")%> */}
                    {" " + this.formatHumanReadableDate(this.props.invoice.issued_on)}



                {
                    !this.props.handlingInvoiceTemplate &&

                            {this.invoiceDueText(this.props.invoiceType)+": "}


                            {this.formatHumanReadableDate(this.props.invoice.due_on)}


                }

        );
    }
}

export default IssuedDateEditable;

import React, { Component, useState } from "react";
import LegalDisclaimer from "./LegalDisclaimer";
import TotalDue from "./TotalDue";
import LineItems from "./LineItems/LineItems";
import Header from "./Header/Header";
import Information from "./Information/Information";
import { Button } from "bootstrap";
import Signature from './Signature';
import { success } from "toastr";

class InvoiceDocument extends Component {
constructor(props) {
super(props);

        const {
          invoice,
          handlingInvoiceTemplate,
          logo,
          customerToInvoice,
          serviceTo,
          alternateLogoFromTemplate,
          alternativeBusinessName,
          invoiceTemplateId,
          showServiceTo,
          estimateNumber,
          invoiceNumber,
          business
        } = props;
        const {
          line_items: notSortedByPositionLineItems,
          amount_paid,
          total_price,
          sub_total_price,
          sales_tax_amount
        } = invoice;
        const { enable_sales_tax_calculation, sales_tax } = business;
        // const { line_items: lineItems, amount_paid, total_price } = invoice;
        const amountDue = handlingInvoiceTemplate ? 0 : parseFloat(total_price - amount_paid).toFixed(2) || 0.00;
        const totalAmount = parseFloat(total_price) || 0.00;
        const amountPaid = amount_paid || 0;
        const invoiceDisplayNumber = invoice.invoice_display_number || '0';
        const subtotalAmount = parseFloat(sub_total_price) || 0.00;
        const salesTaxAmount = parseFloat(sales_tax_amount) || 0.00;
        const enableSalesTaxCalculation = enable_sales_tax_calculation || false;
        const salesTax = sales_tax || 0;

        //We need to sort the line_items by their position.
        //There is an issue where if the 'position' is out of sync, then it modifies the wrong line item based on the index not matching the position.
        const sortedByPositionLineItems = [...notSortedByPositionLineItems].sort((a, b) => { //sorts this by position, but doesn't update the index.??
          const posA = typeof a.position === "number" ? a.position : Infinity;
          const posB = typeof b.position === "number" ? b.position : Infinity;
          return posA - posB;
      });

        this.state = {
          jobId: invoice.job_id,
          invoiceId: invoice.id,
          customerId: invoice.customer_id,
          invoiceDisplayNumber: invoiceDisplayNumber,
          invoiceType: invoice.invoice_type,
          customerToInvoice: customerToInvoice,
          serviceTo: serviceTo,
          sentOn: invoice.sent_on,
          notes: invoice.notes || "",
          lineItems: sortedByPositionLineItems || [],
          amountDue: amountDue,
          amountPaid: amountPaid,
          totalPrice: totalAmount,
          issuedDate: invoice.issued_on,
          dueDate: invoice.due_on,
          handlingInvoiceTemplate: false,
          logo: logo,
          alternateLogoFromTemplate: alternateLogoFromTemplate,
          alternativeBusinessName: alternativeBusinessName,
          invoiceTemplateId: invoiceTemplateId,
          invoiceTo: invoice.invoice_to || '',
          showServiceTo: showServiceTo || this.props.shouldInvoiceOtherCustomer,
          subtotalAmount: subtotalAmount,
          salesTaxAmount: salesTaxAmount,
          enableSalesTaxCalculation: enableSalesTaxCalculation,
          salesTax: salesTax,
        }

        this.updateLineItems = this.updateLineItems.bind(this);
        this.setDates = this.setDates.bind(this);
        this.saveInvoiceToServer = this.saveInvoiceToServer.bind(this);
        this.setInvoiceDisplayNumber = this.setInvoiceDisplayNumber.bind(this);
        this.setNotes = this.setNotes.bind(this);
        this.setInvoiceType = this.setInvoiceType.bind(this);
    }

    // saveInvoiceTemplateToServer(){
    //   // saves line items, notes, invoice type, alternative business name, alternative business logo
    //   // Name of invoice template, etc.
    // }

    saveInvoiceToServer(){
      // const totalfiles = $('#attach_images').prop("files").length;
      const formData = new FormData();
      const { handlingInvoiceTemplate } = this.state;
      const basePath = handlingInvoiceTemplate ? 'invoice_templates' : 'invoices'; //Make basepath more generic by taking it as a props such as invoices and invoice_templates
      const url = `/${basePath}/${ this.state.invoiceId ? this.state.invoiceId : ''}`;
      const requestType = `${this.state.invoiceId ? "PUT" : "POST"}`;

      //Temporarily disable images.
      // for (let index = 0; index < totalfiles; index++) {
      //     formData.append("images[]", $('#attach_images').prop("files")[index]);
      // }

      let lineItemsWithPosition = this.state.lineItems.map((item, index) => ({
        ...item,
        position: index
      }));

      const invoice = {
          'invoice_template_id': this.state.invoiceTemplateId,
          'id': this.state.invoiceId,
          'job_id': this.state.jobId,
          'invoice_type': this.state.invoiceType,
          'invoice_display_number': this.state.invoiceDisplayNumber,
          'issued_on': this.state.issuedDate,
          'due_on': this.state.dueDate,
          'notes': this.state.notes,
          'invoice_to_id': isBlank(this.state.invoiceTo) ? '' : this.state.invoiceTo,
          'line_items': lineItemsWithPosition,
      }

formData.append('invoice', JSON.stringify(invoice))

      //Sending data as direct json in case of put request
      //else sending stringfy json where we might send images along with it
      const data = this.state.invoiceId ? {"invoice": invoice} : formData;

//sending content type application/x-www-form-urlencoded for put request where json data is raw instead of string
const contentType = this.state.invoiceId ? "application/x-www-form-urlencoded" : false;

//sending process data true in case of put request and false in post request
const processData = !isBlank(this.state.invoiceId);

      //url will be POST /invoices or POST /invoice_templates or PUT "/invoices/:id" or PUT "/invoice_templates/:id"
      //if invoiceId == null, do a POST to create new invoice, if invoiceId == not null, do a PUT to update the invoice.
      $.ajax({
          url: url,
          type: requestType,
          dataType: 'json',
          data: data,
          processData: processData,
          contentType: contentType,
          success: function(data){
              console.log("Successfully saved invoice!");
              gritterSuccess("Success", "Successfully saved invoice!");
              window.location.href = `/${basePath}/${data.id}`;
          },
          error: function(data){
              console.log("Error Ocurred");
              gritterError(`Error`, "Something went wrong");
          }
      });
  }

    render() {
        return (

              {
                this.props.invoice.signature &&
              }

);
}

    setNotes(event, exactValue = null){
      this.setState({
        ...this.state,
        notes: exactValue || event.target.innerText
      })
    }

    setInvoiceType(event){ //also need to change the invoice display number, replace the "I" with the "E"
      const wasSetToInvoice = event.target.value == "Invoice";
      const wasSetToEstimate = event.target.value == "Estimate";
      let newDisplayNumber = this.state.invoiceDisplayNumber;

//Note: There used to be a bug in this code when using an "InvoiceEditPage", and when editing the invoice type from an invoice to an estimate, or vice versa. These invoiceNumber and estimateNumber props were null, which meant when the user changed the document type, the invoice display number would end up as: null-E, or null-I. This was a bug and confusing to the user. The hack/workaround is by adding invoiceNumber and estimateNumber prop arguments in InvoiceEditPage, and I just set them to be the invoice.invoice_display_number, which ended up having a -I or -E in them already. That's why we strip the number of any non-numeric characters so that we don't end up with a number like 9034-E-E. Which would also be weird behavior. Kind of a hacky workaround, but I want to get this fix out for Perform Heating and Cooling.
if (wasSetToInvoice){

        //See above note to explain why we have to strip letters from the invoiceNumber and estimateNumber props.
        let invoiceNumberWithLetters = this.props.invoiceNumber + "" //sometimes this comes in as an integer, so we must cast to string before calling 'replace' method
        let cleanedInvoiceNumberWithoutLetters = invoiceNumberWithLetters?.replace(/\D/g, ''); //In this example, \D is a regular expression that matches any non-digit character, and the g flag specifies that the expression should be applied globally to the entire string, rather than just the first match. The replace() method replaces all matches with an empty string, effectively removing all non-numeric characters from the input string.
        newDisplayNumber =  cleanedInvoiceNumberWithoutLetters + "-I"; //TODO: there might be a bug based off of the index, if it originaly has an index, and you change to estimate, then back to invoice, it might save over the display_number without the index and cause an issue with having the same display number for 2 invoices.
      }
      else if (wasSetToEstimate){
        let estimateNumberWithLetters = this.props.estimateNumber + "" //sometimes this comes in as an integer, so we must cast to string before calling 'replace' method
        let cleanedEstimateNumberWithoutLetters = estimateNumberWithLetters?.replace(/\D/g, ''); //In this example, \D is a regular expression that matches any non-digit character, and the g flag specifies that the expression should be applied globally to the entire string, rather than just the first match. The replace() method replaces all matches with an empty string, effectively removing all non-numeric characters from the input string.
        newDisplayNumber = cleanedEstimateNumberWithoutLetters + "-E";
      }
      else {
        // do nothing?
        // This shouldn't happen because right nwo there are only 2 possible invoice types -- Invoice and Estimate
      }
      this.setState({
        ...this.state,
        invoiceType: event.target.value,
        invoiceDisplayNumber: newDisplayNumber
      })

      const parentPassedInFunctionToSetInvoiceType = this.props.setInvoiceType != undefined;
      if(parentPassedInFunctionToSetInvoiceType){
        this.props.setInvoiceType(event);
      }
    }

    setInvoiceDisplayNumber(event){
      this.setState({
        ...this.state,
        invoiceDisplayNumber: event.target.innerText
      });
    }

    updateLineItems(items, notes = null) {
      const priceSum = items.reduce(
        (previousValue, lineItem) => previousValue + (parseFloat(lineItem.price ? lineItem.price : 0.00) * lineItem.quantity), 0.00
      )

      let newSubtotalAmount = 0;
      let newTotalAmount = parseFloat(priceSum).toFixed(2) ? parseFloat(priceSum).toFixed(2) : 0.00;
      let newSalesTaxAmount = 0;

      if (this.props.business.enable_sales_tax_calculation) {
        newSubtotalAmount = parseFloat(priceSum).toFixed(2) ? parseFloat(priceSum).toFixed(2) : 0.00;
        newSalesTaxAmount = parseFloat(newSubtotalAmount * this.props.business.sales_tax).toFixed(2);
        newTotalAmount = parseFloat(parseFloat(newSubtotalAmount) + parseFloat(newSalesTaxAmount)).toFixed(2);
      }

const newDueAmount = newTotalAmount - parseFloat(this.props.invoice.amount_paid).toFixed(2);

      // Assign a "position" attribute to each line item based on the index of where it's at so the database remembers its position.
      const updatedItems = items.map((item, index) => ({
        ...item,
        position: index
      })); //TODO: is this where the bug is happening.?

      this.setState({
        ...this.state,
        lineItems: [...updatedItems],
        totalPrice: newTotalAmount,
        amountDue: parseFloat(newDueAmount),
        subtotalAmount: parseFloat(newSubtotalAmount),
        salesTaxAmount: parseFloat(newSalesTaxAmount),
        notes: notes || this.state.notes,
      });
    }

    setDates(date, isDueDate = false) {
      isDueDate
      ? this.setState({ ...this.state, dueDate: date })
      : this.setState({ ...this.state, issuedDate: date })
    }

updateSelectedTemplateValues(selection) {
const { value, business_name, logo, line_items } = selection;

      this.updateLineItems([...this.state.lineItems,
        ...line_items.map(
          function(item) {
            return {
              id: item.id,
              name: item.name,
              description: item.description,
              price: item.price,
              product_id: item.product_id,
              quantity: item.quantity || 1} //this is to ensure there's no null quantity
          })
      ],
      selection.notes);//Hacky to tack on this notes to the updateLineItems call.
      //TODO: Add invoiceTemplateId to save onto this if it was seleted from template select.

      this.setState({
        invoiceTemplateId: value,
        alternateLogoFromTemplate: logo,
        alternativeBusinessName: business_name,
      })
    }

    updateServiceToData(selectedData){
      this.setState({
        ...this.state,
        showServiceTo: true,
        customerToInvoice: selectedData.customer,
        invoiceTo: selectedData.customer.id
      });
    }

    updateInvoiceTo(){
      this.setState({
        ...this.state,
        showServiceTo: false,
        customerToInvoice: this.state.serviceTo,
        invoiceTo: ''
      });
    }
}

export default InvoiceDocument;

import React, { Component } from "react";
import TableBody from "./TableBody";
import TableHeader from "./TableHeader";

class Table extends Component {
    constructor(props) {
        super(props);
    }

render() {
const { sortingUrl, tableData } = this.props;

return (

);
}
}

export default Table;

import React, { Component } from "react";
import SortLink from "../shared/SortLink";

class TableHeader extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (


                    Title



                    Paid
                    Actions


        );
    }
}

export default TableHeader;

import React, { Component } from "react";

class OutstandingInvoices extends Component {
constructor(props){
super(props);

        this.styles = {
          a: {color: "black", float: "left", padding: 0}
        };
    }

    render(){
        const { invoices } = this.props;

        if (invoices == null || invoices == undefined)
            return null;

        return (
            invoices.map((data, index) => (



                        { data.title }


                      {data.amount_due}
                      {data.due_date}

            ))
        );
    }
}

export default OutstandingInvoices;

import React, { Component } from "react";
import InvoiceTemplateDocument from "./InvoiceDocument/InvoiceTemplateDocument";

class InvoiceTemplateEditPage extends Component {
constructor(props) {
super(props);

const name = props.invoice.name || '';
const redirectUrl = props.invoice.redirect_url || '';

        this.state = {
            templateName: name,
            redirectUrl: redirectUrl,
            disableSave: false,
        }

        this.setTemplateName = this.setTemplateName.bind(this);
        this.setRedirectUrl = this.setRedirectUrl.bind(this);
        this.onSaveButtonClick = this.onSaveButtonClick.bind(this);
        this.updateDisableSave = this.updateDisableSave.bind(this);
    }

    setTemplateName(event) {
        const newTemplateName = event.target.value;
        this.setState({
            ...this.state,
            templateName: newTemplateName
        });
    }

    setRedirectUrl(event) {
        const newRedirectUrl = event.target.value;
        this.setState({
            ...this.state,
            redirectUrl: newRedirectUrl
        });
    }

    onSaveButtonClick(event){
        if (!this.state.disableSave){
            this.invoiceTemplateDocument.saveInvoiceTemplateToServer(this.state.redirectUrl);
        }
        this.updateDisableSave(true);
    }

    updateDisableSave(value) {
        this.setState({
            ...this.state,
            disableSave: value,
        })
    }

    render() {
        return (

                    {
                        this.props.editable
                        ?
                        :

{this.props.invoice.name}

}

                {
                    this.props.editable && (

                    )
                }


                {
                    this.props.editable &&

                                {
                                    this.state.disableSave
                                    ?
                                    : 'Save Template'
                                }

                }


                 {this.invoiceTemplateDocument = ip}}
                    updateDisableSave={this.updateDisableSave}
                    templateName={this.state.templateName}
                    redirectUrl={this.state.redirectUrl}
                />

        );
    }
}

export default InvoiceTemplateEditPage;

import React, {Component} from "react"
import ClickableCard from "../shared/ClickableCard";

class InvoiceCard extends Component {
    constructor(props){
        super(props);
    }

    openInvoiceModal(){
        console.log("Open Invoice Modal called");
    }

    getInvoiceAmountColor(){
        if (this.props.invoice.invoice_type == "Invoice"){
            if (this.props.invoice.amount_due > 0){
                return "red";
            }
            else {
                return "green";
            }
        }
        else{
            return "blue";
        }
    }

    getInvoiceDueDateColor(){
        let due_date = moment(this.props.invoice.due_date)
        // let today = moment.today()
        if (due_date < moment()){ //If the due date is before today....
            return "green";
        }
        else {
            return "red";
        }
        //If late, make bright red.
        // If within 15 days of being late, make it a dark yellow color
        // Anything 15 days out, make it green.
    }

    sendInvoiceToCustomer(){
        emailInvoiceToCustomer(this.props.invoice.id);
    }

    collectInvoicePayment(){
        markAsPaid(this.props.invoice.id);
    }

render(){
const {invoice} = this.props;

const cardContent = (

{invoice.customer_name}

{invoice.display_address}

                    {/* TODO: make it red, green, or blue depending on status */}
                     {formatCurrency(invoice.total_price)}     {invoice.short_title}

Date: {moment(invoice.issued_on).format('MMMM d, YYYY')}

Due: {moment(invoice.due_date).format('MMMM d, YYYYY')}

                        {/* airplane */}

                        {/* edit pencil */}

                        {/* collect payment */}

                        {/* download invoice button */}

        )
        return(

        )
    }
}

export default InvoiceCard;

import React, { Component } from "react";
import SearchField from "../shared/SearchField";

class JobsTableTop extends Component {
    constructor(props) {
        super(props);
    }

render() {
const { customerID } = this.props;

return (

);
}
}

export default JobsTableTop;

import { toggleButtonGroupClasses } from '@mui/material';
import React, { Component } from 'react';

class TableBody extends Component {
    constructor(props) {
        super(props);

this.onMergeCheckboxChecked = this.onMergeCheckboxChecked.bind(this);
}

    onMergeCheckboxChecked(event){
        console.log("Merge checked with boxes: ${}");
        if (event.currentTarget.checked){
            this.props.customersToMerge.add(event.currentTarget.value);
        }
        else {
            this.props.customersToMerge.delete(event.currentTarget.value);
        }

        if (this.props.customersToMerge.size > 0){
            this.props.setUserWantsToMerge(true);
        }
        else {
            this.props.setUserWantsToMerge(false);
        }
        console.log(this.props.customersToMerge);
    }

render() {
const { tableData } = this.props;

        return (


                {
                    tableData.map((data, index) => (







                                        { data.full_name }



                            { formatPhoneNumber(data.phone) }
                            { data.email }
                            { this._tools(data) }

                    ))
                }


        );
    }

    _tools(data) {
        const { tableData, permissions } = this.props;
        if( permissions['destroy'] && permissions['update'] ) {
            return(





            );
        } else if( permissions['destroy'] ) {
            return(





            );
        } else if( permissions['update'] ) {
            return(





            );
        } else {
            return(


            );
        }
    }
}

export default TableBody;

import React, { Component } from "react";

class CSVModal extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (

Import Customers

Welcome to the Lightning Service Customer Import!

                                To Import customers into your account, please place your customers into a .csv file.
                                Currently this feature requires specific columns, if you do not have these data columns,
                                don’t worry! You can insert empty columns. Please ensure your csv does not contain
                                columns that are not apart of this list: first_name, last_name,
                                city, phone, company, notes, state,
                                street_address, zip_code, and email. If you’re missing a column,
                                you may leave itempty but please have a header for it at the top of the file.

                            CSV file

                                Cancel

);
}
}

export default CSVModal;

import React, { Component } from "react";
import CustomerSideBySide from "./CustomerSideBySide";

class CustomerMergeTool extends Component {
constructor(props) {
super(props);

        this.state = {
            isLoading: true,
            baseCustomerRecord: {message: 'loading'},
            toMergeCustomerRecord: {message: 'loading'},
        }

this.mergeRecordIntoBase = this.mergeRecordIntoBase.bind(this);
}

    componentDidMount(){
        const { baseCustomerId, toMergeCustomerId} = this.props;
        // go fetch the customer records from the server in preparation for a merge.
        $.get({
            url: `/customers/${baseCustomerId}.json`,
            success: (data) => {
                this.setState({...this.state, isLoading: false, baseCustomerRecord: data})
            }})

        $.get({
            url: `/customers/${toMergeCustomerId}.json`,
            success: (data) => {
                this.setState({...this.state, isLoading: false, toMergeCustomerRecord: data})
            }})
    }

    mergeRecordIntoBase(){
        $.post({
            url: "/customers_merge",
            data: {base_id: this.props.baseCustomerId, other_id: this.props.toMergeCustomerId},
            success: function(data){
                gritterSuccess("Merged Customer", "Successfully merged the customer");
            }});
    }

render() {
const { baseCustomerId, toMergeCustomerId } = this.props;

        return (

                        {/* {JSON.stringify(this.state.baseCustomerRecord, null, 2)} */}

                        {/* {JSON.stringify(this.state.toMergeCustomerRecord, null, 2)} */}

Merge Records!

        );
    }
}

export default CustomerMergeTool;

import React, {Component} from "react";

class CustomerSideBySide extends Component{
    constructor(props){
        super(props);
    }

    formattedRecord(){
        Object.entries(this.props.customerRecord).forEach(([key, value]) => {
            console.log("Key: " + key);
            console.log("Value: "  + value);
        })
    }

    render(){
        const {customerRecord} = this.props;
        return (

                {Object.entries(customerRecord).map(([key, value]) => {
                    console.log("Key: " + key);
                    console.log("Value: " + value);
                    return (

{key}: {value != null && value.constructor === "string".constructor ? value : JSON.stringify(value, null, 2)}

                    )
                })}

)
}
}

export default CustomerSideBySide;

import CSVModal from "./CSVModal";
import React, { Component } from "react";
import Table from "./Table";
import TableTop from "./TableTop";

class Index extends Component {
constructor(props) {
super(props);

        this.state = {
            userWantsToMerge: false,
            customersToMerge: new Set(),
        }

        this.setUserWantsToMerge = this.setUserWantsToMerge.bind(this);
        this.mergeAllRecords = this.mergeAllRecords.bind(this);
    }

    setUserWantsToMerge(doesUserWantToMerge){
        console.log("Set user wants to merge was set to: " + doesUserWantToMerge)
        this.setState({...this.state, userWantsToMerge: doesUserWantToMerge})
    }

    mergeAllRecords(){
        let baseRecord = [...this.state.customersToMerge][0]; // we are taking first one checked to be base record
        this.state.customersToMerge.delete(baseRecord);

        $.post({
            url: "/customers_merge_all",
            data: {base_id: baseRecord, others_to_merge: [...this.state.customersToMerge]},
            success: function(data){
                gritterSuccess("Success", "Merged all customer records into one");
                window.location.reload();
            }
        })
    }

    render() {
        const { tableData, permissions, connectedToQuickbooks } = this.props;
        console.log(connectedToQuickbooks)
        return (

                    {this.state.userWantsToMerge
                        ?

Merge {this.state.customersToMerge.size} customer records into one?

Yes

No

                        :
                            null
                        }

        );
    }
}

export default Index;

import React, {Component} from "react"
import JobIndex from "./../jobs/JobIndex"
import NavigationButton from "./navigation/NavigationButton"
import CustomerViews from "./CustomerViews"
import InvoiceIndex from "./InvoiceIndex"

class InfoPage extends Component{
    constructor(props){
        super(props);
        this.handleNavigation = this.handleNavigation.bind(this);

        this.state = {
            activeView: CustomerViews.job,
        }
    }

    render(){
        const activeView = this.getActiveView(this.state.activeView);
        return(

                {activeView}

)

}

    /**
     * Depending on what view is selected, here is where we render the relevant views. Right now we have competing views from the app/views/shared views and the views from within our components.
     * @param {*} view
     * @returns
     */
    getActiveView(view){
        switch(view){
            case(CustomerViews.job):
                return
            case(CustomerViews.invoice):
                return
            case(CustomerViews.property):
                return

case(CustomerViews.contact):
return

}
return

}

    handleNavigation(e, data){
        this.setState({activeView: e.target.dataset.viewname})
    }
}

export default InfoPage;

const CustomerViews = {
    job: "job",
    invoice: "invoice",
    property: "property",
    contact: "contact"
}

export default CustomerViews;

import React, { Component } from 'react';
import TableBody from "./TableBody";
import TableHeader from "./TableHeader";

class Table extends Component {
    constructor(props) {
        super(props);
    }

render() {
const { tableData, permissions } = this.props;

return (

);
}
}

export default Table;

import React, { Component } from "react";
import SortLink from "../shared/SortLink";

class TableHeader extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (




                    Phone




        );
    }
}

export default TableHeader;

import React, { Component } from "react";
import SearchField from "../shared/SearchField";
import QuickbooksIcon from 'images/quickbooks-assets/C2QB_green_btn_sm_hover.png' //https://stackoverflow.com/questions/46844499/how-to-handle-images-in-a-rails-webpacker-react-app

class TableTop extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (

{ this._newLink() }

);
}

_newLink() {
const { permissions, _ } = this.props;

        if( permissions["create"] ) {
            return();
        } else {
            return null;
        }
    }

    _quickbooksIcon(){
        const { _, connectedToQuickbooks } = this.props
        if (connectedToQuickbooks){
            return (


            )
        } else {
            return null;
        }
    }
}

export default TableTop;

import React, {Component} from "react";
import InvoiceCard from "./InvoiceCard";

class InvoiceIndex extends Component{
    constructor(props){
        super(props);
    }

    render(){
        const {invoices} = this.props;

        //TODO: We'll map over all the invoices and create an InvoiceCard for each one.

        return(

                {
                    invoices.map((invoice, index) => (

                    ))
                }

        )
    }
}

export default InvoiceIndex;

import React, {Component} from "react";

class NavigationButton extends Component{
    constructor(props){
        super(props);
    }

    // componentDidMount(){
    //     const {active, text, handleNavigation, id} = this.props;
    //     if (active){
    //         document.getElementById(id).style.visibility = "visible";
    //     }
    //     else{
    //         document.getElementById(id).style.visibility = "hidden";
    //     }
    // }

render(){
const {active, text, handleNavigation, viewName} = this.props;

        return (
            //How to set the job visibility in a smart way..??
            {text}
        )
    }
}

export default NavigationButton;

import React, {useState} from "react";

import Modal from 'react-bootstrap/Modal'
import Button from 'react-bootstrap/Button';
import Flatpickr from "react-flatpickr";

export default function TimesheetEditModal(props){
    const {activeTimesheetId,
         timesheetCustomerName,
         timesheetEmployeeName,
         clockedInTime,
         clockedOutTime,
         timesheets,
         setTimesheets,
         isOpen,
         setIsOpen} = props;

    return (
         setIsOpen(false)} centered>

        {modalTitle}



                Clocked In:
                 {
                        console.log("datetime changed: " + date)
                        setClockedInTime(date);
                    }}
                />

                Clocked Out:
                 {
                        console.log("datetime changed: " + date)
                        setClockedOutTime(date);
                    }}
                />



         setIsOpen(false)}>
            Close


            Save Changes



    )
}

import React, {useState, useEffect} from "react"
import TableDataNotEditable from "../shared/TableDataNotEditable"
import Modal from 'react-bootstrap/Modal'
import Button from 'react-bootstrap/Button';
import Flatpickr from "react-flatpickr";

export default function TimesheetsTable({timesheets, setTimesheets}){
    const [isOpen, setIsOpen] = useState(false);
    const [activeTimesheetId, setActiveTimesheetId] = useState(0)
    const [modalTitle, setModalTitle] = useState("");
    const [clockedInTime, setClockedInTime] = useState(null);
    const [clockedOutTime, setClockedOutTime] = useState(null);

    const readableTimesheetKeys = {id: 0, customerName: 1, clockedIn: 2, clockedOut: 3, duration: 4, employeeName: 5}
    const flatpickrOptions = {
        enableTime: true,
        altInput: true,
        altFormat: 'F j, h:i K',
        minTime: "6:00",
        maxTime: "22:00",
    }

    const editButtonClicked = (timesheetId, timesheetData) => {
        console.log("Edit button clicked! About to hit debugger");
        console.log("Time sheet Id: " + timesheetId);
        console.log("Time sheet data: ");
        console.log(timesheetData);
        setActiveTimesheetId(timesheetId);

// let timesheetsData = timesheetsData
let foundTimesheet = timesheetData.find(timsheet => timsheet[0] == timesheetId)

        //Why is it always indexing into 0..? That's not right. I think that's where this issue is coming from.
        setModalTitle(`${foundTimesheet[readableTimesheetKeys["customerName"]] == null ? "" : foundTimesheet[readableTimesheetKeys["customerName"]]} -- ${foundTimesheet[readableTimesheetKeys["employeeName"]]}`);
        const clockedIn = foundTimesheet[readableTimesheetKeys["clockedIn"]]
        const clockedOut = foundTimesheet[readableTimesheetKeys["clockedOut"]]
        console.log('clocked in: ' + clockedIn + ' clocked out: ' + clockedOut)
        setClockedInTime(clockedIn)
        setClockedOutTime(clockedOut)
        setIsOpen(true);
    }; //after a timesheet gets edited.. we need to modify the state somehow.

    return(

             [
                        timesheet.id,
                        timesheet.customer_name,
                        timesheet.clocked_in == null ? "_" : moment(timesheet.clocked_in).format("MM/DD/YY hh:mm a"),
                        timesheet.clocked_out == null ? "_" : moment(timesheet.clocked_out).format("MM/DD/YY hh:mm a"),
                        formatDuration(timesheet.duration),
                        timesheet.employee_name])}
                actions={{delete: true, edit: true}}
                editModalOnClick={editButtonClicked}
            />

             setIsOpen(false)} centered>

                {modalTitle}



                        Clocked In:
                         {
                                console.log("datetime changed: " + date)
                                setClockedInTime(date);
                            }}
                        />

                        Clocked Out:
                         {
                                console.log("datetime changed: " + date)
                                setClockedOutTime(date);
                            }}
                        />



                 setIsOpen(false)}>
                    Close


                    Save Changes




        )
}

import React, { Component, useState } from "react"
import SimpleToggleButtonGroup from "../shared/SimpleToggleButtonGroup";
import DateRangePicker from "../shared/DateRangePicker";
import JobTimesheetHeader from "./JobTimesheetHeader";
import EmployeeTimesheetHeader from "./EmployeeTimesheetHeader";

class Index extends Component{
    constructor(props){
        super(props);
        this.state = {
            selectedTimesheetViewType: 'Job',
        }
    }

    render(){
        const {job_timesheets, employee_timesheets, start_date, end_date} = this.props; //TODO: pass these in appropriately.
        const job_timesheets_array = Object.entries(job_timesheets) //Triple nested array [[job_id, [{timesheet 1 hash}, {timesheet 2 hash}, etc..]]]
        const employee_timesheets_array = Object.entries(employee_timesheets) //Triple nested array [[job_id, [{timesheet 1 hash}, {timesheet 2 hash}, etc..]]]

        return(

                         {
                                this.setState({...this.state, selectedTimesheetViewType: newValue})
                            }}/>

                {/* Collapsible Section for Each Job */}
                {this.state.selectedTimesheetViewType == "Job" && job_timesheets_array.map((entry) => (

                ))}
                {this.state.selectedTimesheetViewType == "Employee" && employee_timesheets_array.map((entry) => (

                ))}
                {/* for each job, sorted by most recent to least recent. Then show each time card (sorted by employee alphabetically on that job), show the date, customer name, clocked in, clocked out, duration., edit pencil, delete. */}
                {/* If it's view by job toggle.. show, what? A list of the jobs, and the timesheets nested underneath them that can be edited or deleted. */}
                {/* for each employee (sorted alphabetically), show a title. Then show each time card (sorted by most recent to least recent), show the date, customer name, clocked in, clocked out, duration, edit pencil, delete. */}
                {/* If it's view by employee toggle.. show a list of the employees, and the timesheets nested underneath them (summed), that can be edited or deleted.
                It will be a table of the employees and the timesheets will get matched to the jobs. */}

        )
    }
}
export default Index;

import React, {useState, useEffect} from "react";
import TimesheetsTable from "./TimesheetTable";

export default function EmployeeTimesheetHeader({employeeId, timesheets}){
    const [isOpen, setIsOpen] = useState(false);
    const [employeeHeaderInfo, setEmployeeHeaderInfo] = useState(null);
    const [duration, setDuration] = useState("");
    const [currentTimesheets, setCurrentTimesheets] = useState(timesheets);

    useEffect(() => { // An AJAX request to the server to request the employeeHeaderInfo that will have all sorts of info we need to render this component.
        if (employeeId == "" || employeeId == null){
            setEmployeeHeaderInfo({"employee_full_name": "Unassigned"})
        }
        else {
            $.get(
                {url: `/employees/${employeeId}/info`,
                success: function(data){
                    console.log(data);
                    setEmployeeHeaderInfo(data);
                }
            })
        }
    }, [])

    useEffect(() => {
        setDuration(formatDuration(totalDurationForTheseTimesheets()));
    }, [currentTimesheets])

    const totalDurationForTheseTimesheets = () => {
        const durationSum = currentTimesheets.map((timesheet) => timesheet.duration).reduce((sumSoFar, duration) => sumSoFar + duration);
        return durationSum;
    }

return(

{setIsOpen(!isOpen)}}
style={{borderRadius: 13}}>

{timesheets[0] == null ? '...' : formatReadableDate(timesheets[0]["clocked_in"])}

{employeeHeaderInfo == null ? 'Loading ...' : employeeHeaderInfo["full_name"]}

{duration}

{isOpen ? : }

{isOpen && }

)
}

import React, {useState, useEffect} from "react";
import TimesheetsTable from "./TimesheetTable";

export default function JobTimesheetHeader({jobId, timesheets}){
    const [isOpen, setIsOpen] = useState(false);
    const [jobHeaderInfo, setJobHeaderInfo] = useState(null);
    const [duration, setDuration] = useState("");
    const [currentTimesheets, setCurrentTimesheets] = useState(timesheets);

    useEffect(() => { // An AJAX request to the server to request the jobHeaderInfo that will have all sorts of info we need to render this component.
        if (jobId == "" || jobId == null){
            setJobHeaderInfo({"customer_full_name": "General Time"})
        }
        else {
            $.get(
                {url: `/jobs/${jobId}.json`,
                success: function(data){
                    console.log(data);
                    setJobHeaderInfo(data);
                }
            })
        }
    }, [])

    useEffect(() => {
        setDuration(formatDuration(totalDurationForTheseTimesheets()));
    }, [currentTimesheets])

    const totalDurationForTheseTimesheets = () => {
        const durationSum = currentTimesheets.map((timesheet) => timesheet.duration).reduce((sumSoFar, duration) => sumSoFar + duration);
        return durationSum;
    }

return(

{setIsOpen(!isOpen)}}
style={{borderRadius: 13}}>

{jobHeaderInfo == null ? '...' : formatReadableDate(jobHeaderInfo["updated_at"])}

{jobHeaderInfo == null ? 'Loading ...' : jobHeaderInfo["customer_full_name"]}

{jobHeaderInfo == null ? '...' : jobHeaderInfo["display_address"]}

{duration}

{isOpen ? : }

{isOpen && }

)
}

import React, {useState, useEffect} from "react"
import TableDataNotEditable from "../shared/TableDataNotEditable"
import Modal from 'react-bootstrap/Modal'
import Button from 'react-bootstrap/Button';

export default function LocationsTable({locations, setLocations}){
    const [isOpen, setIsOpen] = useState(false);
    const [isSaveButtonLoading, setIsSaveButtonLoading] = useState(false);
    const [activeLocationId, setActiveLocationId] = useState(0);

    const [streetAddress, setStreetAddress] = useState("");
    const [city, setCity] = useState("");
    const [zip, setZip] = useState(null);
    const [state, setState] = useState(null);
    const [modalTitle, setModalTitle] = useState("");

    const editButtonClicked = (locationId, locationData) => {
        console.log("Edit button clicked for location! About to hit debugger");
        console.log("Location Id: " + locationId);
        console.log("Location data: ");
        console.log(locationData);
        setActiveLocationId(locationId);

        const selectedLocation = locations.find(location => location.id == locationId);
        console.log("Selected Location: ", selectedLocation);
        setStreetAddress(selectedLocation.street_address);
        setCity(selectedLocation.city);
        setZip(selectedLocation.zip_code);
        setState(selectedLocation.state);
        setModalTitle("Edit Location");
        setIsOpen(true);
    }; //after a timesheet gets edited.. we need to modify the state somehow.

    return(

             [
                        location.id,
                        location.street_address,
                        location.city,
                        location.zip_code,
                        location.is_billing_address == true ? "Is Billing" : {url: `/locations/${location.id}/make_default`, icon: 'fa-map-marked'}])}
                actions={{delete: true, edit: true}}
                editModalOnClick={editButtonClicked}
            />

             setIsOpen(false)} centered>

                {modalTitle}



                        {/* TODO: customer location fields/form. */}
                        Street Address:
                         setStreetAddress(e.target.value)} />

City:
setCity(e.target.value)} />

Zip:
setZip(e.target.value)} />

                        state:
                         setState(e.target.value)} />




                 setIsOpen(false)}>
                    Close

                {isSaveButtonLoading ?


                        Saving...

                        :

                        Save Changes

                }



        )
}

import React, { Component, useState } from "react"
import LocationsTable from "./LocationsTable";

export default function LocationsIndex(props){
    const [locations, setLocations] = useState(props.locations);
        return(

        )
}

import React, { Component } from 'react';

class TableBody extends Component {
    constructor(props) {
        super(props);
    }

render() {
const { tableData } = this.props;

        return (

            {
                tableData.map((data, index) => (

                        { data.resource }
                        { data.action }
                        { this._toolsColumnField(data) }

                ))
            }

        );
    }

_toolsColumnField(data) {
const { displayTools } = this.props;

        if( displayTools ) {
            return(








            );
        } else {
            return null;
        }
    }
}

export default TableBody;

import React, { Component } from 'react';
import TableBody from "./TableBody";
import TableHeader from "./TableHeader";

class Table extends Component {
    constructor(props) {
        super(props);
    }

render() {
const { displayTools, tableData } = this.props;

return (

);
}
}

export default Table;

import React, { Component } from "react";

class TableHeader extends Component {
    constructor(props) {
        super(props);
    }

render() {
const { displayTools } = this.props;

        return (


                Resource
                Action
                { this._toolsColumnHeader() }


        );
    }

_toolsColumnHeader() {
const { displayTools } = this.props;

        if( displayTools ) {
            return();
        } else {
            return null;
        }
    }
}

export default TableHeader;

import React, { useEffect, useState, useRef, useCallback } from 'react';
import axios from 'axios';
import Modal from 'react-modal';

function BusinessImagesToAssign() {
  const [images, setImages] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [selectedImages, setSelectedImages] = useState([]);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [formData, setFormData] = useState({
    firstName: '',
    lastName: '',
    city: '',
    zipCode: '',
    streetAddress: '',
    jobNotes: '',
    jobTitle: '',
    price: '',
  });
  const [page, setPage] = useState(1);
  const observer = useRef();

  const galleryStyle = {
    display: 'grid',
    gridTemplateColumns: 'repeat(auto-fill, minmax(250px, 1fr))',
    gridGap: '15px',
    padding: '15px',
  };

  const imgStyle = {
    width: '100%',
    height: 'auto',
    border: '1px solid #ccc',
    boxShadow: '2px 2px 6px 0px rgba(0,0,0,0.2)',
    borderRadius: '4px',
    objectFit: 'cover',
  };

  useEffect(() => {
    loadImages(page);
  }, [page]);

  const openModal = () => {
    setIsModalOpen(true);
  };

  const closeModal = () => {
    setIsModalOpen(false);
  };

  const handleInputChange = (e) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value,
    });
  };

return (

      Assign Images to New Job

Selected Images:

            {selectedImages.map((img_idx, index) => (

            ))}

            First Name:

            Last Name:

            City:

            Zip Code:

            Street Address:

            Job Notes:

            Job Title:

            Price:

          Submit

        {images.map((img, index) => {
          if (images.length === index + 1) {
            return (
               imagePressed(index)}
                style={{
                  ...imgStyle,
                  borderColor: `${selectedImages.includes(index) ? 'red' : ''}`,
                  borderWidth: `${selectedImages.includes(index) ? '3px' : '1px'}`,
                }}
                src={img.url}
                alt="Business Image"
              />
            );
          } else {
            return (
               imagePressed(index)}
                style={{
                  ...imgStyle,
                  borderColor: `${selectedImages.includes(index) ? 'red' : ''}`,
                  borderWidth: `${selectedImages.includes(index) ? '3px' : '1px'}`,
                }}
                src={img.url}
                alt="Business Image"
              />
            );
          }
        })}

{isLoading &&

Loading...

}

);
}

export default BusinessImagesToAssign;

import React, {Component} from "react";
class EventsIndex extends Component{
    constructor(props){
        super(props);
        this.state = {
            events: props.events,
            business: props.business,
        }
        this.fetchFilteredEvents = this.fetchFilteredEvents.bind(this);
    }

    fetchFilteredEvents = () => {
        let selectedBusinessId = $('#select_business').val()
        let url = isBlank(selectedBusinessId) ? '/events.json' : `/events.json?business_id=${selectedBusinessId}`;
        $.get({
            url: url,
            params: {business_id: 1},
            success: (data) => {
                this.setState({
                    ...this.state,
                    events: data
                });
            }
        });
        $.get({
            url: '/businesses/business_info.json',
            params: {business_id: 1},
            success: (data) => {
                this.setState({
                    ...this.state,
                    business: data
                });
            }
        })
    }

render(){
const { events, businesses, employees } = this.props;

        // Sort businesses by 'created_at' in descending order
        businesses.sort((a, b) => {
            if (a.created_at > b.created_at) return -1;
            if (a.created_at < b.created_at) return 1;
            return 0;
        });

        let businessOptions = businesses.map((business) =>
             {business.name} - {business.id}
        );

        let employeeOptions = employees.map((employee) =>
             {employee.full_name}
        );

        let eventRows = this.state.events.map((event) =>
        // let eventRows = events.reverse().map((event) =>

                 {event.business_name}
                 {event.employee_name}
                { event.name}
                { event.resource}
                { event.resource_id}
                { evaluateReadableDateTime(event.created_at)} {event.created_at}

        );
        return(

            {/* {this.state.business != null

            ?

{this.state.business?.name}

Job Request Link (open in incognito)

            : null
            } */}

                    {/* Start Range */}

                    {/* End Range */}

                    {/* Generate */}
                     {
                        //navigate to that businesses page.
                        window.location.href = `/events/business?id=${$('#select_business').val()}`
                    }}>Generate

                {/* Business   */}

                All
                {businessOptions}

                {/* Employee   */}

                All
                {employeeOptions}

                Business
                Employee Name
                Event Type
                Resource
                Resource ID
                Time of Event

                {eventRows}






        );
    }
}

export default EventsIndex;

import React, { Component } from 'react';

class TableBody extends Component {
    constructor(props) {
        super(props);
    }

render() {
const { tableData } = this.props;

        return (

            {
                tableData.map((data, index) => (


                        { data.display_address }
                        { this._toolsField(data) }

                ))
            }

        );
    }

    _toolsField(data) {
        const { permissions } = this.props;
        console.log("Permissions: " + permissions);
        if( permissions["destroy"] && permissions["update"]) {
            return (











            );
        } else if( permissions["destroy"] ) {
            return (








            );
        } else if( permissions["update"] ) {
            return (








            );
        } else {
            return (





            );
        }
    }
}

export default TableBody;

import React, { Component } from "react";
import Table from "./Table";
import TableTop from "./TableTop";

class Index extends Component {
    constructor(props) {
        super(props);
    }

render() {
const { tableData, permissions } = this.props;

return (

);
}
}

export default Index;

import React, {Component} from "react"

class InvoiceOnCard extends Component {
    constructor(props){
        super(props);
    }

render(){
const {invoice} = this.props

return (

{formatCurrency(invoice.total_price)}

{invoice.short_title}

View

)
}

    getColor(){
        const {invoice} = this.props
        if (invoice.invoice_type == "Invoice"){
            if (invoice.amount_due > 0){
                return "red"
            } else {
                return "green"
            }
        } else {
            return "blue"
        }
    }
}

export default InvoiceOnCard;

import React, {Component} from "react"

class AppointmentOnCard extends Component{
    constructor(props){
        super(props);
    }

    render(){
        const {appointment} = this.props;
        const appointmentTitle = appointment.appointment_type_name != "No Type" ? appointment.appointment_type_name : ""
        return(

{appointmentTitle} {appointment.formatted_start} - {moment(appointment.end).utc().format("hh:mm a")} -- {appointment.employee_first}

        )
    }
}

export default AppointmentOnCard;

import React, { Component } from "react";
import JobCard from "./JobCard";

class JobIndex extends Component {
    constructor(props) {
        super(props);
    }

render() {
const { data } = this.props;

        const responsiveStyleWrapper = {
            overflowX: "auto"
        }

        return (

                {
                    data.map((jobData, index) => (

                    ))
                }

        );
    }
}

export default JobIndex;

import React, { Component } from 'react';
import TableBody from "./TableBody";
import TableHeader from "./TableHeader";

class Table extends Component {
    constructor(props) {
        super(props);
    }

render() {
const { tableData, permissions } = this.props;

return (

);
}
}

export default Table;

import React, {Component} from "react";
import ClickableCard from "../shared/ClickableCard";
import InvoiceOnCard from "./InvoiceOnCard"
import AppointmentOnCard from "./AppointmentOnCard"

class JobCard extends Component {
    constructor(props){
        super(props);
    }

render(){
const { jobData } = this.props;

        var invoiceSection = null;
        if (jobData.invoices != null && jobData.invoices.length > 0){
            invoiceSection =

                    {
                        jobData.invoices.map((invoice, index) => (

                        ))
                    }
                ;
        }

        var appointmentSection = null;
        if (jobData.appointments != null && jobData.appointments.length > 0){
            appointmentSection =

                    {
                        jobData.appointments.map((appointment, index) => (

                        ))
                    }
                ;
        }

        function openJobModal(){
            console.log("Job Clicked!");
        }

//Job Title Job Owner
//Address

        //Invoices...
        //Invoice amount (Red if owed, Green if paid, Blue if estimate)             Invoice Number/Name

        //Appointments..
        //Appointments      Appointment Type, Date, Start Time, End Time, Employee

const jobContent = (

{jobData.job_title}

                    { //If this job has a job owner, show their name, otherwise leave it blank.
                        jobData.owner_id != null ?

(

{jobData.owner_full_name}

)
:
(

)
}

                        {
                            jobData.location != null ? jobData.location.display_address : ""
                        }

{invoiceSection}

{appointmentSection}

        )

        return(

        );
    }
}

export default JobCard;

import React, { Component } from "react";
import SortLink from "../shared/SortLink";

class TableHeader extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (



                    Address



        );
    }
}

export default TableHeader;

import React, { Component } from "react";
import SearchField from "../shared/SearchField";

class TableTop extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (

                { this._newJobLink() }

);
}

_newJobLink() {
const { permissions } = this.props;

        if( permissions["create"] ) {
            return();
        } else {
            return null;
        }
    }
}

export default TableTop;

import React, { useState, useEffect } from 'react';

    useEffect(() => {
        debugger;
    }, [

    ])

    const handleSubmit = (e) => {
        e.preventDefault();
        // Here you can call the method to post data to your Rails backend
        console.log({ notes, keywords, customerName, address, selectedImages });
    };

    return (

                Notes:
                 setNotes(e.target.value)} />

                Keywords:
                 setKeywords(e.target.value)} />

                Customer Name:
                 setCustomerName(e.target.value)} />

                Address:
                 setAddress(e.target.value)} />

                Images:
                {images.map((image, index) => (

                         handleImageCheck(image, e.target.checked)}
                        />

))}

            Submit

    );
};

export default SEOForm;

import React, {Component} from "react";
import BillToDifferentCustomer from "../invoices/BillToDifferentCustomer";

class AddressModal extends Component {
    constructor(props){
        super(props);
    }

render() {
const { addressModalShow, modalTitle } = this.props

        return (
            <>
            {
                addressModalShow &&

Manage Locations

{/*

Close

*/}

            }
            >
        );
    }
}

export default AddressModal;

// Filename - Progress_bar.js

import React from 'react'

const ProgressBar = ({bgcolor,progress,height}) => {
    const Parentdiv = {
        height: height,
        width: '80%',
        backgroundColor: 'whitesmoke',
        borderRadius: 40,
        margin: 50
      }

      const Childdiv = {
        height: '100%',
        width: `${progress}%`,
        backgroundColor: bgcolor,
        borderRadius:40,
        textAlign: 'right'
      }

      const progresstext = {
        padding: 10,
        color: 'black',
        fontWeight: 900
      }

    return (

        {/* {`${progress}%`} */}
        {""}

)
}

export default ProgressBar;

import React, { Component } from "react";

class SortLink extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        const { name, url, dbParamName } = this.props;
        const paramName = dbParamName || this._paramName();
        const direction = (this._checkURL(`${paramName}+asc`)) ? "desc" : "asc";

        return (
            { `${name} ${this._arrowIcon()}` }
        );
    }

    /**
     * Returns an arrow icon if page is sorted on this field.
     * Returns a blank string otherwise.
     *
     * @private
     */
    _arrowIcon() {
        const { dbParamName } = this.props;
        const paramName = dbParamName || this._paramName();

        if( this._checkURL(`${paramName}+asc`) ) {
            return " ▲";
        }
        if( this._checkURL(`${paramName}+desc`) ) {
            return " ▼";
        }

return "";
}

    /**
     * Returns true if URL contains value, else returns false.
     * @private
     */
    _checkURL(value) {
        return window.location.href.toLowerCase().includes(value);
    }

    /**
     * Returns url parameter name for this link.
     *
     * @private
     */
    _paramName() {
        const { name } = this.props;

return name.toLowerCase().replace(" ", "_");
}
}

export default SortLink;

import React, { Component } from 'react';

class SearchField extends Component {
    constructor(props) {
        super(props);
    }

render() {
const { action, search } = this.props;

        return (




        );
    }
}

export default SearchField;

import React, { Component } from 'react';
import TableData from "./TableData";
import DateRangePicker from "./DateRangePicker";

class IndexPage extends Component {
constructor(props){
super(props);

this.openSearchBar = this.openSearchBar.bind(this);
}

    openSearchBar() {
        const search = prompt("Search");
        const data = document.getElementsByClassName('tdData');

        if (search != null) {
            for (let d = 0; d < data.length; d++) {
                const text = data[d].innerText.split(" ");

                for (let i = 0; i < text.length; i++) {
                    let index = text[i];
                    let splitIndex = index.split("");
                    if (index.toLowerCase().includes(search.toLowerCase())) {
                        for (let si = 0; si < index.length; si++) {
                            if (search.toLowerCase().includes(index[si].toLowerCase())) {
                                splitIndex[si] = `${index[si]}`;
                                text[i] = splitIndex.join("");
                            }
                        }
                    }
                }

                data[d].innerHTML = text.join(" ");
            }
        }
    }

    render(){
        const {title, attributes, data, basePath, updateProduct, removeProduct, handleProductPriceSorting, handleProductNameSorting, showNewProductButton} = this.props;
        return(

{title}

                {
                    this.props.showDatePicker &&
                }

        );
    }
}

export default IndexPage;

import React, {Component} from 'react';

class ClickableCard extends Component {
    constructor(props){
        super(props);
    }

render(){
const { content, onClick } = this.props;

return(

{content}

);
}
}

export default ClickableCard;

import React, { Component } from "react";
import ContentEditable from "react-contenteditable"

/**
* The contractor who edited this recently broke the single responsibility issue and did not keep the proper level of abstraction here.
* So now, this component is tightly coupled with the "product" table, thus breaking our abstraction and introducing a whole host of issues.
* So this class should not be reused by other components until it is uncoupled and we put the correct level of abstraction back to it.
*/
class TableData extends Component{
constructor(props){
super(props)

        this.addNewProduct = this.addNewProduct.bind(this);
        this.saveProductsData = this.saveProductsData.bind(this);
        this.removeProductsRow = this.removeProductsRow.bind(this);
        this.productAttrUpdate = this.productAttrUpdate.bind(this);
    }

    addNewProduct(){
        const { updateProduct } = this.props;
        const data = [
            "",
            {
                "title": "",
                "url": "products/"
            },
            "",
            0,
            ""
        ];

updateProduct(data);
}

    removeProductsRow(event) {
        const { removeProduct, data } = this.props;
        const { index:productTotalIndex } = $(event.currentTarget).parents('tr')?.data()
        removeProduct(productTotalIndex)
    }

    render(){
        const {title, attributes, data, basePath, actions, showNewProductButton } = this.props;
        const responsiveStyleWrapper = {
            overflowX: "auto"
        }

        var showActions = actions;
        if (showActions == null){ //These are the default actions
            showActions = {delete: true, edit: true, view: true}
        }

        const tableHeaders = this._buildTopRow(attributes);
        const tableData = this._buildTableBodyRows(data, basePath, showActions);
        return(

                        {tableHeaders}
                        Actions



                        {tableData}


                {showNewProductButton
                ?
                    New
                :

                }

);
};

    _buildTopRow(attributes){
        const { handleProductNameSorting, handleProductPriceSorting } = this.props;
        const tableHeaders = [];
        for (const [index, value] of attributes.entries()){
            const titleizedValue = value.replace(/^\w/, c => c.toUpperCase());
            tableHeaders.push(

                    {
                        value == 'name' || value == 'price'
                        ?  handleProductNameSorting()
                                    : () => handleProductPriceSorting()
                            }
                            style={{
                                textDecoration: "none",
                                color: "#555555"
                            }}
                        >
                            {titleizedValue} ⇵

                        : titleizedValue
                    }

            );
        };
        return tableHeaders;
    }

    _buildTableBodyRows(data, basePath, actions){
        const tableData = [];
        for (const [index, value] of data.entries()){
            const row = [];
            const productId = value[0]; //First element is always the id
            for (const [objectIndex, objectValue] of value.entries()){
                const lookingAtObjectsId = objectIndex == 0;
                const lookingAtUrlObject = objectValue != null && objectValue["url"] != null;
                let attrName = '';
                if (lookingAtObjectsId){ //We don't want to add a  just for the ID.
                    continue;
                }
                else if (lookingAtUrlObject){
                    const openInNewTab = objectValue["newtab"] != null;
                    const icon = objectValue["icon"] == null ? null : ( {objectValue["title"]} );
                    const iconFullClass = objectValue["iconclass"] == null ? null : ( {objectValue["title"]} ); // This extra one is because some icons don't start with 'fas', they might start with 'fab', like in the case with the stripe icon.
                    const displayText = icon == null && iconFullClass == null ? objectValue["title"] : icon || iconFullClass
                    const linkClass = objectValue["class"] != null ? objectValue["class"] : "";
                    const hover = objectValue["hover"] != null ? objectValue["hover"] : "";
                    const target = openInNewTab ? "_blank" : "";
                    // row.push( {displayText} )
                    row.push()
                }
                else {
                    if(objectIndex == 2){
                        attrName = 'description';
                    } else if(objectIndex == 3){
                        attrName = 'price';
                    } else if(objectIndex == 4){
                        attrName = 'SKU';
                    } else{
                        attrName = '';
                    }

                    row.push(

                    )
                }
            }

            row.push(
                this.actionsTd(productId, basePath, actions)
            );
            tableData.push({row})
        };
        return tableData;
    }

    actionsTd(productId, basePath, actions) {
        if(!productId)
        {
            return

                    Create
                    X

            ;

        }
        var viewElement = null;
        if (actions.view){
            viewElement =
            (

);
        }

        var editElement = null;
        if (actions.edit){
            editElement =
            (

);
}

        var deleteElement = null;
        if (actions.delete){
            deleteElement =
            (

);
}

return

                {viewElement}
                {editElement}
                {deleteElement}

;
}

    productAttrUpdate(event){
        const { updateProduct } = this.props;
        const id = $(event.currentTarget).parents('tr').attr('id')
        const attr = event.currentTarget.id;
        const attrVal = event.currentTarget.innerText;
        const attrName = attr.charAt(0).toUpperCase() + attr.slice(1);
        const { index:productTotalIndex } = $(event.currentTarget).parents('tr')?.data();

        if(id != '') {
            $.ajax({
                url: `/products/${id}/update_attribute`,
                method: "PUT",
                data: {attribute: attr, value: attrVal},
                success: function(data){
                    gritterSuccess("Success", `${attrName} Updated Successfully`);
                },
                error: function(data){
                    gritterError("Error", "Something Error", "10000");
                }
            })
        }

        const newData = [...this.props.data[productTotalIndex]];
        const colIndex = $(event.currentTarget).parent('td').attr('data-index');
        colIndex == 1
            ? newData[colIndex] = {
                title: event.currentTarget.innerText,
                url: '/products'
            }
            : newData[colIndex] = event.currentTarget.innerText;

updateProduct(newData, productTotalIndex);
}

    saveProductsData(event) {
        const createButton = event.currentTarget;
        createButton.disabled = true;
        const { updateProduct } = this.props;

        const currentRow = $(createButton).parents('tr').children();

        const pName = currentRow[0].innerText;
        const pDesc = currentRow[1].innerText;
        const pPrice = currentRow[2].innerText;
        const pSku = currentRow[3].innerText;
        const { index:productTotalIndex } = $(createButton).parents('tr')?.data();

        const product = {name: pName, description: pDesc, price: pPrice, SKU: pSku}
        $.ajax({
            url: `/products.json`,
            method: "POST",
            data: {product: product},
            success: function(data){
                const newData = [
                    data.id,
                    {
                        "title": data.name,
                        "url": `products/${data.id}`
                    },
                    data.description,
                    data.price,
                    data.SKU
                ];

                updateProduct(newData, productTotalIndex);
                gritterSuccess("Success", `Product Added Successfully`);
            },
            error: function(data){
                createButton.disabled = false;
                gritterError("Error", "Something Error", "10000");
            }
        })
    }
}

export default TableData;

import React from "react";

const FRPillButton = ({onClick, text, disabled=false}) => {
    return(
        disabled
        ?
            {text}
        :
            {text}
    )
}

export default FRPillButton;

import React, {Component} from 'react';

class InplaceEdit extends Component{
    constructor(props){
        super(props);
        this.onFocusOut = this.onFocusOut.bind(this);
        this.updateUrl = this.updateUrl.bind(this);
    }

    render(){
        const {attribute, resource, resource_id, value, allowNewline} = this.props;
        let inplaceId = `inplace-${resource}-${attribute}-${resource_id}`;
        this.val = value;

        return (
             {e.key === 'Enter' && e.preventDefault();}}>
                {value}

        );
    }

    /**
     * Will send a 'PUT' to the update attribute url with the new data
     */
    onFocusOut(event){
        const newVal = event.currentTarget.innerText;
        if (newVal == this.val){
            return
        }
        else {
            this.val = newVal;
        }

        $.ajax({
            type: 'PUT',
            url: this.updateUrl(),
            data: {attribute: this.props.attribute, value: event.currentTarget.innerText},
            success: () => {
                var successMessage = `Successfully set ${this.titleizeAttribute(this.props.attribute)} to: "${this.val}"`;
                if (this.val.length == 0){
                    successMessage = `Successfully cleared ${this.titleizeAttribute(this.props.attribute)}`;
                }
                console.log(successMessage);
                gritterSuccess("Successful Update", successMessage);
            },
            error: function(data){
                const failureMessage = `Failed to set: ${this.titleizeAttribute(this.props.attribute)}`;
                console.log(failureMessage);
                gritterError("Failed Update", failureMessage);
            },
        })
    }

    /**
     * Gets the update attribute URL based on the given resource and resource id.
     */
    updateUrl(){
        return `/${this.props.resource}/${this.props.resource_id}/update_attribute.json`;
    }

    /**
     * Takes a rails formatted attribute and returns the titleized verison of it.
     * For example: "first_name" => "First Name", "notes" => "Notes"
     * @param {*} attr
     */
    titleizeAttribute(attr){
        if (typeof attr != "string")
            return attr
        return attr.split('_').map(function(val){return val.charAt(0).toUpperCase() + val.slice(1)}).join(' ');
    }
}

export default InplaceEdit;

import React, { Component } from 'react';

class DateRangePicker extends Component {
constructor(props){
super(props);

        const { startDate, endDate } = this.props;
        this.state = {
            startDate: startDate || '',
            endDate: endDate || '',
            isShowButtonLoading: false
        }

        this.onStartDateChange = this.onStartDateChange.bind(this)
        this.onEndDateChange = this.onEndDateChange.bind(this)
        this.onShowClick = this.onShowClick.bind(this)
    }

    componentDidMount() {
        const { startDateId, endDateId } = this.props;
        const { startDate, endDate } = this.state
        flatpickr(`#${startDateId}`, {
            altFormat: "Y-m-d",
            onChange: this.onStartDateChange
        });
        flatpickr(`#${endDateId}`, {
            altFormat: "Y-m-d",
            onChange: this.onEndDateChange
        });

        if(startDate && endDate){
            SetFlatpickr(startDateId, flatpickr.parseDate(startDate, "Y-m-d" ));
            SetFlatpickr(endDateId, flatpickr.parseDate(endDate, "Y-m-d"));
        }
    }

    onStartDateChange(selectedDates, date_str, instance) {
        this.setState({ ...this.state, startDate: date_str })
    }

    onEndDateChange(selectedDates, date_str, instance) {
        this.setState({ ...this.state, endDate: date_str })
    }

    onShowClick() {
        const { path } = this.props;
        const { startDate, endDate } = this.state;
        this.setState({...this.state, isShowButtonLoading: true})

window.location.href = `${path}?start_date=${startDate}&end_date=${endDate}`;
}

    render() {
        const { enableToggle, startDateId, endDateId } = this.props;
        const { startDate, endDate } = this.state;
        return(

                        Start Range

                        End Range

                        {
                            this.state.isShowButtonLoading
                            ?



                            :

                                        Show

                        }

);
}
}

export default DateRangePicker;

import React, {Component} from "react";
import LogoPath from "images/fieldrocketlogo.png"

const FieldRocketLogo = () => {
return(

          {/* Field Rocket */}

        {/*

Login to Field Rocket

*/}

)
}

export default FieldRocketLogo;

import React, {useState} from "react";

const InputField = ({id, label, value, setValue, isValid=true, onValidate=null, type="text", invalidMessage=""}) => {

const baseClass = `form-control ${type=="tel" ? "phone_mask" : ''}`
const [inputClassName, setInputClassName] = useState(baseClass);

    const addValidCSSClassOnBlur = (isValidated) => {
        if (isValidated){
            setInputClassName(baseClass + " is-valid");
        }
        else {
            setInputClassName(baseClass + " is-invalid");
        }
    }

return(

                {isValid ? label : invalidMessage}
                { type == "textarea" ?
                 setValue(e.target.value)}
                    onBlur={(element) => {
                        console.log("Made it to on blur in InputField")
                        const isValidated = onValidate(element.target.value);
                        addValidCSSClassOnBlur(isValidated);
                    }}
                /> :
                 setValue(e.target.value)}
                    onBlur={(element) => {
                        console.log("Made it to on blur in InputField")
                        const isValidated = onValidate(element.target.value);
                        addValidCSSClassOnBlur(isValidated);
                    }}
                />
                }

)
}

export default InputField;

import React, {useState} from "react";
import InputField from "./InputField";

const EmailInputField = ({id, email, setEmail}) => {
const [emailIsValid, setEmailIsValid] = useState(true);
const [invalidMessage, setInvalidMessage] = useState("");

const validateEmailInput = (userInputtedEmail) => {

        if (isValidEmail(userInputtedEmail)){
            console.log(`Email ${userInputtedEmail} is valid!`)
            setEmailIsValid(true);
            return true;
        }
        else {
            console.log(`Email ${userInputtedEmail} is NOT valid!`)
            setEmailIsValid(false);
            setInvalidMessage("Email: Please enter a valid email address.");
            return false;
        }
    }

    return(

    )
}

export default EmailInputField;

import React, {Component} from "react";

class AddressGenericModal extends Component {
    constructor(props){
        super(props);
        this.state = {
            showDisplayAddressOptions: false,
            addressFormShow: false,
            addressFormData: {
                streetAddress:'',
                id:'',
                customerId:'',
                city:'',
                zipCode:'',
                state:'',
            }

        }
        this.handleAddressFormShow = this.handleAddressFormShow.bind(this);
        // this.addNewAddressForm = this.addNewAddressForm.bind(this);
        // this.removeNewAddressForm = this.removeNewAddressForm.bind(this);
        this.openAddressMenu = this.openAddressMenu.bind(this);
        this.editLocation = this.editLocation.bind(this);
        this.handleInputChange = this.handleInputChange.bind(this);
        this.handleClickOutside = this.handleClickOutside.bind(this);
    }

    // addNewAddressForm(event){
    //     this.setState({
    //         ...this.state,
    //         addressFormShow: true,
    //     })
    // }

    // removeNewAddressForm(event){
    //     this.setState({
    //         ...this.state,
    //         addressFormShow: false,
    //     })
    // }

    openAddressMenu(event){
        $(".address-menu").css('display','none');
        $(event.currentTarget).parent('td').find('.address-menu').toggle();
    }

editLocation(data){
$(".address-menu").css('display','none');

        const formData = {
            streetAddress: data?.street_address || '',
            id: data?.id || '',
            customerId: data?.customer_id || '',
            city: data?.city || '',
            zipCode: data?.zip_code || '',
            state: data?.state || '',
        }

        this.setState({
            ...this.state,
            addressFormShow: true,
            addressFormData: formData
        })
    }

    handleInputChange(event){
        const value = event?.currentTarget?.value
        const { name:dataName } = event?.currentTarget?.dataset;
        const updatedFormData = { ...this.state.addressFormData }
        updatedFormData[dataName] = value;

this.setState({ ...this.state, addressFormData: updatedFormData })
}

    handleAddressFormShow(showForm, data={}) {
        const { id, street_address, customer_id, city, zip_code, state } = data;
        showForm
            ? this.setState({
                addressFormShow: true,
                addressFormData: {
                    streetAddress: street_address || '',
                    id: id || '',
                    customerId: customer_id || '',
                    city: city || '',
                    zipCode: zip_code || '',
                    state: state || '',
                }
            })
            : this.setState({
                addressFormShow: false,
                addressFormData: {
                    streetAddress:'',
                    id:'',
                    customerId:'',
                    city:'',
                    zipCode:'',
                    state:'',
                }
            })
    }

    componentDidMount() {
        document.addEventListener("mousedown", this.handleClickOutside);
    }

    componentWillUnmount() {
        document.removeEventListener("mousedown", this.handleClickOutside);
    }

handleClickOutside(event) {
if (event.target.className == 'address-context-menu-link' || $(event.target)?.parent('ul')[0]?.className == 'custom-menu address-menu') {

        } else{
            $(".address-menu").css('display','none');
        }
    }

    render() {
        const { genericModalShow, modalTitle, customerLocations, serviceAddress} = this.props
        const { addressFormShow, addressFormData } = this.state
        const availableCutomerLocations = customerLocations?.filter( locationData =>locationData.id != serviceAddress.id)

return (

{modalTitle}





                                        {
                                            addressFormShow
                                            ?  this.handleAddressFormShow(false)} id="removeAddressIcon" >


                                            :  this.handleAddressFormShow(true)} id="addAddressIcon" >


                                        }

this.props.openAddressGenericModal(false)} >

                            {
                                addressFormShow
                                &&

                                             Address
                                            this.handleInputChange(e)}
                                                type="text"
                                                className="form-control"
                                                data-name="streetAddress"
                                                value={addressFormData.streetAddress}
                                                required
                                            />

                                             City
                                            this.handleInputChange(e)}
                                                className="form-control"
                                                data-name="city"
                                                value={addressFormData.city}
                                                required
                                            />

                                             Zip
                                            this.handleInputChange(e)}
                                                className="form-control"
                                                data-name="zipCode"
                                                value={addressFormData.zipCode}
                                                required
                                            />

                                             State
                                            this.handleInputChange(e)}
                                                className="form-control"
                                                data-name="state"
                                                value={addressFormData.state}
                                                required
                                            />

Save

}

this.editLocation(serviceAddress)}
                                                            >
                                                                Edit Location

                                                    }








                                                Address



                                            {
                                                availableCutomerLocations.map((locationData, index) =>


                                                            {locationData.is_default_location &&  }



                                                                {locationData.display_address}

                                                            {

this.props.makeServiceAddress(locationData)}
                                                                    >
                                                                        Make Service Address

this.editLocation(locationData)}
                                                                    >
                                                                        Edit Location

                                                            }


                                                )
                                            }

);
}
}

export default AddressGenericModal;

import React, {Component} from "react";
import { ToggleButtonGroup, ToggleButton } from "@mui/material";

class SimpleToggleButtonGroup extends Component{
constructor(props){
super(props);

        this.state = {
            selectedValue: this.props.items[0]
        }

this.setSelectedValue = this.setSelectedValue.bind(this);
}

    setSelectedValue = (changeEvent) => {
        const newValue = changeEvent.target.value;
        this.setState({...this.state, selectedValue: newValue})
        if (this.props.onChange != null){
            this.props.onChange(newValue);
        }
    }

    render(){
        const {items} = this.props;
        return(

                {items.map((item) => (
                    {item}
                ))}

        )

    }
}

export default SimpleToggleButtonGroup;

import React, { Component } from "react";

class TableDataNotEditable extends Component{
    constructor(props){
        super(props)
    }

    render(){
        const {title, attributes, data, basePath, actions, editModalOnClick } = this.props;
        const responsiveStyleWrapper = {
            overflowX: "auto"
        }

        var showActions = actions;
        if (showActions == null){ //These are the default actions
            showActions = {delete: true, edit: true, view: true}
        }

        const tableHeaders = this._buildTopRow(attributes);
        const tableData = this._buildTableBodyRows(data, basePath, showActions, editModalOnClick);
        return(

                        {tableHeaders}
                        Actions



                        {tableData}

);
};

    _buildTopRow(attributes){
        const tableHeaders = []
        for (const [index, value] of attributes.entries()){
            const titleizedValue = value.replace(/^\w/, c => c.toUpperCase());
            tableHeaders.push({titleizedValue});
        };
        return tableHeaders;
    }

    _buildTableBodyRows(data, basePath, actions, editModalOnClick){
        const tableData = [];
        for (const [index, value] of data.entries()){
            const row = [];
            const productId = value[0]; //First element is always the id
            for (const [objectIndex, objectValue] of value.entries()){
                const lookingAtObjectsId = objectIndex == 0;
                const lookingAtUrlObject = objectValue != null && objectValue["url"] != null;
                if (lookingAtObjectsId){ //We don't want to add a  just for the ID.
                    continue;
                }
                else if (lookingAtUrlObject){
                    const openInNewTab = objectValue["newtab"] != null;
                    const icon = objectValue["icon"] == null ? null : ( {objectValue["title"]} );
                    const iconFullClass = objectValue["iconclass"] == null ? null : ( {objectValue["title"]} ); // This extra one is because some icons don't start with 'fas', they might start with 'fab', like in the case with the stripe icon.
                    const displayText = icon == null && iconFullClass == null ? objectValue["title"] : icon || iconFullClass
                    const linkClass = objectValue["class"] != null ? objectValue["class"] : "";
                    const hover = objectValue["hover"] != null ? objectValue["hover"] : "";
                    const target = openInNewTab ? "_blank" : "";
                    row.push( {displayText} )
                }
                else {
                    row.push({objectValue})
                }
            }

            row.push(
                this.actionsTd(productId, basePath, actions, editModalOnClick, data)
            );
            tableData.push({row})
        };
        return tableData;
    }

    /**
     * Builds the Actions Table Data Column with the view, edit, and delete icons.
     * @param {*} productId The id of the resource that is being shown
     * @param {*} basePath The path of the resource used for viewing, editing, and POSTing a delete. (for the default actions of viewing, editing, or deleting)
     * @param {*} actions The actions that are enabled for this resource row (sometimes you don't want to show viewing, or editing, or delete, sometimes you want to show all, sometimes you want to show none.)
     * @param {*} editModalOnClick This is a callback used to show a modal if we are going to allow editing this resource directly on this same page, using a modal.
     * @param {*} data Pass in the data for this resource so we can set the data in the modal fields so the user can see it before making a change.
     * @returns
     */
    actionsTd(productId, basePath, actions, editModalOnClick, data) {
        var viewElement = null;
        if (actions.view){
            viewElement =
            (

);
        }

        var editElement = null;
        if (actions.edit){
            if (editModalOnClick != null){
                editElement =
                (

editModalOnClick(productId, data)} title="Edit" className={`edit_${basePath}`}>

);
            }
            else {
                editElement =
                (

);
            }

        }

        var deleteElement = null;
        if (actions.delete){
            deleteElement =
            (

);
}

return

                {viewElement}
                {editElement}
                {deleteElement}

;
}
}

export default TableDataNotEditable;

import React, { Component } from 'react';

class TableBody extends Component {
    constructor(props) {
        super(props);
    }

render() {
const { tableData } = this.props;

        return (

            {
                tableData.map((data, index) => (

                         { data.name }
                        { this._tools(data) }

                ))
            }

        );
    }

_tools(data) {
const { permissions } = this.props;

        if( permissions["destroy"] && permissions["update"] ) {
            return(





            );
        } else if( permissions["destroy"] ) {
            return(





            );
        } else if( permissions["update"] ) {
            return(


            );
        } else {
            return(


            );
        }
    }
}

export default TableBody;

import React, { Component } from "react";
import Table from "./Table";
import TableTop from "./TableTop";

class Index extends Component {
    constructor(props) {
        super(props);
    }

render() {
const { tableData, permissions } = this.props;

return (

);
}
}

export default Index;

Error reading file: U_STRING_NOT_TERMINATED_WARNING

import React, { Component } from 'react';
import TableBody from "./TableBody";
import TableHeader from "./TableHeader";

class Table extends Component {
    constructor(props) {
        super(props);
    }

render() {
const { tableData, permissions } = this.props;

return (

);
}
}

export default Table;

import React, { Component } from "react";
import SortLink from "../shared/SortLink";

class TableHeader extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (


                    Roster Name


        );
    }
}

export default TableHeader;

import React, { Component } from "react";

class TableTop extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (

{ this._newLink() }

);
}

_newLink() {
const { permissions } = this.props;

        if( permissions["create"] ) {
            return(  );
        } else {
            return null;
        }
    }
}

export default TableTop;

import React, {Component} from 'react';
import IndexPage from '../shared/IndexPage';

class ProductsIndexPage extends Component { //this might be a good candidate for polymorphism and just inheriting from the parent IndexPage
    constructor(props){
        super(props);
        const {title, attributes, data, basePath} = this.props;

        this.state={
            data: data,
            paidDirection: 'asc'
        }

        this.updateProduct = this.updateProduct.bind(this);
        this.removeProduct = this.removeProduct.bind(this);
        this.handleProductPriceSorting = this.handleProductPriceSorting.bind(this);
        this.handleProductNameSorting = this.handleProductNameSorting.bind(this);
    }

    updateProduct(newData, index = null) {
        index || index == 0
        ? this.setState({
            ...this.state,
            data: [
                ...this.state.data.slice(0, index),
                newData,
                ...this.state.data.slice(index+1, this.state.data.length)
            ]
        })
        : this.setState({ ...this.state, data: [...this.state.data, newData]})
    }

    removeProduct(index) {
        this.setState({
            ...this.state,
            data: [
                ...this.state.data.slice(0, index),
                ...this.state.data.slice(index+1, this.state.data.length)
            ]
        })
    }

    handleProductPriceSorting(){
        const paidDirection = this.state.paidDirection;
        const updatedPaidDirection = paidDirection == 'asc' ? 'desc' : 'asc'
        const sortBy = (a, b) => paidDirection == 'asc' ? (a[3] - b[3]) : (b[3] - a[3])

const tableData1 = [...this.state.data].sort(sortBy);

        this.setState({
            ...this.state,
            data: [...tableData1],
            paidDirection: updatedPaidDirection,
        });
    }

    handleProductNameSorting(){
        const paidDirection = this.state.paidDirection;
        const updatedPaidDirection = paidDirection == 'asc' ? 'desc' : 'asc'
        const sortBy = paidDirection == 'asc'
            ? (a, b) => (a[1].title > b[1].title ? -1 : 1)
            : (a, b) => (a[1].title < b[1].title ? -1 : 1)

const tableData1 = [...this.state.data].sort(sortBy);

        this.setState({
            ...this.state,
            data: [...tableData1],
            paidDirection: updatedPaidDirection,
        });
    }

    render(){
        const {title, attributes, basePath} = this.props;
        const { data } = this.state;
        const openModal = () => {
            $('#import_products_services_modal').modal('show');
        }

        const importButton = (
            // here is where we'll have the import modal

                {/*

                 */}

);

return(

        );
    }
}

export default ProductsIndexPage;

module JobsHelper
  def customer_options
    current_business.customers.map do |c|
      [c.full_name.titleize, c.id]
    end
  end

  def customer_search_label_style(job)
    form_group_error?(job, :customer_id) ? 'color: #dc3545; display: block;' : 'display: block;'
  end

  def employee_options
    current_business.employees.map do |e|
      [e.full_name, e.id]
    end
  end

  def roster_options
    current_business.rosters.map do |e|
      [e.name, e.id]
    end
  end

  def job_status(job)
    if job.job_status.nil?
      'Job State Unknown'
    else
      job.job_status
    end
  end

  def job_status_options()
    return [
      ['1', 'On Site Sales Call'],
      ['2', 'Lost Estimate'],
      ['3', 'Work Order'],
      ['4', 'Completed'],
    ]
  end

  def invoice_to_customer_full_name(job)
    job.customer.full_name.blank? ? "Company: #{job.customer.company}" : job.customer.full_name.titleize
  end
end

module JobStatusesHelper
end

module SubscriptionsHelper
end

module LocationsHelper
end

module TimesheetsHelper
end

module ReviewsHelper
end

module InvoiceTemplatesHelper
    def invoice_data(editable)
        set_data(default_data, editable, false)
    end

    def invoice_template_data(editable)
        set_data(default_data, editable, true)
    end

    def set_data(data, editable, is_invoice_template=true)
        data[:issuedDate] = editable ? @invoice.issued_on.strftime("%Y-%m-%d") : @invoice.issued_on.strftime("%B %d, %Y")
        data[:dueDate] = editable ? @invoice.due_on.strftime("%Y-%m-%d") : @invoice.due_on.strftime("%B %d, %Y")
        data[:editable] = editable
        data[:handlingInvoiceTemplate] = is_invoice_template

        if current_business.present?
            data[:productOptions] = current_business.products.map {|product| {value: product.id, label: product.name, data_description: product.description, data_price: product.price}}
            data[:invoiceTemplates]=  current_business.invoice_templates.includes([logo_attachment: :blob]).map do |template| {
                value: template.id,
                label: template.name,
                notes: template.description,
                business_name: template.business_name,
                logo: template&.logo&.attached? ? url_for(template.logo) : '',
                line_items: LineItemTemplate.where(invoice_template_id: template.id)}
            end #line items..?? logo..? and Business Name..?
        end

        if is_invoice_template
            data[:lineItems] = @invoice.line_items
            data[:alternateLogoFromTemplate] = @invoice&.logo&.attached? ? url_for(@invoice.logo) : ''
            data[:invoiceTemplateId] = @invoice.invoice_display_number
        else
            data[:serviceTo] = @invoice.service_to
            attached_invoice_tempalte = @invoice.invoice_template
            data[:alternativeBusinessName] = attached_invoice_tempalte&.business_name || ''
            data[:alternateLogoFromTemplate] = attached_invoice_tempalte&.logo&.attached? ? url_for(attached_invoice_tempalte.logo) : ''
        end
        data
    end

    def default_data
        customer_to_invoice = @invoice.customer_to_invoice
        {
            invoice: @invoice,
            dueDateLabel: invoice_due_text(@invoice),
            logo: @invoice.business.logo.attached? ? url_for(@invoice.business.logo) : image_url("homeservice.png"),
            showDueDate: show_due_date?(@invoice),
            business: @invoice.business,
            businessPhone: number_to_phone(@invoice.business.phone),
            owner: !@invoice.job&.owner&.nil?,
            ownerFullName: @invoice.job&.owner&.full_name,
            ownerEmail: @invoice.job&.owner&.email,
            ownerPhone: @invoice.sales_rep_number_display,
            customerToInvoice: customer_to_invoice,
            shouldInvoiceOtherCustomer: @invoice.should_invoice_other_customer?,
            isCustomerAddressDifferentThanJobAddress: !@invoice.is_customer_address_different_than_job_address?,
            locationDisplayAddress: @invoice.job&.location&.display_address != nil,
            customerToInvoiceFullName: customer_to_invoice&.full_name,
            customerToInvoiceDisplayAddress: customer_to_invoice&.display_address,
            customerToInvoicePhone: number_to_phone(customer_to_invoice&.phone),
            invoiceJobDisplayAddress: @invoice.job&.display_address,
            serviceToFullName:  @invoice.service_to&.full_name,
            serviceToDisplayAddress: @invoice.service_to&.display_address,
            serviceToPhone: number_to_phone(@invoice.service_to&.phone),
            invoiceType: @invoice.invoice_type,
            job: @invoice.job,
            customerLocations: @invoice.job&.customer&.locations,
            estimateNumber: @estimate_number || @invoice.invoice_display_number, #invoice controller doesn't set this for the 'edit' action, so just default to invoice_display_number
            invoiceNumber: @invoice_number || @invoice.invoice_display_number #view above comment
        }
    end
end

module InvoicesHelper
    def template_options
        current_business.invoice_templates.map do |template|
            [template.name, template.id]
        end
    end

    def show_due_date?(invoice)
        return invoice.invoice_type == "Invoice" || invoice.invoice_type == "Estimate"
    end

    def invoice_due_text(invoice)
        if invoice.invoice_type == "Invoice"
            "Due"
        elsif invoice.invoice_type == "Estimate"
            "Expires"
        else
            return ""
        end
    end
end

module ForwardingNumbersHelper
end

module RostersHelper
end

module JobRequestsHelper
end

module AppointmentColorsHelper
end

module PermissionsHelper

  def action_options
    Permission::ACTIONS.map do |a|
      [a.capitalize, a]
    end
  end

  def resource_options
    Permission::RESOURCES[1..-1].map do |r|
      [r.capitalize, r]
    end
  end

end

module VisitorDeviceInfosHelper
end

module CustomerContactHelper
end

module TextTemplatesHelper
    # //used in evaluating the text message template variable: {{start_time}}
    # matches equivalent in helpers.js
    def evaluate_start_time_for_text_message(start_datetime)
        if start_datetime == nil || start_datetime == ""
            return ""
        end
        return start_datetime.utc.strftime("%I:%M %P")
    end

    # //used in evaluating the text message template variable: {{readable_start_time}}
    # matches evaluateReadableStartTimeFromAppointment in helpers.js
    def evaluate_readable_start_time_for_text_message(start_datetime)
        if start_datetime == nil || start_datetime == ""
            return ""
        end
        hhmma = start_datetime.utc.strftime("%I:%M %P")
        date = start_datetime.strftime("%a, %d %b %Y").to_time.to_i

        is_same_day = date == (Date.today).to_time.to_i
        is_next_day = date == (Date.tomorrow).to_time.to_i
        is_next_week = (date > (Date.today).to_time.to_i) && (date <= (Date.today + 7).to_time.to_i)

was_yesterday = date == (Date.yesterday).to_time.to_i
was_last_week = (date > (Date.today - 7).to_time.to_i) && (date < (Date.yesterday).to_time.to_i)

        if is_same_day
            return "today at #{hhmma}"
        elsif is_next_day
            return "tomorrow at #{hhmma}"
        elsif is_next_week
            return "this upcoming #{start_datetime.strftime("%A")} at #{hhmma}"
        elsif was_yesterday
            return "yesterday, from #{hhmma}"
        elsif was_last_week
            return start_datetime.strftime("%A")
        else
            return start_datetime.strftime("%A, %b %e") + " at " + start_datetime.strftime("%I:%M %P")
        end
    end

    # //used in evaluating the text message template variable: {{end_time}}
    # matches equivalent in helpers.js
    def evaluate_end_time_for_text_message(end_datetime)
        if end_datetime == nil || end_datetime == ""
            return ""
        end

        return end_datetime.utc.strftime("%I:%M %P")
    end

    # //used in evaluating the text message template variable: {{day}}
    # matches evaluateReadableStartTimeFromAppointment in helpers.js
    def evaluate_day_for_text_message(start_datetime)
        if start_datetime == nil || start_datetime == ""
            return ""
        end
        hhmma = start_datetime.utc.strftime("%I:%M %P")
        date = start_datetime.strftime("%a, %d %b %Y").to_time.to_i

        is_same_day = date == (Date.today).to_time.to_i
        is_next_day = date == (Date.tomorrow).to_time.to_i
        is_next_week = (date > (Date.today).to_time.to_i) && (date <= (Date.today + 7).to_time.to_i)

was_yesterday = date == (Date.yesterday).to_time.to_i
was_last_week = (date > (Date.today - 7).to_time.to_i) && (date < (Date.yesterday).to_time.to_i)

        if is_same_day
            return "today"
        elsif is_next_day
            return "tomorrow"
        elsif is_next_week
            return "this upcoming #{start_datetime.strftime("%A")}"
        elsif was_yesterday
            return "yesterday"
        elsif was_last_week
            return start_datetime.strftime("%A")
        else
            return start_datetime.strftime("%A")
        end
    end

    # //used in evaluating the text message template variable: {{date}}
    # matches evaluateReadableStartTimeFromAppointment in helpers.js
    def evaluate_date_for_text_message(start_datetime)
        if start_datetime == nil || start_datetime == ""
            return ""
        end
        return start_datetime.strftime("%b %e")
    end
end

module MessagesHelper
end

module LineItemsHelper
end

module ApplicationHelper
require 'fileutils'
require "zapier"

  # Returns a label, input field, and error message (only if there are errors).
  def form_group(form, resource, field_name, field_type='text_field', select_options: nil, options: {}, note: nil, label: nil, value: nil, user_added_classes: nil)
    label_style = form_group_error?(resource, field_name) ? 'color: #dc3545' : ''
    if label.nil?
      result = form.label(field_name, style: label_style, class: "text-label")
    elsif !label
      # label == false (no label)
      result = ''.html_safe
    else
      result = form.label(field_name, label, style: label_style, class: "text-label")
    end

    unless note.nil?
      result += content_tag(:small, " (#{note})", class: 'form-text text-muted', style: 'display: inline;')
    end

    field_classes = form_group_error?(resource, field_name) ? "form-control is-invalid #{user_added_classes}" : "form-control #{user_added_classes}"
    if field_type == :select
      options = options.merge({class: field_classes, selected: value})
      result += form.select(field_name, select_options, options, options)
    elsif field_type == :time_select
      result += tag(:br)
      field_classes += ' form-time-select'
      result += form.time_select(field_name, options, {class: field_classes}, value: value)
    elsif field_type == :currency
      options = options.merge({class: field_classes, value: value, step: 0.01})
      result += form.number_field(field_name, options)
    elsif field_type == :phone_field
      options = options.merge({class: "#{field_classes} phone_mask", value: value})
      result += form.text_field(field_name, options)
    elsif field_type == :color
      options = options.merge({class: "#{field_classes}", value: value})
      result += form.color_field(field_name, options)
    elsif field_type == :password_field
      options = options.merge({class: "#{field_classes}", value: value})
      result += form.password_field(field_name, options)
    else
      options = options.merge({class: field_classes, value: value})
      result += form.send(field_type, field_name, options)
    end

    if resource != nil
      resource&.errors[field_name].each do |message|
        result += content_tag(:small, message, class: 'form-text text-muted')
      end
    end

result
end

  def state_options
    return [
        # [innerHTML, value]
        ['', ''],
        ['AL', 'AL'],
        ['AK', 'AK'],
        ['AZ', 'AZ'],
        ['AR', 'AR'],
        ['CA', 'CA'],
        ['CO', 'CO'],
        ['CT', 'CT'],
        ['DE', 'DE'],
        ['FL', 'FL'],
        ['GA', 'GA'],
        ['HI', 'HI'],
        ['ID', 'ID'],
        ['IL', 'IL'],
        ['IN', 'IN'],
        ['IA', 'IA'],
        ['KS', 'KS'],
        ['KY', 'KY'],
        ['LA', 'LA'],
        ['ME', 'ME'],
        ['MD', 'MD'],
        ['MA', 'MA'],
        ['MI', 'MI'],
        ['MN', 'MN'],
        ['MS', 'MS'],
        ['MO', 'MO'],
        ['MT', 'MT'],
        ['NE', 'NE'],
        ['NV', 'NV'],
        ['NM', 'NM'],
        ['NJ', 'NJ'],
        ['NM', 'NM'],
        ['NY', 'NY'],
        ['NC', 'NC'],
        ['ND', 'ND'],
        ['OH', 'OH'],
        ['OK', 'OK'],
        ['OR', 'OR'],
        ['PA', 'PA'],
        ['RI', 'RI'],
        ['SC', 'SC'],
        ['SD', 'SD'],
        ['TN', 'TN'],
        ['TX', 'TX'],
        ['UT', 'UT'],
        ['VT', 'VT'],
        ['VA', 'VA'],
        ['WA', 'WA'],
        ['WV', 'WV'],
        ['WI', 'WI'],
        ['WY', 'WY'],
        ['DC', 'DC'],
        ['PR', 'PR'],
        ['VI', 'VI']
    ]
  end

  def marketing_sources_options
    current_business.marketing_sources.map {|marketing_source| [marketing_source.name, marketing_source.id]}
  end

  # Returns true if there is an error for this field.
  def form_group_error?(resource, field_name)
    if resource != nil
      resource.errors[field_name].any?
    end
  end

  def permissions_for(resource)
    {
        create: (can? :create, resource),
        destroy: (can? :destroy, resource),
        read: (can? :read, resource),
        update: (can? :update, resource)
    }
  end

  def get_grow_header_image_path_from_domain()
    # domain = request.env["HTTP_HOST"]
    # domain.slice! "www."
    # if domain == "myhvac.cloud" || domain == "hvac-on-cloud.com"
    #   return "grow-hvac-header2.png"
    # elsif domain == "myplumbing.cloud"
    #   return "grow-plumbing-header2.png"
    # elsif domain == "myelectrical.cloud"
    #   return "grow-electrical-header2.png"
    # end
    return "grow-homeservice-header2.png"
  end

  def get_trade()
    # domain = request.env["HTTP_HOST"]
    # domain.slice! "www."
    # if domain == "myhvac.cloud" || domain == "hvac-on-cloud.com"
    #   return "HVAC"
    # elsif domain == "myplumbing.cloud"
    #   return "Plumbing"
    # elsif domain == "myelectrical.cloud"
    #   return "Electrical"
    # end
    return "Service"
  end

  def duration_of_interval_in_words(interval)
    if interval == nil || interval == 0
      return "N/A"
    end
    # hours, minutes, seconds = interval.split(':').map(&:to_i)
    hours = 0

    #should get seconds in here.
    minutes = (interval / 60).abs
    seconds = (60 - interval % 60)

    [].tap do |parts|
      parts << "#{hours} hour".pluralize(hours)       unless hours.zero?
      parts << "#{minutes} minute".pluralize(minutes) unless minutes.zero?
      parts << "#{seconds} second".pluralize(seconds)   unless seconds.zero?
    end.join(', ')
  end

  def calculate_rows(content)
    return 5 if content.blank?

    lines = content.split("\n")
    rows = lines.length
    max_line_length = lines.map(&:length).max

    rows += (max_line_length / 80.0).ceil

    [rows, 5].max
  end

  def should_use_tailwind_instead_of_application_css?
    pages_with_tailwind_enabled = [
      '/published_job_pages/dashboard',
      '/pictures',
      '/w',
      '/request_data_deletion',
      '/llama_bots',
      '/llama_bot',
      '/source',
      { controller: 'home_pages', action: 'edit' }
    ]

    should_page_use_tailwind = false

    pages_with_tailwind_enabled.any? do |page|
      if page.is_a?(String)
        should_page_use_tailwind ||= current_page?(page)
      elsif page.is_a?(Hash)
        should_page_use_tailwind ||= controller.controller_name == page[:controller].to_s && controller.action_name == page[:action].to_s
      end
    end

return should_page_use_tailwind
end

  def human_readable_date_time(date, business)
    date = date.in_time_zone(business.time_zone)
    if date.to_date == Date.today.to_date #seriously.. not saving in mountain time
      date.strftime("Today, %l:%M%p")
    elsif date.to_date == Date.yesterday.to_date
      date.strftime("Yesterday, %l:%M%p")
    elsif (date > Date.today - 7) && (date < Date.yesterday)
      date.strftime("%a, %l:%M%p")
    else
      date.strftime("%b %-d, %l:%M%p")
    end
  end

  def human_readable_date_time_mst(date)
    date = date.in_time_zone('America/Denver')
    if date.to_date == Date.today.to_date #seriously.. not saving in mountain time
      date.strftime("Today, %l:%M%p")
    elsif date.to_date == Date.yesterday.to_date
      date.strftime("Yesterday, %l:%M%p")
    elsif (date > Date.today - 7) && (date < Date.yesterday)
      date.strftime("%a, %l:%M%p")
    else
      date.strftime("%b %-d, %l:%M%p")
    end
  end

  def log_tracked_event(event_information)
    # Creating a file
    event_type = event_information[:event].downcase.gsub(' ','_')
    file_name = "#{event_type}.log"
    path = Rails.root.join('log', 'manual_logs')
    FileUtils.mkdir_p path.to_s unless File.exists?(path.to_s)
    fileobject = File.open(path.join(file_name).to_s, "a");

    file_data = "\n\n**********************************************\n"
    event_information.keys.each do |key|
      file_data += "#{key.capitalize}: #{event_information[key]} \n"
    end
    fileobject.syswrite(file_data);

# Closing a file
fileobject.close();

    # business_id: @business.id,
    # name: @business.name.to_s,
    # email: @business.email.to_s,
    # phone: @business.phone,
    # signed_in_at: date_time_now,
    # event: 'Business Registered'

    #Zapier integration if enabled.
    if event_information["event"] == "Business Registered"
      Zapier.PipeDriveNewRegistration(event_information["business_id"], event_information["name"], event_information["employee_name"], event_information["phone"], event_information["email"], event_information["signed_in_at"])
      Zapier.GoogleSheetsNewRegistration(event_information["business_id"], event_information["name"], event_information["employee_name"], event_information["phone"], event_information["email"], event_information["signed_in_at"])
    end
  end

  def controller_index_urls
    controllers = Dir[Rails.root.join('app/controllers/*_controller.rb')].map do |file|
      controller_name = file.split('/').last.gsub('_controller.rb', '')
      view_folder = Rails.root.join('app/views', controller_name)

      if Dir.exist?(view_folder)
        {
          name: controller_name.humanize,
          url: "/#{controller_name.pluralize}",
          created_at: File.ctime(file)
        }
      end
    end.compact

sorted_controllers = controllers.sort_by { |controller| controller[:created_at] }.reverse

    sorted_controllers.map do |controller|
      {
        name: controller[:name],
        url: controller[:url]
      }
    end
  end
end

module MarketingSourcesHelper
end

# app/helpers/html_sanitizer.rb
# https://chat.openai.com/c/38a68600-d48a-433b-8741-ee4fbee13696
require 'action_view'
include ActionView::Helpers::SanitizeHelper

module HtmlSanitizer
    def self.strip_html_tags_and_entities(input)
      return nil if input.nil?
      stripped = ActionView::Helpers::SanitizeHelper.strip_tags(input)
      unescaped = CGI.unescapeHTML(stripped)
      unescaped_with_spaces = unescaped.gsub(/\u00A0/, ' ')
      unescaped_with_spaces.squeeze(' ')
    end
  end

module LlamaBotsHelper
end

module WebPagesHelper
end

module EmployeeJobTypesHelper
end

module CustomersHelper
    def update_job_params_if_new_customer!(params)
        if params['job']['customer_name'] != ""
            splittedName = params['job']['customer_name'].split(' ')
            params['job'].merge!(:first_name => splittedName[0])
            params['job'].merge!(:last_name => splittedName[1])
            params['job'].merge!(:company => 'Test')
            params['job'].merge!(:business_id => current_business.id)
            puts("generating new customer record")

            @customer = current_business.customers.new(customer_params)

            if @customer.save
              custID = ActiveRecord::Base.connection.execute("SELECT id FROM customers WHERE email = '"+params['job']['email'] +"'")
              params['job'].merge!(:customer_id => custID.values[0][0])
            end
        end
    end

    def format_time_seconds(seconds)
        hours = (seconds / 3600).floor()
        seconds = (seconds % 3600).floor()
        minutes = (seconds / 60).floor()
        seconds = (seconds % 60).floor()
        return "#{hours}h #{minutes}m #{seconds}s";
    end

end

module EventsHelper
end

module CallsHelper
end

module EmployeesHelper
  #
  def employees_data
    @employees
  end

  # Group options for edit employee form.
  def group_options
    # Do NOT include owner as an option.
    Group.employee_groups(current_business).map do |g|
      [g.name&.titleize, g.id]
    end
  end

  def branch_options
    Branch.where(:business_id => current_business.id).map do |b|
      [b.name&.titleize, b.id]
    end
  end
end

include StripeHelper
module PaymentsHelper
    def payment_type_options
        Payment.payment_types.keys
    end

    def to_cents(amount)
        StripeHelper.to_cents(amount)
    end

    def surcharge_amount(amount, app_percentage_fee)
        StripeHelper.calculate_surcharge(amount, app_percentage_fee) - amount
    end

    def total_surcharge_amount(amount, app_percentage_fee)
        StripeHelper.calculate_surcharge(amount, app_percentage_fee)
    end
end

class ActionDispatch::IntegrationTest
include PaymentsHelper
end

module WebhooksHelper
end

module ProductsHelper
end

module WebPageHistoriesHelper
end

module PublishedJobPagesHelper
    def PublishedJobPagesHelper.extract_image_urls_from_attachments_in_params(attachment_params)
        # This method is responsible for taking attachment_ids, and converting them into workable S3 links
        # so that we can download the images and embed them with SEO-rich information, such as geo-location and keywords.

        if attachment_params.nil?
            return [] #return empty array if user didn't pass in attachment_params
        end

        image_urls = []
        attachment_params.values.each do |image_attachment_id|
          image_attachment = ActiveStorage::Attachment.where(id: image_attachment_id).first
          image_url = image_attachment.service.send(:object_for, image_attachment.key).public_url
          image_urls << image_url
        end

        return image_urls
    end

    def PublishedJobPagesHelper.extract_image_urls_from_attachments_in_params_array(attachment_params)
        # This method is responsible for taking attachment_ids, and converting them into workable S3 links
        # so that we can download the images and embed them with SEO-rich information, such as geo-location and keywords.
        if attachment_params.nil?
            return [] #return empty array if user didn't pass in attachment_params
        elsif attachment_params.all? { |param| param.is_a?(String) && param.start_with?('http') }
          return attachment_params # Return the image_urls back if attachment_params are just an array of https URLs
        end

        image_urls = []
        attachment_params.each do |image_attachment_id|
          image_attachment = ActiveStorage::Attachment.where(id: image_attachment_id["image"]["id"])&.first
          unless image_attachment.nil? #sometimes this is nil, due to an upload failing/being deleted out of the active storage. (Bug where not all images always get uploaded consistently)
            image_url = image_attachment.service.send(:object_for, image_attachment.key).public_url
            image_urls << image_url
          end
        end

        return image_urls
    end
end

module BranchesHelper
end

module EmailTemplatesHelper
end

module HomePagesHelper
end

module FormatterHelper
    def format_phone_number(phone_number)
      cleaned = phone_number.gsub(/\D/, '') # removes any non-digit characters
      "(#{cleaned[0..2]}) #{cleaned[3..5]}-#{cleaned[6..9]}"
    end
  end

#http://blog.plataformatec.com.br/2019/01/custom-authentication-methods-with-devise/
class AuthenticationTokenStrategy < Warden::Strategies::Base
    def valid?
      authentication_token.present?
    end

    def authenticate!
      employee = Employee.find_by(authentication_token: authentication_token)

      if employee
        success!(employee)
      else
        fail!('Invalid login credentials')
      end
    end

    private

    def authentication_token
        params['authentication_token']
    end
  end

class AppointmentFilterValidator < ActiveModel::Validator
    def validate(record)
        unless record.appointment_filter =~ /^(\d,?)+$/i
            record.errors[:appointment_filter] << "Couldn't set the schedule employee filter"
        end
    end
end

class MessagePhoneValidator < ActiveModel::Validator
include ValidatorHelper

    def validate(record)
      if not ValidatorHelper.valid_phone_format(record.to)
        record.errors.add(:to, "The number must you're sending from must have numeric digits. No special characters are allowed.")
      end
      if not ValidatorHelper.valid_phone_format(record.sent_from)
        record.errors.add(:from, "The number you're sending this message to must only have numeric digits. No special characters are allowed.")
      end
      if record.business.twilio_number&.count('0123456789') != 10
        record.errors.add(:from, "The business's twilio phone number isn't set up correctly! (Should be 10 digits)")
      end
      if record.to.count('0123456789') != 10
        record.errors.add(:to, "Phone number must be 10 digits")
      end
      if record.sent_from&.count('0123456789') != 10
        record.errors.add(:from, "Phone number must be 10 digits")
      end
    end
  end

class ZipCodeValidator < ActiveModel::Validator
    def validate(record)
      unless valid_zipcode(record.zip_code)
        record.errors.add(:zip_code, "Zipcode must be either a 5-digit number for US or a valid Canadian postal code in the format 'A1A 1A1'.")
      end
    end

def valid_zipcode(zip)
return false if zip.nil?

us_zipcode_pattern = /\A\d{5}\Z/
canadian_postal_code_pattern = /\A[A-Za-z]\d[A-Za-z] \d[A-Za-z]\d\Z/

      us_zipcode_pattern.match?(zip) || canadian_postal_code_pattern.match?(zip)
    end
  end

class PaymentValidator < ActiveModel::Validator
    def validate(record)
        if (record.job.present? && record.invoice != nil && !(record.job.invoices.include?(record.invoice)))
            record.errors.add(:invoice_id, "This invoice doesn't belong to the given job")
        end
    end
end

class CssHexColorValidator < ActiveModel::Validator
    def validate(record)
        unless record.color =~ /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/i
            record.errors[:color] << "must be a valid CSS hex color code"
        end
    end
end

class JobValidator < ActiveModel::Validator
    def validate(record)
        if !job_business_id_matches_customer_business_id(record)
            record.errors.add(:business_id, "The Job's Business ID and Customer's Business ID do not match! Please contact your developer.")
        end
    end

private

    def job_business_id_matches_customer_business_id(record)
        return record.business_id == record.customer.business_id
    end
end

class RosterJobTimeValidator < ActiveModel::Validator
    def validate(record)
      time_start_end_in_five_minute_intervals(record.time_start, record.time_end, record)
      time_start_end_range(record.time_start, record.time_end, record)
      time_start_and_end_are_not_same_time(record)
      time_start_not_before_end_time(record)

      if theres_a_conflict_in_schedule(record)
        record.errors.add(:date, "#{Roster.find(record.roster_id).name} already has a job scheduled for #{record.time_start.to_formatted_s(:short)} to #{record.time_end.to_formatted_s(:short)}")
      end
    end

    ## Checks the database for any employee jobs where the given time_start and time_end would conflict for the given employee's id
    ## If there's a conflict, return true. Otherwise, return false.
    def theres_a_conflict_in_schedule(record)
      jobs_already_scheduled_during_start_time = RosterJob.where(:roster_id => record.roster_id,
                                                                   :time_start => record.time_start..record.time_end)
                                                            .where.not(:id=>record.id)
      start_count = jobs_already_scheduled_during_start_time.count

      overlapping_jobs = EmployeeJob.where(:time_start => record.time_start..record.time_end)
      for employee in overlapping_jobs
        if EmployeeRoster.where(:roster_id => record.roster_id).pluck(:employee_id).include?(employee.employee_id) && !job_cancelled(employee.job_id)
          start_count = start_count + 1
        end
      end

      for job in jobs_already_scheduled_during_start_time
        if job_cancelled(job.job_id)
          start_count = start_count-1
        end
      end

      jobs_already_scheduled_during_end_time = RosterJob.where(:roster_id => record.roster_id,
                                                                 :time_end => record.time_start..record.time_end)
                                                          .where.not(:id=>record.id)

end_count = jobs_already_scheduled_during_end_time.count

      overlapping_jobs = EmployeeJob.where(:time_end => record.time_start..record.time_end)
      for employee in overlapping_jobs
        if EmployeeRoster.where(:roster_id => record.roster_id).pluck(:employee_id).include?(employee.employee_id) && !job_cancelled(employee.job_id)
          end_count = end_count + 1
        end
      end

      for job in jobs_already_scheduled_during_end_time
        if job_cancelled(job.job_id)
          end_count = end_count - 1
        end
      end
      theres_a_conflict_in_schedule = start_count > 0 || end_count > 0
      if theres_a_conflict_in_schedule
      end

      #Get the earliest time and latest time for the given date, then let's check if there's any conflicts in the date's schedule.
      beginning_of_day = record.time_start.change(:hour => 0)
      end_of_day = record.time_end.change(:hour => 24)

jobs_worked_by_employee_for_the_day = RosterJob.where(:roster_id => record.roster_id, :time_start => beginning_of_day..end_of_day).where.not(:id=>record.id)

      all_jobs_of_roster_employees = EmployeeRoster.where(:roster_id => record.roster_id)
      for employee in all_jobs_of_roster_employees
          employees_jobs_for_roster = EmployeeJob.where(:employee_id => employee.employee_id, :time_start => beginning_of_day..end_of_day)
          for job in employees_jobs_for_roster
            if job_cancelled(job.job_id)
              next
            end
            if !same_job(job, record) && job_was_scheduled_in_between_existing_job(job, record)
                theres_a_conflict_in_schedule = true
                break
            end
          end
      end

      #Make sure there are no jobs that are sandwiched between existing jobs, where the start i
      for job in jobs_worked_by_employee_for_the_day
        if job_cancelled(job.job_id)
          next
        end
        if !same_job(job, record) && job_was_scheduled_in_between_existing_job(job, record)
            theres_a_conflict_in_schedule = true
            break
        end
      end
      return theres_a_conflict_in_schedule
    end

    def time_start_end_in_five_minute_intervals(time_start, time_end, record)
      if (time_start.min % 5 != 0 && time_start >= 0 && time_start < 60)
         record.errors.add(:time_start, "Starting time must be in 5 minute increments.")
      end

      if (time_start.min % 5 != 0 && time_start >= 0 && time_start < 60)
        record.errors.add(:time_end, "Ending time must be in 5 minute increments.")
      end
    end

    def time_start_end_range(time_start, time_end, record)
      if not between_7pm_and_8am(time_start)
      record.errors.add(:time_start, "Appointment must be between 8 AM and 7 PM")
      end

      if not between_7pm_and_8am(time_end)
        record.errors.add(:time_end, "Appointment must be between 8 AM and 7 PM")
      end
    end

    def time_start_and_end_are_not_same_time(record)
      if (record.time_start.hour == record.time_end.hour && (record.time_start.min == record.time_end.min))
      # if (record.time_start == record.time_end)
        record.errors.add(:time_end, "The appointment start and end time are the exact same, you can't have a job with 0 minutes")
      end
    end

    def time_start_not_before_end_time(record)
      if (record.time_start > record.time_end)
        record.errors.add(:time_end, "The appointment's start time must come before the end time")
      end
    end

    private
      def between_7pm_and_8am(t)
        return ((t.hour < 19 or (t.hour == 19 and t.min < 1)) and t.hour >= 8)
      end

      def same_job(existing_job, new_job)
        return existing_job.id == new_job.id
      end

      def job_was_scheduled_in_between_existing_job(existing_job, new_job)
        return new_job.time_start > existing_job.time_start && new_job.time_start < existing_job.time_end
      end

      def job_cancelled(job_id)
        is_cancelled = Job.where(:id => job_id, :job_status => 'Cancelled')
        if is_cancelled.count > 0
          return true
        else
          return false
        end
      end
  end

class InvoiceValidator < ActiveModel::Validator
    def validate(record)
        if not has_valid_invoice_type(record)
            record.errors.add(:invoice_type, "Your invoice type must be 'Invoice', 'Receipt', 'Estimate', or 'Change Order'")
        end

        if not_have_business(record)
            record.errors.add(:business, "You must have a business record attached to an invoice to create it!")
        end
    end

    def has_valid_invoice_type(record)
        t = record.invoice_type
        return t == 'Invoice' || t == 'Estimate' || t == 'Receipt' || t == 'Change Order'
    end

    def not_have_business(record)
        return record.business.nil?
    end
end

# class PhoneValidator < ActiveModel::EachValidator
class PhoneValidator < ActiveModel::Validator
    include ValidatorHelper

    # def validate_each(record, attribute, value)
    #   record[attribute] = value&.delete('^0-9') #Is this bad to change data in a validation..?
    #   record.errors[attribute] << "Phone numbers must be 10 digits & only numeric digits" unless (ValidatorHelper.valid_phone_format(record[attribute]) && record[attribute]&.count == 10 rescue nil)
    # end

    def validate(record)
      record.phone = record.phone&.delete('^0-9') #Is this bad to change data in a validation..?
      if not ValidatorHelper.valid_phone_format(record.phone)
        record.errors.add(:phone, "Phone number must only have numeric digits. No special characters are allowed.")
      end
      if record.phone&.count('0123456789') != 10
        record.errors.add(:phone, "Phone number must be 10 digits")
      end
    end

    # def valid_phone_format(phone)
    #     if phone == nil
    #       return true
    #     else
    #       return (/^[0-9]*$/.match(phone))
    #     end
    # end
  end

class InvoiceToValidator < ActiveModel::Validator
    def validate(record)
    end
  end

class JobStatusValidator < ActiveModel::Validator
    include JobsHelper
    def validate(record)
    end

    def nil_job_status(record)
      return record.job_status == nil
    end
end

class EmailValidator < ActiveModel::Validator
    def validate(record)
      if not valid_email(record.email)
        record.errors.add(:email, "Email wasn't in correct format.")
      end
    end

    def valid_email(email)
      return URI::MailTo::EMAIL_REGEXP.match(email)
    end
  end

class JobTimeValidator < ActiveModel::Validator
    def validate(record)
      # time_start_end_in_five_minute_intervals(record.time_start, record.time_end, record)
      # time_start_and_end_are_not_same_time(record)
      time_start_not_before_end_time(record)

      # if theres_a_conflict_in_schedule(record)
      #   record.errors.add(:date, "#{Employee.find(record.employee_id).first_name} already has a job scheduled for #{record.time_start.to_formatted_s(:short)} to #{record.time_end.to_formatted_s(:short)}")
      # end
    end

    ## Checks the database for any employee jobs where the given time_start and time_end would conflict for the given employee's id
    ## If there's a conflict, return true. Otherwise, return false.
    def theres_a_conflict_in_schedule(record)
      jobs_already_scheduled_during_start_time = EmployeeJob.where(:employee_id => record.employee_id,
                                                                   :time_start => record.time_start..record.time_end)
                                                            .where.not(:id=>record.id)
      start_count = jobs_already_scheduled_during_start_time.count

      overlapping_rosters = RosterJob.where(:time_start => record.time_start..record.time_end)
      for roster in overlapping_rosters
        if EmployeeRoster.where(:roster_id => roster.roster_id).pluck(:employee_id).include?(record.employee_id) && !job_cancelled(roster.job_id)
          start_count = start_count + 1
        end
      end

      for job in jobs_already_scheduled_during_start_time
        if job_cancelled(job.job_id)
          start_count = start_count-1
        end
      end

      jobs_already_scheduled_during_end_time = EmployeeJob.where(:employee_id => record.employee_id,
                                                                 :time_end => record.time_start..record.time_end)
                                                          .where.not(:id=>record.id)

end_count = jobs_already_scheduled_during_end_time.count

overlapping_rosters = RosterJob.where(:time_end => record.time_start..record.time_end)

      for roster in overlapping_rosters
        if EmployeeRoster.where(:roster_id => roster.roster_id).pluck(:employee_id).include?(record.employee_id) && !job_cancelled(roster.job_id)
        end_count = end_count + 1
        end
      end

      for job in jobs_already_scheduled_during_end_time
        if job_cancelled(job.job_id)
          end_count = end_count - 1
        end
      end
      theres_a_conflict_in_schedule = start_count > 0 || end_count > 0

      #Get the earliest time and latest time for the given date, then let's check if there's any conflicts in the date's schedule.
      beginning_of_day = record.time_start.change(:hour => 0)
      end_of_day = record.time_end.change(:hour => 24)

jobs_worked_by_employee_for_the_day = EmployeeJob.where(:employee_id => record.employee_id, :time_start => beginning_of_day..end_of_day)

      all_of_employees_rosters = EmployeeRoster.where(:employee_id => record.employee_id)
      for roster in all_of_employees_rosters
        roster_jobs_by_employee_for_the_day = RosterJob.where(:roster_id => roster.roster_id, :time_start => beginning_of_day..end_of_day)
        for job in roster_jobs_by_employee_for_the_day
          if job_cancelled(job.job_id)
            next
          end
          if !same_job(job, record) && job_was_scheduled_in_between_existing_job(job, record)
              theres_a_conflict_in_schedule = true
              break
          end
        end
      end

      #Make sure there are no jobs that are sandwiched between existing jobs, where the start i
      for job in jobs_worked_by_employee_for_the_day
        if job_cancelled(job.job_id)
          next
        end
        if !same_job(job, record) && job_was_scheduled_in_between_existing_job(job, record)
            theres_a_conflict_in_schedule = true
            break
        end
      end
      return theres_a_conflict_in_schedule
    end

    def time_start_end_in_five_minute_intervals(time_start, time_end, record)
      if (time_start.min % 5 != 0 && time_start >= 0 && time_start < 60)
         record.errors.add(:time_start, "Starting time must be in 5 minute increments.")
      end

      if (time_start.min % 5 != 0 && time_start >= 0 && time_start < 60)
        record.errors.add(:time_end, "Ending time must be in 5 minute increments.")
      end
    end

    def time_start_end_range(time_start, time_end, record)
      if not between_7pm_and_8am(time_start)
      record.errors.add(:time_start, "Appointment must be between 8 AM and 7 PM")
      end

      if not between_7pm_and_8am(time_end)
        record.errors.add(:time_end, "Appointment must be between 8 AM and 7 PM")
      end
    end

    def time_start_and_end_are_not_same_time(record)
      if (record.time_start.hour == record.time_end.hour && (record.time_start.min == record.time_end.min))
      # if (record.time_start == record.time_end)
        record.errors.add(:time_end, "The appointment start and end time are the exact same, you can't have a job with 0 minutes")
      end
    end

    def time_start_not_before_end_time(record)
      if record != nil && record.time_start && record.time_end && (record&.time_start > record&.time_end)
        record&.errors.add(:time_end, "The appointment's start time must come before the end time")
      end
    end

    private
      def between_7pm_and_8am(t)
        return ((t.hour < 19 or (t.hour == 19 and t.min < 1)) and t.hour >= 8)
      end

      def same_job(existing_job, new_job)
        return existing_job.id == new_job.id
      end

      def job_was_scheduled_in_between_existing_job(existing_job, new_job)
        return new_job.time_start > existing_job.time_start && new_job.time_start < existing_job.time_end
      end

      def job_cancelled(job_id)
        is_cancelled = Job.where(:id => job_id, :job_status => 'Cancelled')
        if is_cancelled.count > 0
          return true
        else
          return false
        end
      end
  end

class FirstLastNameValidator < ActiveModel::Validator
    def validate(record)
        if not has_valid_name(record)
            record.errors.add(:first_name, "You must have a first or last name")
        end
        if (record.first_name != "" && record.first_name != nil)
            if not valid_first_name(record.first_name)
                record.errors.add(:first_name, "You have invalid characters for your first name")
            end
        end
        if (record.last_name != "" && record.last_name != nil)
            if not valid_last_name(record.last_name)
                record.errors.add(:last_name, "You have invalid characters for your last name.")
            end
        end
    end

    def valid_first_name(first_name)
        return (first_name != nil and /\w*/.match(first_name))
    end

    def valid_last_name(last_name)
        return (last_name != nil and /\w*/.match(last_name))
    end

    def has_valid_name(record)
        if record.first_name.blank? #Not valid if both first and last name are blank. Must have either first or last name.
            return !record.last_name.blank?
        else
            return true
        end
    end
end

class LineItemValidator < ActiveModel::Validator
    def validate(record)
        if record.price&.nan?
            record.errors.add(:price, "Your line item must not be NaN!")
        end
    end
  end

class QuickbooksPushInvoiceWorker
include Sidekiq::Worker

  def perform(invoice_id, business_id)
    invoice = Invoice.find(invoice_id)
    business = Business.find(business_id)
    if invoice.invoice_type == "Invoice" && invoice.line_items.count != 0 && business.authenticated_with_quickbooks? &&
      successful_push = invoice.push_invoice_to_quickbooks!
      Rails.logger.info("Just successfully pushed the invoice #{invoice.id} into Quickbooks!")
    end
  end
end

class QuickbooksResyncInvoiceWorker
    include Sidekiq::Worker

    def perform(invoice_id, business_id)
      invoice = Invoice.find(invoice_id)
      business = Business.find(business_id)
      invoice.sync_with_quickbooks!(business)
    end
  end

class AutoRespondTextFromInboundCallWorker
    include Sidekiq::Worker

    def perform(phone_number, twilio_number, twilio_missed_call_message, business_id)
    #   Rails.logger.info("Auto respond to phone nubmer: #{phone_number} for business: #{business_id}")
    #   business = Business.find(business_id)
      message_content = twilio_missed_call_message

      if !twilio_missed_call_message.blank? && !twilio_number.blank?
        Message.create(sent_from: twilio_number, to: phone_number, content: message_content, business_id: business_id)
        # successful_push = invoice.push_invoice_to_quickbooks!
        Rails.logger.info("Just successfully auto-texted #{phone_number} from #{twilio_number} the message with contents: #{message_content}")
      end
    end
  end

module QuickbooksHelper
    #Takes the XML from Quickbooks and returns a hash of the customer's information
    def QuickbooksHelper.parse_customer_xml(customer_xml)
        #Handling the first/last names.. This might be off a little bit.
        first_name = nil
        last_name = nil
        if customer_xml.xpath("GivenName").text.empty? && customer_xml.xpath("FamilyName").empty? && customer_xml.xpath("CompanyName").empty?
            first_name = customer_xml.xpath("DisplayName").text.split(" ")[0]
            last_name = customer_xml.xpath("DisplayName").text.split(" ")[1]
        else
            first_name = customer_xml.xpath("GivenName").text
            last_name = customer_xml.xpath("FamilyName").text
        end

        customer_email = customer_xml.xpath("PrimaryEmailAddr/Address").text #if multiple emails how do we handle this?

        customer_hash = {:first_name => first_name,
                            :last_name => last_name,
                            # :phone => customer_xml.xpath("PrimaryPhone/FreeFormNumber").text,
                            :phone => customer_xml.xpath("//FreeFormNumber").first&.text,
                            :company => customer_xml.xpath("CompanyName").text,
                            :notes => "Imported from Quickbooks", #TODO: Not sure what to put here.
                            :email => customer_xml.xpath("PrimaryEmailAddr/Address").text,
                            :quickbooks_id => customer_xml.xpath("Id").text}

        location_hash = { :city => customer_xml.xpath("BillAddr/City").text,
            :state => customer_xml.xpath("BillAddr/CountrySubDivisionCode").text,
            :street_address => customer_xml.xpath("BillAddr/Line1").text,
            :zip_code => customer_xml.xpath("BillAddr/PostalCode").text}

return customer_hash, location_hash
end

    #In Quickbooks, There can also be a Mobile/FreeFormNumber, or a AlternatePhone/FreeFormNumber. We should check for these too.
    def QuickbooksHelper.phone_from_customer_xml(customer)
        phone_types = ["PrimaryPhone", "Mobile", "AlternatePhone"]

        phone_types.each do |phone_type|
            phone = customer.xpath("#{phone_type}/FreeFormNumber").text
            return phone unless phone.empty?
        end

nil
end

end

module ExpoNotificationHelper
    require 'uri'
    require 'net/http'
    def ExpoNotificationHelper.notify_client(device_tokens, notification_content, title, data)
        client = Exponent::Push::Client.new
        url = URI("https://exp.host/--/api/v2/push/send")

        messages = device_tokens.map {|token| {to: token.token, sound: "default", body: notification_content, title: title, data: data.to_json}}

        messages.each do |message|
          Rails.logger.info("Sending message: #{message}")
          url = URI("https://exp.host/--/api/v2/push/send")
          response = Net::HTTP.post_form(url, message) #message already formatted as param.
          Rails.logger.info("Just sent notification to expo, here is the expo server's response:")
          Rails.logger.info(response)
          Rails.logger.info(JSON.parse(response.body))
        end
    end
end

module MessagesHelper
    # Gets the messaging threads for the given business and groups them by number
    def self.message_threads(business, selected_conversation=nil, messages_limit = 25, page=0) #web version
        numbers = most_recent_numbers(business, messages_limit, page) #only shows the 25 most recent.. how do we add pagination on these.?
        if selected_conversation && !(numbers.include?(selected_conversation)) #append the phone number onto here if it's been selected. This fixes a bug where users have been getting empty conversations if it's an older conversation.
            numbers.append(selected_conversation)
        end
        return construct_messaging_threads(business, numbers)
    end

    def self.most_recent_numbers(business, messages_limit=25, page=0)
        #get the distinct number_threads from the business
        query = "SELECT sent_from, \"to\"
            FROM messages
                WHERE business_id = #{ActiveRecord::Base.connection.quote(business.id)}
                GROUP BY sent_from, \"to\"
                ORDER BY MAX(sent) DESC
                LIMIT #{messages_limit}
                OFFSET #{messages_limit * page}"

        all_numbers = ActiveRecord::Base.connection.execute(query).values
        numbers = all_numbers.map{|n| n.first == business.twilio_number ? n.second : n.first} #This line is because depending on which direction the message came in, the sent_from would either be from our customer, or from our business. The number we want to display is just the customer's number, period. So we simply check each one to see if the "sent_from" is our twilio number (meaning we sent it outbound to a customer, and if that's the case we'll display the "to" on the message), or to see if the "to" is to our twilio number, meaning it was sent to our business from a customer, and we want to display the "sent_from" phone number since that's the customer phone number.
        numbers = numbers.uniq #Remove any duplicates.
        return numbers
    end

    def self.most_recent_unread_numbers(business, messages_limit=25, page=0)
                #get the distinct number_threads from the business
                query = "SELECT sent_from, \"to\"
                FROM messages
                    WHERE business_id = #{ActiveRecord::Base.connection.quote(business.id)}
                        AND NOT has_been_read
                    GROUP BY sent_from, \"to\"
                    ORDER BY MAX(sent) DESC
                    LIMIT #{messages_limit}
                    OFFSET #{messages_limit * page}"

            all_numbers = ActiveRecord::Base.connection.execute(query).values
            numbers = all_numbers.map{|n| n.first == business.twilio_number ? n.second : n.first} #This line is because depending on which direction the message came in, the sent_from would either be from our customer, or from our business. The number we want to display is just the customer's number, period. So we simply check each one to see if the "sent_from" is our twilio number (meaning we sent it outbound to a customer, and if that's the case we'll display the "to" on the message), or to see if the "to" is to our twilio number, meaning it was sent to our business from a customer, and we want to display the "sent_from" phone number since that's the customer phone number.
            numbers = numbers.uniq #Remove any duplicates.
            return numbers
    end

    def self.most_recent_previews(business, page_number=0) #mobile version
        numbers = self.most_recent_numbers(business, 25, page_number) #subtract 1 from page number because it's a 0 based index whereas the one coming from mobile app is a 1 based index
        previews = numbers.map{|n| {number: n, customer: resolve_phone_number(business, n), message: get_latest_message_from_number(business, n)}}

        # numbers = most_recent_numbers(business, messages_limit, page) #only shows the 25 most recent.. how do we add pagination on these.?
        # if selected_conversation && !(numbers.include?(selected_conversation)) #append the phone number onto here if it's been selected. This fixes a bug where users have been getting empty conversations if it's an older conversation.
        #     numbers.append(selected_conversation)
        # end
        # return construct_messaging_threads(business, numbers)
    end

    def self.unread_message_previews(business)
        numbers = self.most_recent_unread_numbers(business)
        previews = numbers.map{|n| {number: n, customer: resolve_phone_number(business, n), message: get_latest_message_from_number(business, n)}}
    end

    def self.get_latest_message_from_number(business, number)
        last_message_sent_to_number = business.messages.where(to: number).order(sent: :desc)
        last_message_received_from_number = business.messages.where(sent_from: number).order(sent: :desc)
        # last_message_sent_to_number.sent
        if last_message_sent_to_number.empty?
            return last_message_received_from_number.first
        elsif  last_message_received_from_number.empty?
            return last_message_sent_to_number.first
        else
            last_message_sent_to_number.first.sent > last_message_received_from_number.first.sent ? last_message_sent_to_number.first : last_message_received_from_number.first
        end
    end

    def self.message_thread_for_specific_number(business, number)
        return construct_messaging_threads(business, [number])[0][1]
    end

    #Takes a phone number and business, and returns either the customer (if found), the contact (if no customer found but contact found), or nil (if can't find either)
    def self.resolve_phone_number(business, number)
        matches = business.customers.includes([:location, :marketing_source]).where(phone: number)

        if matches.length < 1 #match is a contact
            matches = business.customer_contacts.where(phone:number)
            if matches.length >= 1
                return matches.first
            end
        else
            return matches.first #returns a customer
        end

return nil
end

    # Take this phone number and return a customer recrord from the given business, if there's any customers with this number.
    # Only returns matching customer records, will not return any matching customer contact record.
    # Returns nil if no customer record is found that has the given phone number
    # Phone number must be normalized to '8013499925', format. 10 digits, no +1, no internationalization, no special symbols. See phone_validator.rb
    def self.resolve_phone_number_customer_records_only(business, number)
        matches = business.customers.includes([:location, :marketing_source]).where(phone: number)
        if matches.length >= 1
            return matches.first
        end

return nil
end

    def self.resolve_phone_number_readable(business, number)
        readable = self.resolve_phone_number(business, number)
        readable.nil? ? {} : readable
    end

    def self.get_uploaded_images_urls(customer)
        image_urls = customer.jobs.includes([:images_attachments => :blob]).map do |job|
            job.images.attachments.map do |image|
                if image
                    {
                        url: image.blob.service_url,
                        id: image.id
                    }
                end
            end
        end
        image_urls.flatten
    end

private

    def self.get_numbers_business_sent_messages_to_but_havent_replied_yet(business, numbers_that_have_replied_to_business)
        query = "SELECT \"to\"
        FROM messages
            WHERE business_id = #{ActiveRecord::Base.connection.quote(business.id)}
            AND sent_from = #{ActiveRecord::Base.connection.quote(business.twilio_number)}"

    numbers_that_have_replied_to_business.each do |n|
        query << " AND \"to\" <> #{ActiveRecord::Base.connection.quote n}"
    end

    query << "
    GROUP BY \"to\"
    ORDER BY MAX(sent) DESC"

ActiveRecord::Base.connection.execute(query).values.map{|n| n.first} #these are sorted by the most recent message and it's content.
end

    def self.construct_messaging_threads(business, numbers)
        message_threads = []
        numbers.each do |phone|
            #need to combine the two of them, in the correct sending order.
            messages_sent_from_this_number = business.messages.where(sent_from: phone).includes([:image_attachment => :blob]).includes([:employee]).order('sent ASC')
            messages_we_sent_to_this_number = business.messages.where(to: phone).includes([:image_attachment => :blob]).includes([:employee]).order('sent ASC')
            messages = messages_sent_from_this_number.or(messages_we_sent_to_this_number)
            messages.order('sent ASC')

            messages_info = {
                messages: messages.to_a,
                urls: get_message_image_url(messages).to_a
            }
            message_threads << [phone, messages_info]
        end
        return message_threads
    end

    def self.get_message_image_url(messages)
        messages.map do |msg|
            msg.image.attachment ? msg.image.attachment.blob.service_url : ''
        end
    end

    def self.get_employee_who_sent_last_message(recipientPhoneNumber, business)
        business.messages.where(to: recipientPhoneNumber).last&.employee
    end
end

require 'onesignal_notifications'
module DeliverNotification
    def DeliverNotification.push_text_notification(message_contents, sender_name, sender_number, device_tokens, sender_id, unread_message_count)
        begin
            Rails.logger.info("Now Sending a Text Message Notification!: #{message_contents}, sender_name: #{sender_name}, sender_number: #{sender_number}, device_tokens: #{device_tokens}, sender_id: #{sender_id}")
            return OneSignalNotifications.send_notification_of_text_message(message_contents, sender_name, sender_number, device_tokens, sender_id, unread_message_count)
        rescue Exception => e
            Rails.logger.info("There has been an error trying to push a notification about this message, error: " + e.message + " " + e.backtrace.join("\n"))
            return false
        end
    end

    def DeliverNotification.push_job_request_submitted_notification(job_request_id, job_request_notes, sender_name, sender_city, device_tokens)
        begin
            Rails.logger.info("Now Sending a Job Request Notification! For job request: #{job_request_id}, job_request_notes: #{job_request_notes} sender_name: #{sender_name}, sender_city: #{sender_city}, device_tokens: #{device_tokens}")
            return OneSignalNotifications.send_notification_of_job_request(job_request_id, job_request_notes, sender_name, sender_city, device_tokens)
        rescue Exception => e
            Rails.logger.info("There has been an error trying to push a notification about this message, error: " + e.message + " " + e.backtrace.join("\n"))
            return false
        end
    end

    def DeliverNotification.push_call_modified_received_event(call_id, call, customer_id, customer_name, customer_phone, url, player_ids)
        begin
            Rails.logger.info("Now Sending a call modified event! For call: #{call_id}, customer_id: #{customer_id} customer_name: #{customer_name}, customer_phone: #{customer_phone}, device_tokens: #{player_ids}, url: #{url}")
            return OneSignalNotifications.send_notification_of_receive_call_modified(call_id, call, customer_id, customer_name, customer_phone, url, player_ids)
        rescue Exception => e
            Rails.logger.info("There has been an error trying to push a notification about this message, error: " + e.message + " " + e.backtrace.join("\n"))
            return false
        end
    end

    def DeliverNotification.push_signature_collected_notification(invoice_id, shortened_url, customer_name, invoice_type, player_ids)
        begin
            Rails.logger.info("Now Sending a signature collected event! For invoice: #{invoice_id}, shortened_url: #{shortened_url} customer_name: #{customer_name}, invoice_type: #{invoice_type}, device_tokens: #{player_ids}")
            return OneSignalNotifications.send_notification_of_collected_signature(invoice_id, shortened_url, customer_name, invoice_type, player_ids)
        rescue Exception => e
            Rails.logger.info("There has been an error trying to push a notification about this message, error: " + e.message + " " + e.backtrace.join("\n"))
            return false
        end
    end
end

class JsonWebToken
  class << self
    # https://www.pluralsight.com/guides/token-based-authentication-with-ruby-on-rails-5-api
    def encode(payload, exp = 24.hours.from_now)
      payload[:exp] = exp.to_i
      JWT.encode(payload, Rails.application.secrets.secret_key_base)
    end

    def decode(token)
      body = JWT.decode(token, Rails.application.secrets.secret_key_base)[0]
      HashWithIndifferentAccess.new body
    rescue
      nil
    end
  end
end

#This module is responsible for querying our data and generating the google chart data for our reports page
module ReportsHelper

    # Generates our marketing sources data for new customers added
    def ReportsHelper.marketing_report_data(start_range, end_range, business)
        data_arr = []

        added_customers = business.customers.where('created_at >= ? AND created_at <= ?', start_range, end_range)
        business.marketing_sources.each do |ms|
            data_arr.push([ms.name, added_customers.select{ |c| c.marketing_source_id == ms.id }.count])
        end

        data_arr.push(["Unknown", added_customers.select{ |c| c.marketing_source_id.nil? }.count])

return data_arr
end

    def ReportsHelper.marketing_revenue_report_data(start_range, end_range, business)
        query = "SELECT marketing_sources.name, DATE(invoices.issued_on), SUM(NULLIF(line_items.price, 'NaN'))
            FROM invoices
                INNER JOIN line_items ON invoices.id = line_items.invoice_id
                INNER JOIN jobs ON invoices.job_id = jobs.id
                INNER JOIN customers ON jobs.customer_id = customers.id
                INNER JOIN marketing_sources ON marketing_sources.id = customers.marketing_source_id
            WHERE issued_on >= #{ActiveRecord::Base.connection.quote(start_range)}
                AND issued_on <= #{ActiveRecord::Base.connection.quote(end_range)}
                AND invoice_type = 'Invoice'
                AND jobs.business_id = #{ActiveRecord::Base.connection.quote(business.id)}
            GROUP BY marketing_sources.name, DATE(invoices.issued_on)"
        records = ActiveRecord::Base.connection.execute(query).values

        #[Date, Total1, Total2, Total3]
        marketing_source_to_column_index = {}
        counter = 0
        data_arr = ['Date']
        business.marketing_sources.each do |ms|
            marketing_source_to_column_index[ms.name] = counter
            data_arr.append(ms.name)
            counter += 1
        end

final_data = {} # [{"Date" => '08/01/2020', "Marketing_Source_1" => , "Marketing_Source_2" => }]

        records.each do |r|
            source_name = r.first
            date = DateTime.strptime(r.second, "%Y-%m-%d").strftime("%m/%d")
            total = r.third
            if final_data.key? date
                final_data[date][marketing_source_to_column_index[source_name]] += total
            else
                new_array = Array.new(business.marketing_sources.count) {|i| 0} #Create array filled with 0s
                new_array[marketing_source_to_column_index[source_name]] += total
                final_data[date] = new_array
            end
        end

        f = final_data.sort.map{|v| v.flatten}
        f.prepend(data_arr)
        f
    end

    def ReportsHelper.production_revenue_by_employee(start_range, end_range, business)
        query = "
        SELECT
        CONCAT(employees.first_name, ' ', employees.last_name) AS employee_name,
        SUM(
            CASE
                WHEN invoices.invoice_type = 'Invoice'
                    THEN NULLIF(line_items.price, 'NaN')
                ELSE 0
            END
        ) as invoice_line_items_total
        FROM invoices INNER JOIN line_items ON invoices.id = line_items.invoice_id
                    INNER JOIN jobs ON invoices.job_id = jobs.id
                    INNER JOIN employee_jobs ON jobs.id = employee_jobs.job_id
                    INNER JOIN employees ON employees.id = employee_jobs.employee_id
        WHERE invoices.issued_on >= #{ActiveRecord::Base.connection.quote(start_range)}
            AND invoices.issued_on <= #{ActiveRecord::Base.connection.quote(end_range)}
            AND (invoices.invoice_type = 'Invoice' OR invoices.invoice_type = 'Estimate')
            AND jobs.business_id = #{ActiveRecord::Base.connection.quote(business.id)}
            -- AND employee_jobs.employee_id <> jobs.owner_id
        GROUP BY employee_name;
        "

        #Sort alphabetically by sales rep's first name
        records_array = ActiveRecord::Base.connection.execute(query).values.sort_by {|i| i.first }

        data_array = [
            ['Employee', 'Revenue']
        ]

        records_array.each do |r|
            data_array.append([r.first, r.second])
        end

data_array
end

    def ReportsHelper.timeclocked_by_employee(start_range, end_range, business)
        query = "
        SELECT
        CONCAT(employees.first_name, ' ', employees.last_name) AS employee_name,
        SUM((DATE_PART('hour', clocked_out - clocked_in ) * 60 + DATE_PART('minute', clocked_out - clocked_in))/60) as timesheets_time_total
        FROM timesheets INNER JOIN employees ON employees.id = timesheets.employee_id
        WHERE timesheets.clocked_in >= #{ActiveRecord::Base.connection.quote(start_range)}
            AND timesheets.clocked_in <= #{ActiveRecord::Base.connection.quote(end_range)}
        GROUP BY employee_name;"

        #Sort alphabetically by employee's first name
        records_array = ActiveRecord::Base.connection.execute(query).values.sort_by {|i| i.first }

        data_array = [
            ['Employee', 'Time (In Hours)']
        ]

        records_array.each do |r|
            data_array.append([r.first, r.second])
        end

data_array
end

    # Queries and format our invoice (income) data for a certain range
    def ReportsHelper.income_report_data(start_range, end_range, business)
        invoices = business.invoices.where(invoice_type: "Invoice").where('issued_on >= ? AND issued_on <= ?', start_range, end_range)
        data_array = [["Day", "Income"]]

        query = "SELECT DATE(invoices.issued_on), SUM(NULLIF(line_items.price, 'NaN'))
            FROM line_items
            INNER JOIN invoices ON invoices.id = line_items.invoice_id
            INNER JOIN jobs ON jobs.id = invoices.job_id
            WHERE issued_on >= #{ActiveRecord::Base.connection.quote(start_range)}
            AND issued_on <= #{ActiveRecord::Base.connection.quote(end_range)}
            AND invoice_type = 'Invoice'
            AND jobs.business_id = #{ActiveRecord::Base.connection.quote(business.id)}
            GROUP BY DATE(issued_on)
            ORDER BY DATE(issued_on) ASC;"

        #Probably don't need to use the 'quote' on the business_id since it doesn't come from the controller params, but I'm doing it just to be safe.

        #Getting it into proper format now..
        records = ActiveRecord::Base.connection.execute(query).values
        records.each do |r|
            data_array.append([DateTime.strptime(r.first,"%Y-%m-%d").strftime("%Y-%m-%d"), r.second])
        end

return data_array
end

    def ReportsHelper.income_report_by_category_data(start_range, end_range, business)
        #TODO: Determine if we should send the monthly, daily, or weekly view.
        #Daily = time range <= 1 week
        #Weekly = time range > 1 week <= 4 weeks
        #Monthly = time range > 4 weeks

        query =
            "SELECT products.name, SUM(NULLIF(line_items.price, 'NaN'))
            FROM invoices
                INNER JOIN line_items ON invoices.id = line_items.invoice_id
                INNER JOIN products on line_items.product_id = products.id
                INNER JOIN jobs on jobs.id = invoices.job_id
            WHERE issued_on >= #{ActiveRecord::Base.connection.quote(start_range)}
                AND issued_on <= #{ActiveRecord::Base.connection.quote(end_range)}
                AND invoices.invoice_type = 'Invoice'
                AND jobs.business_id = #{ActiveRecord::Base.connection.quote(business.id)}
            GROUP BY products.name ORDER BY products.name ASC;"

        #Probably don't need to use the 'quote' on the business_id since it doesn't come from the controller params, but I'm doing it just to be safe.
        records_array = ActiveRecord::Base.connection.execute(query)
        data_array = [] #Formatting the data_array
        data_array << records_array.values.map{|v| v.first}.prepend('Date')
        data_array << records_array.values.map{|v| v.second}.prepend("#{start_range&.strftime("%m/%d")} - #{end_range&.strftime("%m/%d")}")
        return data_array
    end

def ReportsHelper.revenue_by_sales_rep_data(start_range, end_range, business)

        query = "SELECT
        CONCAT(employees.first_name, ' ', employees.last_name) AS employee_name,
        SUM(
            CASE
                WHEN invoices.invoice_type = 'Invoice'
                    THEN NULLIF(line_items.price, 'NaN')
                ELSE 0
            END
        ) as invoice_line_items_total,
        SUM(
            CASE
                WHEN invoices.invoice_type ='Estimate'
                    THEN NULLIF(line_items.price, 'NaN')
                ELSE 0
            END
        ) as estimate_line_items_total
        FROM invoices INNER JOIN line_items ON invoices.id = line_items.invoice_id
                    INNER JOIN jobs ON invoices.job_id = jobs.id
                    INNER JOIN employees ON jobs.owner_id = employees.id
        WHERE invoices.issued_on >= #{ActiveRecord::Base.connection.quote(start_range)}
            AND invoices.issued_on <= #{ActiveRecord::Base.connection.quote(end_range)}
            AND (invoices.invoice_type = 'Invoice' OR invoices.invoice_type = 'Estimate')
            AND jobs.business_id = #{ActiveRecord::Base.connection.quote(business.id)}
        GROUP BY employee_name;"

        #Sort alphabetically by sales rep's first name
        records_array = ActiveRecord::Base.connection.execute(query).values.sort_by {|i| i.first }

        data_array = [
            ['Sales Rep', 'Sales', 'Estimate']
        ]

        records_array.each do |r|
            data_array.append([r.first, r.second, r.third])
        end

data_array
end

    def ReportsHelper.event_total_report_data(start_range, end_range, business, employee)
        data_arr = ['Date', 'All', 'Web Sign In', 'Mobile Sign In', 'Invoice Creation', 'Job Creation', 'Job Request Creation']
        final_data = []
        final_data.append(data_arr)
        a_range = (start_range.to_date .. end_range.to_date)
        a_range.each do |date|
            if !employee.nil?
                final_data.append ReportsHelper.create_event_day_row_specific_employee(date, employee)
            elsif !business.nil?
                final_data.append ReportsHelper.create_event_day_row_specific_business(date, business)
            else
                final_data.append ReportsHelper.create_event_day_row_all(date)
            end
        end
        return final_data
    end

    def ReportsHelper.create_event_day_row_all(date)
        [date.to_s,
            Event.where(created_at: date.all_day).count,
            Event.where(created_at: date.all_day, name: 'Web Sign In').count,
            Event.where(created_at: date.all_day, name: 'Mobile Sign In').count,
            Event.where(created_at: date.all_day, resource: 'Invoice', name: 'Created').count,
            Event.where(created_at: date.all_day, resource: 'Job', name: 'Created').count,
            Event.where(created_at: date.all_day, resource: 'Job Request', name: 'Created').count]
    end

    def ReportsHelper.create_event_day_row_specific_business(date, business)
        [date.to_s,
            Event.where(created_at: date.all_day, business_id: business).count,
            Event.where(created_at: date.all_day, name: 'Web Sign In', business_id: business).count,
            Event.where(created_at: date.all_day, name: 'Mobile Sign In', business_id: business).count,
            Event.where(created_at: date.all_day, resource: 'Invoice', name: 'Created', business_id: business).count,
            Event.where(created_at: date.all_day, resource: 'Job', name: 'Created', business_id: business).count,
            Event.where(created_at: date.all_day, resource: 'Job Request', name: 'Created', business_id: business).count]
    end

    def ReportsHelper.create_event_day_row_specific_employee(date, employee)
        [date.to_s,
            Event.where(created_at: date.all_day, employee_id: employee).count,
            Event.where(created_at: date.all_day, name: 'Web Sign In', employee_id: employee).count,
            Event.where(created_at: date.all_day, name: 'Mobile Sign In', employee_id: employee).count,
            Event.where(created_at: date.all_day, resource: 'Invoice', name: 'Created', employee_id: employee).count,
            Event.where(created_at: date.all_day, resource: 'Job', name: 'Created', employee_id: employee).count,
            Event.where(created_at: date.all_day, resource: 'Job Request', name: 'Created', employee_id: employee).count]
    end
end

module GoogleCalendarApi
    def GoogleCalendarApi.client_options
        {
            client_id: "650654906628-tuhlkgl03r0lv41o8aolhub9i0100peo.apps.googleusercontent.com",
            client_secret: "QldutF5WkjqmoBlgcohIWWui",
            authorization_uri: 'https://accounts.google.com/o/oauth2/auth',
            token_credential_uri: 'https://accounts.google.com/o/oauth2/token',
            scope: Google::Apis::CalendarV3::AUTH_CALENDAR,
            redirect_uri: "#{ENV["BASE_URL"]}/authorize_gcal_oauth"
        }
    end
end

module StripeHelper
    def StripeHelper.calculate_surcharge(amount_business_needs_to_collect, application_percentage_fee)
        if amount_business_needs_to_collect <= 0
            return 0
        else
            return ((amount_business_needs_to_collect*(1+application_percentage_fee) +0.30)/0.971).round(2) #stripe takes .029 (2.9%) + 30 cents, so 1-.029 = .971
        end
    end

    def StripeHelper.to_cents(amount)
        if amount.nil?
            return 0
        else
            return (amount * 100).round
        end
    end
end

module ValidatorHelper
    def ValidatorHelper.valid_phone_format(phone)
        if phone == nil
          return true
        else
          return (/^[0-9]*$/.match(phone))
        end
    end
end

require 'uri'
require 'net/http'
require 'openssl'

module OneSignalNotifications
    def OneSignalNotifications.push_test_message
        url = URI("https://onesignal.com/api/v1/notifications?app_id=#{ENV["ONESIGNAL_APP_ID"]}")
        http = Net::HTTP.new(url.host, url.port)
        http.use_ssl = true

        request = Net::HTTP::Post.new(url)
        request["accept"] = 'application/json'
        request["Authorization"] = "Basic #{ENV["ONESIGNAL_REST_API_KEY"]}"
        request["content-type"] = 'application/json'
        # request.body = "{\"included_segments\":[\"Subscribed Users\"],\"contents\":{\"en\":\"English or Any Language Message\",\"es\":\"Spanish Message\"},\"name\":\"INTERNAL_CAMPAIGN_NAME\"}"

        # kody_iphone_player_id = "7ac839a3-ac8c-4fb3-b3e0-109fbd568090"
        kody_iphone_player_id = "d9969b80-c95b-49be-9f43-a70632084c39"
        #

request.body = "{\"include_player_ids\":[\"#{kody_iphone_player_id}\"],\"contents\":{\"en\":\"You have a new message notification!\",\"es\":\"Spanish Message\"},\"name\":\"INTERNAL_CAMPAIGN_NAME\"}"

        response = http.request(request)
        puts response.read_body
    end

    def OneSignalNotifications.send_test_message_to_kodys_device
        OneSignalNotifications.send_notification_of_text_message("Test text message from Kody", "Josh & Jennifer Stout", "8018564964", ["5a19e771-f47c-43d0-96d7-5c11aefb92d2"], "12")
    end

    # Sends a One Signal text message push notification to the mobile devices who have the passed in player ids, through the One Signal service.
    # See: https://documentation.onesignal.com/reference/push-channel-properties
    # Params:
    # +message_contents+:: Displayed in the push notification, this is the contents of the text message that will display to the user before the user clicks on the push notification
    # +sender_name+:: +Proc+ The name to display in the push notification, and to display as the sender in the messages screen once the push notification is opened
    # +sender_number+:: +Proc+ The phone number this message was received from. Used in the messages screen when user replies to the message, and in querying and showing previous messages in the messages screen.
    # +player_ids+:: +Proc+ These are the device_tokens that one signal assigned to our users when they first downloaded and opened the app. The message push notification gets sent out to all player_ids.
    # +sender_id+:: +Proc+ The customer id of whoever sent this message (if we can find a customer associated with this phone number). Used in the messages screen so you can click on customer record and be taken to the customer record
    # +unread_message_count+:: +Proc+ The number of unread messages this user has. Used to update the badge count on the app icon.
    # Returns: True if the push notifications were successfully delivered, False if the push notifications were not successfully delivered.
    def OneSignalNotifications.send_notification_of_text_message(message_contents, sender_name, sender_number, player_ids, sender_id, unread_message_count)
        params = {"app_id" => "#{ENV["ONESIGNAL_APP_ID"]}",
        "contents" => {"en" => message_contents || ""},
        "include_player_ids" => player_ids,
        "headings" => {"en" => sender_name || sender_number},
        "data" => {"NotificationType" => "InboundSMS", "name": sender_name, "phoneNumber": sender_number, "customerId": sender_id},
        'ios_badgeCount' => unread_message_count,
        'ios_badgeType' => 'SetTo',
      }
        uri = URI.parse('https://onesignal.com/api/v1/notifications')
        http = Net::HTTP.new(uri.host, uri.port)
        http.use_ssl = true

        request = Net::HTTP::Post.new(uri.path,'Content-Type'  => 'application/json;charset=utf-8')
        request.body = params.as_json.to_json
        response = http.request(request)
        puts response.body
        #TODO: Parse a response indicating that it wasn't successfully delivered, and return false.
        return true
    end

    # Sends a One Signal push notification of a job request to the mobile devices who have the passed in player ids, through the One Signal service.
    # See: https://documentation.onesignal.com/reference/push-channel-properties
    # Params:
    # +job_request_id+:: Used to open the job request when user clicks on the push notification
    # +job_request_notes+:: Displayed in the push notification, the description passed in by the user to display in the body of the push notification
    # +sender_name+:: +Proc+ The name to display in the push notification
    # +sender_city+:: +Proc+ The city this customer is in, to display in the subtitle of the push notification
    # +player_ids+:: +Proc+ These are the device_tokens that one signal assigned to our users when they first downloaded and opened the app. The message push notification gets sent out to all player_ids.
    # Returns: True if the push notifications were successfully delivered, False if the push notifications were not successfully delivered.
    def OneSignalNotifications.send_notification_of_job_request(job_request_id, job_request_notes, sender_name, sender_city, player_ids)
        params = {"app_id" => "#{ENV["ONESIGNAL_APP_ID"]}",
            "contents" => {"en" => "Notes: " + job_request_notes},
            "include_player_ids" => player_ids, #TODO: This will now be "include_subscription_ids: 6392d91a-b206-4b7b-a620-cd68e32c3a76"
            "headings" => {"en" => "Job Request: #{sender_name}"},
            "subtitle" => {"en" => "In #{sender_city}"},
            "data" => {"NotificationType" => "JobRequest", "job_request_id": job_request_id},
        }

        uri = URI.parse('https://onesignal.com/api/v1/notifications')
        http = Net::HTTP.new(uri.host, uri.port)
        http.use_ssl = true

        request = Net::HTTP::Post.new(uri.path,'Content-Type'  => 'application/json;charset=utf-8')
        request.body = params.as_json.to_json
        response = http.request(request)
        puts response.body
        #TODO: Parse a response indicating that it wasn't successfully delivered, and return false.
        return true
    end

    # Sends a One Signal push notification about a phone call to the mobile devices who have the passed in player ids, through the One Signal service.
    # See: https://documentation.onesignal.com/reference/push-channel-properties
    # Params:
    # +argument+:: Argument description
    # +job_request_notes+:: Displayed in the push notification, the description passed in by the user to display in the body of the push notification
    # +sender_name+:: +Proc+ The name to display in the push notification
    # +sender_city+:: +Proc+ The city this customer is in, to display in the subtitle of the push notification
    # +player_ids+:: +Proc+ These are the device_tokens that one signal assigned to our users when they first downloaded and opened the app. The message push notification gets sent out to all player_ids.
    # Returns: True if the push notifications were successfully delivered, False if the push notifications were not successfully delivered.
    def OneSignalNotifications.send_notification_of_receive_call_modified(call_id, call, customer_id, caller_name, customer_phone, url, player_ids)
        params = {"app_id" => "#{ENV["ONESIGNAL_APP_ID"]}",
            "contents" => {"en" => "Call with #{caller_name || customer_phone} finished!"},
            "include_player_ids" => player_ids,
            "headings" => {"en" => "Phone Call Finished: #{caller_name || customer_phone}"},
            "subtitle" => {"en" => "#{customer_phone}"},
            "data" => {"NotificationType" => "ReceiveCallModifiedEvent", "call_id": call_id, "call": call, "customer_id": customer_id, "caller_name": caller_name, "customer_phone": customer_phone, "url": url},
        } #TODO: there's a bug where the data is greater than 3500 bytes.
        # {"errors":["Option Metadata must not exceed 3500 bytes.","Data Data must be no more than 2048 bytes long","Option Message in English language is too long to send to an iOS device. You can either make the content shorter or shorten or remove the other options."]}

        uri = URI.parse('https://onesignal.com/api/v1/notifications')
        http = Net::HTTP.new(uri.host, uri.port)
        http.use_ssl = true

        request = Net::HTTP::Post.new(uri.path,'Content-Type'  => 'application/json;charset=utf-8')
        request.body = params.as_json.to_json
        response = http.request(request)
        puts response.body
        #TODO: Parse a response indicating that it wasn't successfully delivered, and return false.
        return true
    end

    # Sends a One Signal push notification telling the user we just collected a signature from their customer
    # See: https://documentation.onesignal.com/reference/push-channel-properties
    # Params:
    # +argument+:: Argument description
    # +invoice_id+:: the id if the invoice/estimate that was signed
    # +shortened_url+:: the url that can be used to view the signed invoice
    # +customer_name+:: +Proc+ the name of the customer who signed the invoice
    # +invoice_type+:: +Proc+ tells the user whether this was an "Invoice" or "Estimate" that was signed
    # +player_ids+:: +Proc+ These are the device_tokens that one signal assigned to our users when they first downloaded and opened the app. The message push notification gets sent out to all player_ids.
    # Returns: True if the push notifications were successfully delivered, False if the push notifications were not successfully delivered.
    def OneSignalNotifications.send_notification_of_collected_signature(invoice_id, shortened_url, customer_name, invoice_type, device_tokens)
        params = {"app_id" => "#{ENV["ONESIGNAL_APP_ID"]}",
            "contents" => {"en" => "#{customer_name} just signed their #{invoice_type}!"},
            "include_player_ids" => device_tokens,
            "headings" => {"en" => "Signature from #{customer_name}"},
            "subtitle" => {"en" => "Collected Signature. View Now"},
            "data" => {"NotificationType" => "SignatureCollected", "invoice_id": invoice_id, "url": shortened_url, "customer_name": customer_name, "invoice_type": invoice_type},
        } #TODO: there's a bug where the data is greater than 3500 bytes.
        # {"errors":["Option Metadata must not exceed 3500 bytes.","Data Data must be no more than 2048 bytes long","Option Message in English language is too long to send to an iOS device. You can either make the content shorter or shorten or remove the other options."]}

        uri = URI.parse('https://onesignal.com/api/v1/notifications')
        http = Net::HTTP.new(uri.host, uri.port)
        http.use_ssl = true

        request = Net::HTTP::Post.new(uri.path,'Content-Type'  => 'application/json;charset=utf-8')
        request.body = params.as_json.to_json
        response = http.request(request)
        puts response.body
        #TODO: Parse a response indicating that it wasn't successfully delivered, and return false.
        return true
    end

def OneSignalNotifications.view_devices
url = URI("https://onesignal.com/api/v1/players?app_id=#{ENV["ONESIGNAL_APP_ID"]}&limit=5&offset=offset")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

        request = Net::HTTP::Get.new(url)
        request["accept"] = 'text/plain'
        request["Authorization"] = "Basic #{ENV["ONESIGNAL_REST_API_KEY"]}"

        response = http.request(request)
        puts response.read_body
        # kody's iPhone Player Id = "7ac839a3-ac8c-4fb3-b3e0-109fbd568090"
    end

    def OneSignalNotifications.set_badge_count
        url = URI("https://onesignal.com/api/v1/notifications?app_id=#{ENV["ONESIGNAL_APP_ID"]}")
        http = Net::HTTP.new(url.host, url.port)
        http.use_ssl = true

        request = Net::HTTP::Post.new(url)
        request["accept"] = 'application/json'
        request["Authorization"] = "Basic #{ENV["ONESIGNAL_REST_API_KEY"]}"
        request["content-type"] = 'application/json'
        # request.body = "{\"included_segments\":[\"Subscribed Users\"],\"contents\":{\"en\":\"English or Any Language Message\",\"es\":\"Spanish Message\"},\"name\":\"INTERNAL_CAMPAIGN_NAME\"}"

        kody_iphone_player_id = "75a38e78-8647-4eca-bec2-e6f196ce9c2a"
        # 75a38e78-8647-4eca-bec2-e6f196ce9c2a

        # request.body = "{\"include_player_ids\":[\"#{kody_iphone_player_id}\"],\"contents\":{\"en\":\"You have a new message notification!\",\"es\":\"Spanish Message\"},\"name\":\"INTERNAL_CAMPAIGN_NAME\"}"
        request.body = {
            'include_player_ids' => [kody_iphone_player_id],
            'app_id' => ENV["ONESIGNAL_APP_ID"],
            'contents' => { 'en' => 'You have a new message notification!' },
            'ios_badgeCount' => 1, #TODO: set this to unread message.
            'ios_badgeType' => 'SetTo',
            # 'ios' => {'badgeCount' => 1}
        }.to_json

response = http.request(request)
puts response.read_body

        # Process the response
        # if response.code.to_i == 200
        #     puts "iOS badge count has been set successfully."
        # else
        #     puts "Failed to set iOS badge count. Error: #{response.body}"
        # end

end
end

class ApplicationMailer < ActionMailer::Base
default from: 'from@example.com'
layout 'mailer'

  def send_invoice(invoice)
    @invoice = invoice
    mail(
      to: @invoice.customer_to_invoice.email,
      from: @invoice.business.email,
      reply_to: @invoice.business.email,
      subject: @invoice.title
    )
  end

  def no_refresh_token_error(email_that_failed)
    @email = email_that_failed
    mail(
      to: 'kodyckendall@gmail.com',
      subject: "HSC Email failed due to refresh token failure"
    )
  end

  def send_support_ticket(employee, email, phone, message)
    @phone = phone
    @message = message
    @email = email
    mail(
      to: 'kodyckendall@gmail.com',
      subject: "Field Rocket support ticket: #{employee.full_name} from #{employee.business.name}"
    )
  end

  def notify_salesrep_of_payment(payment, rep_email)
    @invoice = payment.invoice
    @message = "Field Rocket - #{payment.invoice&.job&.customer&.full_name} has made a payment of $#{format("%.2f", payment.amount)} towards #{payment.invoice&.title}"
    mail(
      to: rep_email,
      subject: @message
    )
  end

  def notify_signature_collected(invoice, rep_email)
    @invoice = invoice
    @message = "Field Rocket - #{invoice.customer&.full_name} has signed #{invoice.title}!. Link: https://#{ENV["BASE_URL"]}/invoices/#{invoice.id}/sign?secret_key=#{invoice.secret_key}"
    mail(
      to: rep_email,
      subject: @message
    )
  end

  def notify_kody_of_quickbooks_failure(invoice, rep_email)
    @invoice = invoice
    @message = "Field Rocket - Quickbooks Failure for #{invoice.business.name}"
    mail(
      to: rep_email,
      subject: @message
    )
  end

  def send_daily_report(files)
    files.each do | file |
      attachments[file[:name]] = File.read(file[:path]) if File.exist?(file[:path])
    end

mail( to: 'kodyckendall@gmail.com', subject: "Daily Report Status" )
end
end

class ApplicationJob < ActiveJob::Base
end

# app/commands/authorize_api_request.rb
module Api
  class AuthorizeApiRequest
      prepend SimpleCommand

      def initialize(headers = {})
        @headers = headers
      end

      def call
        user
      end

      private

      attr_reader :headers

      def user
        @user ||= User.find(decoded_auth_token[:user_id]) if decoded_auth_token
        @user || errors.add(:token, 'Invalid token') && nil
      end

      def decoded_auth_token
        @decoded_auth_token ||= JsonWebToken.decode(http_auth_header)
      end

      def http_auth_header
        if headers['Authorization'].present?
          return headers['Authorization'].split(' ').last
        else
          errors.add(:token, 'Missing token')
        end
        nil
      end
    end
end

# app/commands/authenticate_user.rb
# module Api
  class AuthenticateUser
      prepend SimpleCommand

      def initialize(email, password) #email & password used when first authenticating & signing into a user account.
        @email = email
        @password = password
      end

      def call #makes a new web token based on the user id.
        JsonWebToken.encode(user_id: user.id) if user
      end

      private

      attr_accessor :email, :password

      def user
        user = Employee.where(email: email).first
        return user if user && user.valid_password?(password)
        errors.add :user_authentication, 'invalid credentials'
        nil
      end
    end
# end

home

Account

Edit Account

Basic Information

Edit your account details and settings.

              First name

              Last name

          Bio / Description

          Country


            United States

          The country is not visible to other users.

Subscribe to newsletter

            Yes

Update Your Password

Change your password.

          Old Password

          New Password

          The new password must not be empty.

          Confirm Password

Profile Settings

Update your public profile with relevant and meaningful information.

Avatar

"]'>

" class="avatar-img rounded" alt="..." data-dz-thumbnail>

Choose photo

          Description

Social links

Available for freelance?

            Yes, show me as available for freelance!

Save

<%
    badgeLabel = badgeLabel || 'OPEN'
    badgeClass= badgeClass || 'badge-light-gray'
    title= title || 'Add UI Buttons Page'
    comments= comments || 28
    assigned= assigned || ''
    avatarGroup= avatarGroup || false
    avatarCount= avatarCount || 1
    avatars= avatars || [
      "stack/256_rsz_1andy-lee-642320-unsplash.jpg",
      "stack/256_michael-dam-258165-unsplash.jpg",
      "stack/256_luke-porter-261779-unsplash.jpg"
    ]
%>

<%= title %> ml-auto"><%= badgeLabel %>

      folder_open
      Stack
      comment
      <%= comments %> comments

<% random_number = rand(0..2) %>

avatar-group<% end %>">
<% (0..random_number).each do |i| %>

" alt="Avatar" class="avatar-img rounded-circle">

<% end %>

        <% if random_number > 1 %>
        +2 more
        <% end %>

home

UI Components

Time & Date

Time & Date

Flatpickr

A simple yet powerful datepicker powered by Flatpickr. Please read the official plugin documentation for a full list of options.

Date Picker

          Date

Range Picker

          Range

Anchor Range Picker

Recent Orders

              13/03/2018 to 20/03/2018

help_outline

Date Time Picker

          Date Time

Time Picker

DateRangePicker

The DateRangePicker can be attached to any webpage element to pop up two calendars for selecting dates, times, or predefined ranges like "Last 30 Days". Please read the official plugin documentation for a full list of options.

Date Picker

          Date

Range Picker

          Range

Date Time Picker

          Date Time

Predefined Range

<%
  items= [
    {
      avatar: "stack/256_rsz_1andy-lee-642320-unsplash.jpg",
      name: "Jenell D. Matney",
      title: "Founder and CEO"
    }, {
      avatar: "stack/256_daniel-gaffey-1060698-unsplash.jpg",
      name: "Sherri J. Cardenas",
      title: "Software Engineer"
    }, {
      avatar: "stack/256_jeremy-banks-798787-unsplash.jpg",
      name: "Joseph S. Ferland",
      title: "Web Designer"
    }, {
      avatar: "stack/256_joao-silas-636453-unsplash.jpg",
      name: "Bryan K. Davis",
      title: "Web Developer"
    }, {
      avatar: "stack/256_luke-porter-261779-unsplash.jpg",
      name: "Elizabeth J. Ohara",
      title: "Business Analyst"
    }, {
      avatar: "stack/256_michael-dam-258165-unsplash.jpg",
      name: "Kaci M. Langston",
      title: "Human Resources"
    }]
  %>

          Employee name
          Employee title




      <% items.each do |item| %>

" alt="Avatar" class="avatar-img rounded-circle">

              <%= item[:name] %>

              <%= item[:title] %>

        more_vert

      <% end %>

home

UI Components

Forms

Forms

Default Forms

Stack supports all of Bootstrap's default form styling in addition to a handful of new input types and features. Please read the official documentation for a full list of options from Bootstrap's core library.

            Your email:

            Your password:

          Submit

Form Validation

Provide valuable, actionable feedback to your users with HTML5 form validation. Indicate invalid and valid form fields with .is-invalid and .is-valid classes.

                First name

Please provide a first name.

Looks good!

                Last name

Please provide a last name.

Looks good!

                City

Please provide a valid city.

Looks good!

                State

Please provide a valid state.

Looks good!

                Agree to terms and conditions

          Submit

Search

A dedicated form group alternative for search forms that always keeps the submit button as part of the form control.

Regular

                  search

Flush

                  search

Large

              search

Rounded

              search

Merge Group

A slightly modified version of the default input groups that always keeps icons as a part of the form control. Also works with validation.

remove_red_eye

lock_outline

remove_red_eye

lock_outline

Rounded

Form control with rounded corners with the .form-control-rounded modifier.

          Rounded

Flush

Remove paddings and borders from a form control with the .form-control-flush modifier.

          Flush

Toggle

Replaces a standard checkbox input with a toggle button.

Subscribe to newsletter

            Yes

Date Picker

A simple yet powerful datepicker powered by Flatpickr. Please read the official plugin documentation for a full list of options.

          Date

          Range

Input Masking

Mask your form controls depending on the context with the jQuery Mask plugin. Please read the official plugin documentation for a full list of options.

          Number

          Phone

          Date

Rich Text Editor

Powerful WYSIWYG text editor powered by Quill. Please read the official plugin documentation for a full list of options.

Default

Hello World!

Some initial bold text

Custom toolbar

Hello World!

Some initial bold text

Drag & Drop File Uploads

Drag and drop file uploads with image previews powered by Dropzone.js. Please read the official plugin documentation for a full list of options.

", "<%= image_path('stack/avatar/demi.png')%>", "<%= image_path('stack/avatar/green.svg')%>"]'>

              Choose file

                    " class="avatar-img rounded" alt="..." data-dz-thumbnail>







...


...






                    close

Select

Customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options powered by Select2. Please read the official plugin documentation for a full list of options.

          Basic

            My first option
            Another option
            Third option is here

          Avatars

            ">
              Adelle Sherley

            ">
              Adrian Demian

            ">
              Green Doe

          Multiple

            CSS
            HTML
            JavaScript
            Bootstrap

          Large

            CSS
            HTML
            JavaScript
            Bootstrap

        Small

          My first option
          Another option
          Third option is here

home

UI Components

Loaders

Loaders

Sizes

A simple yet versatile animated spinner component. Add .loader-[sm|lg] or .is-loading-[sm|lg] to create loaders at different sizes.

Loader Helper

Indicate loading state of nearly any component with an .is-loading modifier.

Loading card

Loading content

        Button
        Button

Colors

Using Bootstrap’s typical naming structure i.e. .loader-primary, you can create colored loaders depending on your needs.

home

UI Components

Drag & Drop

Drag & Drop

Simple Drag and Drop

Just add the data attribute data-toggle="dragula" to have drag and drop support in your container.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

  <% leftCards = [{
    avatar: "stack/256_rsz_1andy-lee-642320-unsplash.jpg",
    name: "Jenell D. Matney",
    title: "Founder and CEO"
  }, {
    avatar: "stack/256_daniel-gaffey-1060698-unsplash.jpg",
    name: "Sherri J. Cardenas",
    title: "Software Engineer"
  }, {
    avatar: "stack/256_jeremy-banks-798787-unsplash.jpg",
    name: "Joseph S. Ferland",
    title: "Web Designer"
  }] %>

  <% rightCards = [{
    avatar: "stack/256_joao-silas-636453-unsplash.jpg",
    name: "Bryan K. Davis",
    title: "Web Developer"
  }, {
    avatar: "stack/256_luke-porter-261779-unsplash.jpg",
    name: "Elizabeth J. Ohara",
    title: "Business Analyst"
  }, {
    avatar: "stack/256_michael-dam-258165-unsplash.jpg",
    name: "Kaci M. Langston",
    title: "Human Resources"
  }] %>

Containers

Add the data attribute data-dragula-containers='["#cards-left", "#cards-right"]' to allow the user to drag an element in any of the containers and drop it in any other container in the list.

Container #1

            <% leftCards.each do |card| %>
              <%= render 'user-feedback', avatar: card[:avatar], name: card[:name], title: card[:title] %>

            <% end %>

Container #2

            <% rightCards.each do |card| %>
              <%= render 'user-feedback', avatar: card[:avatar], name: card[:name], title: card[:title] %>
            <% end %>

Handles

Add the data attribute data-dragula-moves="js-dragula-handle" to allow the user to drag an element in any of the containers and drop it in any other container in the list using a handle.

Container #1

            <% leftCards.each do |card| %>
              <%= render 'user-handle', avatar: card[:avatar], name: card[:name], title: card[:title] %>
            <% end %>

Container #2

            <% rightCards.each do |card| %>
              <%= render 'user-handle', avatar: card[:avatar], name: card[:name], title: card[:title] %>
            <% end %>

home

UI Components

Tables

Tables

Toggle Checkboxes

A tiny plugin which adds the ability to toggle all checkboxes within a table.

        <%= render 'staff.table' %>

Search

Add search functionality to your tables with List.js. Please read the official plugin documentation for a full list of options.

          search

        <%= render 'staff.table' %>

Sort Columns

Add sorting functionality to your tables with by List.js. Please read the official plugin documentation for a full list of options.

<%= render 'sort-table'%>

<% icons = [{"e84d":{"name":"3d Rotation"},"eb3b":{"name":"Ac Unit"},"e190":{"name":"Access Alarm"},"e191":{"name":"Access Alarms"},"e192":{"name":"Access Time"},"e84e":{"name":"Accessibility"},"e914":{"name":"Accessible"},"e84f":{"name":"Account Balance"},"e850":{"name":"Account Balance Wallet"},"e851":{"name":"Account Box"},"e853":{"name":"Account Circle"},"e60e":{"name":"Adb"},"e145":{"name":"Add"},"e439":{"name":"Add A Photo"},"e193":{"name":"Add Alarm"},"e003":{"name":"Add Alert"},"e146":{"name":"Add Box"},"e147":{"name":"Add Circle"},"e148":{"name":"Add Circle Outline"},"e567":{"name":"Add Location"},"e854":{"name":"Add Shopping Cart"},"e39d":{"name":"Add To Photos"},"e05c":{"name":"Add To Queue"},"e39e":{"name":"Adjust"},"e630":{"name":"Airline Seat Flat"},"e631":{"name":"Airline Seat Flat Angled"},"e632":{"name":"Airline Seat Individual Suite"},"e633":{"name":"Airline Seat Legroom Extra"},"e634":{"name":"Airline Seat Legroom Normal"},"e635":{"name":"Airline Seat Legroom Reduced"},"e636":{"name":"Airline Seat Recline Extra"},"e637":{"name":"Airline Seat Recline Normal"},"e195":{"name":"Airplanemode Active"},"e194":{"name":"Airplanemode Inactive"},"e055":{"name":"Airplay"},"eb3c":{"name":"Airport Shuttle"},"e855":{"name":"Alarm"},"e856":{"name":"Alarm Add"},"e857":{"name":"Alarm Off"},"e858":{"name":"Alarm On"},"e019":{"name":"Album"},"eb3d":{"name":"All Inclusive"},"e90b":{"name":"All Out"},"e859":{"name":"Android"},"e85a":{"name":"Announcement"},"e5c3":{"name":"Apps"},"e149":{"name":"Archive"},"e5c4":{"name":"Arrow Back"},"e5db":{"name":"Arrow Downward"},"e5c5":{"name":"Arrow Drop Down"},"e5c6":{"name":"Arrow Drop Down Circle"},"e5c7":{"name":"Arrow Drop Up"},"e5c8":{"name":"Arrow Forward"},"e5d8":{"name":"Arrow Upward"},"e060":{"name":"Art Track"},"e85b":{"name":"Aspect Ratio"},"e85c":{"name":"Assessment"},"e85d":{"name":"Assignment"},"e85e":{"name":"Assignment Ind"},"e85f":{"name":"Assignment Late"},"e860":{"name":"Assignment Return"},"e861":{"name":"Assignment Returned"},"e862":{"name":"Assignment Turned In"},"e39f":{"name":"Assistant"},"e3a0":{"name":"Assistant Photo"},"e226":{"name":"Attach File"},"e227":{"name":"Attach Money"},"e2bc":{"name":"Attachment"},"e3a1":{"name":"Audiotrack"},"e863":{"name":"Autorenew"},"e01b":{"name":"Av Timer"},"e14a":{"name":"Backspace"},"e864":{"name":"Backup"},"e19c":{"name":"Battery Alert"},"e1a3":{"name":"Battery Charging Full"},"e1a4":{"name":"Battery Full"},"e1a5":{"name":"Battery Std"},"e1a6":{"name":"Battery Unknown"},"eb3e":{"name":"Beach Access"},"e52d":{"name":"Beenhere"},"e14b":{"name":"Block"},"e1a7":{"name":"Bluetooth"},"e60f":{"name":"Bluetooth Audio"},"e1a8":{"name":"Bluetooth Connected"},"e1a9":{"name":"Bluetooth Disabled"},"e1aa":{"name":"Bluetooth Searching"},"e3a2":{"name":"Blur Circular"},"e3a3":{"name":"Blur Linear"},"e3a4":{"name":"Blur Off"},"e3a5":{"name":"Blur On"},"e865":{"name":"Book"},"e866":{"name":"Bookmark"},"e867":{"name":"Bookmark Border"},"e228":{"name":"Border All"},"e229":{"name":"Border Bottom"},"e22a":{"name":"Border Clear"},"e22b":{"name":"Border Color"},"e22c":{"name":"Border Horizontal"},"e22d":{"name":"Border Inner"},"e22e":{"name":"Border Left"},"e22f":{"name":"Border Outer"},"e230":{"name":"Border Right"},"e231":{"name":"Border Style"},"e232":{"name":"Border Top"},"e233":{"name":"Border Vertical"},"e06b":{"name":"Branding Watermark"},"e3a6":{"name":"Brightness 1"},"e3a7":{"name":"Brightness 2"},"e3a8":{"name":"Brightness 3"},"e3a9":{"name":"Brightness 4"},"e3aa":{"name":"Brightness 5"},"e3ab":{"name":"Brightness 6"},"e3ac":{"name":"Brightness 7"},"e1ab":{"name":"Brightness Auto"},"e1ac":{"name":"Brightness High"},"e1ad":{"name":"Brightness Low"},"e1ae":{"name":"Brightness Medium"},"e3ad":{"name":"Broken Image"},"e3ae":{"name":"Brush"},"e6dd":{"name":"Bubble Chart"},"e868":{"name":"Bug Report"},"e869":{"name":"Build"},"e43c":{"name":"Burst Mode"},"e0af":{"name":"Business"},"eb3f":{"name":"Business Center"},"e86a":{"name":"Cached"},"e7e9":{"name":"Cake"},"e0b0":{"name":"Call"},"e0b1":{"name":"Call End"},"e0b2":{"name":"Call Made"},"e0b3":{"name":"Call Merge"},"e0b4":{"name":"Call Missed"},"e0e4":{"name":"Call Missed Outgoing"},"e0b5":{"name":"Call Received"},"e0b6":{"name":"Call Split"},"e06c":{"name":"Call To Action"},"e3af":{"name":"Camera"},"e3b0":{"name":"Camera Alt"},"e8fc":{"name":"Camera Enhance"},"e3b1":{"name":"Camera Front"},"e3b2":{"name":"Camera Rear"},"e3b3":{"name":"Camera Roll"},"e5c9":{"name":"Cancel"},"e8f6":{"name":"Card Giftcard"},"e8f7":{"name":"Card Membership"},"e8f8":{"name":"Card Travel"},"eb40":{"name":"Casino"},"e307":{"name":"Cast"},"e308":{"name":"Cast Connected"},"e3b4":{"name":"Center Focus Strong"},"e3b5":{"name":"Center Focus Weak"},"e86b":{"name":"Change History"},"e0b7":{"name":"Chat"},"e0ca":{"name":"Chat Bubble"},"e0cb":{"name":"Chat Bubble Outline"},"e5ca":{"name":"Check"},"e834":{"name":"Check Box"},"e835":{"name":"Check Box Outline Blank"},"e86c":{"name":"Check Circle"},"e5cb":{"name":"Chevron Left"},"e5cc":{"name":"Chevron Right"},"eb41":{"name":"Child Care"},"eb42":{"name":"Child Friendly"},"e86d":{"name":"Chrome Reader Mode"},"e86e":{"name":"Class"},"e14c":{"name":"Clear"},"e0b8":{"name":"Clear All"},"e5cd":{"name":"Close"},"e01c":{"name":"Closed Caption"},"e2bd":{"name":"Cloud"},"e2be":{"name":"Cloud Circle"},"e2bf":{"name":"Cloud Done"},"e2c0":{"name":"Cloud Download"},"e2c1":{"name":"Cloud Off"},"e2c2":{"name":"Cloud Queue"},"e2c3":{"name":"Cloud Upload"},"e86f":{"name":"Code"},"e3b6":{"name":"Collections"},"e431":{"name":"Collections Bookmark"},"e3b7":{"name":"Color Lens"},"e3b8":{"name":"Colorize"},"e0b9":{"name":"Comment"},"e3b9":{"name":"Compare"},"e915":{"name":"Compare Arrows"},"e30a":{"name":"Computer"},"e638":{"name":"Confirmation Number"},"e0d0":{"name":"Contact Mail"},"e0cf":{"name":"Contact Phone"},"e0ba":{"name":"Contacts"},"e14d":{"name":"Content Copy"},"e14e":{"name":"Content Cut"},"e14f":{"name":"Content Paste"},"e3ba":{"name":"Control Point"},"e3bb":{"name":"Control Point Duplicate"},"e90c":{"name":"Copyright"},"e150":{"name":"Create"},"e2cc":{"name":"Create New Folder"},"e870":{"name":"Credit Card"},"e3be":{"name":"Crop"},"e3bc":{"name":"Crop 16 9"},"e3bd":{"name":"Crop 3 2"},"e3bf":{"name":"Crop 5 4"},"e3c0":{"name":"Crop 7 5"},"e3c1":{"name":"Crop Din"},"e3c2":{"name":"Crop Free"},"e3c3":{"name":"Crop Landscape"},"e3c4":{"name":"Crop Original"},"e3c5":{"name":"Crop Portrait"},"e437":{"name":"Crop Rotate"},"e3c6":{"name":"Crop Square"},"e871":{"name":"Dashboard"},"e1af":{"name":"Data Usage"},"e916":{"name":"Date Range"},"e3c7":{"name":"Dehaze"},"e872":{"name":"Delete"},"e92b":{"name":"Delete Forever"},"e16c":{"name":"Delete Sweep"},"e873":{"name":"Description"},"e30b":{"name":"Desktop Mac"},"e30c":{"name":"Desktop Windows"},"e3c8":{"name":"Details"},"e30d":{"name":"Developer Board"},"e1b0":{"name":"Developer Mode"},"e335":{"name":"Device Hub"},"e1b1":{"name":"Devices"},"e337":{"name":"Devices Other"},"e0bb":{"name":"Dialer Sip"},"e0bc":{"name":"Dialpad"},"e52e":{"name":"Directions"},"e52f":{"name":"Directions Bike"},"e532":{"name":"Directions Boat"},"e530":{"name":"Directions Bus"},"e531":{"name":"Directions Car"},"e534":{"name":"Directions Railway"},"e566":{"name":"Directions Run"},"e533":{"name":"Directions Subway"},"e535":{"name":"Directions Transit"},"e536":{"name":"Directions Walk"},"e610":{"name":"Disc Full"},"e875":{"name":"Dns"},"e612":{"name":"Do Not Disturb"},"e611":{"name":"Do Not Disturb Alt"},"e643":{"name":"Do Not Disturb Off"},"e644":{"name":"Do Not Disturb On"},"e30e":{"name":"Dock"},"e7ee":{"name":"Domain"},"e876":{"name":"Done"},"e877":{"name":"Done All"},"e917":{"name":"Donut Large"},"e918":{"name":"Donut Small"},"e151":{"name":"Drafts"},"e25d":{"name":"Drag Handle"},"e613":{"name":"Drive Eta"},"e1b2":{"name":"Dvr"},"e3c9":{"name":"Edit"},"e568":{"name":"Edit Location"},"e8fb":{"name":"Eject"},"e0be":{"name":"Email"},"e63f":{"name":"Enhanced Encryption"},"e01d":{"name":"Equalizer"},"e000":{"name":"Error"},"e001":{"name":"Error Outline"},"e926":{"name":"Euro Symbol"},"e56d":{"name":"Ev Station"},"e878":{"name":"Event"},"e614":{"name":"Event Available"},"e615":{"name":"Event Busy"},"e616":{"name":"Event Note"},"e903":{"name":"Event Seat"},"e879":{"name":"Exit To App"},"e5ce":{"name":"Expand Less"},"e5cf":{"name":"Expand More"},"e01e":{"name":"Explicit"},"e87a":{"name":"Explore"},"e3ca":{"name":"Exposure"},"e3cb":{"name":"Exposure Neg 1"},"e3cc":{"name":"Exposure Neg 2"},"e3cd":{"name":"Exposure Plus 1"},"e3ce":{"name":"Exposure Plus 2"},"e3cf":{"name":"Exposure Zero"},"e87b":{"name":"Extension"},"e87c":{"name":"Face"},"e01f":{"name":"Fast Forward"},"e020":{"name":"Fast Rewind"},"e87d":{"name":"Favorite"},"e87e":{"name":"Favorite Border"},"e06d":{"name":"Featured Play List"},"e06e":{"name":"Featured Video"},"e87f":{"name":"Feedback"},"e05d":{"name":"Fiber Dvr"},"e061":{"name":"Fiber Manual Record"},"e05e":{"name":"Fiber New"},"e06a":{"name":"Fiber Pin"},"e062":{"name":"Fiber Smart Record"},"e2c4":{"name":"File Download"},"e2c6":{"name":"File Upload"},"e3d3":{"name":"Filter"},"e3d0":{"name":"Filter 1"},"e3d1":{"name":"Filter 2"},"e3d2":{"name":"Filter 3"},"e3d4":{"name":"Filter 4"},"e3d5":{"name":"Filter 5"},"e3d6":{"name":"Filter 6"},"e3d7":{"name":"Filter 7"},"e3d8":{"name":"Filter 8"},"e3d9":{"name":"Filter 9"},"e3da":{"name":"Filter 9 Plus"},"e3db":{"name":"Filter B And W"},"e3dc":{"name":"Filter Center Focus"},"e3dd":{"name":"Filter Drama"},"e3de":{"name":"Filter Frames"},"e3df":{"name":"Filter Hdr"},"e152":{"name":"Filter List"},"e3e0":{"name":"Filter None"},"e3e2":{"name":"Filter Tilt Shift"},"e3e3":{"name":"Filter Vintage"},"e880":{"name":"Find In Page"},"e881":{"name":"Find Replace"},"e90d":{"name":"Fingerprint"},"e5dc":{"name":"First Page"},"eb43":{"name":"Fitness Center"},"e153":{"name":"Flag"},"e3e4":{"name":"Flare"},"e3e5":{"name":"Flash Auto"},"e3e6":{"name":"Flash Off"},"e3e7":{"name":"Flash On"},"e539":{"name":"Flight"},"e904":{"name":"Flight Land"},"e905":{"name":"Flight Takeoff"},"e3e8":{"name":"Flip"},"e882":{"name":"Flip To Back"},"e883":{"name":"Flip To Front"},"e2c7":{"name":"Folder"},"e2c8":{"name":"Folder Open"},"e2c9":{"name":"Folder Shared"},"e617":{"name":"Folder Special"},"e167":{"name":"Font Download"},"e234":{"name":"Format Align Center"},"e235":{"name":"Format Align Justify"},"e236":{"name":"Format Align Left"},"e237":{"name":"Format Align Right"},"e238":{"name":"Format Bold"},"e239":{"name":"Format Clear"},"e23a":{"name":"Format Color Fill"},"e23b":{"name":"Format Color Reset"},"e23c":{"name":"Format Color Text"},"e23d":{"name":"Format Indent Decrease"},"e23e":{"name":"Format Indent Increase"},"e23f":{"name":"Format Italic"},"e240":{"name":"Format Line Spacing"},"e241":{"name":"Format List Bulleted"},"e242":{"name":"Format List Numbered"},"e243":{"name":"Format Paint"},"e244":{"name":"Format Quote"},"e25e":{"name":"Format Shapes"},"e245":{"name":"Format Size"},"e246":{"name":"Format Strikethrough"},"e247":{"name":"Format Textdirection L To R"},"e248":{"name":"Format Textdirection R To L"},"e249":{"name":"Format Underlined"},"e0bf":{"name":"Forum"},"e154":{"name":"Forward"},"e056":{"name":"Forward 10"},"e057":{"name":"Forward 30"},"e058":{"name":"Forward 5"},"eb44":{"name":"Free Breakfast"},"e5d0":{"name":"Fullscreen"},"e5d1":{"name":"Fullscreen Exit"},"e24a":{"name":"Functions"},"e927":{"name":"G Translate"},"e30f":{"name":"Gamepad"},"e021":{"name":"Games"},"e90e":{"name":"Gavel"},"e155":{"name":"Gesture"},"e884":{"name":"Get App"},"e908":{"name":"Gif"},"eb45":{"name":"Golf Course"},"e1b3":{"name":"Gps Fixed"},"e1b4":{"name":"Gps Not Fixed"},"e1b5":{"name":"Gps Off"},"e885":{"name":"Grade"},"e3e9":{"name":"Gradient"},"e3ea":{"name":"Grain"},"e1b8":{"name":"Graphic Eq"},"e3eb":{"name":"Grid Off"},"e3ec":{"name":"Grid On"},"e7ef":{"name":"Group"},"e7f0":{"name":"Group Add"},"e886":{"name":"Group Work"},"e052":{"name":"Hd"},"e3ed":{"name":"Hdr Off"},"e3ee":{"name":"Hdr On"},"e3f1":{"name":"Hdr Strong"},"e3f2":{"name":"Hdr Weak"},"e310":{"name":"Headset"},"e311":{"name":"Headset Mic"},"e3f3":{"name":"Healing"},"e023":{"name":"Hearing"},"e887":{"name":"Help"},"e8fd":{"name":"Help Outline"},"e024":{"name":"High Quality"},"e25f":{"name":"Highlight"},"e888":{"name":"Highlight Off"},"e889":{"name":"History"},"e88a":{"name":"Home"},"eb46":{"name":"Hot Tub"},"e53a":{"name":"Hotel"},"e88b":{"name":"Hourglass Empty"},"e88c":{"name":"Hourglass Full"},"e902":{"name":"Http"},"e88d":{"name":"Https"},"e3f4":{"name":"Image"},"e3f5":{"name":"Image Aspect Ratio"},"e0e0":{"name":"Import Contacts"},"e0c3":{"name":"Import Export"},"e912":{"name":"Important Devices"},"e156":{"name":"Inbox"},"e909":{"name":"Indeterminate Check Box"},"e88e":{"name":"Info"},"e88f":{"name":"Info Outline"},"e890":{"name":"Input"},"e24b":{"name":"Insert Chart"},"e24c":{"name":"Insert Comment"},"e24d":{"name":"Insert Drive File"},"e24e":{"name":"Insert Emoticon"},"e24f":{"name":"Insert Invitation"},"e250":{"name":"Insert Link"},"e251":{"name":"Insert Photo"},"e891":{"name":"Invert Colors"},"e0c4":{"name":"Invert Colors Off"},"e3f6":{"name":"Iso"},"e312":{"name":"Keyboard"},"e313":{"name":"Keyboard Arrow Down"},"e314":{"name":"Keyboard Arrow Left"},"e315":{"name":"Keyboard Arrow Right"},"e316":{"name":"Keyboard Arrow Up"},"e317":{"name":"Keyboard Backspace"},"e318":{"name":"Keyboard Capslock"},"e31a":{"name":"Keyboard Hide"},"e31b":{"name":"Keyboard Return"},"e31c":{"name":"Keyboard Tab"},"e31d":{"name":"Keyboard Voice"},"eb47":{"name":"Kitchen"},"e892":{"name":"Label"},"e893":{"name":"Label Outline"},"e3f7":{"name":"Landscape"},"e894":{"name":"Language"},"e31e":{"name":"Laptop"},"e31f":{"name":"Laptop Chromebook"},"e320":{"name":"Laptop Mac"},"e321":{"name":"Laptop Windows"},"e5dd":{"name":"Last Page"},"e895":{"name":"Launch"},"e53b":{"name":"Layers"},"e53c":{"name":"Layers Clear"},"e3f8":{"name":"Leak Add"},"e3f9":{"name":"Leak Remove"},"e3fa":{"name":"Lens"},"e02e":{"name":"Library Add"},"e02f":{"name":"Library Books"},"e030":{"name":"Library Music"},"e90f":{"name":"Lightbulb Outline"},"e919":{"name":"Line Style"},"e91a":{"name":"Line Weight"},"e260":{"name":"Linear Scale"},"e157":{"name":"Link"},"e438":{"name":"Linked Camera"},"e896":{"name":"List"},"e0c6":{"name":"Live Help"},"e639":{"name":"Live Tv"},"e53f":{"name":"Local Activity"},"e53d":{"name":"Local Airport"},"e53e":{"name":"Local Atm"},"e540":{"name":"Local Bar"},"e541":{"name":"Local Cafe"},"e542":{"name":"Local Car Wash"},"e543":{"name":"Local Convenience Store"},"e556":{"name":"Local Dining"},"e544":{"name":"Local Drink"},"e545":{"name":"Local Florist"},"e546":{"name":"Local Gas Station"},"e547":{"name":"Local Grocery Store"},"e548":{"name":"Local Hospital"},"e549":{"name":"Local Hotel"},"e54a":{"name":"Local Laundry Service"},"e54b":{"name":"Local Library"},"e54c":{"name":"Local Mall"},"e54d":{"name":"Local Movies"},"e54e":{"name":"Local Offer"},"e54f":{"name":"Local Parking"},"e550":{"name":"Local Pharmacy"},"e551":{"name":"Local Phone"},"e552":{"name":"Local Pizza"},"e553":{"name":"Local Play"},"e554":{"name":"Local Post Office"},"e555":{"name":"Local Printshop"},"e557":{"name":"Local See"},"e558":{"name":"Local Shipping"},"e559":{"name":"Local Taxi"},"e7f1":{"name":"Location City"},"e1b6":{"name":"Location Disabled"},"e0c7":{"name":"Location Off"},"e0c8":{"name":"Location On"},"e1b7":{"name":"Location Searching"},"e897":{"name":"Lock"},"e898":{"name":"Lock Open"},"e899":{"name":"Lock Outline"},"e3fc":{"name":"Looks"},"e3fb":{"name":"Looks 3"},"e3fd":{"name":"Looks 4"},"e3fe":{"name":"Looks 5"},"e3ff":{"name":"Looks 6"},"e400":{"name":"Looks One"},"e401":{"name":"Looks Two"},"e028":{"name":"Loop"},"e402":{"name":"Loupe"},"e16d":{"name":"Low Priority"},"e89a":{"name":"Loyalty"},"e158":{"name":"Mail"},"e0e1":{"name":"Mail Outline"},"e55b":{"name":"Map"},"e159":{"name":"Markunread"},"e89b":{"name":"Markunread Mailbox"},"e322":{"name":"Memory"},"e5d2":{"name":"Menu"},"e252":{"name":"Merge Type"},"e0c9":{"name":"Message"},"e029":{"name":"Mic"},"e02a":{"name":"Mic None"},"e02b":{"name":"Mic Off"},"e618":{"name":"Mms"},"e253":{"name":"Mode Comment"},"e254":{"name":"Mode Edit"},"e263":{"name":"Monetization On"},"e25c":{"name":"Money Off"},"e403":{"name":"Monochrome Photos"},"e7f2":{"name":"Mood"},"e7f3":{"name":"Mood Bad"},"e619":{"name":"More"},"e5d3":{"name":"More Horiz"},"e5d4":{"name":"More Vert"},"e91b":{"name":"Motorcycle"},"e323":{"name":"Mouse"},"e168":{"name":"Move To Inbox"},"e02c":{"name":"Movie"},"e404":{"name":"Movie Creation"},"e43a":{"name":"Movie Filter"},"e6df":{"name":"Multiline Chart"},"e405":{"name":"Music Note"},"e063":{"name":"Music Video"},"e55c":{"name":"My Location"},"e406":{"name":"Nature"},"e407":{"name":"Nature People"},"e408":{"name":"Navigate Before"},"e409":{"name":"Navigate Next"},"e55d":{"name":"Navigation"},"e569":{"name":"Near Me"},"e1b9":{"name":"Network Cell"},"e640":{"name":"Network Check"},"e61a":{"name":"Network Locked"},"e1ba":{"name":"Network Wifi"},"e031":{"name":"New Releases"},"e16a":{"name":"Next Week"},"e1bb":{"name":"Nfc"},"e641":{"name":"No Encryption"},"e0cc":{"name":"No Sim"},"e033":{"name":"Not Interested"},"e06f":{"name":"Note"},"e89c":{"name":"Note Add"},"e7f4":{"name":"Notifications"},"e7f7":{"name":"Notifications Active"},"e7f5":{"name":"Notifications None"},"e7f6":{"name":"Notifications Off"},"e7f8":{"name":"Notifications Paused"},"e90a":{"name":"Offline Pin"},"e63a":{"name":"Ondemand Video"},"e91c":{"name":"Opacity"},"e89d":{"name":"Open In Browser"},"e89e":{"name":"Open In New"},"e89f":{"name":"Open With"},"e7f9":{"name":"Pages"},"e8a0":{"name":"Pageview"},"e40a":{"name":"Palette"},"e925":{"name":"Pan Tool"},"e40b":{"name":"Panorama"},"e40c":{"name":"Panorama Fish Eye"},"e40d":{"name":"Panorama Horizontal"},"e40e":{"name":"Panorama Vertical"},"e40f":{"name":"Panorama Wide Angle"},"e7fa":{"name":"Party Mode"},"e034":{"name":"Pause"},"e035":{"name":"Pause Circle Filled"},"e036":{"name":"Pause Circle Outline"},"e8a1":{"name":"Payment"},"e7fb":{"name":"People"},"e7fc":{"name":"People Outline"},"e8a2":{"name":"Perm Camera Mic"},"e8a3":{"name":"Perm Contact Calendar"},"e8a4":{"name":"Perm Data Setting"},"e8a5":{"name":"Perm Device Information"},"e8a6":{"name":"Perm Identity"},"e8a7":{"name":"Perm Media"},"e8a8":{"name":"Perm Phone Msg"},"e8a9":{"name":"Perm Scan Wifi"},"e7fd":{"name":"Person"},"e7fe":{"name":"Person Add"},"e7ff":{"name":"Person Outline"},"e55a":{"name":"Person Pin"},"e56a":{"name":"Person Pin Circle"},"e63b":{"name":"Personal Video"},"e91d":{"name":"Pets"},"e0cd":{"name":"Phone"},"e324":{"name":"Phone Android"},"e61b":{"name":"Phone Bluetooth Speaker"},"e61c":{"name":"Phone Forwarded"},"e61d":{"name":"Phone In Talk"},"e325":{"name":"Phone Iphone"},"e61e":{"name":"Phone Locked"},"e61f":{"name":"Phone Missed"},"e620":{"name":"Phone Paused"},"e326":{"name":"Phonelink"},"e0db":{"name":"Phonelink Erase"},"e0dc":{"name":"Phonelink Lock"},"e327":{"name":"Phonelink Off"},"e0dd":{"name":"Phonelink Ring"},"e0de":{"name":"Phonelink Setup"},"e410":{"name":"Photo"},"e411":{"name":"Photo Album"},"e412":{"name":"Photo Camera"},"e43b":{"name":"Photo Filter"},"e413":{"name":"Photo Library"},"e432":{"name":"Photo Size Select Actual"},"e433":{"name":"Photo Size Select Large"},"e434":{"name":"Photo Size Select Small"},"e415":{"name":"Picture As Pdf"},"e8aa":{"name":"Picture In Picture"},"e911":{"name":"Picture In Picture Alt"},"e6c4":{"name":"Pie Chart"},"e6c5":{"name":"Pie Chart Outlined"},"e55e":{"name":"Pin Drop"},"e55f":{"name":"Place"},"e037":{"name":"Play Arrow"},"e038":{"name":"Play Circle Filled"},"e039":{"name":"Play Circle Outline"},"e906":{"name":"Play For Work"},"e03b":{"name":"Playlist Add"},"e065":{"name":"Playlist Add Check"},"e05f":{"name":"Playlist Play"},"e800":{"name":"Plus One"},"e801":{"name":"Poll"},"e8ab":{"name":"Polymer"},"eb48":{"name":"Pool"},"e0ce":{"name":"Portable Wifi Off"},"e416":{"name":"Portrait"},"e63c":{"name":"Power"},"e336":{"name":"Power Input"},"e8ac":{"name":"Power Settings New"},"e91e":{"name":"Pregnant Woman"},"e0df":{"name":"Present To All"},"e8ad":{"name":"Print"},"e645":{"name":"Priority High"},"e80b":{"name":"Public"},"e255":{"name":"Publish"},"e8ae":{"name":"Query Builder"},"e8af":{"name":"Question Answer"},"e03c":{"name":"Queue"},"e03d":{"name":"Queue Music"},"e066":{"name":"Queue Play Next"},"e03e":{"name":"Radio"},"e837":{"name":"Radio Button Checked"},"e836":{"name":"Radio Button Unchecked"},"e560":{"name":"Rate Review"},"e8b0":{"name":"Receipt"},"e03f":{"name":"Recent Actors"},"e91f":{"name":"Record Voice Over"},"e8b1":{"name":"Redeem"},"e15a":{"name":"Redo"},"e5d5":{"name":"Refresh"},"e15b":{"name":"Remove"},"e15c":{"name":"Remove Circle"},"e15d":{"name":"Remove Circle Outline"},"e067":{"name":"Remove From Queue"},"e417":{"name":"Remove Red Eye"},"e928":{"name":"Remove Shopping Cart"},"e8fe":{"name":"Reorder"},"e040":{"name":"Repeat"},"e041":{"name":"Repeat One"},"e042":{"name":"Replay"},"e059":{"name":"Replay 10"},"e05a":{"name":"Replay 30"},"e05b":{"name":"Replay 5"},"e15e":{"name":"Reply"},"e15f":{"name":"Reply All"},"e160":{"name":"Report"},"e8b2":{"name":"Report Problem"},"e56c":{"name":"Restaurant"},"e561":{"name":"Restaurant Menu"},"e8b3":{"name":"Restore"},"e929":{"name":"Restore Page"},"e0d1":{"name":"Ring Volume"},"e8b4":{"name":"Room"},"eb49":{"name":"Room Service"},"e418":{"name":"Rotate 90 Degrees Ccw"},"e419":{"name":"Rotate Left"},"e41a":{"name":"Rotate Right"},"e920":{"name":"Rounded Corner"},"e328":{"name":"Router"},"e921":{"name":"Rowing"},"e0e5":{"name":"Rss Feed"},"e642":{"name":"Rv Hookup"},"e562":{"name":"Satellite"},"e161":{"name":"Save"},"e329":{"name":"Scanner"},"e8b5":{"name":"Schedule"},"e80c":{"name":"School"},"e1be":{"name":"Screen Lock Landscape"},"e1bf":{"name":"Screen Lock Portrait"},"e1c0":{"name":"Screen Lock Rotation"},"e1c1":{"name":"Screen Rotation"},"e0e2":{"name":"Screen Share"},"e623":{"name":"Sd Card"},"e1c2":{"name":"Sd Storage"},"e8b6":{"name":"Search"},"e32a":{"name":"Security"},"e162":{"name":"Select All"},"e163":{"name":"Send"},"e811":{"name":"Sentiment Dissatisfied"},"e812":{"name":"Sentiment Neutral"},"e813":{"name":"Sentiment Satisfied"},"e814":{"name":"Sentiment Very Dissatisfied"},"e815":{"name":"Sentiment Very Satisfied"},"e8b8":{"name":"Settings"},"e8b9":{"name":"Settings Applications"},"e8ba":{"name":"Settings Backup Restore"},"e8bb":{"name":"Settings Bluetooth"},"e8bd":{"name":"Settings Brightness"},"e8bc":{"name":"Settings Cell"},"e8be":{"name":"Settings Ethernet"},"e8bf":{"name":"Settings Input Antenna"},"e8c0":{"name":"Settings Input Component"},"e8c1":{"name":"Settings Input Composite"},"e8c2":{"name":"Settings Input Hdmi"},"e8c3":{"name":"Settings Input Svideo"},"e8c4":{"name":"Settings Overscan"},"e8c5":{"name":"Settings Phone"},"e8c6":{"name":"Settings Power"},"e8c7":{"name":"Settings Remote"},"e1c3":{"name":"Settings System Daydream"},"e8c8":{"name":"Settings Voice"},"e80d":{"name":"Share"},"e8c9":{"name":"Shop"},"e8ca":{"name":"Shop Two"},"e8cb":{"name":"Shopping Basket"},"e8cc":{"name":"Shopping Cart"},"e261":{"name":"Short Text"},"e6e1":{"name":"Show Chart"},"e043":{"name":"Shuffle"},"e1c8":{"name":"Signal Cellular 4 Bar"},"e1cd":{"name":"Signal Cellular Connected No Internet 4 Bar"},"e1ce":{"name":"Signal Cellular No Sim"},"e1cf":{"name":"Signal Cellular Null"},"e1d0":{"name":"Signal Cellular Off"},"e1d8":{"name":"Signal Wifi 4 Bar"},"e1d9":{"name":"Signal Wifi 4 Bar Lock"},"e1da":{"name":"Signal Wifi Off"},"e32b":{"name":"Sim Card"},"e624":{"name":"Sim Card Alert"},"e044":{"name":"Skip Next"},"e045":{"name":"Skip Previous"},"e41b":{"name":"Slideshow"},"e068":{"name":"Slow Motion Video"},"e32c":{"name":"Smartphone"},"eb4a":{"name":"Smoke Free"},"eb4b":{"name":"Smoking Rooms"},"e625":{"name":"Sms"},"e626":{"name":"Sms Failed"},"e046":{"name":"Snooze"},"e164":{"name":"Sort"},"e053":{"name":"Sort By Alpha"},"eb4c":{"name":"Spa"},"e256":{"name":"Space Bar"},"e32d":{"name":"Speaker"},"e32e":{"name":"Speaker Group"},"e8cd":{"name":"Speaker Notes"},"e92a":{"name":"Speaker Notes Off"},"e0d2":{"name":"Speaker Phone"},"e8ce":{"name":"Spellcheck"},"e838":{"name":"Star"},"e83a":{"name":"Star Border"},"e839":{"name":"Star Half"},"e8d0":{"name":"Stars"},"e0d3":{"name":"Stay Current Landscape"},"e0d4":{"name":"Stay Current Portrait"},"e0d5":{"name":"Stay Primary Landscape"},"e0d6":{"name":"Stay Primary Portrait"},"e047":{"name":"Stop"},"e0e3":{"name":"Stop Screen Share"},"e1db":{"name":"Storage"},"e8d1":{"name":"Store"},"e563":{"name":"Store Mall Directory"},"e41c":{"name":"Straighten"},"e56e":{"name":"Streetview"},"e257":{"name":"Strikethrough S"},"e41d":{"name":"Style"},"e5d9":{"name":"Subdirectory Arrow Left"},"e5da":{"name":"Subdirectory Arrow Right"},"e8d2":{"name":"Subject"},"e064":{"name":"Subscriptions"},"e048":{"name":"Subtitles"},"e56f":{"name":"Subway"},"e8d3":{"name":"Supervisor Account"},"e049":{"name":"Surround Sound"},"e0d7":{"name":"Swap Calls"},"e8d4":{"name":"Swap Horiz"},"e8d5":{"name":"Swap Vert"},"e8d6":{"name":"Swap Vertical Circle"},"e41e":{"name":"Switch Camera"},"e41f":{"name":"Switch Video"},"e627":{"name":"Sync"},"e628":{"name":"Sync Disabled"},"e629":{"name":"Sync Problem"},"e62a":{"name":"System Update"},"e8d7":{"name":"System Update Alt"},"e8d8":{"name":"Tab"},"e8d9":{"name":"Tab Unselected"},"e32f":{"name":"Tablet"},"e330":{"name":"Tablet Android"},"e331":{"name":"Tablet Mac"},"e420":{"name":"Tag Faces"},"e62b":{"name":"Tap And Play"},"e564":{"name":"Terrain"},"e262":{"name":"Text Fields"},"e165":{"name":"Text Format"},"e0d8":{"name":"Textsms"},"e421":{"name":"Texture"},"e8da":{"name":"Theaters"},"e8db":{"name":"Thumb Down"},"e8dc":{"name":"Thumb Up"},"e8dd":{"name":"Thumbs Up Down"},"e62c":{"name":"Time To Leave"},"e422":{"name":"Timelapse"},"e922":{"name":"Timeline"},"e425":{"name":"Timer"},"e423":{"name":"Timer 10"},"e424":{"name":"Timer 3"},"e426":{"name":"Timer Off"},"e264":{"name":"Title"},"e8de":{"name":"Toc"},"e8df":{"name":"Today"},"e8e0":{"name":"Toll"},"e427":{"name":"Tonality"},"e913":{"name":"Touch App"},"e332":{"name":"Toys"},"e8e1":{"name":"Track Changes"},"e565":{"name":"Traffic"},"e570":{"name":"Train"},"e571":{"name":"Tram"},"e572":{"name":"Transfer Within A Station"},"e428":{"name":"Transform"},"e8e2":{"name":"Translate"},"e8e3":{"name":"Trending Down"},"e8e4":{"name":"Trending Flat"},"e8e5":{"name":"Trending Up"},"e429":{"name":"Tune"},"e8e6":{"name":"Turned In"},"e8e7":{"name":"Turned In Not"},"e333":{"name":"Tv"},"e169":{"name":"Unarchive"},"e166":{"name":"Undo"},"e5d6":{"name":"Unfold Less"},"e5d7":{"name":"Unfold More"},"e923":{"name":"Update"},"e1e0":{"name":"Usb"},"e8e8":{"name":"Verified User"},"e258":{"name":"Vertical Align Bottom"},"e259":{"name":"Vertical Align Center"},"e25a":{"name":"Vertical Align Top"},"e62d":{"name":"Vibration"},"e070":{"name":"Video Call"},"e071":{"name":"Video Label"},"e04a":{"name":"Video Library"},"e04b":{"name":"Videocam"},"e04c":{"name":"Videocam Off"},"e338":{"name":"Videogame Asset"},"e8e9":{"name":"View Agenda"},"e8ea":{"name":"View Array"},"e8eb":{"name":"View Carousel"},"e8ec":{"name":"View Column"},"e42a":{"name":"View Comfy"},"e42b":{"name":"View Compact"},"e8ed":{"name":"View Day"},"e8ee":{"name":"View Headline"},"e8ef":{"name":"View List"},"e8f0":{"name":"View Module"},"e8f1":{"name":"View Quilt"},"e8f2":{"name":"View Stream"},"e8f3":{"name":"View Week"},"e435":{"name":"Vignette"},"e8f4":{"name":"Visibility"},"e8f5":{"name":"Visibility Off"},"e62e":{"name":"Voice Chat"},"e0d9":{"name":"Voicemail"},"e04d":{"name":"Volume Down"},"e04e":{"name":"Volume Mute"},"e04f":{"name":"Volume Off"},"e050":{"name":"Volume Up"},"e0da":{"name":"Vpn Key"},"e62f":{"name":"Vpn Lock"},"e1bc":{"name":"Wallpaper"},"e002":{"name":"Warning"},"e334":{"name":"Watch"},"e924":{"name":"Watch Later"},"e42c":{"name":"Wb Auto"},"e42d":{"name":"Wb Cloudy"},"e42e":{"name":"Wb Incandescent"},"e436":{"name":"Wb Iridescent"},"e430":{"name":"Wb Sunny"},"e63d":{"name":"Wc"},"e051":{"name":"Web"},"e069":{"name":"Web Asset"},"e16b":{"name":"Weekend"},"e80e":{"name":"Whatshot"},"e1bd":{"name":"Widgets"},"e63e":{"name":"Wifi"},"e1e1":{"name":"Wifi Lock"},"e1e2":{"name":"Wifi Tethering"},"e8f9":{"name":"Work"},"e25b":{"name":"Wrap Text"},"e8fa":{"name":"Youtube Searched For"},"e8ff":{"name":"Zoom In"},"e900":{"name":"Zoom Out"},"e56b":{"name":"Zoom Out Map"}}]

%>

home

UI Components

Icons

Icons

          Material Icons
          Font Awesome

<% icons[0].each do |icon|%>

                  <% icon = icon[1][:name].downcase.gsub(' ','_') %>
                  <%= icon %>
                  <%= icon %>

<% end %>

home

UI Components

Pagination

Pagination

// content above this line

            View

              20
              50
              100
              200

20 of 100 arrow_forward

Pagination Light

            <%= render 'pagination', pages: 4, first: true, last: true %>
            <%= render 'pagination', pages: 2, labels: true, class: "m-0" %>

Pagination Square

           <%= render 'pagination', pages: 4, first: true, last: true %>
            <%= render 'pagination', pages: 2, labels: true, class: "m-0" %>

Pagination Rounded

             <%= render 'pagination', pages: 4, first: true, last: true %>
            <%= render 'pagination', pages: 2, labels: true, class: "m-0" %>

event
Wednesday, 24 Oct

<% items = [{
  time: "12:30 PM",
  title: "#4813 - Fix email alignment on iPhone 7",
  badge_label: "NEW",
  badge_class: "badge-light-gray",
  started_by: "Michael S.",
  tag: "DEPLOYED",
  assigned_image: "stack/256_daniel-gaffey-1060698-unsplash.jpg",
  assigned: "Sherri Cardenas"
}, {
  time: "07:48 PM",
  title: "#4813 - Create account profile page",
  badge_label: "RESOLVED",
  badge_class: "badge-success",
  started_by: "Adrian D.",
  tag: "CONCEPT",
  assigned_image: "stack/256_rsz_1andy-lee-642320-unsplash.jpg",
  assigned: "Jenell Matney"
}, {
  time: "03:13 PM",
  title: "#4811 - Design new Dashboard",
  badge_label: "PRO",
  badge_class: "badge-warning",
  started_by: "John L.",
  tag: "WIREFRAME",
  assigned_image: "stack/256_jeremy-banks-798787-unsplash.jpg",
  assigned: "Joseph Ferland"
}, {
  time: "12:30 PM",
  title: "#4901 - Design Pricing Table",
  badge_label: "NEW",
  badge_class: "badge-light-gray",
  started_by: "Michael S.",
  tag: "DEPLOYED",
  assigned_image: "stack/256_joao-silas-636453-unsplash.jpg",
  assigned: "Bryan Davis"
}] %>

<% items.each do |item| %>
  <%= render 'projects_activity_item',

    time: item[:time],
    title: item[:title],
    badge_label:item[:badge_label],
    badge_class:item[:badge_class],
    started_by:item[:started_by],
    tag:item[:tag],
    assigned_image:item[:assigned_image],
    assigned: item[:assigned]
  %>
<% end %>

event
Tuesday, 23 Oct

<% items = [{
  time: "07:48 PM",
  title: "#4923 - Fix spacings on Stories page",
  badge_label: "RESOLVED",
  badge_class: "badge-success",
  started_by: "Adrian D.",
  tag: "CONCEPT",
  assigned_image: "stack/256_luke-porter-261779-unsplash.jpg",
  assigned: "Elizabeth Ohara"
}, {
  time: "03:13 PM",
  title: "#4813 - Fix email alignment on iPhone 7",
  badge_label: "NEW",
  badge_class: "badge-light-gray",
  started_by: "John L.",
  tag: "WIREFRAME",
  assigned_image: "stack/256_michael-dam-258165-unsplash.jpg",
  assigned: "Kaci Langston"
}] %>

<% items.each do |item| %>
  <%= render 'projects_activity_item',

    time: item[:time],
    title: item[:title],
    badge_label:item[:badge_label],
    badge_class:item[:badge_class],
    started_by:item[:started_by],
    tag:item[:tag],
    assigned_image:item[:assigned_image],
    assigned: item[:assigned]
  %>
<% end %>

<%= render 'pagination', pages: 4, first: true, last: true, align:'center' %>

home

Apps

Event Calendar

Event Calendar

New Event

Drag and drop your event or click in the calendar.

          drag_handle
          New Theme Release

          drag_handle
          My Event

          drag_handle
          Meet manager

          drag_handle
          Create New theme

        Remove after drop

<% content_for :footer do %>

×

Add New Event

        Close
        Create event
        Delete

×

Add a category

            Category Name

            Choose Category Color

              Primary
              Success
              Danger
              Info
              Warning
              Dark

          Close
          Save

<% end %>

home

Pages

Pricing

Pricing

<% pricing = [{
  title: 'Personal',
  amount: 29,
  features: [
    'HTML/SCSS/JS',
    '6 Months Support'
  ]
}, {
  title: 'Developers',
  amount: 59,
  popular: true,
  btn_variant: 'primary',
  features: [
    'HTML/SCSS/JS',
    '6 Months Support',
    'HTML/SCSS/JS',
    '6 Months Support'
  ]
}, {
  title: 'Personal',
  amount: 199,
  features: [
    'HTML/SCSS/JS',
    '6 Months Support',
    'HTML/SCSS/JS',
    '6 Months Support',
    'HTML/SCSS/JS',
    '6 Months Support'
  ]
}] %>

<% pricing.each do |item| %>

pricing__card--popular <% end %>">
        <% if item[:popular] %>
        most popular
        <% end %>

<%= item[:title] %>

              <%= item[:amount] %>

                USD
                *monthly

<% if item[:features]%>

<%= feature %>

            <% end %>
             mt-auto">Purchase Now

<% end %>

home

UI Components

Buttons

Buttons

Default Buttons

Use button classes on an "<%=h "" %>" , "<%=h "" %>", or "<%=h "" %>" element.

            Primary
            Secondary
            Success
            Danger
            Warning
            Info
            Light
            Dark
            Link

Outlined Buttons

Use the .btn-outline-* classes to create bordered buttons.

            Primary
            Secondary
            Success
            Danger
            Warning
            Info
            Dark

Rounded Buttons

Add rounded to buttons to get large rounded corners.

            Primary
            Secondary
            Success
            Danger
            Warning
            Info
            Light
            Dark
            Link

Rounded Outlined Buttons

Use the .btn-outline-* and .btn-rounded classes together to quickly create bordered buttons with large rounded corners.

            Primary
            Secondary
            Success
            Danger
            Warning
            Info
            Dark

Button Sizes

Add .btn-lg or .btn-sm classes for additional button sizes.

            Large
            Normal
            Small

Button Icons

Add icons to any button or even use Icon-only buttons.

              favorite_border


              close


              music_note


              star


              thumb_up


              settings




              favorite Favorite


              launch Launch


              cloud Cloud Hosting

Button Block

Create block level buttons, by adding add .btn-block.

          Block Button
          Block Button
          Block Button

Button Group

Create a group of buttons by wrapping with .btn-group.

            Left
            Middle
            Right

            1
            2
            3
            4

            5
            6
            7

8

            1
            2
            3

Dropdown

                Dropdown link
                Dropdown link

              Top
              Middle
              Bottom

              Button 1
              Button 2
               Button 3

                Dropdown link
                Dropdown link

Disabled Buttons

Add the disabled attribute to disable buttons.

              Info
              Success
              Danger
              Dark

<% @body_class = 'layout-login-centered-boxed' %>

      " width="150" alt="Stack">
      Field Rocket

Login to Field Rocket

    ">

Email Address:

Password:

Login

        Remember me for 30 days

      Forgot password?

      Don't have an account? ">Sign up!

home

Apps

Projects

Projects

New Ticket

            Search

            Buckets


              Any
              Deployed
              Concept
              Wireframe

            Assigned To


              Any
              Adrian D.
              Michael S.
              John L.

            Daterange

refresh

<%= render "projects_list" %>

home

Pages

Stories

Stories

New Post

<% stories = [{
  avatar: "stack/stories/256_rsz_clem-onojeghuo-193397-unsplash.jpg",
  title: "Cheap Romantic Vacations",
  views: 35,
  tag: "future",
  date: "11 Nov, 2018 07:46 AM",
  avatarGroup: true,
  avatarCount: 3,
  avatars: [
    "stack/256_rsz_1andy-lee-642320-unsplash.jpg",
    "stack/256_michael-dam-258165-unsplash.jpg",
    "stack/256_luke-porter-261779-unsplash.jpg"
  ]
}, {
  avatar: "stack/stories/256_rsz_dex-ezekiel-761373-unsplash.jpg",
  title: "Copper Canyon",
  views: 78,
  tag: "future",
  date: "10 Nov, 2018 08:25 AM",
  avatarGroup: true,
  avatarCount: 2,
  avatars: [
    "stack/256_joao-silas-636453-unsplash.jpg",
    "stack/256_jeremy-banks-798787-unsplash.jpg",
    "stack/256_daniel-gaffey-1060698-unsplash.jpg"
  ]
}, {
  avatar: "stack/stories/256_rsz_rhema-kallianpur-275251-unsplash.jpg",
  title: "Selecting The Right Hotel",
  views: 78,
  tag: "video",
  date: "09 Nov, 2018 07:13 PM",
  avatarGroup: true,
  avatarCount: 1,
  avatars: [
    "stack/256_rsz_1andy-lee-642320-unsplash.jpg",
    "stack/256_michael-dam-258165-unsplash.jpg",
    "stack/256_luke-porter-261779-unsplash.jpg"
  ]
}] %>

Popular

<% stories.each do |item| %>

" alt="avatar" class="avatar-img rounded">

<%= item[:title] %>

<% item[:views] %> views last week

folder_open <%= item[:tag] %>

<%= item[:date] %>

avatar-group<% end %>">
<% item[:avatars].each do|avatar| %>

" alt="Avatar" class="avatar-img rounded-circle">

<% end %>

              <% if item[:avatarCount] > 1 %>
              +<%= item[:avatarCount]-1 %> more
              <% end %>

more_vert

            Action
            Other Action

Some Other Action

<% end %>

  <% popular_stories = [{
    image: "stack/stories/256_rsz_euan-carmichael-666378-unsplash.jpg",
    category: "blog",
    title: "Tremblant In Canada",
    avatar: "stack/256_luke-porter-261779-unsplash.jpg"
  }, {
    image: "stack/stories/256_rsz_jared-rice-388260-unsplash.jpg",
    category: "blog",
    title: "Become A Travel Pro In One Easy Lesson",
    avatar: "stack/256_michael-dam-258165-unsplash.jpg"
  }, {
    image: "stack/stories/256_rsz_dex-ezekiel-761373-unsplash.jpg",
    category: "blog",
    title: "A Guide To Rocky Mountain Vacations",
    avatar: "stack/256_rsz_1andy-lee-642320-unsplash.jpg"
  }] %>

Recent Posts

<% popular_stories.each do |item| %>

" alt="" class="card-img">

" alt="Avatar" class="avatar-img rounded-circle">

remove_red_eye 327

<%= item[:category] %>

<%= item[:title] %>

<% end %>

<%

@chat = [{
      avatar: "256_rsz_1andy-lee-642320-unsplash.jpg",
      name: "Jenell D. Matney",
      date: "4 days ago"
    }, {
      avatar: "256_daniel-gaffey-1060698-unsplash.jpg",
      name: "Sherri J. Cardenas",
      date: "3 days ago"
    }, {
      avatar: "256_jeremy-banks-798787-unsplash.jpg",
      name: "Joseph S. Ferland",
      date: "2 days ago"
    }, {
      avatar: "256_joao-silas-636453-unsplash.jpg",
      name: "Bryan K. Davis",
      date: "1 day ago"
    }, {
      avatar: "256_luke-porter-261779-unsplash.jpg",
      name: "Elizabeth J. Ohara",
      date: "4 hours ago"
    }, {
      avatar: "256_michael-dam-258165-unsplash.jpg",
      name: "Kaci M. Langston",
      date: "just now"
    }]

%>

Home

Analytics

E-commerce

Add Product

assessment Visits

3,642

shopping_basket Purchases

&dollar;12,311

perm_identity Customers

78

            Name

            Category


              All Categories

In stock?

              Yes

            Order date

refresh

Total Views

4,412

Conv. Ratio

4%

Export Data file_download

                Views area chart goes here.

Recent Orders

                13/03/2018 to 20/03/2018

help_outline

<% (0..4).each do |i| %>

contacts <%= @chat[i][:name] %>

<%= @chat[i][:date] %>

&dollar;<%= 123 * i %>

<% end %>

View All (54)

<% content_for :footer_scripts do %>

(function(){
  'use strict';

  Charts.init()

  var Views = function(id, type = 'line', options = {}) {
    options = Chart.helpers.merge({
      elements: {
        line: {
          fill: 'start',
          backgroundColor: settings.charts.colors.area,
          tension: 0,
          borderWidth: 1
        },
        point: {
          pointStyle: 'circle',
          radius: 5,
          hoverRadius: 5,
          backgroundColor: settings.colors.white,
          borderColor: settings.colors.primary[700],
          borderWidth: 2
        }
      },
      scales: {
        xAxes: [{
          gridLines: {
            display: false
          },
          type: 'time',
          time: {
            unit: 'day'
          }
        }]
      },
      tooltips: {
        callbacks: {
          label: function(a, e) {
            var t = e.datasets[a.datasetIndex].label || "",
                o = a.yLabel,
                r = "";
            return 1 < e.datasets.length && (r += '<span class="popover-body-label mr-auto">' + t + "</span>"), r += '<span class="popover-body-value">' + o + " views</span>"
          }
        }
      }
    }, options)

    var data = []

    // Create a date range for the last 7 days
    var start = moment().subtract(7, 'days').format('YYYY-MM-DD') // 7 days ago
    var end = moment().format('YYYY-MM-DD') // today
    var range = moment.range(start, end)

    // Create the graph data
    // Iterate the date range and assign a random value for each day
    for (let moment of range.by('days')) {
      data.push({
        y: Math.floor(Math.random() * 300) + 10,
        x: moment.toDate()
      })
    }

    var data = {
      datasets: [{
        label: "All Views",
        data
      }]
    }

    Charts.create(id, type, options, data)
  }

  ///////////////////
  // Create Charts //
  ///////////////////
  Views('#viewsChart')

})();

<% end %>

<%
  avatar = avatar || "assets/images/stack/256_rsz_1andy-lee-642320-unsplash.jpg"
  name = name || "Jenell D. Matney"
  title = title || "Founder and CEO"
%>

" alt="Avatar" class="avatar-img rounded-circle">

        <%= name %>

        <%= title %>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<%
  @chat = [{
      avatar: "stack/256_rsz_1andy-lee-642320-unsplash.jpg",
      name: "Jenell D. Matney",
      date: "4 days ago"
    }, {
      avatar: "stack/256_daniel-gaffey-1060698-unsplash.jpg",
      name: "Sherri J. Cardenas",
      date: "3 days ago"
    }, {
      avatar: "stack/256_jeremy-banks-798787-unsplash.jpg",
      name: "Joseph S. Ferland",
      date: "2 days ago"
    }, {
      avatar: "stack/256_joao-silas-636453-unsplash.jpg",
      name: "Bryan K. Davis",
      date: "1 day ago"
    }, {
      avatar: "stack/256_luke-porter-261779-unsplash.jpg",
      name: "Elizabeth J. Ohara",
      date: "4 hours ago"
    }, {
      avatar: "stack/256_michael-dam-258165-unsplash.jpg",
      name: "Kaci M. Langston",
      date: "just now"
    }]
%>

Home

Dashboard

Dashboard

New Report

error_outline

API gateways are now Offline. Please try the API later. If you want to stay up to date follow our Status Page

  <%#  ROW %>

Current Target

&dollar;12,920

31.5% arrow_upward

gps_fixed

Earnings

&dollar;3,642

51.5% arrow_upward

monetization_on

Website Traffic

8,391

3.5% arrow_downward

perm_identity

  <%# ROW %>

                Sessions
                18,391

                Orders
                &dollar;8,942

              Website Traffic / Earnings area chart goes here.

assessment

3,642

Visits

shopping_basket

&dollar;12,311

Purchases

Revenue by location

Vatican City

",
"us": "

New York

",
"au": "

Sydney

"
}'>

New York














72k

Vatican City














39k

Sydney














25k

  <%# ROW %>

Recent Activity

            13/03/2018 to 20/03/2018

          All
          Purchases
          Emails
          Quotes

            <% list_items = [{
              avatar: "stack/256_rsz_1andy-lee-642320-unsplash.jpg",
              name: "Jenell D. Matney",
              date: "4 days ago",
              amount: "$573",
              icon: "monetization_on",
              icon_bg: "bg-purple",
              message: "Confirmation required for design"
            }, {
              avatar: "stack/256_daniel-gaffey-1060698-unsplash.jpg",
              name: "Sherri J. Cardenas",
              date: "3 days ago",
              amount: "$612",
              icon: "email",
              icon_bg: "bg-teal",
              message: "Improve spacings on Projects page"
            }, {
              avatar: "stack/256_jeremy-banks-798787-unsplash.jpg",
              name: "Joseph S. Ferland",
              date: "2 days ago",
              amount: "$244",
              icon: "monetization_on",
              icon_bg: "",
              message: "You unlocked a new Badge"
            }, {
              avatar: "stack/256_joao-silas-636453-unsplash.jpg",
              name: "Bryan K. Davis",
              date: "1 day ago",
              amount: "$664",
              icon: "monetization_on",
              icon_bg: "",
              message: "Meeting on Friday"
            }, {
              avatar: "stack/256_michael-dam-258165-unsplash.jpg",
              name: "Kaci M. Langston",
              date: "just now",
              amount: "$631",
              icon: "description",
              icon_bg: "",
              message: "Design a new Brochure"
            }]
            %>
            <% (0..4).each do |i| %>

1 %> bg-light <% end %>">

                ">
                  <%= list_items[i][:icon] %>

" alt="Avatar" class="avatar-img rounded-circle">

              <% if i == 1 %>
                  <%= list_items[i][:name] %>

<%= list_items[i][:message] %>

              <%= list_items[i][:date] %>
              <% else %>
                  <%= list_items[i][:name] %>

<%= list_items[i][:date] %>

<%= list_items[i][:amount] %>

<% end %>

arrow_forward

<% end %>

View All (54)

<% (0..3).each do |i| %>

2 %> bg-light <% end %>">

                 bg-purple<% end %>">
                  monetization_on

" alt="Avatar" class="avatar-img rounded-circle">

                  <%= list_items[i+1][:name] %>

<%= list_items[i][:date] %>

<%= list_items[i][:amount] %>

arrow_forward

<% end %>

<% (0..4).each do |i| %>

2 %> bg-light <% end %>">

                 bg-teal<% end %>">
                  email

" alt="Avatar" class="avatar-img rounded-circle">

                  <%= list_items[i][:name] %>

<%= list_items[i][:message] %>

              <%= list_items[i][:date] %>
              arrow_forward

<% end %>

Products

&dollar;8,391

31.5% arrow_upward

Courses

15,021

31.5% arrow_downward

Stats by Location

expand_more

              Traffic

              Purchases

              Quotes

                  Location doughnut chart goes here.

  <%# ROW %>

TODO List

Mark All as Completed

                Wireframe the CRM application pages

                Design a new page in Sketch

                Quote the custom work

                Interview John for Full-Stack Developer

                Research the success of CRM

15 of 100 arrow_forward

Team Skills

HTML












61%

CSS/SCSS












39%

JAVASCRIPT












76%

RUBY ON RAILS












28%

VUEJS












50%

            View All

  <%# ROW %>

Current Users

        Filter by:

        Role

          All Roles

          Made a Purchase?

<%= render 'staff.table' %>

<% content_for :footer_scripts do %>

// DASHBOARD CHART SAMPLES
Charts.init();

var EarningsTraffic = function(id, type = 'line', options = {}) {
  options = Chart.helpers.merge({
    elements: {
      line: {
        fill: 'start',
        backgroundColor: settings.charts.colors.area
      }
    }
  }, options)

  var data = {
    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
    datasets: [{
      label: "Traffic",
      data: [10, 2, 5, 15, 10, 12, 15, 25, 22, 30, 25, 40]
    }]
  }

  Charts.create(id, type, options, data)
}

var Products = function(id, type = 'line', options = {}, data) {
  options = Chart.helpers.merge({
    elements: {
      line: {
        fill: 'start',
        backgroundColor: settings.charts.colors.area,
        tension: 0,
        borderWidth: 1
      },
      point: {
        pointStyle: 'circle',
        radius: 5,
        hoverRadius: 5,
        backgroundColor: settings.colors.white,
        borderColor: settings.colors.primary[700],
        borderWidth: 2
      }
    },
    scales: {
      yAxes: [{
        display: false
      }],
      xAxes: [{
        display: false
      }]
    }
  }, options)

  data = data || {
    labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    datasets: [{
      label: "Earnings",
      data: [400, 200, 450, 460, 220, 380, 800]
    }]
  }

  Charts.create(id, type, options, data)
}

var Courses = function(id, type = 'line', options = {}) {
  options = Chart.helpers.merge({
    elements: {
      line: {
        borderColor: settings.colors.success[700],
        backgroundColor: settings.hexToRGB(settings.colors.success[100], 0.5)
      },
      point: {
        borderColor: settings.colors.success[700]
      }
    }
  }, options)

  Products(id, type, options)
}

var LocationDoughnut = function(id, type = 'doughnut', options = {}) {
  options = Chart.helpers.merge({
    tooltips: {
      callbacks: {
        title: function(a, e) {
          return e.labels[a[0].index]
        },
        label: function(a, e) {
          var t = "";
          return t += '<span class="popover-body-value">' + e.datasets[0].data[a.index] + "%</span>"
        }
      }
    }
  }, options)

  var data = {
    labels: ["United States", "United Kingdom", "Germany", "India"],
    datasets: [{
      data: [25, 25, 15, 35],
      backgroundColor: [settings.colors.success[400], settings.colors.danger[400], settings.colors.primary[500], settings.colors.gray[300]],
      hoverBorderColor: "dark" == settings.charts.colorScheme ? settings.colors.gray[800] : settings.colors.white
    }]
  }

  Charts.create(id, type, options, data)
}

///////////////////
// Create Charts //
///////////////////

EarningsTraffic('#earningsTrafficChart')
LocationDoughnut('#locationDoughnutChart')
Products('#productsChart')
Courses('#coursesChart')

<% end %>

<%
  time = time || "12:30 PM"
  title = title || "#4813 - Fix email alignment on iPhone 7"
  badge_label = badge_label || "NEW"
  badge_class = badge_class || "badge-light-gray"
  started_by = started_by || "Michael S."
  tag = tag || "DEPLOYED"
  assigned = assigned || "Bryan Davis"
  assigned_image = assigned_image || "stack/256_joao-silas-636453-unsplash.jpg"
%>

<%= time %>

              <%= title %>
              <% badge_label %>

              Assigned to


                  " alt="Avatar" class="avatar-img rounded-circle">

                <%= assigned %>

            account_circle
            <%= started_by %>

            <%= tag %>
            folder

home

UI Components

Alerts

Alerts

Toast

Toasts based notifications can be used to to show important alerts or information to users.

Primary Example

              Click me

Info Example

              Click me

Warning Example

              Click me

Success Example

              Click me

Danger Example

              Click me

Close Button

              Click me

Put some HTML in the text

            icons?"
              data-toastr-message="Yes! check this update.">
              Click me

Making them sticky

              Click me

Fade/Slide animation

              Click me

Alerts

Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the eight contextual classes (i.e. .alert-success). For background color use class .bg-* and .text-white.

Primary - A simple primary alert - check it out!

Secondary - A simple secondary alert - check it out!

Success - A simple success alert - check it out!

Danger - A simple danger alert - check it out!

Warning - A simple warning alert - check it out!

Info - A simple info alert - check it out!

Light - A simple light alert - check it out!

Dark - A simple dark alert - check it out!

Dismissible Alerts

Add a button and the .alert-dismissible class, which adds extra padding to the right of the alert and positions the .close button.

              ×

            Primary -  A simple primary alert - check it out!

              ×

            Secondary -  A simple secondary alert - check it out!

              ×

            Success -  A simple success alert - check it out!

              ×

            Danger -  A simple danger alert - check it out!

              ×

            Warning -  A simple warning alert - check it out!

              ×

            Info -  A simple info alert - check it out!

              ×

            Light -  A simple light alert - check it out!

              ×

            Dark -  A simple dark alert - check it out!

Soft Alerts

Alternate styles for alerts with softer background color by replacing classes like .alert-primary with .alert-soft-primary. Alerts can also contain additional HTML elements like icons and paragraphs.

flag

Tip: Holding Shift and pressing Enter will create a new line in your message without posting it in channel. Learn more about formatting your messages.

edit

Note: If you have two-factor authentication turned on, you will need to enter the 6-digit authentication code we send to your phone.

error_outline

PRO and FREE versions are now available. Stack Admin is the easiest way to build or style your dashboard/application. Please visit our product page for more information.

adjust

Secondary - A simple secondary alert - check it out!.

error_outline

Danger - A simple danger alert - check it out!.

info_outline

Info - A simple info alert - check it out!.

info

Dark - A simple dark alert - check it out!.

access_time

Light - A simple light alert - check it out!.

Badges

A small count and labeling component. Please read the official Bootstrap documentation for a full list of options.

          Primary
          Secondary
          Success
          Danger
          Warning
          Info
          Light
          Dark

          Primary
          Secondary
          Success
          Danger
          Warning
          Info
          Light
          Dark

<%#

    search

   %>

            Toggle all

        Employee
        Current Employer
        Projects
        Status
        Last Activity
        Earnings




      <% (0..2).each do |i| %>

            ">
            ">Check

" alt="Avatar" class="avatar-img rounded-circle">

Michael Smith

            Black Ops
            star

        12
        ADMIN
        3 days ago
        &dollar;12,402
        more_vert
        <% end %>

15 of 1,430 arrow_forward

home

UI Components

Vector Maps

Vector Maps

Pins

Vatican City

",
"us": "

New York

",
"jp": "

Tokyo

"
}'>

Gross domestic product (GDP) by country

Scale and focus

Italy

Japan

United States & Italy

Vatican City

",
"us": "

New York

",
"jp": "

Tokyo

"
}'>

Custom map - Mall

Example of custom map created from SVG using converter available here.

<% content_for :page_scripts do %>

(function(){
  'use strict';
    
  $('[data-toggle="tab"]').on('hide.bs.tab', function (e) {
    $(e.target).removeClass('active')
  })

})()

<% end %>

home

Pages

Invoice

Invoice

file_download Download

OVERDUE

              " class="navbar-brand d-flex flex-column m-0" style="min-width: 0">
                " width="25" alt="Stack">
                Invoice

Invoice #MPS1234AD

FROM

                  Adrian Demian

                  959 Emerson Road

                  Winnfield, LA

Invoice NUMBER

#MPS1234AD

TO (CUSTOMER)

                  Daniel J. Batiste

                  3700 George Avenue

                  Mobile, AL 36602

Due date

Nov 1st, 2018

                    Description
                    Hours
                    Cost




                    Layout & Sidebar Design
                    200
                    &dollar;2,500


                    Concept
                    2
                    &dollar;1000


                    Total amount due
                    &dollar;3,500

Notes

We appreciate your business. Should you need us to add VAT or extra notes let us know!

home

UI Components

Charts

Charts

Line

A line chart is a way of plotting data points on a line. Often, it is used to show trend data, or the comparison of two data sets.

Area

An area chart or area graph displays graphically quantitative data. It is based on the line chart.

Doughnut

Excellent at showing the relational proportions between data.

Bar

A bar chart provides a way of showing data values represented as vertical bars. It is sometimes used to show trend data, and the comparison of multiple data sets side by side.

Switch Toggle

Show affiliate:

              Show affiliate

Easily toggle an additional set of data with a simple interface based on the data attributes.

<% content_for :footer_scripts do %>

(function(){
  'use strict';

  Charts.init()
  
  var Performance = function(id, type = 'line', options = {}) {
    options = Chart.helpers.merge({
      scales: {
        yAxes: [{
          ticks: {
            callback: function(a) {
              if (!(a % 10))
                return "$" + a + "k"
            }
          }
        }]
      },
      tooltips: {
        callbacks: {
          label: function(a, e) {
            var t = e.datasets[a.datasetIndex].label || "",
                o = a.yLabel,
                r = "";
            return 1 < e.datasets.length && (r += '<span class="popover-body-label mr-auto">' + t + "</span>"), r += '<span class="popover-body-value">$' + o + "k</span>"
          }
        }
      }
    }, options)

    var data = {
      labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
      datasets: [{
        label: "Performance",
        data: [0, 10, 5, 15, 10, 20, 15, 25, 20, 30, 25, 40]
      }]
    }

    Charts.create(id, type, options, data)
  }

  var Orders = function(id, type = 'roundedBar', options = {}) {
    options = Chart.helpers.merge({
      barRoundness: 1.2,
      scales: {
        yAxes: [{
          ticks: {
            callback: function(a) {
              if (!(a % 10))
                return "$" + a + "k"
            }
          }
        }]
      },
      tooltips: {
        callbacks: {
          label: function(a, e) {
            var t = e.datasets[a.datasetIndex].label || "",
                o = a.yLabel,
                r = "";
            return 1 < e.datasets.length && (r += '<span class="popover-body-label mr-auto">' + t + "</span>"), r += '<span class="popover-body-value">$' + o + "k</span>"
          }
        }
      }
    }, options)

    var data = {
      labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
      datasets: [{
        label: "Sales",
        data: [25, 20, 30, 22, 17, 10, 18, 26, 28, 26, 20, 32]
      }]
    }

    Charts.create(id, type, options, data)
  }

  var Devices = function(id, type = 'doughnut', options = {}) {
    options = Chart.helpers.merge({
      tooltips: {
        callbacks: {
          title: function(a, e) {
            return e.labels[a[0].index]
          },
          label: function(a, e) {
            var t = "";
            return t += '<span class="popover-body-value">' + e.datasets[0].data[a.index] + "%</span>"
          }
        }
      }
    }, options)

    var data = {
      labels: ["Desktop", "Tablet", "Mobile"],
      datasets: [{
        data: [60, 25, 15],
        backgroundColor: [settings.colors.primary[700], settings.colors.success[300], settings.colors.success[100]],
        hoverBorderColor: "dark" == settings.charts.colorScheme ? settings.colors.gray[800] : settings.colors.white
      }]
    }

    Charts.create(id, type, options, data)
  }

  ///////////////////
  // Create Charts //
  ///////////////////

  Performance('#performanceChart')
  
  Performance('#performanceAreaChart', 'line', {
    elements: {
      line: {
        fill: 'start',
        backgroundColor: settings.charts.colors.area
      }
    }
  })

  Orders('#ordersChart')

  Orders('#ordersChartSwitch')

  Devices('#devicesChart')

  $('[data-toggle="chart"]:checked').each(function (index, el) {
    Charts.add($(el))
  })

})()

<% end %>

<% @body_class = 'layout-login-centered-boxed' %>

    " class="navbar-brand flex-column mb-2 align-items-center mr-0" style="min-width: 0">
      " width="25" alt="Stack">
      Stack

Create an account with Stack

    Continue with Google

or

" novalidate>

Name:

Email Address:

Password:

        I accept Terms and Conditions

      Create Account

      ">Have an account? Login

home

UI Components

Avatars

Avatars

Sizing

Using Bootstrap's typical naming structure, you can create a standard avatar, or scale it up to different sizes based on what's needed.

" alt="Avatar" class="avatar-img rounded-circle">

Status Indicator

Add an online or offline status indicator to show user's availability.

" alt="Avatar" class="avatar-img rounded-circle">

Shape

Change the shape of an avatar with the default Bootstrap image classes.

" alt="Avatar" class="avatar-img rounded">

" alt="Avatar" class="avatar-img rounded-circle">

" alt="Avatar" class="avatar-img rounded">

" alt="Avatar" class="avatar-img rounded-circle">

" alt="Avatar" class="avatar-img rounded">

" alt="Avatar" class="avatar-img rounded-circle">

Ratio

Change the proportional relationship between the width and height of an avatar to 4 by 3 with an .avatar-4by3 modifier.

" alt="Avatar" class="avatar-img rounded">

Initials

You won't always have an image for every user, so easily use initials instead.

AD

Groups

Easily group avatars of any size, shape and content with a single component. Each avatar can also use an {{ '' | escape }} to link to the corresponding profile.

" alt="Avatar" class="avatar-img rounded-circle">

AD

" alt="Avatar" class="avatar-img rounded-circle">

AD

" alt="Avatar" class="avatar-img rounded-circle">

AD

<%
  avatar = avatar || "assets/images/256_rsz_1andy-lee-642320-unsplash.jpg"
  name = name || "Jenell D. Matney"
  title = title || "Founder and CEO"
%>

" alt="Avatar" class="avatar-img rounded-circle">

      <%= name %>

      <%= title %>

drag_handle

      All
      Pro
      Active
      Temporary

Home

Staff

Staff

Add Staff

Budget 20%

&dollar;24,000 / &dollar;50,000

monetization_on

Current Target 2018

&dollar;50,000

gps_fixed

Top Grossing

&dollar;13,531

contacts

Earnings

                13/03/2018 to 20/03/2018

        Filter by:

        Role

          All Roles

          Made a Purchase?

<%= render "staff.table" %>

<% content_for :footer_scripts do %>

(function(){
  'use strict';

  Charts.init()
  
  var Orders = function(id, type = 'roundedBar', options = {}) {
    options = Chart.helpers.merge({
      barRoundness: 1.2,
      scales: {
        yAxes: [{
          ticks: {
            callback: function(a) {
              if (!(a % 10))
                return "$" + a + "k"
            }
          }
        }]
      },
      tooltips: {
        callbacks: {
          label: function(a, e) {
            var t = e.datasets[a.datasetIndex].label || "",
                o = a.yLabel,
                r = "";
            return 1 < e.datasets.length && (r += '<span class="popover-body-label mr-auto">' + t + "</span>"), r += '<span class="popover-body-value">$' + o + "k</span>"
          }
        }
      }
    }, options)

    var data = {
      labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
      datasets: [{
        label: "Sales",
        data: [25, 20, 30, 22, 17, 10, 18, 26, 28, 26, 20, 32]
      }]
    }

    Charts.create(id, type, options, data)
  }

  ///////////////////
  // Create Charts //
  ///////////////////

  Orders('#ordersChart')

})()

<% end %>

home

Apps

Trello

Trello

New Task

Todo (3)

            <% tasks = [{
              badgeLabel: 'OPEN',
              badgeClass: 'badge-light-gray',
              date: 'Oct 28, 2018',
              title: 'Add UI Buttons Page',
              comments: 28,
              assigned: 'Janell D. Matney',
              avatarCount: 1
            }, {
              badgeLabel: 'RESOLVED',
              badgeClass: 'badge-success',
              date: 'Nov 1, 2018',
              title: 'Envato Item Presentation',
              comments: 28,
              assigned: 'Adrian Demian',
              avatarGroup: true,
              avatarCount: 3
            }, {
              badgeLabel: 'NEED HELP',
              badgeClass: 'badge-warning',
              date: 'Nov 1, 2018',
              title: 'Add Trello App Page',
              comments: 28,
              assigned: 'Laza Bogdan',
              avatarCount: 1
            }] %>

            <% tasks.each do |task| %>
              <%= render 'trelloTask',
                badgeLabel: task[:badgeLabel],
                badgeClass: task[:badgeClass],
                date: task[:date],
                title: task[:title],
                comments: task[:comments],
                assigned: task[:assigned],
                avatarGroup: task[:avatarGroup],
                avatarCount: task[:avatarCount] %>
            <% end %>

+ Add Card

In Progress (2)

            <% tasks = [{
              badgeLabel: 'HIGH',
              badgeClass: 'badge-danger',
              date: 'Nov 1, 2018',
              title: 'Add Trello App Page',
              comments: 28,
              assigned: 'Laza Bogdan',
              avatarGroup: true,
              avatarCount: 2
            }, {
              badgeLabel: 'OPEN',
              badgeClass: 'badge-light-gray',
              date: 'Oct 28, 2018',
              title: 'Add UI Alerts Page',
              comments: 28,
              assigned: 'Janell D. Matney',
              avatarCount: 1
            }] %>

            <% tasks.each do |task| %>
              <%= render 'trelloTask',
                badgeLabel: task[:badgeLabel],
                badgeClass: task[:badgeClass],
                date: task[:date],
                title: task[:title],
                comments: task[:comments],
                assigned: task[:assigned],
                avatarGroup: task[:avatarGroup],
                avatarCount: task[:avatarCount] %>
            <% end %>

+ Add Card

Review (1)

             <% tasks = [{
              badgeLabel: 'RESOLVED',
              badgeClass: 'badge-success',
              date: 'Oct 28, 2018',
              title: 'Add UI Modals Page',
              comments: 28,
              assigned: 'Janell D. Matney'
            }] %>

            <% tasks.each do |task| %>
              <%= render 'trelloTask',
                badgeLabel: task[:badgeLabel],
                badgeClass: task[:badgeClass],
                date: task[:date],
                title: task[:title],
                comments: task[:comments],
                assigned: task[:assigned],
                avatarGroup: task[:avatarGroup],
                avatarCount: task[:avatarCount] %>
            <% end %>

+ Add Card

Done (1)

            <% taskss = [{
              badgeLabel: 'NEED HELP',
              badgeClass: 'badge-warning',
              date: 'Oct 28, 2018',
              title: 'Add UI Avatars Page',
              comments: 28,
              assigned: 'Janell D. Matney'
            }] %>

            <% tasks.each do |task| %>
              <%= render 'trelloTask',
                badgeLabel: task[:badgeLabel],
                badgeClass: task[:badgeClass],
                date: task[:date],
                title: task[:title],
                comments: task[:comments],
                assigned: task[:assigned],
                avatarGroup: task[:avatarGroup],
                avatarCount: task[:avatarCount] %>
            <% end %>

+ Add Card

<%
  pages = pages || 2
  first = first || false
  prevItem = prevItem || true
  nextItem = nextItem || true
  last = last || false
  labels = labels || false
  align = align || 'left'
  className= className || ''
%>

      first_page
       class="sr-only"<% end %>>First

      chevron_left
       class="sr-only"<% end %>>Prev

active<% end %>">
      ">
        <%= i+1 %>

       class="sr-only"<% end %>>Next
      chevron_right

       class="sr-only"<% end %>>Last
      last_page

home

UI Components

Modals

Modals

Bootstrap

A rendered modal with header, body, and set of actions in the footer.

          Standard Modal
          Large Modal
          Small Modal

Alerts

Show different contexual alert messages using modal component.

          Success Alert
          Info Alert
          Warning Alert
          Error Alert

Pages

Examples of modals with custom content.

          Sign Up Modal
          Login Modal

Vertically Centered

By default, modals will be positioned at the top of the page, but you can change this to vertically centered by adding the .modal-dialog-centered class to the <%=h '

...

'%> element.

Vertically Centered Modal

<% content_for :footer do %>

            " class="navbar-brand" style="min-width: 0">
              " width="25" alt="Stack">
              Stack

              Name:

              Email Address:

              Password:

                I accept Terms and Conditions

Create Account

            " class="navbar-brand" style="min-width: 0">
              " width="25" alt="Stack">
              Stack

              Email Address:

              Password:

                Remember me

Login

check

Well Done!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt eaque explicabo, itaque iusto unde quas magni non, quae expedita eveniet, incidunt molestiae tempora maiores odit hic perspiciatis. Eveniet, porro illo.

Continue

info_outline

Heads Up!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt eaque explicabo, itaque iusto unde quas magni non, quae expedita eveniet, incidunt molestiae tempora maiores odit hic perspiciatis. Eveniet, porro illo.

Continue

warning

Warning!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt eaque explicabo, itaque iusto unde quas magni non, quae expedita eveniet, incidunt molestiae tempora maiores odit hic perspiciatis. Eveniet, porro illo.

Continue

report_problem

Ohhh Snap!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt eaque explicabo, itaque iusto unde quas magni non, quae expedita eveniet, incidunt molestiae tempora maiores odit hic perspiciatis. Eveniet, porro illo.

Continue

Modal title

          ×

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

        Close
        Save changes

Standard modal

          ×

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

        Close
        Save changes

Large modal

          ×

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae aliquam tempora quibusdam rem facere? Nulla dolorum, velit cumque maiores architecto officiis reprehenderit adipisci magnam doloribus dolores ratione error omnis quos voluptate culpa excepturi, autem ipsum! Vitae exercitationem cumque provident, aliquid repudiandae placeat necessitatibus?

Temporibus delectus soluta necessitatibus a est dolores quos esse enim, sint maxime assumenda sapiente harum tempora eius ullam. Earum quam, explicabo magni, blanditiis sint, nam reprehenderit porro suscipit voluptates cum eius. Pariatur vel rerum, saepe, rem harum, nam ipsum deserunt vitae odio, quaerat sapiente nulla! Nulla nesciunt labore, distinctio aut, aliquam possimus sapiente qui adipisci quae fuga, consectetur hic. Facilis nostrum officiis saepe quia nemo, adipisci libero illo sint omnis. Placeat doloremque, omnis eligendi ullam fugit, aut.

Aliquam maxime nobis ut porro sit, repellendus beatae provident suscipit at soluta sapiente, cupiditate dolore similique alias doloribus aperiam, veritatis quibusdam numquam adipisci sequi quasi rerum architecto inventore vitae fugiat. Odio corporis est, temporibus earum molestias quos, labore dignissimos eligendi, laboriosam, incidunt illum!

Itaque officia repellat temporibus quis quasi ipsum reprehenderit dicta pariatur tenetur nisi officiis ad eaque veritatis velit dolore eos iste, beatae labore. Quo, incidunt vitae sint tempore, delectus sapiente pariatur labore illo veniam itaque molestiae consequatur doloribus.

        Close
        Save changes

Small modal

          ×

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

        Close
        Save changes

<% end %>

<%# REQUIRED BODY CLASS FOR SCROLL AND APP LIKE BEHAVIOUR %>
<% @body_class = 'layout-fluid app-chat' %>

<% chat_items = [{
  avatar: "stack/256_rsz_1andy-lee-642320-unsplash.jpg",
  name: "Jenell D. Matney",
  date: "4 days ago",
  message: "Hey guys, just kicking things off here in the chat window. Hope you're all ready to tackle this great project. Let's smash some Brand Concept & Design!"
}, {
  avatar: "stack/256_daniel-gaffey-1060698-unsplash.jpg",
  name: "Sherri J. Cardenas",
  date: "3 days ago",
  message: "Nice one @Claire, we've got some killer ideas kicking about already.",
  image: "stack/stories/256_rsz_dex-ezekiel-761373-unsplash.jpg"
}, {
  avatar: "stack/256_jeremy-banks-798787-unsplash.jpg",
  name: "Joseph S. Ferland",
  date: "2 days ago",
  message: "Roger that boss! @Ravi and I have already started gathering some stuff for the mood boards, excited to start! 🔥"
}, {
  avatar: "stack/256_joao-silas-636453-unsplash.jpg",
  name: "Bryan K. Davis",
  date: "1 day ago",
  message: "😉"
}, {
  avatar: "stack/256_luke-porter-261779-unsplash.jpg",
  name: "Elizabeth J. Ohara",
  date: "4 hours ago",
  message: "Can't wait! @David how are we coming along with the Client Objective Meeting?"
}, {
  avatar: "stack/256_michael-dam-258165-unsplash.jpg",
  name: "Kaci M. Langston",
  date: "just now",
  message: "Coming along nicely, we've got a draft for the client questionnaire completed, take a look! 🤓",
  file: {
    name: "draft.doc",
    size: "15kb"
  }
}] %>

<% members = [{
  avatar: "stack/256_rsz_1andy-lee-642320-unsplash.jpg",
  name: "Jenell D. Matney",
  title: "Founder and CEO"
}, {
  avatar: "stack/256_daniel-gaffey-1060698-unsplash.jpg",
  name: "Sherri J. Cardenas",
  title: "Software Engineer"
}, {
  avatar: "stack/256_jeremy-banks-798787-unsplash.jpg",
  name: "Joseph S. Ferland",
  title: "Web Designer"
}, {
  avatar: "stack/256_joao-silas-636453-unsplash.jpg",
  name: "Bryan K. Davis",
  title: "Web Developer"
}, {
  avatar: "stack/256_luke-porter-261779-unsplash.jpg",
  name: "Elizabeth J. Ohara",
  title: "Business Analyst"
}, {
  avatar: "stack/256_michael-dam-258165-unsplash.jpg",
  name: "Kaci M. Langston",
  title: "Human Resources"
}] %>

<%
  @chat = [{
      avatar: "stack/256_rsz_1andy-lee-642320-unsplash.jpg",
      name: "Jenell D. Matney",
      date: "4 days ago"
    }, {
      avatar: "stack/256_daniel-gaffey-1060698-unsplash.jpg",
      name: "Sherri J. Cardenas",
      date: "3 days ago"
    }, {
      avatar: "stack/256_jeremy-banks-798787-unsplash.jpg",
      name: "Joseph S. Ferland",
      date: "2 days ago"
    }, {
      avatar: "stack/256_joao-silas-636453-unsplash.jpg",
      name: "Bryan K. Davis",
      date: "1 day ago"
    }, {
      avatar: "stack/256_luke-porter-261779-unsplash.jpg",
      name: "Elizabeth J. Ohara",
      date: "4 hours ago"
    }, {
      avatar: "stack/256_michael-dam-258165-unsplash.jpg",
      name: "Kaci M. Langston",
      date: "just now"
    }]
%>

        search

<% chat_items.each do |item| %>

border-bottom<% end %> py-3">

              " class="avatar-img rounded-circle" alt="avatar">

<%= item[:name] %>

<%= item[:date] %>

<%= item[:message] %>

              <% if item[:image].present? %>

                " alt="image" class="avatar-img rounded">

              <% end %>
              <% if item[:file] %>



                    attach_file



                  <%= item[:file][:name] %>

                  <%= item[:file][:size] %>


              <% end %>

<% end %>

tag_faces

                attach_file

filter_list

<% members.each do |item| %>

                " alt="Avatar" class="avatar-img rounded-circle">

                  <%= item[:name] %>

                  <%= item[:title] %>

<% end %>

New Review

<%= render 'form', review: @review %>

<%= link_to 'Back', reviews_path %>

<%= notice %>

Name:
<%= @review.name %>

City:
<%= @review.city %>

Content:
<%= @review.content %>

Home page:
<%= @review.home_page %>

Business:
<%= @review.business %>

<%= link_to 'Edit', edit_review_path(@review) %> |
<%= link_to 'Back', reviews_path %>

json.extract! review, :id, :name, :city, :content, :home_page_id, :created_at, :updated_at
json.url review_url(review, format: :json)

Editing Review

<%= render 'form', review: @review %>

<%= link_to 'Show', @review %> |
<%= link_to 'Back', reviews_path %>

json.array! @reviews, partial: "reviews/review", as: :review

json.partial! "reviews/review", review: @review

<%= notice %>

Reviews

      Name
      City
      Content
      Home page

    <% @reviews.each do |review| %>

        <%= review.name %>
        <%= review.city %>
        <%= review.content %>
        <%= review.home_page %>
        <%= link_to 'Show', review %>
        <%= link_to 'Edit', edit_review_path(review) %>
        <%= link_to 'Destroy', review, method: :delete, data: { confirm: 'Are you sure?' } %>

    <% end %>

<%= link_to 'New Review', new_review_path %>

<%= form_with(model: review, local: true) do |form| %>
<% if review.errors.any? %>

<%= pluralize(review.errors.count, "error") %> prohibited this review from being saved:

<%= message %>

<% end %>

    <%= form.label :name %>
    <%= form.text_field :name %>

    <%= form.label :city %>
    <%= form.text_field :city %>

    <%= form.label :content %>
    <%= form.text_field :content %>

    <%= form.label :home_page_id %>
    <%= form.text_field :home_page_id %>

    <%= form.label :business_id %>
    <%= form.text_field :business_id %>

<%= form.submit %>

<% end %>

New Email Template

<%= content_for :card_body do %>
<%= render 'form', email_template: @email_template %>
<% end %>
<%= render partial: "shared/card"%>

<%= link_to 'Back', email_templates_path %>

<%= notice %>

<%= content_for :card_body do %>
<%= render 'form', email_template: @email_template %>
<% end %>
<%= render partial: "shared/card" %>

<%= link_to 'Edit', edit_email_template_path(@email_template) %>

|

<%= link_to 'Back', email_templates_path %>

Editing Email Template

<%= content_for :card_body do %>
<%= render 'form', email_template: @email_template %>
<% end %>
<%= render partial: "shared/card"%>

<%= link_to 'Show', @email_template %>

|

<%= link_to 'Back', email_templates_path %>

json.array! @email_templates, partial: 'email_templates/email_template', as: :email_template

json.partial! "email_templates/email_template", email_template: @email_template

<%= notice %>

<%= react_component 'shared/IndexPage', {
  title: "Email Templates",
  attributes: [:name],
  data: @email_templates.map {|email_template| [email_template.id, {title: email_template.name, url: "email_templates/#{email_template.id}"}]},
  basePath: '/email_templates'} %>

<%= form_with(model: email_template, local: true) do |form| %>
<% if email_template.errors.any? %>

<%= pluralize(email_template.errors.count, "error") %> prohibited this email_template from being saved:

<%= message %>

<% end %>

  <%= form_group form, email_template, :name, value: @email_template.name %>
  Body
  <%= render partial: "shared/text_editor", locals: {id: "email_body_text_editor", placeholder: "Enter Email Body Here", content: raw(@email_template.body)}%>
  <%= form.text_field :body, style:"display:none"%>
  <%= form.text_field :business_id, style:"display:none", value: current_business.id %>

Save

<% end %>

<%= content_for :footer_scripts do %>

    $('#saveEmailTemplate').click(function(e){
      $('#email_template_body').val($('#email_body_text_editor')[0].children[0].innerHTML);
      $('.loader').show();
    });
  
<% end %>

json.extract! email_template, :id, :name, :body, :created_at, :updated_at
json.url email_template_url(email_template, format: :json)

New Call

<%= render 'form', call: @call %>

<%= link_to 'Back', calls_path %>

<%= notice %>

To:
<%= @call.to %>

Call from:
<%= @call.call_from %>

Caller name:
<%= @call.caller_name %>

Recording uri:
<%= @call.recording_uri %>

Price:
<%= @call.price %>

Start time:
<%= @call.start_time %>

End time:
<%= @call.end_time %>

Duration:
<%= @call.duration %>

Status:
<%= @call.status %>

Uri:
<%= @call.uri %>

<%= link_to 'Edit', edit_call_path(@call) %> |
<%= link_to 'Back', calls_path %>

    ">

Editing Call

      ">
        Schedule Job Request for this Call

        Transcribe Call

        Parse Info

<%= render 'form', call: @call %>

Customer Name:

<%=@call.ai_parsed_customer_name%>

Address:

<%=@call.ai_parsed_address%>

City:

<%=@call.ai_parsed_city%>

Zip:

<%=@call.ai_parsed_zip%>

AI Summary:

<%=@call.ai_parsed_summary%>

Transcription:

    <%if !@call.transcription_by_speaker.blank?
        JSON.parse(@call.transcription_by_speaker).each do |speaker_line| %>

">
            <% if speaker_line["speaker"] == "spk_0" %>

                <%= speaker_line["line"] %>

            <% else %>

                <%= speaker_line["line"] %>

            <% end %>

        <% end %>
    <% else %>

                <%= @call.transcription %>

<% end %>

<%= content_for :footer_scripts do %>

    $("#transcribeCallWithAi").click(function(e) {
        e.preventDefault();
        $.ajax({
            url: "/calls/<%=@call.id%>/transcribe",
            type: "POST"});
    });

    $('#parseTranscriptionWithAi').click(function(e) {
        e.preventDefault();
        $.ajax({
            url: "/calls/<%=@call.id%>/parse_transcription",
            type: "POST"});
    });

<% end %>

json.array! @calls, partial: "calls/call", as: :call

json.partial! "calls/call", call: @call

Calls

<%= notice %>

      Time
      Call from
      Call to
      Caller name
      Listen
      Duration
      Status
      Notes

    <% @calls.order(:created_at).each do |call| %>

        <% if call.is_active %>
           /edit?secret_key=<%=@business.secret_key%>">ACTIVE
        <% else %>
           /edit?secret_key=<%=@business.secret_key%>">Ended
        <% end %>
       <%= call.start_time.nil? ? "" : human_readable_date_time(call.start_time, @business) %>
        <%= call.call_from %>
        <%= call.to %>
        <%= call.caller_name %>

          ">




        <%= call.duration_in_words %>
        <%= call.status %>
        <%= call.notes %>
         /edit?secret_key=<%=@business.secret_key%>">
        <%#= link_to 'Destroy', call, method: :delete, data: { confirm: 'Are you sure?' } %>

    <% end %>

<%= render partial: 'shared/paginate', locals: {resource: @calls} %>

<%# link_to 'New Call', new_call_path %>

<%= content_for :footer_scripts do %>

  let audio = null; //global for this page script.
  $('.call-recording-play-stop-button').click(function(e) {
    if (audio == null){
      audio = new Audio($(this).data("url"));
      audio.play();
      toggleVisibilityOfPlayStopButton($(this))
    } else{
      audio.pause();
      audio = null;
      toggleVisibilityOfPlayStopButton($(this));
    }
  });
  function toggleVisibilityOfPlayStopButton(element){
    element.children().first().toggle();
    element.children().last().toggle();
  }

<% end %>

<%= form_with(model: call, local: true) do |form| %>
<% if call.errors.any? %>

<%= pluralize(call.errors.count, "error") %> prohibited this call from being saved:

<%= message %>

<% end %>
<%= hidden_field_tag 'secret_key', call.business&.secret_key %>

<%=form_group(form, call, :caller_name, field_type= :text_field, value: call.caller_name) %>

  <%=form_group(form, call, :outcome, field_type= :select, select_options: [
      ["", 0],
      ["Needs to Schedule an Appointment (Created Job Request)", 1],
      ["Has a Question about Previous Work or an Estimate", 2],
      ["Furnace Having the Same Issue Again, After we Ran Out", 3],
      ["Needs to Cancel/Reschedule", 4],
      ["Needs a Technician to Call Them", 5]
      ],
    label: "Call Outcome",
    value: call.outcome)%>

<%=form_group(form, call, :notes, field_type= :text_area, value: call.notes) %>

<%= form.submit class: "btn btn-company-primary" %>

<% end %>

json.extract! call, :id, :to, :call_from, :caller_name, :recording_uri, :price, :start_time, :end_time, :duration, :status, :uri, :created_at, :updated_at, :transcription, :customer_id
json.url call_url(call, format: :json)

New Appointment Color

<%= link_to 'Back', appointment_colors_path %>

<%= render 'form', appointment_color: @appointment_color %>

<%= notice %>

    <%= link_to edit_appointment_color_path(@appointment_color), title: 'Edit' do %>

    <% end %>

<%= @appointment_color.name %>

" class="fas fa-brush fa-2x">

<%= link_to 'Edit', edit_appointment_color_path(@appointment_color) %>

|

<%= link_to 'Back', "/appointment_colors" %>

        <%= link_to appointment_colors_path do %>

        <% end %>

Editing Appointment Color

<%= link_to 'Show', @appointment_color %> |
<%= link_to 'Back', appointment_colors_path %>

<%= render 'form', appointment_color: @appointment_color %>

json.array! @appointment_colors, partial: "appointment_colors/appointment_color", as: :appointment_color

json.partial! "appointment_colors/appointment_color", appointment_color: @appointment_color

<%= notice %>

Appointment Colors

        Name
        Color
        Actions




      <% @appointment_colors.each do |appointment_color| %>

        "><%= appointment_color.name %>

" class="fas fa-brush fa-2x">

          /edit"
            title="Edit">


          " data-method="delete" data-confirm="Are you sure?"
            title="Delete">




      <% end %>

<%= link_to 'New Appointment Color', new_appointment_color_path, :class => "btn btn-light" %>

    <%= form_with model: appointment_color, local: true do |form| %>

<%= form_group(form, appointment_color, :name, value: appointment_color.name) %>

<%= form_group(form, appointment_color, :color, :color_field) %>

    Save
    <% end %>

json.extract! appointment_color, :id, :color, :name, :business_id, :created_at, :updated_at
json.url appointment_color_url(appointment_color, format: :json)

<% if !current_employee.business.twilio_number.nil? %>
<%= react_component 'messages/Index', {
    messageThreads: @message_threads.map{ |thread|
        [
            thread.first,
            thread.second,
            MessagesHelper.resolve_phone_number_readable(current_business, thread.first)
        ]
    },
    businessPhoneNumber: @business_phone_number,
    threadToView: @thread_to_view,
    content: @content,
    employeeName: @employee.full_name,
    pageNumber: @page_number}
%>
<% else %>

Contact support to set up in-app texting for you. (801) 349-9925

<% end %>
<%= render partial: "shared/image_upload" %>
<%= content_for :footer_scripts do %>
    <%= stylesheet_link_tag  'baguetteBox', media: 'all' %>
    <%= javascript_include_tag 'baguetteBox' %>
    <%= javascript_include_tag 'modal.js' %>

        $(function(){
            baguetteBox.run('.tz-gallery',{
            "buttons":true
            });
        });
    
<%end%>

<% if !current_employee.business.twilio_number.nil? %>
<%= react_component 'messages/Index', {
    messageThreads: @message_threads.map{ |thread|
        [
            thread.first,
            thread.second,
            MessagesHelper.resolve_phone_number_readable(current_business, thread.first)
        ]
    },
    businessPhoneNumber: @business_phone_number,
    threadToView: @thread_to_view,
    content: @content,
    employeeName: @employee.full_name,
    pageNumber: @page_number}
%>
<% else %>

Contact support to set up in-app texting for you. (801) 349-9925

<% end %>
<%= render partial: "shared/image_upload" %>
<%= content_for :footer_scripts do %>
    <%= stylesheet_link_tag  'baguetteBox', media: 'all' %>
    <%= javascript_include_tag 'baguetteBox' %>
    <%= javascript_include_tag 'modal.js' %>

        $(function(){
            baguetteBox.run('.tz-gallery',{
            "buttons":true
            });
        });
    
<%end%>

<%# Messaging Thread UI %>

Example 1

Example 2

                     Send

    <%= stylesheet_link_tag "marketing/product.css" %>

HomeService.Cloud

Let the cloud run your business automatically. Less work, more done.

Pricing

Yearly Plan

$79/ mo

Scheduling & Dispatching Board

Online invoicing from any device

Online Payments Directly to Bank

See Customer Records Anywhere

                <% if @monthly %>
                  Switch to Yearly
                <% else %>
                  Yealy Plan Selected
                <% end %>

Monthly Plan

$79 / mo

Scheduling & Dispatching Board

Online invoicing from any device

Online Payments Directly to Bank

See Customer Records Anywhere

                <% if !@monthly %>
                  Switch to Monthly
                <% else %>
                  Monthly Plan Selected
                <% end %>

  <%= form_with(url: "/subscriptions", method: "post") do |form|%>
    <% if @monthly %>


            Amount: $79/month

<%= form.check_box(:monthly, options: {checked: true})%>

        "
        data-description="Annual Subscription to HomeService.Cloud"
        data-amount="7900"
        data-locale="auto">
    <% else %>


            Amount: $79/month, billed annually. Total = $948

        "
        data-description="Annual Subscription to HomeService.Cloud"
        data-amount="94800"
        data-locale="auto">
    <% end %>
  <% end %>

<%= notice %>

Email:
<%= @subscription.email %>

Key:
<%= @subscription.key %>

Activated:
<%= @subscription.activated %>

MRR:
<%= @subscription.mrr %>

Name:
<%= @subscription.name %>

SKU:
<%= @subscription.sku %>

Deactivated:
<%= @subscription.deactivated %>

<%= link_to 'Delete', subscription_path(@subscription), method: :delete, data: { confirm: 'Are you sure?' } %> |
<%= link_to 'Edit', edit_subscription_path(@subscription) %> |
<%= link_to 'Back', "/events/business?id=#{Business.find_by(subscription: @subscription.id)&.id}" %>

Add Subscription for <%=@business.name%>

<%= render 'form', subscription: @subscription, form_url: "/subscriptions/create_manual?business_id=#{@business.id}" %>

<%# link_to 'Show', @subscription %>
<%= link_to 'Back', "/events/business?id=#{Business.find_by(subscription: @subscription.id)&.id}" %>

Editing Subscription

<%= render 'form', subscription: @subscription, form_url: nil %>

<%= link_to 'Show', @subscription %> |
<%= link_to 'Back', "/events/business?id=#{Business.find_by(subscription: @subscription.id)&.id}" %>

json.array! @subscriptions, partial: 'subscriptions/subscription', as: :subscription

json.partial! "subscriptions/subscription", subscription: @subscription

json.extract! subscription, :id, :email, :key, :activated, :created_at, :updated_at
json.url subscription_url(subscription, format: :json)

<%= notice %>

Subscriptions

      Email
      Key
      Activated

    <% @subscriptions.each do |subscription| %>

        <%= subscription.email %>
        <%= subscription.key %>
        <%= subscription.activated %>
        <%= link_to 'Show', subscription %>
        <%= link_to 'Edit', edit_subscription_path(subscription) %>
        <%= link_to 'Destroy', subscription, method: :delete, data: { confirm: 'Are you sure?' } %>

    <% end %>

<%= link_to 'New Subscription', new_subscription_path %>

<%= form_with(model: subscription, local: true, url: form_url || nil) do |form| %>
<% if subscription.errors.any? %>

<%= pluralize(subscription.errors.count, "error") %> prohibited this subscription from being saved:

<%= message %>

<% end %>

    <%= form.label :email %>
    <%= form.text_field :email %>

    <%= form.label :key %>
    <%= form.text_field :key %>

    <%= form.label :activated %>
    <%= form.text_field :activated %>

    <%= form.label :mrr %>
    <%= form.number_field :mrr %>

    <%= form.label :name %>
    <%= form.text_field :name %>

    <%= form.label :sku %>
    <%= form.text_field :sku %>

    <%= form.label :deactivated %>
    <%= form.check_box :deactivated %>

<%= form.submit %>

<% end %>

HomeService.Cloud

<%# render 'form', subscription: @subscription %>

  <%= form_with(url: "/subscriptions", method: "post") do |form|%>


        Amount: $18.95/month, billed annually. Total = $227.40

<%= form.check_box(:annual, options: {checked: true})%>

"
    data-description="Annual Subscription to HomeService.Cloud"
    data-amount="22740"
    data-locale="auto">
<% end %>

New web page history

<%= render "form", web_page_history: @web_page_history %>

<%= link_to 'Back to web page histories', web_page_histories_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>

<% if notice.present? %>

<%= notice %>

<% end %>

<%= render @web_page_history %>

<%= link_to 'Edit this web_page_history', edit_web_page_history_path(@web_page_history), class: "mt-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>

<%= button_to 'Destroy this web_page_history', web_page_history_path(@web_page_history), method: :delete, class: "mt-2 rounded-lg py-3 px-5 bg-gray-100 font-medium" %>

<%= link_to 'Back to web_page_histories', web_page_histories_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>

Editing web page history

<%= render "form", web_page_history: @web_page_history %>

<%= link_to "Show this web page history", @web_page_history, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
<%= link_to "Back to web page histories", web_page_histories_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>

json.array! @web_page_histories, partial: "web_page_histories/web_page_history", as: :web_page_history

json.partial! "web_page_histories/web_page_history", web_page_history: @web_page_history

json.extract! web_page_history, :id, :content, :web_page_id, :created_at, :updated_at
json.url web_page_history_url(web_page_history, format: :json)

<% if notice.present? %>

<%= notice %>

<% end %>

Web page histories

<%= link_to 'New web page history', new_web_page_history_path, class: "rounded-lg py-3 px-5 bg-blue-600 text-white block font-medium" %>

<%= render @web_page_histories %>

<%= form_with(model: web_page_history, class: "contents") do |form| %>
<% if web_page_history.errors.any? %>

<%= pluralize(web_page_history.errors.count, "error") %> prohibited this web_page_history from being saved:

<%= error.full_message %>

<% end %>

    <%= form.label :content %>
    <%= form.text_area :content, rows: 4, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %>

    <%= form.label :web_page_id %>
    <%= form.text_field :web_page_id, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %>

<%= form.submit class: "rounded-lg py-3 px-5 bg-blue-600 text-white inline-block font-medium cursor-pointer" %>

<% end %>

">

    Content:
    <%= web_page_history.content %>

    Web page:
    <%= web_page_history.web_page_id %>

  <% if action_name != "show" %>
    <%= link_to "Show this web page history", web_page_history, class: "rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
    <%= link_to 'Edit this web page history', edit_web_page_history_path(web_page_history), class: "rounded-lg py-3 ml-2 px-5 bg-gray-100 inline-block font-medium" %>

<% end %>

New Marketing Source

<%= render 'form', marketing_source: @marketing_source %>
<%= link_to 'Back', marketing_sources_path %>

    <%= link_to edit_marketing_source_path(@marketing_source), title: 'Edit' do %>

    <% end %>

<%= @marketing_source.name %>

Editing Marketing Source

<%= render 'form', marketing_source: @marketing_source %>

json.array! @marketing_sources, partial: 'marketing_sources/marketing_source', as: :marketing_source

json.partial! "marketing_sources/marketing_source", marketing_source: @marketing_source

Marketing Sources

      Name
      Delete

    <% @marketing_sources.each do |marketing_source| %>

      "><%= marketing_source.name %>

        " data-method="delete" data-confirm="Are you sure?"
          title="Delete">




    <% end %>

<%= link_to 'New Marketing Source', new_marketing_source_path, :class => "btn btn-light" %>

<%
@marketing_source.formatted_error_messages.each do |message|
flash[:error] = message
end
%>

    <%= form_with model: marketing_source, local: true do |form| %>

<%= form_group(form, marketing_source, :name) %>

    Save
    <% end %>

json.extract! marketing_source, :id, :name, :created_at, :updated_at
json.url marketing_source_url(marketing_source, format: :json)

Print

    <% if !current_employee&.business&.logo&.attached? %>
    <%= image_tag("homeservicebare.png", :class => "img-fluid", :style => "max-width:225px; width:100%; height:auto;") %>
    <% else %>
    <%= image_tag(current_employee&.business&.logo, :class => "img-fluid", :style => "max-width:225px; width:100%; height:auto;") if current_employee&.business&.logo&.attached? %>
    <% end %>

<%# Put company info here: %>
         <%= @employee_job.job.business.name %>

         <%= "#{@employee_job.job.business.street_address}" %>

         <%= "#{@employee_job.job.business.city}, #{@employee_job.job.business.state} #{@employee_job.job.business.zip_code}" %>

         <%= number_to_phone(@employee_job.job.business.phone) %>

         <%= "Email: #{@employee_job.job.business.email}" %>

<%= @employee_job.employee_job_type&.name%>

<%= "Status: #{@employee_job.job.job_status&.status}" %>

"> <%= "Job: #{@employee_job.job.id}"%>

         Customer:  <%= @employee_job.job.customer&.full_name %>

         Service Location:  <%= @employee_job.job.location&.display_address%>

         Summary:  <%= @employee_job.job&.notes%>

         Duration:  <%= distance_of_time_in_words(@employee_job.duration)%>

         Start:  <%= @employee_job.start%>

         End:  <%= @employee_job.end%>

         Employee:  <%= "#{@employee_job.employee.full_name} #{number_to_phone(@employee_job.employee.phone)}"%>

         Contact:  <%= @employee_job.job.customer_contact&.full_name %>

         Phone Number:  <%= number_to_phone(@employee_job.job.customer_contact&.phone) %>

         Email:  <%= @employee_job.job.customer_contact&.email %>

Error reading file: U_STRING_NOT_TERMINATED_WARNING

    <% if !current_employee&.business&.logo&.attached? %>
    <%= image_tag("homeservicebare.png", :class => "img-fluid", :style => "max-width:225px; width:100%; height:auto;") %>
    <% else %>
    <%= image_tag(current_employee&.business&.logo, :class => "img-fluid", :style => "max-width:225px; width:100%; height:auto;") if current_employee&.business&.logo&.attached? %>
    <% end %>

<%# Put company info here: %>
         <%= @employee_job.job.business.name %>

         <%= "#{@employee_job.job.business.street_address}" %>

         <%= "#{@employee_job.job.business.city}, #{@employee_job.job.business.state} #{@employee_job.job.business.zip_code}" %>

         <%= number_to_phone(@employee_job.job.business.phone, area_code: true)%>

         <%= "Email: #{@employee_job.job.business.email}" %>

<%= @employee_job.employee_job_type&.name%>

<%= "Status: #{@employee_job.job.job_status&.status}" %>

"> <%= "Job: #{@employee_job.job.id}"%>

         Customer:  <%= @employee_job.job.customer&.full_name %>

         Service Location:  <%= @employee_job.job.location&.display_address%>

         Summary:  <%= @employee_job.job&.notes%>

         Duration:  <%= distance_of_time_in_words(@employee_job.duration)%>

         Start:  <%= @employee_job.start%>

         End:  <%= @employee_job.end%>

         Employee:  <%= "#{@employee_job.employee.full_name} #{number_to_phone(@employee_job.employee.phone)}"%>

         Contact:  <%= @employee_job.job.customer_contact&.full_name %>

         Phone Number:  <%= number_to_phone(@employee_job.job.customer_contact&.phone) %>

         Email:  <%= @employee_job.job.customer_contact&.email %>

<%= content_for :footer_scripts do %>

    $(function(){
        print(); //Print this document on load
    });

<% end %>

New Home Page

<%= render 'form', home_page: @home_page %>

<%= link_to 'Back', home_pages_path %>

<%= notice %>

Domain:
<%= @home_page.domain %>

Primary color:
<%= @home_page.primary_color %>

Secondary color:
<%= @home_page.secondary_color %>

Tertiary color:
<%= @home_page.tertiary_color %>

Facebook url:
<%= @home_page.facebook_url %>

Instagram url:
<%= @home_page.instagram_url %>

Description Header:
<%= @home_page.header_description %>

Description About Us:
<%= @home_page.about_us %>

Services Header:
<%= @home_page.services_header %>

Team Description:
<%= @home_page.our_team_description %>

Business:
<%= @home_page.business %>

Use Raw HTML:
<%= @home_page.use_raw_html %>

<%= link_to 'Edit', edit_home_page_path(@home_page) %> |
<%= link_to 'Back', home_pages_path %>

Editing Home Page

<%= render 'form', home_page: @home_page %>

<%= link_to 'Show', @home_page %> |
<%= link_to 'Back', home_pages_path %>

json.array! @home_pages, partial: "home_pages/home_page", as: :home_page

json.partial! "home_pages/home_page", home_page: @home_page

<%= notice %>

Home Pages

  table {
    width: 100%;
    border-collapse: collapse;
  }
  th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }
  th {
    background-color: #f2f2f2;
  }
  tr:nth-child(even) {
    background-color: #f9f9f9;
  }
  tr:hover {
    background-color: #ddd;
  }
  .even {
    background-color: #f9f9f9;
  }
  .odd {
    background-color: #fff;
  }

      Business
      Domain
      Primary color
      Secondary color
      Tertiary color
      Facebook url
      Instagram url
      Services Description

    <% @home_pages.each_with_index do |home_page, index| %>
      ">
      "> <%= home_page.business.name %>
        <%= home_page.domain %>
        <%= home_page.primary_color %>
        <%= home_page.secondary_color %>
        <%= home_page.tertiary_color %>
        <%= home_page.facebook_url %>
        <%= home_page.instagram_url %>
        <%= home_page.header_description %>
        <%= link_to 'View', "/w/#{home_page.business.id}" %>
        <%= link_to 'Edit', edit_home_page_path(home_page) %>
        <%= link_to 'Destroy', home_page, method: :delete, data: { confirm: 'Are you sure?' } %>

    <% end %>

<%= link_to 'New Home Page', new_home_page_path %>

json.extract! home_page, :id, :primary_color, :secondary_color, :tertiary_color, :facebook_url, :instagram_url, :business_id, :created_at, :updated_at
json.url home_page_url(home_page, format: :json)

<% @home_page = home_page %>
<%= content_for :header do %>

<%# %>

<% end %>

<%= form_with(model: home_page, local: true, id: 'edit_form') do |form| %>
  <% @home_page = home_page %>
  <% if home_page.errors.any? %>

<%= pluralize(home_page.errors.count, "error") %> prohibited this home page from being saved:

<%= message %>

<% end %>

      <%= form.label :domain, class: 'block text-sm font-medium text-gray-700 mb-1' %>
      <%= form.text_field :domain, class: 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50' %>

      <%= form.label :business_id, class: 'block text-sm font-medium text-gray-700 mb-1' %>
      <%= form.text_field :business_id, class: 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50' %>

      <%= form.label :primary_color, class: 'block text-sm font-medium text-gray-700 mb-1' %>
      <%= form.text_field :primary_color, class: 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50' %>

      <%= form.label :secondary_color, class: 'block text-sm font-medium text-gray-700 mb-1' %>
      <%= form.text_field :secondary_color, class: 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50' %>

      <%= form.label :tertiary_color, class: 'block text-sm font-medium text-gray-700 mb-1' %>
      <%= form.text_field :tertiary_color, class: 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50' %>

      <%= form.label :facebook_url, class: 'block text-sm font-medium text-gray-700 mb-1' %>
      <%= form.text_field :facebook_url, class: 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50' %>

      <%= form.label :instagram_url, class: 'block text-sm font-medium text-gray-700 mb-1' %>
      <%= form.text_field :instagram_url, class: 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50' %>

      <%= form.label :use_raw_html, class: 'block text-sm font-medium text-gray-700 mb-1' %>
      <%= form.check_box :use_raw_html, class: 'mt-1 block rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50' %>

      Show


      Save


      <%# raw home_page.navbar_html %>

      <%= form.label :navbar_html, class: 'block text-sm font-medium text-gray-700 mb-1' %>
      <%= form.text_area :navbar_html, class: 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50', rows: home_page.navbar_html.nil? ? 5 : calculate_rows(home_page.navbar_html) %>

        <%# home_page.raw_html %>

      <%= form.label :raw_html, class: 'block text-sm font-medium text-gray-700 mb-1' %>
      <%= form.text_area :raw_html, class: 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50', rows: home_page.raw_html.nil? ? 5 : calculate_rows(home_page.raw_html) %>

      <%= form.label :footer_html, class: 'block text-sm font-medium text-gray-700 mb-1' %>
      <%= form.text_area :footer_html, class: 'mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50', rows: home_page.footer_html.nil? ? 5 : calculate_rows(home_page.footer_html) %>

<%= form.submit "Save", class: 'saveButton px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50' %>

<% end %>

<%# raw home_page.navbar_html %>

<%# raw home_page.raw_html %>

<%# raw home_page.footer_html %>

<% content_for :footer_scripts do %>

    //make these variables global   
    let generatedHtml;
    let editorInstance;

    function submitForm() {
        console.log("POST FORM HERE!")
        //TODO: we need to set the HTML field form with serialized HTML that is legitimate and works.
        // $('#published_job_page_html').val()
        //$('#home_page_raw_html').val(getEditorHtml());
        $('#edit_form').submit(); //Here is where you can manually submit the form        
    }

    $(document).ready(function() {

        document.querySelectorAll(".saveButton").forEach(button => {
            button.addEventListener("click", submitForm, false);
        });

        // Use .html_safe to prevent HTML escaping, and gsub to escape newline and quotation marks for JavaScript.
        generatedHtml = `<%= @home_page&.raw_html&.html_safe&.gsub("\n", "\\n")&.gsub('"', '\\"')&.gsub('`', '') %>`;
        console.log(generatedHtml); // To verify the output

        ClassicEditor
            .create(document.querySelector('#editor'))
            .then(editor => {
                editorInstance = editor; // Store the editor instance
            })
            .catch(error => {
                console.error(error);
            });
    })

    function getEditorHtml() {
        const htmlContent = editorInstance.getData();
        console.log(htmlContent); // Logs the HTML content to the console
        return htmlContent;
    }

<% end %>

    2 Tile - Tile Remodeling and Handyman Services



        .logo {
        max-width: 50px;
        height: auto;
        }
    

2 Tile

Home

Services

About

Contact

Free Estimate

          Free Estimate

Home

Services

About

Contact

          Text Us





          801-349-9925

Welcome to 2 Tile

We provide expert tile remodeling and handyman services in Utah County and Monroe, Utah.

Get a Free Estimate

Our Services

Tile Replacement

Give your space a fresh new look with our tile replacement services

Tile Replacement

We specialize in replacing old and damaged tiles to give your space a fresh new look.

Tile Maintenance

Keep your tiles in top condition with our professional maintenance services

Tile Maintenance

Our tile maintenance services ensure your tiles stay in top condition and last longer.

Bathroom Remodeling

Upgrade your bathroom with our complete remodeling services

Bathroom Remodeling

We offer complete bathroom remodeling services, including tile installation and fixtures.

Kitchen Remodeling

Transform your kitchen with our expert tile work and remodeling services

Kitchen Remodeling

Transform your kitchen with our expert tile work and remodeling services.

About 2 Tile

2 Tile is a leading tile remodeling and handyman company serving Utah County and Monroe, Utah. Founded by Alex, an experienced professional with a passion for craftsmanship and customer satisfaction, 2 Tile has built a reputation for delivering high-quality workmanship and exceptional service.

Our team of skilled technicians is dedicated to transforming your space with beautiful and durable tile work. Whether you need tile replacement, maintenance, or a complete remodel, we have the expertise to bring your vision to life.

Contact Us

Ready to start your tile remodeling project? Contact us today for a free estimate and consultation.

                            Name

                            Email

                            Message

Send Message

        Have a Question?

(function(){
  'use strict';
  // Self Initialize DOM Factory Components
  domFactory.handler.autoInit()

  // Connect button(s) to drawer(s)
  var sidebarToggle = document.querySelectorAll('[data-toggle="sidebar"]')
  sidebarToggle = Array.prototype.slice.call(sidebarToggle)

  sidebarToggle.forEach(function (toggle) {
    toggle.addEventListener('click', function (e) {
      var selector = e.currentTarget.getAttribute('data-target') || '#default-drawer'
      var drawer = document.querySelector(selector)
      if (drawer) {
        drawer.mdkDrawer.toggle()
      }
    })
  })

  let drawers = document.querySelectorAll('.mdk-drawer')
  drawers = Array.prototype.slice.call(drawers)
  drawers.forEach((drawer) => {
    drawer.addEventListener('mdk-drawer-change', (e) => {
      if (!e.target.mdkDrawer) {
        return
      }
      document.querySelector('body').classList[e.target.mdkDrawer.opened ? 'add' : 'remove']('has-drawer-opened')
      let button = document.querySelector('[data-target="#' + e.target.id + '"]')
      if (button) {
        button.classList[e.target.mdkDrawer.opened ? 'add' : 'remove']('active')
      }
    })
  })

  // SIDEBAR COLLAPSE MENUS
  $('.sidebar .collapse').on('show.bs.collapse', function (e) {
    e.stopPropagation()
    var parent = $(this).parents('.sidebar-submenu').get(0) || $(this).parents('.sidebar-menu').get(0)
    $(parent).find('.open').find('.collapse').collapse('hide');
    $(this).closest('li').addClass('open');
  });
  $('.sidebar .collapse').on('hidden.bs.collapse', function (e) {
    e.stopPropagation()
    $(this).closest('li').removeClass('open');
  });

  // ENABLE TOOLTIPS
  $('[data-toggle="tooltip"]').tooltip()

  // PRELOADER
  window.addEventListener('load', function() {
    $('.preloader').fadeOut()
    domFactory.handler.upgradeAll()
  })

})()

    Stack-Rails - Rails 5 & Bootstrap 4 Admin Dashboard



    <%= csrf_meta_tags %>
    <%= stylesheet_link_tag 'application', media: 'all' %>

  ">

<%= render 'layouts/stack/navbar'%>

            <%# CONTENT  %>
            <%= yield %>

          <% if employee_signed_in? %>
            <%= render 'layouts/stack/drawer_left' %>
          <% end %>

    <%= content_for :footer %>
    <%= javascript_include_tag "application" %>
    <%= javascript_pack_tag 'application' %>

    <%= content_for :footer_scripts %">

    Stack-Rails - Rails 5 & Bootstrap 4 Admin Dashboard



    <%= csrf_meta_tags %>

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

">
<%= yield %>

    " class="navbar-brand">

      <%# if current_employee&.business.nil? %>
       <%#  %>
        <%#= image_tag("fieldrocketlogo.png", size: 55, :class => "img-fluid") %>
      <%#  %>
      <%# Field Rocket %>
      <%# else %>

          <%# if !current_employee&.business&.logo&.attached? %>
            <%= image_tag("fieldrocketlogo.png", size: 55, :class => "avatar-img") %>
          <%# else %>
            <%#= image_tag(current_employee&.business&.logo, size: 55, :class => "avatar-img rounded-circle") if current_employee&.business&.logo&.attached? %>
          <%# end %>

        <%= current_employee&.business&.name %>

      <%# end %>


    <% if !current_business.nil? %>

           Customers
           Invoices & Estimates
           Job Number

          search

<% end %>

          " class="nav-link">
              Sign In
              person

<% if employee_signed_in? %>

          " class="rounded-circle" width="32" alt="Frontted">

            <%= "#{current_employee&.first_name}"%>







<%="#{current_employee&.first_name} #{current_employee&.last_name}"%>


@<%="#{current_employee&.first_name}"%>





          Dashboard
          ">My profile



          <%= link_to(destroy_employee_session_path, class: "dropdown-item", title: 'Logout', method: :delete) do %>

            Log Out
          <% end %>

<% end %>

<% if !current_business.nil? %>
<%= content_for :footer_scripts do %>

  $(function(){
    $('#search_selected_model').on('change', function(event){      
      let action = event.currentTarget.value;
      let ransackQuery = $('#search_selected_model option:selected').data('ransack');
      let ransackUrl = `/${action}`;

      //Now need to change the form that's used for searching.        

      //nav_search_form for url on action attribute
      document.getElementById('nav_search_form').setAttribute("action", ransackUrl)
      //nav_search_input for ransack params: on name attribute
      document.getElementById('nav_search_input').setAttribute("name", ransackQuery)

      //Set the cookie for this session so that the navbar can keep the same search dropdown across pages
      Cookies.set("navbar_search", action);
    });

    $("#nav_search_form").on("submit", function(){
      $('#search-loader').show();
    });
    
    if (Cookies.get("navbar_search")){
      $('#search_selected_model').val(Cookies.get("navbar_search")).trigger('change');
    };

  });

<% end %>
<% end %>

            " alt="avatar" class="avatar-img rounded-circle">


            <%="#{current_employee&.first_name} #{current_employee&.last_name}"%>
            <%=current_employee.group&.name&.titleize%>

more_vert

<%="#{current_employee.first_name} #{current_employee.last_name}"%>

@<%="#{current_employee.first_name}"%>

            Dashboard
            ">My profile

            <%= link_to(destroy_employee_session_path, class: "dropdown-item", title: 'Logout', method: :delete) do %>

              Log Out
            <% end %>

Menu

            description
            Settings

<%# Confusing syntax. Breadcrumb is an array [name, route], so calling .first is getting the name. %>
<% default_title = "Field Rocket | #{employee_signed_in? ? get_breadcrumbs&.last&.first : 'Launch, Grow, & Manage Your Service Business'}" %>

     <%= @title || default_title %>



    <% if @use_business_logo_as_favicon && @business.logo.attached? %>
    <%= favicon_link_tag url_for(@business.logo), :rel => 'icon', :type=> 'image/png' if @business.logo.attached?%>
    <% else %>
    <%= favicon_link_tag asset_path('fieldrocketlogo.png'), :rel => 'icon', :type =>  'image/png' %>
    <% end %>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <% if should_use_tailwind_instead_of_application_css? %>
      <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
    <% else %>
      <%= stylesheet_link_tag 'application', media: 'all' %>
    <% end %>


    <%= action_cable_meta_tag %>
    <%= audio_tag "sms_notification.wav", id: "sms-notification-audio" %>

    <%= content_for :header %>

  ">

    <% if !should_use_tailwind_instead_of_application_css? %>

<%= render 'layouts/stack/navbar'%>

<% if employee_signed_in? %>

<%= name %>

"><%= name %>

          <% end %>
        <% end %>
            <%# CONTENT  %>
            <%= yield %>

        <% if !current_page?('/published_job_pages/dashboard') %>
          <% if employee_signed_in? %>
            <%= render 'layouts/stack/drawer_left' %>
          <% end %>

    <% end %>

    <%= content_for :footer %>
    <%= javascript_include_tag "application" %>
    <%= javascript_pack_tag 'application' %>
    <%= render 'layouts/gritter' %>
    <%= content_for :footer_scripts %>
    <% if !current_employee.nil? %>

      var currentBusinessId = '<%=current_employee.business.id%>';//WARNING: Action Cable message notifications depends on this ID. See sms-notification.js. 
      window.intercomSettings = {
        app_id: "k9jifvav",
        name: "<%= current_employee.full_name%>", // Full name
        email: "<%= current_employee.email%>", // Email address
        user_id: "<%= current_employee.id %>",
        phone: "<%= current_employee.phone %>",
        created_at: "<%= current_employee.created_at %>" // Signup date as a Unix timestamp
      };
    
    <% end %>

    <% if Rails.env.production? %>

        (function(c,l,a,r,i,t,y){
            c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
            t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
          y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
        })(window, document, "clarity", "script", "n7zmxvqsqx");
      
    <% end %>

    // if (window.innerWidth + window.innerHeight >= 1500){
    // if (window.innerWidth + window.innerHeight >= 1500){
      //(function(){var w=window;var ic=w.Intercom;if(typeof ic==="function"){ic('reattach_activator');ic('update',w.intercomSettings);}else{var d=document;var i=function(){i.c(arguments);};i.q=[];i.c=function(args){i.q.push(args);};w.Intercom=i;var l=function(){var s=d.createElement('script');s.type='text/javascript';s.async=true;s.src='https://widget.intercom.io/widget/k9jifvav';var x=d.getElementsByTagName('script')[0];x.parentNode.insertBefore(s,x);};if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}})();
    // }
    // We pre-filled your app ID in the widget URL: 'https://widget.intercom.io/widget/k9jifvav'
    

  <%= csrf_meta_tags %>
  <%= csp_meta_tag %>
    Llama Press - Build Anything with AI





        body {
            font-family: 'Poppins', sans-serif;
        }
        .footer-banner {
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #4a4a4a;
            color: white;
            padding: 20px;
            /* position: absolute; */
            bottom: 0;
            width: 100%;
            box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1);
        }
        .footer-text {
            font-size: 18px;
            font-weight: bold;
        }
        .feature-icon {
            width: 24px;
            height: 24px;
            font-size: 24px;
        }
    

          LlamaPress

            Templates

           Home


           Webpages


           Source Code


           Activated Features


           Show Database


           Templates

<%# react_component('chatbot/ChatBot', props: { first_name: 'Tyson' }) %>

<%= yield %>

<%= render partial: 'shared/chatbot/chatbot' %>
<%# render partial: 'shared/chatbot/history_modal' %>

            Built with LlamaPress

<%= yield %>
<%#= react_component 'chatbot/ChatBot', { first_name: 'User' }, { prerender: false } %>

<%= yield %>

<%= js add_gritter(flash[:notice], title: 'Notice!', time: 5000),
add_gritter(flash[:success], title: 'Success!', time: 5000, class_name: "success-notice"),
add_gritter(flash[:error], title: 'Error!', time: 5000, class_name: "error-notice") %>

Login or register now!

">

    Email

    Password

    Remember me

Register

Forgot your password?

      <%= image_tag("homeservice.png", height: '50', width:  '50') %>

        <% if employee_signed_in?%>
        <% else %>
          <%= get_trade() %> On Cloud
        <% end %>

      <% if employee_signed_in? %>

        <%= link_to schedule_path, :class => "nav-link" do %>

          Schedule
        <% end %>

        <%= link_to customers_path, :class => "nav-link" do %>

          Customers
        <% end %>

      <% end %>

<%= link_to('Features', features_path, class: 'nav-link') %>

<%= link_to('Register', new_business_path, class: 'nav-link') %>

<%= link_to('Login', new_employee_session_path, class: 'nav-link') %>

            Settings



            <% if can? :read, Employee %>
              <%= link_to employees_path, class: 'nav-link dropdown-item' do %>

                  Employees
              <% end %>
            <% end %>

            <% if can? :read, Roster %>
              <%= link_to rosters_path, :class => "nav-link dropdown-item" do %>

                  Rosters
              <% end %>
            <% end %>

            <% if current_employee.is_owner? %>
              <%= link_to(edit_business_path(current_business), class: "nav-link dropdown-item", title: 'Business Settings') do %>

                Business
              <% end %>
            <% end %>

            <% if current_employee.is_owner? %>
              <%= link_to invoice_templates_path, :class => "nav-link dropdown-item" do %>

                Invoice Templates
              <% end %>
            <% end %>

            <% if current_employee.is_owner? %>
              <%= link_to(marketing_sources_path, class: "nav-link dropdown-item", title: 'Marketing Sources') do %>

                Marketing Sources
              <% end %>
            <% end %>

            <%= link_to(edit_employee_registration_path, class: "nav-link dropdown-item", title: 'Account' ) do %>

                Account
            <% end %>

            <%= link_to(destroy_employee_session_path, class: "nav-link dropdown-item", title: 'Logout', method: :delete) do %>

                Log Out
            <% end %>

<%= yield %>

      /* Email styles need to be inline */
    

    <%= yield %>

    LLama Template
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%# stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%# javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

    <%= yield %>
    <%= render partial: 'shared/chatbot/chatbot' %>

            Built with LlamaPress

<%= render "shared/topNavbar" %>
<%= render "shared/popup" %>

Add New Employee

      <%= form_with model: @employee, :url => url_for(:controller => 'employees', :action => 'create'), local: true do |form| %>

<%= form_group(form, @employee, :first_name) %>

<%= form_group(form, @employee, :last_name) %>

<%= form_group(form, @employee, :color, :color, value: "#FFFFFF") %>

<%= form_group(form, @employee, :email) %>

<%= form_group(form, @employee, :password, :password_field) %>

<%= form_group(form, @employee, :phone, :phone_field) %>

<%= form_group(form, @employee, :group_id, :select, select_options: group_options) %>

<%= form_group(form, @employee, :branch_id, :select, select_options: branch_options) %>

<%= form.submit class: 'btn btn-company-primary' %>

<% end %>

  <%= content_for :footer_scripts do %>

    function clearColor(){
      $('#employee_color').val('#ffffff');
    }
  
  <% end %>

<% @body_class = 'layout-login-centered-boxed' %>

      " width="150" alt="Stack">
      Field Rocket

Login to Field Rocket

<% if notice %>

<%= notice %>

  <% end %>
  <% if alert %>

<%= alert %>

<% end %>

    ">

Email Address:

Password:

Login

          Remember me

      Forgot password?

      Don't have an account? Sign up!

Edit Employee

    <%= form_with model: @employee, local: true do |form| %>

<%= form_group(form, @employee, :first_name, value: @employee.first_name) %>

<%= form_group(form, @employee, :last_name, value: @employee.last_name ) %>

<%= form_group(form, @employee, :color, :color, value: @employee.color.nil? ? "#FFFFFF" : @employee.color) %>

<%= form_group(form, @employee, :email, value: @employee.email ) %>

<%= form_group(form, @employee, :phone,:phone_field, value: @employee.phone)%>

<%= form_group(form, @employee, :group_id, :select, select_options: group_options) %>

<%= form_group(form, @employee, :branch_id, :select, select_options: branch_options) %>

<%= form.file_field :avatar, accept:'image/*' %>

<%= form.submit class: 'btn btn-company-primary' %>

<% end %>

  <%= content_for :footer_scripts do %>

    function clearColor(){
      $('#employee_color').val('#ffffff');
    }
  
  <% end %>

Hello <%= @email %>!

<% if @resource.try(:unconfirmed_email?) %>

We're contacting you to notify you that your email is being changed to <%= @resource.unconfirmed_email %>.

<% else %>

We're contacting you to notify you that your email has been changed to <%= @resource.email %>.

<% end %>

Hello <%= @resource.email %>!

You have a request to set a new password so you can sign into Field Rocket on your computer.

You can do this through the link below.

<%= link_to 'Set a new password', "#{ENV["BASE_URL"]}/employees/password/edit?reset_password_token=#{@token}" %>

If you didn't request this, please ignore this email.

Your password won't change until you click the above link and create a new one.

<%= t("devise.mailer.invitation_instructions.hello", email: @resource.email) %>

<%= t("devise.mailer.invitation_instructions.someone_invited_you", url: root_url) %>

<%= accept_invitation_url(@resource, :invitation_token => @token) %>

<% if @resource.invitation_due_at %>
<%= t("devise.mailer.invitation_instructions.accept_until", due_date: l(@resource.invitation_due_at, format: :'devise.mailer.invitation_instructions.accept_until_format')) %>
<% end %>

<%= t("devise.mailer.invitation_instructions.ignore") %>

Welcome <%= @email %>!

You can confirm your account email through the link below:

<%= link_to 'Confirm my account', confirmation_url(@resource, confirmation_token: @token) %>

Hello <%= @resource.email %>!

Your account has been locked due to an excessive number of unsuccessful sign in attempts.

Click the link below to unlock your account:

<%= link_to 'Unlock my account', unlock_url(@resource, unlock_token: @token) %>

<%= t("devise.mailer.invitation_instructions.hello", email: @resource.email) %>

<%= t("devise.mailer.invitation_instructions.someone_invited_you", url: root_url) %>

<%= link_to t("devise.mailer.invitation_instructions.accept"), accept_invitation_url(@resource, :invitation_token => @token) %>

<% if @resource.invitation_due_at %>

<%= t("devise.mailer.invitation_instructions.accept_until", due_date: l(@resource.invitation_due_at, format: :'devise.mailer.invitation_instructions.accept_until_format')) %>

<% end %>

<%= t("devise.mailer.invitation_instructions.ignore") %>

Hello <%= @resource.email %>!

We're contacting you to notify you that your password has been changed.

<%= notice %>

Employee Schedule

<%= render 'shared/calendarEditable' %>

<%= render partial: 'employee_table' , locals: { path: employees_path, link_text: "Show Active Employees" } %>

<%= content_for :modal_header, :flush => true do %>

Who's schedule do you want to see?

<% end %>

<%= content_for :modal_body, :flush => true do %>
    <%# branches = current_employee.business.branches.include(:employees) %>
    <% branches = Branch.includes([:employees]).where(business_id: current_business.id)%>
    <% branches.each do |branch| %>
        <% employees = branch.employees.load %>
        <% if employees.size > 0 %>

<%= branch.name %>

        <% end %>
        <% employees.each do |e| %>
            <% if e.is_active? %>
                " <% if current_employee.should_employee_show_on_filter? e %> checked <% end %>>
                " ><%=e.full_name%>


            <% end %>
        <% end %>


    <% end %>
<% end %>

<%= render partial: "shared/generic_modal", locals: {modal_id: "appointment_filter_modal"} %>

<%= content_for :footer_scripts do %>

    //This is where we send an update to the server every time something is checked to modify the appointment filter
    $('.employee-appointment-filter-checkbox').on('click', function(event){
        let formattedEmployeeFilter = getFormattedEmployeeFilter();
        $.post({
            url: '/employees/filter_settings',
            data: {employees: formattedEmployeeFilter},
            success: function(data){
                console.log("Successfully set the employee filter.");
                calendar.refetchEvents();
            },
            failure: function(data){
                gritterSuccess('Error', "Couldn't set the employee filter", 10000);
            }
        });
    });

    function getFormattedEmployeeFilter(){
        var filteredEmployees = [];
        $('.employee-appointment-filter-checkbox').each(function(index, element){
            if (element.checked){
                filteredEmployees.push(element.name);
            }
        });
        return filteredEmployees.join();
    }

<% end %>

<% @body_class = 'layout-login-centered-boxed' %>

      " width="150" alt="Stack">
      Field Rocket

Set New Password for Field Rocket

<%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f| %>

Email Address:

">

<%= f.submit 'Send New Password Instructions', class: 'btn btn-block btn-company-primary' %>

<% end %>

<% @body_class = 'layout-login-centered-boxed' %>

      " width="150" alt="Stack">
      Field Rocket

Change Your Field Rocket Password

  <%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :put }) do |f| %>
  <%= devise_error_messages! %>
  <%= f.hidden_field :reset_password_token %>

      New password:
      <% if @minimum_password_length %>
        (<%= @minimum_password_length %> characters minimum)

      <% end %>

      <%= f.password_field :password, autofocus: true, autocomplete: "new-password" %>
        <%#

Confirm new password:

        <%= f.password_field :password_confirmation, autocomplete: "off" %>
        <%#

      <%= f.submit "Change my password" %>
        <%# f.submit 'Send New Password Instructions', class: 'btn btn-block btn-company-primary' %>

<% end %>

<%= render "employees/shared/links" %>

<%= render partial: 'employee_table' , locals: { path: deactivated_employees_path, link_text: "Show Deactivated Employees" } %>

<% @employee_jobs.each do |employee_job|%>
    <% @employee_job = employee_job %>
    <%= render "employee_jobs/show"%>

<% end %>

<%= t "devise.invitations.new.header" %>

    <%= link_to employees_path, title: 'Back' do %>

    <% end %>

    <%= form_for resource, :as => resource_name, :url => invitation_path(resource_name), :html => {:method => :post} do |f| %>

        <%= form_group(f, resource, :first_name) %>
        <%= form_group(f, resource, :last_name) %>

<%= form_group(f, resource, :email) %>

<%= form_group(f, resource, :group_id, :select, select_options: group_options) %>

<%= f.submit t("devise.invitations.new.submit_button"), class: 'btn btn-yak' %>

<% end %>

<%= t 'devise.invitations.edit.header' %>

    <%= form_for resource, :as => resource_name, :url => invitation_path(resource_name), :html => { :method => :put } do |f| %>
      <%= f.hidden_field :invitation_token, readonly: true %>

<%= form_group(f, resource, :first_name) %>

<%= form_group(f, resource, :last_name) %>

<%= form_group(f, resource, :phone) %>

<%= form_group(f, resource, :password, :password_field) %>

<%= form_group(f, resource, :password_confirmation, :password_field) %>

<%= f.submit t("devise.invitations.edit.submit_button"), class: 'btn btn-company-primary' %>

<% end %>

Resend unlock instructions

<%= form_for(resource, as: resource_name, url: unlock_path(resource_name), html: { method: :post }) do |f| %>
<%= devise_error_messages! %>

    <%= f.label :email %>

    <%= f.email_field :email, autofocus: true, autocomplete: "email" %>

<%= f.submit "Resend unlock instructions" %>

<% end %>

<%= render "employees/shared/links" %>

<%- if controller_name != 'sessions' %>
<%= link_to "Log in", new_session_path(resource_name) %>

<% end -%>

<%- if devise_mapping.registerable? && controller_name != 'registrations' %>
<%= link_to "Register", new_business_path %>

<% end -%>

<%- if devise_mapping.recoverable? && controller_name != 'passwords' && controller_name != 'registrations' %>
<%= link_to "Set a New Password", new_password_path(resource_name) %>

<% end -%>

<%- if devise_mapping.confirmable? && controller_name != 'confirmations' %>
<%= link_to "Didn't receive confirmation instructions?", new_confirmation_path(resource_name) %>

<% end -%>

<%- if devise_mapping.lockable? && resource_class.unlock_strategy_enabled?(:email) && controller_name != 'unlocks' %>
<%= link_to "Didn't receive unlock instructions?", new_unlock_path(resource_name) %>

<% end -%>

<%- if devise_mapping.omniauthable? %>
  <%- resource_class.omniauth_providers.each do |provider| %>
    <%= link_to "Sign in with #{OmniAuth::Utils.camelize(provider)}", omniauth_authorize_path(resource_name, provider) %>

  <% end -%>
<% end -%>

Employees

<%= react_component 'employees/Index', { tableData: employees_data, permissions: permissions_for(Employee), displayGroup: (can? :read, Group)} %>

<%= link_to link_text, path, { class: "btn btn-light" } %>

<%= render partial: 'shared/paginate', locals: {resource: @employees} %>

console.log("Made it to javascript that will be sent back to server.");
updateScheduleViewer('<%= j @employee_weekly_schedule.to_json.html_safe %>',
'<%= j @weeks_days_to_date_dictionary.to_json.html_safe %>',
'<%= j @weeks_days_to_month_dictionary.to_json.html_safe %>');

Sign up

<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
<%= devise_error_messages! %>

    <%= f.label :email %>

    <%= f.email_field :email, autofocus: true, autocomplete: "email" %>

    <%= f.label :password %>
    <% if @minimum_password_length %>
    (<%= @minimum_password_length %> characters minimum)
    <% end %>

    <%= f.password_field :password, autocomplete: "new-password" %>

    <%= f.label :password_confirmation %>

    <%= f.password_field :password_confirmation, autocomplete: "new-password" %>

<%= f.submit "Sign up" %>

<% end %>

<%= render "employees/shared/links" %>

Edit Account

    <%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| %>

<%= form_group(f, resource, :email, :email_field) %>

<%= form_group(f, resource, :password, :password_field, note: 'optional', label: 'New password') %>

<%= form_group(f, resource, :password_confirmation, :password_field, label: 'New password') %>

<%= form_group(f, resource, :current_password, :password_field) %>

<%= f.submit 'Update Account', class: 'btn btn-company-primary' %>

<% end %>

Resend confirmation instructions

<%= form_for(resource, as: resource_name, url: confirmation_path(resource_name), html: { method: :post }) do |f| %>
<%= devise_error_messages! %>

    <%= f.label :email %>

    <%= f.email_field :email, autofocus: true, autocomplete: "email", value: (resource.pending_reconfirmation? ? resource.unconfirmed_email : resource.email) %>

<%= f.submit "Resend confirmation instructions" %>

<% end %>

<%= render "employees/shared/links" %>

    Field Rocket Purchase Subscription

    <%= stylesheet_link_tag "marketing/product.css" %>

Field Rocket

Let the cloud run your business automatically. Less work, more done.

<%= image_tag("Schedule-Navigate-Alert.gif", :class => "img-fluid img-thumbnail", :style => "min-height:250px; min-width:400px;") %>

Schedule, Navigate, Alert

Email Invoices, Bids, Receipts With One Click

<%= image_tag("Estimate-Email.gif", :class => "img-fluid img-thumbnail", :style => "min-height:250px; min-width:400px;") %>

<%= image_tag("Invoice-Payments.gif", :class => "img-fluid img-thumbnail", :style => "min-height:250px; min-width:400px;") %>

Invoice and Collect Payments Easy

<%= image_tag("Log in for mobile.gif", :class => "img-fluid img-thumbnail", :style => "min-height:150px; min-width:200px;") %>

Phone, Tablet, or Desktop

<%= image_tag("Navigation on iPad.gif", :class => "img-fluid img-thumbnail", :style => "min-height:150px; min-width:200px;") %>

Pricing

Lite

FREE

Unlimited Customer and Job Record Keeping

One Click Invoicing

Easy Appointment Scheduling and Job Site Navigation

Sign up for free

Pro (Not yet available, coming soon!)

$25 / mo

All Lite Features

Customer Appointment Reminders through Text or Email

Automated Text Messages of Filter Reminders to Customers that Opt-In

One Click Invoice Payments

Get started

Elite (Not yet available)

$50 / mo

All Pro Features, Plus:

Compatible iOS Application

Inbound Customer Caller ID With Customer Records Pulled Up

Mass Emailing List to Customers for Marketing

Contact us

<% if employee_signed_in? %>

Invoices sent this week: <%= current_business.invoices.where(sent_on: Date.today.beginning_of_week(:monday)..Date.today.end_of_week(:monday)).where(invoice_type: "Invoice").count %>

<%= react_component 'invoices/InvoiceTracking', {outstandingInvoices: current_business.invoices.where(sent_on: Date.today.beginning_of_week(:monday)..Date.today.end_of_week(:monday)).where(invoice_type: "Invoice").map {|i| i.get_invoice_preview}} %>

Estimates sent this week: <%= current_business.invoices.where(sent_on: Date.today.beginning_of_week(:monday)..Date.today.end_of_week(:monday)).where(invoice_type: "Estimate").count %>

<%= react_component 'invoices/InvoiceTracking', {outstandingInvoices: current_business.invoices.where(sent_on: Date.today.beginning_of_week(:monday)..Date.today.end_of_week(:monday)).where(invoice_type: "Estimate").map {|i| i.get_invoice_preview}} %>

Receipts sent this week: <%= current_business.invoices.where(sent_on: Date.today.beginning_of_week(:monday)..Date.today.end_of_week(:monday)).where(invoice_type: "Receipt").count %>

<%= react_component 'invoices/InvoiceTracking', {outstandingInvoices: current_business.invoices.where(sent_on: Date.today.beginning_of_week(:monday)..Date.today.end_of_week(:monday)).where(invoice_type: "Receipt").map {|i| i.get_invoice_preview}} %>

<%=
  #react_component 'invoices/InvoiceTracking', {lateInvoices: @business.get_late_invoices, outstandingInvoices: @business.get_outstanding_invoices, paidInvoices: @business.get_paid_invoices(1) }
%>
<% else %>
  <%# render "shared/landingpage" %> <%# Temporary, just using the login page for landing page for now. We might not even want to do marketing on this page. %>
  <%= render "stack/login" %>
<% end %>

    Pricing example for Bootstrap

    <%= stylesheet_link_tag "marketing/pricing.css" %>

Pricing

Lite

FREE / mo

Unlimited Customer and Job Record Keeping

One Click Invoicing

Easy Appointment Scheduling and Job Site Navigation

Sign up for free

Pro (Not yet available, coming soon!)

$25 / mo

All Lite Features

Customer Appointment Reminders through Text or Email

Automated Text Messages of Filter Reminders to Customers that Opt-In

One Click Invoice Payments

Get started

Elite (Not yet available)

$50 / mo

All Pro Features, Plus:

Compatible iOS Application

Inbound Customer Caller ID With Customer Records Pulled Up

Mass Emailing List to Customers for Marketing

Contact us

      Holder.addTheme('thumb', {
        bg: '#55595c',
        fg: '#eceeef',
        text: 'Thumbnail'
      });
    

Error reading file: U_STRING_NOT_TERMINATED_WARNING

New Group

<%= render 'form', group: @group %>

<%= @group.name.titleize %>

    <%= link_to groups_path, title: 'Back' do %>

    <% end %>
    <% if can? :update, Group %>
    <%= link_to edit_group_path(@group), title: 'Edit' do %>

    <% end %>
    <% end %>

        Name:
        <%= @group.name %>

<%= react_component 'permissions/Table', {tableData: @permissions, displayTools: false} %>

Edit Group

<%= render 'form', group: @group %>

      <%= link_to new_group_permission_path(@group), title: 'New Customer.' do %>

      <% end %>

<%= react_component 'permissions/Table', {tableData: @permissions, displayTools: true} %>

Groups

<%= react_component 'groups/Index', {tableData: @groups, permissions: permissions_for(Group)} %>
<%= render partial: 'shared/paginate', locals: {resource: @groups} %>

    <%= link_to groups_path, title: 'Back' do %>

    <% end %>

    <%= form_with model: group, local: true do |form| %>

<%= form_group(form, group, :name) %>

<%= form.submit class: 'btn btn-yak' %>

<% end %>

New Branch

<%= render 'form', branch: @branch %>
<%= link_to 'Back', branches_path %>

      <%= link_to edit_branch_path(@branch), title: 'Edit' do %>

      <% end %>

<%= @branch.name %>

<%= link_to 'Edit', edit_branch_path(@branch) %>

|

<%= link_to 'Back', branches_path %>

<%= content_for :modal_header, :flush => true do %>
Print Branch Summaries
<% end %>

<%= content_for :modal_body, :flush => true do %>

            Branch for Summary

<%#

            Date of Summary

%>

Print

<% end %>

<%= render partial: "shared/generic_modal", locals: {modal_id: "branch_daily_summary"} %>

<%= content_for :footer_scripts do %>

    new QuerySelect('select_branch_for_summary',
        '/branches.json',
        null, 
        SelectResultsTransform('name'),
        function(event){
            $('#open_branch_summary_button').click(function(event){                
                window.location.replace(`/branches/${$('#select_branch_for_summary').val()}/daily_summary`);
            });
    });

<% end %>

Editing Branch

<%= render 'form', branch: @branch %>
<%= link_to 'Back', branches_path %>

json.array! @branches, partial: 'branches/branch', as: :branch

json.extract! branch, :id, :name, :created_at, :updated_at
json.url branch_url(branch, format: :json)

json.partial! "branches/branch", branch: @branch

Branches

        Name
        Edit
         Delete




      <% @branches.each do |branch| %>

        "><%= branch.name %>

          /edit"
            title="Edit">




          " data-method="delete" data-confirm="Are you sure?"
            title="Delete">




      <% end %>

<%= link_to 'New Branch', new_branch_path, :class => "btn btn-light" %>

<%
@branch.formatted_error_messages.each do |message|
flash[:error] = message
end
%>

    <%= form_with model: branch, local: true do |form| %>

<%= form_group(form, branch, :name) %>

Save

<% end %>

Payment has been made!

<% @message %>

<% if @invoice %>
"> View Here
<% end %>

<%= render 'invoices/invoice', invoice: @invoice, editable: false%>

An email failed to send because a refresh token wasn't saved.

Email: <%= @email %>

Date: <%= DateTime.now %>

Signed!

<% @message %>

<% if @invoice %>
"> View Here
<% end %>

Return Address: <%= @email %>

Phone Number: <%= @phone %>

Date: <%= DateTime.now %>

Message: <%= @message %>

Daily report email regarding business registration and employee sign in

Email: <%= @email %>

Date: <%= DateTime.now %>

An invoice failed to push into quickbooks due to an error

Company: <%= @invoice.business.name %>

Invoice: "> <%= @invoice.long_title %>

Error: <%= @invoice.quickbooks_error %>

Date: <%= DateTime.now %>

<%# render 'invoices/invoice.html.erb', editable: true%>

<%= react_component 'invoices/InvoiceTemplateEditPage', invoice_template_data(true)%>

        <%= link_to edit_invoice_template_path(@invoice), title: 'Edit' do %>

        <% end %>

<%= @invoice.name %>

<%# render 'invoices/invoice', editable: false %>
<%= react_component 'invoices/InvoiceDocument/InvoiceTemplateDocument', invoice_template_data(false)%>

Error reading file: U_STRING_NOT_TERMINATED_WARNING

<%# render partial: "invoices/invoice", locals: {editable: true} %>
<%= react_component 'invoices/InvoiceTemplateEditPage', invoice_template_data(true)%>

<%= content_for :footer_scripts do %>

    function validateInputForms(){
        if ($('#template_name').text().trim() ==  "Template Name Here.." || $('#template_name').text().trim() == ""){            
            gritterError("Invalid Template Name", "You must enter a template name!");
        }
        else {
            updateInvoice('invoice_templates',<%=@invoice.id%>, updatingInvoiceTemplate=true)
        }
    }

<% end %>

json.array! @invoice_templates, partial: 'invoice_templates/invoice_template', as: :invoice_template

gritterError("Error adding invoice template", data.responseJSON[key]);

<%= render partial: "invoices/customer_info_for_invoice", locals: {customer: customer}%>

json.partial! "invoice_templates/invoice_template", invoice_template: @invoice_template

    <%= link_to new_invoice_template_path, title: 'New' do %>

    <% end %>

Invoice Templates

       Name
       Description
       Delete



    <% @invoice_templates.each do |template| %>

       "><%= template.name %>
       <%= template.description %>

        " data-method="delete" data-confirm="Are you sure?" title="Delete">




    <% end %>

<%= form_with(model: invoice_template, local: true) do |form| %>
<% if @invoice.errors.any? %>

<%= pluralize(@invoice.errors.count, "error") %> prohibited this invoice_template from being saved:

<%= message %>

<% end %>

    <%= form.label :name %>
    <%= form.text_field :name %>

    <%= form.label :description %>
    <%= form.text_area :description %>

    <%= form.label :redirect_url %>
    <%= form.text_area :redirect_url %>

<%= form.submit %>

<% end %>

<%= content_for :card_body, flush: true do %>

New Payment

<%= render 'form', payment: @payment %>
<%= link_to 'Back', payments_path %>
<% end %>
<%= render :partial => "shared/card" %>

<%= content_for :footer_scripts do %>

$(document).ready(function(){
    <% if @job&.id != nil %>
        SetSelect2Option('job_select', "<%=@job.title%>", "<%=@job.id%>")        
    <% end %>
    <% if @invoice&.id != nil %>        
        SetSelect2Option('invoice_select', "<%=@invoice.title%>", "<%=@invoice.id%>")
    <% end %>
});

<% end %>

<%= content_for :card_body do %>

Amount:
<%= format("$%.2f", @payment.amount) %>

Paid on:
<%= @payment.paid_on&.strftime("%B %d, %Y") %>

Payment type:
<%= @payment.payment_type %>

  Job:
  <% if @payment.job %>
  "> <%= @payment.job_id %>
  <% else %>
    No job associated with this payment
  <% end%>

<% if !@payment.invoice.nil?%>

Invoice:
"> <%= @payment.invoice.display_number %>

<% end %>

<%= link_to 'Edit', edit_payment_path(@payment) %> |
<%= link_to 'Back', job_path(@payment.job) %>

<% end %>
<%= render :partial => "shared/card"%>

<%= content_for :card_body, flush: true do %>

Editing Payment

    <%= render 'form', payment: @payment %>
    <%= link_to 'Show', @payment %> |
    <%= link_to 'Back', payments_path %>
<% end %>
<%= render :partial => "shared/card"%>
<%= content_for :footer_scripts do %>
    <% if @job&.id != nil %>

            SetSelect2Option('job_select', "<%=@job.title%>", "<%=@job.id%>")
        
    <% end %>
    <% if @invoice&.id != nil %>

            SetSelect2Option('invoice_select', "<%=@invoice.title%>", "<%=@invoice.id%>")
        
    <% end %>
<% end %>

json.array! @payments, partial: 'payments/payment', as: :payment

json.partial! "payments/payment", payment: @payment

<%= react_component 'shared/IndexPage', {
  title: "Payments",
  showDatePicker: true,
  dateData: {
    startDateId: 'payments_start',
    endDateId: 'payments_end',
    startDate:  @start_date,
    endDate:  @end_date,
    path:  payments_path,
  },
  attributes: ["Amount", "Paid On", "Type", "Invoice", "Notes"],
  data: @payments.map {|payment| [payment.id, payment.amount.nil? ? "$0.00" : format("$%.2f", payment.amount), payment.paid_on.nil? ? nil : payment.paid_on.strftime("%B %d, %Y"), payment.payment_type, !payment.invoice.nil? ? {title: payment.invoice.title, url: url_for(payment)} : nil, payment.notes]},
  basePath: '/payments'} %>

<%= render partial: 'shared/paginate', locals: {resource: @payments} %>

<%= form_with(model: payment, local: true) do |form| %>
<% if payment.errors.any? %>

<%= pluralize(payment.errors.count, "error") %> prohibited this payment from being saved:

<%= message %>

<% end %>

<%= form_group(form, @payment, :amount, :currency, value: @payment.amount) %>

<%= form_group(form, @payment, :paid_on, :datetime_field, options: {:class => "datepicker-input"}, value: DateTime.now) %>

<%= form_group(form, @payment, :payment_type, :select, select_options: payment_type_options) %>

         Job

<%= form_group(form, @payment, :job_id, :text_field) %>

         Invoice

<%= form_group(form, @payment, :invoice_id, :text_field) %>

        <%= form_group(form, @payment, :notes) %>

<%= form.submit class: "btn btn-company-primary" %>

<% end %>

<% content_for :footer_scripts do %>
  
$(document).ready(function(){
  flatpickr('#payment_paid_on',
    {
      altInput: true,
      altFormat: 'F j',
    }
  );
  
  if ($('#payment_job_id') == null){
    $('#invoice_select_container').hide();
  }
  else {
    new QuerySelect("invoice_select",
      `/jobs/${$('#payment_job_id').val()}/search_invoices`,
      function(params) {return {q: {invoice_display_number_eq: params.term}}},
      function (data) {
        // Transforms the top-level key of the response object from 'items' to 'results'
        return { results: $.map(data, function (val) { return { "id": val.id, "text": val.title }})}
      },
      function (evt){
        if (evt.currentTarget.value != null && evt.currentTarget.value.trim !== "")
          $('#payment_invoice_id').val(evt.currentTarget.value);
    });
  }

  new QuerySelect("job_select",
    '/jobs.json',
    function(params) {return {q: {id_eq: params.term}}},
    function (data) {
      // Transforms the top-level key of the response object from 'items' to 'results'
      return { results: $.map(data, function (val) { return { "id": val.id, "text": val.title }})}
    },
    function (evt){
      $('#payment_job_id').val(evt.currentTarget.value);
      if (evt.currentTarget.value){
        $('#invoice_select_container').show();
      }
      else{
        $('#invoice_select_container').hide();        
      }
      $('#invoice_select').val(null).trigger('change');
        new QuerySelect("invoice_select",
          `/jobs/${evt.currentTarget.value}/search_invoices`,
          function(params) {return {q: {invoice_display_number_eq: params.term}}},
          function (data) {
            // Transforms the top-level key of the response object from 'items' to 'results'
            return { results: $.map(data, function (val) { return { "id": val.id, "text": val.title }})}
          },
          function (evt){
            if (evt.currentTarget.value != null && evt.currentTarget.value.trim !== "")
              $('#payment_invoice_id').val(evt.currentTarget.value);
        });
  });

  let payment_job_id = '<%=@payment.job_id%>'
  let invoice_job_id = '<%=@payment.invoice_id%>'

  if (payment_job_id != null && payment_job_id.trim() !== "")
    $("#payment_job_id").val(payment_job_id)

  if (invoice_job_id != null && invoice_job_id.trim() !== "")
    $("#payment_invoice_id").val(invoice_job_id)

});

<% end %>

json.extract! payment, :id, :paid_on, :payment_type, :created_at, :updated_at
json.url payment_url(payment, format: :json)

create post
<%= react_component 'seo/SEOForm', invoice: @invoice.to_json, images: @invoice&.customer&.get_images %>

            Invoice
            <%= "##{@invoice.display_number}"%><%=" for  Job #{@invoice.job&.id}".html_safe unless @invoice.job.nil?%><%= ", to #{@invoice.service_to&.full_name}".html_safe unless @invoice.service_to.nil?%>

<%# TODO: Determine if there's an invoice template attached to this invoice, see if that invoice template has an image attached so that we can pass in that image as logo instead of the default business logo %>

<%= react_component 'invoices/InvoiceEditPage', invoice_data(true)%>

<%= content_for :footer_scripts do %>
 
        $(function(){
            <%= render partial: "invoice_to_visibility.js.erb"%>
        })   
    
<% end %>

<%=@invoice.invoice_type%>#<%= @invoice.display_number %><%= " for Job #{@invoice.job&.id}".html_safe unless @invoice.job.nil? %><%= ", to #{ @invoice.service_to&.full_name }".html_safe unless @invoice.service_to.nil?%>

             Email with Options

          /pay?secret_key=<%=@invoice.secret_key%>&amount=half" title="Pay Half" class="dropdown-item">
              Pay Half with Stripe

          invoice_id=<%=@invoice.id%>" title="Custom Payment" class="dropdown-item">
              Custom Payment

          /payments" title="View Payments" class="dropdown-item">
              View Payments

          <%= react_component 'invoices/MarkInvoiceAsPaidIcon', {invoiceId: @invoice.id} %>
          .pdf" title="Download" class="dropdown-item" target="_blank">
             Download

          " data-method="DELETE" data-confirm="Are you sure?" title="Delete" class="dropdown-item">
             Delete

          ')">
                 Refund Card

          <% if @invoice.invoice_type == "Estimate" %>
          /copy?convert_to_invoice=true" title="Convert to Estimate" class="dropdown-item">
             Convert to Invoice

          <% end %>
          <% if current_business.enable_seo_posts %>

          " title="Convert to Estimate" class="dropdown-item">
             Post this Job

          <% end %>

    /edit" title="Edit">

<% if %>

<%= react_component 'invoices/EmailInvoiceIcon', {invoiceId: @invoice.id } %>

<% end %>

    /pay?secret_key=<%=@invoice.secret_key%>" title="Pay Online Now">

<% if @invoice.business.authenticated_with_quickbooks? && @invoice.quickbooks_id.blank?%>

      <%= image_tag "quickbooks-assets/C2QB_white_btn_sm_default.png", size: "42x42"%>

<% elsif @invoice.quickbooks_id != nil %> <%#invoice already in quickbooks.%>

    <%= image_tag "quickbooks-assets/C2QB_white_btn_sm_default_disabled.png", size: "42x42"%>

' data-evaluated-url='' style="font-size: 50%"> Resync QB Token

<% end %>

<% if @invoice.was_delivered %>

<%= @invoice.invoice_type %> was delivered on: <%= @invoice.sent_on %>

<% end %>

<% unless @invoice.quickbooks_error.blank? %>

Quickbooks Error: "<%= @invoice.quickbooks_error %>"

<% end %>

<%# TODO: Determine if there's an invoice template attached to this invoice, see if that invoice template has an image attached so that we can pass in that image as logo instead of the default business logo %>
<%= react_component 'invoices/InvoiceDocument/InvoiceDocument', invoice_data(false)%>

<%= render :partial => 'invoices/invoice_img_gallery', locals: {invoice: @invoice, editable: false} %>

<% content_for :footer do %>
<%= render :partial => 'invoices/emailmodal', :locals => {invoice: @invoice }%>
<% end %>

<% content_for :footer_scripts do %>

    $(function(){
      $('#sync_with_quickbooks_button').on('click', function(){
        $.post({url: "/invoices/<%=@invoice.id%>/push_to_quickbooks",
          success: function(data){
            gritterSuccess("Attempting..", "Invoice Attempted to Push to Quickbooks");
            location.reload();
          },
          error: function(data){
            console.log(data);
            gritterError("Couldn't Push to Quickbooks", "Invoice Couldn't Be Pushed to Quickbooks");
          }});
        });
      });
  
<% end %>

Add Product/Service

            Invoice
            <%= "##{@invoice.display_number}"%><%=" for  Job #{@invoice.job&.id}".html_safe unless @invoice.job.nil? %><%= ", to #{@invoice.service_to&.full_name}".html_safe unless @invoice.service_to.nil?%>

<%# TODO: Determine if there's an invoice template attached to this invoice, see if that invoice template has an image attached so that we can pass in that image as logo instead of the default business logo %>
<%= react_component 'invoices/InvoiceEditPage', invoice_data(true)%>

<%= render :partial => 'invoices/invoice_img_gallery', locals: {invoice: @invoice, editable: true} %>

<%= content_for :footer do %>
<%= render :partial => 'shared/images_upload_modal', locals: { path: upload_invoice_image_url, model: 'invoice', is_remote_true: true } %>
<% end %>
<%= content_for :footer_scripts do %>
 
        $(function(){
            <%= render partial: "invoice_to_visibility.js.erb"%>
        })
    
<% end %>

json.array! @invoices, partial: 'invoices/invoice', as: :invoice

<%= @invoice.short_title %> for <%= @invoice.customer.full_name %>

Sign Below

<%# render :template => 'invoices/_invoice.html.erb', :locals => { :editable => false, :show_payment_link => false } %>
<%= react_component 'invoices/InvoiceDocument/InvoiceDocument', invoice_data(false)%>

<%# TODO: When we submit this form, we're not getting the signature param coming through %>

Please sign and hit "Save Signature" to continue

<%= form_for @invoice, :url => url_for(:controller => 'invoices', :action => 'accept_signature'), method: :post do |form| %>

Sign Above

        Clear Signature
        <%# Submit %>

Save Signature

    <% if !@secret_key.blank? %>
    <%= hidden_field_tag 'secret_key', @secret_key %>
    <% end %>
<% end %>

<%= content_for :footer_scripts do %>
<% unless @invoice.business.visitor_device_info_auth_token.blank? %>
 
      const atk = "<%=@invoice.business.visitor_device_info_auth_token%>";
      const dmn = "<%=ENV["BASE_URL"]%>";

      // Check if fr_guid exists in localStorage
      let frGuid = localStorage.getItem('fr_guid');

      if (!frGuid) {
        // Generate a new GUID using crypto.randomUUID() and append "-42"
        frGuid = `${crypto.randomUUID()}-42`;

        // Set the new GUID in localStorage with the key fr_guid
        localStorage.setItem('fr_guid', frGuid);
        
        console.log('New fr_guid:', frGuid);
      } else {
        console.log('Existing fr_guid:', frGuid);
      }

      const data = {
        user_agent_raw: navigator.userAgent,
        referrer: document.referrer,
        url: window.location.href,
        device_width: window.screen.width.toString(),
        device_height: window.screen.height.toString(),
        device_os: navigator.platform,
        os_version: navigator.userAgentData ? navigator.userAgentData.platform : 'Unknown',
        browser_version: navigator.userAgentData ? navigator.userAgentData.brands.map(brand => `${brand.brand} ${brand.version}`).join(', ') : 'Unknown',
        browser: navigator.userAgentData ? navigator.userAgentData.brands[0].brand : 'Unknown',
        user_cookie_guid: frGuid,
        auth_token: atk,
      };

      // console.log("Sending data: " + data);
      // console.log(JSON.stringify(data));

      fetch(`${dmn}/visitor_device_infos.json`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(data),
      })
        .then(response => {
          console.log("FR - made it");
          // Handle the response from the server
        })
        .catch(error => {
          console.log("FR - didn't make it");
          // Handle any errors
        });
    
    <% end %>
    <%= javascript_include_tag "pay-invoice-signature.js" %>
    <% if !@invoice.signature.nil? %>

      $(function(){
        // Uncaught ReferenceError: setSignatureToBeEdited is not defined
            const checkFunctionInterval = setInterval(() => {
                if (typeof setSignatureToBeEdited === 'function') {
                    setSignatureToBeEdited('<%=@invoice.signature%>');
                    clearInterval(checkFunctionInterval);
                }
            }, 100); // Check every 100ms

        // document.getElementById('submit-signature').addEventListener('click', function () {
        
        //Here is where we can submit a POST request??

        // signaturePad.clear();
        // disablePayment(); // we don't want them to be able to pay if they just cleared the signature, because there's no signature now haha.
    // });
      })
    
    <% else %>

      $(function(){
          disableSignButtonIfNoSignature(); // call this after we set the signature
      });
    
    <% end %>
<% end %>

<%= react_component 'shared/IndexPage', {
  title: "Payments",
  attributes: ["Amount", "Paid On", "Type", "Invoice", "Notes"],
  data: @payments.map {|payment| [payment.id, payment.amount.nil? ? "$0.00" : format("$%.2f", payment.amount), payment.paid_on.nil? ? nil : payment.paid_on.strftime("%B %d, %Y"), payment.payment_type, !payment.invoice.nil? ? {title: payment.invoice.title, url: url_for(payment)} : nil, payment.notes]},
  basePath: '/payments'} %>

<%=customer.full_name%>

<% if !customer.default_location&.display_address&.blank? && !customer.default_location&.display_address&.tr(',', '').blank? %> <%# We don't want to display locations that have only commas in them.%>
    <%= customer.default_location&.display_address %>

<% end %>
<% if !customer.email&.blank? %>
    <%= customer.email %>

<% end %>
<% if !customer.phone&.blank?%>
    <%= number_to_phone(customer.phone) %>

<% end %>

json.(@invoice, :id, :invoice_type, :invoice_display_number, :notes, :invoice_to_id)

<% invoice = defined?(invoice) ? invoice : nil %>
<% if invoice.class.reflect_on_all_associations.map(&:name).include?(:images_attachments) %>

            <% unless invoice.images.nil? %>
                <% invoice.images.includes(:blob).each do |i| %>
                    <%= render :partial => 'shared/gallery_images',
                        locals: { params: {i: i, editable: editable, delete_path: "/invoices/#{invoice.id}/image"}}
                    %>
                <% end %>
            <% end %>

<% end %>

<% @amount_without_surcharge = @amount_to_pay.nil? ? @invoice.amount_due : @amount_to_pay.to_f %>

<%
  if @business.stripe_enabled
    @amount = @surcharge_customer ? total_surcharge_amount(@amount_without_surcharge, @app_percent_fee) : @amount_without_surcharge #Stripe Amount
    @payment_gateway_name = 'stripe'
  else
    @amount = @amount_without_surcharge #* 1.03 + 0.50 #IBX Amount
    @payment_gateway_name = 'ibx'
  end
%>

<% if @invoice.business.has_setup_stripe_payments? %>

<% if !@invoice.paid_in_full? && @invoice.amount_due >= 0.50 || (@amount_without_surcharge >= 0.50)%> <%# The 0.50 cents cut off is because stripe can't process anything less than 50 cents.%>
  <%= form_for @invoice, :url => url_for(:controller => 'invoices', :action => 'accept_payment'), method: :post do |form| %>

              Amount: <%= format("$%.2f", @amount) %> <% if @surcharge_customer %> * <% end %>

Please sign at the bottom to make a payment.

        "> <%# We have to pass on the amount without surcharge because we need to separate my application fee vs. stripe's fee, and we need the original amount do to that.%>
        ">
        <% if flash[:error] %>

<%= flash[:error] %>

        <% end %>
        <% if @business.stripe_enabled %>
          <%# Show Stripe Checkout IF this business setting is enabled for Stripe. %>
          "
            data-description="Pay for this invoice"
            data-amount="<%= to_cents(@amount)%>" <%# Stripe needs this to be in cents %>
            data-email="<%=@invoice.customer_to_invoice&.email%>"
            data-locale="auto">

        <% elsif @business.payroc_ibx_enabled%>
          <%# This is for our IBX PayRoc Processing Button. %>
          <%#
           class="ibx-checkout-modal"
          data-merchant-token="nsc/nXJtn5Io9SwbKKkwvDOEpGhQ8OZH4fDWhIREZ2BvGpZqzZvmnCf+Vyk6wwkB"
          data-name="Perform Heating and Cooling"
          data-description="Payment Guide"
          data-amount="1299">
          
          %>

Payment

<% end %>

<%= react_component 'invoices/InvoiceDocument/InvoiceDocument', invoice_data(false)%>

      <% if !@secret_key.blank? %>
        <%= hidden_field_tag 'secret_key', @secret_key %>
      <% end %>
      <% if @surcharge_customer %>

* By paying online, you agree to paying an additional amount of approximately ~<%= format("%.2f", (2.9 + (@app_percent_fee*100))) %>% for our software's convenience fee.

** Towards Invoice: <%= format("$%.2f", @amount_without_surcharge) %>

      <% end %>
      <% if @invoice.business.force_signature_on_payment %>

Sign Above

Clear

      <% end %>
  <% end %>
  <% elsif @signed_in %>

        '>

This invoice has been paid in full by the customer.

    <%= render :template => 'invoices/_invoice.html.erb', :locals => { :editable => false, :show_payment_link => false } %>

  <% else %>

Thank you for your payment to <%=@business_name%>!
This invoice has been paid in full.

    <%= render :template => 'invoices/_invoice.html.erb', :locals => { :editable => false, :show_payment_link => false } %>
  <% end %>
<% elsif @signed_in%>

Customer's View of this <%= @invoice.invoice_type.titleize %>

<%= render :template => 'invoices/_invoice.html.erb', :locals => { :editable => false, :show_payment_link => false } %>
<% else %>
<%= render :template => 'invoices/_invoice.html.erb', :locals => { :editable => false, :show_payment_link => false } %>
<% end %>

<%# TODO: Re-enable this so users can see pictures attached to specific invoices. %>
<%#

%>
<%#= render :partial => 'invoices/invoice_img_gallery', locals: {invoice: @invoice, editable: false} %>
<%#

%>

<%= content_for :footer_scripts do %>

<% unless @invoice.business.visitor_device_info_auth_token.blank? %>
 
      const atk = "<%=@invoice.business.visitor_device_info_auth_token%>";
      const dmn = "<%=ENV["BASE_URL"]%>";

      // Check if fr_guid exists in localStorage
      let frGuid = localStorage.getItem('fr_guid');

      if (!frGuid) {
        // Generate a new GUID using crypto.randomUUID() and append "-42"
        frGuid = `${crypto.randomUUID()}-42`;

        // Set the new GUID in localStorage with the key fr_guid
        localStorage.setItem('fr_guid', frGuid);
        
        console.log('New fr_guid:', frGuid);
      } else {
        console.log('Existing fr_guid:', frGuid);
      }

      const data = {
        user_agent_raw: navigator.userAgent,
        referrer: document.referrer,
        url: window.location.href,
        device_width: window.screen.width.toString(),
        device_height: window.screen.height.toString(),
        device_os: navigator.platform,
        os_version: navigator.userAgentData ? navigator.userAgentData.platform : 'Unknown',
        browser_version: navigator.userAgentData ? navigator.userAgentData.brands.map(brand => `${brand.brand} ${brand.version}`).join(', ') : 'Unknown',
        browser: navigator.userAgentData ? navigator.userAgentData.brands[0].brand : 'Unknown',
        user_cookie_guid: frGuid,
        auth_token: atk,
      };

      // console.log("Sending data: " + data);
      // console.log(JSON.stringify(data));

      fetch(`${dmn}/visitor_device_infos.json`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(data),
      })
        .then(response => {
          console.log("FR - made it");
          // Handle the response from the server
        })
        .catch(error => {
          console.log("FR - didn't make it");
          // Handle any errors
        });
    
<% end %>
<% end %>

<% if @invoice.business.force_signature_on_payment %>
  <%= content_for :footer_scripts do %>
    <%= javascript_include_tag "pay-invoice-signature.js" %>
    <% if !@invoice.signature.nil? %>

      $(function(){
        setSignatureToBeEdited('<%=@invoice.signature%>');
      })
    
    <% else %>

      $(function(){
          disablePaymentIfNoSignature(); // call this after we set the signature
      });
    
    <% end %>
  <% end %>
<% end %>
<% if @business.payroc_ibx_enabled && !@business.ibx_merchant_token.nil? %>
  <% if Rails.env.production? && !ENV["IBX_TEST"] %>

  <% else %>

  <% end %>


    var options = {
      merchantToken: "<%=@business.ibx_merchant_token%>",
      name: '<%= @business.name || "Field Rocket"%>',
      description: 'Pay for this invoice',
      onToken: function(data) {
        $("#ibx-button-outer").addClass("is-loading");
        $('#custom-button').prop('disabled','true');
        $('#ibx_payment_amount').val('<%= @amount %>');
        $('#ibx_card_token').val(data.tokens[0]);
        document.getElementById("signature-pad-value").value = document.getElementById("signature-pad").toDataURL();
        $('#edit_invoice_<%= @invoice.id %>').submit();
      }
    }

    var handler = ibx.Checkout.init(options)

    document.getElementById('custom-button').addEventListener('click', function (event) {
      handler.render({
        amount: "<%= to_cents(@amount) %>"
      })
      event.preventDefault()
    })
  
<% end %>

        " title="New">

<%=@invoice_type%>

        <%= link_to payments_path, title: 'View All Payments' do %>

        <% end %>

        <%= link_to overdue_invoices_path, title: 'Overdue Invoices' do %>

        <% end %>

<%= react_component 'shared/DateRangePicker', {
        enableToggle: true,
        startDateId: 'invoices_start',
        endDateId: 'invoices_end',
        startDate:  @start_date,
        endDate:  @end_date,
        path:  invoices_path,
    }
%>

<%# react_component 'invoices/InvoiceTracking', {outstandingInvoices: @invoices.map {|i| i.get_invoice_preview} } %>
<%= react_component 'invoices/Table', {sortingUrl: 'invoices', tableData: @invoices.map {|i| i.get_invoice_preview}}%>
<%= render partial: 'shared/paginate', locals: {resource: @invoices} %>

<%= content_for :footer_scripts do %>

        function dateRangePicker() {
            $('#date_range_picker').toggle();
        }
    
<% end %>

<% if controller.request.format.symbol != :html %>

     <%= @invoice.title %>

        @media (max-width:500px) {
            .invoice-box {
                float: left;
            }
        }

        .invoice-box {
            max-width: 900px;            
            font-size: 16px;
            line-height: 24px;
            font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
            color: #555;
        }

        .invoice-box table {
            width: 100%;
            line-height: inherit;
            text-align: left;
        }

        .invoice-box table td {
            vertical-align: top;
        }

        .invoice-box table tr td:nth-child(2) {
            text-align: left;
        }        

        .invoice-box table tr.top table td {
            padding-bottom: 20px;
        }

        .invoice-box table tr.top table td.title {
            font-size: 45px;
            line-height: 45px;
            color: #333;
        }

        p {
            margin-bottom: 0;
        }

        .invoice-box table tr.information table td {
            padding-bottom: 40px;
        }

        .invoice-box table tr.heading td {
            background: #eee;
            border-bottom: 1px solid #ddd;
            font-weight: bold;
        }

        .invoice-box table tr.details td {
            padding-bottom: 20px;
        }        
        
        .invoice-box table tr.line-item td {
            border-bottom: 1px solid #eee;
            text-align: left;
            width:1%%;
        }        

        .invoice-box table tr.line-item.last td {
            border-bottom: none;
        }

        .invoice-box table tr.total td:nth-child(2) {
            border-top: 2px solid #eee;
            font-weight: bold;
        }

        /** RTL **/
        /* .rtl {
            direction: rtl;
            font-family: Tahoma, 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
        }

        .rtl table {
            text-align: right;
        }

        .rtl table tr td:nth-child(2) {
            text-align: left;
        } */

        .line-item-price {
            white-space: no-wrap;
        }

        /* Bootstrap CSS necessary for email. */
        .btn-company-success {
            color: #fff;
            background-color: #28a745;
            border-color: #28a745;
        }

        .btn-secondary {
            color: #fff;
            background-color: #6c757d;
            border-color: #6c757d;
        }

        .btn-dark {
            color: #fff;
            background-color: #343a40;
            border-color: #343a40;
        }

        .btn {
            text-decoration: none;
            display: inline-block;
            font-weight: 400;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            border: 1px solid transparent;
            padding: 0.375rem 0.75rem;
            font-size: 1rem;
            line-height: 1.5;
            border-radius: 0.25rem;
            transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        }

        .text-center {
            text-align: center !important;
        }

        .text-label {
        font-size: .9rem;
        text-transform: uppercase;        
        color: #939FAD;        
        margin-bottom: .5rem;
        font-weight: bold;
        }
    

<% end %>
    <%= @invoice&.job&.id %>
    <%= @invoice&.business_id %>
    <%= @invoice&.my_index %>
    <%
        #These help us not have to put each local in the render template call (can have undefined locals without crashing).
        editable = defined?(editable) ? editable : nil
        show_payment_link = defined?(show_payment_link) ? show_payment_link : nil
        show_download_link = defined?(show_download_link) ? show_download_link : nil
    %>

                                    <% if @invoice.business.logo.attached? %>
                                    <%= image_tag @invoice.business.logo, style: "max-width: 75%; max-height: 75%" %>
                                    <% else %>

                                        style="width:100%; max-width: 75%; max-height: 75%">

                                    <% end %>

                                            <%= @invoice.invoice_type %>

                                         Number:
                                         contenteditable="true"<% end %>>
                                            <%= @invoice.invoice_display_number %>

<% if editable %>

                                             Date:
                                            " />

                                            style="display:none"
                                            <% end %>
                                        >

                                                <%="#{invoice_due_text(@invoice)}:"%>
                                                " />

                                <% else %>
                                     Date:

                                        <%= @invoice.issued_on.strftime("%B %d, %Y")%>




                                        style="display:none"
                                        <% end %>
                                    >
                                        <%="#{invoice_due_text(@invoice)}:"%>

                                            <%= @invoice.due_on.strftime("%B %d, %Y")%>


                                <% end %>

                                     <%= @invoice.business.name %>

                                      <%= number_to_phone(@invoice.business.phone)%>

                                      <%= @invoice.business.email %>

                                     <%= "#{@invoice.business.street_address}, #{@invoice.business.city}, #{@invoice.business.state} #{@invoice.business.zip_code}" %>
                                    <% unless @invoice.business.notes.blank? %>

<%="#{@invoice.business.notes}"%>
                                    <% end %>

                                    <% if !@invoice.job&.owner.nil? %>

                                         Customer Rep:  <%= @invoice.job&.owner.full_name%>

                                         Phone:  <%= @invoice.sales_rep_number_display %>

                                         Email:  <%= @invoice.job&.owner&.email %>

<% end %>

                            <% if !editable %>




                                <%if @invoice.customer_to_invoice %>

   <%= @invoice.invoice_type %> To:

                                        <%= render partial: "invoices/customer_info_for_invoice", locals: {customer: @invoice.customer_to_invoice }%>

<%end%>

<% if @invoice.should_invoice_other_customer? && @invoice.service_to %>

   Service To:

                                        <%= render partial: "invoices/customer_info_for_invoice", locals: {customer: @invoice.service_to }%>

<% end %>

<% if @invoice.is_customer_address_different_than_job_address? && @invoice.job&.location&.display_address != nil %>

Service Address:

                                        <%= "#{@invoice.job&.location&.display_address}"%>

                                <% end %>

                            <% else %>



                                <%if !@invoice.customer_to_invoice.nil? %>

                                          <%= @invoice.invoice_type%>  To:

                                         <%= @invoice.customer_to_invoice&.full_name %>



                                            <% if !@invoice.customer_to_invoice&.display_address.blank? %>
                                                <%= @invoice.customer_to_invoice.display_address %>
                                            <% end %>


                                         <%= @invoice.customer_to_invoice.email %>

                                         <%= number_to_phone(@invoice.customer_to_invoice.phone)%>

                                <%end%>

style="display:none" <% end %> >
                                     Service To:

                                     <%= @invoice.service_to&.full_name %>



                                        <% if !@invoice.service_to&.display_address.blank? %>
                                            <%= @invoice.service_to.display_address %>
                                        <% end %>


                                     <%= @invoice.service_to&.email %>

                                     <%= number_to_phone(@invoice.service_to&.phone)%>

                                <% unless @invoice.job.nil? %>

style="display:none" <% end %>>

Service Address:

<%= "#{@invoice.job&.display_address}"%>

                                <%end%>

                            <% end %>

Notes

                                 contenteditable="true" <% end %>
                                    <% if @invoice.notes.blank? %> placeholder="Enter Services Here.."> ...
                                <% else %>
                                >
                                <% @invoice.notes.split("\n").each do |line| %>
                                <%= line %>

                                <% end %>

                                <% end %>

                    Category


                    Description


                    Product ID


                    Quantity


                    Price

                <% if @invoice.business.enable_total_from_multiplying_by_quantity %>

                    Amount

                <% end %>
                <% if editable %>




                <% end %>

             <%# IMPORTANT: line-item-anchor-row class used in invoices.js function addLineItem() as an element used to add line items in the right place on the page. %>
            <%# Warning: Be very careful when applying updates here. The table row and table data structure must very closely mirror the structure defined in addLineItem in invoices.js %>
            <%# @invoice.line_items.order(position: :desc).each do |li, i| %> <%# Doing these in reverse order because otherwise they show up reverse to the user. This is because rails orders them as the most recently added first in the list. %>
            <%# @invoice.line_items.reverse.each do |li, i| %>
            <% @invoice.line_items.order(position: :desc).each do |li, i| %>
            "> <%# IMPORTANT: line-item class used in invoices.js for creating the line-items JSON array that will be sent to server, and for calculating the total of the invoice to show on page.%>
                ">
                    <% if editable %>
                        "> "><%=li.name%>
                    <% else %>
                        <%= li.name %>
                    <% end %>

                 contenteditable="true" <%end%> class="line-item-description" id="line-item-description-<%=i%>">
                    <%= li.description %>



                 contenteditable="true" <%end%> style="text-align:right" class="line-item-quantity" id="line-item-quantity-<%=i%>">
                    <%= li.quantity %>



                        $ "<%if editable%> contenteditable="true" <%end%>>
                            <%=
                                if li.price != nil
                                    format("%.2f",li.price)
                                end
                            %>



                <% if @invoice.business.enable_total_from_multiplying_by_quantity %>


                        $ ">
                            <%= format("%.2f", li.price * li.quantity) %>



                <% end %>
                <% if editable %>

                <% end %>

            <% end %>


            <%# if (!editable && (@invoice.invoice_type == "Invoice" || @invoice.invoice_type == "Work Order")) %>
                 Paid:  <%= format("$%.2f",@invoice.amount_paid) %>

                     Original Total:  <%= format("$%.2f",@invoice.total_price)%>

            <%# end %>

                    <% if @invoice.business.enable_sales_tax_calculation && @invoice.sub_total_price > 0 && @invoice.sales_tax_amount > 0 %>

                                Subtotal:

                                    <%= format("$%.2f", @invoice.sub_total_price) %>

                                VAT @ <%= @invoice.business.sales_tax * 100 %>%:

                                    <%= format("$%.2f", @invoice.sales_tax_amount) %>

<% end %>

                        <% if @invoice.invoice_type == "Invoice" || @invoice.invoice_type == "Change Order"%>
                            Due:
                        <% else %>
                            Total:
                        <% end %>

                            <%=format("$%.2f",@invoice.amount_due)%>
                            <%# @invoice.invoice_type == "Invoice" ? format("$%.2f",@invoice.amount_due) : format("$%.2f",@invoice.total_price) %>

<% if @invoice.invoice_type == "Invoice" || @invoice.invoice_type == "Estimate" %>

                    <% if @invoice.invoice_type == "Invoice" %>
                        <%= raw(@invoice&.business&.invoice_terms) %>
                    <% else %>
                        <%= raw(@invoice&.business&.estimate_terms) %>
                    <% end %>

        <% end %>
        <% if @invoice.signature %>

Signature:

<%= image_tag @invoice.signature %>

<% end %>

<% if controller.request.format.symbol != :html %>

<% end %>

<% if editable %>
    <%= content_for :footer_scripts do %>

        $(function(){ //hate this duplicate logic.
            $('.line-item-description').keypress((function(e) {return e.which != 13}));
            $('.line-item-description').keypress(maxCharacters);        
            $('.line-item-quantity').keypress(onlyIntegersAllowed);
            $('.line-item-quantity').keyup(sumLineItemTotal);
            $('.line-item-price').keypress(onlyNumbersAllowed);
            $('.line-item-price').keyup(sumLineItemTotal);
            $('.line-item-price').keyup(function(e) {console.log("Keyup")});
            lineItemEventHandlers();
            calibrateLineItemIds();
            setupProductQuerySelectForEachLineItem();
        })
        <%= render :partial => "jobs/job-images.js.erb" %>
    
    <% end %>
<% end %>

<%= form_with(model: invoice, local: true) do |form| %>
<% if invoice.errors.any? %>

<%= pluralize(invoice.errors.count, "error") %> prohibited this invoice from being saved:

<%= message %>

<% end %>

    <%= form.label :was_delivered %>
    <%= form.check_box :was_delivered %>

    <%= form.label :was_paid %>
    <%= form.number_field :was_paid %>

    <%= form.label :notes %>
    <%= form.text_field :notes %>

    <%= form.label :date %>
    <%= form.date_select :date %>

    <%= form.label :due_on %>
    <%= form.date_select :due_on %>

<%= form.submit %>

<% end %>

Hi <%= @user.name %>

Sample mail sent using smtp.

var jobCustomerId = "<%=@invoice.job&.customer&.id%>";
var customerId = "<%=@invoice.invoice_to&.id %>" == "" ? null : "<%=@invoice.invoice_to&.id %>";
var jobId = "<%=@invoice.job&.id%>";

setInvoiceToFields(jobCustomerId);
setServiceToFields(customerId);

$('#documentToDifferentCustomer').change(function(){
    if (this.checked){
        new CustomerSearchSelect("select_different_customer_to_invoice", function (e) {
            let selectedCustomerId = e.currentTarget.value;
            if (selectedCustomerId == jobCustomerId){
                setInvoiceToFields(jobCustomerId);
                setServiceToFields(null);
            }
            else {
                setInvoiceToFields(selectedCustomerId);
                setServiceToFields(jobCustomerId);
            }
        });
        if(<%= @invoice.have_customer%>){
            let whichIdToUse = customerId == null ? jobCustomerId : customerId; //We want to autopopulate the selection based on whether invoice_to is null or not. If it is null, use the invoice's job's customer id. If it's not null, use the invoice_to customer id.

            $.get({
                url: `/customers/${whichIdToUse}.json`,
                success: function(data){
                    SetSelect2Option('select_different_customer_to_invoice', data["full_name"], whichIdToUse)
                }
            })
        }
        $('#select_different_customer_to_invoice').show();
        $('#invoice-service-address').show();
    }
    else {
        $('#select_different_customer_to_invoice').hide();
        $('#select_different_customer_to_invoice').val(null).trigger('change');
        setInvoiceToFields(jobCustomerId);
        setServiceToFields(null);
        $("#select_different_customer_to_invoice").select2('destroy');
    }
});

if (customerId != null){ // <%# If invoice_to is already set, (most likely because we're editing an invoice where invoice_to is different than service_to), then we want to make sure the checkbox and search bar have the correct value. %>
$('#documentToDifferentCustomer').trigger('click');
}

function setInvoiceToFields(customerId){
    if (customerId == null || customerId == ""){
        return;
    }

    console.log(`Setting invoiceTo fields with given customer id ${customerId}`);
    $.get({
        url: `/customers/${customerId}.json`,
        success: function(data){
            $('#invoice-to-name').text(data["full_name"]);
            $('#invoice-to-display-address').text(data["default_location"]["display_address"]);
            $('#invoice-to-email').text(data["email"]);
            $('#invoice-to-phone').text(formatPhoneNumber(data["phone"]));
        }
    });
}

/**
* This function sets the 'service to' section's address to what the job's address is.
*/
function setServiceAddressToJobAddress(jobId){
    console.log("setServiceAddressToJobAddress called!");
    $.get({
        url: `/jobs/${jobId}.json`,
        success: function(data){
            $('#service-to-display-address').text(data["display_address"]);
        }
    })
}

Total Overdue Amount:

<%= react_component 'invoices/Table', {sortingUrl: 'overdue_invoices', tableData: @invoices.map {|i| i.get_invoice_preview}}%>
<%= render partial: 'shared/paginate', locals: {resource: @invoices} %>

<%= content_for :footer_scripts do %>

        $(document).ready(function () {
            $('#total_overdue_amount').html(formatCurrency(<%= @total_overdue_amount %>));
        });
    
<% end %>

<%= render partial: "invoice", locals: {id: "email_body_text_editor", placeholder: "Enter Email Body Here", content: raw(@email_template.body)}%>

Error reading file: U_STRING_NOT_TERMINATED_WARNING

<% invoice_type = defined?(invoice) ? invoice.invoice_type : nil %>

<% content_for :modal_header, :flush => true do %>

Send <%= "#{invoice_type} " %>Email

<% end %>

<% content_for :modal_body, :flush => true do %>

<%= form_with url: deliver_invoice_path(:format => :json), remote: true, :id => 'email_form' do %>

        <%= label_tag(:email_recipients, "Email Recipient:", :class => "text-label") %>

            <%= render :partial => 'jobs/relevant_emails', :locals => {job: @invoice.job, invoice: @invoice}%>

        <%= label_tag(:email_ccs, "Email CC's:", :class => "text-label") %>

            <%= render :partial => 'jobs/relevant_emails', :locals => {job: @invoice.job, invoice: @invoice}%>

        <%= label_tag(:email_template, "Email Template:", :class => "text-label") %>

<%= label_tag(:email_subject, "Subject:", :class => "text-label") %>
<%= text_field_tag(:email_subject, nil, :class => 'form-control') %>

<%= label_tag(:editor, "Body:", :class => "text-label") %>

<%# WARNING: This image selection code is now duplicated in shared/_image_selection.html.erb. TODO: We should render image_selection.html.erb here, rather than having duplicate code. We need to keep these in sync to follow DRY principle. %>

        <% unless @invoice.job.nil? %>
            <% @invoice.customer.all_images.each_with_index do |img, index| %>

]" value="<%=img.id%>"/>

<%="#{img.blob.filename.to_s[0,4]}...#{img.blob.filename.to_s.split('.').last}"%>

            <% end %>
        <% end %>

<%# ^^ WARNING: This image selection code is now duplicated in shared/_image_selection.html.erb. TODO: We should render image_selection.html.erb here, rather than having duplicate code. We need to keep these in sync to follow DRY principle. %>

<%# render :partial => 'jobs/job_img_gallery', locals: {job: @invoice.job}%>

<%= submit_tag("Send", :id => "submitEmail", :class => "btn btn-company-primary") %>

<% end %>
<% end %>
<%= render :partial => 'shared/generic_modal', :locals => {modal_id: "send_email_modal"} %>

<%= content_for :footer_scripts do %>
<%= stylesheet_link_tag 'gallery-clean', media: 'all' %>
<%= stylesheet_link_tag 'baguetteBox', media: 'all' %>
<%= javascript_include_tag 'baguetteBox' %>

    $(document).ready(function () {
        $('#email_subject').val("<%= @invoice.title %>");

        $('#email_recipients_select').select2({
            tags: true,
            tokenSeparators: [',', ' '],
            selectOnClose: true
        });

        new QuerySelect('email_template_select',
            '/email_templates.json',
            RansackSearch('name_cont'),
            SelectResultsTransform('name'),
            function(e){
                let selectedEmailTemplateId = e.currentTarget.value;
                $.get({
                    url: `/email_templates/${selectedEmailTemplateId}.json`,
                    success: function(data){
                        let body = data["body"].replace('{{half_payment_link}}', '<a href="<%="#{ENV["BASE_URL"]}/invoices/#{@invoice.id}/pay?amount=half&secret_key=#{@invoice.secret_key}"%>">Payment Link</a>');
                        body = body.replace('{{payment_link}}', '<a href="<%="#{ENV["BASE_URL"]}/invoices/#{@invoice.id}/pay?secret_key=#{@invoice.secret_key}"%>">Payment Link</a>');
                        body = body.replace('{{name}}', '<%=@invoice.customer_name%>')
                        body = body.replace('{{signature_link}}', '<a href="<%="#{ENV["BASE_URL"]}/invoices/#{@invoice.id}/sign?secret_key=#{@invoice.secret_key}"%>">Signature Link</a>')
                        SetQuillHtml('editor', body);
                    }
                });
            }
        );

        $('#email_recipients_select').on('change', function(e){
            $('#email_recipients').val($('#email_recipients_select').val());
        });

        $('#email_ccs_select').select2({
            tags: true,
            tokenSeparators: [',', ' '],
            selectOnClose: true
        });

        $('#email_ccs_select').on('change', function(e){
            $('#email_ccs').val($('#email_ccs_select').val());
        });

        var quill = new Quill('#editor', {
            theme: 'snow'
        });

        $('#submitEmail').click(function(e){
            $('#email_body').val($('#editor')[0].children[0].innerHTML);
            $('.loader').show();
        });
        
        $("form").on("ajax:success", function(event){
            var detail = event.detail;
            var data = detail[0], status = detail[1], xhr = detail[2];
            $('.loader').hide();
            ForceCloseModal('send_email_modal');
            gritterSuccess("Success", "Sent Email");
        });

        $("form").on("ajax:error", function(event){
            // Was having an issue getting the data and everything out when submitting the form this way, found this page: 
            // https://stackoverflow.com/questions/43827441/how-to-get-data-from-response-of-event-ajaxerror-in-rails-5-1
            var detail = event.detail;
            var data = detail[0], status = detail[1],  xhr = detail[2];
            $('.loader').hide();
            var needToAuthenticateGmail = xhr.status == 511
            if (needToAuthenticateGmail) {
                gritterError("Need to authenticate Gmail", "Redirecting you to authenticate gmail", "10000");
                var uri = data["response"]["google_redirect_uri"];
                console.log(`Redirecting to ${uri}`);
                window.location = uri;
            }
            else {
                console.log(data);
                showErrorForm(event);
                gritterError("Couldn't send email", "Does the customer have a valid e-mail address? Check the email and try again", "10000");
            }
        });
    });

<% end %>

$('.edit-page-invoice-images').html(`<%= render :partial => 'invoices/invoice_img_gallery', locals: {invoice: @invoice, editable: true} %>`);
<%= render :partial => "jobs/job-images.js.erb" %>
$('#img-upload-form')[0].reset();
$('#images-upload-modal').modal('hide');

<%
@customer = Customer.new
@customer.locations.build #Create location for the form.
%>

<%= content_for :modal_header, flush: true do %>

New Customer

<% end %>
<%= content_for :modal_body, flush: true do %>
<%= render "customers/form", remote: true %>
<% end %>

<%= render :partial => "shared/generic_modal", locals: {modal_id: 'new_customer_modal'} %>

<% @customer_contact = CustomerContact.new %>

<%# https://stackoverflow.com/a/31281336 %>
<%# Have to call content_for before rendering partial, which I don't understand fully. %>

<% content_for :modal_header, :flush => true do %>

Customer Contact

<% end %>

<% content_for :modal_body, :flush => true do %>
    <%= form_with model: @customer_contact, id: :new_customer_contact_form, remote: true, format: :json do |f| %>
        <%= form_group(f, @customer_contact, :first_name) %>
        <%= form_group(f, @customer_contact, :last_name) %>
        <%= form_group(f, @customer_contact, :phone, :phone_field) %>
        <%= form_group(f, @customer_contact, :email) %>
        <%= form_group(f, @customer_contact, :notes) %>

        <% if defined?(customer_id) && defined?(business_id) %>
            <%= f.text_field :customer_id, :value => customer_id %>
            <%= f.text_field :business_id, :value => business_id %>
        <% else %>
            <%= f.text_field :customer_id %>
            <%= f.text_field :business_id %>
        <% end %>

Cancel

<%= f.submit :Save, id: :submitCustomerContact, class: "btn btn-company-primary" %>

<% end %>
<% end %>

<%= render :partial => 'shared/generic_modal', :locals => {modal_id: "new_customer_contact_modal"}%>

<%= content_for :footer_scripts do %>
<%= javascript_include_tag "customer_contacts.js" %>
<% end %>

New Customer

<%= render 'form', customer: @customer%>

<%= @customer.full_name.titleize %>, #<%= @customer.id %>

    " data-method="delete" data-confirm="Are you sure?" title="Delete">

<% if can? :update, Customer %>

      <%= link_to edit_customer_path(@customer), title: 'Edit' do %>

      <% end %>

<% end %>

    &new_invoice=true">

          " title="Send Email">

<%= @customer.email %>

          " title="Text this Customer">

          " title="Call">

<%= number_to_phone(@customer.phone, area_code: true) %>

          " title="Navigate with Google Maps" target="_blank">

<%= @customer.display_address %>

    <% if !@customer.company.blank? %>

<%= @customer.company %>

    <% end %>
    <% if !@customer.marketing_source.blank? %>

<%= @customer.marketing_source.name %>

    <% end %>

Customer Notes

          <%= react_component 'shared/InplaceEdit',
            attribute: :notes,
            resource: :customers,
            resource_id: @customer.id,
            value: @customer.notes,
            allowNewline: true
            %>

  <%= content_for :accordian_section_title, flush: true do %>

Customer Contacts

<% end %>
<%= content_for :accordian_section_content, flush: true do %>

<%= react_component "contacts/ContactsIndex", contacts: @customer.customer_contacts%>

      New Customer Contact
      <%= content_for :footer do %>
        <%= render :partial => 'shared/images_upload_modal',
        locals: { path: upload_customer_image_url, model: 'customer', is_remote_true: false } %>
        <%= render :partial => 'customers/customer_contact_modal', :locals => {customer_id: @customer&.id, business_id: @customer&.business&.id} %>
      <% end %>

  <% end %>
  <%= render :partial => "shared/accordian_section", :locals => {collapse_id: "collapseTen" }%>

<%= content_for :accordian_section_title, flush: true do %>

Customer Properties

  <% end %>
  <%= content_for :accordian_section_content, flush: true do %>

    <%# react_component "shared/TableDataNotEditable",
      title: "Customer Properties",
      attributes: ["Address", "Make Billing", "Edit"],
      data: @customer.locations.map {|i| [ i.id,
        i.display_address,
        i.is_default? ? "Is Billing" : {url: "/locations/#{i.id}/make_default", icon: 'fa-map-marked'},
        {url: "javascript:void(0)", icon: "fa-pencil-alt", class: "edit_location_modal", dataCustom: i.id}]},
      basePath: '/locations',
      actions: {delete: true}
    %>

<%= react_component "locations/LocationsIndex", locations: @customer.locations%>

      New Property
      <%= content_for :footer do %>
        <%= render :partial => 'locations/location_modal', :locals => {customer_id: @customer&.id} %>
      <% end %>

<% end %>
<%= render :partial => "shared/accordian_section", :locals => {collapse_id: "collapseOne" }%>

  <%= content_for :accordian_section_title, flush: true do %>

Job History

<% end %>

  <%= content_for :accordian_section_content, flush: true do %>
    <%# react_component "jobs/JobIndex", data: @customer.jobs%>
    <%= react_component "shared/TableDataNotEditable",
      title: "Jobs",
      attributes: ["Sales Rep", "Date", "Address", "Job Summary", "Time Clocked"],
      data: @customer.jobs.includes([:owner, :location]).order({created_at: :desc}).map {|j| [
        j.id,
        j.owner&.full_name,
        j.employee_jobs&.first&.start_short,
        {url: "/jobs/#{j.id}", title: j.location&.display_address},
        j.notes&.split('\n')&.first,
        format_time_seconds(j.total_time_tracked_towards_this_job),
      ]},
      basePath: '/jobs'%>

" class="btn btn-company-primary"> Add Job

<% end %>
<%= render partial: "shared/accordian_section", locals: {collapse_id: "collapseTwo"} %>

  <% content_for :accordian_section_title, :flush => true do %>

Estimates/Invoices

  <% end %>
  <% content_for :accordian_section_content, :flush => true do %>

        <%= react_component "shared/TableDataNotEditable",
          title: "Invoices",
          attributes: ["Title", "Original Price", "Amount Due", "Due Date", "Pay w/ Stripe", "Convert to Invoice", "Download"],
          data: @customer.all_invoices.order({due_on: :desc}).map {|i| [
            i.id,
            {url: "/invoices/#{i.id}", title: i.long_title},
            format("$%.2f", i.total_price),
            format("$%.2f", i.amount_due),
            i.due_on.strftime("%B %d, %Y"),
            {url: "/invoices/#{i.id}/pay?secret_key=#{i.secret_key}", iconclass: "fa fa-credit-card fa-2x", hover: "Collect Online"},
            i.invoice_type == "Estimate" ? {url: "/invoices/#{i.id}/copy?convert_to_invoice=true", icon: "fa-copy", hover: "Convert"} : "",
            {url: "/invoices/#{i.id}.pdf", icon: "fa-cloud-download-alt", newtab: true}
          ]},
          basePath: '/invoices'%>

&new_invoice=true" class="btn btn-company-primary"> Create Invoice/Estimate

      <% end %>
      <%= render :partial => "shared/accordian_section", :locals => {collapse_id: "invoices" }%>

<%# react_component "customers/InfoPage", customer: @customer, jobs: @customer.jobs, invoices: @customer.invoices, properties: @customer.locations, contacts: @customer.customer_contacts%>
<%# Navigation Menu: Jobs, Invoices & Estimates, Properties, Contacts.. %>

<%= render :partial => 'shared/customer_img_gallery', locals: {customer: @customer} %>

  <%= content_for :footer_scripts do %>
    <%= stylesheet_link_tag  'gallery-clean', media: 'all' %>
    <%= stylesheet_link_tag  'baguetteBox', media: 'all' %>
    <%= javascript_include_tag 'baguetteBox' %>

      $(function(){
        baguetteBox.run('.tz-gallery',{
          "buttons":true
        });
      })
      <%= render :partial => "jobs/job-images.js.erb" %>
    
  <% end %>

Edit Customer

<%= render partial: 'form', customer: @customer, locals: {remote: false, include_location_form: false} %>

json.array! @customers, partial: 'customers/customer', as: :customer

<%#
@customer = Customer.new
@customer.locations.build #Create location for the form.
%>

<%= content_for :modal_header, flush: true do %>

Messages

<% end %>
<%= content_for :modal_body, flush: true do %>

<%#

%>

8013499925

Tracy McGee

<%#

%>

                                       ×

<%# render "customers/form", remote: true %>
<% end %>

   /*function urlChangeHandler() {
      let src = event.target.value;
      if(src) {
         $('#attached-image').attr('src',url);
         $('#attached-image-container').show();
         $('#image_upload').hide();
      }
   }*/

   function changeHandler(event) {
      let src = event.target.value;
      if(src) {
         let url = window.URL.createObjectURL(event.target.files[0])

         $('#image_avatar_url_id').val('');
         $('#attached-image').attr('src',url);
         $('#attached-image-container').show();
         $('#image_upload').hide();
      }
   }

   function resetImage(event) {
      $("#attached-image-container").hide();
      $("#attached-image").attr("src", '');
      $('#image_avatar').val('')
      $('#image_avatar_url_id').val('');
   }

<%= render :partial => "shared/generic_modal", locals: {modal_id: 'messages_modal'} %>

json.partial! "customers/customer", customer: @customer

json.extract! customer, :id, :first_name, :last_name, :city, :phone, :company, :notes, :state, :street_address, :city, :zip_code, :email, :created_at, :updated_at
json.url customer_url(customer, format: :json)

            ">
            Phone Number:

<%# TODO: Add a form with a phone number and a button to call, then do a POST to the '/call' route with params: phone %>

Customers

<%= react_component 'customers/Index', {tableData: @customers.includes([:customer_contacts]), permissions: permissions_for(Customer), connectedToQuickbooks: false} %>
<%= render partial: 'shared/paginate', locals: {resource: @customers} %>
<% if @contacts && !@contacts.empty? %>

Customer Contacts

<%= react_component "shared/TableDataNotEditable",
    title: "Customer Contacts",
    attributes: ["Name", "Phone", "Email", "Contact For", "Notes"],
    data: @contacts.map {|i| [i.id,
    {url: "customers/#{i.customer&.id}", title: i.full_name},
    number_to_phone(i.phone, area_code: true),
    i.email,
    {url: "customers/#{i.customer&.id}", title: i.customer&.full_name},
    i.notes]},
    basePath: '/customer_contacts',
    actions: {edit: nil, delete: nil}
%>
<% end %>

<% if @locations && !@locations.empty? %>

Locations

    <%= react_component "shared/TableDataNotEditable",
        title: "Customer Locations",
        attributes: ["Customer", "Address"],
        data: @locations.includes([:customer]).map {|i| [ i.id,
        {url: "/customers/#{i.customer&.id}", title: i.customer&.full_name},
        {url: "/customers/#{i.customer&.id}", title: i.display_address}]},
        basePath: '/locations',
        actions: {delete: nil}
    %>
<% end %>

<%# Messaging Thread UI %>

Example 1

Example 2

                     Send

<%
  #This form is used for both AJAX submissions and HTML form submissions. By default, it does HTML submissions if this "remote" value isn't set
  remote = defined?(remote) ? remote : false
  format = remote ? :json : :html

#If the code that renders this form didn't set the 'include_location_form' local variable, default it to true. Undefined locals are set as "nil" if this isn't rendered as a partial. So if we're trying to default it to true, but it defaults to nil, we need to make sure if it's nil that it gets set to true since true is the default value we want (if it wasn't set by whatever uses this template)
do_include_location_form = defined?(include_location_form) && !include_location_form.nil? ? include_location_form : true
%>

<%#

%>

    <%= form_with model: @customer, id: :new_customer_form, local: !remote, format: format do |form| %>

<%= form_group(form, @customer, :first_name, value: @customer.first_name) %>

<%= form_group(form, @customer, :last_name, value: @customer.last_name) %>

<%= form_group(form, @customer, :email, value: @customer.email) %>

<%= form_group(form, @customer, :phone, :phone_field, value: @customer.phone) %>

<%= form_group(form, @customer, :company, value: @customer.company) %>

           Marketing Source

<%= form_group(form, @customer, :marketing_source_id) %>

<%= form_group(form, @customer, :notes, :text_area, value: @customer.notes, label: "Notes About This Customer") %>

      <% if do_include_location_form %>
        <%# content_for :card_body do %>

Location

          <%= form.fields_for :locations do |f| %>

<%= form_group(f, @customer, :street_address, value: @customer.default_location&.street_address) %>

<%= form_group(f, @customer, :city, value: @customer.default_location&.city) %>

<%= form_group(f, @customer, :zip_code, value: @customer.default_location&.zip_code) %>

<%= form_group(f, @customer, :state, value: @customer.default_location&.state) %>

          <% end %>
        <%# end %>
        <%# render :partial => "shared/card"%>
      <% end %>

<% if remote %>

Cancel

        <% end %>

<%= form.submit :Save, class: 'btn btn-company-primary' %>

<% end %>

<%= content_for :footer_scripts do %>
<% if !@customer.marketing_source.nil?%>

  SetSelect2Option('marketing_source_select', "<%=@customer.marketing_source.name%>", "<%=@customer.marketing_source.id%>")
  $('#customer_marketing_source_id').val(<%=@customer.marketing_source.id%>)

<% end %>
<% end %>

<%= react_component 'customers/merging/CustomerMergeTool', {baseCustomerId: @base_id, toMergeCustomerId: @other_id} %>

Import Customers

    <%= form_for :customer_import, url: import_customers_path, html: { multipart: true } do |f| %>

      <%= f.label :file, "Select a CSV File:" %>

      <%= f.file_field :file, required: true, accept: '.csv' %>

<%= f.submit "Import", class: 'btn btn-primary' %>

  <% end %>

Please make sure your CSV is in the correct format.

Timesheets History

<%= react_component "timesheets/Index", {job_timesheets: @job_timesheets, employee_timesheets: @employee_timesheets, timesheets: @timesheets, start_date: @start_date, end_date: @end_date} %>

<% @location = Location.new %>

<%# https://stackoverflow.com/a/31281336 %>
<%# Have to call content_for before rendering partial, which I don't understand fully. %>

<% content_for :modal_header, :flush => true do %>

New Property

<% end %>

<% content_for :modal_body, :flush => true do %>
<%= form_with model: @location, id: :new_location_form, remote: true, format: :json do |f| %>

<%= form_group(f, @location, :id)%>

<%# Used for when we need to edit the location. %>
        <%= form_group(f, @location, :street_address) %>
        <%= form_group(f, @location, :city) %>
        <%= form_group(f, @location, :zip_code) %>
        <%= form_group(f, @location, :state) %>
        <%# Temporarily disabling set_as_default_location because I think people are accidentally checking it when they add new locations. Want to keep this code in here so that we can see how it corresponds with the locations conroller 'set_as_default_location' paramater%>
        <%#

%>
            <%# check_box_tag :set_as_default_location %>
            <%#  Set as Default Location

%>

        <% if defined?(customer_id) %>
            <%= f.text_field :customer_id, :value => customer_id %>
        <% else %>
            <%= f.text_field :customer_id %>
        <% end %>

Cancel

<%= f.submit :Save, id: :submitLocation, class: "btn btn-company-primary" %>

<% end %>
<% end %>

<%= render :partial => 'shared/generic_modal', :locals => {modal_id: "new_location_modal"} %>

<%= content_for :footer_scripts do %>
<%= javascript_include_tag "locations.js" %>
<% end %>

<%= react_component "shared/TableDataNotEditable",
      title: "Locations",
      attributes: ["Customer", "Street Address", "City", "Zip", "State"],
      data: (@locations || []).map {|i|
        [i.id,
        {url: "/customers/#{i.customer.id}", title: i.customer&.full_name},
        i.street_address,
        i.city,
        i.zip_code,
        i.state]
        },
      basePath: '/locations',
      actions: {edit: nil, delete: nil}
    %>

New Job Status

<%= link_to 'Back', job_statuses_path %>

<%= render 'form', job_status: @job_status %>

    <%= link_to edit_job_status_path(@job_status), title: 'Edit' do %>

    <% end %>

<%= @job_status.status %>

" class="fas fa-brush fa-2x">

<%= link_to 'Edit', edit_job_status_path(@job_status) %>

|

<%= link_to 'Back', job_statuses_path %>

        <%= link_to job_statuses_path do %>

        <% end %>

Editing Job Status

<%= link_to 'Show', @job_status %> |
<%= link_to 'Back', job_statuses_path %>

<%= render 'form', job_status: @job_status %>

json.array! @job_statuses, partial: 'job_statuses/job_status', as: :job_status

json.partial! "job_statuses/job_status", job_status: @job_status

Job Statuses

        Status
        Color
        Actions




      <% @job_statuses.each do |job_status| %>

        "><%= job_status.status %>

" class="fas fa-brush fa-2x">

          /edit"
            title="Edit">


          " data-method="delete" data-confirm="Are you sure?"
            title="Delete">




      <% end %>

<%= link_to 'New Status', new_job_status_path, :class => "btn btn-light" %>

<%
@job_status.formatted_error_messages.each do |message|
flash[:error] = message
end
%>

    <%= form_with model: job_status, local: true do |form| %>

<%= form_group(form, job_status, :status, value: job_status.status) %>

<%= form_group(form, job_status, :color, :color_field) %>

    Save
    <% end %>

json.extract! job_status, :id, :created_at, :updated_at
json.url job_status_url(job_status, format: :json)

<%= @group.name.titleize %>: New Permission

<%= render 'form', permission: @permission %>

<%= @group.name.titleize %>: Edit Permission

<%= render 'form', permission: @permission %>

    <%= link_to edit_group_path(@group), title: 'Back' do %>

    <% end %>

    <%= form_with model: permission, url: [@group, permission], local: true do |form| %>

<%= form_group(form, permission, :resource, :select, select_options: resource_options) %>

<%= form_group(form, permission, :action, :select, select_options: action_options) %>

<%= form.submit class: 'btn btn-company-primary' %>

<% end %>

      Business
      Events
      MRR
      Date
      Survey
      Source



    <% date_one_month_ago = 1.month.ago %>
    <% leaderboard.each do |business_id, count, mrr| %>

        <% if business_id.present? && Business.exists?(business_id) %>
          <% business = Business.find(business_id) %>
          <% style = business.subscription.nil? ? 'color:red;' : business.subscription.deactivated ? 'color:#8B8000;' : 'color:green;'%>
          <% created_style = (business.created_at > date_one_month_ago && business.subscription.nil?) ? 'color:red;' : '' %>


            "> <%= business.name %> --- <%= business.employees&.first&.first_name %>

           padding: 8px 15px;"><%= count %>
           padding: 8px 15px;"><%= number_to_currency business.subscription&.mrr %>
           <%=style%> padding: 8px 15px;"><%= business.created_at.strftime "%m/%d/%y %I:%M%P" %>
           padding: 8px 15px;"><%= business.readable_survey_answers %> <%=%>
           padding: 8px 15px;"><%= business.attribution_source %> <%=%>
        <% end %>

    <% end %>

New Event

<%= render 'form', event: @event %>

<%= link_to 'Back', events_path %>

<%= notice %>

Resource:
<%= @event.resource %>

Resource:
<%= @event.resource_id %>

Name:
<%= @event.name %>

<%= link_to 'Edit', edit_event_path(@event) %> |
<%= link_to 'Back', events_path %>

"> Back

Business Settings

<% if flash[:alert] %>

<%= flash[:alert] %>

<% end %>

<% if flash[:notice] %>

<%= flash[:notice] %>

<% end %>

<%= form_with url: update_business_settings_events_path(id: @business.id), method: :post, local: true, autocomplete: "off" do |form| %>

    <%= form.label :name, "Business Name" %>
    <%= form.text_field :name, value: @business.name, name: 'business[name]', autocomplete: "off" %>

    <%= form.label :force_signature_on_payment, "Force Signature on Payment" %>
    <%= form.check_box :force_signature_on_payment, checked: @business.force_signature_on_payment, name: 'business[force_signature_on_payment]', autocomplete: "off" %>

    <%= form.label :surcharge_customer, "Surcharge Customer" %>
    <%= form.check_box :surcharge_customer, checked: @business.surcharge_customer, name: 'business[surcharge_customer]', autocomplete: "off" %>

    <%= form.label :app_percentage_fee, "App Percentage Fee" %>
    <%= form.number_field :app_percentage_fee, value: @business.app_percentage_fee, step: 0.01, name: 'business[app_percentage_fee]', autocomplete: "off" %>

    <%= form.label :stripe_enabled, "Stripe Enabled" %>
    <%= form.check_box :stripe_enabled, checked: @business.stripe_enabled, name: 'business[stripe_enabled]', autocomplete: "off" %>

    <%= form.label :parse_call_transcripts_using_ai, "Parse Call Transcripts Using AI" %>
    <%= form.check_box :parse_call_transcripts_using_ai, checked: @business.parse_call_transcripts_using_ai, name: 'business[parse_call_transcripts_using_ai]', autocomplete: "off" %>

    <%= form.label :gps_prompts_user_to_clock_in, "GPS Prompts User to Clock In" %>
    <%= form.check_box :gps_prompts_user_to_clock_in, checked: @business.gps_prompts_user_to_clock_in, name: 'business[gps_prompts_user_to_clock_in]', autocomplete: "off" %>

    <%= form.label :poll_server_to_refresh_unread_message_count, "Poll Server to Refresh Unread Message Count" %>
    <%= form.check_box :poll_server_to_refresh_unread_message_count, checked: @business.poll_server_to_refresh_unread_message_count, name: 'business[poll_server_to_refresh_unread_message_count]', autocomplete: "off" %>

    <%= form.label :extra_instructions_for_job_request, "Extra Instructions for Job Request" %>
    <%= form.text_area :extra_instructions_for_job_request, value: @business.extra_instructions_for_job_request, name: 'business[extra_instructions_for_job_request]', autocomplete: "off" %>

    <%= form.label :placeholder_for_job_request_notes, "Placeholder for Job Request Notes" %>
    <%= form.text_area :placeholder_for_job_request_notes, value: @business.placeholder_for_job_request_notes, name: 'business[placeholder_for_job_request_notes]', autocomplete: "off" %>

    <%= form.label :manually_outbound_call_feature_flag, "Manually Outbound Call Feature Flag" %>
    <%= form.check_box :manually_outbound_call_feature_flag, checked: @business.manually_outbound_call_feature_flag, name: 'business[manually_outbound_call_feature_flag]', autocomplete: "off" %>

    <%= form.label :enable_seo_posts, "Enable SEO Posts" %>
    <%= form.check_box :enable_seo_posts, checked: @business.enable_seo_posts, name: 'business[enable_seo_posts]', autocomplete: "off" %>

    <%= form.label :target_keywords, "Target Keywords" %>
    <%= form.text_area :target_keywords, value: @business.target_keywords, name: 'business[target_keywords]', autocomplete: "off" %>

    <%= form.label :wordpress_url, "WordPress URL" %>
    <%= form.text_field :wordpress_url, value: @business.wordpress_url, name: 'business[wordpress_url]', autocomplete: "off" %>

    <%= form.label :wordpress_auth_token, "WordPress Auth Token" %>
    <%= form.text_field :wordpress_auth_token, value: @business.wordpress_auth_token, name: 'business[wordpress_auth_token]', autocomplete: "off" %>

    <%= form.label :wordpress_username, "WordPress" %>
    <%= form.text_field :wordpress_username, value: @business.wordpress_username, name: 'business[wordpress_username]', autocomplete: "off" %>

    <%= form.label :send_appointment_reminders_to_customers, "Send Automated Daily Appointment Reminders to Customers" %>
    <%= form.check_box :send_appointment_reminders_to_customers, checked: @business.send_appointment_reminders_to_customers, name: 'business[send_appointment_reminders_to_customers]', autocomplete: "off" %>

    <%= form.label :automated_appointment_sms_reminder_template, "Automated Appointment SMS Reminder Template" %>
    <%= form.text_area :automated_appointment_sms_reminder_template, value: @business.automated_appointment_sms_reminder_template, name: 'business[automated_appointment_sms_reminder_template]', autocomplete: "off" %>

    <%= form.label :visitor_device_info_auth_token, "Visitor Device Info Auth Token" %>
    <%= form.text_field :visitor_device_info_auth_token, value: @business.visitor_device_info_auth_token, name: 'business[visitor_device_info_auth_token]', autocomplete: "off" %>

    <%= form.label :enable_sales_tax_calculation, "Enable Sales Tax Calculation" %>
    <%= form.check_box :enable_sales_tax_calculation, checked: @business.enable_sales_tax_calculation, name: 'business[enable_sales_tax_calculation]', autocomplete: "off" %>

    <%= form.label :sales_tax, "Sales Tax" %>
    <%= form.number_field :sales_tax, value: @business.sales_tax, step: 0.01, name: 'business[sales_tax]', autocomplete: "off" %>

    <%= form.label :quickbooks_tax_code_ref_id, "QuickBooks Tax Code Ref ID" %>
    <%= form.number_field :quickbooks_tax_code_ref_id, value: @business.quickbooks_tax_code_ref_id, name: 'business[quickbooks_tax_code_ref_id]', autocomplete: "off" %>

    <%= form.label :enable_total_from_multiplying_by_quantity, "Enable Total from Multiplying by Quantity" %>
    <%= form.check_box :enable_total_from_multiplying_by_quantity, checked: @business.enable_total_from_multiplying_by_quantity, name: 'business[enable_total_from_multiplying_by_quantity]', autocomplete: "off" %>

    <%= form.label :admin_password, "Admin Password" %>
    <%= form.password_field :admin_password, name: 'admin_password', autocomplete: "off" %>

    <%= form.label :hide_job_request_address_fields, "Hide Address Fields in Job Request Form" %>
    <%= form.check_box :hide_job_request_address_fields, checked: @business.hide_job_request_address_fields, name: 'business[hide_job_request_address_fields]', autocomplete: "off" %>

<%= form.submit "Update Business Settings" %>

<% end %>

  .dashboard {
    font-family: Arial, sans-serif;
    margin: 20px;
  }

  .dashboard h1 {
    color: #333;
    text-align: center;
  }

  .dashboard .mrr {
    font-size: 1.2em;
    margin-bottom: 20px;
    text-align: center;
  }

  .dashboard table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
  }

  .dashboard th, .dashboard td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }

  .dashboard th {
    background-color: #f2f2f2;
    color: #333;
  }

  .dashboard tr:nth-child(even) {
    background-color: #f9f9f9;
  }

  .dashboard tr:hover {
    background-color: #f1f1f1;
  }

  .dashboard .business-name {
    color: green;
  }

  .dashboard .business-name.deactivated {
    color: red;
  }

Field Rocket Agency Dashboard

Sign into Lightning LLC (Field Rocket) account

     Kody Sign In


     Mr. Phelps Sign In


     Darren Sign In


     Michaela Sign In

Current MRR from Marketing Subscription: <%= number_to_currency(@businesses.joins(:subscription).sum('subscriptions.mrr')) %>

        Business Name
        Sign In
        Business MRR
        Total Leads
        Posted This Week?
        Total Posts
        Last Post
        Wordpress Setup?
        Facebook Setup?



      <% @businesses.sort_by { |business| -business.subscription&.mrr.to_i }.each do |business| %>
      <% auth_token = business.employees.where.not(authentication_token: nil)&.first&.authentication_token %>

          "> <%= business.name %>

            ">
               Sign In


          <%= number_to_currency(business.subscription&.mrr) %>
          <%= business.job_requests.count %>

            <% start_of_week = Date.today.beginning_of_week(:sunday) %>
            <% end_of_week = Date.today.end_of_week(:sunday) %>
            <% posts_this_week = business.published_job_pages.where(created_at: start_of_week..end_of_week) %>
            <%= posts_this_week.count > 0 ? "✅ - #{posts_this_week.count}" : "❌" %>
            <% posts_this_week.each do |post| %>
              " href="/published_job_pages/<%=post.id%>"> <%= post.created_at&.strftime('%B %d %Y') %> ,
            <% end %>
            <%= %>

          <%= business.published_job_pages.count %>
          <%= business.published_job_pages.last&.created_at&.strftime('%B %d %Y') %>
          <%= !business.wordpress_url.blank? && !business.wordpress_auth_token.blank? ? "✅" : "❌" %>
          <%= business.facebook_page_connections.count > 0 ? "✅" : "❌" %>

      <% end %>

<%= content_for :footer_scripts do %>

  document.querySelectorAll(".sign_out").forEach(button => {
    button.addEventListener("click", function(event) {
        let authToken = event.target.getAttribute('data-auth-token');
        
        $.ajax({
            url: "/employees/sign_out.json",
            method: "DELETE",
            dataType: "json",
            success: function(response) {
                console.log(response);  // Log the response to the console

                // Now, sign in using the provided authToken.
                signInWithToken(authToken);
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.error('There was a problem with the AJAX operation:', errorThrown);
            }
        });
    });
  });

  function signInWithToken(authToken) {
    const body = { authentication_token: authToken, suppress_analytics: true };

    $.ajax({
        url: "/employees/sign_in.json",
        method: "POST",
        dataType: "json",
        data: JSON.stringify(body),
        contentType: "application/json",
        success: function(response) {
            console.log('Signed in:', response);
            gritterSuccess("Success", "Successfully signed in");
            // Here you can handle actions post sign-in, such as redirecting to a dashboard or showing a welcome message.
        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.error('Error signing in:', errorThrown);
        }
    });
  }

<% end %>

Editing Event

<%= render 'form', event: @event %>

<%= link_to 'Show', @event %> |
<%= link_to 'Back', events_path %>

json.array! @events, partial: "events/event", as: :event

Start
"/>

End
"/>

Go

Total MRR: <%= number_to_currency @mrr + @processing_fee_mrr %>

Subscription MRR: <%= number_to_currency @mrr %>

Percentage MRR: <%= number_to_currency @processing_fee_mrr %>

Recent registrations

<%#

Yesterday's Daily Active Users: @yesterday_active_users

Today's Daily Active Users So Far: @todays_active_users_so_far

Last Week's Daily Active Users: @last_week_daily_active_users

This Week's Active Users: @weeks_active_users_so_far

%>

Leaderboard

<%= render "leaderboard", leaderboard: @leaderboard %>

<%= content_for :footer_scripts do %>

      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);
      google.charts.setOnLoadCallback(drawDauHistoryChart);
      google.charts.setOnLoadCallback(drawWauHistoryChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Business', 'Total Events'],
          <% @leaderboard.each do |business_id, count| %>
            <% if business_id.present? && Business.exists?(business_id) %>
              ['<%= Business.find(business_id).name %>', <%= count %>],
            <% end %> 
          <% end %>
        ]);

        var options = {
          title: 'Leaderboard',
          legend: { position: 'none' },
          hAxis: {
            title: 'Business',
            minValue: 0
          },
          vAxis: {
            title: 'Total Events'
          }
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('leaderboard_chart'));
        chart.draw(data, options);
      }

      function drawDauHistoryChart() {
          const today = new Date();
          // const today = new Date(2023, 8, 1);  // 8 is September in JavaScript
          const formattedEndDate = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`;

          const startDate = new Date(2023, 0, 1);  // 0 is January in JavaScript
          // const startDate = new Date(2023, 5, 1);  // 7 is August in JavaScript
          const formattedStartDate = `${startDate.getFullYear()}-${String(startDate.getMonth() + 1).padStart(2, '0')}-${String(startDate.getDate()).padStart(2, '0')}`;

          fetch(`/events/get_daily_leaderboard_stats?start_date=${formattedStartDate}&end_date=${formattedEndDate}`)
              .then(response => response.json())
              .then(dauData => {
                  const dataTable = new google.visualization.DataTable();
                  dataTable.addColumn('date', 'Date');
                  dataTable.addColumn('number', 'DAU');
                  dataTable.addColumn('number', 'Weekly Avg. DAU');  // Add column for weekly moving average of DAU

                  let weeklyMovingAverages = [];

                  // Calculate weekly moving average for each day
                  dauData.forEach(([date, count], index) => {
                      let weeklySum = count;
                      let daysCounted = 1;

                      // Look back up to 6 days before the current day to compute weekly average
                      for (let i = 1; i <= 6 && index - i >= 0; i++) {
                          weeklySum += dauData[index - i][1];
                          daysCounted++;
                      }

                      weeklyMovingAverages.push(weeklySum / daysCounted);
                  });

                  dauData.forEach(([date, count], index) => {
                      dataTable.addRow([new Date(date), count, weeklyMovingAverages[index]]);
                  });

                  // Calculate average DAU for entire date range
                  let totalDAU = 0;  // initialize total DAU count to 0
                  dauData.forEach(([date, count]) => {
                      // dataTable.addRow([new Date(date), count]);
                      totalDAU += count;  // add the current day's count to total DAU
                  });

                  const averageDAU = totalDAU / dauData.length;  // Calculate average DAU                  

                  const options = {
                      title: `Daily Active Users from ${formattedStartDate} - ${formattedEndDate}. Avg: ${averageDAU}`,
                      hAxis: {title: 'Date'},
                      vAxis: {title: 'DAU'},
                      series: {
                          0: {color: 'blue'},    // Your original DAU data color
                          1: {color: 'purple'}   // Color for the weekly moving average of DAU
                      }
                  };

                  const chart = new google.visualization.LineChart(document.getElementById('dau_chart'));
                  chart.draw(dataTable, options);
              });
      }

      function drawWauHistoryChart() {
          const today = new Date();
          // const today = new Date(2023, 8, 1);  // 8 is September in JavaScript
          const formattedEndDate = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`;

          const startDate = new Date(2023, 0, 1);  // 0 is January in JavaScript
          // const startDate = new Date(2022, 5, 1);  // 7 is August in JavaScript
          const formattedStartDate = `${startDate.getFullYear()}-${String(startDate.getMonth() + 1).padStart(2, '0')}-${String(startDate.getDate()).padStart(2, '0')}`;

          fetch(`/events/get_weekly_leaderboard_stats?start_date=${formattedStartDate}&end_date=${formattedEndDate}`)
              .then(response => response.json())
              .then(wauData => {
                  const dataTable = new google.visualization.DataTable();
                  dataTable.addColumn('string', 'Week');
                  dataTable.addColumn('number', 'WAU');
                  dataTable.addColumn('number', 'Monthly Avg WAU'); // Add column for monthly average WAU

                  // Group data by months
                  const monthlyData = wauData.reduce((acc, {start_date, end_date, count}) => {
                      const monthKey = new Date(start_date).getMonth();
                      if (!acc[monthKey]) acc[monthKey] = [];
                      acc[monthKey].push(count);
                      return acc;
                  }, {});

                  // Compute average for each month
                  const monthlyAverages = {};
                  for (const month in monthlyData) {
                      const monthValues = monthlyData[month];
                      monthlyAverages[month] = monthValues.reduce((sum, value) => sum + value, 0) / monthValues.length;
                  }

                  // Populate data table
                  wauData.forEach(({start_date, end_date, count}) => {
                      const monthKey = new Date(start_date).getMonth();
                      const dateRange = `${start_date} - ${end_date}`;
                      dataTable.addRow([dateRange, count, monthlyAverages[monthKey]]);
                  });

                  // Calculate average WAU for entire date range
                  let totalWAU = 0;
                  wauData.forEach(({start_date, end_date, count}) => {
                      // const dateRange = `${start_date} - ${end_date}`;
                      totalWAU += count;
                  });

                  const averageWAU = totalWAU / wauData.length;

                  const options = {
                      title: `Weekly Active Users from ${formattedStartDate} to ${formattedEndDate}, AVG: ${averageWAU}`,
                      hAxis: {title: 'Week'},
                      vAxis: {title: 'WAU'},
                      series: {
                          0: {color: 'blue'},  // Your original WAU data color
                          1: {color: 'purple'} // Color for the monthly average WAU trend line
                      }
                  };

                  const chart = new google.visualization.LineChart(document.getElementById('wau_chart'));
                  chart.draw(dataTable, options);
              });
      }

    
<% end %>

json.partial! "events/event", event: @event

Prospecting & Recent Registrations Dashboard

Back to Leaderboard

      Business
      Phone
      Contacted?
      MRR
      Date
      Survey
      Source



    <% date_one_month_ago = 1.month.ago %>
    <% @businesses.each do |business| %>

          <% style = business.subscription.nil? ? 'color:red;' : business.subscription.deactivated ? 'color:#8B8000;' : 'color:green;'%>
          <% created_style = (business.created_at > date_one_month_ago && business.subscription.nil?) ? 'color:red;' : '' %>

            "> <%= business.name %> --- <%= business.employees&.first&.first_name %>


            " onclick="copyMessageToClipboard('<%= business.employees&.first&.first_name %>', '<%= business.name %>')"> <%= business.phone %>


             onclick="toggleContacted(<%= business.id %>)">

           padding: 8px 15px;"><%= number_to_currency business.subscription&.mrr %>
           <%=style%> padding: 8px 15px;"><%= business.created_at.in_time_zone("Mountain Time (US & Canada)").strftime "%m/%d/%y %I:%M%P" %>
           padding: 8px 15px;"><%= business.readable_survey_answers %> <%=%>
           padding: 8px 15px;"><%= business.attribution_source %> <%=%>

    <% end %>

<%= content_for :footer_scripts do %>

  function copyMessageToClipboard(firstName, businessName) {
    const message = `Hey is this ${firstName.trim()}? You do ${businessName.trim()}, right?`;
    navigator.clipboard.writeText(message).then(() => {
      console.log('Message copied to clipboard');
    }).catch(err => {
      console.error('Failed to copy message: ', err);
    });
  }

  function toggleContacted(businessId) {
    fetch(`/businesses/${businessId}/toggle_contacted`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
      }
    })
    .then(response => response.json())
    .then(data => {
      console.log('Contacted status updated:', data);
      gritterSuccess('Success', 'Contacted status updated successfully.');
    })
    .catch(error => {
      console.error('Error updating contacted status:', error);
    });
  }

<% end %>

Link Clicks with utm tags:

<%= react_component "events/EventsIndex", {events: @events, businesses: [], employees: [] }%>

<%= react_component "events/EventsIndex", {events: @events, businesses: @businesses, employees: @employees }%>
<%= render partial: 'shared/paginate', locals: {resource: @events} %>

<%= content_for :footer_scripts do %>

<%# javascript_include_tag 'reporting.js' %>

        $(function(){            
            flatpickr('#marketing_sources_chart_start')
            flatpickr('#marketing_sources_chart_end')
            //Default the dates to the start and end of current month
            SetFlatpickr('marketing_sources_chart_start', moment().startOf('month').format());
            SetFlatpickr('marketing_sources_chart_end', moment().endOf('month').format());

            $("#select_business").select2();
            $("#select_employee").select2();

            google.charts.load('current', {'packages':['corechart', 'bar', 'line']});
            google.charts.setOnLoadCallback(drawEventsReportByType);

            $('#generate_event_report').on('click', function(){ 
                let start = $('#marketing_sources_chart_start').val();
                let end = $('#marketing_sources_chart_end').val();
                drawEventsReportByType(start, end);
                
                //TODO: How do we filter from selectedBusinessId and selectedEmployeeId??

            });                        
        });

        function drawEventsReportByType(start, end){
            start = start == null ? $('#marketing_sources_chart_start').val() : start;
            end = end == null ? $('#marketing_sources_chart_end').val() : end;
            
            let selectedBusinessId = $('#select_business').val()
            let selectedEmployeeId = $('#select_employee').val()

            $.get({
              url: '/event_total_report_data',
              data: {start: start, end: end, business_id: selectedBusinessId, employee_id: selectedEmployeeId},
              success: function(eventData){
                var data = google.visualization.arrayToDataTable(eventData);
                var options = {
                  title: 'Events by Company',
                  curveType: 'function',
                  legend: { position: 'right' },
                  crosshair: {orientation: 'vertical', trigger: 'focus'},
                  // Allow multiple
                  // simultaneous selections.
                  selectionMode: 'multiple',
                  // Trigger tooltips
                  // on selections.
                  tooltip: {trigger: 'selection'},
                  // Group selections
                  // by x-value.
                  aggregationTarget: 'auto',
                  width: 900,
                  height: 500
                };
                var chart = new google.visualization.LineChart(document.getElementById('total_events_report'));
                chart.draw(data, options);
              }
            })
        }

<% end %>

.light-green-btn {
    background-color: #90ee90; /* Light green color */
    color: black; /* Text color */
    border: none; /* Remove border */
    padding: 10px 20px; /* Adjust padding as needed */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
}

.light-green-btn:hover {
    background-color: #b0eeb0; /* Lighter green color on hover */
}

.light-green-btn:disabled {
    background-color: #d3d3d3; /* Light gray color for disabled state */
    cursor: not-allowed; /* Not-allowed cursor for disabled state */
}

<% @auth_token = @business.employees.where.not(authentication_token: nil)&.first&.authentication_token %>

<%= @business.name %> ">

         data-auth-token="<%= @auth_token %>">
             Sign In

Back to leaderboard

Owner Name:

<%= @business.employees.first.full_name %>

Phone:

            " class="ml-2">
            " class="ml-2">
            <%= format_phone_number @business.phone %>

Email:

            ?subject=Hello%20from%20Field%20Rocket&body=Hi%20there,&bcc=fieldrocket@pipedrivemail.com" target="_blank" rel="noopener noreferrer" class="ml-2">


            &su=Hello%20from%20Field%20Rocket&body=Hi%20there,&bcc=fieldrocket@pipedrivemail.com" target="_blank" rel="noopener noreferrer" class="ml-2">


            <%= @business.email %>

Registered On:

<%= @business.created_at %>

<% if @business.subscription.present? %>

Subscription:
">

<%= number_to_currency @business.subscription.mrr %> ||<%= @business.subscription.created_at %>

<% else %>

<%# Subscription: %>
">

Add Subscription

<% end %>

        <%= react_component 'shared/InplaceEdit',
        attribute: :attribution_source,
        resource: :businesses,
        resource_id: @business.id,
        value: @business.attribution_source,
        allowNewline: false
        %>

         suppress_analytics: <%= @business.suppress_analytics %>
         toggle analytics

"> Job Link (open in incognito)

Total Job Requests:

<%= @business.job_requests.count %>

New Job Requests this Week:
<%= @business.job_requests.where(created_at: Time.now.beginning_of_week..Time.now.end_of_week).count %>

New Job Requests this Month:
<%= @business.job_requests.where(created_at: Time.now.beginning_of_month..Time.now.end_of_month).count %>

________________________________________________________________________________

Total Jobs:

<%= @business.jobs.count %>

New Jobs this Week:
<%= @business.jobs.where(created_at: Time.now.beginning_of_week..Time.now.end_of_week).count %>

New Jobs this Month:
<%= @business.jobs.where(created_at: Time.now.beginning_of_month..Time.now.end_of_month).count %>

________________________________________________________________________________

Total Customers:

<%= @business.customers.count %>

New Customers this Week:
<%= @business.customers.where(created_at: Time.now.beginning_of_week..Time.now.end_of_week).count %>

New Customers this Month:
<%= @business.customers.where(created_at: Time.now.beginning_of_month..Time.now.end_of_month).count %>

_______________________________________________________________________________

Text Messages:

<%= @business.messages.count %>

New Messages this Week:
<%= @business.messages.where(created_at: Time.now.beginning_of_week..Time.now.end_of_week).count %>

New Messages this Month:
<%= @business.messages.where(created_at: Time.now.beginning_of_month..Time.now.end_of_month).count %>

_______________________________________________________________________________

Invoices:

<%= @business.invoices.where(invoice_type: "Invoice").count %>

New Invoices this Week:
<%= @business.invoices.where(invoice_type: "Invoice", created_at: Time.now.beginning_of_week..Time.now.end_of_week).count %>

New Invoices this Month:
<%= @business.invoices.where(invoice_type: "Invoice", created_at: Time.now.beginning_of_month..Time.now.end_of_month).count %>

_______________________________________________________________________________

Estimates:

<%= @business.invoices.where(invoice_type: "Estimate").count %>

New Estimates this Week:
<%= @business.invoices.where(invoice_type: "Estimate", created_at: Time.now.beginning_of_week..Time.now.end_of_week).count %>

New Estimates this Month:
<%= @business.invoices.where(invoice_type: "Estimate", created_at: Time.now.beginning_of_month..Time.now.end_of_month).count %>

_______________________________________________________________________________

Processed Card Payments:

    <% @paid_through_stripe = @business.payments.where(notes: "Paid through Stripe").sum(:amount) %>
    <% @paid_through_stripe_this_week = @business.payments.where(notes: "Paid through Stripe", created_at: Time.now.beginning_of_week..Time.now.end_of_week).sum(:amount) %>
    <% @paid_through_stripe_this_month = @business.payments.where(notes: "Paid through Stripe", created_at: Time.now.beginning_of_month..Time.now.end_of_month).sum(:amount) %>

<%= number_to_currency @paid_through_stripe %> -> <%= number_to_currency @paid_through_stripe * @business.app_percentage_fee %>

Processed Payments this Week:
<%= number_to_currency @paid_through_stripe_this_week %> -> <%= number_to_currency @paid_through_stripe_this_week * @business.app_percentage_fee %>

Processed Payments this Month:

    <%= number_to_currency(@paid_through_stripe_this_month, unit: "$")%> -> <%= number_to_currency(@paid_through_stripe_this_month * @business.app_percentage_fee) %>

<%= react_component "events/EventsIndex", {events: @events, businesses: [@business], employees: @employees }%>

<%= content_for :footer_scripts do %>

    document.getElementById("sign_out").addEventListener("click", function(){
        <% if !@auth_token.nil? %>
        
        $.ajax({
            url: "/employees/sign_out.json",
            method: "DELETE",
            dataType: "json",
            success: function(response) {
                console.log(response);  // Log the response to the console

                // Now, sign in using the provided authToken.
                // const authToken = 'YOUR_AUTH_TOKEN_HERE'; // Replace this with the actual token
                signInWithToken('<%=@auth_token%>');
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.error('There was a problem with the AJAX operation:', errorThrown);
            }
        });

        <% else %>
            gritterError("Failure", "Can't Sign In");
        <% end %>
    });

    function signInWithToken(authToken) {
        const body = { authentication_token: authToken, suppress_analytics: true };

        $.ajax({
            url: "/employees/sign_in.json",
            method: "POST",
            dataType: "json",
            data: JSON.stringify(body),
            contentType: "application/json",
            success: function(response) {
                console.log('Signed in:', response);
                gritterSuccess("Success", "Successfully signed in");
                // Here you can handle actions post sign-in, such as redirecting to a dashboard or showing a welcome message.
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.error('Error signing in:', errorThrown);
            }
        });
    }

<% end %>

<%= form_with(model: event, local: true) do |form| %>
<% if event.errors.any? %>

<%= pluralize(event.errors.count, "error") %> prohibited this event from being saved:

<%= message %>

<% end %>

    <%= form.label :resource %>
    <%= form.text_field :resource %>

    <%= form.label :resource_id %>
    <%= form.number_field :resource_id %>

    <%= form.label :name %>
    <%= form.text_field :name %>

<%= form.submit %>

<% end %>

json.extract! event, :id, :resource, :resource_id, :name, :created_at, :updated_at
json.url event_url(event, format: :json)

New Job

<%= render 'form', job: @job %>

<%= content_for :modal_header, flush: true do %>

Images Upload

<% end %>
<%= content_for :modal_body, flush: true do %>

Upload image(s) for this job

    <%= form_with model: @job, url: "/jobs/#{@job.id}/image", id: :job_upload_form, remote: true, format: :json do |form| %>
        <%= form.label :images, class: 'text-label' %>
        <%= form.file_field :images, multiple: true, accept: 'image/*, application/pdf' %>
    <% end %>
<% end %>

<%= content_for :modal_footer, flush: true do %>

                Upload

<% end %>

<%= render :partial => "shared/generic_modal", locals: {modal_id: "images-modal"}%>

<%= content_for :footer_scripts do %>

    <%# <-- I do the rails comments like this because I don't necessarily want all the comments to be public. I'm worried we could potentially expose our users to some security flaws if they can read all the comments.
        // Doing it this approach is necessary because it's not possible to take multiple input files and render them with AJAX.
        // https://stackoverflow.com/questions/38843178/trying-to-include-and-use-jquery-file-upload-on-rails-throwing-some-errors/38866780
        // I tried to use the recommended gem, 'remotipart', however it was crashing my application. So instead, I followed this approach: https://makitweb.com/how-to-upload-multiple-image-files-with-jquery-ajax-and-php/
    %>
    $('#upload_job_images_ajax').click(function(e){
        e.preventDefault();        
        $('#image-loader').show();
        var formData = new FormData();
        let files = $('#job_images')[0].files
        for (var i = 0; i < files.length; i++){
            formData.append("job[images][]", files[i]);
        }

        // AJAX request
        $.ajax({
            url: `jobs/${modalAppointmentContext._jobId}/image.json`,
            type: 'post',
            data: formData,
            dataType: 'json',
            contentType: false,
            processData: false,
            success: function (response) {
                $('#images-modal').modal('hide');
                $('#job_images').val("") //Clear images
                $('#image-loader').hide();
                gritterSuccess("Successfully Uploaded Image(s)", "Successfully uploaded image(s)")
            },
            error: function (response) {
                $('#images-modal').modal('hide');
                $('#job_images').val("") //Clear images
                $('#image-loader').hide();
                gritterError("Couldn't upload image(s)", "Couldn't upload image(s)")
            }
        });
    })

<% end %>

    <% if can? :update, Job %>
      <%= link_to edit_job_path(@job), title: 'Edit' do %>

      <% end %>
    <% end %>

Job #<%= @job.id %> for
      <%= link_to customer_path(@job.customer) do %>
        <%=@job.customer.full_name %>
      <% end %>

<% if !@job.owner.nil?%>

Sales Rep: <%= @job.owner&.full_name%>

<% end %>

      <%= link_to generate_invoice_path(@job),
      class: 'right-side',
      title: 'Generate Invoice' do %>

      <% end %>

      " title="Directions" target="_blank">

<%= content_for :card_body, flush: true do %>

<%= @job.display_address %>

      <% if !@job.customer.company.blank? %>

<%= @job.customer&.company %>

      <% end %>

      <% if !@job.notes.blank? %>

Job Summary:

<%= @job.notes %>

<% end %>

<% end %>
<%= render partial: "shared/card" %>

<%= content_for :footer do %> <%# Put this up here so that the jvascript renders before the modal javascript.. pretty bad.. need to figure out a better way of organizing this code. %>
<%= render :partial => "jobs/job_appointment_modal", locals: {:job => @job } %>
<% end %>

  <% content_for :accordian_section_title, :flush => true do %>

Estimates/Invoices

  <% end %>
  <% content_for :accordian_section_content, :flush => true do %>

        <%= react_component "shared/TableDataNotEditable",
          title: "Invoices",
          attributes: ["Title", "Original Price", "Amount Due", "Due Date", "Pay w/ Stripe", "Convert to Invoice", "Download"],
          data: @job.invoices.map {|i| [
            i.id,
            {url: "/invoices/#{i.id}", title: i.short_title},
            format("$%.2f", i.total_price),
            format("$%.2f", i.amount_due),
            i.due_on.strftime("%B %d, %Y"),
            {url: "/invoices/#{i.id}/pay?secret_key=#{i.secret_key}", iconclass: "fa fa-credit-card fa-2x", hover: "Collect Online"},
            i.invoice_type == "Estimate" ? {url: "/invoices/#{i.id}/copy?convert_to_invoice=true", icon: "fa-copy", hover: "Convert"} : "",
            {url: "/invoices/#{i.id}.pdf", icon: "fa-cloud-download-alt", newtab: true}
          ]},
          basePath: '/invoices'%>

      <%= link_to generate_invoice_path(@job),
        class: 'right-side',
        title: 'Generate Invoice/Estimate' do %>
         Create New
      <% end %>

<% end %>
<%= render :partial => "shared/accordian_section", :locals => {collapse_id: "collapseOne" }%>

<% content_for :accordian_section_title, :flush => true do %>

Appointments

  <% end %>
  <% content_for :accordian_section_content, :flush => true do %>

        <%= react_component 'shared/TableDataNotEditable', {
          title: "Appointments",
          attributes: ["Employee", "Type", "Start", "End", "View", "Edit"],
          data: @job.employee_jobs.includes([:employee_job_type]).reject{|ej|ej.id.nil?}.map{|ej| [ej.id, #Reject is because there was empty employee_job objects in the associations for some reason.. which was adding extra rows that didn't actually exist in database..
            ej.employee&.full_name,
            ej.employee_job_type.nil? ? "No Type" : ej.employee_job_type&.name,
            ej.start_short,
            ej.end_short,
            {url: "/schedule?appointment=#{ej.id}", icon: "fa-eye"},
            {url: "javascript:void(0)", icon: "fa-pencil-alt", class: "edit_job_appointment_modal", dataCustom: ej.id}]
          },
          basePath: '/employee_jobs',
          actions: {delete: true, edit: false}}%>

        Add an Appointment

  <% end %>
  <%= render :partial => "shared/accordian_section", :locals => {collapse_id: "collapseTwo"} %>

  <%= render :partial => 'jobs/job_img_gallery', locals: {job: @job} %>

<%= content_for :footer do %>

<%# TODO: We really should turn this images modal and the images modal used on the dispatch board into the same modal. Maybe have this one
render the partial "job/images_modal". The jobs/images_modal would need some tweaks since this one isn't submitting it with AJAX. %>
<%= render :partial => 'shared/images_upload_modal', locals: { path: upload_job_image_url, model: 'job', is_remote_true: false } %>
<% end %>

<%= content_for :footer_scripts do %>
  <%= stylesheet_link_tag  'gallery-clean', media: 'all' %>
  <%= stylesheet_link_tag  'baguetteBox', media: 'all' %>
  <%= javascript_include_tag 'baguetteBox' %>
  <%= javascript_include_tag 'edit_employee_job_modal.js'%>

  $(function(){
    baguetteBox.run('.tz-gallery',{
      "buttons":true
    });

    $(".cancel-modal").bind("click", function(){        
        ForceCloseModal('images-modal');
    });

    //<%# https://stackoverflow.com/a/13287794/6374022 %> 
    <%= render :partial => "job-images.js.erb" %>

    $('#new_employee_job').on('ajax:success', function(event){ //This callback adds a new row to the table after it's been created. 
      data = event.detail[0];
      wasAnUpdate = event.detail[1] == "Accepted" || event.detail[2].status == 202; //On production, event.detail[1] is always an empty string.
      if (wasAnUpdate) //If it was an update to a row, we don't need to add a new row. The callback in 'edit_employee_job_modal.js' will edit the row. 
        return;
      const $jobAppointmentRow = $(`
        <tr>
          <td>${data["employee_name"]}</td>
          <td> ${data["appointment_type_name"]}</td>
          <td> ${data["formatted_start"]} </td>
          <td> ${data["formatted_end"]} </td>
          <td> <a href="/employee_jobs/${data["id"]}" data-method="DELETE"> <i class="fas fa-trash"> </i> </a> </td>
        </tr>
      `)

      //Have to set up the edit button click listener for this element..
      const $jobAppointmentEditButton = $(`<td> <a href="javascript:void(0)" class="edit_job_appointment_modal" data-custom="${data["id"]}"> <i class="fas fa-pencil-alt"> </i> </a> </td>`)
      $jobAppointmentEditButton.find('a').click(function(evt){
        setEmployeeJobModalToBeEditModal(evt)
      });
      $jobAppointmentRow.find('td:nth-last-of-type(2)').after($jobAppointmentEditButton);
      $('#Appointments').append($jobAppointmentRow);
    });

      // new QuerySelect('job_status_select',
      //   '/job_statuses.json',
      //   RansackSearch('name_cont'),
      //   SelectResultsTransform("status"),
      //   InlineEditCallback('jobs', '<%=@job.id%>', 'job_status_id', 'job_status_name'),
      //   {placeholder: "Select a Job Status"}
      // );
      // <% if !@job.job_status.nil? %>
      // SetSelect2Option("job_status_select", "<%= @job.job_status.status %>", "<%= @job.job_status.id%>");
      // <% end %> 

    //Making sure the job is always set for the params for adding a new appointment (employee job). 
    //There was a bug where we couldn't submit new job appointments on job page because the nested job_id form wasn't getting set properly, then it was getting cleared out.
    $('#employee_job_job_id').val('<%=@job.id%>'); 
    $('#add_job_appointment_button').click(function(event){
      setModalBackToAdd(true);   //true is indicated to not wipe the form.
      $('#employee_job_job_id').val('<%=@job.id%>'); //How to get current job id..?
    });
  });
  
<% end %>

$('.delete-picture-link').click(function(e) {
    e.preventDefault();
    if (!confirm("Delete Picture?"))
        return
    //Need to get the image that is attempting to be deleted..
    const { imageId, deletePath } = event.target.parentElement.dataset;

    $.ajax({
        url: deletePath,
        method: "DELETE",
        data: { image_id : imageId },
        success: function(data){
            gritterSuccess("Success", "Successfully deleted image", "2500")
            $(`a[data-image-id="${data['id']}"]`).parent().parent().hide();
            // location.reload();
        },
        error: function(error){
            gritterError("Error", "Something Went Wrong", "2500")
            console.log(error)
        }
    });
});
//https://stackoverflow.com/questions/17527713/force-browser-to-download-image-files-on-click
// function download(e){
//     debugger;
//     var link = document.createElement('a');
//     link.href = 'images.jpg';
//     link.download = 'Download.jpg';
//     document.body.appendChild(link);
//     link.click();
//     document.body.removeChild(link);
// }

<% content_for :modal_header, flush: true do %>

Add Appointment

<% end %>

<% @new_appointment = EmployeeJob.new %>

<% content_for :modal_body, flush: true do %>
<%= form_for @new_appointment, remote: true, url: '/add_employee_job.json' do |f| %>

            <%= f.text_field :employee_id %>
            <%= f.text_field :job_id%>
            <%= f.text_field :employee_job_type_id %>
            <%= f.text_field :id %>

                Employee

                Type

<%= form_group(f, @new_appointment, :time_start, :datetime_field, options: {:class => "datepicker-input"}) %>

<%= form_group(f, @new_appointment, :time_end, :datetime_field, options: {:class => "datepicker-input"}) %>

Cancel

                Save

<% end %>
<% end %>

<% content_for :modal_footer, flush: true do %>

<%# there was an extra upload button before adding this modal_footer %>
<% end %>

<%= render :partial => 'shared/generic_modal', :locals => {modal_id: "new_job_appointment_modal", disable_tab_index: true}%>
<% content_for :footer_scripts do %>
<%= javascript_include_tag 'employee_job.js' %>

    var currentEmployeeName = '<%=current_employee.full_name%>';
    var currentEmployeeId = '<%=current_employee.id%>';
    var currentBusinessName = '<%=current_employee.business.name%>';

    $(document).ready(function(){
        new EmployeeSelect("employee_select", function(e) { $('#employee_job_employee_id').val(e.currentTarget.value);});
        
        new EmployeeJobTypeSelect("appointment_type", function (evt){
            $('#employee_job_employee_job_type_id').val(evt.currentTarget.value);
        });

        dateOptions = {
            enableTime: true,
            altInput: true, 
            altFormat: 'F j, h:i K',
            minTime: "6:00",
            maxTime: "22:00",
            minuteIncrement: 15,
        };

        startDateOptions = {
            enableTime: true,
            altInput: true, 
            altFormat: 'F j, h:i K',
            minTime: "6:00",
            maxTime: "22:00",
            minuteIncrement: 15,
            onChange: function(selectedDates, dateStr, instance){
                s = selectedDates[0];//set the end time to the same as start time except 2 hours ahead
                s.setTime(s.getTime() + (2*60*60*1000))
                SetFlatpickr('employee_job_time_end', s)
            }
        };

        var startTime = flatpickr('#employee_job_time_start', startDateOptions);
        var endTime = flatpickr('#employee_job_time_end', dateOptions);
    });
    
<% end %>

json.extract! job, :id, :notes, :street_address, :state, :city, :customer_id, :created_at, :updated_at
json.url job_url(job, format: :json)

Edit Job

<%= render 'form', job: @job %>

<% content_for :footer_scripts do %>

$(document).ready(function(){
  // <%# This is for setting the values that the job already has. %>
  <% if !@job.customer.nil? %>
    SetSelect2OptionExtraEventArg('customer-name-search', '<%= @job.customer.full_name %>', '<%=@job.customer.id %>', true);
  <% end %>
  <% if !@job.location.nil? %>
    SetSelect2Option('customer-location-search', '<%= @job.display_address %>', '<%= @job.location.id %>');
  <% end %>
  <% if !@job.customer_contact.nil? %>
    SetSelect2Option('customer-contact-search', '<%= @job.customer_contact.full_name %>', '<%= @job.customer_contact.id %>');
  <% end %>
});

<% end %>

json.array! @jobs, partial: 'jobs/job', as: :job

    <% if invoice.should_invoice_other_customer? %>
        "><%= invoice&.invoice_to&.email%>
    <% end %>
    <% if job.nil? %>
    "><%= invoice&.customer&.email%>
    <% else %>
    "><%= job&.customer&.email %>
    <% end %>

"><%= job&.customer_contact&.email %>

    <% unless job.nil? %>
        <% job.employee_jobs.includes([:employee]).each do |employee_job|%>
        "><%= employee_job.employee.email%>
        <% end %>
    <% end %>

<%= stylesheet_link_tag 'gritter' %>
<%= render 'shared/calendarEditable' %>
<%= render 'job_requests/requests_draggable' %>

<%# react_component('chatbot/ChatBot', props: { first_name: 'Tyson' }) %>

<% content_for :footer do %>
    <%= render :partial => 'branches/branch_summary_modal' %>
    <%= render :partial => 'employees/appointment_filter_modal' %>
    <%= render 'job_modal', job: @job, text_templates: @text_templates %>
    <%= render :partial => 'customers/customer_contact_modal' %> <%# We want to be able to add an on success javascript callback here. %>
    <%= render :partial => 'locations/location_modal' %> <%# We'll have to append to the form when we submit the location_modal the customer_id & business_id %>
    <%= render :partial => 'shared/locations_manager_modal' %>
    <%= render :partial => 'customers/customer_modal' %>
    <%= render :partial => 'jobs/images_modal' %>
    <%= render :partial => "jobs/job_appointment_modal" %>
    <%= render :partial => "customers/messages_modal" %> <%# TODO: Create the messages modal, we can start by basing it off the messages modal. %>
<% end %>

<%= content_for :footer_scripts do %>
    <%= stylesheet_link_tag  'baguetteBox', media: 'all' %>
    <%= javascript_include_tag 'modal.js' %>
    <%= javascript_include_tag 'appointment-modal-visibility-rules.js' %>
    <%= javascript_include_tag 'jobs.js' %>
    <%= javascript_include_tag 'baguetteBox' %>
    <%= render partial: "shared/image_upload" %>

<%#
require "google/cloud/logging"
logger.info "Hello World!"
logger.error "Oh No!"
%>

//Setting these variables here is how the new appointment modal can know hwich employee name and employee id to automatically put into the employees field on the job modal. Gets referenced in fullcalendar-render.js
var currentEmployeeName = '<%=@employee.full_name%>';
var currentEmployeeId = '<%=@employee.id%>';
var currentBusinessId = '<%=@employee.business.id%>';//WARNING: Action Cable message notifications depends on this ID. See sms-notification.js. 
var currentBusinessName = '<%=@employee.business.name%>'; 

$(function(){
    <% if @appointment %> 
        //This is where if an appointment is set in the settings, we load the appointment modal with the correct settings.
        $.get({
            url: `/employee_jobs/details/<%=@appointment%>.json?breadcrumb=true`,
            success(data){
                calendar.gotoDate(data.time_start);
                setAppointmentFromEmployeeJobData(data)
                modalAppointmentContext.toggleModal();
                <%# byebug %>
                setAptModalForEditExistingEmployeeJob(data, <%=@appointment%>, modalAppointmentContext.getCurrentJobId(), modalAppointmentContext.getCurrentCustomerId());
            }
        })
    <% end %> 
    $('#office-location').select2();
    new QuerySelect('print_daily_appointments', 
        '/branches.json', 
        null, 
        SelectResultsTransform("name"),
        null);

    // $('.draggable-el').click(function(event){
    //     jobRequestClicked(event);
    // });
});

<% end %>

<% text_template = defined?(text_template) ? text_template : [] %>

<%= @business_name %>

New Job

Customer

×

<% if current_business.employee_job_type_ids.length > 0 %>

               Appointment Type

               Sales Rep

          <% end %>

New..

;' data-color_hex='<%=color.color%>' data-action='' data-color_id=<%=color.id%>><%= color.name %>

Clear

<%= form_with(model: job, local: true, id: 'job-form', html: {style: 'width: 100%;'}) do |form| %>

      <%= form.hidden_field :id, value: job.id %>

        <%= form.fields_for :customer do |customer_form| %>
        <%= customer_form.hidden_field :business_id, value: job.business_id %>
        <%= customer_form.hidden_field :id %>
        <%= customer_form.hidden_field :marketing_source_id, value: job.customer.marketing_source_id %>

            Customer Search

<%# Customer Name: Editable by clicking on the field, would update their name %>

            <%= customer_form.label :first_name, class: 'text-label' %>
            <%= customer_form.text_field :first_name, class: 'form-control', onchange: "update_appointment_params('customers','first_name','job_customer_attributes_id')" %>

            <%= customer_form.label :last_name, class: 'text-label' %>
            <%= customer_form.text_field :last_name, class: 'form-control', onchange: "update_appointment_params('customers','last_name','job_customer_attributes_id')" %>

               class="remove-mobile-longpress-menu">


              <% if !current_employee.business.twilio_number.nil? %>

' data-evaluated-url='<%=t.evaluated_url(current_employee&.first_name)%>' data-unevaluated-body='<%=t.body%>'> <%=t.title%>

New..

<% end %>

            <%= customer_form.label :phone, class: 'text-label' %>
            <%= customer_form.text_field :phone, class: 'phone_mask form-control', onchange: "update_appointment_params('customers','phone','job_customer_attributes_id')" %>

            <%= customer_form.label :email, class: 'text-label' %>
            <%= customer_form.text_field :email, class: 'form-control', onchange: "update_appointment_params('customers','email','job_customer_attributes_id')" %>

        <%= form.fields_for :location do |customer_location_form| %>
        <%= customer_location_form.hidden_field :id %>
        <%= customer_location_form.hidden_field :customer_id %>

New..

            <%= customer_location_form.label :street_address, class: 'text-label' %>
            <%= customer_location_form.text_field :street_address, class: 'form-control', onchange: "update_appointment_params('locations','street_address','job_location_attributes_id')" %>

            Bill Address?

          <%= customer_location_form.label :city, class: 'text-label' %>
          <%= customer_location_form.text_field :city, class: 'form-control', onchange: "update_appointment_params('locations','city','job_location_attributes_id')" %>

            <%= customer_location_form.label :zip_code, class: 'text-label' %>
            <%= customer_location_form.text_field :zip_code, class: 'form-control', onchange: "update_appointment_params('locations','zip_code','job_location_attributes_id')" %>

            <%= customer_location_form.label :state, class: 'text-label' %>
            <%= customer_location_form.text_field :state, class: 'form-control', onchange: "update_appointment_params('locations','state','job_location_attributes_id')" %>

<% end %>

             Private Job Notes
            <%= form_group(form, job, :notes, :text_area, label: false) %>

              How did they hear about us?

Invoices/Estimates

          <% for i in 0..2 %>

"> <%# https://stackoverflow.com/a/59507920/6374022 %>

                -title" title="View this Invoice" class="save_changes_before">

-total">

              -send" href="javascript:void(0)" title="Email to Customer" class="save_changes_before">

              -stripe" href="javascript:void(0)" title="Pay Online" class="save_changes_before">

              -mark-as-paid" href="javascript:void(0)" title="Mark as Paid" class="save_changes_before">

<% end %>

                 More (Old)..

          <% for i in 0..2 %>

"> <%# https://stackoverflow.com/a/59507920/6374022 %>

                -title" title="View this Invoice" class="save_changes_before">

-total">

              -send" href="javascript:void(0)" title="Email to Customer" class="save_changes_before">

              -stripe" href="javascript:void(0)" title="Pay Online" class="save_changes_before">

              -mark-as-paid" href="javascript:void(0)" title="Mark as Paid" class="save_changes_before">

<% end %>

          <%= form.fields_for :employee_jobs do |assign_employee_form|%>

               Appointment for Employee(s)

              <%= form_group(assign_employee_form, job, :time_start, :datetime_local_field,
                              options: {:minute_step => 30, :start_hour => 8, :end_hour => 19}) %>

              <%= form_group(assign_employee_form, job, :time_end, :datetime_local_field,
                              options: {:minute_step => 30, :start_hour => 8, :end_hour => 19}) %>

            <%= form_group(assign_employee_form, job, :date, :date_field) %>
            <%= form_group(assign_employee_form, job, :id) %>
            <%= form_group(form, job, :location_id) %>
            <%= form_group(form, job, :customer_id) %>
            <%= form_group(form, job, :customer_contact_id) %>
            <%= form_group(form, job, :job_request_id) %>
            <%= form_group(assign_employee_form, job, :employee_id) %>
            <%= form_group(form, job, :owner_id) %>
            <%= form_group(assign_employee_form, job, :employee_job_type_id) %>
            <%= form_group(assign_employee_form, job, :appointment_color_id) %>

<% end %>

                Cancel

                Delete

                Delete Request

<%= form.submit :Save, id: :submitnewjob, class: "btn btn-company-primary", onclick: "saveButtonClick(this)" %>

              Notify

<% end %>

  <%= content_for :footer_scripts do %>
  <%= javascript_include_tag 'job-form.js'%>

    $(function(){
      $('#toggle-search-customer').on('click', function(event){
        $('#customer-search-fields').toggle();
        $('#search-icon').toggle();
        $('#search-minus-icon').toggle();
      });
      new EmployeeSelect('employees_select', function(e){}, {multiple: "multiple"});
    });

    function update_appointment_params(table,column,id_name){

    //03/13/2023 -- temporarily disabling this due to an issue if a user accidentally deletes something out and tabs out, it automatically saves the deletion. The UI/UX needs to be improved
    // with a confirmation before we can re-enable this.

    //See Monday.com issue: https://kody-k.monday.com/boards/2275661080/pulses/4140641090

    // var parent_id = $(`#${id_name}`).val();
    // InlineEditCallback(table, parent_id, column, null);
    }

    $(document).ready(function(){
      $("#job_notes").change(function(e){

        //03/13/2023 -- temporarily disabling this due to an issue if a user accidentally deletes something out and tabs out, it automatically saves the deletion. The UI/UX needs to be improved
        // with a confirmation before we can re-enable this.

        //See Monday.com issue: https://kody-k.monday.com/boards/2275661080/pulses/4140641090

        // I just don't want this to also impact the user experience, so I'm going to disable this one as well.

        // var parent_id = $('#job_id').val();
        // InlineEditCallback('jobs', parent_id, 'notes', null);
      });

      $("#appointment-type-search").change(function(e){
        InlineEditCallback('employee_jobs', $('#job_employee_jobs_attributes_0_id').val(), 'employee_job_type_id', null, $('#job_employee_jobs_attributes_0_employee_job_type_id').val());
      });

      $("#owner_id").change(function(e){
        InlineEditCallback('jobs', $('#job_id').val(), 'owner_id', null, $('#job_owner_id').val());
      });

      $("#marketing_source_id").change(function(e){
        InlineEditCallback('customers', $('#job_customer_attributes_id').val(), 'marketing_source_id', null, $('#job_customer_attributes_marketing_source_id').val());
      });
    });

    //function onDefaultAddress(event) {
    //  event.target.checked && update_appointment_params('locations','default_location','job_location_attributes_id')
    //}

    function saveButtonClick(e){
      e.disabled = true;
      $("#submit_button_outer").addClass("is-loading");
    }

  
<% end %>

json.partial! "jobs/job", job: @job

Jobs

<%= react_component "shared/TableDataNotEditable",
      title: "Jobs",
      attributes: ["Sales Rep", "Customer", "Date", "Address", "Job Summary"],
      data: @jobs.includes([:owner, :customer, :location]).map {|j| [
        j.id,
        j.owner&.full_name,
        {url: url_for(j.customer), title: j.customer&.full_name},
        j.employee_jobs&.first&.start,
        {url: "/jobs/#{j.id}", title: j.location&.display_address},
        j.notes&.split('\n')&.first,
      ]},
      basePath: '/jobs'%>
<%= render partial: 'shared/paginate', locals: {resource: @jobs} %>

View history for job <%= @job.id %>

      Resource
      Resource ID
      Name
      Time
      Employee
      Notes



    <% @events.each do |event| %>

        <%= event.resource %>
        <%= event.resource_id %>
        <%= event.name %>
        <%= event.created_at.strftime('%Y-%m-%d %H:%M:%S') %>
        <%= Employee.find(event.employee_id)&.first_name %>
        <%= event.notes %>

    <% end %>

    <%= link_to @job, title: 'Back' do %>

    <% end %>

      <%= form_with(model: job, local: true, id: 'job-form', html: {style: 'width: 100%;'}) do |form| %>
        <%= form.hidden_field(:create_invoice, :value => params[:new_invoice]) %>

               Sales Rep

               Status

                Customer Search

                 <%= form.text_field :customer_id %>

                  Location

                   <%= form.text_field :location_id %>

                  Contact

                   <%= form.text_field :customer_contact_id %>

               Job Summary:
              <%= form_group(form, job, :notes, :text_area, label: false, value: @job.notes) %>

            <%= form_group(form, job, :owner_id) %>
            <%= form_group(form, job, :job_status_id) %>

<%= form.submit :submit, id: :submitnewjob, class: "btn btn-company-primary" %>

<% end %>

<%= content_for :footer do %>
  <%= render :partial => 'customers/customer_contact_modal' %> <%# We want to be able to add an on success javascript callback here. %>
  <%= render :partial => 'locations/location_modal' %> <%# We'll have to append to the form when we submit the location_modal the customer_id & business_id %>
  <%= render :partial => 'customers/customer_modal' %>
<% end %>

<% content_for :footer_scripts do %>
<%= javascript_include_tag 'job-form.js'%>
<%= javascript_include_tag 'jobs.js' %>

 
  $(function(){
    <% if @job&.customer %>
      SetSelect2Option("customer-name-search", "<%= @job.customer.full_name %>", "<%= @job.customer.id %>");
    <% end %> 
    <% if @job&.location %> 
      SetSelect2Option("customer-location-search", "<%= @job.location&.display_address %>", "<%= @job.location&.id %>");
    <% end %> 
    <% if @job&.customer_contact %> 
      SetSelect2Option("customer-contact-search", "<%= @job.customer_contact&.full_name %>", "<%= @job.customer_contact&.id %>");
    <% end %>   
    <% if @job&.job_status %>
      SetSelect2Option("job_status_select", "<%= @job.job_status&.status %>", "<%= @job.job_status&.id %>");
    <% end %>
    <% if @job&.owner %>
      SetSelect2Option("owner_id", "<%= @job.owner&.full_name %>", "<%= @job.owner&.id %>");
    <% end %>  
  });

<% end %>

<% job = defined?(job) ? job : nil %>

  <% job.images.includes(:blob).each do |i| %>
    <%= render :partial => 'shared/gallery_images', locals: { params: {i: i, editable: true, delete_path: "/jobs/#{job.id}/image"} } %>
  <% end %>

<% if notice %>

    Success!
    <%= notice %>

<% end %>

        " alt="Field Rocket Logo">
        Field Rocket

Delete Your Data from Field Rocket

To request the deletion of your account and associated data in the Field Rocket app, please fill out the form below.

<%= form_with url: request_data_deletion_path, method: :post, class: "space-y-6", data: { action: "submit->banner#success" } do |form| %>

            <%= form.label :name, "Your Name", class: "block text-sm font-medium text-gray-700" %>
            <%= form.text_field :name, required: true, class: "mt-1 appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" %>

            <%= form.label :email, "Your Email", class: "block text-sm font-medium text-gray-700" %>
            <%= form.email_field :email, required: true, class: "mt-1 appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" %>

            <%= form.label :message, "Additional Message (optional)", class: "block text-sm font-medium text-gray-700" %>
            <%= form.text_area :message, class: "mt-1 appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" %>

<%= form.submit "Submit Data Deletion Request", class: "w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" %>

<% end %>

Data Deletion Information

When you request data deletion, the following data associated with your account will be permanently deleted:

Personal information (name, email, etc.)

User-generated content (posts, comments, etc.)

App preferences and settings

Please note that certain data may be retained for a limited period to comply with legal obligations or for legitimate business purposes. This includes:

Transaction records (for financial and tax purposes)

Anonymized usage data (for analytics and improvement purposes)

If you have any further questions or concerns regarding data deletion, please contact our support team at kody@fieldrocket.us

Success

<%= content_for :footer_scripts do %>

  //document.addEventListener('DOMContentLoaded', function() {
  //  // Define the Banner controller
  //  window.bannerController = {
  //    success: function(event) {
  //      event.preventDefault();
  //      showSuccessBanner();
  //      // Submit the form after showing the success banner
  //      event.target.submit();
  //    }
  //  };
//
  //  // Attach the Banner controller to the form
  //  document.querySelector('form[data-action="submit->banner#success"]').addEventListener('submit', window.bannerController.success);
//
  //  // Function to show the success banner
  //  function showSuccessBanner() {
  //    var banner = document.getElementById('success-banner');
  //    banner.classList.add('translate-y-0');
  //    setTimeout(function() {
  //      banner.classList.remove('translate-y-0');
  //    }, 3000);
  //  }
  //});

<% end %>

        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            max-width: 75;
            margin: 0 auto;
            padding: 20px;
            background-color: #f4f4f4;
        }
        .container {
            background-color: white;
            border-radius: 8px;
            padding: 30px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        .logo {
            max-width: 200px;
            margin-bottom: 20px;
        }
        h1 {
            color: #4267B2;
            margin-bottom: 10px;
        }
        p {
            margin-bottom: 20px;
        }
        .fb-login-button {
            display: inline-flex;
            align-items: center;
            background-color: #1877f2;
            color: white;
            border: none;
            border-radius: 6px;
            padding: 0 16px;
            font-family: Helvetica, Arial, sans-serif;
            font-size: 18px;
            font-weight: bold;
            cursor: pointer;
            height: 44px;
            text-decoration: none;
            transition: background-color 0.3s ease;
        }
        .fb-login-button:hover {
            background-color: #166fe5;
        }
        .fb-login-button svg {
            margin-right: 10px;
            height: 20px;
            width: 20px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        th, td {
            text-align: left;
            padding: 12px;
            border-bottom: 1px solid #ddd;
        }
        th {
            background-color: #4267B2;
            color: white;
        }
        tr:hover {
            background-color: #f5f5f5;
        }
    

" width="150" alt="Stack">

Set up Facebook Marketing

Showcase your jobs on Facebook by posting them on your Facebook Business Page

            Login with Facebook

Connected Facebook Pages

<% if current_business.facebook_page_connections.any? %>

                    Page Name
                    Page Type
                    Facebook ID



   <% current_business.facebook_page_connections.each do |connection| %>

          <%= connection.name %>
          <%= connection.page_type %>
          <%= connection.facebook_id %>

      <% end %>

<% else %>

No Facebook pages are currently connected to this business.

<% end %>

Posts

<% if current_business.published_job_pages.any? %>

            Job Title
            Post
            Publish



    <% current_business.published_job_pages.where.not(generated_facebook_post: nil).order(created_at: :desc).each do |published_job_page| %>

            "> <%= published_job_page.title %>

                <%= published_job_page.generated_facebook_post %>
                <% if published_job_page.optimized_image_urls.present? %>

                    <% published_job_page.optimized_image_urls.split('|;|').each do |image_url| %>
                        " alt="Job Image" style="max-width: 15%; height: auto; margin: 5px 0;">
                    <% end %>

                <% end %>


            <% if published_job_page.facebook_post_id.nil? %>
                '); return false;">



                    Publish

            <% else %>
                ✅
            <% end %>


        <% end %>

<% else %>

No published job pages are currently available.

<% end %>

    function publishToFacebook(jobPageId) {
        // Implement the logic to publish the job page to Facebook
        console.log('Publishing job page to Facebook:', jobPageId);
        //$("#publishToFacebookButton").addClass("is-loading");

        $.post({
            url: `/published_job_pages/${jobPageId}/publish_to_facebook`,
            success(data){
                console.log("success server response: " + data);
                gritterSuccess("Success", "This article was published on Facebook");
                $("#publishToFacebookButton").removeClass("is-loading");
            },
            error(data){
            console.log("error server response: " + data);
                $("#publishToFacebookButton").removeClass("is-loading");
                gritterError("Error", "Couldn't publish this article to Facebook");
            }
        })
        // Add your AJAX call or other logic here to publish the job page to Facebook
    }

    window.fbAsyncInit = function() {
        // FB JavaScript SDK configuration and setup
        FB.init({
            appId      : '777131917379115', // FB App ID
            cookie     : true,  // enable cookies to allow the server to access the session
            xfbml      : true,  // parse social plugins on this page
            version    : 'v4.0' // uses graph api version v4.0
        });
    };

    // Load the JavaScript SDK asynchronously
    (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "https://connect.facebook.net/en_US/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));

function launchFBE() {
    FB.login(function (response) {
        if (response.authResponse) {
            const shortLivedToken = response.authResponse.accessToken;
            const userId = response.authResponse.userID;

            console.log("Made it back from FB!");
            gritterSuccess("Success!", "Success!");
            console.log(response);
            console.log(shortLivedToken);
            console.log(userId);

            // Exchange short-lived token for long-lived token
            fetch(`https://graph.facebook.com/v4.0/oauth/access_token?grant_type=fb_exchange_token&client_id=777131917379115&client_secret=2a29709e03373ee50a77d161ebdb2f94&fb_exchange_token=${shortLivedToken}`)
                .then(response => response.json())
                .then(data => {
                    const longLivedUserToken = data.access_token;
                    console.log('Long-lived user token:', longLivedUserToken);

                    // Fetch the list of user pages with the long-lived user token
                    fetchUserPages(userId, longLivedUserToken);
                })
                .catch(error => {
                    console.error('Error exchanging token:', error);
                    alert('An error occurred while exchanging the token.');
                });
        } else {
            console.log('User cancelled login or did not fully authorize.');
        }
    }, {
        scope: 'pages_read_engagement,pages_show_list,pages_manage_posts,public_profile, publish_video, pages_manage_metadata,business_management',
        extras: {
            "setup": {
                "external_business_id": "1",
                "timezone": "America/Los_Angeles",
                "currency": "USD",
                "business_vertical": "ECOMMERCE"
            },
            "business_config": {
                "business": {
                    "name": "Field Rocket"
                },
                "ig_cta": {
                    "enabled": true,
                    "cta_button_text": "Book Now",
                    "cta_button_url": "https://partner-site.com/foo-business"
                }
            },
            "repeat": false
        }
    });
}

function fetchUserPages(userId, longLivedUserToken) {
    fetch(`https://graph.facebook.com/v4.0/${userId}/accounts?access_token=${longLivedUserToken}`)
        .then(response => response.json())
        .then(data => {
            console.log('User Pages data:', data);

            // Process user pages
            processPages(data.data, userId, longLivedUserToken);

            // Fetch the business accounts and their pages
            fetch(`https://graph.facebook.com/me/businesses?access_token=${longLivedUserToken}`)
                .then(response => response.json())
                .then(data => {
                    console.log('Businesses data:', data);
                    // Process each business
                    data.data.forEach(business => {
                        fetchBusinessPages(business.id, userId, longLivedUserToken);
                    });
                })
                .catch(error => {
                    //console.error('Error fetching businesses:', error);
                    //alert('An error occurred while fetching businesses.');
                });
        })
        .catch(error => {
            //console.error('Error fetching user pages:', error);
            //alert('An error occurred while fetching user pages.');
        });
}

function fetchBusinessPages(businessId, userId, longLivedUserToken) {
    fetch(`https://graph.facebook.com/${businessId}/owned_pages?access_token=${longLivedUserToken}`)
        .then(response => response.json())
        .then(data => {
            console.log('Business Pages data:', data);
            // Combine this data with the user's pages data
            processPages(data.data, userId, longLivedUserToken);
        })
        .catch(error => {
            //console.error('Error fetching business pages:', error);
            //alert('An error occurred while fetching business pages.');
        });
}

function processPages(pages, userId, longLivedUserToken) {
    // Combine pages from multiple sources if necessary
    // Example: Store in a global variable or process immediately
    // Post this accessToken and pages data to /facebook_oauth_redirect
    fetch('/save_facebook_page_connections.json', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify({ access_token: longLivedUserToken, user_id: userId, pages: pages })
    })
    .then(response => response.json())
    .then(data => {
        gritterSuccess("Success!", "Success!");
        window.location.href = '/facebook_setup';
        if (data.success) {
            console.log('Access token and pages data successfully posted.');
            alert('Facebook account successfully linked.');
        } else {
            //gritterSuccess("Success!")
            //console.log('Failed to post access token and pages data.');
            //alert('Failed to link Facebook account.');
        }
    })
    .catch(error => {
        //console.error('Error:', error);
        //alert('An error occurred while linking Facebook account.');
    });
}

Set your Invoice Terms Here

These terms will show up at the bottom of all your invoices

            Invoice Terms
            <%= render partial: "/shared/text_editor", locals: {id: 'invoice-terms-editor', content: raw(current_business.invoice_terms)}%>

Set your Estimate Terms Here

These terms will show up at the bottom of all your estimates

            Estimate Terms
            <%= render partial: "/shared/text_editor", locals: {id: 'estimate-terms-editor', content: raw(current_business.estimate_terms)}%>

Save

<%= content_for :footer_scripts do %>

    $(function(){
        // var invoiceQuill = new Quill('#invoice-terms-editor', {
        //     theme: 'snow'
        // });
        
        // var estimateQuill = new Quill('#estimate-terms-editor', {
        //     theme: 'snow'
        // });

        $('#save-terms').click(function(e){
            $('.loader').show();            
            $.ajax({
                method: 'PUT',
                url: '/businesses/<%=current_business.id%>/update_attribute.json',
                data: {attribute: "invoice_terms", value: GetQuillHtml('invoice-terms-editor')},
                success: function(data){
                    $('.loader').hide();
                    gritterSuccess('Updated Invoice Terms', 'Successfully set invoice terms');
                },
                error: function(data){
                    $('.loader').hide();
                    gritterError("Couldn't Update Invoice Terms", "Couldn't Update Invoice Terms");
                }
            });

            $.ajax({
                method: 'PUT',
                url: '/businesses/<%=current_business.id%>/update_attribute.json',
                data: {attribute: "estimate_terms", value: GetQuillHtml('estimate-terms-editor')},
                success: function(data){
                    $('.loader').hide();
                    gritterSuccess('Updated Estimate Terms', 'Successfully set estimate terms');
                },
                error: function(data){
                    $('.loader').hide();
                    gritterError("Couldn't Update Estimate Terms", "Couldn't Update estimate Terms");
                }
            });
        });        
    })

<% end %>

<%# WARNING! Duplicate code in job_requests/_form.html.erb %>
<%= content_for :header do %>



<% end %>

Your images are being saved.. please wait for them to finish uploading before submitting!

Your images are saved! You can now submit. 👍

add_photo_alternate
Upload your images

Submit

<%= content_for :footer_scripts do %>

    const chunkSize = 64 * 1024 * 1024;
  const fileReader = new FileReader();
  let hasher = null;

  const imageBlobIdsToAttachToJobRequest = []; // This is an array with the image blob IDs that we need to pass as a parameter into job_requests so it can attach these images to the job_request after it's been created.
  //TODO: This is where I believe it shows the files.?

    function submitPreuploadedS3ImagesToServer(){
        console.log("Made it with these image blob IDs!");
        console.log(imageBlobIdsToAttachToJobRequest);
        $.post({
            url: "/attach_multiple_pre_uploaded_s3_blobs_to_business.json",
            data: { image_blob_ids: imageBlobIdsToAttachToJobRequest },
            success: function(response) {
            console.log("Images attached to business successfully!");
            
            window.location.href = "/view_images_and_assign_them_to_job";

            // Handle success response, e.g., show success message to user
            },
            error: function(jqXHR, textStatus, errorThrown) {
            console.error("Error attaching images to business:", textStatus, errorThrown);
            // Handle error, e.g., show error message to user
            }
        });
    }

  /**
  * This method takes the files that were selected, fetches pre-signed S3 urls so we can upload directly from the client for better performance.
  */
  async function get_file_name(input){
    const file_name = document.getElementById('image_holder');
    const uploadText = file_name.files.length > 1 ? 'Upload your images ('+file_name.files.length+' files)' : 'Upload your images ('+file_name.files[0].name+')';
    $('#file_name_show').html(uploadText);
    const previewContainer = document.querySelector('#upload-preview');
    previewContainer.innerHTML = ''; // Clear previous previews

    let uploadPromises = [];

    //disable the submit button until all images are finished being uploaded.
    document.getElementById('submitButton').disabled = true; // Re-enable the submit button
    // document.getElementById('submitButton').disabled = true; // Re-enable the submit button
    $('#imageUploadingLabel').show();
    $('#imagesDoneUploading').hide();

    $('#submitButton').addClass('is-loading');

    //TODO: how do we iterate over these images and upload them?
    // /jobs_requests/pre_signed_s3_url_for_uploading_images
    // Check if browser supports FileReader
    if (window.FileReader && input.files && input.files.length) {
      //?? We do it with all the images here.?
        for (let i = 0; i < input.files.length; i++) {

          const file = input.files[i];

          // const hex = await RNFS.hash(result.path, 'md5') //get the md5 hash for this image
          const hex = await readFile(file);
          // const base64 = Buffer.from(hex, 'hex').toString('base64') // get the base64 encoded for this image
          const base64 = buffer.Buffer.from(hex, "hex").toString('base64');
          const randomGuid = Math.random().toString(36).substr(2, 5); //get a randomGuid for the image name
          const extensionForImage = getExtenstionFromMimeType(file.type) //get the extension for the image

          const fileHash = {
            filename: file.name || randomGuid + extensionForImage,
            byte_size: file.size, 
            checksum: base64,
            content_type: file.type
          };

          let uploadPromise = new Promise((resolve, reject) => {
            $.ajax({
              type: "POST",
              url: "/businesses/pre_signed_s3_url_for_uploading_images.json",
              data: fileHash,
              success: function(data, textStatus, jqXHR) {
                console.log(data);
                // debugger;  // Uncomment if you need to pause execution here

                //PREVIEW IMAGE SO USER CAN SEE WHAT THEY ARE UPLOADING
                if (file.type.startsWith('image/')) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        const img = document.createElement('img');
                        img.src = e.target.result;
                        img.alt = "Preview image";
                        img.style.width = '100px';  // or any desired preview size
                        
                        const div = document.createElement('div');
                        div.id = data["key"];
                        div.className = "is-loading";
                        
                        div.appendChild(img);           // Append the img to the div
                        previewContainer.appendChild(div);  // Append the div to the previewContainer
                    };
                        // $('#upload-preview').addClass('is-loading');

                    reader.readAsDataURL(file);
                } else if (file.type === 'application/pdf') {
                  //TODO: Turn iFrame into document.createElement('iframe')
                  // <iframe src="" title="" align="top" width="100%" frameborder="0" scrolling="auto" target="Message"></iframe>
                  const reader = new FileReader();
                    reader.onload = function(e) {
                        const iframe = document.createElement('iframe');
                        iframe.src = e.target.result;
                        iframe.title = "Preview PDF";
                        iframe.align = "top";
                        iframe.width = "100%";
                        iframe.frameBorder = "0";
                        iframe.scrolling = "auto";
                        iframe.target = "Message";

                        const div = document.createElement('div');
                        div.id = data["key"];
                        div.className = "is-loading";

                        div.appendChild(iframe);           // Append the iframe to the div
                        previewContainer.appendChild(div);  // Append the div to the previewContainer                  
                      }
                  }
                
                imageBlobIdsToAttachToJobRequest.push(data["signed_id"]);

                const signedId = data["signed_id"];
                
                //const hiddenInput = $('<input/>', {
                //  type: 'hidden',
                //  name: 'job_request[images][]', // This name matches the parameter you're allowing in your controller
                //  value: signedId
                //});
                uploadToS3(data, file, resolve, reject);
              },
              error: function(jqXHR, textStatus, errorThrown) {
                console.log("Error uploading s3 blob!");
                console.log(textStatus, errorThrown);
              }
            });
          });
        uploadPromises.push(uploadPromise);
      }
      // Wait for all the images to be uploaded before re-enabling the submit button
      // await Promise.all(uploadPromises);
      // document.getElementById('submitButton').disabled = false; // Re-enable the submit button
      await Promise.all(uploadPromises)
        .then(() => {
            console.log('All uploads complete!');
            document.getElementById('submitButton').disabled = false; // Re-enable the submit button
            $('#submitButton').removeClass('is-loading');
            $('#imageUploadingLabel').hide();
            $('#imagesDoneUploading').show();
        })
        .catch(error => {
            console.error('Some uploads failed:', error);
            document.getElementById('submitButton').disabled = false; // Re-enable the submit button
            $('#submitButton').removeClass('is-loading');   
            $('#imageUploadingLabel').hide();     
            $('#imagesDoneUploading').show();    
            // Handle the error - maybe inform the user that some uploads failed.
      });
    }
  }

  function uploadToS3(presignedData, file, resolveCallback, failureCallback) {
      $.ajax({
          url: presignedData.url,
          type: 'PUT',
          contentType: presignedData.headers["Content-Type"],
          headers: {
              "Content-MD5": presignedData.headers["Content-MD5"]
          },
          processData: false, // Important, do not process data
          data: file,
          success: function() {
              console.log("Successfully uploaded to S3");
              $(`#${presignedData.key}`).removeClass("is-loading"); //done uploading.
              resolveCallback();
          },
          error: function(jqXHR, textStatus, errorThrown) {
              console.error("Error uploading to S3:", textStatus, errorThrown);
              failureCallback();
          }
      });
  }

// This is how you would call the function inside your success callback:
// uploadToS3(data, file);

  function hashChunk(chunk) {
    return new Promise((resolve, reject) => {
      fileReader.onload = async(e) => {
        const view = new Uint8Array(e.target.result);
        hasher.update(view);
        resolve();
      };

      fileReader.readAsArrayBuffer(chunk);
    });
  }

  const readFile = async(file) => {
    if (hasher) {
      hasher.init();
    } else {
      hasher = await hashwasm.createMD5();
    }

    const chunkNumber = Math.floor(file.size / chunkSize);

    for (let i = 0; i <= chunkNumber; i++) {
      const chunk = file.slice(
        chunkSize * i,
        Math.min(chunkSize * (i + 1), file.size)
      );
      await hashChunk(chunk);
    }

    const hash = hasher.digest();
    return Promise.resolve(hash);
  };

  function getExtenstionFromMimeType(mimeType) {
      const mimeToExtensionMap = {
          'image/jpeg': '.jpg',
          'image/png': '.png',
          'image/gif': '.gif',
          'image/webp': '.webp',
          'image/tiff': '.tiff',
          'image/bmp': '.bmp',
          // Add other mappings as needed
      };

      return mimeToExtensionMap[mimeType] || ''; // return empty string if mimeType is not in the map
  }    

<% end %>

<% @body_class = 'layout-login-centered-boxed' %>

      " width="150" alt="Stack">
      Field Rocket

Create an account

  <%= form_for @business do |f| %>

      <%= form_group(f, @business, :subscription_id, value: @subscription&.id) %>

Business Info

Name:

<%= form_group(f, @business, :name, :text_field, options: {placeholder: "Example LLC"}, label: false)%>

Email Address:

<%= form_group(f, @business, :email, :text_field, options: {placeholder: "office@examplellc.com"}, label: false) %>

Business Phone Number

<%= form_group(f, @business, :phone, :phone_field, options: {placeholder: "(000) 000-0000"}, label: false) %>

Business Location Info

Street Address:

<%= form_group(f, @business, :street_address, options: {placeholder: "123 Example Avenue, Unit 101"}, label: false) %>

State:

<%= form_group(f, @business, :state, :select, options: {placeholder: "state here.."}, select_options: state_options, label: false) %>

City:

<%= form_group(f, @business, :city, options: {placeholder: "city here.."}, label: false) %>

Zip Code:

<%= form_group(f, @business, :zip_code, options: {placeholder: "zip code here.."}, label: false) %>

Admin User Info

      <%= f.fields_for :employees do |employee_form| %>

First Name:

<%= form_group(employee_form, @business, :first_name, options: {placeholder: "first name here.."}, label: false) %>

Last Name:

<%= form_group(employee_form, @business, :last_name, options: {placeholder: "last name here.."}, label: false) %>

Phone:

<%= form_group(employee_form, @business, :phone, :phone_field, options: {placeholder: "(000) 000-0000"}, label: false) %>

Email:

<%= form_group(employee_form, @business, :email, options: {placeholder: "you@examplellc.com"}, label: false) %>

Password:

<%= form_group(employee_form, @business, :password, :password_field, options: {placeholder: "Enter your password"}, label: false)%>

Confirm:

      <% end %>

          I accept Terms and Conditions

        Create Account

">Have an account? Login

<% end %>

<%= content_for :footer_scripts do %>

  $(function(){
    var formPageIndex = 0;
    let numFormPages = 2;    
    for (i = formPageIndex + 1; i <= numFormPages; i++){
      hideFormPage(i);
    }
  
    function showFormPage(num){      
      $(`.form-page-${num}`).show();
    }
  
    function hideFormPage(num){
      $(`.form-page-${num}`).hide();
    }      

    function nextPage(){
      hideFormPage(formPageIndex);
      formPageIndex < numFormPages ? formPageIndex++ : formPageIndex;
      showFormPage(formPageIndex);
    }

    function previousPage(){
      hideFormPage(formPageIndex);
      formPageIndex > 0 ? formPageIndex-- : formPageIndex;
      showFormPage(formPageIndex);
    }

    showFormPage(formPageIndex);
    $('#next-form-field').click(nextPage);
    $('#back-form-field').click(previousPage);

    $('#submitAccount').click(function(e){
      //confirm password matches and they agree to terms & services
      error = false;

      let password_confirmed = $('#business_employees_attributes_0_password').val() == $('#password_2').val();
      if (!password_confirmed){
        error = true;
        gritterError("Password didn't match!", "Make sure your confirmed password matches your given password");
      }
      if (!$('#terms').is(':checked')){
        error = true;
        gritterError("Terms not agreed", "You must agree to the terms and services to sign up");
      }

      if (error)
      {
        e.preventDefault(); //Don't submit if there was an error. 
      }
      else {
        $('.loader').show();
      }
    });

    //If the user hits enter, but their not on the last page, don't submit the form, just move to the next form page. 
    $('.form-control').keypress(function(e){      
      let enterKeyWasPressed = e.keyCode === 13;
      let userHasntNavigatedToLastPage = formPageIndex != numFormPages;
      if(enterKeyWasPressed && userHasntNavigatedToLastPage){
        e.preventDefault(); // Otherwise the form will be submitted
        nextPage(); //Just put the user on the next page instead of submitting the form
        return;
      }
    });  
  })

<% end %>

      Email
      Name
      First Name
      Last Name



    <% @businesses.each do |business| %>

        <%= business.email %>
        <%= business.name %>
        <%= business.employees&.first&.first_name %>
        <%= business.employees&.first&.last_name %>

    <% end %>

State of Utah

Rev. 133EF48

END USER LICENSE AGREEMENT

END USER LICENSE AGREEMENT

This End-User License Agreement (this “EULA”) is a legal agreement between you (“Licensee”) and Lightning LLC (“Licensor”), the author of Field Rocket, including all HTML files, XML files, Java files, graphics files, animation files, data files, technology, development tools, scripts and programs, both in object code and source code (the “Software”), the deliverables provided pursuant to this EULA, which may include associated media, printed materials, and “online” or electronic documentation.

By installing, copying, or otherwise using the Software, Licensee agrees to be bound by the terms and conditions set forth in this EULA. If Licensee does not agree to the terms and conditions set forth in this EULA, then Licensee may not download, install, or use the Software.

1. Grant of License

A) Scope of License. Subject to the terms of this EULA, Licensor hereby grants to Licensee a royalty-free, non-exclusive license to possess and to use a copy of the Software.

B) Installation and Use. Licensee may install and use an unlimited number of copies of the Software solely for Licensee's business use.

2. Description of Rights and Limitations

A) Limitations. Licensee and third parties may not reverse engineer, decompile, or disassemble the Software, except and only to the extent that such activity is expressly permitted by applicable law notwithstanding the limitation.

B) Update and Maintenance. Licensor shall provide updates and maintenance on the Software on an as needed basis.

C) Separation of Components. The Software is licensed as a single product. Its components may not be separated for use on more than one computer.

3. Title to Software. Licensor represents and warrants that it has the legal right to enter into and perform its obligations under this EULA, and that use by the Licensee of the Software, in accordance with the terms of this EULA, will not infringe upon the intellectual property rights of any third parties.

4. Intellectual Property. All now known or hereafter known tangible and intangible rights, title, interest, copyrights and moral rights in and to the Software, including but not limited to all images, photographs, animations, video, audio, music, text, data, computer code, algorithms, and information, are owned by Licensor. The Software is protected by all applicable copyright laws and international treaties.

5. No Support. Licensor has no obligation to provide support services for the Software.

6. Duration. This EULA is perpetual or until:

A) Automatically terminated or suspended if Licensee fails to comply with any of the terms and conditions set forth in this EULA; or

B) Terminated or suspended by Licensor, with or without cause.

In the event this EULA is terminated, you must cease use of the Software and destroy all copies of the Software.

7. Jurisdiction. This EULA shall be deemed to have been made in, and shall be construed pursuant to the laws of the State of Utah, without regard to conflicts of laws provisions thereof. Any legal action or proceeding relating to this EULA shall be brought exclusively in courts located in Salt Lake City, UT, and each party consents to the jurisdiction thereof. The prevailing party in any action to enforce this EULA shall be entitled to recover costs and expenses including, without limitation, attorneys’ fees. This EULA is made within the exclusive jurisdiction of the United States, and its jurisdiction shall supersede any other jurisdiction of either party’s election.

8. Non-Transferable. This EULA is not assignable or transferable by Licensee, and any attempt to do so would be void.

9. Severability. No failure to exercise, and no delay in exercising, on the part of either party, any privilege, any power or any rights hereunder will operate as a waiver thereof, nor will any single or partial exercise of any right or power hereunder preclude further exercise of any other right hereunder. If any provision of this EULA shall be adjudged by any court of competent jurisdiction to be unenforceable or invalid, that provision shall be limited or eliminated to the minimum extent necessary so that this EULA shall otherwise remain in full force and effect and enforceable.

10. warranty disclaimer. licensor, AND AUTHOR OF THE SOFTWARE, HEREBY EXPRESSLY DISCLAIM ANY WARRANTY FOR THE SOFTWARE. THE SOFTWARE AND ANY RELATED DOCUMENTATION IS PROVIDED “AS IS” WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING, WITHOUT LIMITATION, THE IMPLIED WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, OR NON-INFRINGEMENT. LICENSEE ACCEPTS ANY AND ALL RISK ARISING OUT OF USE OR PERFORMANCE OF THE SOFTWARE.

11. LIMITATION OF LIABILITY. LICENSOR SHALL NOT BE LIABLE TO LICENSEE, OR ANY OTHER PERSON OR ENTITY CLAIMING THROUGH LICENSEE ANY LOSS OF PROFITS, INCOME, SAVINGS, OR ANY OTHER CONSEQUENTIAL, INCIDENTAL, SPECIAL, PUNITIVE, DIRECT OR INDIRECT DAMAGE, WHETHER ARISING IN CONTRACT, TORT, WARRANTY, OR OTHERWISE. THESE LIMITATIONS SHALL APPLY REGARDLESS OF THE ESSENTIAL PURPOSE OF ANY LIMITED REMEDY. UNDER NO CIRCUMSTANCES SHALL LICENSOR’S AGGREGATE LIABILITY TO LICENSEE, OR ANY OTHER PERSON OR ENTITY CLAIMING THROUGH LICENSEE, EXCEED THE FINANCIAL AMOUNT ACTUALLY PAID BY LICENSEE TO LICENSOR FOR THE SOFTWARE.

12. Entire Agreement. This EULA constitutes the entire agreement between Licensor and Licensee and supersedes all prior understandings of Licensor and Licensee, including any prior representation, statement, condition, or warranty with respect to the subject matter of this EULA.

<% if @business.twilio_number.nil? || @business.twilio_number.empty? %>

<%= content_for :accordian_section_title, flush: true do %>

Find Your Phone Number

  <% end %>
  <%= content_for :accordian_section_content, flush: true do %>

Search by Area Code

Search for phone numbers based on the area code you enter here.

                        ">
                        search

                                Phone Number
                                City
                                Zip
                                Purchase

<% end %>
<%= render :partial => "shared/accordian_section", :locals => {collapse_id: "collapseEleven" }%>

<% end %>

<%= content_for :accordian_section_title, flush: true do %>

Phone Call Tree Settings

<% end %>
<%= content_for :accordian_section_content, flush: true do %>

Phone Call Tree Settings

This is where you'll define which phone numbers get forwarded to from your phone menu tree.. For example. if the user presses 1, then it will get forwarded to the first phone number entered here.

                    If User Presses 1, forward to:
                    "value="<%=%>">

                    If User Presses 2, forward to:
                    ">

                    If User Presses 3, forward to:
                    ">

                    If User Presses 4, forward to:
                    ">

                    If User Presses 5, forward to:
                    ">

                    If User Presses 6, forward to:
                    ">

                    If User Presses 7, forward to:
                    ">

                    If User Presses 8, forward to:
                    ">

                    If User Presses 9, forward to:
                    ">

                Save

<% end %>
<%= render :partial => "shared/accordian_section", :locals => {collapse_id: "collapseTen" }%>

<%= content_for :footer_scripts do %>

$("#savePhoneTreeSettings").submit(function(e) {
    e.preventDefault(); // avoid to execute the actual submit of the form.
    var form = $(this);
    var actionUrl = form.attr('action');
    $.ajax({
        type: "POST",
        url: "/savePhoneCallTreeSettings",
        data: form.serialize(), // serializes the form's elements.
        success: function(data)
        {
          gritterSuccess("Success", "Just successfully set the phone call tree settings.")
        },
        error: function(data)
        {
          gritterError("Error", "Could not set the phone call tree settings.")
        },
    });
});

$('#findAvailableTwilioPhoneNumbersButton').on('click', function(e){
    let areaCode = trimNonNumericValue($("#areaCodeToSearch").val());
    getTwilioAvailablePhoneNumbers(areaCode, function(data){
        console.log(data);
        available_phone_numbers = data["numbers"];
        gritterSuccess("Success", `Just successfully found ${available_phone_numbers.length} numbers matching the area code`)
        for (let i = 0; i < available_phone_numbers.length; i++){
            let phone_number = available_phone_numbers[i];
            let zip = phone_number.zip != null ? phone_number.zip : "Not Listed"
            console.log("Found Found Number:")
            console.log(phone_number);
            $('#availablePhoneNumbersTable > tbody').append(`<tr><td>${phone_number.number}</td><td>${phone_number.city}</td><td>${zip}</td><td> <button onclick="purchaseTwilioPhoneNumber('${phone_number.number}')"> Select </button> </td></tr>`);
        }
    });
});

    function getTwilioAvailablePhoneNumbers(areaCode, successCallback){
        $.get({
            url: `/available_twilio_phone_numbers?area_code=${areaCode}`,
            success(data){
                successCallback(data);
            },
            error(data){
                console.log(data);
            }
        });
    }

    function purchaseTwilioPhoneNumber(selectedPhoneNumber){
        if (confirm(`Are you sure you want to select ${selectedPhoneNumber}?`) == true) {
            $.post({
            url: `/purchase_twilio_phone_number`, //TODO: finish URL route, controller, and unit test for purchasing a phone number using Twilio API. 
            data: {
                number_to_purchase: selectedPhoneNumber,
            },
            success(data){
                gritterSuccess("Successfully selected phone number", `Successfully selected ${selectedPhoneNumber}`);
            },
            error(data){
                gritterError("Couldn't select phone number", `Couldn't select ${selectedPhoneNumber}. Contact support.`);
            }
        });
          } else {
            //Do nothing for now
        }
        
    }

<% end %>

You are now registered to receive customer payments through stripe!

Edit Business

<% job_request_url = @business.link_shortener_id.nil? ? "#{ENV["BASE_URL"]}/job_requests/new?secret_key=#{@business.secret_key}" : @business.shortened_url%>

"> Link for scheduling

    <%= link_to root_path, title: 'Back' do %>

    <% end %>

    <%= form_for(@business, url: business_path(@business), method: :patch) do |f| %>

<%= form_group(f, @business, :name, value: @business.name) %>

<%= form_group(f, @business, :phone, :phone_field, value: @business.phone) %>

<%= form_group(f, @business, :street_address, value: @business.street_address) %>

<%= form_group(f, @business, :city, value: @business.city) %>

<%= form_group(f, @business, :state, value: @business.state) %>

<%= form_group(f, @business, :zip_code, value: @business.zip_code) %>

      <% if @business.logo.attached? %>

<%= image_tag @business.logo, style: "max-width: 75%; max-height: 75%" %>

<% end %>

          <%= f.label :logo, options: {class: 'text-label'}%>
          <%= f.file_field :logo %>
          <%= content_tag :span, '', id: 'business-logo-file-field', class: 'form-control form-file-field' %>

          <%= f.label :phone_tree_greeting_mp3, options: {class: 'text-label'}%>
          <%= f.file_field :phone_tree_greeting_mp3 %>
          <%= content_tag :span, '', id: 'business-phonetree-mp3', class: 'form-control form-file-field' %>

<%= form_group(f, @business, :twilio_number, :phone_field, value: @business.twilio_number) %>

<%= form_group(f, @business, :sms_form_template, :text_area, value: @business.sms_form_template) %>

<%= form_group(f, @business, :twilio_missed_call_message, :text_area, value: @business.twilio_missed_call_message) %>

<%= form_group(f, @business, :notes, :text_area, value: @business.notes) %>

<%= form_group(f, @business, :invoice_number, :number_field, value: @business.invoice_number) %>

<%= form_group(f, @business, :estimate_number, :number_field, value: @business.estimate_number) %>

<%= f.submit 'Update Business', class: 'btn btn-company-primary' %>

<% end %>

Congrats! You're now synced with Quickbooks.

<% if @import_customers %>

Now Importing Customers from Quickbooks.. This may take a while.

Importing Products/Services Now..

<% end %>
<%= content_for :footer_scripts do %>

        //TODO: Here is where we're going to kick off importing the quickbooks customers..
        $(function(){
            <% if @import_customers %>
            $('#loader-customers').show();
            $.post({
                url: '/quickbooks_customer_import',
                success: function(data){
                    $('#loader-customers').hide();
                    $('#customer-import-message').hide();
                    gritterSuccess("Success", "Successfully imported all customers from quickbooks");
                    console.log("Now importing products/services too..");
                    importProductsServices();
                },
                error: function(data){
                    $('#loader-customers').hide();
                    $('#customer-import-message').hide();
                    gritterSuccess("Success", "Couldn't successfully import all customers from quickbooks, but we imported as many as we could");
                    console.log("Now importing products/services too..");
                    importProductsServices();
                }
            })
            <% end %> 
        })
        
    function importProductsServices(){        
        $('#loader-products-services').show();
        $('#products-import-message').show();
        $.post({
            url: '/quickbooks_products_services_import',
            success: function(data){
                $('.loader').hide();
                gritterSuccess("Success", "Successfully imported all products/services from quickbooks");                
                window.location = "/";
            },
            error: function(data){            
                $('.loader').hide();
                gritterSuccess("Success", "Couldn't import all products/services from quickbooks, imported as many as we could");
                window.location = "/";
            }
        })
    }
    
<% end %>
<%# current_business.import_quickbooks_products_services!%>

Reports

        Start Range

        End Range

Generate

New Customers

0

perm_identity

Earnings

$0

monetization_on

Download Invoices & Estimates

Download Appointments

Download Marketing Data

<%= content_for :footer_scripts do %>

    <%= javascript_include_tag 'reporting.js' %>

        $(function(){
            flatpickr('#marketing_sources_chart_start')
            flatpickr('#marketing_sources_chart_end')
            //Default the dates to the start and end of current month
            SetFlatpickr('marketing_sources_chart_start', moment().startOf('month').format());
            SetFlatpickr('marketing_sources_chart_end', moment().endOf('month').format());
            
            $('#generate_marketing_report').on('click', function(){ 
                let start = $('#marketing_sources_chart_start').val();
                let end = $('#marketing_sources_chart_end').val();
                drawMarketingPieChart(start, end);
                drawIncomeChart(start, end);
                drawIncomeByCategoryChart(start, end);
                drawRevenueBySalesRepChart(start, end);
                drawRevenueByMarketingSourceChart(start, end);
                drawProductionRevenueByEmployee(start, end); //exclude if they're the sales rep
                drawTimeClockedByEmployee(start, end); //exclude if they're the sales rep
            });

            $('#download_invoices').click(function(){//changes the href value before the click goes through
                let start = $('#marketing_sources_chart_start').val();
                let end = $('#marketing_sources_chart_end').val();

                $('#download_invoices').attr('href', `/reports/invoices?start=${start}&end=${end}`)
                $('#download_appointments').attr('href', `/reports/appointments?start=${start}&end=${end}`)
            });
            
            $('#download_appointments').click(function(){ //changes the href value before the click goes through
                let start = $('#marketing_sources_chart_start').val();
                let end = $('#marketing_sources_chart_end').val();
                $('#download_appointments').attr('href', `/reports/appointments?start=${start}&end=${end}`)
            });            

            $('#download_marketing').click(function(){ //changes the href value before the click goes through
                let start = $('#marketing_sources_chart_start').val();
                let end = $('#marketing_sources_chart_end').val();
                $('#download_marketing').attr('href', `/reports/marketing?start=${start}&end=${end}`)
            });            

        });
    
<% end %>

Lightning Service is now authorized to send emails from your gmail account

<% content_for :card_body do %>

Get Help

Something not working right? Please fill out your support request with your phone number and email, and we'll get back in touch as soon as possible!

<%= form_with local: true do |f| %>

                            <%= form_group f, nil, "email", 'text_field', options: {placeholder: "example@email.com"} %>

                            <%= form_group f, nil, "phone", :phone_field, options: {placeholder: "(000) 000-0000"} %>

<%= render partial: "shared/text_editor", locals: {id: 'support-ticket-message', placeholder: "Tell us what went wrong"}%>

                        Submit

<% end %>

<% end %>
<%= render "shared/card"%>

<%= content_for :footer_scripts do %>

    $('#submitTicket').click(function(e){        
        $('#support_message').val($('#support-ticket-message')[0].children[0].innerText);        
        if (!isValidEmail($('#email').val())){
            gritterError("Email Invalid", "You must put a valid email in the email address")
            e.preventDefault();
        }                
        else {
            $('.loader').show();
        }
    });

<% end %>

Attachments

  .gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Adjust the minmax values to change the image sizes */
    grid-gap: 15px; /* Adjust the spacing between images */
    padding: 15px;
  }
  .gallery img {
    width: 100%;
    height: auto;
    border: 1px solid #ccc; /* A light grey border around each image */
    box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.2); /* A subtle shadow for depth */
    border-radius: 4px; /* Slightly rounded corners for a softer look */
    object-fit: cover; /* This will cover the area of the grid item, cropping the image if necessary */
  }

<%#= will_paginate @grouped_attachments %>

  <% @attachments.each do |attachment| %>
    <% if attachment.record.present? && attachment.record.business_id == current_business.id %>
      <% record = attachment.record %>
      <% url = attachment.variant(resize: "500x500").processed if attachment.blob.content_type == 'image/heic' %>
      <% url ||= url_for(attachment) %>

        <%# Link to the associated record %>
        <%= link_to record do %>
          <%= image_tag url, alt: "#{record.class} Attachment" %>
        <% end %>

<% end %>
<% end %>

<% if @home_page.use_raw_html %>
<%= raw @home_page.raw_html %>
<% else %>

    <% if @home_page.business.logo.attached? %>
        <%= favicon_link_tag url_for(@home_page.business.logo), :rel => 'icon', :type=> 'image/png' if @home_page.business.logo.attached?%>
    <% end %>
    <%=@home_page.business.name%> | Website

    .logo {
        max-width: 50px;
        height: auto;
        }
    

<%= raw @home_page.navbar_html %>
<%= raw @home_page.raw_html %>
<%# render 'form', job_request: @job_request %>

<%= raw @home_page.footer_html %>

<%# render :partial => "public_website/footer_content" %>
<%# javascript_include_tag '3rdparty/flickity.pkgd.min.js' %>

<%= content_for :footer_scripts do %>

    document.addEventListener('DOMContentLoaded', function() {
        var menuButton = document.getElementById('menu-button');
        var mobileMenu = document.getElementById('mobile-menu');

        menuButton.addEventListener('click', function() {
            mobileMenu.classList.toggle('hidden');
        });

        // Initialize AOS
        AOS.init({
            duration: 1000,
            once: true,
            offset: 100
        });
    });

<% end %>

    document.addEventListener('DOMContentLoaded', function() {
        var menuButton = document.getElementById('menu-button');
        var mobileMenu = document.getElementById('mobile-menu');

        menuButton.addEventListener('click', function() {
            mobileMenu.classList.toggle('hidden');
        });

        // Initialize AOS
        AOS.init({
            duration: 1000,
            once: true,
            offset: 100
        });
    })

<% end %>

        <%= link_to employees_path, class: 'nav-link' do %>

            Employees
        <% end %>

<% if can? :read, Roster %>

        <%= link_to rosters_path, :class => "nav-link" do %>

            Rosters
        <% end %>

<% if current_employee.is_owner? %>

        <%= link_to(edit_business_path(current_business), class: "nav-link", title: 'Business Settings') do %>

        Business
        <% end %>

    <%= link_to(edit_employee_registration_path, class: "nav-link", title: 'Account' ) do %>

        Account
    <% end %>

    <%= link_to(destroy_employee_session_path, class: "nav-link", title: 'Logout', method: :delete) do %>

        Log Out
    <% end %>

<%= react_component 'business_images/BusinessImagesToAssign' %>

<% if @business&.stripe_access_code == nil%>
&scope=read_write&state=123456789"> Click here to register your business to accept payments from customers
<% else %>

You are already registered to accept online payments!

<% end %>

<% if !current_business.authenticated_with_quickbooks?%>

Connect & Sync with Quickbooks

"><%= image_tag "quickbooks-assets/C2QB_white_btn_med_hover.png", :class => "img-fluid" %>

New Invoices Uploaded into Quickbooks

Products/Services Imported from Quickbooks

Customers Imported from Quickbooks

<% else %>

You're Already Connected to Quickbooks

Connect Again?

"><%= image_tag "quickbooks-assets/C2QB_white_btn_med_hover.png", :class => "img-fluid" %>

<% end %>

Onboarding

Welcome to the onboarding page!

    Quickbooks Synced: <%= @quickbooks_synced ? "Yes" : "No" %>

       Go to Quickbooks

    Stripe Enabled: <%= @stripe_enabled ? "Yes" : "No" %>

       Go to Stripe

    Gmail Synced: <%= @gmail_synced ? "Yes" : "No" %>

       Go to Gmail

    Wordpress Connected: <%= @wordpress_connected ? "Yes" : "No" %>

       Go to Wordpress

    Facebook Connected: <%= @facebook_connected ? "Yes" : "No" %>

       Go to Facebook

    At least 3 Employees: <%= @employees_count ? "Yes" : "No" %>

       Manage Employees

    First Invoice Created: <%= @first_invoice_created ? "Yes" : "No" %>

       Create Invoice

    Received 5 Job Requests: <%= @job_requests_count ? "Yes" : "No" %>

       View Job Requests

    Logo Uploaded: <%= @logo_uploaded ? "Yes" : "No" %>

       Upload Logo

<%# content_for :header do %>
<%# stylesheet_link_tag 'get_started' %>
<%# end %>

<%= react_component 'register/GetStarted' %>
<%= content_for :footer do %>

    gtag('event', 'conversion', {'send_to': 'AW-634701749/FFwbCLf7ns8YELWP064C'});
    

<% end %>

You are now authorized to send invoices & estimates from your gmail account using Field Rocket

Integrations

      Name
      Connected?
      Connect Now

    <%# Quickbooks %>

         Quickbooks
         <%= current_business.authenticated_with_quickbooks? ? "Connected" : "Not Connected"%>
          Connect Now

    <%# Gmail %>

         Gmail
         <%= current_employee.gmail_token.nil? ? 'Not Connected' : "Connected"  %>

            <%= react_component 'invoices/EmailInvoiceIcon', {invoiceId: current_business.invoices.first.id } %>

Privacy Policy

Why we need access to your gmail account

        In order for you to send invoices, informational messages, and marketing emails to your customers, we need access to your gmail account.

        This is to provide you with the best service possible. Generally, we've found that customers like to see invoices come directly from your businesses's email account,
        and not from a random email account like: "LightningService@gmail.com" since they don't know what Lightning Service is or does.

When a customer receives an email directly from your own business account, they know exactly who the email is coming from.

To do that, however, we need permission to draft and send emails from your businesses account. With the permissions we request from Google, we don't any access to read or view any emails that you have in your inbox, we can only send them out.

To always see what is being sent from your gmail account, you can view the "send" tab when logged into gmail. From there, you can see all invoices, informational, and marketing emails that we've sent to customers on your behalf.

">
  <% if action_name != "show" %>
    <%= link_to "Show this llama bot", llama_bot, class: "rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
    <%= link_to 'Edit this llama bot', edit_llama_bot_path(llama_bot), class: "rounded-lg py-3 ml-2 px-5 bg-gray-100 inline-block font-medium" %>

<% end %>

New llama bot

<%= render "form", llama_bot: @llama_bot %>

<%= link_to 'Back to llama bots', llama_bots_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>

<% if notice.present? %>

<%= notice %>

<% end %>

<%= render @llama_bot %>

<%= link_to 'Edit this llama_bot', edit_llama_bot_path(@llama_bot), class: "mt-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>

<%= button_to 'Destroy this llama_bot', llama_bot_path(@llama_bot), method: :delete, class: "mt-2 rounded-lg py-3 px-5 bg-gray-100 font-medium" %>

<%= link_to 'Back to llama_bots', llama_bots_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>

<%#= File.read(path) %>
<%#= simple_format(File.read(path, encoding: 'UTF-8', invalid: :replace, undef: :replace, replace: '').gsub("\t", '    ').gsub(' ', ' ')) %>
<%
  #require 'charlock_holmes'
  require 'rouge'
  begin
    file_content = File.read(path)
    detection = CharlockHolmes::EncodingDetector.detect(file_content)
    utf8_content = CharlockHolmes::Converter.convert(file_content, detection[:encoding], 'UTF-8')
  rescue => e
    utf8_content = "Error reading file: #{e.message}"
  end

# TODO: Syntax highlighting for LLamaBot
  #formatter = Rouge::Formatters::HTML.new
  #lexer = Rouge::Lexer.guess_by_filename(path)
  #highlighted_content = formatter.format(lexer.lex(utf8_content))

%>

<%= simple_format(utf8_content.gsub("\t", ' ').gsub(' ', ' ')) %>

    bhexteriordesign






        body {
            font-family: 'Open Sans', sans-serif;
        }

        .container {
            max-width: 1230px;
            padding-left: 15px;
            padding-right: 15px;
            margin-left: auto;
            margin-right: auto;
        }

        .bgNavyBlue {
            background-color: #001f3f;
        }

        .bgHoverNavyBlue:hover {
            background-color: #001f3f;
        }

        .textNavyBlue {
            color: #001f3f;
        }

        .textPrimary {
            color: #F7C244;
        }

        .textTitle {
            color: #001f3f;
        }

        .hoverColorNavyBlue:hover {
            color: #001f3f;
        }

        .hoverBg:hover {
            background-color: #F7C244 !important;
        }

        .hoverColor:hover {
            color: #F7C244 !important;
        }

        .bgPrimary {
            background-color: #F7C244;
        }

        h1,
        h2,
        h3,
        h4 {
            font-family: 'Manrope';
        }
    

Call (385) 425-5989

Our Work

About

Frequently Asked Questions

                            Book a Free Bid

Exterior Renovation Services

Exterior Rendering

Contact

Breathtaking Remodels by
BH Exterior & Design

                    Has time aged your home's exterior? Cracked stucco, faded siding, and drafty windows can steal
                    your
                    curb appeal and energy efficiency. BH Exterior and Design is your trusted partner for
                    transformative
                    exterior remodels that beautify Utah homes.

                        Our Services

                            Get your free bid

                    We're not your typical contractors, we're exterior
                        design specialists who craft stunning, modern spaces tailored to your vision and budget.

Beautiful Exteriors

From Roof to Rock: Your One-Stop Shop for Utah's Most Beautiful Home Exterior Remodels.

We solve every exterior challenge:

Utah home exterior services

Roofing

                    Ditch the leaks and embrace weatherproof beauty with our diverse range of
                    styles and budget-friendly options.

Siding

Say goodbye to peeling vinyl and hello to
the modern, low-maintenance
appeal of Hardie^® siding. Durable, stunning, and Utah-weather-ready.

Stucco

We're the stucco experts! Breathe new life
into tired facades with expert
repairs or a complete refresh using our advanced, Utah-climate-defying blend.

Windows

Let the light and energy savings flood in
                    with top-quality,
                    energy-efficient window replacements. We have styles for every taste and budget.

Gutters & Downspouts

Protect your foundation and landscaping from
Utah's unpredictable weather
with seamless gutter installation and repairs.

Rock and Brick

Rock & Brick: Update your stone or brick
                    facade for a timeless, elegant
                    look. We specialize in repairs, repointing, and full replacements for a cohesive, lasting
                        finish

Porch & Deck Delights

Expand your living space and create an
outdoor oasis with our expert porch
and deck construction services. Imagine summer evenings on your new Utah retreat!

Utah Expertise

Breathtaking Results: Why BH is Your Exterior Remodel Partner.

We know Utah

                            We understand the unique challenges and opportunities of Utah's climate and building codes.
                            Your
                            project will be built to withstand anything Mother Nature throws its way.

Proven Utah Transformations

                            We've transformed countless Utah homes, and our stunning portfolio is proof of our
                            expertise.
                            See projects similar to yours!

Budget-Conscious Solutions

                            We work with your budget to create the exterior of your dreams, offering flexible financing
                            options and value-driven solutions.

Transparency & Communication

                            We keep you in the loop every step of the way, from initial consultation to final
                            inspection. No
                            surprises, just smooth sailing.

Stress-Free Process

                            We handle everything, from design and permits to construction and clean-up. You just relax
                            and
                            envision your new Utah haven.

Showcase

                        Below, you will find several illustrative examples demonstrating the remarkable transformations
                        our
                        skilled contractors and thoughtful design approaches have brought to various home exteriors,
                        enhancing
                        both their aesthetic appeal and functional utility.

                            Rendering services

                                Get Started

Frequently Asked Questions

                            Are you an exterior design remodel company?

                                Yes, we specialize in exterior design remodels.
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse porro autem qui hic quia
                                delectus enim fugit sapiente in laborum ipsam quaerat maxime sit veritatis incidunt,
                                ratione, nemo voluptate harum!

                            How do you charge for your services?

Our services are charged based on the scope of the project.

                            Does BH Exterior and Design have in-house employees?

Yes, we have a dedicated team of in-house employees.

                            Can you assist with the design for my home exterior renovations?

Absolutely, we provide comprehensive design services.

                            What exterior services & products do you offer?

We offer a wide range of exterior services including painting, siding, and more.

                            Do you paint over existing stucco?

                                Yes, we can paint over existing stucco depending on its
                                condition. Yes, we can paint over existing stucco depending on its
                                condition.Yes, we can paint over existing stucco depending on its
                                condition.

                    More Inquiries

From Old to Bold

                    Witness the dramatic transformations of our exterior renovations and see
                    how we turn dated exteriors into stunning, modern masterpieces.

Customer Jobs

Explore some of our recent
jobs.

Top Skim Coat & Fiber Cement
                            Siding in
                            Highland, UT
                            – Free Consultation with BH Exterior & Design

BH Exterior & Design Free Estimate A Look at Our Skim
                            Coat,
                            Fiber
                            Cement Siding Exterior Home Renovation A...

                            Mike Butler

Lindon UT Stucco & Wall Repair – Affordable BH Exterior Solutions

                            BH Exterior & Design Free Estimate Transforming Homes in Lindon, UT: A
                            Journey with BH Exterior & Design From Stucco...

                            Mike Butler

Affordable Chimney & Brick
                            Services in Salt
                            Lake
                            City: Free Consultation

BH Exterior & Design Free Estimate Salt Lake City
                            Homes: BH
                            Exterior &
                            Design's Chimney Repair, Waterproofing, and Brick Installation...

                            Mike Butler

Affordable Chimney & Brick
                            Services in Salt
                            Lake
                            City: Free Consultation

BH Exterior & Design Free Estimate Salt Lake City
                            Homes: BH
                            Exterior &
                            Design's Chimney Repair, Waterproofing, and Brick Installation...

                            Mike Butler

Affordable Chimney & Brick
                            Services in Salt
                            Lake
                            City: Free Consultation

BH Exterior & Design Free Estimate Salt Lake City
                            Homes: BH
                            Exterior &
                            Design's Chimney Repair, Waterproofing, and Brick Installation...

                            Mike Butler

Affordable Chimney & Brick
                            Services in Salt
                            Lake
                            City: Free Consultation

BH Exterior & Design Free Estimate Salt Lake City
                            Homes: BH
                            Exterior &
                            Design's Chimney Repair, Waterproofing, and Brick Installation...

                            Mike Butler

Get in touch

Email: info@boxerhomesllc.com

                                Phone:
                                (385)
                                    425-5989

Contact form

Please fill out the form below and let us know how we
can
help. We'll respond the same day.

Use online form

                        Locations

Location

615 W 9400 S #110, Sandy, UT 84070

Serving Northern Utah from Salt Lake City to Santaquin.

Boxer Homes

BH Exterior & Design is a division of Boxer Homes.

                        Contact

                        Call Today
                        (385) 425-5989

                        Email Us
                        mike@bhexteriordesign.com

                        Menus

Exterior Renovation Services

Exterior Rendering

Contact

Our Work

About

Frequently Asked Questions

        $(document).ready(function () {
            $(".owl-carousel").owlCarousel({
                loop: true,
                margin: 10,
                nav: true,
                dots: true,
                autoplay: true,
                autoplayTimeout: 3000,
                autoplayHoverPause: true,
                responsive: {
                    0: {
                        items: 1
                    },
                    600: {
                        items: 2
                    },
                    1000: {
                        items: 3
                    }
                }
            });
        });
    

        function toggleAccordion(id) {
            const accordion = document.getElementById(`accordion${id}`);
            accordion.style.maxHeight = accordion.style.maxHeight ? null : `${accordion.scrollHeight}px`;
        }
    

Editing llama bot

<%= render "form", llama_bot: @llama_bot %>

<%= link_to "Show this llama bot", @llama_bot, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
<%= link_to "Back to llama bots", llama_bots_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>

json.array! @llama_bots, partial: "llama_bots/llama_bot", as: :llama_bot

Y

YC - Welcome!

You're in a sandboxed enviroment. (No scaffolding, sorry). But, you can still use llamabot to redesign any of the following pages:

LLamaPress

An Open Sourced SaaS Builder for Non-Technical Builders

<%= notice %>

Web Pages

    <% @web_pages.order(updated_at: :desc).each do |web_page| %>
      <%= link_to web_page, class: "block border rounded-lg shadow-sm overflow-hidden hover:shadow-md transition-shadow duration-300" do %>

          <% if web_page.content.present? %>
            " class="w-full h-full" sandbox="allow-scripts">
          <% else %>

No preview available

<% end %>

            <% if web_page.business.logo.attached? %>
              <%= image_tag web_page.business.logo, class: "h-12 mr-3 object-cover" %>
            <% else %>

<%= web_page.business.name.first.upcase %>

<% end %>

<%= web_page.title %>

<%= web_page.business.name %>

<%= web_page.slug %>

      <% end %>
    <% end %>

<%= link_to 'New Web Page', new_web_page_path, class: "mt-6 inline-block bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" %>

Why Open Source?

Economic/Market Reasons

Costs to develop software are going to 0. This is because of Open Source and LLMs. We're going to beat everyone there by combining an open source CRM/CMS with LLMs.

User-Centric Reasons

Freedom and Control

Privacy

Community Driven Innovation and Collaboration

Cost Savings

Security

Customizability and Flexibility

Strategic Reasons

Deep Network Effects when people build plugins on top of your open source ecosystem (like WordPress).

Why Ruby on Rails?

Strong Open Source Community, Historic Popularity, and High Quality Documentation

Rails is Optimized for the Developer Experience, Which Means It's Optimized for LLMs to Understand It

Our Philosophy

Ruby on Rails is unequivocally the most superior framework for LLM code generation, bar none. Its design philosophy and features make it the perfect match for AI-driven development:

Reduced Token Usage

Rails' "convention over configuration" principle and Ruby's expressive syntax results in dramatically reduced code verbosity. Fewer tokens allows the LLM to "see" more of the code or context at once.

Semantic Clarity

Ruby's natural language-like syntax aligns perfectly with LLMs' language understanding capabilities.

Rapid Prototyping

Rails' scaffolding and generator tools are tailor-made for quick iterations - a crucial advantage when working with LLMs.

Built-in Best Practices

Rails' opinionated nature embeds industry best practices into its core. This frees up the LLM to focus on higher level abstractions, rather than getting bogged down in non-standard implementations

Comprehensive Ecosystem

The vast Ruby gems ecosystem provides a rich set of pre-built solutions.

Database Abstraction

ActiveRecord's powerful ORM capabilities allow LLMs to generate database interactions without getting bogged down in SQL specifics.

Testing Framework

Rails' integrated testing framework allows LLMs to simultaneously generate application code and corresponding tests.

RESTful Architecture

Rails' built-in support for RESTful design principles enables LLMs to generate well-structured, scalable APIs effortlessly.

Full-stack Capability

Rails' full-stack nature allows LLMs to generate cohesive, end-to-end solutions within a single framework.

Community and Documentation

The extensive Rails community and documentation serve as a rich knowledge base for LLMs.

Metaprogramming

Ruby's powerful metaprogramming capabilities enable LLMs to generate highly dynamic and adaptable code.

In Conclusion

Ruby on Rails isn't just a good choice for LLM code generation - it's the optimal choice. Its concise syntax, semantic clarity, and robust ecosystem create a synergy with AI that no other framework can match. As we move further into the age of AI-assisted development, Ruby on Rails stands out as the framework that will unlock the full potential of LLM-driven coding, revolutionizing the way we build and scale applications. Any other choice is simply settling for less.

How Do We Make Money?

We cater to less-technical users who need help building customizable software for cheap:

Hosting & Deployment

Support

Users Who Need Deeper Custom Development

A Marketplace for Plugins to Extend LlamaPress

What's Not Open Sourced?

Our Expert AI Agent, LlamaBot, that is Trained to be Your Expert CTO. LlamaBot is a Highly Opinionated Ruby on Rails and LlamaPress Expert. LlamaBot guides you through any LLamaPress project, and even acts as your very own custom software developer.

Even the most non-technical users can still build their own customized software solution on top of LlamaPress, using LlamaBot.

Our Vision

LlamaPress is optimized for end-to-end user experience — from the Least Technical User to the Most Technical.

Current State of Affairs: GTM

Our GTM is that we continue to use LlamaPress to build out our SaaS and marketing agency, along with helping new users build their own software on top of LlamaPress.

Our origin story: we had a massive problem with our own SaaS Startup/Agency.

Llama Press was built to solve a massive problem we had with our own SaaS Startup/Agency

Users needed customizations and new features all the time.

Building these features for users was conflicted. One user wants A, the other wants B.

Each company was slightly different. They'd want slightly different configurations and things.

Support was way too expensive, especially given many of their price points.

We built in a chat bot for our freemium tier users to interact with for support.

We began building in LLMs to take their requests and create a game plan for implementation.

We started letting the ChatBot implement changes under our supervision.

We found it was surprisingly good! And we realized it was because the code we were modifying was built on top of Ruby on Rails.

    Why Field Rocket? | Field Rocket

Field Rocket

            About
            Benefits
            FAQ
            Get Your Free Website

WHY FIELD ROCKET?

Built To Be Simple and Affordable For Small Business

Why Free?

Our app offers an array of fantastic free features. Only pay if you require multiple users or need advanced features. Learn more about our free offering.

Simple

Get started with Field Rocket for free, and upgrade when you need to. If you're not satisfied with one of our paid options, take us up on our money-back guarantee. Discover our free websites for contractors.

We're With You

If you have any questions or special requests feel free to contact us. Email us or call at (385) 340-3738. Learn about gathering online reviews.

Choose your plan

                Features
                Free
                Simple
                Grow
                Rocket




                Price
                $0/month
                $20/month
                $100/month
                $250/month


                Scheduling & timesheets
                ✓
                ✓
                ✓
                ✓


                Quotes/ estimates
                ✓
                ✓
                ✓
                ✓


                Invoicing & card payments
                ✓
                ✓
                ✓
                ✓


                Dedicated business phone number, 2-way text messaging, calls, spam filters
                ✓
                ✓
                ✓
                ✓


                QuickBooks integration
                ✓
                ✓
                ✓
                ✓


                Number of users
                1
                3
                10
                Unlimited


                Support
                Limited
                SMS, Email
                SMS, Email
                Prioritized. Call, SMS, email


                Website
                AI-generated website with Field Rocket domain
                Limited customization of AI-generated website
                Own domain, 2 posts per month
                Own domain, 2 posts per month


                Facebook
                -
                -
                2 posts per month
                2-3 posts per week



                Get started
                Buy now
                Buy now
                Buy now

          Privacy Policy
          Terms of Service
          Contact Us

    // <![CDATA[  <-- For SVG support
    if ('WebSocket' in window) {
        (function () {
            function refreshCSS() {
                var sheets = [].slice.call(document.getElementsByTagName("link"));
                var head = document.getElementsByTagName("head")[0];
                for (var i = 0; i < sheets.length; ++i) {
                    var elem = sheets[i];
                    var parent = elem.parentElement || head;
                    parent.removeChild(elem);
                    var rel = elem.rel;
                    if (elem.href && typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") {
                        var url = elem.href.replace(/(&|\?)_cacheOverride=\d+/, '');
                        elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());
                    }
                    parent.appendChild(elem);
                }
            }
            var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
            var address = protocol + window.location.host + window.location.pathname + '/ws';
            var socket = new WebSocket(address);
            socket.onmessage = function (msg) {
                if (msg.data == 'reload') window.location.reload();
                else if (msg.data == 'refreshcss') refreshCSS();
            };
            if (sessionStorage && !sessionStorage.getItem('IsThisFirstTime_Log_From_LiveServer')) {
                console.log('Live reload enabled.');
                sessionStorage.setItem('IsThisFirstTime_Log_From_LiveServer', true);
            }
        })();
    }
    else {
        console.error('Upgrade your browser. This Browser is NOT supported WebSocket for Live-Reloading.');
    }
    // ]]>

    2-tile - Beautiful Tiling & Remodeling

        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'custom-blue': '#2596be',
                    }
                }
            }
        }
    



   window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'AW-16612261287'); 

                Home
                Services
                About
                Contact

                Get Free Estimate

                    Text Us





                    (435) 500-0880

            Home
            Services
            About
            Contact

Beautiful Tiling & Remodeling, Done Right

Unlock The Beauty In Your Space. Your Home, Reimagined.

                            Get Free Estimate
                            Call (435) 500-0880

The Best Way to Update Your Space

At 2-Tile, we believe that every homeowner has the potential to transform their space into a masterpiece. We don't just lay tiles; we transform your home into a masterpiece of design and comfort. Specializing in bathroom remodels and beyond, we promise not just a service, but a complete metamorphosis of your living spaces.

Reimagine Your Bathroom Or Kitchen

Transform your everyday routine into an indulgent experience with bespoke tiling that reflects your unique taste.

Upgrade To A Modern, Customized Living Space

Elevate the heart of your home with stunning tile work that combines functionality with flair.

Your One Stop Shop

We handle every part of your project, from floors to backsplashes, let's reimagine your space with tiles that tell your story.

Our Work

Shower Remodel

Custom Bathroom Remodel

Full Bathroom Remodel and Tiling

Need Us To Come Take A Look?

We're On Our Way. Or, do you just have a question?

                    Call (435) 500-0880
                    Text (435) 500-0880

What Our Customers Say

"

This company is legendary. 5 stars. Showed up on time every day and got job done ahead time and under budget. Would recommend to any of my friends or family.

★★★★★

Raymond

                                ★★★★★

Alex went above and beyond the call of duty. He was utmost professional, knowledgeable, and efficient. And is good at what he does. He was prompt on answering calls. Alex was on the jobsite the same day. With reasonable prices. With exceptional business owners like Alex. 5 stars.

Jacob York

★★★★★

Alex did an excellent job for a fair price. He was very professional when coming to meet us and obtain the information and measurements needed for a bid. He helped make sure we chose the right tile and suggested solutions that helped keep the cost of the job down while maintaining quality. When the job was done there were no surprise expenses, the bid was perfectly accurate. As stated in previous reviews he has a wide range of well honed skills. We would highly reccomend him to anyone and we will be doing so to our friends and family.

Jace St. Pierre

        // Initialize AOS
        AOS.init({
            duration: 800,
            once: true
        });

        document.getElementById('menu-toggle').addEventListener('click', function() {
            document.getElementById('mobile-menu').classList.toggle('hidden');
        });
    

<%
  main_tables = %w[businesses customers invoices employees employee_jobs messages web_pages]

  @database_tables = main_tables
  @foreign_keys = @database_tables.flat_map do |table|
    ActiveRecord::Base.connection.foreign_keys(table)
  end
%>

Database Schema Visualization

  const canvas = document.getElementById('schema-graph');
  const ctx = canvas.getContext('2d');
  
  // Set canvas size dynamically
  canvas.width = Math.max(800, window.innerWidth - 100);
  canvas.height = Math.max(600, window.innerHeight - 200);

  // Define tables and relationships
  const tables = <%= @database_tables.to_json.html_safe %>;
  const relationships = <%= @foreign_keys.map { |fk| { from: fk.from_table, to: fk.to_table, column: fk.options[:column] } }.to_json.html_safe %>;

  // Calculate positions
  const tablePositions = {};
  const padding = 40;
  const tableWidth = 150;
  const tableHeight = 60;
  const columns = Math.ceil(Math.sqrt(tables.length));
  const rows = Math.ceil(tables.length / columns);

  tables.forEach((table, index) => {
    const col = index % columns;
    const row = Math.floor(index / columns);
    tablePositions[table] = {
      x: padding + col * (canvas.width / columns),
      y: padding + row * (canvas.height / rows)
    };
  });

  // Draw relationships first
  ctx.beginPath();
  relationships.forEach(rel => {
    const from = tablePositions[rel.from];
    const to = tablePositions[rel.to];
    
    if (from && to) {
      ctx.moveTo(from.x + tableWidth / 2, from.y + tableHeight / 2);
      ctx.lineTo(to.x + tableWidth / 2, to.y + tableHeight / 2);
    }
  });
  ctx.stroke();

  // Draw arrowheads and labels
  relationships.forEach(rel => {
    const from = tablePositions[rel.from];
    const to = tablePositions[rel.to];
    
    if (from && to) {
      // Draw arrowhead
      const angle = Math.atan2(to.y - from.y, to.x - from.x);
      ctx.save();
      ctx.translate(to.x + tableWidth / 2, to.y + tableHeight / 2);
      ctx.rotate(angle);
      ctx.beginPath();
      ctx.moveTo(0, 0);
      ctx.lineTo(-10, -5);
      ctx.lineTo(-10, 5);
      ctx.closePath();
      ctx.fill();
      ctx.restore();
      
      // Draw label
      const labelX = (from.x + to.x) / 2 + tableWidth / 2;
      const labelY = (from.y + to.y) / 2 + tableHeight / 2;
      ctx.fillText(rel.column, labelX, labelY);
    }
  });

  // Draw tables last
  ctx.font = '12px Arial';
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';

  Object.entries(tablePositions).forEach(([table, position]) => {
    ctx.fillStyle = '#f0f0f0';
    ctx.fillRect(position.x, position.y, tableWidth, tableHeight);
    ctx.strokeRect(position.x, position.y, tableWidth, tableHeight);
    
    ctx.fillStyle = '#000';
    ctx.fillText(table, position.x + tableWidth / 2, position.y + tableHeight / 2);
  });

  // Add this to log the relationships for debugging
  console.log('Relationships:', relationships);

json.partial! "llama_bots/llama_bot", llama_bot: @llama_bot

  Source Code


    body {
      font-family: Arial, sans-serif;
      background-color: #f4f4f9;
      color: #333;
      margin: 0;
      padding: 20px;
    }
    h1 {
      text-align: center;
      color: #4f4f4f;
    }
    .button {
      display: inline-block;
      padding: 10px 20px;
      margin: 20px 0;
      background-color: #f2ad56;
      color: white;
      text-decoration: none;
      border-radius: 5px;
      text-align: center;
    }
    .button:hover {
      background-color: #5b3300;
    }
    ul {
      list-style-type: none;
      padding: 0;
    }
    .directory, .file {
      padding: 10px;
      border: 1px solid #ddd;
      margin-bottom: 5px;
      border-radius: 5px;
      background-color: white;
    }
    .directory {
      font-weight: bold;
      background-color: #e7f3e7;
    }
    .file {
      cursor: pointer;
    }
    .file-content {
      display: none;
      margin-left: 20px;
      padding: 10px;
      border-left: 2px solid #ddd;
      background-color: #f9f9f9;
    }
  

    function toggleFileContent(id) {
      var content = document.getElementById(id);
      if (content.style.display === "none") {
        content.style.display = "block";
      } else {
        content.style.display = "none";
      }
    }
  

Source Code

" class="button" onclick="event.preventDefault(); alert('Coming soon!');">Download Source Code

<%= item[:path] %>

')"> <%= item[:path] %>

" class="file-content">
<%= render partial: 'file_content', locals: { path: item[:path] } %>

<% if notice.present? %>

<%= notice %>

<% end %>

Llama Bot -- Plugin Store

<%#= link_to 'New llama bot feature', new_llama_bot_path, class: "rounded-lg py-2 px-4 bg-blue-500 hover:bg-blue-700 text-white font-semibold transition duration-300" %>

      View Source Code

<%= render @llama_bots %>

Your Features:

<% controller_index_urls.each do |controller| %>

<%= controller[:name] %>

by Username

Feature description here. Can include what this plugin does or its benefits.

" class="text-blue-600 hover:text-blue-800 flex items-center">Open

4.8

<% end %>

<%= form_with(model: llama_bot, class: "contents") do |form| %>
<% if llama_bot.errors.any? %>

<%= pluralize(llama_bot.errors.count, "error") %> prohibited this llama_bot from being saved:

<%= error.full_message %>

<% end %>

<%= form.submit class: "rounded-lg py-3 px-5 bg-blue-600 text-white inline-block font-medium cursor-pointer" %>

<% end %>

Llama Bot Templates

BH Exterior

Exterior design template for beautiful homes

Field Rocket

Dynamic template for field services

2-Tile

Sleek two-tile design for various applications

json.extract! llama_bot, :id, :created_at, :updated_at
json.url llama_bot_url(llama_bot, format: :json)

    $(function(){
        <% if !allow_newlines %>
        $("#<%=inplace_id%>").keypress(function(e){ return e.which != 13; });
        <% end %>
        $("#<%=inplace_id%>").on("focusout", function(evt){
            attrInfo = evt.currentTarget.dataset;            
            const url = `/${attrInfo.resource}/${attrInfo.id}/update_attribute.json`;
            $.ajax({
                type: 'PUT',
                url: url,
                data: {attribute: attrInfo.attribute, value: evt.currentTarget.innerText},
                success: function(data){
                    const successMessage = `Successfully set ${attrInfo.attribute} to ${evt.currentTarget.innerText}`;
                    console.log(successMessage);
                    gritterSuccess("Successful Update", successMessage);
                },
                error: function(data){
                    const failureMessage = `Failed to set to ${evt.currentTarget.innerText}`;
                    console.log(failureMessage);
                    gritterError("Failed Update", failureMessage);
                },
            })
        });
    })

<%= content_for :modal_header, :flush => true do %>

        Browse
        Upload

<% end %>

<%= content_for :modal_body, :flush => true do %>

No Image Found

Click To Upload

<% end %>

<%= content_for :modal_footer, :flush => true do %>
Cancel
<% end %>

<%= content_for :footer_scripts do %>

        function imageClickHandler(event) {
            const imageUrl = event.target.src;
            const id = event.target.dataset.id;
            //Setting the input tags for the image urls
            $('#image_avatar').val('')
            $('#image_avatar_url_id').val(id);

            //Displaying selected image 
            $('#attached-image').attr('src',imageUrl);
            $('#attached-image-container').show();
            $('#image_upload').hide();
        }

        function selectButtonGrp(id) {
            $(`#btn-grp-${id}`).css('border-bottom', '1px solid gray');
            $(`#btn-grp-${id ? 0 : 1}`).css('border-bottom', 'none');
            $(`#btn-menu-${id}`).css('display', 'flex');
            $(`#btn-menu-${id ? 0 : 1}`).css('display', 'none');
        }

        $(document).ready(function(){
            $("#image_upload .close").click(function(){
                $("#image_upload").hide();
            });
        })
    
<%end%>
<%= render partial: "shared/generic_modal", locals: {modal_id: "image_upload"} %>

<% inplace_id = "inplace-#{resource}-#{attribute}-#{resource_id}"%>
<% allow_newlines = defined?(allow_newlines)? allow_newlines : nil %>
" data-attribute="<%=attribute%>" contenteditable="true" data-resource="<%=resource%>" data-id="<%=resource_id%>"><%=value%>
<%= content_for :footer_scripts do %>
<%= render partial: 'shared/inplace_edit.js.erb', locals: {inplace_id: inplace_id, allow_newlines: allow_newlines}%>
<% end %>

<% customer = defined?(customer) ? customer : nil %>

  <% customer.jobs.each do |j| %>
    <% j.images.includes(:blob).each do |img| %>

<%= j.location&.display_address %>

<%#

job images

%>
      <%= render :partial => 'shared/gallery_images', locals: { params: {i: img, editable: true, delete_path: "/jobs/#{j.id}/image"} } %>
    <% end %>
  <% end %>
  <% customer.jobs.includes([:job_request]).each do |j| %>
    <% if j.job_request.present? %>
      <% j.job_request&.images.includes(:blob).each do |img| %>
        <%#

job request images

%>
        <%= render :partial => 'shared/gallery_images', locals: { params: {i: img, editable: true, delete_path: "/job_requests/#{j.job_request&.id}/image"} } %>
      <% end %>
    <% end %>
  <% end %>
  <%#

%>

<%#

customer images

%>
    <% customer.images.includes(:blob).each do |img| %>
      <%= render :partial => 'shared/gallery_images', locals: { params: {i: img, editable: true, delete_path: "/customers/#{customer.id}/image"} } %>
    <% end %>

  <% customer.invoices.each do |invoice| %>
    <% invoice.images.includes(:blob).each do |img| %>
      <%#

invoice images

%>
      <%= render :partial => 'shared/gallery_images', locals: { params: {i: img, editable: true, delete_path: "/invoices/#{invoice.id}/image"} } %>
    <% end %>
  <% end %>

<%= content_for :footer_scripts do %>
<%# TODO: Figure out how to move all these stylesheet_link_tag's into fullcalendar/activate %>
<%# stylesheet_link_tag "fullcalendar/activate" %>
<%= stylesheet_link_tag "fullcalendar/core/main.css" %>
<%= stylesheet_link_tag "fullcalendar/daygrid/main.css" %>
<%= stylesheet_link_tag "fullcalendar/timegrid/main.css" %>
<%= stylesheet_link_tag "fullcalendar/premium/timeline/main.css" %>
<%= stylesheet_link_tag "fullcalendar/premium/resource-timeline/main.css" %>

<%= javascript_include_tag "fullcalendar/activate.js"%> <%# https://stackoverflow.com/a/9453470/6374022 %>

<%# Main rendering logic is in this script: %>
<%= javascript_include_tag "fullcalendar_helpers/activate.js" %> <%# https://stackoverflow.com/a/9453470/6374022 %>

    $(document).ready(function () {
        showEditableCalendar();
        <% if current_employee.branch.nil?%>
            <% current_employee.business.branches.each do |branch|%>
                setFullCalendarBranchResource("<%=branch.name%>"); //<%# We want to show all branches if an employee isn't assigned a branch %>
            <% end %> 
        <% else %> 
            setFullCalendarBranchResource("<%=current_employee&.branch&.name%>"); //<%# We want the employee to only see his branch as default%>
        <% end %> 
    });

<%= javascript_include_tag '3rdparty/mobile-jquery-draggable.js' %>
<% end %>

        <% if params[:editable].present? && params[:editable]%>
            " data-image-id="<%=params[:i].id%>">


        <%end%>
        " title="Download">
             <%= params[:i]&.blob.filename %>

        " href="<%=rails_blob_path(params[:i])%>">
            <% filetypes = %w(.jpg .gif .png .webp .tiff .psd .raw .bmp .heif .indo .jpeg .heic) %>
            <% if params[:i].blob.filename.to_s.downcase.end_with?(*filetypes) %>
                <%= image_tag(params[:i], class: 'w-100') %>
            <% elsif params[:i].blob.filename.to_s.end_with?('.pdf') %>
                " title="<%=params[:i].blob.filename%>" align="top" width="100%" frameborder="0" scrolling="auto" target="Message">
            <% else %>
                <%= image_tag(params[:i], class: 'w-100') %>
            <% end %>

<%= form_tag do %>

            <%= label_tag(:jobs_week_of, 'Week')%>
            <%= date_field(:jobs, 'week_of', value: Date.today.to_s(:db))%>

            <%= select_tag(:employee, options_for_select(@employee_options))%>

                Update

<% end %>

        December

            Sunday

                    Dec


                1

            Monday

                    Dec


                1

            Tuesday

                    Dec


                1

            Wednesday:

                    Dec


                1

            Thursday:

                    Dec


                1

            Friday:

                    Dec


                1

            Saturday:

                    Dec


                1

            8:00 AM
































            8:30 AM
































            9:00 AM
































            9:30 AM
































            10:00 AM
































            10:30 AM
































            11:00 AM
































            11:30 AM
































            12:00 PM
































            12:30 PM
































            1:00 PM
































            1:30 PM
































            2:00 PM
































            2:30 PM
































            3:00 PM
































            3:30 PM
































            4:00 PM
































            4:30 PM
































            5:00 PM
































            5:30 PM
































            6:00 PM
































            6:30 PM
































            7:00 PM

Job Details

×

Customer Details:

id:

first_name:

last_name:

city:

phone:

company:

notes:

state:

street_address:

zip_code:

email:

created_at:

updated_at:

url:

Job Details:

notes:

id:

bid_price:

notes:

street_address:

state:

city:

customer_id:

created_at:

updated_at:

url:

Close

<%= content_for :footer_scripts do %>
<%= javascript_include_tag 'job-scheduling-ui.js' %>
<%= javascript_include_tag 'job-customer-search-autofill.js' %>
<% end %>

<% unless resource.total_pages == 1 %>

<%= will_paginate resource, class:"text-muted-light", link_separator: "#{resource.offset + 1}-#{resource.offset + resource.length} of #{number_with_delimiter(resource.count, :delimiter => ',')} ", page_links: false, previous_label: 'arrow_back', next_label: 'arrow_forward' %>

<% end %>

<% id = defined?(id) ? id : "" %>
<% placeholder = defined?(placeholder) ? placeholder : nil %>
<% content = defined?(content) ? content : nil %>

>

<%= content_for :footer_scripts do %>

    var quill = new Quill('#<%=id%>', {
        <% if placeholder %>
        placeholder: "<%= placeholder%>",
        <% end %>        
        theme: 'snow'
    });

    <% if content %>
    SetQuillHtml('<%=id%>', `<%=content%>`);
    <% end %>

<% end %>

    Login

        window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-133433427-1');

        !function(f,b,e,v,n,t,s)
  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
  n.callMethod.apply(n,arguments):n.queue.push(arguments)};
  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
  n.queue=[];t=b.createElement(e);t.async=!0;
  t.src=v;s=b.getElementsByTagName(e)[0];
  s.parentNode.insertBefore(t,s)}(window, document,'script',
  'https://connect.facebook.net/en_US/fbevents.js');
  fbq('init', '327167911228268');
  fbq('track', 'PageView');

                Stack

Welcome back!

Login to access your Stack Account

Email Address:

Password:

                    Remember me

                Login

                Forgot password?

                Don't have an account? Sign up!

document.addEventListener('DOMContentLoaded', () => {
    const chatIcon = document.getElementById('chatIcon');
    const chatbotContainer = document.getElementById('chatbotContainer');
    const closeButton = document.getElementById('closeButton');
    const chatbotMessages = document.getElementById('chatbotMessages');
    const userInput = document.getElementById('userInput');
    const sendButton = document.getElementById('sendButton');

    const modal = document.getElementById('historyModal');
    const closeModal = document.getElementById('closeModal');
    const leftArrow = document.getElementById('leftArrow');
    const rightArrow = document.getElementById('rightArrow');

    closeModal.addEventListener('click', () => {
        modal.classList.add('hidden');
        modal.classList.remove('flex');
    });

    leftArrow.addEventListener('click', () => {
        // Implement left navigation logic
    });

    rightArrow.addEventListener('click', () => {
        // Implement right navigation logic
    });

    // Example: Open modal on button click
    // const openHistoryModalButton = document.getElementById('openHistoryModalButton');
    // openHistoryModalButton.addEventListener('click', openHistoryModal);

    let isOpen = false;
    let isLoading = false;
    let messages = [];

    function toggleChat() {
        isOpen = !isOpen;
        chatbotContainer.classList.toggle('hidden', !isOpen);
    }

    function addMessage(text, sender) {
        const messageDiv = document.createElement('div');
        messageDiv.className = `mb-2 p-2 rounded ${sender === 'bot' ? 'bg-blue-100 self-start' : 'bg-green-100 self-end'}`;
        messageDiv.textContent = text;
        chatbotMessages.appendChild(messageDiv);
        chatbotMessages.scrollTop = chatbotMessages.scrollHeight;
    }

    function showLoadingIndicator() {
        const loadingDiv = document.createElement('div');
        loadingDiv.id = 'loadingIndicator';
        loadingDiv.className = 'text-center p-2';
        loadingDiv.textContent = 'Thinking...';
        chatbotMessages.appendChild(loadingDiv);
    }

    function hideLoadingIndicator() {
        const loadingDiv = document.getElementById('loadingIndicator');
        if (loadingDiv) {
            loadingDiv.remove();
        }
    }

    async function sendMessage() {
        if (userInput.value.trim() === '' || isLoading) return;

        const userMessage = userInput.value;
        addMessage(userMessage, 'user');
        userInput.value = '';
        isLoading = true;
        showLoadingIndicator();
        let selectedElement = document.getElementById("selectedElementContent").innerHTML;
        try {
            const response = await fetch('/chatbot/message.json', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ 
                    message: userMessage, 
                    context: '<%=@view_path%>', 
                    selectedElement: selectedElement, 
                    webPageId: '<%=@web_page&.id%>'
                })
            });
            const data = await response.json();
            addMessage(data.response, 'bot');
        } catch (error) {
            console.error('Error sending message to ChatGPT:', error);
        } finally {
            isLoading = false;
            hideLoadingIndicator();
        }
    }

    chatIcon.addEventListener('click', toggleChat);
    closeButton.addEventListener('click', toggleChat);
    sendButton.addEventListener('click', sendMessage);
    userInput.addEventListener('keypress', (e) => {
        if (e.key === 'Enter') sendMessage();
    });

    function loadChatHistory() {
        let webPageId = '<%=@web_page&.id%>';
        if (webPageId) {
            //TODO: fetch Chat History from /web_page_histories IF this web_page_id is present in the URL
            fetch(`/web_pages/${webPageId}/histories.json`)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Network response was not ok');
                    }
                    return response.json();
                })
                .then(data => {
                    web_page_histories = data.web_page_histories;
                    web_page_histories.forEach(history => {
                        addWebPageHistoryToHistoryDrawer(history);
                        //addMessage(history.text, history.sender);
                    });
                });
        }
    }

    /**
     * Add entry to web page history to the history drawer.
     * @param {object} webPageHistory - The web page history to add.
     */
    function addWebPageHistoryToHistoryDrawer(webPageHistory) {
        const historyDrawer = document.getElementById('historyDrawer');
        const historyItem = document.createElement('div');
        historyItem.className = 'history-item cursor-pointer hover:bg-gray-100 p-2';
        //historyItem.textContent = `${webPageHistory.user_message} - ${new Date(webPageHistory.created_at).toLocaleString('en-GB', { hour: '2-digit', minute: '2-digit', day: '2-digit', month: '2-digit', hour12: false })}`;
        //historyItem.textContent = `${webPageHistory.user_message} - ${new Date(webPageHistory.created_at).toLocaleString('en-GB', { hour: '2-digit', minute: '2-digit', day: '2-digit', month: '2-digit', hour12: false })}`;
        historyItem.textContent = new Date(webPageHistory.created_at).toLocaleString('en-US', { hour: '2-digit', minute: '2-digit', month: '2-digit', day: '2-digit', hour12: false });
        historyItem.onclick = function() {
            const modal = document.getElementById('historyModal'); // Get modal element
            const mainIframe = document.getElementById('mainIframe');
            mainIframe.innerHTML = atob(webPageHistory.content);
            document.getElementById('userPrompt').innerHTML = webPageHistory.user_message;
            modal.classList.remove('hidden');
            modal.classList.add('flex');
            document.getElementById('restoreButton').setAttribute('llama-data-web-page-history-id', webPageHistory.id);
        };
        historyDrawer.appendChild(historyItem);
    }

    document.getElementById('restoreButton').addEventListener('click', function() {
        console.log('restoreButton clicked');
        // we need to do a POST with the webPageHistory.id to /web_pages/restore
        let webPageId = '<%=@web_page&.id%>';
        //QUESTION: how do I get this webpagehistory id?
        // we save it to the restoreButton so that when the user clicks on the history item.. we have the ID.
        
        const webPageHistoryId = document.getElementById('restoreButton').getAttribute('llama-data-web-page-history-id');

        fetch(`/web_pages/${webPageId}/restore.json?web_page_history_id=${webPageHistoryId}`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                web_page_history_id: webPageHistoryId
            })
        }).then(response => {
            if (response.ok) {
                return response.json();
            } else {
                throw new Error('Couldn\'t restore');
            }
        }).then(data => {
            alert('Web page restored');
            console.log('Web page restored:', data);
            location.reload();
        });
    });

    /**
     * Return Summary of Prompt so user understand chat history better.
     * @param {string} prompt - The original prompt from the user.
     * @returns {string} - A summary of the prompt.
     */
    function summarizePrompt(prompt){
        // Split the text into sentences
        const sentences = prompt.split('.');
        
        // Take the first two sentences
        const firstTwo = sentences.slice(0, 2);
        
        // Join them back together and trim whitespace
        let summary = firstTwo.join('.').trim() + '.';
        
        // Truncate to a maximum of 50 words
        const words = summary.split(/\s+/);
        if (words.length > 50) {
            summary = words.slice(0, 50).join(' ') + '...';
        }
        
        return summary;
    }

    // Initial bot message
    loadChatHistory();
    addMessage('What do you want to build?', 'bot');
});

document.addEventListener('DOMContentLoaded', () => {
    const menuToggle = document.getElementById('menu-toggle');
    const mobileMenu = document.getElementById('mobile-menu');

    menuToggle.addEventListener('click', () => {
        mobileMenu.classList.toggle('hidden');
    });
});

let inSelectionMode = false;
let selectedElementHTML = null;

function toggleSelectionMode() {
    inSelectionMode = !inSelectionMode;
    setExpandedToFalse(); // decrease chatbot size so that user can see more of the elements on the page.
    document.body.classList.toggle('selection-mode');
    console.log('Selection mode:', inSelectionMode ? 'ON' : 'OFF');
}

function handleElementSelection(event) {
    if (!inSelectionMode) return;
    event.preventDefault();
    event.stopPropagation();

    const selectedElement = event.target;
    console.log('Selected element:', selectedElement);

    // Remove the selection class from any previously selected element
    const previouslySelected = document.querySelector('.selected-element');
    if (previouslySelected) {
        previouslySelected.classList.remove('selected-element');
    }

    // Add selection class to the newly selected element
    selectedElement.classList.add('selected-element');

    // Here you can do whatever you want with the selected element
    window.lastSelectedElement = selectedElement;

    // Trigger a custom event
    const customEvent = new CustomEvent('elementSelected', { detail: selectedElement });
    document.dispatchEvent(customEvent);

    // Turn off selection mode after selecting an element
    toggleSelectionMode();
}

// Add necessary event listeners
document.addEventListener('click', handleElementSelection, true);

// Add some basic styles if they haven't been added yet
if (!document.getElementById('selection-mode-styles')) {
    const style = document.createElement('style');
    style.id = 'selection-mode-styles';
    style.textContent = `
        .selection-mode * {
            cursor: pointer !important;
        }
        .selection-mode *:hover {
            outline: 2px solid red !important;
        }
        .selected-element {
            position: relative;
        }
        .selected-element::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border: 4px solid #3B82F6;
            background-color: rgba(59, 130, 246, 0.1);
            pointer-events: none;
            z-index: 9999;
        }
    `;
    document.head.appendChild(style);
}
// Listen for custom elementSelected event
document.addEventListener('elementSelected', (e) => {
    selectedElementHTML = e.detail;
    
    let selectedElementContainer = document.getElementById('selectedElementContainer');
    let selectedElementContent = document.getElementById('selectedElementContent');
    if (selectedElementHTML != null && selectedElementContainer != null) {
        selectedElementContainer.style.display = 'block';
        selectedElementContent.innerHTML = selectedElementHTML.outerHTML;
        setSelectedElementContainerBackground(selectedElementHTML);
    }

    console.log('Element selected event:', selectedElementHTML);
});

// Add this to the end of the script
document.getElementById('closeSelectedElement').addEventListener('click', function() {
    console.log('Selected element closed');
    document.getElementById('selectedElementContainer').style.display = 'none';
    document.getElementById('selectedElementContent').innerHTML = '';
});

let isExpanded = false; // Change this to true
const chatbotContainer = document.getElementById('chatbotContainer');
const expandButton = document.getElementById('expandButton');

// Add this function to set the expanded size
function setExpandedSize() {
    isExpanded = true;
    chatbotContainer.style.width = '800px';
    chatbotContainer.style.height = '800px';
}

function setExpandedToFalse() {
    isExpanded = false;
    chatbotContainer.style.width = '480px';
    chatbotContainer.style.height = '576px';
}

// Call this function immediately after the page loads

expandButton.addEventListener('click', function() {
    isExpanded = !isExpanded;
    if (isExpanded) {
        setExpandedSize();
    } else {
        chatbotContainer.style.width = '480px';
        chatbotContainer.style.height = '576px';
    }
});

// Add this function to your existing JavaScript // this is for readability of the selected snippet 
function setSelectedElementContainerBackground(selectedElement) {
    const container = document.getElementById('selectedElementContainer');
    const content = document.getElementById('selectedElementContent');
    
    // Get the background color of the parent element
    let bgColor = window.getComputedStyle(selectedElement.parentElement).backgroundColor;
    
    // If the background is transparent, try to find the nearest parent with a background
    let parent = selectedElement.parentElement;
    while (bgColor === 'rgba(0, 0, 0, 0)' && parent.parentElement) {
        parent = parent.parentElement;
        bgColor = window.getComputedStyle(parent).backgroundColor;
    }
    
    // Set the background color of the container
    container.style.backgroundColor = bgColor;
    
    // Adjust text color for better contrast
    const rgb = bgColor.match(/\d+/g);
    if (rgb) {
        const brightness = (parseInt(rgb[0]) * 299 + parseInt(rgb[1]) * 587 + parseInt(rgb[2]) * 114) / 1000;
        content.style.color = brightness > 125 ? 'black' : 'white';
    }
}

// Add this near the end of the script
document.addEventListener('DOMContentLoaded', () => {
    const toggleImagesButton = document.getElementById('toggleImagesForUserToSelect');
    const imagesContainer = document.getElementById('imagesForUserToSelect');

    // Initially hide the images container
    imagesContainer.style.display = 'none';

    toggleImagesButton.addEventListener('click', () => {
        if (imagesContainer.style.display === 'none') {
            imagesContainer.style.display = 'block';
        } else {
            imagesContainer.style.display = 'none';
        }
    });
});

document.getElementById('closeHistoryDrawer').addEventListener('click', function() {
    document.getElementById('historyDrawer').classList.add('hidden');
});

            ""

— User's request

        Restore Selected Chat

What do you want to build?

                LLama Bot

                  ×

Chat History

                Send

<%= render partial: 'shared/chatbot/history_modal' %>
<%= render partial: 'shared/chatbot/chatbot_javascript' %>

        <% unless invoice&.job&.nil? %>
            <% invoice&.customer&.all_images&.each_with_index do |img, index| %>

]" value="<%=img.id%>"/>

<%="#{img.blob.filename.to_s[0,4]}...#{img.blob.filename.to_s.split('.').last}"%>

                        " href="<%= rails_blob_path(img) %>">
                            <% filetypes = %w(.jpg .gif .png .webp .tiff .psd .raw .bmp .heif .indo .jpeg .heic .HEIC .JPG .PNG .WEBP) %>
                            <% if img.blob.filename.to_s.end_with?(*filetypes) %>
                                <%= image_tag(img) %>

                            <% elsif img.blob.filename.to_s.end_with?('.pdf') %>
                                " title="<%= img.blob.filename %>" align="top" width="100%" frameborder="0" scrolling="auto" target="Message">
                            <% else %>
                                <%= image_tag(img, class: 'w-100') %>
                            <% end %>

            <% end %>
        <% end %>

<%= content_for :footer_scripts do %>
<%= stylesheet_link_tag 'gallery-clean', media: 'all' %>
<%= stylesheet_link_tag 'baguetteBox', media: 'all' %>
<%= javascript_include_tag 'baguetteBox' %>
<% end %>

    function initiateCheckoutJS() {
        $('#payment-modal-shadow').show()
        $('#payment_modal').modal();
        $("#card").focus();
        $('body').css('overflow', 'auto');

        // Fetching the session to token to proceed with the payment
        console.log('Fetching token to initiate payment')
        $.get({
            "url": "<%= generate_payment_session_token_url(@invoice)%>?secret_key=<%= @invoice.secret_key%>",
            "success": function(response) {
                const { body:token } = response;
                document.getElementById('token').value = token;
                transactionToken = token;
            },
            "error": function(error) {
                gritterError("Error", 'Something went wrong');
                console.log("Error", "Not able to generate token");
                console.log(error);
            }
        })
        return false;
    }

    function pay() {
        $('#payment_button').prop('disabled', true);
        const token = document.getElementById('token').value;
        const card = document.getElementById('card').value;
        const exp = document.getElementById('exp').value;
        const cvv = document.getElementById('cvv').value;
        const gettoken = document.getElementById('gettoken').value;
        const addtoken = document.getElementById('addtoken').value;
        const firstname = "<%= invoice.customer_to_invoice&.first_name %>";
        const lastname = "<%= invoice.customer_to_invoice&.last_name %>";
        const address = "<%= invoice.customer_to_invoice&.default_location&.street_address %>";
        const zip = "<%= invoice.customer_to_invoice&.default_location&.zip_code %>";
        const business_name = "<%= invoice.business.name %> Payment for Home Services";
        const merchanttxnid = document.getElementById('merchanttxnid').value;
        const invoice_id = <%= @invoice.id %>;
        const paymentData = {
            ssl_txn_auth_token: token,
            ssl_card_number: card,
            ssl_exp_date: exp,
            ssl_get_token: gettoken,
            ssl_add_token: addtoken,
            ssl_first_name: firstname,
            ssl_last_name: lastname,
            ssl_cvv2cvc2: cvv,
            ssl_merchant_txn_id: merchanttxnid,
            ssl_avs_address: address,
            ssl_avs_zip: zip,
            ssl_dynamic_dba: business_name
        };

        const callback = {
            onError: function (error) {
                gritterError("Error!", error);
                $('#payment_button').prop('disabled', false);
            },
            onDeclined: function (response) {
                gritterError("Declined!", JSON.stringify(response));
                console.log("Result Message=" + response['ssl_result_message']);
                $('#payment_button').prop('disabled', false);
            },
            onApproval: function (response) {
                $("#payment_button").removeClass("btn-primary");
                $("#payment_button").addClass("btn-success");
                $("#payment_button").text("Paid");
                console.log("Approval Code=" + response['ssl_approval_code']);
                const message = 'Payment Complete.';
                gritterSuccess("Success!", message);
                $("form#edit_invoice_"+invoice_id).submit();
            }
        };
        ConvergeEmbeddedPayment.pay(paymentData, callback);
        return false;
    }

<%# Input: Customer ID, Job ID. %>
<%# Input: Show all locations for the customer. Show the job location, and the billing location at the top. %>

<%= content_for :modal_header, :flush => true do %>

Manage Properties

<% end %>

<%= content_for :modal_body, :flush => true do %>

                 Address

                 City

                 Zip

                 State

Save

         Address
         Notes

<% end %>

<%= render partial: "shared/generic_modal", locals: {modal_id: "manage_properties_modal"} %>

<%= content_for :footer_scripts do %>

    function setPropertyManageModal(locations, job_location_id){ //Locations that aren't service address or billing address.
        $('#manage_properties_table').html('');
        $('#selected_locations_table').html('');
        $.each(locations, function( index, value ) { //for each location, add the <li> item for the menu.
            
            let valueIcon = '';
            if (value.is_default_location){
                valueIcon = valueIcon.concat('<i class="fas fa-house"></i>');
            } 

            if (value.id == job_location_id || value.is_default_location) {
                // Do Nothing. If it's service address, don't even show it on the table.
                let icon = '<i class="fas fa-van-shuttle"></i>'

                if (value.id == job_location_id && value.is_default_location){
                    icon = ('<i class="fas fa-house"></i>').concat(icon);
                    
                    $('#selected_locations_table').append(`<tr data-is_default_location="${value.is_default_location}" data-id="${value.id}" id="addresses" >
                        <td> ${icon} </td>
                        <td>
                            <a href="javascript:void(0)" class="address-context-menu-link" onclick="addressContextMenuLink(this)" title="Address" id="address-context-menu-link">
                                ${value.display_address}
                            </a>
                            <ul class="custom-menu address-menu" id="address-menu">
                                <li onclick="editLocation(this)" >Edit Location</li>
                            </ul>
                        </td> 
                        <td style="display:none"> ${value.id} </td>
                    </tr>`);
                } else if (value.is_default_location){
                    icon = ('<i class="fas fa-house"></i>');

                    $('#selected_locations_table').append(`<tr data-is_default_location="${value.is_default_location}" data-id="${value.id}" id="billing_address" >
                        <td> ${icon} </td>
                        <td>
                            <a href="javascript:void(0)" class="address-context-menu-link" onclick="addressContextMenuLink(this)" title="Address" id="address-context-menu-link">
                                ${value.display_address}
                            </a>
                            <ul class="custom-menu address-menu" id="address-menu">
                                <li onclick="makeServiceAddress(this)" >Make Service Address</li>
                                <li onclick="editLocation(this)" >Edit Location</li>
                            </ul>
                        </td> 
                        <td style="display:none"> ${value.id} </td>
                    </tr>`);
                } else{
                    $('#selected_locations_table').append(`<tr data-is_default_location="${value.is_default_location}" data-id="${value.id}" id="default_address" >
                        <td> ${icon} </td>
                        <td>
                            <a href="javascript:void(0)" class="address-context-menu-link" onclick="addressContextMenuLink(this)" title="Address" id="address-context-menu-link">
                                ${value.display_address}
                            </a>
                            <ul class="custom-menu address-menu" id="address-menu">
                                <li onclick="makeBillingAddress(this)" >Make Billing Address</li>
                                <li onclick="editLocation(this)" >Edit Location</li>
                            </ul>
                        </td> 
                        <td style="display:none"> ${value.id} </td>
                    </tr>`);
                }//onclick = Set Location ID for the job.
            }
            else {
                //onclick = Set Location ID for the job.
                $('#manage_properties_table').append(`<tr id="${value.id}" >
                    <td> ${valueIcon} </td>
                    <td>
                        <a href="javascript:void(0)" class="address-context-menu-link" onclick="addressContextMenuLink(this)" title="Address" id="address-context-menu-link">
                            ${value.display_address}
                        </a>
                        <ul class="custom-menu address-menu" id="address-menu">
                            <li onclick="makeBillingAddress(this)" >Make Billing Address</li>
                            <li onclick="makeServiceAddress(this)" >Make Service Address</li>
                            <li onclick="editLocation(this)" >Edit Location</li>
                        </ul>
                    </td>
                    <td style="display:none"> ${value.id} </td>
                </tr>`);
            }
        });
    };

//    (function($) {
//         let houseIcons = $('.fa-house');
//         for (i = 0; i<houseIcons.length; i++){
//             new Tooltip(houseIcons[0], {
//                 title: 'The Billing Address for this Customer',
//                 placement: 'bottom',
//                 trigger: 'hover',
//                 container: 'body'
//             });    
//         }
//         let vanIcons = $('.fa-van-shuttle')
//         for (i = 0; i<vanIcons.length; i++){
//             new Tooltip(vanIcons[0], {
//                     title: 'The Service Address for this Job',
//                     placement: 'bottom',
//                     trigger: 'hover',
//                     container: 'body'
//                 });
//         }
//     }
//    );

    function toggleAddIcon() {
        $('#new_address_icon i')[0]?.classList?.value?.includes('fa-plus')
            ? $('#new_address_icon').html('<i class="fas fa-minus fa-2x"></i>')
            : $('#new_address_icon').html('<i class="fas fa-plus fa-2x"></i>')
    }

    function newAddress(){
        toggleAddIcon()
        $('#add_new_location_in_manager_modal').toggle();
        if($('#add_new_location_in_manager_modal').attr("style") != ''){
            $('#new_location_id, #new_location_address, #new_location_city, #new_location_zip, #new_location_state').val('');
        }
    }

    function newLocationFormSubmit(){
        const newLocationId = $('#new_location_id').val();
        var locationMethod = 'POST';
        var locationUrl = "/locations.json";

        const location = {
            location: {
                street_address: $('#new_location_address').val(),
                city: $('#new_location_city').val(),
                zip_code: $('#new_location_zip').val(),
                state: $('#new_location_state').val(),
                customer_id: $('#job_location_attributes_customer_id').val()
            }
        };

        if(newLocationId != ''){
            locationMethod = 'PUT';
            locationUrl = "/locations/" + newLocationId + ".json";
        }

        $.ajax({
            method: locationMethod, 
            url: locationUrl,
            data: location,
            success: function(data){
                let valueIcon = '';
                if (data.is_default_location){
                    valueIcon = valueIcon.concat('<i class="fas fa-house"></i>');
                }
                if(newLocationId){
                    //Updating target address Row
                    const targetElementRow = $(`#${newLocationId}`)

                    if(targetElementRow?.length){
                        targetElementRow.children('td:eq(1)').children('a').text(data.display_address)
                    } else{
                        $('#selected_locations_table').find(`[data-id=${newLocationId}]`).children('td:eq(1)').children('a').text(data.display_address);
                        updateJobLocationParams(data);
                    }

                    //location-menu
                    const job_location_option = $('#location-menu').find(`[data-id=${data.id}]`);
                    job_location_option.attr('data-street_address',data.street_address);
                    job_location_option.attr('data-city',data.city);
                    job_location_option.attr('data-zip_code',data.zip_code);
                    job_location_option.attr('data-state',data.state);
                    job_location_option.attr('data-id',data.id);
                    job_location_option.attr('data-is_default_location',data.is_default_location);

                    var defaultIcon = ""
                    data.is_default_location
                        ? defaultIcon = '<i class="fa fa-map-marker" aria-hidden="true"></i>'
                        : defaultIcon = ""
                    
                    job_location_option.html(defaultIcon + data.display_address);
                } else{
                    $('#manage_properties_table').append(`<tr id="${data.id}" >
                        <td> ${valueIcon} </td>
                        <td>
                            <a href="javascript:void(0)" class="address-context-menu-link" onclick="addressContextMenuLink(this)" title="Address" id="address-context-menu-link">
                                ${data.display_address}
                            </a>
                            <ul class="custom-menu address-menu" id="address-menu">
                                <li onclick="makeBillingAddress(this)" >Make Billing Address</li>
                                <li onclick="makeServiceAddress(this)" >Make Service Address</li>
                                <li onclick="editLocation(this)" >Edit Location</li>
                            </ul>
                        </td>
                        <td style="display:none"> ${data.id} </td>
                    </tr>`);

                    var defaultIcon = ""
                    data.is_default_location
                        ? defaultIcon = '<i class="fa fa-map-marker" aria-hidden="true"></i>'
                        : defaultIcon = ""

                    $.ajax({
                        method: "GET",
                        url: `/customers/${data.customer_id}.json`,
                        success: function(data){
                            FCTool.setLocationMenu(data);
                        },
                        error: function(data){
                            gritterError("Error", "Something Error", "10000");
                        }
                    });
                }

                $('#add_new_location_in_manager_modal').toggle();
                $('#new_address_icon').html('<i class="fas fa-plus fa-2x"></i>');
                $('#new_location_id, #new_location_address, #new_location_city, #new_location_zip, #new_location_state').val('');
                gritterSuccess("Success", "Address Saved Successfully");
            },
            error: function(data){
                gritterError("Error", "Something Error", "10000");
            }
        });
    }

    function addressContextMenuLink(event){
        $(".address-menu").css('display','none');
        $(event).parents('tr').find('#address-menu').toggle();
    }

    function editLocation(event){
        toggleAddIcon()
        const currentRow = $(event).parents('tr');
        currentRow.find('#address-menu').toggle();
        const locationData = currentRow.find('#address-context-menu-link').text().trim().split(', ');
        const id = currentRow.children('td')[2].innerText.trim();

        $('#new_location_id').val(id);
        $('#new_location_address').val(locationData[0]);
        $('#new_location_city').val(locationData[1]);
        $('#new_location_zip').val(locationData[3]);
        $('#new_location_state').val(locationData[2]);

        $('#add_new_location_in_manager_modal').css('display','block');
    }

    function makeServiceAddress(event){
        $(event).parents('tr').find('#address-menu').toggle();
        const parentTr_id = $(event).parents('tr').attr('id');
        const addressRow = event.currentTarget
        const id = $(event).parents('tr').children('td')[2].innerText.trim();
        const job_id = $('#job_id').val();
        
        $.ajax({
            method: 'PUT', 
            url: `/jobs/${job_id}/update_attribute`,
            data: {attribute: 'location_id', value: id},
            success: function(data){
                gritterSuccess("Success", "Successfully Set Service Address");

                const currentDefaultRow = $('#default_address');
                const currentDefaultAddress = currentDefaultRow.children('td:eq(1)').children('a').text().trim()
                const currentDefaultId = currentDefaultRow.children('td:eq(2)').text().trim()

                if(parentTr_id == 'billing_address'){
                    $('#manage_properties_table').append(`<tr id="${currentDefaultId}" >
                        <td></td>
                        <td>
                            <a href="javascript:void(0)" class="address-context-menu-link" onclick="addressContextMenuLink(this)" title="Address" id="address-context-menu-link">
                                ${currentDefaultAddress}
                            </a>
                            <ul class="custom-menu address-menu" id="address-menu">
                                <li onclick="makeBillingAddress(this)" >Make Billing Address</li>
                                <li onclick="makeServiceAddress(this)" >Make Service Address</li>
                                <li onclick="editLocation(this)" >Edit Location</li>
                            </ul>
                        </td>
                        <td style="display:none"> ${currentDefaultId} </td>
                    </tr>`);

                    let icon = ('<i class="fas fa-house"></i> <i class="fas fa-van-shuttle"></i>')
                    $('#selected_locations_table').html('');
                    $('#selected_locations_table').append(`<tr data-is_default_location="${data.location.is_default_location}" data-id="${data.location.id}" id="addresses" >
                        <td> ${icon} </td>
                        <td>
                            <a href="javascript:void(0)" class="address-context-menu-link" onclick="addressContextMenuLink(this)" title="Address" id="address-context-menu-link">
                                ${data.location.display_address}
                            </a>
                            <ul class="custom-menu address-menu" id="address-menu">
                                <li onclick="editLocation(this)" >Edit Location</li>
                            </ul>
                        </td> 
                        <td style="display:none"> ${data.location.id} </td>
                    </tr>`);
                } else if($('#addresses')?.length){
                    const addressesRow = $('#addresses');
                    const isDefaultLocation = addressesRow.attr('data-is_default_location');
                    const commonAddress = addressesRow.children('td:eq(1)').children('a').text().trim()
                    const addressesDefaultId = addressesRow.children('td:eq(2)').text().trim()

                    const targetElementRow = $(`#${data?.location?.id}`)
                    const targetElementAddress = targetElementRow.children('td:eq(1)').children('a').text().trim()
                    const targetElementId = targetElementRow.children('td:eq(2)').text().trim()

                    targetElementRow.remove();
                    $('#selected_locations_table').html('');
                    $('#selected_locations_table').append(`<tr data-is_default_location="${isDefaultLocation}" data-id="${addressesDefaultId}" id="billing_address" >
                        <td> <i class="fas fa-house"></i> </td>
                        <td>
                            <a href="javascript:void(0)" class="address-context-menu-link" onclick="addressContextMenuLink(this)" title="Address" id="address-context-menu-link">
                                ${commonAddress}
                            </a>
                            <ul class="custom-menu address-menu" id="address-menu">
                                <li onclick="makeServiceAddress(this)" >Make Service Address</li>
                                <li onclick="editLocation(this)" >Edit Location</li>
                            </ul>
                        </td> 
                        <td style="display:none"> ${addressesDefaultId} </td>
                    </tr>
                    <tr data-is_default_location="${data.location.is_default_location}" data-id="${data.location.id}" id="default_address" >
                        <td><i class="fas fa-van-shuttle" aria-hidden="true"></i></td>
                        <td>
                            <a href="javascript:void(0)" class="address-context-menu-link" onclick="addressContextMenuLink(this)" title="Address" id="address-context-menu-link">
                                ${data.location.display_address}
                            </a>
                            <ul class="custom-menu address-menu" id="address-menu">
                                <li onclick="makeBillingAddress(this)" >Make Billing Address</li>
                                <li onclick="editLocation(this)" >Edit Location</li>
                            </ul>
                        </td> 
                        <td style="display:none"> ${data.location.id} </td>
                    </tr>`);
                } else{
                    const targetElementRow = $(`#${data?.location?.id}`)
                    const targetElementAddress = targetElementRow.children('td:eq(1)').children('a').text().trim()
                    const targetElementId = targetElementRow.children('td:eq(2)').text().trim()

                    //Updating target address Row
                    var addressIcon = "";
                    currentDefaultRow.attr('data-is_default_location') == 'true'
                        ? addressIcon = '<i class="fas fa-house" aria-hidden="true"></i>'
                        : addressIcon = ''

                    targetElementRow.children('td:eq(0)').html(addressIcon)
                    targetElementRow.children('td:eq(1)').children('a').text(currentDefaultAddress)
                    targetElementRow.children('td:eq(2)').text(currentDefaultId)
                    targetElementRow.attr('id', currentDefaultId)

                    //Updating default address Row
                    var defaultIcon = "";
                    data.location.is_default_location
                        ? defaultIcon = '<i class="fas fa-house" aria-hidden="true"></i> <i class="fas fa-van-shuttle" aria-hidden="true"></i>'
                        : defaultIcon = '<i class="fas fa-van-shuttle" aria-hidden="true"></i>'

                    currentDefaultRow.attr('data-is_default_location', data.location.is_default_location)
                    currentDefaultRow.children('td:eq(0)').html(defaultIcon)
                    currentDefaultRow.children('td:eq(1)').children('a').text(targetElementAddress)
                    currentDefaultRow.children('td:eq(2)').text(targetElementId)
                }

                //TODO: Update the actual location information in the job modal
                updateJobLocationParams(data.location);
            },
            error: function(data){
                gritterError("Error", "Something Error", "10000");
            }
        });
    }

    function updateJobLocationParams(data){
        $("#job_location_attributes_id").val(data.id);
        $("#job_location_attributes_street_address").val(data.street_address);
        $("#job_location_attributes_city").val(data.city);
        $("#job_location_attributes_zip_code").val(data.zip_code);
        $("#job_location_attributes_state").val(data.state);

        data.is_default_location
            ? document.getElementById('job_location_attributes_default_location').checked = true
            : document.getElementById('job_location_attributes_default_location').checked = false
    }

    //$('#close-generic-modal-div').click(function(){
    //    console.log("The paragraph was clicked.");
    //});

    $( "#close-generic-modal-div" ).on( "click", function() {
        console.log("The paragraph was clicked.");
    });

    $(document).click(function(e){
        if (e.target.className != 'address-context-menu-link') {
            $(".address-menu").css('display','none');
        }
    });

    // When the user clicks anywhere outside of the modal, close it
    //TODO: We also need to add it for the 'x' on the modal.
    //window.onclick = function (event) {    
        //console.log('m here');
        //$(".address-menu").css('display','none');    
        //if (event.target == document.getElementById("manage_properties_modal")) {
        //    $('#manage_properties_table').empty();
        //    $('#selected_locations_table').empty();
        //}
    //}

    function makeBillingAddress(event){
        $(event).parents('tr').find('#address-menu').toggle();
        const parentTr_id = $(event).parents('tr').attr('id');
        const customerId = $('#job_customer_attributes_id').val();
        const id = $(event).parents('tr').children('td')[2].innerText.trim();

        $.ajax({
            method: 'PUT', 
            url: `/customers/${customerId}/update_attribute`,
            data: {attribute: 'location_id', value: id},
            success: function(data){
                gritterSuccess("Success", "Successfully Set Billing Address");

                const currentDefaultRow = $('#billing_address');
                const currentDefaultAddress = currentDefaultRow.children('td:eq(1)').children('a').text().trim()
                const currentDefaultId = currentDefaultRow.children('td:eq(2)').text().trim()
                
                if(parentTr_id == 'default_address'){
                    $('#manage_properties_table').append(`<tr id="${currentDefaultId}" >
                        <td></td>
                        <td>
                            <a href="javascript:void(0)" class="address-context-menu-link" onclick="addressContextMenuLink(this)" title="Address" id="address-context-menu-link">
                                ${currentDefaultAddress}
                            </a>
                            <ul class="custom-menu address-menu" id="address-menu">
                                <li onclick="makeBillingAddress(this)" >Make Billing Address</li>
                                <li onclick="makeServiceAddress(this)" >Make Service Address</li>
                                <li onclick="editLocation(this)" >Edit Location</li>
                            </ul>
                        </td>
                        <td style="display:none"> ${currentDefaultId} </td>
                    </tr>`);

                    let icon = ('<i class="fas fa-house"></i> <i class="fas fa-van-shuttle"></i>')
                    $('#selected_locations_table').html('');
                    $('#selected_locations_table').append(`<tr data-is_default_location="${data.default_location.is_default_location}" data-id="${data.default_location.id}" id="addresses" >
                        <td> ${icon} </td>
                        <td>
                            <a href="javascript:void(0)" class="address-context-menu-link" onclick="addressContextMenuLink(this)" title="Address" id="address-context-menu-link">
                                ${data.default_location.display_address}
                            </a>
                            <ul class="custom-menu address-menu" id="address-menu">
                                <li onclick="editLocation(this)" >Edit Location</li>
                            </ul>
                        </td> 
                        <td style="display:none"> ${data.default_location.id} </td>
                    </tr>`);
                } else if($('#addresses')?.length){
                    const addressesRow = $('#addresses');
                    const isDefaultLocation = addressesRow.attr('data-is_default_location');
                    const commonAddress = addressesRow.children('td:eq(1)').children('a').text().trim()
                    const addressesDefaultId = addressesRow.children('td:eq(2)').text().trim()

                    const targetElementRow = $(`#${data?.default_location?.id}`)
                    const targetElementAddress = targetElementRow.children('td:eq(1)').children('a').text().trim()
                    const targetElementId = targetElementRow.children('td:eq(2)').text().trim()

                    targetElementRow.remove();
                    $('#selected_locations_table').html('');
                    $('#selected_locations_table').append(`<tr data-is_default_location="${data.default_location.is_default_location}" data-id="${data.default_location.id}" id="billing_address" >
                        <td> <i class="fas fa-house"></i> </td>
                        <td>
                            <a href="javascript:void(0)" class="address-context-menu-link" onclick="addressContextMenuLink(this)" title="Address" id="address-context-menu-link">
                                ${data.default_location.display_address}
                            </a>
                            <ul class="custom-menu address-menu" id="address-menu">
                                <li onclick="makeServiceAddress(this)" >Make Service Address</li>
                                <li onclick="editLocation(this)" >Edit Location</li>
                            </ul>
                        </td> 
                        <td style="display:none"> ${data.default_location.id} </td>
                    </tr>
                    <tr data-is_default_location="${isDefaultLocation}" data-id="${addressesDefaultId}" id="default_address" >
                        <td><i class="fas fa-van-shuttle" aria-hidden="true"></i></td>
                        <td>
                            <a href="javascript:void(0)" class="address-context-menu-link" onclick="addressContextMenuLink(this)" title="Address" id="address-context-menu-link">
                                ${commonAddress}
                            </a>
                            <ul class="custom-menu address-menu" id="address-menu">
                                <li onclick="makeBillingAddress(this)" >Make Billing Address</li>
                                <li onclick="editLocation(this)" >Edit Location</li>
                            </ul>
                        </td> 
                        <td style="display:none"> ${addressesDefaultId} </td>
                    </tr>`);
                } else{
                    const targetElementRow = $(`#${data?.default_location?.id}`)
                    const targetElementAddress = targetElementRow.children('td:eq(1)').children('a').text().trim()
                    const targetElementId = targetElementRow.children('td:eq(2)').text().trim()

                    //Updating target address Row
                    targetElementRow.children('td:eq(1)').children('a').text(currentDefaultAddress)
                    targetElementRow.children('td:eq(2)').text(currentDefaultId)
                    targetElementRow.attr('id', currentDefaultId)

                    //Updating Billing address Row
                    var defaultIcon = '<i class="fas fa-house" aria-hidden="true"></i>';

                    currentDefaultRow.attr('data-is_default_location', data.default_location.is_default_location)
                    currentDefaultRow.children('td:eq(0)').html(defaultIcon)
                    currentDefaultRow.children('td:eq(1)').children('a').text(targetElementAddress)
                    currentDefaultRow.children('td:eq(2)').text(targetElementId)
                }
            },
            error: function(data){
                gritterError("Error", "Something Error", "10000");
            }
        });
    }

<% end %>

$(function() {
    showReadOnlyCalendar();
});

<%= content_for :modal_header, flush: true do %>

Images Upload

<% end %>

<%= content_for :modal_body, flush: true do %>

Upload image

<%= form_for model, url: path, as: :post, multipart: true, :html => {:id => 'img-upload-form'}, remote: is_remote_true ? true : false , accept:"image/*" do |f| %>

<%= get_trade %> Cloud Image Upload

        <%= f.label :images %>
        <%= f.file_field :images, multiple: true, accept:'image/*, application/pdf', required: true %>

            Cancel

<% end %>
<% end %>

<%= render :partial => "shared/generic_modal", locals: {modal_id: "images-upload-modal"}%>

<% disable_tab_index = defined?(disable_tab_index) ? disable_tab_index : false %>

" class="modal fade" role="dialog" aria-hidden="true" <% if !disable_tab_index %> tabindex="-1" <% end %> style="padding-top: 5rem;"
data-keyboard="false" data-backdrop="static">

<%= content_for :modal_header %>

×

<%= content_for :modal_body %>

<%= content_for :modal_footer %>

<%= content_for :footer_scripts do %>

$(document).click(function(e){   
    if (e.target == document.getElementById('<%= modal_id %>')) {
        $("#<%= modal_id %>").modal("hide");
    }
});

<% end %>

<% collapse_id = defined?(collapse_id) ? collapse_id : "collapseOne" %>

        " href="<%= collapse_id%>" aria-expanded="true"
          aria-controls="<%= collapse_id%>">
          <%= content_for :accordian_section_title %>

" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">

<%= content_for :accordian_section_content %>

<%= stylesheet_link_tag "landingpage-scss/one-page-wonder" %>

<%= image_tag("landing-page/#{get_grow_header_image_path_from_domain()}", :class => "img-fluid" )%>

<%= image_tag("landing-page/yaks.jpg", :class => "img-fluid rounded-circle", :style => "max-width:100%; height:auto;") %>

Your Small <%= get_trade %> Business

Is your <%= get_trade %> business still stuck using a filing cabinet? Are you manually drafting bids, proposals, and invoices for your customers? There's a better way. Run your business from the cloud. Here's now.

<%= image_tag("landing-page/cogs.jpg", :class => "img-fluid rounded-circle") %>

Organized and Automated

In the age of self-driving cars and 3D printers, you shouldn't have to manually send invoices and bids at the end of your day. Automate the paperwork and focus more on doing what you do best: helping your customers

<%= image_tag("landing-page/ai.jpg", :class => "img-fluid rounded-circle") %>

Business Analytics

Run your business instead of letting your business run you. Analyze your data and see the bird's eye view of your business. Your data paints a picture and tells a story, unlock that story with our business data analytics.

<%= content_for :card_body %>

Pay for this invoice

×

                        Merchant TXN ID:

                        Pay <%= format("$%.2f", amount) %>

New Employee Job Type

        <%= render 'form', employee_job_type: @employee_job_type %>

        <%= link_to 'Back', employee_job_types_path %>

<%= content_for :card_body do %>

      <%= link_to employee_job_types_path do %>

      <% end %>

      <%= link_to edit_employee_job_type_path(@employee_job_type) do %>

      <% end %>

      <%= link_to new_employee_job_type_path(@employee_job_type) do %>

      <% end %>

Name:
<%= @employee_job_type.name %>

Description:
<%= @employee_job_type.description %>

<%= link_to 'Edit', edit_employee_job_type_path(@employee_job_type) %> |
<%= link_to 'Back', employee_job_types_path %>
<% end %>

<%= render partial: "shared/card" %>

Editing Employee Job Type

<%= render 'form', employee_job_type: @employee_job_type %>

<%= link_to 'Show', @employee_job_type %> |
<%= link_to 'Back', employee_job_types_path %>

json.array! @employee_job_types, partial: 'employee_job_types/employee_job_type', as: :employee_job_type

json.partial! "employee_job_types/employee_job_type", employee_job_type: @employee_job_type

json.extract! employee_job_type, :id, :string, :string, :created_at, :updated_at
json.url employee_job_type_url(employee_job_type, format: :json)

<%= react_component 'shared/IndexPage', {
  title: "Appointment Types",
  attributes: ["Name", "Description"],
  data: @employee_job_types.map {|appointment| [appointment.id, {url: url_for(appointment), title: appointment.name}, appointment.description]},
  basePath: '/employee_job_types'} %>

<%= form_with(model: @employee_job_type, local: true) do |form| %>
<% if @employee_job_type.errors.any? %>

<%= pluralize(@employee_job_type.errors.count, "error") %> prohibited this @employee_job_type from being saved:

<%= message %>

  <% end %>

  <%= content_for :card_body do %>

<%= form_group(form, @employee_job_type, :name)%>

<%= form_group(form, @employee_job_type, :description) %>

            Save
            <%# form.submit(class: "btn btn-company-primary") %>

<% end %>
<%= render partial: "shared/card" %>
<% end %>

New Roster

<%= render 'form', roster: @roster %>

<%= @roster.name.titleize %>

      Employee Name



    <% @roster.employees.each do |emp|%>

       <%= emp.full_name %>

    <% end %>

json.extract! roster, :id, :created_at, :updated_at
json.url roster_url(roster, format: :json)

Edit Roster

<%= render 'form', customer: @roster %>

json.array! @rosters, partial: 'rosters/roster', as: :roster

json.partial! "rosters/roster", roster: @roster

Rosters

<%= react_component 'rosters/Index', {tableData: @rosters, permissions: permissions_for(Roster)} %>

    <%= link_to rosters_path, title: 'Back' do %>

    <% end %>

<%= form_with(model: @roster, local: true) do |form| %>
<% if @roster.errors.any? %>

<%= pluralize(@roster.errors.count, "error") %> prohibited this roster from being saved:

<%= message %>

<% end %>

<%= form_group(form, @roster, :name) %>

<%= form.fields_for :employee_roster do |add_employee_roster|%>

          <%= #form_group(add_employee_roster, roster, :employee_id, :select, select_options: employee_options)
          form.select(:employees, employee_options, {}, multiple: true)
          %>

<% end %>

<%= form.submit class: 'btn btn-company-primary' %>

<% end %>

New web page

<%= render "form", web_page: @web_page %>

<%= link_to 'Back to web pages', web_pages_path %>

<% if notice.present? %>

<%= notice %>

<% end %>

<%= render @web_page %>

<%= link_to 'Edit this web_page', edit_web_page_path(@web_page), class: "mt-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>

<%= button_to 'Destroy this web_page', web_page_path(@web_page), method: :delete, class: "mt-2 rounded-lg py-3 px-5 bg-gray-100 font-medium" %>

<%= link_to 'Back to web_pages', web_pages_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>

<%#= link_to "Show this web page", web_page, class: "rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
<%#= link_to 'Edit this web page', edit_web_page_path(web_page), class: "rounded-lg py-3 ml-2 px-5 bg-gray-100 inline-block font-medium" %>

<%# end %>

Editing web page

<%= render "form", web_page: @web_page %>

<%= link_to "Show this web page", @web_page, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
<%= link_to "Back to web pages", web_pages_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>

json.array! @web_pages, partial: "web_pages/web_page", as: :web_page

json.partial! "web_pages/web_page", web_page: @web_page

json.extract! web_page, :id, :title, :slug, :content, :is_home_page, :business_id, :page_category_id, :meta_description, :meta_keywords, :position, :created_at, :updated_at
json.url web_page_url(web_page, format: :json)

Y

YC -- here's your playground. Click a page and rebrand it.

<%= notice %>

Web Pages

    <% @web_pages.each do |web_page| %>
      <%= link_to web_page, class: "block border rounded-lg shadow-sm overflow-hidden hover:shadow-md transition-shadow duration-300" do %>

          <% if web_page.content.present? %>
            " class="w-full h-full" sandbox="allow-scripts">
          <% else %>

No preview available

<% end %>

            <% if web_page.business.logo.attached? %>
              <%= image_tag web_page.business.logo, class: "h-12 mr-3 object-cover" %>
            <% else %>

<%= web_page.business.name.first.upcase %>

<% end %>

<%= web_page.title %>

<%= web_page.business.name %>

<%= web_page.slug %>

      <% end %>
    <% end %>

<%= link_to 'New Web Page', new_web_page_path, class: "mt-6 inline-block bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" %>

<%= form_with(model: web_page, local: true) do |form| %>
<% if web_page.errors.any? %>

<%= pluralize(web_page.errors.count, "error") %> prohibited this web_page from being saved:

<%= error.full_message %>

<% end %>

    <%= form.label :title %>
    <%= form.text_field :title, style: "width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px;" %>

    <%= form.label :slug %>
    <%= form.text_field :slug, style: "width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px;" %>

    <%= form.label :home_page_id, "Home Page" %>
    <%= form.collection_select :home_page_id, HomePage.all, :id, :display_info, { prompt: "Select a Home Page" }, { style: "width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px;" } %>

    <%= form.label :use_navbar %>
    <%= form.check_box :use_navbar %>

    <%= form.label :use_footer %>
    <%= form.check_box :use_footer %>

    <%= form.label :github_raw_url %>
    <%= form.text_field :github_raw_url, style: "width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px;" %>

    <%= form.label :content %>
    <%= form.text_area :content, rows: web_page.content.nil? ? 5 : calculate_rows(web_page.content), style: "width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px;" %>

    <%= form.label :is_home_page %>
    <%= form.check_box :is_home_page %>

    <%= form.label :business_id, "Business" %>
    <%= form.collection_select :business_id, Business.all, :id, :name, { prompt: "Select a Business" }, { style: "width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px;" } %>

    <%= form.label :meta_description %>
    <%= form.text_field :meta_description, style: "width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px;" %>

    <%= form.label :meta_keywords %>
    <%= form.text_field :meta_keywords, style: "width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px;" %>

    <%= form.label :position %>
    <%= form.number_field :position, style: "width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px;" %>

<%= form.submit 'Save Web Page', style: "padding: 10px 15px; background-color: #2196f3; color: white; border: none; border-radius: 4px; cursor: pointer;" %>

<% end %>

Webhooks#pipedrive

Find me in app/views/webhooks/pipedrive.html.erb

LineItems#create

Find me in app/views/line_items/create.html.erb

LineItems#destroy

Find me in app/views/line_items/destroy.html.erb

LineItems#update

Find me in app/views/line_items/update.html.erb

New visitor device info

<%= render "form", visitor_device_info: @visitor_device_info %>

<%= link_to 'Back to visitor device infos', visitor_device_infos_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>

<% if notice.present? %>

<%= notice %>

<% end %>

<%= render @visitor_device_info %>

<%= link_to 'Edit this visitor_device_info', edit_visitor_device_info_path(@visitor_device_info), class: "mt-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>

<%= button_to 'Destroy this visitor_device_info', visitor_device_info_path(@visitor_device_info), method: :delete, class: "mt-2 rounded-lg py-3 px-5 bg-gray-100 font-medium" %>

<%= link_to 'Back to visitor_device_infos', visitor_device_infos_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>

json.extract! visitor_device_info, :id, :user_agent_raw, :referrer, :url, :ip_address, :device_width, :device_height, :device_os, :os_version, :browser_version, :browser, :business_id, :user_cookie_guid, :auth_token, :created_at, :updated_at
json.url visitor_device_info_url(visitor_device_info, format: :json)

Editing visitor device info

<%= render "form", visitor_device_info: @visitor_device_info %>

<%= link_to "Show this visitor device info", @visitor_device_info, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
<%= link_to "Back to visitor device infos", visitor_device_infos_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>

json.array! @visitor_device_infos, partial: "visitor_device_infos/visitor_device_info", as: :visitor_device_info

">

    Date & Time:
    <%= visitor_device_info.created_at.in_time_zone("Mountain Time (US & Canada)").strftime("%B %d, %Y %I:%M %p") %>

    User agent raw:
    <%= visitor_device_info.user_agent_raw %>

    Referrer:
    <%= visitor_device_info.referrer %>

    Url:
    <%= visitor_device_info.url %>

    Ip address:
    "><%= visitor_device_info.ip_address %>

    Device width:
    <%= visitor_device_info.device_width %>

    Device height:
    <%= visitor_device_info.device_height %>

    Device os:
    <%= visitor_device_info.device_os %>

    Os version:
    <%= visitor_device_info.os_version %>

    Browser version:
    <%= visitor_device_info.browser_version %>

    Browser:
    <%= visitor_device_info.browser %>

    Business:
    <%= visitor_device_info.business_id %>

    User cookie guid:
    "><%= visitor_device_info.user_cookie_guid %>

    Auth token:
    <%= visitor_device_info.auth_token %>

    Hostname:
    <%= visitor_device_info.hostname %>

    City:
    <%= visitor_device_info.city %>

    Zip:
    <%= visitor_device_info.zip %>

    Region:
    <%= visitor_device_info.region %>

    Coordinates:
    <%= visitor_device_info.coordinates %>

    ISP:
    <%= visitor_device_info.isp %>

  <% if action_name != "show" %>
    <%= link_to "Show this visitor device info", visitor_device_info, class: "rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
    <%= link_to 'Edit this visitor device info', edit_visitor_device_info_path(visitor_device_info), class: "rounded-lg py-3 ml-2 px-5 bg-gray-100 inline-block font-medium" %>

<% end %>

json.partial! "visitor_device_infos/visitor_device_info", visitor_device_info: @visitor_device_info

<% if notice.present? %>

<%= notice %>

<% end %>

Visitor device infos

<%= link_to 'New visitor device info', new_visitor_device_info_path, class: "rounded-lg py-3 px-5 bg-blue-600 text-white block font-medium" %>

<%= render @visitor_device_infos %>

<%# content_for :footer_scripts do %>




<%# end %>

<%= form_with(model: visitor_device_info, class: "contents") do |form| %>
<% if visitor_device_info.errors.any? %>

<%= pluralize(visitor_device_info.errors.count, "error") %> prohibited this visitor_device_info from being saved:

<%= error.full_message %>

<% end %>

    <%= form.label :user_agent_raw %>
    <%= form.text_field :user_agent_raw, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %>

    <%= form.label :referrer %>
    <%= form.text_field :referrer, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %>

    <%= form.label :url %>
    <%= form.text_field :url, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %>

    <%= form.label :ip_address %>
    <%= form.text_field :ip_address, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %>

    <%= form.label :device_width %>
    <%= form.text_field :device_width, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %>

    <%= form.label :device_height %>
    <%= form.text_field :device_height, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %>

    <%= form.label :device_os %>
    <%= form.text_field :device_os, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %>

    <%= form.label :os_version %>
    <%= form.text_field :os_version, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %>

    <%= form.label :browser_version %>
    <%= form.text_field :browser_version, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %>

    <%= form.label :browser %>
    <%= form.text_field :browser, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %>

    <%= form.label :business_id %>
    <%= form.text_field :business_id, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %>

    <%= form.label :user_cookie_guid %>
    <%= form.text_field :user_cookie_guid, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %>

    <%= form.label :auth_token %>
    <%= form.text_field :auth_token, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %>

<%= form.submit class: "rounded-lg py-3 px-5 bg-blue-600 text-white inline-block font-medium cursor-pointer" %>

<% end %>

New Forwarding Number

<%= render 'form', forwarding_number: @forwarding_number %>

<%= link_to 'Back', forwarding_numbers_path %>

<%= notice %>

Phone:
<%= @forwarding_number.phone %>

Description:
<%= @forwarding_number.description %>

Business:
<%= @forwarding_number.business %>

<%= link_to 'Edit', edit_forwarding_number_path(@forwarding_number) %> |
<%= link_to 'Back', forwarding_numbers_path %>

Editing Forwarding Number

<%= render 'form', forwarding_number: @forwarding_number %>

<%= link_to 'Show', @forwarding_number %> |
<%= link_to 'Back', forwarding_numbers_path %>

json.array! @forwarding_numbers, partial: "forwarding_numbers/forwarding_number", as: :forwarding_number

json.partial! "forwarding_numbers/forwarding_number", forwarding_number: @forwarding_number

<%= notice %>

Forwarding Numbers

      Phone
      Description
      Business

    <% @forwarding_numbers.each do |forwarding_number| %>

        <%= forwarding_number.phone %>
        <%= forwarding_number.description %>
        <%= forwarding_number.business %>
        <%= link_to 'Show', forwarding_number %>
        <%= link_to 'Edit', edit_forwarding_number_path(forwarding_number) %>
        <%= link_to 'Destroy', forwarding_number, method: :delete, data: { confirm: 'Are you sure?' } %>

    <% end %>

<%= link_to 'New Forwarding Number', new_forwarding_number_path %>

<%= form_with(model: forwarding_number, local: true) do |form| %>
<% if forwarding_number.errors.any? %>

<%= pluralize(forwarding_number.errors.count, "error") %> prohibited this forwarding_number from being saved:

<%= message %>

<% end %>

    <%= form.label :phone %>
    <%= form.text_field :phone %>

    <%= form.label :description %>
    <%= form.text_field :description %>

    <%= form.label :business_id %>
    <%= form.text_field :business_id %>

<%= form.submit %>

<% end %>

json.extract! forwarding_number, :id, :phone, :description, :business_id, :created_at, :updated_at
json.url forwarding_number_url(forwarding_number, format: :json)

<%# render 'form', published_job_page: @published_job_page %>

<%= react_component "marketing/CreateContent/NewPublishableJobPage", {
  published_job_page: @published_job_page,
  invoice: @invoice,
  job_summary_without_price: @job_summary_without_price,
  job_summary_with_price: @job_summary_with_price,
  notes: @notes,
  keywords: @keywords,
  customerName: @customer_name,
  address: @address,
  company_name: @company_name,
  owner_name: @owner_name,
  customTitlePrompt: @custom_title_prompt,
  customHtmlPrompt: @custom_html_prompt
} %>
<%= render partial: 'shared/image_selection', locals: {invoice: @invoice} %>

<%# react_component("marketing/CreateContent/NewPublishableJobPage", {
  invoice: @invoice,
  notes: @job_summary_without_price,
  notesWithPrice: @job_summary_with_price,
  keywords: @keywords,
  customerName: @customer_name,
  address: @address,
  customTitlePrompt: @custom_title_prompt,
  customHtmlPrompt: @custom_html_prompt
}) %>

<%# react_component 'seo/SEOForm', invoice: @invoice.to_json, images: @invoice&.customer&.get_images %>

<%#= link_to 'Back', published_job_pages_path %>

<%= content_for :header do %>

<% end %>

<%= content_for :header do %>

body {
    background-color: #f9f4f4;
}

img {
    max-width: 50%; /* ensures the image is responsive */
    height: auto; /* maintain aspect ratio */
    border: 1px solid #ddd; /* light border */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* subtle shadow */
    border-radius: 5px; /* rounded corners */
    transition: transform 0.3s ease; /* smooth transition for hover effect */
    }

img:hover {
    transform: scale(1.05); /* slightly enlarge on hover */
}

.fr-responsive-image {
        max-width: 50%; /* ensures the image is responsive */
        height: auto; /* maintain aspect ratio */
        border: 1px solid #ddd; /* light border */
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* subtle shadow */
        border-radius: 5px; /* rounded corners */
        transition: transform 0.3s ease; /* smooth transition for hover effect */
    }

    .fr-responsive-image:hover {
        transform: scale(1.05); /* slightly enlarge on hover */
    }

/* h1 {
    font-family:'Roboto';
    font-weight: 700;
    letter-spacing: 0.07813rem;
    color: #333333;
}

body {
    font-family: "poppins";
    line-height: 150%;
}

h3 {
    font-family:'Roboto';
    font-weight: 700;
    font-size: 1.25rem;
    color: #FF5A5A;
} */

h1 {
    margin: 10px;
    padding: 20px;
    text-align: center;    
}

h2 {
    margin: 10px;
    padding: 20px;
    text-align: center;    
}

h3 {
    margin: 10px;
    padding: 20px;
    text-align: center;
        
}

/* hr {} */

p {
    font-size: 125%;
}

#bar {
  position: sticky;
  height: 70px;
  background: white;
    top: 10px;
  bottom: calc(100% - 70px);
    z-index: 10;
    border-radius: 10px;
}

.city-seo-header-button {
    position: sticky;
  background-color: #fefefe;
  color: #333333;
  padding: 10px 20px; /* Adjust padding as needed for button size */
  border: none; /* Assuming you don't want a border */
  right: 10px; /* Or however much space you want from the right */
  top: 10%; /* Center vertically */
    margin: 10px;
/*   transform: translateY(-50%); /* Adjust vertical alignment */
  z-index: 10; /* Ensure it's above other elements */
    float: right;
    margin-left: auto;
    display: inline;
    margin-right: 30px;
    border-radius: 10px;
/*     font-family: "inherit"; */
}

#bar h3{
/*     font-family: "roboto"; */
    color: #333333;
    padding-left: 20px;
    margin: 15px;
    float: left;
    display: inline;
    background-color: white;
    padding: 5px;
    border-radius: 10px;
}

@media only screen and (max-width: 768px) {
    #bar h3{
        font-size: 1.25rem;
    }
    .city-seo-header-button{
        margin: none;
    }
}

@media only screen and (max-width: 365px){
    #bar h3{
        display: none;
    }
}

.city-seo-header-button:hover{
    background-color: #fefefe;
/*     color: #4f4f4f; */
    border-radius: 10px;
    cursor:pointer;
    color: #eb3323;
}

.city-seo-header-button:focus{
    background-color: #fefefe;
    color: #eb3323;
}

a.fr-button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
}

#wrapper {
  display: inline;
}

.prompt-content {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    padding: 1rem;
    margin-bottom: 1rem;
    white-space: pre-wrap;
}

<% end %>

<%= notice %>

Title:

<%= @published_job_page.title %>

Published At:

<% if @published_job_page.slug.nil? %>

            ❌
            Publish to Wordpress

<% else %>

            ✅
            <%= link_to "/#{@published_job_page.slug}", "#{@published_job_page.slug}" %>

<% end %>

Keywords:

<%= @published_job_page.target_keywords %>

<% unless @wordpress_categories.nil? %>

Categories:

        <% @selected_category_ids = [] %>
        <% @wordpress_categories.each do |category| %>

                " id="wp_categories<%= category[:id] %>">
                ">
                <%= category[:name] %>

<% end %>

<% if @published_job_page.slug.nil? %>

Featured Image URL (paste image URL in here):

<% end %>

<%= @published_job_page.facebook_post_id.nil? ? "❌" : "✅" %> Facebook Post:

<%= @published_job_page.generated_facebook_post %>

<%# Add Facebook Share Link %>

Copy Text
<% if @published_job_page.slug.present? %>
    <%# Adjust the domain name to match your site's actual domain %>
    <% article_url = "#{@published_job_page.slug}" %>
    <% facebook_share_url = "https://www.facebook.com/sharer/sharer.php?u=#{CGI.escape(article_url)}" %>
    <%= link_to "Share on Facebook", facebook_share_url, target: "_blank", class: "btn btn-primary btn-social btn-facebook m-5" %>
<% end %>

<% unless current_business.facebook_page_connections.empty? %>
<%# Add Facebook Share Link %>

Publish to Facebook!

<% end %>

Nextdoor Post:

<%= @published_job_page.generated_nextdoor_post %>

     Copy Text
    <% if @published_job_page.generated_nextdoor_post.present? %>
        <% nextdoor_share_text = CGI.escape(@published_job_page.generated_nextdoor_post) %>
        <% nextdoor_share_url = "https://nextdoor.com/news_feed/?post=#{nextdoor_share_text}" %>
        <%= link_to "Share on Nextdoor", nextdoor_share_url, target: "_blank", class: "btn btn-primary btn-social btn-nextdoor m-5" %>
    <% end %>

Instagram Post:

<%= @published_job_page.generated_instagram_post %>

    Copy Text

  <% if @published_job_page.generated_instagram_post.present? %>
    <% instagram_share_text = CGI.escape(@published_job_page.generated_instagram_post) %>
    <% instagram_share_url = "https://www.instagram.com/create/story/?text=#{instagram_share_text}" %>
    <%= link_to "Share on Instagram", instagram_share_url, target: "_blank", class: "btn btn-primary btn-social btn-instagram m-5" %>
  <% end %>

Google My Business Post:

<%= @published_job_page.generated_google_my_business_post %>

    Copy Text


    Go to Google My Business

Show Prompts

Prompts:

Title Prompt:

<%= @published_job_page.prompt_for_title %>

HTML Page Prompt:

<%= @published_job_page.prompt_for_html_page %>

Facebook Post Prompt:

<%= @published_job_page.prompt_for_facebook_post %>

Instagram Post Prompt:

<%= @published_job_page.prompt_for_instagram_post %>

Nextdoor Post Prompt:

<%= @published_job_page.prompt_for_nextdoor_post %>

Google My Business Post Prompt:

<%= @published_job_page.prompt_for_google_my_business_post %>

<%# Read only version of the HTML. %>

<%= @published_job_page.title %>

                /edit" title="Edit Invoice">

<%= raw @published_job_page.html %>

<% unless @published_job_page.job.nil? %>
">Job
<% end %>
<%= link_to 'Back', published_job_pages_path %>

<%= content_for :footer_scripts do %>

    function publishToWordpress(){
        console.log("Publish pressed!");
        
        var categoryIds = [];
        var checkboxes = document.querySelectorAll('input[name="wp_categories[]"]:checked');
        
        checkboxes.forEach(function(checkbox) {
        categoryIds.push(checkbox.value);
        })

        console.log("Category ids: " + categoryIds);

        //var featuredImageUrl = "https://fieldrocket-seo-optimized-images.s3.amazonaws.com/Salt-Lake-City-,-Ut--Salt-Lake-City-Tree-Removal-7.jpg"; //TODO: Hardcoded for now.
        var featuredImageUrl = $('#featuredImageUrl').val();

        $("#publishToWordpressButton").addClass("is-loading");

        $.post({
            url: `/published_job_pages/<%=@published_job_page.id%>/publish_job_to_wordpress`,
            data: {wp_categories: categoryIds, featured_image_url: featuredImageUrl},   
            success(data){
                console.log("success server response: " + data);
                gritterSuccess("Success", "This article was published on Wordpress");
                $("#publishToWordpressButton").removeClass("is-loading");
                window.location.reload();

            },
            error(data){
                console.log("error server response: " + data);
                $("#publishToWordpressButton").removeClass("is-loading");
                gritterError("Error", "Couldn't publish this article");
            }
        })
    }

    function copyFacebookContentToClipboard(){
        console.log("made it");
        let facebookPostText = $('#facebook-post-content').text()
        navigator.clipboard.writeText(facebookPostText)
        gritterSuccess("Success", "Copied to Clipboard")
    }
    function copyNextDoorContentToClipboard(){
        console.log("made it");
        let NextDoorPostText = $('#nextdoor-post-content').text()
        navigator.clipboard.writeText(NextDoorPostText)
        gritterSuccess("Success", "Copied to Clipboard")
    }
    function copyInstagramContentToClipboard(){
        console.log("made it");
        let instagramPostText = $('#instagram-post-content').text()
        navigator.clipboard.writeText(instagramPostText)
        gritterSuccess("Success", "Copied to Clipboard")
    }
    function copyGoogleMyBusinessContentToClipboard(){
        console.log("made it");
        let googleMyBusinessPostText = $('#google-my-business-post-content').text()
        navigator.clipboard.writeText(googleMyBusinessPostText)
        gritterSuccess("Success", "Copied to Clipboard")
    }

    function publishToFacebookApi(){
        console.log("Publish to Facebook pressed!");

        $("#publishToFacebookButton").addClass("is-loading");

        $.post({
            url: `/published_job_pages/<%= @published_job_page.id %>/publish_to_facebook`,
            success(data){
                console.log("success server response: " + data);
                gritterSuccess("Success", "This article was published on Facebook");
                $("#publishToFacebookButton").removeClass("is-loading");
            },
            error(data){
                console.log("error server response: " + data);
                $("#publishToFacebookButton").removeClass("is-loading");
                gritterError("Error", "Couldn't publish this article to Facebook");
            }
        })
    }

    $(document).ready(function() {
        var publishToWordpressButton = document.getElementById("publishToWordpressButton");
        if (publishToWordpressButton) {
            publishToWordpressButton.addEventListener("click", publishToWordpress, false);
        }

        var publishToFacebookButton = document.getElementById("publishToFacebookButton");
        if (publishToFacebookButton) {
            publishToFacebookButton.addEventListener("click", publishToFacebookApi, false);
        }

        // Add toggle functionality for prompts section
        document.getElementById("togglePromptsButton").addEventListener("click", function() {
            console.log("made it");
            var promptsSection = document.getElementById("promptsSection");
            if (promptsSection.style.display === "none") {
                promptsSection.style.display = "block";
                this.textContent = "Hide Prompts";
            } else {
                promptsSection.style.display = "none";
                this.textContent = "Show Prompts";
            }
        });
    });

<% end %>

<%= content_for :header do %>

<%# %>
<% end %>