{"version":3,"file":"styles.css","mappings":"AA6TA,gBACA,iBACA,yBACA,mBACA,2BACA,iBACA,mBAOA,oDACA,2DAHA,oBADA,2BAEA,+BAJA,oDACA,YAMA,CAEA,gBAEA,mBADA,aAEA,8BACA,iBACA,CAEA,gBACA,sCAEA,wDADA,mDAEA,CAEA,gBAEA,wBACA,iBAFA,UAGA,CAEA,gBAOA,YAHA,mCAFA,wBAGA,uCAFA,4BAGA,yBALA,sBAOA,CAEA,gBAEA,gBADA,4BAEA,iBACA,CAEA,gBAQA,yBACA,YACA,0DANA,cAQA,eALA,oBADA,kBADA,oBAHA,wBASA,aARA,UAYA,0BAFA,wCACA,0CAbA,sBA6BA,CAbA,+BAEA,8CADA,wCAEA,CAEA,+BACA,gBACA,CAEA,+BACA,mBACA,UACA,CAGA,gFACA,sDACA","sources":["webpack://@square/maker/./src/components/Calendar/src/Calendar.vue"],"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\tv-bind=\"calendarNavButtons\"\n\t\t\t\t:disabled=\"isCalendarNavDisabled(-1)\"\n\t\t\t\tsize=\"medium\"\n\t\t\t\tvariant=\"fill\"\n\t\t\t\t@click=\"incrementMonth(-1)\"\n\t\t\t>\n\t\t\t\t<m-icon\n\t\t\t\t\tname=\"chevronLeft\"\n\t\t\t\t\tsize=\"large\"\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\tv-bind=\"calendarNavButtons\"\n\t\t\t\t:disabled=\"isCalendarNavDisabled(1)\"\n\t\t\t\tsize=\"medium\"\n\t\t\t\tvariant=\"fill\"\n\t\t\t\t@click=\"incrementMonth(1)\"\n\t\t\t>\n\t\t\t\t<m-icon\n\t\t\t\t\tname=\"chevronRight\"\n\t\t\t\t\tsize=\"large\"\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 { MIcon } from '@square/maker/components/Icon';\nimport { MThemeKey, defaultTheme } from '@square/maker/components/Theme';\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\tMIcon,\n\t},\n\n\tinject: {\n\t\ttheme: {\n\t\t\tdefault: defaultTheme(),\n\t\t\tfrom: MThemeKey,\n\t\t},\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\n\t\tcalendarNavButtons() {\n\t\t\treturn {\n\t\t\t\tcolor: this.theme.colors['neutral-10'] || '#f2f2f2',\n\t\t\t\ttextColor: this.theme.colors['neutral-90'] || '#f2f2f2',\n\t\t\t};\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--font-size: 16px;\n\t--font-size-minus-1: 12px;\n\t--line-height: 24px;\n\t--line-height-minus-1: 16px;\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: $maker-color-background;\n\tborder-radius: $maker-shape-default-border-radius;\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: $maker-color-heading;\n\tfont-weight: $maker-font-label-font-weight;\n\tfont-family: $maker-font-label-font-family;\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\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\ttext-align: center;\n}\n\n.DateCellButton {\n\twidth: var(--cell-size);\n\theight: var(--cell-size);\n\tpadding: 0;\n\tcolor: inherit;\n\tfont-weight: inherit;\n\tfont-size: inherit;\n\tfont-family: inherit;\n\tbackground-color: inherit;\n\tborder: none;\n\tborder-radius: $maker-shape-button-border-radius;\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: $maker-color-background;\n\t\tbackground-color: $maker-color-body;\n\t}\n\n\t&.today {\n\t\tborder: 1px solid currentColor;\n\t}\n\n\t&.disabled {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t}\n}\n\n.DateCell:hover .DateCellButton:not(.selected):not(.disabled) {\n\tbackground-color: $maker-color-neutral-10;\n}\n</style>\n"],"names":[],"sourceRoot":""}