@vaadin/date-picker - npm Package Compare versions

Comparing version 24.5.0-alpha1 to 24.5.0-alpha10

package.json

 {
   "name": "@vaadin/date-picker",
-  "version": "24.5.0-alpha1",
+  "version": "24.5.0-alpha10",
   "publishConfig": {
@@ -39,17 +39,17 @@ "access": "public"
     "@polymer/polymer": "^3.2.0",
-    "@vaadin/a11y-base": "24.5.0-alpha1",
-    "@vaadin/button": "24.5.0-alpha1",
-    "@vaadin/component-base": "24.5.0-alpha1",
-    "@vaadin/field-base": "24.5.0-alpha1",
-    "@vaadin/input-container": "24.5.0-alpha1",
-    "@vaadin/overlay": "24.5.0-alpha1",
-    "@vaadin/vaadin-lumo-styles": "24.5.0-alpha1",
-    "@vaadin/vaadin-material-styles": "24.5.0-alpha1",
-    "@vaadin/vaadin-themable-mixin": "24.5.0-alpha1",
+    "@vaadin/a11y-base": "24.5.0-alpha10",
+    "@vaadin/button": "24.5.0-alpha10",
+    "@vaadin/component-base": "24.5.0-alpha10",
+    "@vaadin/field-base": "24.5.0-alpha10",
+    "@vaadin/input-container": "24.5.0-alpha10",
+    "@vaadin/overlay": "24.5.0-alpha10",
+    "@vaadin/vaadin-lumo-styles": "24.5.0-alpha10",
+    "@vaadin/vaadin-material-styles": "24.5.0-alpha10",
+    "@vaadin/vaadin-themable-mixin": "24.5.0-alpha10",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.6.0",
-    "sinon": "^13.0.2"
+    "@vaadin/chai-plugins": "24.5.0-alpha10",
+    "@vaadin/testing-helpers": "^1.0.0",
+    "sinon": "^18.0.0"
   },
@@ -60,3 +60,3 @@ "web-types": [
   ],
-  "gitHead": "57806caac5468532a3b4e3dbdda730cd0fca193a"
+  "gitHead": "6f9c37308031af872a98017bfab4de89aeacda51"
 }

README.md

@@ -54,3 +54,3 @@ # @vaadin/date-picker
 
-Read the [contributing guide](https://vaadin.com/docs/latest/contributing/overview) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
+Read the [contributing guide](https://vaadin.com/docs/latest/contributing) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
 
@@ -57,0 +57,0 @@ ## License

src/vaadin-date-picker-mixin.js

@@ -8,2 +8,3 @@ /**
 import { DelegateFocusMixin } from '@vaadin/a11y-base/src/delegate-focus-mixin.js';
+import { isKeyboardActive } from '@vaadin/a11y-base/src/focus-utils.js';
 import { KeyboardMixin } from '@vaadin/a11y-base/src/keyboard-mixin.js';
@@ -463,3 +464,3 @@ import { isIOS } from '@vaadin/component-base/src/browser-utils.js';
 
-      if (this._noInput) {
+      if (this._noInput && !isKeyboardActive()) {
         event.target.blur();
@@ -571,2 +572,8 @@ }
 
+      content.addEventListener('focusout', (event) => {
+        if (this._shouldRemoveFocus(event)) {
+          this._setFocused(false);
+        }
+      });
+
       // Two-way data binding for `focusedDate` property
@@ -655,3 +662,3 @@ content.addEventListener('focused-date-changed', (e) => {
      *
-     * @param {!FocusEvent} _event
+     * @param {FocusEvent} event
      * @return {boolean}
@@ -661,3 +668,18 @@ * @protected
      */
-    _shouldRemoveFocus(_event) {
+    _shouldRemoveFocus(event) {
+      // Remove the focused state when clicking outside on a focusable element that is deliberately
+      // made targetable with pointer-events: auto, such as the time-picker in the date-time-picker.
+      // In this scenario, focus will move straight to that element and the closing overlay won't
+      // attempt to restore focus to the input.
+      const { relatedTarget } = event;
+      if (
+        this.opened &&
+        relatedTarget !== null &&
+        relatedTarget !== document.body &&
+        !this.contains(relatedTarget) &&
+        !this._overlayContent.contains(relatedTarget)
+      ) {
+        return true;
+      }
+
       return !this.opened;
@@ -743,3 +765,3 @@ }
     /** @private */
-    // eslint-disable-next-line max-params
+    // eslint-disable-next-line @typescript-eslint/max-params
     _isNoInput(inputElement, fullscreen, ios, i18n, opened, autoOpenDisabled) {
@@ -872,3 +894,3 @@ // On fullscreen mode, text input is disabled if auto-open isn't disabled or
     /** @private */
-    // eslint-disable-next-line max-params
+    // eslint-disable-next-line @typescript-eslint/max-params
     __updateOverlayContent(
@@ -970,4 +992,4 @@ overlayContent,
         : this._minDate || this._maxDate
-        ? getClosestDate(initialPosition, [this._minDate, this._maxDate])
-        : new Date();
+          ? getClosestDate(initialPosition, [this._minDate, this._maxDate])
+          : new Date();
     }
@@ -974,0 +996,0 @@

src/vaadin-date-picker-overlay-content-mixin.js

@@ -330,3 +330,3 @@ /**
 
-    // eslint-disable-next-line max-params
+    // eslint-disable-next-line @typescript-eslint/max-params
     __updateCalendars(
@@ -535,3 +535,3 @@ calendars,
     _onTodayTap() {
-      const today = new Date();
+      const today = this._getTodayMidnight();
 
@@ -1045,2 +1045,7 @@ if (Math.abs(this._monthScroller.position - this._differenceInMonths(today, this._originDate)) < 0.001) {
     _isTodayAllowed(min, max, isDateDisabled) {
+      return this._dateAllowed(this._getTodayMidnight(), min, max, isDateDisabled);
+    }
+
+    /** @private */
+    _getTodayMidnight() {
       const today = new Date();
@@ -1051,3 +1056,3 @@ const todayMidnight = new Date(0, 0);
       todayMidnight.setDate(today.getDate());
-      return this._dateAllowed(todayMidnight, min, max, isDateDisabled);
+      return todayMidnight;
     }
@@ -1054,0 +1059,0 @@

src/vaadin-date-picker.js

@@ -216,8 +216,17 @@ /**
     this.addController(
-      new InputController(this, (input) => {
-        this._setInputElement(input);
-        this._setFocusElement(input);
-        this.stateTarget = input;
-        this.ariaTarget = input;
-      }),
+      new InputController(
+        this,
+        (input) => {
+          this._setInputElement(input);
+          this._setFocusElement(input);
+          this.stateTarget = input;
+          this.ariaTarget = input;
+        },
+        {
+          // The "search" word is a trick to prevent Safari from enabling AutoFill,
+          // which is causing click issues:
+          // https://github.com/vaadin/web-components/issues/6817#issuecomment-2268229567
+          uniqueIdPrefix: 'search-input',
+        },
+      ),
     );
@@ -224,0 +233,0 @@ this.addController(new LabelledInputController(this.inputElement, this._labelController));

src/vaadin-month-calendar-mixin.js

@@ -202,8 +202,10 @@ /**
 
-      return weekDayNames.map((day, index) => {
-        return {
-          weekDay: day,
-          weekDayShort: weekDayNamesShort[index],
-        };
-      });
+      return weekDayNames
+        .map((day, index) => {
+          return {
+            weekDay: day,
+            weekDayShort: weekDayNamesShort[index],
+          };
+        })
+        .slice(0, 7);
     }
@@ -210,0 +212,0 @@

src/vaadin-month-calendar.js

@@ -110,2 +110,3 @@ /**
   /** @private */
+  // eslint-disable-next-line @typescript-eslint/max-params
   __getDatePart(date, focusedDate, selectedDate, minDate, maxDate, isDateDisabled) {
@@ -112,0 +113,0 @@ const result = ['date'];

theme/lumo/vaadin-date-picker-overlay-styles.js

@@ -25,5 +25,2 @@ import '@vaadin/vaadin-lumo-styles/sizing.js';
     -webkit-tap-highlight-color: transparent;
-  }
-
-  [part='overlay'] {
     flex-direction: column;
@@ -30,0 +27,0 @@ }

theme/lumo/vaadin-month-calendar-styles.js

@@ -105,3 +105,5 @@ import '@vaadin/vaadin-lumo-styles/color.js';
     [part~='date'][part~='focused']::before {
-      box-shadow: 0 0 0 1px var(--lumo-base-color), 0 0 0 calc(var(--_focus-ring-width) + 1px) var(--_focus-ring-color);
+      box-shadow:
+        0 0 0 1px var(--lumo-base-color),
+        0 0 0 calc(var(--_focus-ring-width) + 1px) var(--_focus-ring-color);
     }
@@ -115,3 +117,5 @@
       50% {
-        box-shadow: 0 0 0 1px var(--lumo-base-color), 0 0 0 calc(var(--_focus-ring-width) + 1px) transparent;
+        box-shadow:
+          0 0 0 1px var(--lumo-base-color),
+          0 0 0 calc(var(--_focus-ring-width) + 1px) transparent;
       }
@@ -118,0 +122,0 @@ }

theme/material/vaadin-date-picker-overlay-styles.js

@@ -27,3 +27,3 @@ import { overlay } from '@vaadin/vaadin-material-styles/mixins/overlay.js';
 
-  :host([dir='ltr']:not([fullscreen])[end-aligned]) [part='overlay'],
+  :host(:not([dir='rtl']):not([fullscreen])[end-aligned]) [part='overlay'],
   :host([dir='rtl']:not([fullscreen])[start-aligned]) [part='overlay'] {
@@ -30,0 +30,0 @@ border-radius: 4px 0 4px 4px;

web-types.json

 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/date-picker",
-  "version": "24.5.0-alpha1",
+  "version": "24.5.0-alpha10",
   "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-alpha1/#/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-alpha1/#/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-alpha1/#/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-alpha1/#/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-alpha10/#/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-alpha10/#/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-alpha10/#/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-alpha10/#/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",
           "attributes": [
@@ -350,0 +350,0 @@ {

web-types.lit.json

 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/date-picker",
-  "version": "24.5.0-alpha1",
+  "version": "24.5.0-alpha10",
   "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-alpha1/#/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-alpha1/#/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-alpha1/#/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-alpha1/#/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-alpha10/#/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-alpha10/#/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-alpha10/#/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-alpha10/#/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",
           "extension": true,
@@ -169,0 +169,0 @@ "attributes": [

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

276176

increased by0.55%

Lines of code

6980

increased by0.55%

Dependency changes

• + Added@vaadin/a11y-base@24.5.0-alpha10(transitive)

• + Added@vaadin/button@24.5.0-alpha10(transitive)

• + Added@vaadin/component-base@24.5.0-alpha10(transitive)

• + Added@vaadin/field-base@24.5.0-alpha10(transitive)

• + Added@vaadin/icon@24.5.0-alpha10(transitive)

• + Added@vaadin/input-container@24.5.0-alpha10(transitive)

• + Added@vaadin/overlay@24.5.0-alpha10(transitive)

• + Added@vaadin/vaadin-lumo-styles@24.5.0-alpha10(transitive)

• + Added@vaadin/vaadin-material-styles@24.5.0-alpha10(transitive)

• + Added@vaadin/vaadin-themable-mixin@24.5.0-alpha10(transitive)

• - Removed@vaadin/a11y-base@24.5.0-alpha1(transitive)

• - Removed@vaadin/button@24.5.0-alpha1(transitive)

• - Removed@vaadin/component-base@24.5.0-alpha1(transitive)

• - Removed@vaadin/field-base@24.5.0-alpha1(transitive)

• - Removed@vaadin/icon@24.5.0-alpha1(transitive)

• - Removed@vaadin/input-container@24.5.0-alpha1(transitive)

• - Removed@vaadin/overlay@24.5.0-alpha1(transitive)

• - Removed@vaadin/vaadin-lumo-styles@24.5.0-alpha1(transitive)

• - Removed@vaadin/vaadin-material-styles@24.5.0-alpha1(transitive)

• - Removed@vaadin/vaadin-themable-mixin@24.5.0-alpha1(transitive)

• Updated@vaadin/a11y-base@24.5.0-alpha10

• Updated@vaadin/button@24.5.0-alpha10

• Updated@vaadin/component-base@24.5.0-alpha10

• Updated@vaadin/field-base@24.5.0-alpha10

• Updated@vaadin/input-container@24.5.0-alpha10

• Updated@vaadin/overlay@24.5.0-alpha10

• Updated@vaadin/vaadin-lumo-styles@24.5.0-alpha10

• Updated@vaadin/vaadin-material-styles@24.5.0-alpha10

• Updated@vaadin/vaadin-themable-mixin@24.5.0-alpha10