@vaadin/vaadin-date-picker 22.0.0-alpha6 → 22.0.0-beta1

package/LICENSE

@@ -175,7 +175,7 @@
 
    END OF TERMS AND CONDITIONS
 
-   Copyright 2016 Vaadin Ltd.
+   Copyright 2021 Vaadin Ltd.
 
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.

package/package.json

@@ -1,52 +1,37 @@
 {
   "name": "@vaadin/vaadin-date-picker",
-  "version": "22.0.0-alpha6",
+  "version": "22.0.0-beta1",
+  "publishConfig": {
+    "access": "public"
+  },
   "description": "Web component providing a date selection field with scrollable month calendar",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/vaadin/web-components.git",
+    "directory": "packages/vaadin-date-picker"
+  },
+  "author": "Vaadin Ltd",
+  "homepage": "https://vaadin.com/components",
+  "bugs": {
+    "url": "https://github.com/vaadin/vaadin-date-picker/issues"
+  },
   "main": "vaadin-date-picker.js",
   "module": "vaadin-date-picker.js",
-  "repository": "vaadin/vaadin-date-picker",
+  "files": [
+    "src",
+    "theme",
+    "vaadin-*.d.ts",
+    "vaadin-*.js"
+  ],
   "keywords": [
     "Vaadin",
     "date-picker",
     "web-components",
     "web-component"
   ],
-  "author": "Vaadin Ltd",
-  "license": "Apache-2.0",
-  "bugs": {
-    "url": "https://github.com/vaadin/vaadin-date-picker/issues"
-  },
-  "homepage": "https://vaadin.com/components",
-  "files": [
-    "vaadin-*.d.ts",
-    "vaadin-*.js",
-    "src",
-    "theme"
-  ],
   "dependencies": {
-    "@polymer/iron-a11y-announcer": "^3.0.0",
-    "@polymer/iron-a11y-keys-behavior": "^3.0.0",
-    "@polymer/iron-media-query": "^3.0.0",
-    "@polymer/iron-resizable-behavior": "^3.0.0",
-    "@polymer/polymer": "^3.2.0",
-    "@vaadin/button": "^22.0.0-alpha6",
-    "@vaadin/vaadin-control-state-mixin": "^22.0.0-alpha6",
-    "@vaadin/vaadin-element-mixin": "^22.0.0-alpha6",
-    "@vaadin/vaadin-lumo-styles": "^22.0.0-alpha6",
-    "@vaadin/vaadin-material-styles": "^22.0.0-alpha6",
-    "@vaadin/vaadin-overlay": "^22.0.0-alpha6",
-    "@vaadin/vaadin-text-field": "^22.0.0-alpha6",
-    "@vaadin/vaadin-themable-mixin": "^22.0.0-alpha6"
-  },
-  "devDependencies": {
-    "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.3.0",
-    "@vaadin/vaadin-dialog": "^22.0.0-alpha6",
-    "@vaadin/vaadin-template-renderer": "^22.0.0-alpha6",
-    "sinon": "^9.2.0"
-  },
-  "publishConfig": {
-    "access": "public"
+    "@vaadin/date-picker": "22.0.0-beta1"
   },
-  "gitHead": "4b136b1c7da8942960e7255f40c27859125b3a45"
+  "gitHead": "4cf8a9d0504994200c610e44b3676114fef49c1e"
 }

package/src/vaadin-date-picker-light.d.ts

@@ -1,78 +1,18 @@
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-import { DatePickerMixin } from './vaadin-date-picker-mixin.js';
-
-import { DatePickerEventMap } from './interfaces';
-
 /**
- * `<vaadin-date-picker-light>` is a customizable version of the `<vaadin-date-picker>` providing
- * only the scrollable month calendar view and leaving the input field definition to the user.
- *
- * To create a custom input field, you need to add a child element which has a two-way
- * data-bindable property representing the input value. The property name is expected
- * to be `bindValue` by default. See the example below for a simplest possible example
- * using an `<input>` element.
- *
- * ```html
- * <vaadin-date-picker-light attr-for-value="value">
- *   <input class="input">
- * </vaadin-date-picker-light>
- * ```
- *
- * ### Styling
- *
- * The following shadow DOM parts are available for styling:
- *
- * Part name | Description | Theme for Element
- * ----------------|----------------|----------------
- * `overlay-content` | The overlay element | vaadin-date-picker-light
- *
- * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
- *
- * In addition to `<vaadin-date-picker-light>` itself, the following
- * internal components are themable:
- *
- * - `<vaadin-date-picker-overlay>`
- * - `<vaadin-date-picker-overlay-content>`
- * - `<vaadin-month-calendar>`
- *
- * Note: the `theme` attribute value set on `<vaadin-date-picker-light>`
- * is propagated to the internal themable components listed above.
- *
- * @fires {Event} change - Fired when the user commits a value change.
- * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
- * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-declare class DatePickerLightElement extends ThemableMixin(DatePickerMixin(HTMLElement)) {
-  _overlayInitialized: boolean;
-
-  _inputValue: string | undefined;
-
-  /**
-   * Name of the two-way data-bindable property representing the
-   * value of the custom input field.
-   */
-  attrForValue: string;
-
-  _input(): HTMLElement | null;
+import { DatePickerLight } from '@vaadin/date-picker/src/vaadin-date-picker-light.js';
 
-  addEventListener<K extends keyof DatePickerEventMap>(
-    type: K,
-    listener: (this: DatePickerLightElement, ev: DatePickerEventMap[K]) => void,
-    options?: boolean | AddEventListenerOptions
-  ): void;
-
-  removeEventListener<K extends keyof DatePickerEventMap>(
-    type: K,
-    listener: (this: DatePickerLightElement, ev: DatePickerEventMap[K]) => void,
-    options?: boolean | EventListenerOptions
-  ): void;
-}
+/**
+ * @deprecated Import `DatePickerLight` from `@vaadin/date-picker` instead.
+ */
+export type DatePickerLightElement = DatePickerLight;
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'vaadin-date-picker-light': DatePickerLightElement;
-  }
-}
+/**
+ * @deprecated Import `DatePickerLight` from `@vaadin/date-picker` instead.
+ */
+export const DatePickerLightElement: typeof DatePickerLight;
 
-export { DatePickerLightElement };
+export * from '@vaadin/date-picker/src/vaadin-date-picker-light.js';

package/src/vaadin-date-picker-light.js

@@ -3,154 +3,11 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
-import { dashToCamelCase } from '@polymer/polymer/lib/utils/case-map.js';
-import '@polymer/iron-media-query/iron-media-query.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import './vaadin-date-picker-overlay.js';
-import './vaadin-date-picker-overlay-content.js';
-import { DatePickerMixin } from './vaadin-date-picker-mixin.js';
+import { DatePickerLight } from '@vaadin/date-picker/src/vaadin-date-picker-light.js';
 
 /**
- * `<vaadin-date-picker-light>` is a customizable version of the `<vaadin-date-picker>` providing
- * only the scrollable month calendar view and leaving the input field definition to the user.
- *
- * To create a custom input field, you need to add a child element which has a two-way
- * data-bindable property representing the input value. The property name is expected
- * to be `bindValue` by default. See the example below for a simplest possible example
- * using an `<input>` element.
- *
- * ```html
- * <vaadin-date-picker-light attr-for-value="value">
- *   <input class="input">
- * </vaadin-date-picker-light>
- * ```
- *
- * ### Styling
- *
- * The following shadow DOM parts are available for styling:
- *
- * Part name | Description | Theme for Element
- * ----------------|----------------|----------------
- * `overlay-content` | The overlay element | vaadin-date-picker-light
- *
- * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
- *
- * In addition to `<vaadin-date-picker-light>` itself, the following
- * internal components are themable:
- *
- * - `<vaadin-date-picker-overlay>`
- * - `<vaadin-date-picker-overlay-content>`
- * - `<vaadin-month-calendar>`
- *
- * Note: the `theme` attribute value set on `<vaadin-date-picker-light>`
- * is propagated to the internal themable components listed above.
- *
- * @fires {Event} change - Fired when the user commits a value change.
- * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
- * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
- *
- * @extends HTMLElement
- * @mixes ThemableMixin
- * @mixes DatePickerMixin
+ * @deprecated Import `DatePickerLight` from `@vaadin/date-picker` instead.
  */
-class DatePickerLightElement extends ThemableMixin(DatePickerMixin(PolymerElement)) {
-  static get template() {
-    return html`
-      <style>
-        :host {
-          display: inline-block;
-        }
+export const DatePickerLightElement = DatePickerLight;
 
-        :host([opened]) {
-          pointer-events: auto;
-        }
-      </style>
-      <slot></slot>
-
-      <vaadin-date-picker-overlay
-        id="overlay"
-        fullscreen$="[[_fullscreen]]"
-        opened="{{opened}}"
-        on-vaadin-overlay-open="_onOverlayOpened"
-        on-vaadin-overlay-close="_onOverlayClosed"
-        theme$="[[__getOverlayTheme(theme, _overlayInitialized)]]"
-      >
-        <template>
-          <vaadin-date-picker-overlay-content
-            id="overlay-content"
-            i18n="[[i18n]]"
-            fullscreen$="[[_fullscreen]]"
-            label="[[label]]"
-            selected-date="{{_selectedDate}}"
-            slot="dropdown-content"
-            focused-date="{{_focusedDate}}"
-            show-week-numbers="[[showWeekNumbers]]"
-            min-date="[[_minDate]]"
-            max-date="[[_maxDate]]"
-            on-date-tap="_close"
-            role="dialog"
-            part="overlay-content"
-            theme$="[[__getOverlayTheme(theme, _overlayInitialized)]]"
-          >
-          </vaadin-date-picker-overlay-content>
-        </template>
-      </vaadin-date-picker-overlay>
-
-      <iron-media-query query="[[_fullscreenMediaQuery]]" query-matches="{{_fullscreen}}"> </iron-media-query>
-    `;
-  }
-
-  static get is() {
-    return 'vaadin-date-picker-light';
-  }
-
-  static get properties() {
-    return {
-      /**
-       * Name of the two-way data-bindable property representing the
-       * value of the custom input field.
-       * @attr {string} attr-for-value
-       * @type {string}
-       */
-      attrForValue: {
-        type: String,
-        value: 'bind-value'
-      },
-
-      /**
-       * @type {boolean}
-       * @protected
-       */
-      _overlayInitialized: {
-        type: Boolean,
-        value: true
-      }
-    };
-  }
-
-  /**
-   * @return {HTMLElement}
-   * @protected
-   */
-  _input() {
-    // Using the same selector than in combo-box.
-    // TODO: revisit this to decide the selector and document conveniently.
-    return this.querySelector('vaadin-text-field,iron-input,paper-input,.paper-input-input,.input');
-  }
-
-  set _inputValue(value) {
-    if (this._inputElement) {
-      this._inputElement[dashToCamelCase(this.attrForValue)] = value;
-    }
-  }
-
-  /** @return {string | undefined} */
-  get _inputValue() {
-    return this._inputElement && this._inputElement[dashToCamelCase(this.attrForValue)];
-  }
-}
-
-customElements.define(DatePickerLightElement.is, DatePickerLightElement);
-
-export { DatePickerLightElement };
+export * from '@vaadin/date-picker/src/vaadin-date-picker-light.js';

package/src/vaadin-date-picker.d.ts

@@ -1,157 +1,18 @@
-import { GestureEventListeners } from '@polymer/polymer/lib/mixins/gesture-event-listeners.js';
-
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-import { ControlStateMixin } from '@vaadin/vaadin-control-state-mixin/vaadin-control-state-mixin.js';
-
-import { DatePickerMixin } from './vaadin-date-picker-mixin.js';
-
-import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
-
-import { DatePickerEventMap } from './interfaces';
-
 /**
- * `<vaadin-date-picker>` is a date selection field which includes a scrollable
- * month calendar view.
- * ```html
- * <vaadin-date-picker label="Birthday"></vaadin-date-picker>
- * ```
- * ```js
- * datePicker.value = '2016-03-02';
- * ```
- * When the selected `value` is changed, a `value-changed` event is triggered.
- *
- *
- * ### Styling
- *
- * The following shadow DOM parts are available for styling:
- *
- * Part name | Description | Theme for Element
- * ----------------|----------------|----------------
- * `text-field` | Input element | vaadin-date-picker
- * `clear-button` | Clear button | vaadin-date-picker
- * `toggle-button` | Toggle button | vaadin-date-picker
- * `overlay-content` | The overlay element | vaadin-date-picker
- * `overlay-header` | Fullscreen mode header | vaadin-date-picker-overlay-content
- * `label` | Fullscreen mode value/label | vaadin-date-picker-overlay-content
- * `clear-button` | Fullscreen mode clear button | vaadin-date-picker-overlay-content
- * `toggle-button` | Fullscreen mode toggle button | vaadin-date-picker-overlay-content
- * `years-toggle-button` | Fullscreen mode years scroller toggle | vaadin-date-picker-overlay-content
- * `months` | Months scroller | vaadin-date-picker-overlay-content
- * `years` | Years scroller | vaadin-date-picker-overlay-content
- * `toolbar` | Footer bar with buttons | vaadin-date-picker-overlay-content
- * `today-button` | Today button | vaadin-date-picker-overlay-content
- * `cancel-button` | Cancel button | vaadin-date-picker-overlay-content
- * `month` | Month calendar | vaadin-date-picker-overlay-content
- * `year-number` | Year number | vaadin-date-picker-overlay-content
- * `year-separator` | Year separator | vaadin-date-picker-overlay-content
- * `month-header` | Month title | vaadin-month-calendar
- * `weekdays` | Weekday container | vaadin-month-calendar
- * `weekday` | Weekday element | vaadin-month-calendar
- * `week-numbers` | Week numbers container | vaadin-month-calendar
- * `week-number` | Week number element | vaadin-month-calendar
- * `date` | Date element | vaadin-month-calendar
- *
- * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
- *
- * The following state attributes are available for styling:
- *
- * Attribute    | Description | Part name
- * -------------|-------------|------------
- * `invalid` | Set when the element is invalid | :host
- * `opened` | Set when the date selector overlay is opened | :host
- * `readonly` | Set when the element is readonly | :host
- * `disabled` | Set when the element is disabled | :host
- * `today` | Set on the date corresponding to the current day | date
- * `focused` | Set on the focused date | date
- * `disabled` | Set on the date out of the allowed range | date
- * `selected` | Set on the selected date | date
- *
- * If you want to replace the default input field with a custom implementation, you should use the
- * [`<vaadin-date-picker-light>`](#vaadin-date-picker-light) element.
- *
- * ### Internal components
- *
- * In addition to `<vaadin-date-picker>` itself, the following internal
- * components are themable:
- *
- * - `<vaadin-date-picker-text-field>` - has the same API as [`<vaadin-text-field>`](#/elements/vaadin-text-field).
- * - `<vaadin-date-picker-overlay>` - has the same API as [`<vaadin-overlay>`](#/elements/vaadin-overlay).
- * - `<vaadin-date-picker-overlay-content>`
- * - `<vaadin-month-calendar>`
- *
- * Note: the `theme` attribute value set on `<vaadin-date-picker>` is
- * propagated to the internal components listed above.
- *
- * @fires {Event} change - Fired when the user commits a value change.
- * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
- * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
- * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-declare class DatePickerElement extends ElementMixin(
-  ControlStateMixin(ThemableMixin(DatePickerMixin(GestureEventListeners(HTMLElement))))
-) {
-  /**
-   * Focusable element used by vaadin-control-state-mixin
-   */
-  readonly focusElement: HTMLElement;
-
-  /**
-   * Set to true to disable this element.
-   */
-  disabled: boolean;
-
-  _inputValue: string;
-
-  /**
-   * Set to true to display the clear icon which clears the input.
-   */
-  clearButtonVisible: boolean;
-
-  /**
-   * The error message to display when the input is invalid.
-   */
-  errorMessage: string | null | undefined;
+import { DatePicker } from '@vaadin/date-picker/src/vaadin-date-picker.js';
 
-  /**
-   * A placeholder string in addition to the label. If this is set, the label will always float.
-   */
-  placeholder: string | null | undefined;
-
-  /**
-   * String used for the helper text.
-   */
-  helperText: string | null | undefined;
-
-  /**
-   * Set to true to make this element read-only.
-   */
-  readonly: boolean;
-
-  /**
-   * This property is set to true when the control value invalid.
-   */
-  invalid: boolean;
-
-  _input(): HTMLElement | null;
-
-  addEventListener<K extends keyof DatePickerEventMap>(
-    type: K,
-    listener: (this: DatePickerElement, ev: DatePickerEventMap[K]) => void,
-    options?: boolean | AddEventListenerOptions
-  ): void;
-
-  removeEventListener<K extends keyof DatePickerEventMap>(
-    type: K,
-    listener: (this: DatePickerElement, ev: DatePickerEventMap[K]) => void,
-    options?: boolean | EventListenerOptions
-  ): void;
-}
+/**
+ * @deprecated Import `DatePicker` from `@vaadin/date-picker` instead.
+ */
+export type DatePickerElement = DatePicker;
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'vaadin-date-picker': DatePickerElement;
-  }
-}
+/**
+ * @deprecated Import `DatePicker` from `@vaadin/date-picker` instead.
+ */
+export const DatePickerElement: typeof DatePicker;
 
-export { DatePickerElement };
+export * from '@vaadin/date-picker/src/vaadin-date-picker.js';