wc-datepicker - npm Package Compare versions

Comparing version 0.3.0 to 0.4.0

dist/cjs/loader.cjs.js

@@ -17,3 +17,3 @@ 'use strict';
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["wc-datepicker.cjs",[[2,"wc-datepicker",{"clearButtonContent":[1,"clear-button-content"],"disableDate":[16],"elementClassName":[1,"element-class-name"],"firstDayOfWeek":[2,"first-day-of-week"],"range":[4],"labels":[16],"locale":[1],"nextMonthButtonContent":[1,"next-month-button-content"],"nextYearButtonContent":[1,"next-year-button-content"],"previousMonthButtonContent":[1,"previous-month-button-content"],"previousYearButtonContent":[1,"previous-year-button-content"],"showClearButton":[4,"show-clear-button"],"showMonthStepper":[4,"show-month-stepper"],"showTodayButton":[4,"show-today-button"],"showYearStepper":[4,"show-year-stepper"],"startDate":[1,"start-date"],"todayButtonContent":[1,"today-button-content"],"value":[1040],"currentDate":[32],"hoveredDate":[32],"weekdays":[32]}]]]], options);
+  return index.bootstrapLazy([["wc-datepicker.cjs",[[2,"wc-datepicker",{"clearButtonContent":[1,"clear-button-content"],"disabled":[4],"disableDate":[16],"elementClassName":[1,"element-class-name"],"firstDayOfWeek":[2,"first-day-of-week"],"range":[4],"labels":[16],"locale":[1],"nextMonthButtonContent":[1,"next-month-button-content"],"nextYearButtonContent":[1,"next-year-button-content"],"previousMonthButtonContent":[1,"previous-month-button-content"],"previousYearButtonContent":[1,"previous-year-button-content"],"showClearButton":[4,"show-clear-button"],"showMonthStepper":[4,"show-month-stepper"],"showTodayButton":[4,"show-today-button"],"showYearStepper":[4,"show-year-stepper"],"startDate":[1,"start-date"],"todayButtonContent":[1,"today-button-content"],"value":[1040],"currentDate":[32],"hoveredDate":[32],"weekdays":[32]}]]]], options);
   });
@@ -20,0 +20,0 @@ };

dist/cjs/wc-datepicker.cjs.entry.js

@@ -158,2 +158,3 @@ 'use strict';
     this.changeMonth = index.createEvent(this, "changeMonth", 7);
+    this.disabled = false;
     this.disableDate = () => false;
@@ -193,2 +194,5 @@ this.elementClassName = 'wc-datepicker';
     this.onClick = (event) => {
+      if (this.disabled) {
+        return;
+      }
       const target = event.target.closest('[data-date]');
@@ -215,2 +219,5 @@ if (!Boolean(target)) {
     this.onKeyDown = (event) => {
+      if (this.disabled) {
+        return;
+      }
       if (event.code === 'ArrowLeft') {
@@ -264,2 +271,5 @@ event.preventDefault();
     this.onMouseEnter = (event) => {
+      if (this.disabled) {
+        return;
+      }
       const date = new Date(event.target.closest('td').dataset.date);
@@ -387,3 +397,6 @@ this.hoveredDate = date;
     const showFooter = this.showTodayButton || this.showClearButton;
-    return (index.h(index.Host, null, index.h("div", { "aria-label": this.labels.picker, class: this.getClassName(), role: "group" }, index.h("div", { class: this.getClassName('header') }, index.h("span", { "aria-atomic": "true", "aria-live": "polite", class: "visually-hidden" }, this.getTitle()), this.showYearStepper && (index.h("button", { "aria-label": this.labels.previousYearButton, class: this.getClassName('previous-year-button'), innerHTML: this.previousYearButtonContent || undefined, onClick: this.previousYear, type: "button" }, index.h("svg", { fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, index.h("polyline", { points: "11 17 6 12 11 7" }), index.h("polyline", { points: "18 17 13 12 18 7" })))), this.showMonthStepper && (index.h("button", { "aria-label": this.labels.previousMonthButton, class: this.getClassName('previous-month-button'), innerHTML: this.previousMonthButtonContent || undefined, onClick: this.previousMonth, type: "button" }, index.h("svg", { fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, index.h("polyline", { points: "15 18 9 12 15 6" })))), index.h("span", { class: this.getClassName('current-month') }, index.h("select", { "aria-label": this.labels.monthSelect, class: this.getClassName('month-select'), name: "month", onChange: this.onMonthSelect }, getMonths(this.locale).map((month, index$1) => (index.h("option", { key: month, selected: this.currentDate.getMonth() === index$1, value: index$1 + 1 }, month)))), index.h("input", { "aria-label": this.labels.yearSelect, class: this.getClassName('year-select'), max: 9999, min: 1, name: "year", onChange: this.onYearSelect, type: "number", value: this.currentDate.getFullYear() })), this.showMonthStepper && (index.h("button", { "aria-label": this.labels.nextMonthButton, class: this.getClassName('next-month-button'), innerHTML: this.nextMonthButtonContent || undefined, onClick: this.nextMonth, type: "button" }, index.h("svg", { fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, index.h("polyline", { points: "9 18 15 12 9 6" })))), this.showYearStepper && (index.h("button", { "aria-label": this.labels.nextYearButton, class: this.getClassName('next-year-button'), innerHTML: this.nextYearButtonContent || undefined, onClick: this.nextYear, type: "button" }, index.h("svg", { fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, index.h("polyline", { points: "13 17 18 12 13 7" }), index.h("polyline", { points: "6 17 11 12 6 7" }))))), index.h("div", { class: this.getClassName('body') }, index.h("table", { class: this.getClassName('calendar'), onKeyDown: this.onKeyDown, role: "grid" }, index.h("thead", { class: this.getClassName('calendar-header') }, index.h("tr", { class: this.getClassName('weekday-row') }, this.weekdays.map((weekday) => (index.h("th", { abbr: weekday[1], class: this.getClassName('weekday'), key: weekday[0], scope: "col" }, index.h("span", null, weekday[0])))))), index.h("tbody", null, this.getCalendarRows().map((calendarRow) => {
+    return (index.h(index.Host, null, index.h("div", { "aria-disabled": String(this.disabled), "aria-label": this.labels.picker, class: {
+        [this.getClassName()]: true,
+        [`${this.getClassName()}--disabled`]: this.disabled
+      }, role: "group" }, index.h("div", { class: this.getClassName('header') }, index.h("span", { "aria-atomic": "true", "aria-live": "polite", class: "visually-hidden" }, this.getTitle()), this.showYearStepper && (index.h("button", { "aria-label": this.labels.previousYearButton, class: this.getClassName('previous-year-button'), disabled: this.disabled, innerHTML: this.previousYearButtonContent || undefined, onClick: this.previousYear, type: "button" }, index.h("svg", { fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, index.h("polyline", { points: "11 17 6 12 11 7" }), index.h("polyline", { points: "18 17 13 12 18 7" })))), this.showMonthStepper && (index.h("button", { "aria-label": this.labels.previousMonthButton, class: this.getClassName('previous-month-button'), disabled: this.disabled, innerHTML: this.previousMonthButtonContent || undefined, onClick: this.previousMonth, type: "button" }, index.h("svg", { fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, index.h("polyline", { points: "15 18 9 12 15 6" })))), index.h("span", { class: this.getClassName('current-month') }, index.h("select", { "aria-label": this.labels.monthSelect, class: this.getClassName('month-select'), disabled: this.disabled, name: "month", onChange: this.onMonthSelect }, getMonths(this.locale).map((month, index$1) => (index.h("option", { key: month, selected: this.currentDate.getMonth() === index$1, value: index$1 + 1 }, month)))), index.h("input", { "aria-label": this.labels.yearSelect, class: this.getClassName('year-select'), disabled: this.disabled, max: 9999, min: 1, name: "year", onChange: this.onYearSelect, type: "number", value: this.currentDate.getFullYear() })), this.showMonthStepper && (index.h("button", { "aria-label": this.labels.nextMonthButton, class: this.getClassName('next-month-button'), disabled: this.disabled, innerHTML: this.nextMonthButtonContent || undefined, onClick: this.nextMonth, type: "button" }, index.h("svg", { fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, index.h("polyline", { points: "9 18 15 12 9 6" })))), this.showYearStepper && (index.h("button", { "aria-label": this.labels.nextYearButton, class: this.getClassName('next-year-button'), disabled: this.disabled, innerHTML: this.nextYearButtonContent || undefined, onClick: this.nextYear, type: "button" }, index.h("svg", { fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, index.h("polyline", { points: "13 17 18 12 13 7" }), index.h("polyline", { points: "6 17 11 12 6 7" }))))), index.h("div", { class: this.getClassName('body') }, index.h("table", { class: this.getClassName('calendar'), onKeyDown: this.onKeyDown, role: "grid" }, index.h("thead", { class: this.getClassName('calendar-header') }, index.h("tr", { class: this.getClassName('weekday-row') }, this.weekdays.map((weekday) => (index.h("th", { abbr: weekday[1], class: this.getClassName('weekday'), key: weekday[0], scope: "col" }, index.h("span", null, weekday[0])))))), index.h("tbody", null, this.getCalendarRows().map((calendarRow) => {
       const rowKey = `row-${calendarRow[0].getMonth()}-${calendarRow[0].getDate()}`;
@@ -423,3 +436,5 @@ return (index.h("tr", { class: this.getClassName('calendar-row'), key: rowKey }, calendarRow.map((day) => {
             : 'span';
-        return (index.h("td", { "aria-disabled": String(isDisabled), "aria-selected": isSelected ? 'true' : undefined, class: className, "data-date": getISODateString(day), key: cellKey, onClick: this.onClick, onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave, role: "gridcell", tabIndex: isSameDay(day, this.currentDate) ? 0 : -1 }, index.h(Tag, { "aria-hidden": "true" }, day.getDate()), index.h("span", { class: "visually-hidden" }, Intl.DateTimeFormat(this.locale, {
+        return (index.h("td", { "aria-disabled": String(isDisabled), "aria-selected": isSelected ? 'true' : undefined, class: className, "data-date": getISODateString(day), key: cellKey, onClick: this.onClick, onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave, role: "gridcell", tabIndex: isSameDay(day, this.currentDate) && !this.disabled
+            ? 0
+            : -1 }, index.h(Tag, { "aria-hidden": "true" }, day.getDate()), index.h("span", { class: "visually-hidden" }, Intl.DateTimeFormat(this.locale, {
           day: 'numeric',
@@ -429,3 +444,3 @@ month: 'long'
       })));
-    })))), showFooter && (index.h("div", { class: this.getClassName('footer') }, this.showTodayButton && (index.h("button", { class: this.getClassName('today-button'), innerHTML: this.todayButtonContent || undefined, onClick: this.showToday, type: "button" }, this.labels.todayButton)), this.showClearButton && (index.h("button", { class: this.getClassName('clear-button'), innerHTML: this.clearButtonContent || undefined, onClick: this.clear, type: "button" }, this.labels.clearButton)))))));
+    })))), showFooter && (index.h("div", { class: this.getClassName('footer') }, this.showTodayButton && (index.h("button", { class: this.getClassName('today-button'), disabled: this.disabled, innerHTML: this.todayButtonContent || undefined, onClick: this.showToday, type: "button" }, this.labels.todayButton)), this.showClearButton && (index.h("button", { class: this.getClassName('clear-button'), disabled: this.disabled, innerHTML: this.clearButtonContent || undefined, onClick: this.clear, type: "button" }, this.labels.clearButton)))))));
   }
@@ -432,0 +447,0 @@ get el() { return index.getElement(this); }

dist/cjs/wc-datepicker.cjs.js

@@ -18,3 +18,3 @@ 'use strict';
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["wc-datepicker.cjs",[[2,"wc-datepicker",{"clearButtonContent":[1,"clear-button-content"],"disableDate":[16],"elementClassName":[1,"element-class-name"],"firstDayOfWeek":[2,"first-day-of-week"],"range":[4],"labels":[16],"locale":[1],"nextMonthButtonContent":[1,"next-month-button-content"],"nextYearButtonContent":[1,"next-year-button-content"],"previousMonthButtonContent":[1,"previous-month-button-content"],"previousYearButtonContent":[1,"previous-year-button-content"],"showClearButton":[4,"show-clear-button"],"showMonthStepper":[4,"show-month-stepper"],"showTodayButton":[4,"show-today-button"],"showYearStepper":[4,"show-year-stepper"],"startDate":[1,"start-date"],"todayButtonContent":[1,"today-button-content"],"value":[1040],"currentDate":[32],"hoveredDate":[32],"weekdays":[32]}]]]], options);
+  return index.bootstrapLazy([["wc-datepicker.cjs",[[2,"wc-datepicker",{"clearButtonContent":[1,"clear-button-content"],"disabled":[4],"disableDate":[16],"elementClassName":[1,"element-class-name"],"firstDayOfWeek":[2,"first-day-of-week"],"range":[4],"labels":[16],"locale":[1],"nextMonthButtonContent":[1,"next-month-button-content"],"nextYearButtonContent":[1,"next-year-button-content"],"previousMonthButtonContent":[1,"previous-month-button-content"],"previousYearButtonContent":[1,"previous-year-button-content"],"showClearButton":[4,"show-clear-button"],"showMonthStepper":[4,"show-month-stepper"],"showTodayButton":[4,"show-today-button"],"showYearStepper":[4,"show-year-stepper"],"startDate":[1,"start-date"],"todayButtonContent":[1,"today-button-content"],"value":[1040],"currentDate":[32],"hoveredDate":[32],"weekdays":[32]}]]]], options);
 });

dist/collection/components/wc-datepicker/wc-datepicker.js

@@ -16,2 +16,3 @@ import { h, Host } from '@stencil/core';
   constructor() {
+    this.disabled = false;
     this.disableDate = () => false;
@@ -51,2 +52,5 @@ this.elementClassName = 'wc-datepicker';
     this.onClick = (event) => {
+      if (this.disabled) {
+        return;
+      }
       const target = event.target.closest('[data-date]');
@@ -73,2 +77,5 @@ if (!Boolean(target)) {
     this.onKeyDown = (event) => {
+      if (this.disabled) {
+        return;
+      }
       if (event.code === 'ArrowLeft') {
@@ -122,2 +129,5 @@ event.preventDefault();
     this.onMouseEnter = (event) => {
+      if (this.disabled) {
+        return;
+      }
       const date = new Date(event.target.closest('td').dataset.date);
@@ -245,3 +255,6 @@ this.hoveredDate = date;
     const showFooter = this.showTodayButton || this.showClearButton;
-    return (h(Host, null, h("div", { "aria-label": this.labels.picker, class: this.getClassName(), role: "group" }, h("div", { class: this.getClassName('header') }, h("span", { "aria-atomic": "true", "aria-live": "polite", class: "visually-hidden" }, this.getTitle()), this.showYearStepper && (h("button", { "aria-label": this.labels.previousYearButton, class: this.getClassName('previous-year-button'), innerHTML: this.previousYearButtonContent || undefined, onClick: this.previousYear, type: "button" }, h("svg", { fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, h("polyline", { points: "11 17 6 12 11 7" }), h("polyline", { points: "18 17 13 12 18 7" })))), this.showMonthStepper && (h("button", { "aria-label": this.labels.previousMonthButton, class: this.getClassName('previous-month-button'), innerHTML: this.previousMonthButtonContent || undefined, onClick: this.previousMonth, type: "button" }, h("svg", { fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, h("polyline", { points: "15 18 9 12 15 6" })))), h("span", { class: this.getClassName('current-month') }, h("select", { "aria-label": this.labels.monthSelect, class: this.getClassName('month-select'), name: "month", onChange: this.onMonthSelect }, getMonths(this.locale).map((month, index) => (h("option", { key: month, selected: this.currentDate.getMonth() === index, value: index + 1 }, month)))), h("input", { "aria-label": this.labels.yearSelect, class: this.getClassName('year-select'), max: 9999, min: 1, name: "year", onChange: this.onYearSelect, type: "number", value: this.currentDate.getFullYear() })), this.showMonthStepper && (h("button", { "aria-label": this.labels.nextMonthButton, class: this.getClassName('next-month-button'), innerHTML: this.nextMonthButtonContent || undefined, onClick: this.nextMonth, type: "button" }, h("svg", { fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, h("polyline", { points: "9 18 15 12 9 6" })))), this.showYearStepper && (h("button", { "aria-label": this.labels.nextYearButton, class: this.getClassName('next-year-button'), innerHTML: this.nextYearButtonContent || undefined, onClick: this.nextYear, type: "button" }, h("svg", { fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, h("polyline", { points: "13 17 18 12 13 7" }), h("polyline", { points: "6 17 11 12 6 7" }))))), h("div", { class: this.getClassName('body') }, h("table", { class: this.getClassName('calendar'), onKeyDown: this.onKeyDown, role: "grid" }, h("thead", { class: this.getClassName('calendar-header') }, h("tr", { class: this.getClassName('weekday-row') }, this.weekdays.map((weekday) => (h("th", { abbr: weekday[1], class: this.getClassName('weekday'), key: weekday[0], scope: "col" }, h("span", null, weekday[0])))))), h("tbody", null, this.getCalendarRows().map((calendarRow) => {
+    return (h(Host, null, h("div", { "aria-disabled": String(this.disabled), "aria-label": this.labels.picker, class: {
+        [this.getClassName()]: true,
+        [`${this.getClassName()}--disabled`]: this.disabled
+      }, role: "group" }, h("div", { class: this.getClassName('header') }, h("span", { "aria-atomic": "true", "aria-live": "polite", class: "visually-hidden" }, this.getTitle()), this.showYearStepper && (h("button", { "aria-label": this.labels.previousYearButton, class: this.getClassName('previous-year-button'), disabled: this.disabled, innerHTML: this.previousYearButtonContent || undefined, onClick: this.previousYear, type: "button" }, h("svg", { fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, h("polyline", { points: "11 17 6 12 11 7" }), h("polyline", { points: "18 17 13 12 18 7" })))), this.showMonthStepper && (h("button", { "aria-label": this.labels.previousMonthButton, class: this.getClassName('previous-month-button'), disabled: this.disabled, innerHTML: this.previousMonthButtonContent || undefined, onClick: this.previousMonth, type: "button" }, h("svg", { fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, h("polyline", { points: "15 18 9 12 15 6" })))), h("span", { class: this.getClassName('current-month') }, h("select", { "aria-label": this.labels.monthSelect, class: this.getClassName('month-select'), disabled: this.disabled, name: "month", onChange: this.onMonthSelect }, getMonths(this.locale).map((month, index) => (h("option", { key: month, selected: this.currentDate.getMonth() === index, value: index + 1 }, month)))), h("input", { "aria-label": this.labels.yearSelect, class: this.getClassName('year-select'), disabled: this.disabled, max: 9999, min: 1, name: "year", onChange: this.onYearSelect, type: "number", value: this.currentDate.getFullYear() })), this.showMonthStepper && (h("button", { "aria-label": this.labels.nextMonthButton, class: this.getClassName('next-month-button'), disabled: this.disabled, innerHTML: this.nextMonthButtonContent || undefined, onClick: this.nextMonth, type: "button" }, h("svg", { fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, h("polyline", { points: "9 18 15 12 9 6" })))), this.showYearStepper && (h("button", { "aria-label": this.labels.nextYearButton, class: this.getClassName('next-year-button'), disabled: this.disabled, innerHTML: this.nextYearButtonContent || undefined, onClick: this.nextYear, type: "button" }, h("svg", { fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, h("polyline", { points: "13 17 18 12 13 7" }), h("polyline", { points: "6 17 11 12 6 7" }))))), h("div", { class: this.getClassName('body') }, h("table", { class: this.getClassName('calendar'), onKeyDown: this.onKeyDown, role: "grid" }, h("thead", { class: this.getClassName('calendar-header') }, h("tr", { class: this.getClassName('weekday-row') }, this.weekdays.map((weekday) => (h("th", { abbr: weekday[1], class: this.getClassName('weekday'), key: weekday[0], scope: "col" }, h("span", null, weekday[0])))))), h("tbody", null, this.getCalendarRows().map((calendarRow) => {
       const rowKey = `row-${calendarRow[0].getMonth()}-${calendarRow[0].getDate()}`;
@@ -281,3 +294,5 @@ return (h("tr", { class: this.getClassName('calendar-row'), key: rowKey }, calendarRow.map((day) => {
             : 'span';
-        return (h("td", { "aria-disabled": String(isDisabled), "aria-selected": isSelected ? 'true' : undefined, class: className, "data-date": getISODateString(day), key: cellKey, onClick: this.onClick, onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave, role: "gridcell", tabIndex: isSameDay(day, this.currentDate) ? 0 : -1 }, h(Tag, { "aria-hidden": "true" }, day.getDate()), h("span", { class: "visually-hidden" }, Intl.DateTimeFormat(this.locale, {
+        return (h("td", { "aria-disabled": String(isDisabled), "aria-selected": isSelected ? 'true' : undefined, class: className, "data-date": getISODateString(day), key: cellKey, onClick: this.onClick, onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave, role: "gridcell", tabIndex: isSameDay(day, this.currentDate) && !this.disabled
+            ? 0
+            : -1 }, h(Tag, { "aria-hidden": "true" }, day.getDate()), h("span", { class: "visually-hidden" }, Intl.DateTimeFormat(this.locale, {
           day: 'numeric',
@@ -287,3 +302,3 @@ month: 'long'
       })));
-    })))), showFooter && (h("div", { class: this.getClassName('footer') }, this.showTodayButton && (h("button", { class: this.getClassName('today-button'), innerHTML: this.todayButtonContent || undefined, onClick: this.showToday, type: "button" }, this.labels.todayButton)), this.showClearButton && (h("button", { class: this.getClassName('clear-button'), innerHTML: this.clearButtonContent || undefined, onClick: this.clear, type: "button" }, this.labels.clearButton)))))));
+    })))), showFooter && (h("div", { class: this.getClassName('footer') }, this.showTodayButton && (h("button", { class: this.getClassName('today-button'), disabled: this.disabled, innerHTML: this.todayButtonContent || undefined, onClick: this.showToday, type: "button" }, this.labels.todayButton)), this.showClearButton && (h("button", { class: this.getClassName('clear-button'), disabled: this.disabled, innerHTML: this.clearButtonContent || undefined, onClick: this.clear, type: "button" }, this.labels.clearButton)))))));
   }
@@ -321,2 +336,20 @@ static get is() { return "wc-datepicker"; }
       },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "disableDate": {
@@ -323,0 +356,0 @@ "type": "unknown",

dist/components/wc-datepicker.js

@@ -155,2 +155,3 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
     this.changeMonth = createEvent(this, "changeMonth", 7);
+    this.disabled = false;
     this.disableDate = () => false;
@@ -190,2 +191,5 @@ this.elementClassName = 'wc-datepicker';
     this.onClick = (event) => {
+      if (this.disabled) {
+        return;
+      }
       const target = event.target.closest('[data-date]');
@@ -212,2 +216,5 @@ if (!Boolean(target)) {
     this.onKeyDown = (event) => {
+      if (this.disabled) {
+        return;
+      }
       if (event.code === 'ArrowLeft') {
@@ -261,2 +268,5 @@ event.preventDefault();
     this.onMouseEnter = (event) => {
+      if (this.disabled) {
+        return;
+      }
       const date = new Date(event.target.closest('td').dataset.date);
@@ -384,3 +394,6 @@ this.hoveredDate = date;
     const showFooter = this.showTodayButton || this.showClearButton;
-    return (h(Host, null, h("div", { "aria-label": this.labels.picker, class: this.getClassName(), role: "group" }, h("div", { class: this.getClassName('header') }, h("span", { "aria-atomic": "true", "aria-live": "polite", class: "visually-hidden" }, this.getTitle()), this.showYearStepper && (h("button", { "aria-label": this.labels.previousYearButton, class: this.getClassName('previous-year-button'), innerHTML: this.previousYearButtonContent || undefined, onClick: this.previousYear, type: "button" }, h("svg", { fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, h("polyline", { points: "11 17 6 12 11 7" }), h("polyline", { points: "18 17 13 12 18 7" })))), this.showMonthStepper && (h("button", { "aria-label": this.labels.previousMonthButton, class: this.getClassName('previous-month-button'), innerHTML: this.previousMonthButtonContent || undefined, onClick: this.previousMonth, type: "button" }, h("svg", { fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, h("polyline", { points: "15 18 9 12 15 6" })))), h("span", { class: this.getClassName('current-month') }, h("select", { "aria-label": this.labels.monthSelect, class: this.getClassName('month-select'), name: "month", onChange: this.onMonthSelect }, getMonths(this.locale).map((month, index) => (h("option", { key: month, selected: this.currentDate.getMonth() === index, value: index + 1 }, month)))), h("input", { "aria-label": this.labels.yearSelect, class: this.getClassName('year-select'), max: 9999, min: 1, name: "year", onChange: this.onYearSelect, type: "number", value: this.currentDate.getFullYear() })), this.showMonthStepper && (h("button", { "aria-label": this.labels.nextMonthButton, class: this.getClassName('next-month-button'), innerHTML: this.nextMonthButtonContent || undefined, onClick: this.nextMonth, type: "button" }, h("svg", { fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, h("polyline", { points: "9 18 15 12 9 6" })))), this.showYearStepper && (h("button", { "aria-label": this.labels.nextYearButton, class: this.getClassName('next-year-button'), innerHTML: this.nextYearButtonContent || undefined, onClick: this.nextYear, type: "button" }, h("svg", { fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, h("polyline", { points: "13 17 18 12 13 7" }), h("polyline", { points: "6 17 11 12 6 7" }))))), h("div", { class: this.getClassName('body') }, h("table", { class: this.getClassName('calendar'), onKeyDown: this.onKeyDown, role: "grid" }, h("thead", { class: this.getClassName('calendar-header') }, h("tr", { class: this.getClassName('weekday-row') }, this.weekdays.map((weekday) => (h("th", { abbr: weekday[1], class: this.getClassName('weekday'), key: weekday[0], scope: "col" }, h("span", null, weekday[0])))))), h("tbody", null, this.getCalendarRows().map((calendarRow) => {
+    return (h(Host, null, h("div", { "aria-disabled": String(this.disabled), "aria-label": this.labels.picker, class: {
+        [this.getClassName()]: true,
+        [`${this.getClassName()}--disabled`]: this.disabled
+      }, role: "group" }, h("div", { class: this.getClassName('header') }, h("span", { "aria-atomic": "true", "aria-live": "polite", class: "visually-hidden" }, this.getTitle()), this.showYearStepper && (h("button", { "aria-label": this.labels.previousYearButton, class: this.getClassName('previous-year-button'), disabled: this.disabled, innerHTML: this.previousYearButtonContent || undefined, onClick: this.previousYear, type: "button" }, h("svg", { fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, h("polyline", { points: "11 17 6 12 11 7" }), h("polyline", { points: "18 17 13 12 18 7" })))), this.showMonthStepper && (h("button", { "aria-label": this.labels.previousMonthButton, class: this.getClassName('previous-month-button'), disabled: this.disabled, innerHTML: this.previousMonthButtonContent || undefined, onClick: this.previousMonth, type: "button" }, h("svg", { fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, h("polyline", { points: "15 18 9 12 15 6" })))), h("span", { class: this.getClassName('current-month') }, h("select", { "aria-label": this.labels.monthSelect, class: this.getClassName('month-select'), disabled: this.disabled, name: "month", onChange: this.onMonthSelect }, getMonths(this.locale).map((month, index) => (h("option", { key: month, selected: this.currentDate.getMonth() === index, value: index + 1 }, month)))), h("input", { "aria-label": this.labels.yearSelect, class: this.getClassName('year-select'), disabled: this.disabled, max: 9999, min: 1, name: "year", onChange: this.onYearSelect, type: "number", value: this.currentDate.getFullYear() })), this.showMonthStepper && (h("button", { "aria-label": this.labels.nextMonthButton, class: this.getClassName('next-month-button'), disabled: this.disabled, innerHTML: this.nextMonthButtonContent || undefined, onClick: this.nextMonth, type: "button" }, h("svg", { fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, h("polyline", { points: "9 18 15 12 9 6" })))), this.showYearStepper && (h("button", { "aria-label": this.labels.nextYearButton, class: this.getClassName('next-year-button'), disabled: this.disabled, innerHTML: this.nextYearButtonContent || undefined, onClick: this.nextYear, type: "button" }, h("svg", { fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, h("polyline", { points: "13 17 18 12 13 7" }), h("polyline", { points: "6 17 11 12 6 7" }))))), h("div", { class: this.getClassName('body') }, h("table", { class: this.getClassName('calendar'), onKeyDown: this.onKeyDown, role: "grid" }, h("thead", { class: this.getClassName('calendar-header') }, h("tr", { class: this.getClassName('weekday-row') }, this.weekdays.map((weekday) => (h("th", { abbr: weekday[1], class: this.getClassName('weekday'), key: weekday[0], scope: "col" }, h("span", null, weekday[0])))))), h("tbody", null, this.getCalendarRows().map((calendarRow) => {
       const rowKey = `row-${calendarRow[0].getMonth()}-${calendarRow[0].getDate()}`;
@@ -420,3 +433,5 @@ return (h("tr", { class: this.getClassName('calendar-row'), key: rowKey }, calendarRow.map((day) => {
             : 'span';
-        return (h("td", { "aria-disabled": String(isDisabled), "aria-selected": isSelected ? 'true' : undefined, class: className, "data-date": getISODateString(day), key: cellKey, onClick: this.onClick, onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave, role: "gridcell", tabIndex: isSameDay(day, this.currentDate) ? 0 : -1 }, h(Tag, { "aria-hidden": "true" }, day.getDate()), h("span", { class: "visually-hidden" }, Intl.DateTimeFormat(this.locale, {
+        return (h("td", { "aria-disabled": String(isDisabled), "aria-selected": isSelected ? 'true' : undefined, class: className, "data-date": getISODateString(day), key: cellKey, onClick: this.onClick, onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave, role: "gridcell", tabIndex: isSameDay(day, this.currentDate) && !this.disabled
+            ? 0
+            : -1 }, h(Tag, { "aria-hidden": "true" }, day.getDate()), h("span", { class: "visually-hidden" }, Intl.DateTimeFormat(this.locale, {
           day: 'numeric',
@@ -426,3 +441,3 @@ month: 'long'
       })));
-    })))), showFooter && (h("div", { class: this.getClassName('footer') }, this.showTodayButton && (h("button", { class: this.getClassName('today-button'), innerHTML: this.todayButtonContent || undefined, onClick: this.showToday, type: "button" }, this.labels.todayButton)), this.showClearButton && (h("button", { class: this.getClassName('clear-button'), innerHTML: this.clearButtonContent || undefined, onClick: this.clear, type: "button" }, this.labels.clearButton)))))));
+    })))), showFooter && (h("div", { class: this.getClassName('footer') }, this.showTodayButton && (h("button", { class: this.getClassName('today-button'), disabled: this.disabled, innerHTML: this.todayButtonContent || undefined, onClick: this.showToday, type: "button" }, this.labels.todayButton)), this.showClearButton && (h("button", { class: this.getClassName('clear-button'), disabled: this.disabled, innerHTML: this.clearButtonContent || undefined, onClick: this.clear, type: "button" }, this.labels.clearButton)))))));
   }
@@ -440,2 +455,3 @@ get el() { return this; }
     "clearButtonContent": [1, "clear-button-content"],
+    "disabled": [4],
     "disableDate": [16],
@@ -442,0 +458,0 @@ "elementClassName": [1, "element-class-name"],

dist/esm/loader.js

@@ -13,3 +13,3 @@ import { p as promiseResolve, b as bootstrapLazy } from './index-2c898150.js';
   return patchEsm().then(() => {
-  return bootstrapLazy([["wc-datepicker",[[2,"wc-datepicker",{"clearButtonContent":[1,"clear-button-content"],"disableDate":[16],"elementClassName":[1,"element-class-name"],"firstDayOfWeek":[2,"first-day-of-week"],"range":[4],"labels":[16],"locale":[1],"nextMonthButtonContent":[1,"next-month-button-content"],"nextYearButtonContent":[1,"next-year-button-content"],"previousMonthButtonContent":[1,"previous-month-button-content"],"previousYearButtonContent":[1,"previous-year-button-content"],"showClearButton":[4,"show-clear-button"],"showMonthStepper":[4,"show-month-stepper"],"showTodayButton":[4,"show-today-button"],"showYearStepper":[4,"show-year-stepper"],"startDate":[1,"start-date"],"todayButtonContent":[1,"today-button-content"],"value":[1040],"currentDate":[32],"hoveredDate":[32],"weekdays":[32]}]]]], options);
+  return bootstrapLazy([["wc-datepicker",[[2,"wc-datepicker",{"clearButtonContent":[1,"clear-button-content"],"disabled":[4],"disableDate":[16],"elementClassName":[1,"element-class-name"],"firstDayOfWeek":[2,"first-day-of-week"],"range":[4],"labels":[16],"locale":[1],"nextMonthButtonContent":[1,"next-month-button-content"],"nextYearButtonContent":[1,"next-year-button-content"],"previousMonthButtonContent":[1,"previous-month-button-content"],"previousYearButtonContent":[1,"previous-year-button-content"],"showClearButton":[4,"show-clear-button"],"showMonthStepper":[4,"show-month-stepper"],"showTodayButton":[4,"show-today-button"],"showYearStepper":[4,"show-year-stepper"],"startDate":[1,"start-date"],"todayButtonContent":[1,"today-button-content"],"value":[1040],"currentDate":[32],"hoveredDate":[32],"weekdays":[32]}]]]], options);
   });
@@ -16,0 +16,0 @@ };

dist/esm/wc-datepicker.entry.js

@@ -154,2 +154,3 @@ import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-2c898150.js';
     this.changeMonth = createEvent(this, "changeMonth", 7);
+    this.disabled = false;
     this.disableDate = () => false;
@@ -189,2 +190,5 @@ this.elementClassName = 'wc-datepicker';
     this.onClick = (event) => {
+      if (this.disabled) {
+        return;
+      }
       const target = event.target.closest('[data-date]');
@@ -211,2 +215,5 @@ if (!Boolean(target)) {
     this.onKeyDown = (event) => {
+      if (this.disabled) {
+        return;
+      }
       if (event.code === 'ArrowLeft') {
@@ -260,2 +267,5 @@ event.preventDefault();
     this.onMouseEnter = (event) => {
+      if (this.disabled) {
+        return;
+      }
       const date = new Date(event.target.closest('td').dataset.date);
@@ -383,3 +393,6 @@ this.hoveredDate = date;
     const showFooter = this.showTodayButton || this.showClearButton;
-    return (h(Host, null, h("div", { "aria-label": this.labels.picker, class: this.getClassName(), role: "group" }, h("div", { class: this.getClassName('header') }, h("span", { "aria-atomic": "true", "aria-live": "polite", class: "visually-hidden" }, this.getTitle()), this.showYearStepper && (h("button", { "aria-label": this.labels.previousYearButton, class: this.getClassName('previous-year-button'), innerHTML: this.previousYearButtonContent || undefined, onClick: this.previousYear, type: "button" }, h("svg", { fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, h("polyline", { points: "11 17 6 12 11 7" }), h("polyline", { points: "18 17 13 12 18 7" })))), this.showMonthStepper && (h("button", { "aria-label": this.labels.previousMonthButton, class: this.getClassName('previous-month-button'), innerHTML: this.previousMonthButtonContent || undefined, onClick: this.previousMonth, type: "button" }, h("svg", { fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, h("polyline", { points: "15 18 9 12 15 6" })))), h("span", { class: this.getClassName('current-month') }, h("select", { "aria-label": this.labels.monthSelect, class: this.getClassName('month-select'), name: "month", onChange: this.onMonthSelect }, getMonths(this.locale).map((month, index) => (h("option", { key: month, selected: this.currentDate.getMonth() === index, value: index + 1 }, month)))), h("input", { "aria-label": this.labels.yearSelect, class: this.getClassName('year-select'), max: 9999, min: 1, name: "year", onChange: this.onYearSelect, type: "number", value: this.currentDate.getFullYear() })), this.showMonthStepper && (h("button", { "aria-label": this.labels.nextMonthButton, class: this.getClassName('next-month-button'), innerHTML: this.nextMonthButtonContent || undefined, onClick: this.nextMonth, type: "button" }, h("svg", { fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, h("polyline", { points: "9 18 15 12 9 6" })))), this.showYearStepper && (h("button", { "aria-label": this.labels.nextYearButton, class: this.getClassName('next-year-button'), innerHTML: this.nextYearButtonContent || undefined, onClick: this.nextYear, type: "button" }, h("svg", { fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, h("polyline", { points: "13 17 18 12 13 7" }), h("polyline", { points: "6 17 11 12 6 7" }))))), h("div", { class: this.getClassName('body') }, h("table", { class: this.getClassName('calendar'), onKeyDown: this.onKeyDown, role: "grid" }, h("thead", { class: this.getClassName('calendar-header') }, h("tr", { class: this.getClassName('weekday-row') }, this.weekdays.map((weekday) => (h("th", { abbr: weekday[1], class: this.getClassName('weekday'), key: weekday[0], scope: "col" }, h("span", null, weekday[0])))))), h("tbody", null, this.getCalendarRows().map((calendarRow) => {
+    return (h(Host, null, h("div", { "aria-disabled": String(this.disabled), "aria-label": this.labels.picker, class: {
+        [this.getClassName()]: true,
+        [`${this.getClassName()}--disabled`]: this.disabled
+      }, role: "group" }, h("div", { class: this.getClassName('header') }, h("span", { "aria-atomic": "true", "aria-live": "polite", class: "visually-hidden" }, this.getTitle()), this.showYearStepper && (h("button", { "aria-label": this.labels.previousYearButton, class: this.getClassName('previous-year-button'), disabled: this.disabled, innerHTML: this.previousYearButtonContent || undefined, onClick: this.previousYear, type: "button" }, h("svg", { fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, h("polyline", { points: "11 17 6 12 11 7" }), h("polyline", { points: "18 17 13 12 18 7" })))), this.showMonthStepper && (h("button", { "aria-label": this.labels.previousMonthButton, class: this.getClassName('previous-month-button'), disabled: this.disabled, innerHTML: this.previousMonthButtonContent || undefined, onClick: this.previousMonth, type: "button" }, h("svg", { fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, h("polyline", { points: "15 18 9 12 15 6" })))), h("span", { class: this.getClassName('current-month') }, h("select", { "aria-label": this.labels.monthSelect, class: this.getClassName('month-select'), disabled: this.disabled, name: "month", onChange: this.onMonthSelect }, getMonths(this.locale).map((month, index) => (h("option", { key: month, selected: this.currentDate.getMonth() === index, value: index + 1 }, month)))), h("input", { "aria-label": this.labels.yearSelect, class: this.getClassName('year-select'), disabled: this.disabled, max: 9999, min: 1, name: "year", onChange: this.onYearSelect, type: "number", value: this.currentDate.getFullYear() })), this.showMonthStepper && (h("button", { "aria-label": this.labels.nextMonthButton, class: this.getClassName('next-month-button'), disabled: this.disabled, innerHTML: this.nextMonthButtonContent || undefined, onClick: this.nextMonth, type: "button" }, h("svg", { fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, h("polyline", { points: "9 18 15 12 9 6" })))), this.showYearStepper && (h("button", { "aria-label": this.labels.nextYearButton, class: this.getClassName('next-year-button'), disabled: this.disabled, innerHTML: this.nextYearButtonContent || undefined, onClick: this.nextYear, type: "button" }, h("svg", { fill: "none", height: "24", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", stroke: "currentColor", viewBox: "0 0 24 24", width: "24" }, h("polyline", { points: "13 17 18 12 13 7" }), h("polyline", { points: "6 17 11 12 6 7" }))))), h("div", { class: this.getClassName('body') }, h("table", { class: this.getClassName('calendar'), onKeyDown: this.onKeyDown, role: "grid" }, h("thead", { class: this.getClassName('calendar-header') }, h("tr", { class: this.getClassName('weekday-row') }, this.weekdays.map((weekday) => (h("th", { abbr: weekday[1], class: this.getClassName('weekday'), key: weekday[0], scope: "col" }, h("span", null, weekday[0])))))), h("tbody", null, this.getCalendarRows().map((calendarRow) => {
       const rowKey = `row-${calendarRow[0].getMonth()}-${calendarRow[0].getDate()}`;
@@ -419,3 +432,5 @@ return (h("tr", { class: this.getClassName('calendar-row'), key: rowKey }, calendarRow.map((day) => {
             : 'span';
-        return (h("td", { "aria-disabled": String(isDisabled), "aria-selected": isSelected ? 'true' : undefined, class: className, "data-date": getISODateString(day), key: cellKey, onClick: this.onClick, onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave, role: "gridcell", tabIndex: isSameDay(day, this.currentDate) ? 0 : -1 }, h(Tag, { "aria-hidden": "true" }, day.getDate()), h("span", { class: "visually-hidden" }, Intl.DateTimeFormat(this.locale, {
+        return (h("td", { "aria-disabled": String(isDisabled), "aria-selected": isSelected ? 'true' : undefined, class: className, "data-date": getISODateString(day), key: cellKey, onClick: this.onClick, onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave, role: "gridcell", tabIndex: isSameDay(day, this.currentDate) && !this.disabled
+            ? 0
+            : -1 }, h(Tag, { "aria-hidden": "true" }, day.getDate()), h("span", { class: "visually-hidden" }, Intl.DateTimeFormat(this.locale, {
           day: 'numeric',
@@ -425,3 +440,3 @@ month: 'long'
       })));
-    })))), showFooter && (h("div", { class: this.getClassName('footer') }, this.showTodayButton && (h("button", { class: this.getClassName('today-button'), innerHTML: this.todayButtonContent || undefined, onClick: this.showToday, type: "button" }, this.labels.todayButton)), this.showClearButton && (h("button", { class: this.getClassName('clear-button'), innerHTML: this.clearButtonContent || undefined, onClick: this.clear, type: "button" }, this.labels.clearButton)))))));
+    })))), showFooter && (h("div", { class: this.getClassName('footer') }, this.showTodayButton && (h("button", { class: this.getClassName('today-button'), disabled: this.disabled, innerHTML: this.todayButtonContent || undefined, onClick: this.showToday, type: "button" }, this.labels.todayButton)), this.showClearButton && (h("button", { class: this.getClassName('clear-button'), disabled: this.disabled, innerHTML: this.clearButtonContent || undefined, onClick: this.clear, type: "button" }, this.labels.clearButton)))))));
   }
@@ -428,0 +443,0 @@ get el() { return getElement(this); }

dist/esm/wc-datepicker.js

@@ -16,3 +16,3 @@ import { p as promiseResolve, b as bootstrapLazy } from './index-2c898150.js';
 patchBrowser().then(options => {
-  return bootstrapLazy([["wc-datepicker",[[2,"wc-datepicker",{"clearButtonContent":[1,"clear-button-content"],"disableDate":[16],"elementClassName":[1,"element-class-name"],"firstDayOfWeek":[2,"first-day-of-week"],"range":[4],"labels":[16],"locale":[1],"nextMonthButtonContent":[1,"next-month-button-content"],"nextYearButtonContent":[1,"next-year-button-content"],"previousMonthButtonContent":[1,"previous-month-button-content"],"previousYearButtonContent":[1,"previous-year-button-content"],"showClearButton":[4,"show-clear-button"],"showMonthStepper":[4,"show-month-stepper"],"showTodayButton":[4,"show-today-button"],"showYearStepper":[4,"show-year-stepper"],"startDate":[1,"start-date"],"todayButtonContent":[1,"today-button-content"],"value":[1040],"currentDate":[32],"hoveredDate":[32],"weekdays":[32]}]]]], options);
+  return bootstrapLazy([["wc-datepicker",[[2,"wc-datepicker",{"clearButtonContent":[1,"clear-button-content"],"disabled":[4],"disableDate":[16],"elementClassName":[1,"element-class-name"],"firstDayOfWeek":[2,"first-day-of-week"],"range":[4],"labels":[16],"locale":[1],"nextMonthButtonContent":[1,"next-month-button-content"],"nextYearButtonContent":[1,"next-year-button-content"],"previousMonthButtonContent":[1,"previous-month-button-content"],"previousYearButtonContent":[1,"previous-year-button-content"],"showClearButton":[4,"show-clear-button"],"showMonthStepper":[4,"show-month-stepper"],"showTodayButton":[4,"show-today-button"],"showYearStepper":[4,"show-year-stepper"],"startDate":[1,"start-date"],"todayButtonContent":[1,"today-button-content"],"value":[1040],"currentDate":[32],"hoveredDate":[32],"weekdays":[32]}]]]], options);
 });

dist/types/components.d.ts

@@ -13,2 +13,3 @@ /* eslint-disable */
         "disableDate"?: (date: Date) => boolean;
+        "disabled"?: boolean;
         "elementClassName"?: string;
@@ -51,2 +52,3 @@ "firstDayOfWeek"?: number;
         "disableDate"?: (date: Date) => boolean;
+        "disabled"?: boolean;
         "elementClassName"?: string;
@@ -53,0 +55,0 @@ "firstDayOfWeek"?: number;

dist/types/components/wc-datepicker/wc-datepicker.d.ts

@@ -20,2 +20,3 @@ import { EventEmitter } from '../../stencil-public-runtime';
   clearButtonContent?: string;
+  disabled?: boolean;
   disableDate?: (date: Date) => boolean;
@@ -22,0 +23,0 @@ elementClassName?: string;

dist/wc-datepicker/wc-datepicker.esm.js

@@ -1,1 +0,1 @@
-import{p as t,b as e}from"./p-b662e034.js";(()=>{const e=import.meta.url,n={};return""!==e&&(n.resourcesUrl=new URL(".",e).href),t(n)})().then((t=>e([["p-5d121409",[[2,"wc-datepicker",{clearButtonContent:[1,"clear-button-content"],disableDate:[16],elementClassName:[1,"element-class-name"],firstDayOfWeek:[2,"first-day-of-week"],range:[4],labels:[16],locale:[1],nextMonthButtonContent:[1,"next-month-button-content"],nextYearButtonContent:[1,"next-year-button-content"],previousMonthButtonContent:[1,"previous-month-button-content"],previousYearButtonContent:[1,"previous-year-button-content"],showClearButton:[4,"show-clear-button"],showMonthStepper:[4,"show-month-stepper"],showTodayButton:[4,"show-today-button"],showYearStepper:[4,"show-year-stepper"],startDate:[1,"start-date"],todayButtonContent:[1,"today-button-content"],value:[1040],currentDate:[32],hoveredDate:[32],weekdays:[32]}]]]],t)));
+import{p as t,b as e}from"./p-b662e034.js";(()=>{const e=import.meta.url,n={};return""!==e&&(n.resourcesUrl=new URL(".",e).href),t(n)})().then((t=>e([["p-5cd59291",[[2,"wc-datepicker",{clearButtonContent:[1,"clear-button-content"],disabled:[4],disableDate:[16],elementClassName:[1,"element-class-name"],firstDayOfWeek:[2,"first-day-of-week"],range:[4],labels:[16],locale:[1],nextMonthButtonContent:[1,"next-month-button-content"],nextYearButtonContent:[1,"next-year-button-content"],previousMonthButtonContent:[1,"previous-month-button-content"],previousYearButtonContent:[1,"previous-year-button-content"],showClearButton:[4,"show-clear-button"],showMonthStepper:[4,"show-month-stepper"],showTodayButton:[4,"show-today-button"],showYearStepper:[4,"show-year-stepper"],startDate:[1,"start-date"],todayButtonContent:[1,"today-button-content"],value:[1040],currentDate:[32],hoveredDate:[32],weekdays:[32]}]]]],t)));

package.json

 {
   "name": "wc-datepicker",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "A small, accessible and customizable datepicker written in TypeScript.",
@@ -5,0 +5,0 @@ "repository": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

447658

increased by1.07%

Lines of code

8038

increased by1.7%

No dependency changes