@vaadin/date-picker
Advanced tools
@vaadin/date-picker - npm Package Compare versions
Comparing version 24.5.0-alpha9 to 24.5.0-beta1
| { | ||
| "name": "@vaadin/date-picker", | ||
| "version": "24.5.0-alpha9", | ||
| "version": "24.5.0-beta1", | ||
| "publishConfig": { | ||
@@ -39,15 +39,15 @@ "access": "public" | ||
| "@polymer/polymer": "^3.2.0", | ||
| "@vaadin/a11y-base": "24.5.0-alpha9", | ||
| "@vaadin/button": "24.5.0-alpha9", | ||
| "@vaadin/component-base": "24.5.0-alpha9", | ||
| "@vaadin/field-base": "24.5.0-alpha9", | ||
| "@vaadin/input-container": "24.5.0-alpha9", | ||
| "@vaadin/overlay": "24.5.0-alpha9", | ||
| "@vaadin/vaadin-lumo-styles": "24.5.0-alpha9", | ||
| "@vaadin/vaadin-material-styles": "24.5.0-alpha9", | ||
| "@vaadin/vaadin-themable-mixin": "24.5.0-alpha9", | ||
| "@vaadin/a11y-base": "24.5.0-beta1", | ||
| "@vaadin/button": "24.5.0-beta1", | ||
| "@vaadin/component-base": "24.5.0-beta1", | ||
| "@vaadin/field-base": "24.5.0-beta1", | ||
| "@vaadin/input-container": "24.5.0-beta1", | ||
| "@vaadin/overlay": "24.5.0-beta1", | ||
| "@vaadin/vaadin-lumo-styles": "24.5.0-beta1", | ||
| "@vaadin/vaadin-material-styles": "24.5.0-beta1", | ||
| "@vaadin/vaadin-themable-mixin": "24.5.0-beta1", | ||
| "lit": "^3.0.0" | ||
| }, | ||
| "devDependencies": { | ||
| "@vaadin/chai-plugins": "24.5.0-alpha9", | ||
| "@vaadin/chai-plugins": "24.5.0-beta1", | ||
| "@vaadin/testing-helpers": "^1.0.0", | ||
@@ -60,3 +60,3 @@ "sinon": "^18.0.0" | ||
| ], | ||
| "gitHead": "804744762f3bec0a2247c4bbcbbb204dbcd78bc0" | ||
| "gitHead": "da4b57724d7089e3766d59d01068159322adb2b8" | ||
| } |
@@ -40,2 +40,14 @@ /** | ||
| /** | ||
| * Creates a new object with the same date, but sets the hours, minutes, seconds and milliseconds to 0. | ||
| * | ||
| * @param {Date} date | ||
| * @return {Date} The same date time elements set to 0. | ||
| */ | ||
| export function normalizeDate(date) { | ||
| const normalizedDate = new Date(date); | ||
| normalizedDate.setHours(0, 0, 0, 0); | ||
| return normalizedDate; | ||
| } | ||
| /** | ||
| * Check if two dates are equal. | ||
@@ -49,7 +61,3 @@ * | ||
| return ( | ||
| date1 instanceof Date && | ||
| date2 instanceof Date && | ||
| date1.getFullYear() === date2.getFullYear() && | ||
| date1.getMonth() === date2.getMonth() && | ||
| date1.getDate() === date2.getDate() | ||
| date1 instanceof Date && date2 instanceof Date && normalizeDate(date1).getTime() === normalizeDate(date2).getTime() | ||
| ); | ||
@@ -56,0 +64,0 @@ } |
@@ -145,2 +145,4 @@ /** | ||
| * `today` | Date element corresponding to the current day | ||
| * `past` | Date element corresponding to the date in the past | ||
| * `future` | Date element corresponding to the date in the future | ||
| * | ||
@@ -147,0 +149,0 @@ * In order to style year scroller elements, use `<vaadin-date-picker-year>` shadow DOM parts: |
@@ -108,2 +108,4 @@ /** | ||
| * `today` | Date element corresponding to the current day | ||
| * `past` | Date element corresponding to the date in the past | ||
| * `future` | Date element corresponding to the date in the future | ||
| * | ||
@@ -110,0 +112,0 @@ * In order to style year scroller elements, use `<vaadin-date-picker-year>` shadow DOM parts: |
@@ -10,3 +10,3 @@ /** | ||
| import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; | ||
| import { dateAllowed, dateEquals } from './vaadin-date-picker-helper.js'; | ||
| import { dateAllowed, dateEquals, normalizeDate } from './vaadin-date-picker-helper.js'; | ||
| import { MonthCalendarMixin } from './vaadin-month-calendar-mixin.js'; | ||
@@ -66,2 +66,4 @@ import { monthCalendarStyles } from './vaadin-month-calendar-styles.js'; | ||
| const isDisabled = !dateAllowed(date, this.minDate, this.maxDate, this.isDateDisabled); | ||
| const greaterThanToday = date > normalizeDate(new Date()); | ||
| const lessThanToday = date < normalizeDate(new Date()); | ||
@@ -74,2 +76,4 @@ const parts = [ | ||
| this._isToday(date) && 'today', | ||
| greaterThanToday && 'future', | ||
| lessThanToday && 'past', | ||
| ].filter(Boolean); | ||
@@ -76,0 +80,0 @@ |
@@ -10,3 +10,3 @@ /** | ||
| import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; | ||
| import { dateAllowed, dateEquals } from './vaadin-date-picker-helper.js'; | ||
| import { dateAllowed, dateEquals, normalizeDate } from './vaadin-date-picker-helper.js'; | ||
| import { MonthCalendarMixin } from './vaadin-month-calendar-mixin.js'; | ||
@@ -114,2 +114,4 @@ import { monthCalendarStyles } from './vaadin-month-calendar-styles.js'; | ||
| const result = ['date']; | ||
| const greaterThanToday = date > normalizeDate(new Date()); | ||
| const lessThanToday = date < normalizeDate(new Date()); | ||
@@ -132,2 +134,10 @@ if (this.__isDayDisabled(date, minDate, maxDate, isDateDisabled)) { | ||
| if (lessThanToday) { | ||
| result.push('past'); | ||
| } | ||
| if (greaterThanToday) { | ||
| result.push('future'); | ||
| } | ||
| return result.join(' '); | ||
@@ -134,0 +144,0 @@ } |
@@ -7,6 +7,2 @@ import '@vaadin/input-container/theme/lumo/vaadin-input-container-styles.js'; | ||
| const datePicker = css` | ||
| :host { | ||
| outline: none; | ||
| } | ||
| [part='toggle-button']::before { | ||
@@ -13,0 +9,0 @@ content: var(--lumo-icons-calendar); |
@@ -140,3 +140,3 @@ import '@vaadin/vaadin-lumo-styles/color.js'; | ||
| [part~='date']:hover:not([part~='selected'])::before, | ||
| [part~='focused']:not([part~='selected'])::before { | ||
| :host(:not([focus-ring])) [part~='focused']:not([part~='selected'])::before { | ||
| display: none; | ||
@@ -149,7 +149,6 @@ } | ||
| [part~='date'][part~='selected']::before { | ||
| :host(:not([focus-ring])) [part~='date'][part~='selected']::before { | ||
| box-shadow: none; | ||
| } | ||
| } | ||
| /* Disabled */ | ||
@@ -163,15 +162,1 @@ | ||
| ); | ||
| const template = document.createElement('template'); | ||
| template.innerHTML = ` | ||
| <style> | ||
| @keyframes vaadin-date-picker-month-calendar-focus-date { | ||
| 50% { | ||
| box-shadow: 0 0 0 var(--_focus-ring-width) transparent; | ||
| } | ||
| } | ||
| </style> | ||
| `; | ||
| document.head.appendChild(template.content); |
| { | ||
| "$schema": "https://json.schemastore.org/web-types", | ||
| "name": "@vaadin/date-picker", | ||
| "version": "24.5.0-alpha9", | ||
| "version": "24.5.0-beta1", | ||
| "description-markup": "markdown", | ||
@@ -347,3 +347,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.5.0-alpha9/#/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.5.0-alpha9/#/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.5.0-alpha9/#/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.5.0-alpha9/#/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\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.5.0-beta1/#/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.5.0-beta1/#/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.5.0-beta1/#/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.5.0-beta1/#/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": [ | ||
@@ -350,0 +350,0 @@ { |
| { | ||
| "$schema": "https://json.schemastore.org/web-types", | ||
| "name": "@vaadin/date-picker", | ||
| "version": "24.5.0-alpha9", | ||
| "version": "24.5.0-beta1", | ||
| "description-markup": "markdown", | ||
@@ -166,3 +166,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.5.0-alpha9/#/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.5.0-alpha9/#/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.5.0-alpha9/#/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.5.0-alpha9/#/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\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.5.0-beta1/#/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.5.0-beta1/#/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.5.0-beta1/#/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.5.0-beta1/#/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, | ||
@@ -169,0 +169,0 @@ "attributes": [ |
New alerts
License Policy Violation
LicenseThis 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
LicenseThis 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
- increased by0.4%
277262
- Lines of code
- increased by0.16%
6991
Dependency changes
+ Added@vaadin/a11y-base@24.5.0-beta1(transitive)
+ Added@vaadin/button@24.5.0-beta1(transitive)
+ Added@vaadin/component-base@24.5.0-beta1(transitive)
+ Added@vaadin/field-base@24.5.0-beta1(transitive)
+ Added@vaadin/icon@24.5.0-beta1(transitive)
+ Added@vaadin/input-container@24.5.0-beta1(transitive)
+ Added@vaadin/overlay@24.5.0-beta1(transitive)
+ Added@vaadin/vaadin-lumo-styles@24.5.0-beta1(transitive)
+ Added@vaadin/vaadin-material-styles@24.5.0-beta1(transitive)
+ Added@vaadin/vaadin-themable-mixin@24.5.0-beta1(transitive)
- Removed@vaadin/a11y-base@24.5.0-alpha9(transitive)
- Removed@vaadin/button@24.5.0-alpha9(transitive)
- Removed@vaadin/component-base@24.5.0-alpha9(transitive)
- Removed@vaadin/field-base@24.5.0-alpha9(transitive)
- Removed@vaadin/icon@24.5.0-alpha9(transitive)
- Removed@vaadin/input-container@24.5.0-alpha9(transitive)
- Removed@vaadin/overlay@24.5.0-alpha9(transitive)
- Removed@vaadin/vaadin-lumo-styles@24.5.0-alpha9(transitive)
- Removed@vaadin/vaadin-material-styles@24.5.0-alpha9(transitive)
- Removed@vaadin/vaadin-themable-mixin@24.5.0-alpha9(transitive)
Updated@vaadin/button@24.5.0-beta1
Updated@vaadin/overlay@24.5.0-beta1