New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@vaadin/date-picker
Advanced tools
@vaadin/date-picker - npm Package Compare versions
Comparing version 24.7.0-alpha3 to 24.7.0-alpha4
| { | ||
| "name": "@vaadin/date-picker", | ||
| "version": "24.7.0-alpha3", | ||
| "version": "24.7.0-alpha4", | ||
| "publishConfig": { | ||
@@ -39,15 +39,15 @@ "access": "public" | ||
| "@polymer/polymer": "^3.2.0", | ||
| "@vaadin/a11y-base": "24.7.0-alpha3", | ||
| "@vaadin/button": "24.7.0-alpha3", | ||
| "@vaadin/component-base": "24.7.0-alpha3", | ||
| "@vaadin/field-base": "24.7.0-alpha3", | ||
| "@vaadin/input-container": "24.7.0-alpha3", | ||
| "@vaadin/overlay": "24.7.0-alpha3", | ||
| "@vaadin/vaadin-lumo-styles": "24.7.0-alpha3", | ||
| "@vaadin/vaadin-material-styles": "24.7.0-alpha3", | ||
| "@vaadin/vaadin-themable-mixin": "24.7.0-alpha3", | ||
| "@vaadin/a11y-base": "24.7.0-alpha4", | ||
| "@vaadin/button": "24.7.0-alpha4", | ||
| "@vaadin/component-base": "24.7.0-alpha4", | ||
| "@vaadin/field-base": "24.7.0-alpha4", | ||
| "@vaadin/input-container": "24.7.0-alpha4", | ||
| "@vaadin/overlay": "24.7.0-alpha4", | ||
| "@vaadin/vaadin-lumo-styles": "24.7.0-alpha4", | ||
| "@vaadin/vaadin-material-styles": "24.7.0-alpha4", | ||
| "@vaadin/vaadin-themable-mixin": "24.7.0-alpha4", | ||
| "lit": "^3.0.0" | ||
| }, | ||
| "devDependencies": { | ||
| "@vaadin/chai-plugins": "24.7.0-alpha3", | ||
| "@vaadin/chai-plugins": "24.7.0-alpha4", | ||
| "@vaadin/testing-helpers": "^1.1.0", | ||
@@ -60,3 +60,3 @@ "sinon": "^18.0.0" | ||
| ], | ||
| "gitHead": "dd5cfad6c9b54e676f5b10dffba2233775378f40" | ||
| "gitHead": "d7165cebf9dcf6a7e9e22f6353662d33404b4856" | ||
| } |
| /** | ||
| * @license | ||
| * Copyright (c) 2016 - 2024 Vaadin Ltd. | ||
| * Copyright (c) 2016 - 2025 Vaadin Ltd. | ||
| * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ | ||
@@ -5,0 +5,0 @@ */ |
| /** | ||
| * @license | ||
| * Copyright (c) 2016 - 2024 Vaadin Ltd. | ||
| * Copyright (c) 2016 - 2025 Vaadin Ltd. | ||
| * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ | ||
@@ -5,0 +5,0 @@ */ |
| /** | ||
| * @license | ||
| * Copyright (c) 2016 - 2024 Vaadin Ltd. | ||
| * Copyright (c) 2016 - 2025 Vaadin Ltd. | ||
| * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ | ||
@@ -5,0 +5,0 @@ */ |
| /** | ||
| * @license | ||
| * Copyright (c) 2016 - 2024 Vaadin Ltd. | ||
| * Copyright (c) 2016 - 2025 Vaadin Ltd. | ||
| * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ | ||
@@ -5,0 +5,0 @@ */ |
| /** | ||
| * @license | ||
| * Copyright (c) 2016 - 2024 Vaadin Ltd. | ||
| * Copyright (c) 2016 - 2025 Vaadin Ltd. | ||
| * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ | ||
@@ -329,3 +329,2 @@ */ | ||
| computed: '__computeMinOrMaxDate(min)', | ||
| sync: true, | ||
| }, | ||
@@ -341,3 +340,2 @@ | ||
| computed: '__computeMinOrMaxDate(max)', | ||
| sync: true, | ||
| }, | ||
@@ -1165,3 +1163,3 @@ | ||
| if (this.clearButtonVisible && !!this.value) { | ||
| if (this.clearButtonVisible && !!this.value && !this.readonly) { | ||
| // Stop event from propagating to the host element | ||
@@ -1168,0 +1166,0 @@ // to avoid closing dialog when clearing on Esc |
| /** | ||
| * @license | ||
| * Copyright (c) 2016 - 2024 Vaadin Ltd. | ||
| * Copyright (c) 2016 - 2025 Vaadin Ltd. | ||
| * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ | ||
@@ -5,0 +5,0 @@ */ |
| /** | ||
| * @license | ||
| * Copyright (c) 2016 - 2024 Vaadin Ltd. | ||
| * Copyright (c) 2016 - 2025 Vaadin Ltd. | ||
| * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ | ||
@@ -5,0 +5,0 @@ */ |
| /** | ||
| * @license | ||
| * Copyright (c) 2016 - 2024 Vaadin Ltd. | ||
| * Copyright (c) 2016 - 2025 Vaadin Ltd. | ||
| * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ | ||
@@ -5,0 +5,0 @@ */ |
| /** | ||
| * @license | ||
| * Copyright (c) 2016 - 2024 Vaadin Ltd. | ||
| * Copyright (c) 2016 - 2025 Vaadin Ltd. | ||
| * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ | ||
@@ -5,0 +5,0 @@ */ |
| /** | ||
| * @license | ||
| * Copyright (c) 2015 - 2024 Vaadin Ltd. | ||
| * Copyright (c) 2015 - 2025 Vaadin Ltd. | ||
| * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ | ||
@@ -5,0 +5,0 @@ */ |
| /** | ||
| * @license | ||
| * Copyright (c) 2016 - 2024 Vaadin Ltd. | ||
| * Copyright (c) 2016 - 2025 Vaadin Ltd. | ||
| * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ | ||
@@ -5,0 +5,0 @@ */ |
| /** | ||
| * @license | ||
| * Copyright (c) 2016 - 2024 Vaadin Ltd. | ||
| * Copyright (c) 2016 - 2025 Vaadin Ltd. | ||
| * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ | ||
@@ -5,0 +5,0 @@ */ |
| /** | ||
| * @license | ||
| * Copyright (c) 2016 - 2024 Vaadin Ltd. | ||
| * Copyright (c) 2016 - 2025 Vaadin Ltd. | ||
| * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ | ||
@@ -5,0 +5,0 @@ */ |
| /** | ||
| * @license | ||
| * Copyright (c) 2016 - 2024 Vaadin Ltd. | ||
| * Copyright (c) 2016 - 2025 Vaadin Ltd. | ||
| * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ | ||
@@ -5,0 +5,0 @@ */ |
| /** | ||
| * @license | ||
| * Copyright (c) 2016 - 2024 Vaadin Ltd. | ||
| * Copyright (c) 2016 - 2025 Vaadin Ltd. | ||
| * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ | ||
@@ -5,0 +5,0 @@ */ |
| /** | ||
| * @license | ||
| * Copyright (c) 2016 - 2024 Vaadin Ltd. | ||
| * Copyright (c) 2016 - 2025 Vaadin Ltd. | ||
| * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ | ||
@@ -5,0 +5,0 @@ */ |
| /** | ||
| * @license | ||
| * Copyright (c) 2016 - 2024 Vaadin Ltd. | ||
| * Copyright (c) 2016 - 2025 Vaadin Ltd. | ||
| * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ | ||
@@ -5,0 +5,0 @@ */ |
| /** | ||
| * @license | ||
| * Copyright (c) 2016 - 2024 Vaadin Ltd. | ||
| * Copyright (c) 2016 - 2025 Vaadin Ltd. | ||
| * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ | ||
@@ -5,0 +5,0 @@ */ |
| /** | ||
| * @license | ||
| * Copyright (c) 2016 - 2024 Vaadin Ltd. | ||
| * Copyright (c) 2016 - 2025 Vaadin Ltd. | ||
| * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ | ||
@@ -5,0 +5,0 @@ */ |
| /** | ||
| * @license | ||
| * Copyright (c) 2016 - 2024 Vaadin Ltd. | ||
| * Copyright (c) 2016 - 2025 Vaadin Ltd. | ||
| * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ | ||
@@ -5,0 +5,0 @@ */ |
| /** | ||
| * @license | ||
| * Copyright (c) 2016 - 2024 Vaadin Ltd. | ||
| * Copyright (c) 2016 - 2025 Vaadin Ltd. | ||
| * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ | ||
@@ -5,0 +5,0 @@ */ |
| /** | ||
| * @license | ||
| * Copyright (c) 2016 - 2024 Vaadin Ltd. | ||
| * Copyright (c) 2016 - 2025 Vaadin Ltd. | ||
| * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ | ||
@@ -5,0 +5,0 @@ */ |
| /** | ||
| * @license | ||
| * Copyright (c) 2016 - 2024 Vaadin Ltd. | ||
| * Copyright (c) 2016 - 2025 Vaadin Ltd. | ||
| * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ | ||
@@ -5,0 +5,0 @@ */ |
| /** | ||
| * @license | ||
| * Copyright (c) 2016 - 2024 Vaadin Ltd. | ||
| * Copyright (c) 2016 - 2025 Vaadin Ltd. | ||
| * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ | ||
@@ -10,3 +10,2 @@ */ | ||
| import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; | ||
| import { dateAllowed, dateEquals, normalizeDate } from './vaadin-date-picker-helper.js'; | ||
| import { MonthCalendarMixin } from './vaadin-month-calendar-mixin.js'; | ||
@@ -30,5 +29,5 @@ import { monthCalendarStyles } from './vaadin-month-calendar-styles.js'; | ||
| render() { | ||
| const weekDayNames = this._getWeekDayNames(this.i18n, this.showWeekNumbers); | ||
| const weekDayNames = this.__computeWeekDayNames(this.i18n, this.showWeekNumbers); | ||
| const weeks = this._weeks; | ||
| const hideWeekSeparator = !this._showWeekNumbers; | ||
| const hideWeekSeparator = !this.__computeShowWeekSeparator(this.showWeekNumbers, this.i18n); | ||
@@ -61,33 +60,29 @@ return html` | ||
| <td part="week-number" aria-hidden="true" ?hidden="${hideWeekSeparator}"> | ||
| ${this.__getWeekNumber(week)} | ||
| ${this.__computeWeekNumber(week)} | ||
| </td> | ||
| ${week.map((date) => { | ||
| const isFocused = | ||
| dateEquals(date, this.focusedDate) && (this.__hasFocus || dateEquals(date, this.enteredDate)); | ||
| const tabIndex = dateEquals(date, this.focusedDate) ? '0' : '-1'; | ||
| const isSelected = dateEquals(date, this.selectedDate); | ||
| const isDisabled = !dateAllowed(date, this.minDate, this.maxDate, this.isDateDisabled); | ||
| const greaterThanToday = date > normalizeDate(new Date()); | ||
| const lessThanToday = date < normalizeDate(new Date()); | ||
| const parts = [ | ||
| 'date', | ||
| isDisabled && 'disabled', | ||
| isFocused && 'focused', | ||
| isSelected && 'selected', | ||
| this._isToday(date) && 'today', | ||
| greaterThanToday && 'future', | ||
| lessThanToday && 'past', | ||
| ].filter(Boolean); | ||
| return html` | ||
| <td | ||
| role="gridcell" | ||
| part="${parts.join(' ')}" | ||
| part="${this.__computeDatePart( | ||
| date, | ||
| this.focusedDate, | ||
| this.selectedDate, | ||
| this.minDate, | ||
| this.maxDate, | ||
| this.isDateDisabled, | ||
| this.enteredDate, | ||
| this.__hasFocus, | ||
| )}" | ||
| .date="${date}" | ||
| ?disabled="${isDisabled}" | ||
| tabindex="${tabIndex}" | ||
| aria-selected="${isSelected ? 'true' : 'false'}" | ||
| aria-disabled="${isDisabled ? 'true' : 'false'}" | ||
| aria-label="${this.__getDayAriaLabel(date)}" | ||
| ?disabled="${this.__isDayDisabled(date, this.minDate, this.maxDate, this.isDateDisabled)}" | ||
| tabindex="${this.__computeDayTabIndex(date, this.focusedDate)}" | ||
| aria-selected="${this.__computeDayAriaSelected(date, this.selectedDate)}" | ||
| aria-disabled="${this.__computeDayAriaDisabled( | ||
| date, | ||
| this.minDate, | ||
| this.maxDate, | ||
| this.isDateDisabled, | ||
| )}" | ||
| aria-label="${this.__computeDayAriaLabel(date)}" | ||
| >${this._getDate(date)}</td | ||
@@ -104,24 +99,4 @@ > | ||
| } | ||
| /** @protected */ | ||
| willUpdate(props) { | ||
| // Calculate these properties in `willUpdate()` instead of marking | ||
| // them as `computed` to avoid extra update because of `sync: true` | ||
| if (props.has('month') || props.has('i18n')) { | ||
| this._days = this._getDays(this.month, this.i18n); | ||
| this._weeks = this._getWeeks(this._days); | ||
| } | ||
| if (props.has('month') || props.has('minDate') || props.has('maxDate')) { | ||
| this.disabled = this._isDisabled(this.month, this.minDate, this.maxDate); | ||
| } | ||
| if (props.has('showWeekNumbers') || props.has('i18n')) { | ||
| // Currently only supported for locales that start the week on Monday. | ||
| this._showWeekNumbers = this.showWeekNumbers && this.i18n && this.i18n.firstDayOfWeek === 1; | ||
| this.toggleAttribute('week-numbers', this._showWeekNumbers); | ||
| } | ||
| } | ||
| } | ||
| defineCustomElement(MonthCalendar); |
| /** | ||
| * @license | ||
| * Copyright (c) 2016 - 2024 Vaadin Ltd. | ||
| * Copyright (c) 2016 - 2025 Vaadin Ltd. | ||
| * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ | ||
@@ -8,3 +8,3 @@ */ | ||
| import { addListener } from '@vaadin/component-base/src/gestures.js'; | ||
| import { dateAllowed, dateEquals, getISOWeekNumber } from './vaadin-date-picker-helper.js'; | ||
| import { dateAllowed, dateEquals, getISOWeekNumber, normalizeDate } from './vaadin-date-picker-helper.js'; | ||
@@ -102,2 +102,3 @@ /** | ||
| reflectToAttribute: true, | ||
| computed: '__computeDisabled(month, minDate, maxDate)', | ||
| }, | ||
@@ -108,2 +109,3 @@ | ||
| type: Array, | ||
| computed: '__computeDays(month, i18n, minDate, maxDate, isDateDisabled)', | ||
| }, | ||
@@ -114,2 +116,3 @@ | ||
| type: Array, | ||
| computed: '__computeWeeks(_days)', | ||
| }, | ||
@@ -130,3 +133,3 @@ | ||
| static get observers() { | ||
| return ['__focusedDateChanged(focusedDate, _days)']; | ||
| return ['__focusedDateChanged(focusedDate, _days)', '_showWeekNumbersChanged(showWeekNumbers, i18n)']; | ||
| } | ||
@@ -156,3 +159,3 @@ | ||
| */ | ||
| _isDisabled(month, minDate, maxDate) { | ||
| __computeDisabled(month, minDate, maxDate) { | ||
| // First day of the month | ||
@@ -214,3 +217,3 @@ const firstDate = new Date(0, 0); | ||
| /** @protected */ | ||
| _getWeekDayNames(i18n, showWeekNumbers) { | ||
| __computeWeekDayNames(i18n, showWeekNumbers) { | ||
| if (i18n === undefined || showWeekNumbers === undefined) { | ||
@@ -249,3 +252,3 @@ return []; | ||
| /** @protected */ | ||
| _showWeekSeparator(showWeekNumbers, i18n) { | ||
| __computeShowWeekSeparator(showWeekNumbers, i18n) { | ||
| // Currently only supported for locales that start the week on Monday. | ||
@@ -261,3 +264,3 @@ return showWeekNumbers && i18n && i18n.firstDayOfWeek === 1; | ||
| /** @protected */ | ||
| _getDays(month, i18n) { | ||
| __computeDays(month, i18n) { | ||
| if (month === undefined || i18n === undefined) { | ||
@@ -290,3 +293,3 @@ return []; | ||
| /** @protected */ | ||
| _getWeeks(days) { | ||
| __computeWeeks(days) { | ||
| return days.reduce((acc, day, i) => { | ||
@@ -317,3 +320,3 @@ if (i % 7 === 0) { | ||
| /** @protected */ | ||
| __getWeekNumber(days) { | ||
| __computeWeekNumber(days) { | ||
| const date = days.reduce((acc, d) => { | ||
@@ -327,3 +330,3 @@ return !acc && d ? d : acc; | ||
| /** @protected */ | ||
| __getDayAriaLabel(date) { | ||
| __computeDayAriaLabel(date) { | ||
| if (!date) { | ||
@@ -343,2 +346,71 @@ return ''; | ||
| } | ||
| /** @private */ | ||
| _showWeekNumbersChanged(showWeekNumbers, i18n) { | ||
| if (this.__computeShowWeekSeparator(showWeekNumbers, i18n)) { | ||
| this.setAttribute('week-numbers', ''); | ||
| } else { | ||
| this.removeAttribute('week-numbers'); | ||
| } | ||
| } | ||
| // eslint-disable-next-line @typescript-eslint/max-params | ||
| __computeDatePart(date, focusedDate, selectedDate, minDate, maxDate, isDateDisabled, enteredDate, hasFocus) { | ||
| const result = ['date']; | ||
| if (this.__isDayDisabled(date, minDate, maxDate, isDateDisabled)) { | ||
| result.push('disabled'); | ||
| } | ||
| if (dateEquals(date, focusedDate) && (hasFocus || dateEquals(date, enteredDate))) { | ||
| result.push('focused'); | ||
| } | ||
| if (this.__isDaySelected(date, selectedDate)) { | ||
| result.push('selected'); | ||
| } | ||
| if (this._isToday(date)) { | ||
| result.push('today'); | ||
| } | ||
| if (date < normalizeDate(new Date())) { | ||
| result.push('past'); | ||
| } | ||
| if (date > normalizeDate(new Date())) { | ||
| result.push('future'); | ||
| } | ||
| return result.join(' '); | ||
| } | ||
| /** @private */ | ||
| __isDaySelected(date, selectedDate) { | ||
| return dateEquals(date, selectedDate); | ||
| } | ||
| /** @private */ | ||
| __computeDayAriaSelected(date, selectedDate) { | ||
| return String(this.__isDaySelected(date, selectedDate)); | ||
| } | ||
| /** @private */ | ||
| __isDayDisabled(date, minDate, maxDate, isDateDisabled) { | ||
| return !dateAllowed(date, minDate, maxDate, isDateDisabled); | ||
| } | ||
| /** @private */ | ||
| __computeDayAriaDisabled(date, min, max, isDateDisabled) { | ||
| if (date === undefined || (min === undefined && max === undefined && isDateDisabled === undefined)) { | ||
| return 'false'; | ||
| } | ||
| return String(this.__isDayDisabled(date, min, max, isDateDisabled)); | ||
| } | ||
| /** @private */ | ||
| __computeDayTabIndex(date, focusedDate) { | ||
| return dateEquals(date, focusedDate) ? '0' : '-1'; | ||
| } | ||
| }; |
| /** | ||
| * @license | ||
| * Copyright (c) 2016 - 2024 Vaadin Ltd. | ||
| * Copyright (c) 2016 - 2025 Vaadin Ltd. | ||
| * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ | ||
@@ -5,0 +5,0 @@ */ |
| /** | ||
| * @license | ||
| * Copyright (c) 2016 - 2024 Vaadin Ltd. | ||
| * Copyright (c) 2016 - 2025 Vaadin Ltd. | ||
| * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ | ||
@@ -10,3 +10,2 @@ */ | ||
| import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; | ||
| import { dateAllowed, dateEquals, normalizeDate } from './vaadin-date-picker-helper.js'; | ||
| import { MonthCalendarMixin } from './vaadin-month-calendar-mixin.js'; | ||
@@ -37,4 +36,4 @@ import { monthCalendarStyles } from './vaadin-month-calendar-styles.js'; | ||
| <tr role="row" part="weekdays"> | ||
| <th part="weekday" aria-hidden="true" hidden$="[[!_showWeekSeparator(showWeekNumbers, i18n)]]"></th> | ||
| <template is="dom-repeat" items="[[_getWeekDayNames(i18n, showWeekNumbers)]]"> | ||
| <th part="weekday" aria-hidden="true" hidden$="[[!__computeShowWeekSeparator(showWeekNumbers, i18n)]]"></th> | ||
| <template is="dom-repeat" items="[[__computeWeekDayNames(i18n, showWeekNumbers)]]"> | ||
| <th role="columnheader" part="weekday" scope="col" abbr$="[[item.weekDay]]" aria-hidden="true"> | ||
@@ -49,4 +48,8 @@ [[item.weekDayShort]] | ||
| <tr role="row"> | ||
| <td part="week-number" aria-hidden="true" hidden$="[[!_showWeekSeparator(showWeekNumbers, i18n)]]"> | ||
| [[__getWeekNumber(week)]] | ||
| <td | ||
| part="week-number" | ||
| aria-hidden="true" | ||
| hidden$="[[!__computeShowWeekSeparator(showWeekNumbers, i18n)]]" | ||
| > | ||
| [[__computeWeekNumber(week)]] | ||
| </td> | ||
@@ -56,9 +59,9 @@ <template is="dom-repeat" items="[[week]]"> | ||
| role="gridcell" | ||
| part$="[[__getDatePart(item, focusedDate, selectedDate, minDate, maxDate, isDateDisabled, enteredDate, __hasFocus)]]" | ||
| part$="[[__computeDatePart(item, focusedDate, selectedDate, minDate, maxDate, isDateDisabled, enteredDate, __hasFocus)]]" | ||
| date="[[item]]" | ||
| tabindex$="[[__getDayTabindex(item, focusedDate)]]" | ||
| tabindex$="[[__computeDayTabIndex(item, focusedDate)]]" | ||
| disabled$="[[__isDayDisabled(item, minDate, maxDate, isDateDisabled)]]" | ||
| aria-selected$="[[__getDayAriaSelected(item, selectedDate)]]" | ||
| aria-disabled$="[[__getDayAriaDisabled(item, minDate, maxDate, isDateDisabled)]]" | ||
| aria-label$="[[__getDayAriaLabel(item)]]" | ||
| aria-selected$="[[__computeDayAriaSelected(item, selectedDate)]]" | ||
| aria-disabled$="[[__computeDayAriaDisabled(item, minDate, maxDate, isDateDisabled)]]" | ||
| aria-label$="[[__computeDayAriaLabel(item)]]" | ||
| >[[_getDate(item)]]</td | ||
@@ -77,106 +80,4 @@ > | ||
| } | ||
| static get properties() { | ||
| return { | ||
| /** @protected */ | ||
| _days: { | ||
| type: Array, | ||
| computed: '_getDays(month, i18n, minDate, maxDate, isDateDisabled)', | ||
| }, | ||
| /** @protected */ | ||
| _weeks: { | ||
| type: Array, | ||
| computed: '_getWeeks(_days)', | ||
| }, | ||
| disabled: { | ||
| type: Boolean, | ||
| reflectToAttribute: true, | ||
| computed: '_isDisabled(month, minDate, maxDate)', | ||
| }, | ||
| }; | ||
| } | ||
| static get observers() { | ||
| return ['_showWeekNumbersChanged(showWeekNumbers, i18n)']; | ||
| } | ||
| /** @private */ | ||
| _showWeekNumbersChanged(showWeekNumbers, i18n) { | ||
| if (showWeekNumbers && i18n && i18n.firstDayOfWeek === 1) { | ||
| this.setAttribute('week-numbers', ''); | ||
| } else { | ||
| this.removeAttribute('week-numbers'); | ||
| } | ||
| } | ||
| /** @private */ | ||
| // eslint-disable-next-line @typescript-eslint/max-params | ||
| __getDatePart(date, focusedDate, selectedDate, minDate, maxDate, isDateDisabled, enteredDate, hasFocus) { | ||
| const result = ['date']; | ||
| const greaterThanToday = date > normalizeDate(new Date()); | ||
| const lessThanToday = date < normalizeDate(new Date()); | ||
| if (this.__isDayDisabled(date, minDate, maxDate, isDateDisabled)) { | ||
| result.push('disabled'); | ||
| } | ||
| if (dateEquals(date, focusedDate) && (hasFocus || dateEquals(date, enteredDate))) { | ||
| result.push('focused'); | ||
| } | ||
| if (this.__isDaySelected(date, selectedDate)) { | ||
| result.push('selected'); | ||
| } | ||
| if (this._isToday(date)) { | ||
| result.push('today'); | ||
| } | ||
| if (lessThanToday) { | ||
| result.push('past'); | ||
| } | ||
| if (greaterThanToday) { | ||
| result.push('future'); | ||
| } | ||
| return result.join(' '); | ||
| } | ||
| /** @private */ | ||
| __isDaySelected(date, selectedDate) { | ||
| return dateEquals(date, selectedDate); | ||
| } | ||
| /** @private */ | ||
| __getDayAriaSelected(date, selectedDate) { | ||
| if (this.__isDaySelected(date, selectedDate)) { | ||
| return 'true'; | ||
| } | ||
| } | ||
| /** @private */ | ||
| __isDayDisabled(date, minDate, maxDate, isDateDisabled) { | ||
| return !dateAllowed(date, minDate, maxDate, isDateDisabled); | ||
| } | ||
| /** @private */ | ||
| __getDayAriaDisabled(date, min, max, isDateDisabled) { | ||
| if (date === undefined || (min === undefined && max === undefined && isDateDisabled === undefined)) { | ||
| return; | ||
| } | ||
| if (this.__isDayDisabled(date, min, max, isDateDisabled)) { | ||
| return 'true'; | ||
| } | ||
| } | ||
| /** @private */ | ||
| __getDayTabindex(date, focusedDate) { | ||
| return dateEquals(date, focusedDate) ? '0' : '-1'; | ||
| } | ||
| } | ||
| defineCustomElement(MonthCalendar); |
| { | ||
| "$schema": "https://json.schemastore.org/web-types", | ||
| "name": "@vaadin/date-picker", | ||
| "version": "24.7.0-alpha3", | ||
| "version": "24.7.0-alpha4", | ||
| "description-markup": "markdown", | ||
@@ -369,3 +369,3 @@ "contributions": { | ||
| "name": "vaadin-date-picker", | ||
| "description": "`<vaadin-date-picker>` is an input field that allows to enter a date by typing or by selecting from a calendar overlay.\n\n```html\n<vaadin-date-picker label=\"Birthday\"></vaadin-date-picker>\n```\n```js\ndatePicker.value = '2016-03-02';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n-------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n\n`<vaadin-date-picker>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha3/#/elements/vaadin-text-field) for the styling documentation.\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name | Description\n----------------------|--------------------\n`toggle-button` | Toggle button\n\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute | Description | Part name\n-----------|--------------------------------------------------|-----------\n`opened` | Set when the date selector overlay is opened | :host\n\nIf you want to replace the default `<input>` and its container with a custom implementation to get full control\nover the input field, consider using the [`<vaadin-date-picker-light>`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha3/#/elements/vaadin-date-picker-light) element.\n\n### Internal components\n\nIn addition to `<vaadin-date-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-date-picker-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha3/#/elements/vaadin-overlay).\n- `<vaadin-date-picker-overlay-content>`\n- `<vaadin-date-picker-month-scroller>`\n- `<vaadin-date-picker-year-scroller>`\n- `<vaadin-date-picker-year>`\n- `<vaadin-month-calendar>`\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha3/#/elements/vaadin-input-container) - an internal element wrapping the input.\n\nIn order to style the overlay content, use `<vaadin-date-picker-overlay-content>` shadow DOM parts:\n\nPart name | Description\n----------------------|--------------------\n`overlay-header` | Fullscreen mode header\n`label` | Fullscreen mode value/label\n`clear-button` | Fullscreen mode clear button\n`toggle-button` | Fullscreen mode toggle button\n`years-toggle-button` | Fullscreen mode years scroller toggle\n`toolbar` | Footer bar with slotted buttons\n\nThe following state attributes are available on the `<vaadin-date-picker-overlay-content>` element:\n\nAttribute | Description\n----------------|-------------------------------------------------\n`desktop` | Set when the overlay content is in desktop mode\n`fullscreen` | Set when the overlay content is in fullscreen mode\n`years-visible` | Set when the year scroller is visible in fullscreen mode\n\nIn order to style the month calendar, use `<vaadin-month-calendar>` shadow DOM parts:\n\nPart name | Description\n----------------------|--------------------\n`month-header` | Month title\n`weekdays` | Weekday container\n`weekday` | Weekday element\n`week-numbers` | Week numbers container\n`week-number` | Week number element\n`date` | Date element\n`disabled` | Disabled date element\n`focused` | Focused date element\n`selected` | Selected date element\n`today` | Date element corresponding to the current day\n`past` | Date element corresponding to the date in the past\n`future` | Date element corresponding to the date in the future\n\nIn order to style year scroller elements, use `<vaadin-date-picker-year>` shadow DOM parts:\n\nPart name | Description\n----------------------|--------------------\n`year-number` | Year number\n`year-separator` | Year separator\n\nNote: the `theme` attribute value set on `<vaadin-date-picker>` is\npropagated to the internal components listed above.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Change events\n\nDepending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,\nthe component can fire either a `change` event or an `unparsable-change` event:\n\nValue change | Event\n:------------------------|:------------------\nempty => parsable | change\nempty => unparsable | unparsable-change\nparsable => empty | change\nparsable => parsable | change\nparsable => unparsable | change\nunparsable => empty | unparsable-change\nunparsable => parsable | change\nunparsable => unparsable | unparsable-change", | ||
| "description": "`<vaadin-date-picker>` is an input field that allows to enter a date by typing or by selecting from a calendar overlay.\n\n```html\n<vaadin-date-picker label=\"Birthday\"></vaadin-date-picker>\n```\n```js\ndatePicker.value = '2016-03-02';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n-------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n\n`<vaadin-date-picker>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha4/#/elements/vaadin-text-field) for the styling documentation.\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name | Description\n----------------------|--------------------\n`toggle-button` | Toggle button\n\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute | Description | Part name\n-----------|--------------------------------------------------|-----------\n`opened` | Set when the date selector overlay is opened | :host\n\nIf you want to replace the default `<input>` and its container with a custom implementation to get full control\nover the input field, consider using the [`<vaadin-date-picker-light>`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha4/#/elements/vaadin-date-picker-light) element.\n\n### Internal components\n\nIn addition to `<vaadin-date-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-date-picker-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha4/#/elements/vaadin-overlay).\n- `<vaadin-date-picker-overlay-content>`\n- `<vaadin-date-picker-month-scroller>`\n- `<vaadin-date-picker-year-scroller>`\n- `<vaadin-date-picker-year>`\n- `<vaadin-month-calendar>`\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha4/#/elements/vaadin-input-container) - an internal element wrapping the input.\n\nIn order to style the overlay content, use `<vaadin-date-picker-overlay-content>` shadow DOM parts:\n\nPart name | Description\n----------------------|--------------------\n`overlay-header` | Fullscreen mode header\n`label` | Fullscreen mode value/label\n`clear-button` | Fullscreen mode clear button\n`toggle-button` | Fullscreen mode toggle button\n`years-toggle-button` | Fullscreen mode years scroller toggle\n`toolbar` | Footer bar with slotted buttons\n\nThe following state attributes are available on the `<vaadin-date-picker-overlay-content>` element:\n\nAttribute | Description\n----------------|-------------------------------------------------\n`desktop` | Set when the overlay content is in desktop mode\n`fullscreen` | Set when the overlay content is in fullscreen mode\n`years-visible` | Set when the year scroller is visible in fullscreen mode\n\nIn order to style the month calendar, use `<vaadin-month-calendar>` shadow DOM parts:\n\nPart name | Description\n----------------------|--------------------\n`month-header` | Month title\n`weekdays` | Weekday container\n`weekday` | Weekday element\n`week-numbers` | Week numbers container\n`week-number` | Week number element\n`date` | Date element\n`disabled` | Disabled date element\n`focused` | Focused date element\n`selected` | Selected date element\n`today` | Date element corresponding to the current day\n`past` | Date element corresponding to the date in the past\n`future` | Date element corresponding to the date in the future\n\nIn order to style year scroller elements, use `<vaadin-date-picker-year>` shadow DOM parts:\n\nPart name | Description\n----------------------|--------------------\n`year-number` | Year number\n`year-separator` | Year separator\n\nNote: the `theme` attribute value set on `<vaadin-date-picker>` is\npropagated to the internal components listed above.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Change events\n\nDepending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,\nthe component can fire either a `change` event or an `unparsable-change` event:\n\nValue change | Event\n:------------------------|:------------------\nempty => parsable | change\nempty => unparsable | unparsable-change\nparsable => empty | change\nparsable => parsable | change\nparsable => unparsable | change\nunparsable => empty | unparsable-change\nunparsable => parsable | change\nunparsable => unparsable | unparsable-change", | ||
| "attributes": [ | ||
@@ -372,0 +372,0 @@ { |
| { | ||
| "$schema": "https://json.schemastore.org/web-types", | ||
| "name": "@vaadin/date-picker", | ||
| "version": "24.7.0-alpha3", | ||
| "version": "24.7.0-alpha4", | ||
| "description-markup": "markdown", | ||
@@ -173,3 +173,3 @@ "framework": "lit", | ||
| "name": "vaadin-date-picker", | ||
| "description": "`<vaadin-date-picker>` is an input field that allows to enter a date by typing or by selecting from a calendar overlay.\n\n```html\n<vaadin-date-picker label=\"Birthday\"></vaadin-date-picker>\n```\n```js\ndatePicker.value = '2016-03-02';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n-------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n\n`<vaadin-date-picker>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha3/#/elements/vaadin-text-field) for the styling documentation.\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name | Description\n----------------------|--------------------\n`toggle-button` | Toggle button\n\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute | Description | Part name\n-----------|--------------------------------------------------|-----------\n`opened` | Set when the date selector overlay is opened | :host\n\nIf you want to replace the default `<input>` and its container with a custom implementation to get full control\nover the input field, consider using the [`<vaadin-date-picker-light>`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha3/#/elements/vaadin-date-picker-light) element.\n\n### Internal components\n\nIn addition to `<vaadin-date-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-date-picker-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha3/#/elements/vaadin-overlay).\n- `<vaadin-date-picker-overlay-content>`\n- `<vaadin-date-picker-month-scroller>`\n- `<vaadin-date-picker-year-scroller>`\n- `<vaadin-date-picker-year>`\n- `<vaadin-month-calendar>`\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha3/#/elements/vaadin-input-container) - an internal element wrapping the input.\n\nIn order to style the overlay content, use `<vaadin-date-picker-overlay-content>` shadow DOM parts:\n\nPart name | Description\n----------------------|--------------------\n`overlay-header` | Fullscreen mode header\n`label` | Fullscreen mode value/label\n`clear-button` | Fullscreen mode clear button\n`toggle-button` | Fullscreen mode toggle button\n`years-toggle-button` | Fullscreen mode years scroller toggle\n`toolbar` | Footer bar with slotted buttons\n\nThe following state attributes are available on the `<vaadin-date-picker-overlay-content>` element:\n\nAttribute | Description\n----------------|-------------------------------------------------\n`desktop` | Set when the overlay content is in desktop mode\n`fullscreen` | Set when the overlay content is in fullscreen mode\n`years-visible` | Set when the year scroller is visible in fullscreen mode\n\nIn order to style the month calendar, use `<vaadin-month-calendar>` shadow DOM parts:\n\nPart name | Description\n----------------------|--------------------\n`month-header` | Month title\n`weekdays` | Weekday container\n`weekday` | Weekday element\n`week-numbers` | Week numbers container\n`week-number` | Week number element\n`date` | Date element\n`disabled` | Disabled date element\n`focused` | Focused date element\n`selected` | Selected date element\n`today` | Date element corresponding to the current day\n`past` | Date element corresponding to the date in the past\n`future` | Date element corresponding to the date in the future\n\nIn order to style year scroller elements, use `<vaadin-date-picker-year>` shadow DOM parts:\n\nPart name | Description\n----------------------|--------------------\n`year-number` | Year number\n`year-separator` | Year separator\n\nNote: the `theme` attribute value set on `<vaadin-date-picker>` is\npropagated to the internal components listed above.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Change events\n\nDepending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,\nthe component can fire either a `change` event or an `unparsable-change` event:\n\nValue change | Event\n:------------------------|:------------------\nempty => parsable | change\nempty => unparsable | unparsable-change\nparsable => empty | change\nparsable => parsable | change\nparsable => unparsable | change\nunparsable => empty | unparsable-change\nunparsable => parsable | change\nunparsable => unparsable | unparsable-change", | ||
| "description": "`<vaadin-date-picker>` is an input field that allows to enter a date by typing or by selecting from a calendar overlay.\n\n```html\n<vaadin-date-picker label=\"Birthday\"></vaadin-date-picker>\n```\n```js\ndatePicker.value = '2016-03-02';\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n-------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n\n`<vaadin-date-picker>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha4/#/elements/vaadin-text-field) for the styling documentation.\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name | Description\n----------------------|--------------------\n`toggle-button` | Toggle button\n\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute | Description | Part name\n-----------|--------------------------------------------------|-----------\n`opened` | Set when the date selector overlay is opened | :host\n\nIf you want to replace the default `<input>` and its container with a custom implementation to get full control\nover the input field, consider using the [`<vaadin-date-picker-light>`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha4/#/elements/vaadin-date-picker-light) element.\n\n### Internal components\n\nIn addition to `<vaadin-date-picker>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-date-picker-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha4/#/elements/vaadin-overlay).\n- `<vaadin-date-picker-overlay-content>`\n- `<vaadin-date-picker-month-scroller>`\n- `<vaadin-date-picker-year-scroller>`\n- `<vaadin-date-picker-year>`\n- `<vaadin-month-calendar>`\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/24.7.0-alpha4/#/elements/vaadin-input-container) - an internal element wrapping the input.\n\nIn order to style the overlay content, use `<vaadin-date-picker-overlay-content>` shadow DOM parts:\n\nPart name | Description\n----------------------|--------------------\n`overlay-header` | Fullscreen mode header\n`label` | Fullscreen mode value/label\n`clear-button` | Fullscreen mode clear button\n`toggle-button` | Fullscreen mode toggle button\n`years-toggle-button` | Fullscreen mode years scroller toggle\n`toolbar` | Footer bar with slotted buttons\n\nThe following state attributes are available on the `<vaadin-date-picker-overlay-content>` element:\n\nAttribute | Description\n----------------|-------------------------------------------------\n`desktop` | Set when the overlay content is in desktop mode\n`fullscreen` | Set when the overlay content is in fullscreen mode\n`years-visible` | Set when the year scroller is visible in fullscreen mode\n\nIn order to style the month calendar, use `<vaadin-month-calendar>` shadow DOM parts:\n\nPart name | Description\n----------------------|--------------------\n`month-header` | Month title\n`weekdays` | Weekday container\n`weekday` | Weekday element\n`week-numbers` | Week numbers container\n`week-number` | Week number element\n`date` | Date element\n`disabled` | Disabled date element\n`focused` | Focused date element\n`selected` | Selected date element\n`today` | Date element corresponding to the current day\n`past` | Date element corresponding to the date in the past\n`future` | Date element corresponding to the date in the future\n\nIn order to style year scroller elements, use `<vaadin-date-picker-year>` shadow DOM parts:\n\nPart name | Description\n----------------------|--------------------\n`year-number` | Year number\n`year-separator` | Year separator\n\nNote: the `theme` attribute value set on `<vaadin-date-picker>` is\npropagated to the internal components listed above.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Change events\n\nDepending on the nature of the value change that the user attempts to commit e.g. by pressing Enter,\nthe component can fire either a `change` event or an `unparsable-change` event:\n\nValue change | Event\n:------------------------|:------------------\nempty => parsable | change\nempty => unparsable | unparsable-change\nparsable => empty | change\nparsable => parsable | change\nparsable => unparsable | change\nunparsable => empty | unparsable-change\nunparsable => parsable | change\nunparsable => unparsable | unparsable-change", | ||
| "extension": true, | ||
@@ -176,0 +176,0 @@ "attributes": [ |
No alert changes
Worsened metrics
- Total package byte prevSize
- decreased by-0.5%
283771
- Lines of code
- decreased by-0.63%
7129
Dependency changes
+ Added@vaadin/a11y-base@24.7.0-alpha4(transitive)
+ Added@vaadin/button@24.7.0-alpha4(transitive)
+ Added@vaadin/component-base@24.7.0-alpha4(transitive)
+ Added@vaadin/field-base@24.7.0-alpha4(transitive)
+ Added@vaadin/icon@24.7.0-alpha4(transitive)
+ Added@vaadin/input-container@24.7.0-alpha4(transitive)
+ Added@vaadin/overlay@24.7.0-alpha4(transitive)
+ Added@vaadin/vaadin-lumo-styles@24.7.0-alpha4(transitive)
+ Added@vaadin/vaadin-material-styles@24.7.0-alpha4(transitive)
+ Added@vaadin/vaadin-themable-mixin@24.7.0-alpha4(transitive)
- Removed@vaadin/a11y-base@24.7.0-alpha3(transitive)
- Removed@vaadin/button@24.7.0-alpha3(transitive)
- Removed@vaadin/component-base@24.7.0-alpha3(transitive)
- Removed@vaadin/field-base@24.7.0-alpha3(transitive)
- Removed@vaadin/icon@24.7.0-alpha3(transitive)
- Removed@vaadin/input-container@24.7.0-alpha3(transitive)
- Removed@vaadin/overlay@24.7.0-alpha3(transitive)
- Removed@vaadin/vaadin-lumo-styles@24.7.0-alpha3(transitive)
- Removed@vaadin/vaadin-material-styles@24.7.0-alpha3(transitive)
- Removed@vaadin/vaadin-themable-mixin@24.7.0-alpha3(transitive)
Updated@vaadin/button@24.7.0-alpha4