{"version":3,"sources":["webpack://../components/Calendar/src/Calendar.vue"],"names":[],"mappings":"AA8SA,mBACA,kBAAA,CACA,oCAAA,CACA,qCAAA,CACA,kBAAA,CACA,gCAAA,CACA,gCAAA,CACA,gCAAA,CACA,gCAAA,CACA,gBAAA,CACA,wBAAA,CACA,kBAAA,CACA,0BAAA,CACA,mBAAA,CACA,gBAAA,CACA,kBAAA,CAEA,6BAAA,CAAA,qBAAA,CACA,YAAA,CACA,0BAAA,CACA,mBAAA,CACA,8BAAA,CACA,mCAAA,CACA,iBACA,CAEA,mBACA,YAAA,CACA,kBAAA,CACA,6BAAA,CACA,iBACA,CAEA,mBACA,wBAAA,CACA,eACA,CAEA,mBACA,yBAAA,CACA,0BACA,CAEA,mBACA,UAAA,CACA,wBAAA,CACA,gBACA,CAEA,mBACA,sBAAA,CACA,uBAAA,CACA,2BAAA,CACA,2BAAA,CACA,eAAA,CACA,kCAAA,CACA,sCAAA,CACA,wBAAA,CACA,WACA,CAEA,mBACA,2BAAA,CACA,eAAA,CACA,wBAAA,CACA,iBACA,CAEA,mBACA,sBAAA,CACA,uBAAA,CACA,SAAA,CACA,iBAAA,CACA,wBAAA,CACA,WAAA,CACA,iBAAA,CACA,YAAA,CACA,cAAA,CACA,uCAAA,CACA,wBAAA,CAAA,gBAAA,CACA,yBAuBA,CArBA,qCACA,2BAAA,CACA,mCACA,CAEA,qCACA,mCACA,CAEA,qCACA,2BAAA,CACA,kBASA,CAPA,uDACA,2BACA,CAEA,uDACA,2BACA,CAIA,4FACA,sCACA","file":"styles.css","sourcesContent":["<template>\n\t<div\n\t\t:class=\"$s.Calendar\"\n\t\tv-bind=\"$attrs\"\n\t\tv-on=\"$listeners\"\n\t>\n\t\t<div :class=\"$s.CalendarHeader\">\n\t\t\t<m-button\n\t\t\t\t:disabled=\"isCalendarNavDisabled(-1)\"\n\t\t\t\tcolor=\"#f2f2f2\"\n\t\t\t\tsize=\"small\"\n\t\t\t\tvariant=\"primary\"\n\t\t\t\t@click=\"incrementMonth(-1)\"\n\t\t\t>\n\t\t\t\t<chevron-left\n\t\t\t\t\t:class=\"$s.CalendarHeaderButtonIcon\"\n\t\t\t\t/>\n\t\t\t</m-button>\n\n\t\t\t<span :class=\"$s.CalendarHeaderTitle\">\n\t\t\t\t{{ monthName }}\n\t\t\t</span>\n\n\t\t\t<m-button\n\t\t\t\t:disabled=\"isCalendarNavDisabled(1)\"\n\t\t\t\tsize=\"small\"\n\t\t\t\tvariant=\"primary\"\n\t\t\t\tcolor=\"#f2f2f2\"\n\t\t\t\t@click=\"incrementMonth(1)\"\n\t\t\t>\n\t\t\t\t<chevron-right\n\t\t\t\t\t:class=\"$s.CalendarHeaderButtonIcon\"\n\t\t\t\t/>\n\t\t\t</m-button>\n\t\t</div>\n\t\t<table :class=\"$s.CalendarTable\">\n\t\t\t<thead>\n\t\t\t\t<tr>\n\t\t\t\t\t<th\n\t\t\t\t\t\tv-for=\"day in weekdays\"\n\t\t\t\t\t\t:key=\"`day-${day}`\"\n\t\t\t\t\t\t:class=\"$s.DateHeaderCell\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{{ day }}\n\t\t\t\t\t</th>\n\t\t\t\t</tr>\n\t\t\t</thead>\n\t\t\t<tbody>\n\t\t\t\t<tr\n\t\t\t\t\tv-for=\"(week, wi) in weeks\"\n\t\t\t\t\t:key=\"`week-${wi}`\"\n\t\t\t\t>\n\t\t\t\t\t<td\n\t\t\t\t\t\tv-for=\"(date, di) in week\"\n\t\t\t\t\t\t:key=\"`date-${wi-di}`\"\n\t\t\t\t\t\t:class=\"$s.DateCell\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tv-if=\"date\"\n\t\t\t\t\t\t\t:class=\"[$s.DateCellButton, {\n\t\t\t\t\t\t\t\t[$s.selected]: isDateSelected(date),\n\t\t\t\t\t\t\t\t[$s.disabled]: isDateDisabled(date),\n\t\t\t\t\t\t\t\t[$s.today]: isToday(date),\n\t\t\t\t\t\t\t}]\"\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\t\t\t@click.prevent=\"emitDate(date)\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{{ date.getDate() }}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</td>\n\t\t\t\t</tr>\n\t\t\t</tbody>\n\t\t</table>\n\t</div>\n</template>\n\n<script>\nimport {\n\tstartOfWeek,\n\tstartOfMonth,\n\tendOfMonth,\n\taddDays,\n\tisToday,\n\taddMonths,\n\tparseISO,\n\tformatISO,\n} from 'date-fns';\nimport { MButton } from '@square/maker/components/Button';\nimport ChevronLeft from '@square/maker-icons/ChevronLeft';\nimport ChevronRight from '@square/maker-icons/ChevronRight';\n\nconst formatISOdate = (dateObject) => formatISO(dateObject, { representation: 'date' });\nconst isIsoFormat = (string) => !string || /^\\d{4}-\\d{2}-\\d{2}$/.test(string); // YYYY-MM-DD\n\nexport default {\n\tcomponents: {\n\t\tMButton,\n\t\tChevronLeft,\n\t\tChevronRight,\n\t},\n\n\tinheritAttrs: false,\n\n\tmodel: {\n\t\tprop: 'selectedDate',\n\t\tevent: 'calendar:update',\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Selected date value in ISO format.\n\t\t */\n\t\tselectedDate: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t\tvalidator: isIsoFormat,\n\t\t},\n\t\t/**\n\t\t * Disable the dates before the min-date in ISO format.\n\t\t */\n\t\tminDate: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t\tvalidator: isIsoFormat,\n\t\t},\n\t\t/**\n\t\t * Disable the dates after the max-date in ISO format.\n\t\t */\n\t\tmaxDate: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t\tvalidator: isIsoFormat,\n\t\t},\n\t\t/**\n\t\t * List of disabled dates in ISO format.\n\t\t */\n\t\tdisabledDates: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => ([]),\n\t\t\tvalidator: (disabledDates) => disabledDates.every((date) => isIsoFormat(date)),\n\t\t},\n\t\t/**\n\t\t * Calendar locale. Defaults to browser locale.\n\t\t */\n\t\tlocale: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tshowingMonth: new Date(),\n\t\t};\n\t},\n\n\tcomputed: {\n\t\tmonthName() {\n\t\t\treturn this.showingMonth.toLocaleString(this.locale, { month: 'long', year: 'numeric' });\n\t\t},\n\n\t\tweekdays() {\n\t\t\tconst firstDayOfWeek = startOfWeek(new Date());\n\t\t\tconst weekdays = Array.from({ length: 7 }, (_, i) => addDays(firstDayOfWeek, i));\n\t\t\treturn weekdays.map((date) => date.toLocaleDateString(this.locale, { weekday: 'short' }));\n\t\t},\n\n\t\tweeks() {\n\t\t\tconst month = this.showingMonth.getMonth();\n\t\t\tconst dateOfMonth = startOfMonth(this.showingMonth);\n\n\t\t\tconst weeks = [];\n\t\t\tlet week = [];\n\t\t\twhile (dateOfMonth.getMonth() === month) {\n\t\t\t\tconst weekday = dateOfMonth.getDay();\n\t\t\t\tweek[weekday] = new Date(dateOfMonth);\n\n\t\t\t\tconst lastWeekdayIndex = 6;\n\t\t\t\tif (weekday === lastWeekdayIndex) {\n\t\t\t\t\tweeks.push(week);\n\t\t\t\t\tweek = [];\n\t\t\t\t}\n\n\t\t\t\tconst incrementDateBy = 1;\n\t\t\t\tdateOfMonth.setDate(dateOfMonth.getDate() + incrementDateBy);\n\t\t\t}\n\n\t\t\tweeks.push(week);\n\n\t\t\treturn weeks;\n\t\t},\n\n\t\tselectedDateObject() {\n\t\t\treturn this.selectedDate && parseISO(this.selectedDate);\n\t\t},\n\n\t\tmaxDateObject() {\n\t\t\treturn this.maxDate && parseISO(this.maxDate);\n\t\t},\n\n\t\tminDateObject() {\n\t\t\treturn this.minDate && parseISO(this.minDate);\n\t\t},\n\t},\n\n\twatch: {\n\t\tselectedDate() {\n\t\t\tconst newSelectedDate = this.selectedDateObject;\n\t\t\tif (newSelectedDate) {\n\t\t\t\tthis.showingMonth = newSelectedDate;\n\t\t\t}\n\t\t},\n\t},\n\n\tmounted() {\n\t\tif (this.selectedDateObject) {\n\t\t\tthis.showingMonth = this.selectedDateObject;\n\t\t}\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Determines if the previous/next month buttons should be disabled\n\t\t * @param {(-1|1)} direction\n\t\t * @return {boolean}\n\t\t */\n\t\tisCalendarNavDisabled(direction) {\n\t\t\tconst projectedDate = addMonths(this.showingMonth, direction);\n\t\t\tconst previousDirection = -1;\n\t\t\tconst nextDirection = 1;\n\n\t\t\tif (direction === previousDirection && this.minDateObject) {\n\t\t\t\treturn startOfMonth(this.minDateObject) > startOfMonth(projectedDate);\n\t\t\t}\n\n\t\t\tif (direction === nextDirection && this.maxDateObject) {\n\t\t\t\treturn endOfMonth(this.maxDateObject) < endOfMonth(projectedDate);\n\t\t\t}\n\n\t\t\treturn false;\n\t\t},\n\n\t\t/**\n\t\t * Increment/decrement the calendar month\n\t\t * @param {number} incrementBy\n\t\t */\n\t\tincrementMonth(incrementBy) {\n\t\t\tthis.showingMonth = addMonths(this.showingMonth, incrementBy);\n\t\t},\n\n\t\t/**\n\t\t * Determines if the date is selected\n\t\t * @param {Date} date\n\t\t * @return {boolean}\n\t\t */\n\t\tisDateSelected(date) {\n\t\t\treturn this.selectedDate === formatISOdate(date);\n\t\t},\n\n\t\t/**\n\t\t * Determines if the date is disabled\n\t\t * @param {Date} date\n\t\t * @return {boolean}\n\t\t */\n\t\tisDateDisabled(date) {\n\t\t\tif (this.minDateObject && this.minDateObject > date) {\n\t\t\t\treturn true;\n\t\t\t}\n\n\t\t\tif (this.maxDateObject && this.maxDateObject < date) {\n\t\t\t\treturn true;\n\t\t\t}\n\n\t\t\treturn this.disabledDates.includes(formatISOdate(date));\n\t\t},\n\n\t\t/**\n\t\t * Determines if the date is today\n\t\t * @param {Date} date\n\t\t * @return {boolean}\n\t\t */\n\t\tisToday,\n\n\t\t/**\n\t\t * Emits a new Date ISO string with a new date value\n\t\t * @param {Date} date\n\t\t */\n\t\temitDate(date) {\n\t\t\tif (!this.isDateDisabled(date)) {\n\t\t\t\t/**\n\t\t\t\t * New ISO date\n\t\t\t\t * @property {string}\n\t\t\t\t */\n\t\t\t\tthis.$emit('calendar:update', formatISOdate(date));\n\t\t\t}\n\t\t},\n\t},\n};\n</script>\n\n<style module=\"$s\">\n.Calendar {\n\t--color-white: #fff;\n\t--color-white-40: rgba(255, 255, 255, 0.4);\n\t--color-white-95: rgba(255, 255, 255, 0.95);\n\t--color-black: #000;\n\t--color-black-10: rgba(0, 0, 0, 0.1);\n\t--color-black-20: rgba(0, 0, 0, 0.2);\n\t--color-black-40: rgba(0, 0, 0, 0.4);\n\t--color-black-50: rgba(0, 0, 0, 0.5);\n\t--font-size: 16px;\n\t--font-size-minus-1: 12px;\n\t--line-height: 24px;\n\t--line-height-minus-1: 16px;\n\t--chevron-size: 32px;\n\t--cell-size: 40px;\n\t--cell-padding: 4px;\n\n\tmin-width: min-content;\n\tpadding: 16px;\n\tfont-size: var(--font-size);\n\tfont-family: inherit;\n\tline-height: var(--line-height);\n\tbackground-color: var(--color-white);\n\tborder-radius: 4px;\n}\n\n.CalendarHeader {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tmargin-bottom: 8px;\n}\n\n.CalendarHeaderTitle {\n\tcolor: var(--color-black);\n\tfont-weight: bold;\n}\n\n.CalendarHeaderButtonIcon {\n\twidth: var(--chevron-size);\n\theight: var(--chevron-size);\n}\n\n.CalendarTable {\n\twidth: 100%;\n\tborder-collapse: separate;\n\tborder-spacing: 0;\n}\n\n.DateHeaderCell {\n\twidth: var(--cell-size);\n\theight: var(--cell-size);\n\tpadding: var(--cell-padding);\n\tcolor: var(--color-black-50);\n\tfont-weight: normal;\n\tfont-size: var(--font-size-minus-1);\n\tline-height: var(--line-height-minus-1);\n\ttext-transform: uppercase;\n\tcursor: initial;\n}\n\n.DateCell {\n\tpadding: var(--cell-padding);\n\toverflow: hidden;\n\tcolor: var(--color-black);\n\ttext-align: center;\n}\n\n.DateCellButton {\n\twidth: var(--cell-size);\n\theight: var(--cell-size);\n\tpadding: 0;\n\tfont-size: inherit;\n\tbackground-color: inherit;\n\tborder: none;\n\tborder-radius: 8px;\n\toutline: none;\n\tcursor: pointer;\n\ttransition: background-color 0.2s ease-in;\n\tuser-select: none;\n\ttouch-action: manipulation;\n\n\t&.selected {\n\t\tcolor: var(--color-white-95);\n\t\tbackground-color: var(--color-black);\n\t}\n\n\t&.today {\n\t\tborder: 1px solid var(--color-black);\n\t}\n\n\t&.disabled {\n\t\tcolor: var(--color-black-40);\n\t\tcursor: not-allowed;\n\n\t\t&.today {\n\t\t\tcolor: var(--color-black-20);\n\t\t}\n\n\t\t&.selected {\n\t\t\tcolor: var(--color-white-40);\n\t\t}\n\t}\n}\n\n.DateCell:hover .DateCellButton:not(.selected):not(.disabled) {\n\tbackground-color: var(--color-black-10);\n}\n</style>\n"]}