New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@vaadin/vaadin-time-picker

Package Overview
Dependencies
Maintainers
12
Versions
264
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@vaadin/vaadin-time-picker - npm Package Compare versions

Comparing version 3.0.0 to 3.1.0

@types/interfaces.d.ts

86

package.json
{
"name": "@vaadin/vaadin-time-picker",
"version": "3.0.0",
"description": "vaadin-time-picker",
"main": "vaadin-time-picker.js",
"module": "vaadin-time-picker.js",
"keywords": [

@@ -15,2 +11,6 @@ "Vaadin",

"repository": "vaadin/vaadin-time-picker",
"homepage": "https://vaadin.com/components",
"name": "@vaadin/vaadin-time-picker",
"version": "3.1.0",
"main": "vaadin-time-picker.js",
"author": "Vaadin Ltd",

@@ -21,76 +21,40 @@ "license": "Apache-2.0",

},
"homepage": "https://vaadin.com/components",
"files": [
"vaadin-*.d.ts",
"vaadin-*.js",
"@types",
"src",
"theme"
],
"scripts": {
"analyze": "polymer analyze vaadin-* > analysis.json",
"check-version": "magi check-version",
"debug": "web-test-runner test/*.test.js --watch",
"dist": "rimraf dist && npm run analyze && rollup -c rollup.config.js && cp analysis.json dist",
"lint": "npm run lint:js && npm run lint:css && npm run lint:types",
"lint:css": "stylelint src/*.js theme/**/*-styles.js",
"lint:js": "eslint src theme test",
"lint:types": "tsc",
"prestart": "npm run analyze",
"preversion": "magi update-version",
"screenshots": "hermione test/visual/test.js --update-refs",
"serve:dist": "web-dev-server --app-index dist/index.html --open",
"start": "web-dev-server --node-resolve --open",
"test": "web-test-runner test/*.test.js --coverage",
"test:sauce": "TEST_ENV=sauce npm test",
"test:visual": "hermione test/visual/test.js"
"resolutions": {
"inherits": "2.0.3",
"samsam": "1.1.3",
"supports-color": "3.1.2",
"type-detect": "1.0.0"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.js": [
"eslint --fix",
"prettier --write"
]
},
"dependencies": {
"@polymer/polymer": "^3.0.0",
"@vaadin/vaadin-themable-mixin": "^1.6.2",
"@polymer/iron-a11y-keys-behavior": "^3.0.0",
"@vaadin/vaadin-themable-mixin": "^1.6.1",
"@vaadin/vaadin-element-mixin": "^2.4.1",
"@vaadin/vaadin-lumo-styles": "^1.6.1",
"@vaadin/vaadin-lumo-styles": "^1.6.0",
"@vaadin/vaadin-material-styles": "^1.3.2",
"@vaadin/vaadin-text-field": "^3.0.0",
"@vaadin/vaadin-combo-box": "^6.0.0",
"@vaadin/vaadin-text-field": "^2.10.0",
"@vaadin/vaadin-combo-box": "^5.5.2",
"@vaadin/vaadin-control-state-mixin": "^2.2.2"
},
"devDependencies": {
"@esm-bundle/chai": "^4.1.5",
"@open-wc/rollup-plugin-html": "^1.2.5",
"@open-wc/testing-helpers": "^1.8.0",
"@web-padawan/gen-typescript-declarations": "^1.6.2",
"web-component-tester": "6.9.2",
"@polymer/iron-component-page": "^4.0.0",
"@polymer/iron-test-helpers": "^3.0.0",
"@rollup/plugin-node-resolve": "^11.0.0",
"@web/dev-server": "^0.0.19",
"@web/test-runner": "^0.9.7",
"@web/test-runner-saucelabs": "^0.1.1",
"eslint": "^7.13.0",
"eslint-config-prettier": "^6.15.0",
"eslint-plugin-prettier": "^3.1.4",
"hermione": "^3.0.1",
"hermione-esm": "^0.4.0",
"hermione-sauce": "^0.1.0",
"husky": "^4.3.0",
"lint-staged": "^10.5.1",
"magi-cli": "^0.28.0",
"prettier": "^2.1.2",
"rimraf": "^3.0.2",
"rollup": "^2.34.1",
"rollup-plugin-terser": "^7.0.2",
"sinon": "^9.2.0",
"stylelint": "^13.7.1",
"stylelint-config-vaadin": "^0.2.6",
"typescript": "^4.0.5"
"@webcomponents/webcomponentsjs": "^2.0.0",
"wct-browser-legacy": "^1.0.1",
"@vaadin/vaadin-demo-helpers": "^3.1.0",
"@polymer/iron-form": "^3.0.0"
},
"scripts": {
"generate-typings": "gen-typescript-declarations --outDir . --verify",
"test": "wct --npm"
}
}

65

README.md
# <vaadin-time-picker>
> ⚠️ Starting from Vaadin 20, the source code and issues for this component are migrated to the [`vaadin/web-components`](https://github.com/vaadin/web-components/tree/master/packages/vaadin-time-picker) monorepository.
> This repository contains the source code and releases of `<vaadin-time-picker>` for the Vaadin versions 10 to 19.
[&lt;vaadin-time-picker&gt;](https://vaadin.com/components/vaadin-time-picker) is a [Web Component](http://webcomponents.org) providing a time-selection field, part of the [Vaadin components](https://vaadin.com/components).

@@ -11,8 +14,16 @@

[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/vaadin/vaadin-time-picker)
[![Build Status](https://travis-ci.org/vaadin/vaadin-time-picker.svg?branch=master)](https://travis-ci.org/vaadin/vaadin-time-picker)
[![Coverage Status](https://coveralls.io/repos/github/vaadin/vaadin-time-picker/badge.svg?branch=master)](https://coveralls.io/github/vaadin/vaadin-time-picker?branch=master)
[![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/vaadin/web-components?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
[![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/vaadinvaadin-time-picker)
[![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/star/vaadin-time-picker-directory-urlidentifier.svg)](https://vaadin.com/directory/component/vaadinvaadin-time-picker)
[![Discord](https://discordapp.com/api/guilds/732335336448852018/widget.png)](https://vaad.in/chat)
<!--
```
<custom-element-demo>
<template>
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="vaadin-time-picker.html">
<next-code-block></next-code-block>
</template>
</custom-element-demo>
```
-->
```html

@@ -26,5 +37,28 @@ <vaadin-time-picker label="Delivery Time"></vaadin-time-picker>

The Vaadin components are distributed as Bower and npm packages.
Please note that the version range is the same, as the API has not changed.
You should not mix Bower and npm versions in the same application, though.
Unlike the official Polymer Elements, the converted Polymer 3 compatible Vaadin components
are only published on npm, not pushed to GitHub repositories.
### Polymer 2 and HTML Imports compatible version
Install `vaadin-time-picker`:
```sh
bower i vaadin/vaadin-time-picker --save
```
Once installed, import it in your application:
```html
<link rel="import" href="bower_components/vaadin-time-picker/vaadin-time-picker.html">
```
### Polymer 3 and ES Modules compatible version
Install `vaadin-time-picker`:
```sh
npm i @vaadin/vaadin-time-picker --save

@@ -49,22 +83,20 @@ ```

`theme/lumo/vaadin-time-picker.js`
`theme/lumo/vaadin-time-picker.html`
- The component with the Material theme:
`theme/material/vaadin-time-picker.js`
`theme/material/vaadin-time-picker.html`
- Alias for `theme/lumo/vaadin-time-picker.js`:
- Alias for `theme/lumo/vaadin-time-picker.html`:
`vaadin-time-picker.js`
`vaadin-time-picker.html`
## Running API docs and tests in a browser
## Running demos and tests in a browser
1. Fork the `vaadin-time-picker` repository and clone it locally.
1. Make sure you have [node.js](https://nodejs.org/) 12.x installed.
1. Make sure you have [npm](https://www.npmjs.com/) and [Bower](https://bower.io) installed.
1. Make sure you have [npm](https://www.npmjs.com/) installed.
1. When in the `vaadin-time-picker` directory, run `npm install` and then `bower install` to install dependencies.
1. When in the `vaadin-time-picker` directory, run `npm install` to install dependencies.
1. Make sure you have [polymer-cli](https://www.npmjs.com/package/polymer-cli) installed globally: `npm i -g polymer-cli`.

@@ -74,5 +106,6 @@

1. You can also open visual tests, for example:
1. You can also open demo or in-browser tests by adding **demo** or **test** to the URL, for example:
- http://127.0.0.1:3000/test/visual/default.html
- http://127.0.0.1:3000/components/vaadin-time-picker/demo
- http://127.0.0.1:3000/components/vaadin-time-picker/test

@@ -87,3 +120,3 @@

We are using [ESLint](http://eslint.org/) for linting JavaScript code. You can check if your code is following our standards by running `npm run lint`, which will automatically lint all `.js` files.
We are using [ESLint](http://eslint.org/) for linting JavaScript code. You can check if your code is following our standards by running `npm run lint`, which will automatically lint all `.js` files as well as JavaScript snippets inside `.html` files.

@@ -90,0 +123,0 @@ ## Big Thanks

72

src/vaadin-time-picker-text-field.js
/**
* @license
* Copyright (c) 2020 Vaadin Ltd.
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
*/
@license
Copyright (c) 2018 Vaadin Ltd.
This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
*/
import { TextFieldElement } from '@vaadin/vaadin-text-field/src/vaadin-text-field.js';
import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
registerStyles(
'vaadin-time-picker-text-field',
css`
:host([dir='rtl']) [part='input-field'] {
direction: ltr;
}
const $_documentContainer = document.createElement('template');
:host([dir='rtl']) [part='value']::placeholder {
direction: rtl;
text-align: left;
}
$_documentContainer.innerHTML = `<dom-module id="vaadin-time-picker-text-field-styles" theme-for="vaadin-time-picker-text-field">
<template>
<style>
:host([dir="rtl"]) [part="input-field"] {
direction: ltr;
}
:host([dir='rtl']) [part='input-field'] ::slotted(input)::placeholder {
direction: rtl;
text-align: left;
}
`,
{ moduleId: 'vaadin-time-picker-text-field-styles' }
);
:host([dir="rtl"]) [part="value"]::placeholder {
direction: rtl;
text-align: left;
}
:host([dir="rtl"]) [part="input-field"] ::slotted(input)::placeholder {
direction: rtl;
text-align: left;
}
:host([dir="rtl"]) [part="value"]:-ms-input-placeholder,
:host([dir="rtl"]) [part="input-field"] ::slotted(input):-ms-input-placeholder {
direction: rtl;
text-align: left;
}
</style>
</template>
</dom-module>`;
document.head.appendChild($_documentContainer.content);
/**
* The text-field element.
*
* ### Styling
*
* See [`<vaadin-text-field>` documentation](https://github.com/vaadin/vaadin-text-field/blob/master/src/vaadin-text-field.html)
* for `<vaadin-time-picker-text-field>` parts and available slots (prefix, suffix etc.)
*
* See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)
*/
* The text-field element.
*
* ### Styling
*
* See [`<vaadin-text-field>` documentation](https://github.com/vaadin/vaadin-text-field/blob/master/src/vaadin-text-field.html)
* for `<vaadin-time-picker-text-field>` parts and available slots (prefix, suffix etc.)
*
* See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)
*
* @extends PolymerElement
*/
class TimePickerTextFieldElement extends TextFieldElement {

@@ -40,0 +50,0 @@ static get is() {

93

src/vaadin-time-picker.d.ts

@@ -1,9 +0,27 @@

import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
/**
* DO NOT EDIT
*
* This file was automatically generated by
* https://github.com/Polymer/tools/tree/master/packages/gen-typescript-declarations
*
* To modify these typings, edit the source file(s):
* src/vaadin-time-picker.js
*/
import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
import { ControlStateMixin } from '@vaadin/vaadin-control-state-mixin/vaadin-control-state-mixin.js';
// tslint:disable:variable-name Describing an API that's defined elsewhere.
// tslint:disable:no-any describes the API as best we are able today
import { TimePickerEventMap, TimePickerI18n, TimePickerTime } from './interfaces';
import {PolymerElement} from '@polymer/polymer/polymer-element.js';
import {ThemableMixin} from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
import {ElementMixin} from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
import {IronA11yKeysBehavior} from '@polymer/iron-a11y-keys-behavior/iron-a11y-keys-behavior.js';
import {html} from '@polymer/polymer/lib/utils/html-tag.js';
import {ControlStateMixin} from '@vaadin/vaadin-control-state-mixin/vaadin-control-state-mixin.js';
/**

@@ -53,8 +71,9 @@ * `<vaadin-time-picker>` is a Web Component providing a time-selection field.

* propagated to the internal themable 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} value-changed - Fired when the `value` property changes.
*/
declare class TimePickerElement extends ElementMixin(ControlStateMixin(ThemableMixin(HTMLElement))) {
declare class TimePickerElement extends
ElementMixin(
ControlStateMixin(
ThemableMixin(
PolymerElement))) {
/**

@@ -73,3 +92,3 @@ * Focusable element used by vaadin-control-state-mixin

*/
name: string | null | undefined;
name: string|null|undefined;

@@ -89,3 +108,3 @@ /**

*/
label: string | null | undefined;
label: string|null|undefined;

@@ -101,3 +120,3 @@ /**

*/
preventInvalidInput: boolean | null | undefined;
preventInvalidInput: boolean|null|undefined;

@@ -107,3 +126,3 @@ /**

*/
pattern: string | null | undefined;
pattern: string|null|undefined;

@@ -114,3 +133,3 @@ /**

*/
errorMessage: string | null | undefined;
errorMessage: string|null|undefined;

@@ -121,3 +140,3 @@ /**

*/
helperText: string | null | undefined;
helperText: string|null|undefined;

@@ -160,2 +179,7 @@ /**

/**
* When true, the input element has a non-empty value entered by the user.
*/
_hasInputValue: boolean|null|undefined;
/**
* Specifies the number of valid intervals in a day used for

@@ -176,3 +200,3 @@ * configuring the items displayed in the selection box.

*/
step: number | null | undefined;
step: number|null|undefined;

@@ -189,3 +213,3 @@ /**

*/
autoOpenDisabled: boolean | null | undefined;
autoOpenDisabled: boolean|null|undefined;

@@ -223,9 +247,17 @@ /**

i18n: TimePickerI18n;
ready(): void;
_getInputElement(): any;
_setInvalid(invalid: boolean): void;
_getInputElement(): HTMLElement;
/**
* Override this method to define whether the given `invalid` state should be set.
*/
_shouldSetInvalid(_invalid: boolean): boolean;
/**
* Returns true if `value` is valid, and sets the `invalid` flag appropriately.
* Validates the field and sets the `invalid` property based on the result.
*
* @returns True if the value is valid and sets the `invalid` flag appropriately
* The method fires a `validated` event with the result of the validation.
*
* @returns True if the value is valid.
*/

@@ -250,22 +282,15 @@ validate(): boolean;

checkValidity(): boolean;
addEventListener<K extends keyof TimePickerEventMap>(
type: K,
listener: (this: TimePickerElement, ev: TimePickerEventMap[K]) => void,
options?: boolean | AddEventListenerOptions
): void;
removeEventListener<K extends keyof TimePickerEventMap>(
type: K,
listener: (this: TimePickerElement, ev: TimePickerEventMap[K]) => void,
options?: boolean | EventListenerOptions
): void;
}
declare global {
interface HTMLElementTagNameMap {
'vaadin-time-picker': TimePickerElement;
"vaadin-time-picker": TimePickerElement;
}
}
export { TimePickerElement };
export {TimePickerElement};
import {TimePickerI18n} from '../@types/interfaces';
import {TimePickerTime} from '../@types/interfaces';

262

src/vaadin-time-picker.js
/**
* @license
* Copyright (c) 2020 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';
@license
Copyright (c) 2018 Vaadin Ltd.
This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
*/
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
import { ControlStateMixin } from '@vaadin/vaadin-control-state-mixin/vaadin-control-state-mixin.js';
import '@vaadin/vaadin-combo-box/src/vaadin-combo-box-light.js';
import { IronA11yKeysBehavior } from '@polymer/iron-a11y-keys-behavior/iron-a11y-keys-behavior.js';
import './vaadin-time-picker-text-field.js';
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
import { ControlStateMixin } from '@vaadin/vaadin-control-state-mixin/vaadin-control-state-mixin.js';

@@ -58,78 +61,42 @@ /**

*
* @fires {Event} change - Fired when the user commits a value change.
* @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
* @fires {CustomEvent} value-changed - Fired when the `value` property changes.
*
* @extends HTMLElement
* @extends PolymerElement
* @mixes ElementMixin
* @mixes ControlStateMixin
* @mixes ThemableMixin
* @demo demo/index.html
*/
class TimePickerElement extends ElementMixin(ControlStateMixin(ThemableMixin(PolymerElement))) {
class TimePickerElement extends
ElementMixin(
ControlStateMixin(
ThemableMixin(PolymerElement))) {
static get template() {
return html`
<style>
:host {
display: inline-block;
}
<style>
:host {
display: inline-block;
}
:host([hidden]) {
display: none !important;
}
:host([hidden]) {
display: none !important;
}
[part~='toggle-button'] {
cursor: pointer;
}
[part~="toggle-button"] {
cursor: pointer;
}
.input {
width: 100%;
min-width: 0;
}
</style>
<vaadin-combo-box-light
allow-custom-value=""
item-label-path="value"
filtered-items="[[__dropdownItems]]"
disabled="[[disabled]]"
readonly="[[readonly]]"
auto-open-disabled="[[autoOpenDisabled]]"
dir="ltr"
theme$="[[theme]]"
>
<template> [[item.label]] </template>
<vaadin-time-picker-text-field
class="input"
name="[[name]]"
invalid="[[invalid]]"
autocomplete="off"
label="[[label]]"
required="[[required]]"
disabled="[[disabled]]"
prevent-invalid-input="[[preventInvalidInput]]"
pattern="[[pattern]]"
error-message="[[errorMessage]]"
autofocus="[[autofocus]]"
placeholder="[[placeholder]]"
readonly="[[readonly]]"
role="application"
aria-live="assertive"
min$="[[min]]"
max$="[[max]]"
aria-label$="[[label]]"
clear-button-visible="[[clearButtonVisible]]"
i18n="[[i18n]]"
helper-text="[[helperText]]"
theme$="[[theme]]"
>
<slot name="helper" slot="helper">[[helperText]]</slot>
<span
slot="suffix"
part="toggle-button"
class="toggle-button"
role="button"
aria-label$="[[i18n.selector]]"
></span>
</vaadin-time-picker-text-field>
</vaadin-combo-box-light>
`;
.input {
width: 100%;
min-width: 0;
}
</style>
<vaadin-combo-box-light allow-custom-value="" item-label-path="value" filtered-items="[[__dropdownItems]]" disabled="[[disabled]]" readonly="[[readonly]]" auto-open-disabled="[[autoOpenDisabled]]" dir="ltr" theme\$="[[theme]]" on-has-input-value-changed="__onComboBoxHasInputValueChanged">
<template>
[[item.label]]
</template>
<vaadin-time-picker-text-field class="input" name="[[name]]" invalid="[[invalid]]" autocomplete="off" label="[[label]]" required="[[required]]" disabled="[[disabled]]" prevent-invalid-input="[[preventInvalidInput]]" pattern="[[pattern]]" error-message="[[errorMessage]]" autofocus="[[autofocus]]" placeholder="[[placeholder]]" readonly="[[readonly]]" role="application" aria-live="assertive" min\$="[[min]]" max\$="[[max]]" aria-label\$="[[label]]" clear-button-visible="[[clearButtonVisible]]" i18n="[[i18n]]" helper-text="[[helperText]]" theme\$="[[theme]]">
<slot name="helper" slot="helper">[[helperText]]</slot>
<span slot="suffix" part="toggle-button" class="toggle-button" role="button" aria-label\$="[[i18n.selector]]"></span>
</vaadin-time-picker-text-field>
</vaadin-combo-box-light>
`;
}

@@ -141,3 +108,3 @@

static get version() {
return '3.0.0';
return '3.1.0';
}

@@ -269,3 +236,3 @@

type: String,
value: '00:00:00.000'
value: '00:00:00.000',
},

@@ -284,6 +251,16 @@

type: String,
value: '23:59:59.999'
value: '23:59:59.999',
},
/**
* When true, the input element has a non-empty value entered by the user.
* @protected
*/
_hasInputValue: {
type: Boolean,
value: false,
observer: '_hasInputValueChanged',
},
/**
* Specifies the number of valid intervals in a day used for

@@ -373,7 +350,7 @@ * configuring the items displayed in the selection box.

// Adding second and millisecond depends on resolution
time.seconds !== undefined && (timeString += `:${pad(time.seconds)}`);
time.milliseconds !== undefined && (timeString += `.${pad(time.milliseconds, '000')}`);
(time.seconds !== undefined) && (timeString += `:${pad(time.seconds)}`);
(time.milliseconds !== undefined) && (timeString += `.${pad(time.milliseconds, '000')}`);
return timeString;
},
parseTime: (text) => {
parseTime: text => {
// Parsing with RegExp to ensure correct format

@@ -384,5 +361,3 @@ const MATCH_HOURS = '(\\d|[0-1]\\d|2[0-3])';

const MATCH_MILLISECONDS = '(\\d{1,3})';
const re = new RegExp(
`^${MATCH_HOURS}(?::${MATCH_MINUTES}(?::${MATCH_SECONDS}(?:\\.${MATCH_MILLISECONDS})?)?)?$`
);
const re = new RegExp(`^${MATCH_HOURS}(?::${MATCH_MINUTES}(?::${MATCH_SECONDS}(?:\\.${MATCH_MILLISECONDS})?)?)?$`);
const parts = re.exec(text);

@@ -396,3 +371,3 @@ if (parts) {

}
return { hours: parts[1], minutes: parts[2], seconds: parts[3], milliseconds: parts[4] };
return {hours: parts[1], minutes: parts[2], seconds: parts[3], milliseconds: parts[4]};
}

@@ -409,3 +384,5 @@ },

static get observers() {
return ['__updateDropdownItems(i18n.*, min, max, step)'];
return [
'__updateDropdownItems(i18n.*, min, max, step)'
];
}

@@ -422,10 +399,10 @@

// thus querySelector in textField.focusElement raises an undefined exception on validate
this.__dropdownElement.addEventListener('value-changed', (e) => this.__onInputChange(e));
this.__dropdownElement.addEventListener('value-changed', e => this.__onInputChange(e));
this.__inputElement.addEventListener('keydown', this.__onKeyDown.bind(this));
// Validation listeners
this.__dropdownElement.addEventListener('change', () => this.validate());
this.__inputElement.addEventListener('blur', () => this.validate());
this.__dropdownElement.addEventListener('change', e => this.validate());
this.__inputElement.addEventListener('blur', e => this.validate());
this.__dropdownElement.addEventListener('change', (e) => {
this.__dropdownElement.addEventListener('change', e => {
// `vaadin-combo-box-light` forwards 'change' event from text-field.

@@ -439,6 +416,17 @@ // So we need to filter out in order to avoid duplicates.

/**
* Observer to notify about the change of private property.
*
* @private
*/
_hasInputValueChanged(hasValue, oldHasValue) {
if (hasValue || oldHasValue) {
this.dispatchEvent(new CustomEvent('has-input-value-changed'));
}
}
/** @private */
__validDayDivisor(step) {
// valid if undefined, or exact divides a day, or has millisecond resolution
return !step || (24 * 3600) % step === 0 || (step < 1 && ((step % 1) * 1000) % 1 === 0);
return !step || 24 * 3600 % step === 0 || (step < 1 && step % 1 * 1000 % 1 === 0);
}

@@ -448,2 +436,3 @@

__onKeyDown(e) {
if (this.readonly || this.disabled || this.__dropdownItems.length) {

@@ -453,7 +442,7 @@ return;

const stepResolution = (this.__validDayDivisor(this.step) && this.step) || 60;
const stepResolution = this.__validDayDivisor(this.step) && this.step || 60;
if (e.keyCode === 40) {
if (IronA11yKeysBehavior.keyboardEventMatchesKeys(e, 'down')) {
this.__onArrowPressWithStep(-stepResolution);
} else if (e.keyCode === 38) {
} else if (IronA11yKeysBehavior.keyboardEventMatchesKeys(e, 'up')) {
this.__onArrowPressWithStep(stepResolution);

@@ -473,3 +462,3 @@ }

__dispatchChange() {
this.dispatchEvent(new CustomEvent('change', { bubbles: true }));
this.dispatchEvent(new CustomEvent('change', {bubbles: true}));
}

@@ -482,6 +471,6 @@

__getMsec(obj) {
let result = ((obj && obj.hours) || 0) * 60 * 60 * 1000;
result += ((obj && obj.minutes) || 0) * 60 * 1000;
result += ((obj && obj.seconds) || 0) * 1000;
result += (obj && parseInt(obj.milliseconds)) || 0;
let result = (obj && obj.hours || 0) * 60 * 60 * 1000;
result += (obj && obj.minutes || 0) * 60 * 1000;
result += (obj && obj.seconds || 0) * 1000;
result += (obj && parseInt(obj.milliseconds) || 0);

@@ -496,6 +485,6 @@ return result;

__getSec(obj) {
let result = ((obj && obj.hours) || 0) * 60 * 60;
result += ((obj && obj.minutes) || 0) * 60;
result += (obj && obj.seconds) || 0;
result += (obj && obj.milliseconds / 1000) || 0;
let result = (obj && obj.hours || 0) * 60 * 60;
result += (obj && obj.minutes || 0) * 60;
result += (obj && obj.seconds || 0);
result += (obj && obj.milliseconds / 1000 || 0);

@@ -534,3 +523,3 @@ return result;

return { hours: hh < 24 ? hh : 0, minutes: mm, seconds: ss, milliseconds: msec };
return {hours: (hh < 24) ? hh : 0, minutes: mm, seconds: ss, milliseconds: msec};
}

@@ -577,3 +566,3 @@

const formatted = this.i18n.formatTime(timeObj);
generatedList.push({ label: formatted, value: formatted });
generatedList.push({label: formatted, value: formatted});
}

@@ -602,3 +591,3 @@

__valueChanged(value, oldValue) {
const parsedObj = (this.__memoValue = this.__parseISO(value));
const parsedObj = this.__memoValue = this.__parseISO(value);
const newValue = this.__formatISO(parsedObj) || '';

@@ -616,3 +605,3 @@

/** @private */
__onInputChange() {
__onInputChange(e) {
const parsedObj = this.i18n.parseTime(this.__dropdownElement.value);

@@ -670,3 +659,2 @@ const newValue = this.i18n.formatTime(parsedObj) || '';

}
return undefined;
}

@@ -698,3 +686,4 @@

get __dropdownElement() {
return this.__memoDropdown || (this.__memoDropdown = this.shadowRoot.querySelector('vaadin-combo-box-light'));
return this.__memoDropdown ||
(this.__memoDropdown = this.shadowRoot.querySelector('vaadin-combo-box-light'));
}

@@ -712,8 +701,43 @@

/**
* Returns true if `value` is valid, and sets the `invalid` flag appropriately.
* Synchronizes the `_hasInputValue` property with the internal combo-box's one.
*
* @return {boolean} True if the value is valid and sets the `invalid` flag appropriately
* @private
*/
__onComboBoxHasInputValueChanged() {
this._hasInputValue = this.__dropdownElement._hasInputValue;
}
/**
* @param {boolean} invalid
* @protected
*/
_setInvalid(invalid) {
if (this._shouldSetInvalid(invalid)) {
this.invalid = invalid;
}
}
/**
* Override this method to define whether the given `invalid` state should be set.
*
* @param {boolean} _invalid
* @return {boolean}
* @protected
*/
_shouldSetInvalid(_invalid) {
return true;
}
/**
* Validates the field and sets the `invalid` property based on the result.
*
* The method fires a `validated` event with the result of the validation.
*
* @return {boolean} True if the value is valid.
*/
validate() {
return !(this.invalid = !this.checkValidity());
const isValid = this.checkValidity();
this._setInvalid(!isValid);
this.dispatchEvent(new CustomEvent('validated', {detail: {valid: isValid}}));
return isValid;
}

@@ -732,6 +756,4 @@

return (
(!this.__getMsec(parsedMin) || this.__getMsec(time) >= this.__getMsec(parsedMin)) &&
(!this.__getMsec(parsedMax) || this.__getMsec(time) <= this.__getMsec(parsedMax))
);
return (!this.__getMsec(parsedMin) || this.__getMsec(time) >= this.__getMsec(parsedMin)) &&
(!this.__getMsec(parsedMax) || this.__getMsec(time) <= this.__getMsec(parsedMax));
}

@@ -747,13 +769,13 @@

checkValidity() {
return !!(
this.__inputElement.focusElement.checkValidity() &&
return !!(this.__inputElement.focusElement.checkValidity() &&
(!this.value || this._timeAllowed(this.i18n.parseTime(this.value))) &&
(!this.__dropdownElement.value || this.i18n.parseTime(this.__dropdownElement.value))
);
(!this.__dropdownElement.value || this.i18n.parseTime(this.__dropdownElement.value)));
}
/**
* Fired when the user commits a value change.
* Fired whenever the field is validated.
*
* @event change
* @event validated
* @param {Object} detail
* @param {boolean} detail.valid the result of the validation.
*/

@@ -760,0 +782,0 @@ }

22

theme/lumo/vaadin-time-picker-styles.js
import '@vaadin/vaadin-combo-box/theme/lumo/vaadin-combo-box-light.js';
import '@vaadin/vaadin-lumo-styles/mixins/field-button.js';
import '@vaadin/vaadin-lumo-styles/font-icons.js';
import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
registerStyles(
'vaadin-time-picker',
css`
[part~='toggle-button']::before {
content: var(--lumo-icons-clock);
}
`,
{ include: ['lumo-field-button'], moduleId: 'lumo-time-picker' }
);
const $_documentContainer = html`<dom-module id="lumo-time-picker" theme-for="vaadin-time-picker">
<template>
<style include="lumo-field-button">
[part~="toggle-button"]::before {
content: var(--lumo-icons-clock);
}
</style>
</template>
</dom-module>`;
document.head.appendChild($_documentContainer.content);

33

theme/lumo/vaadin-time-picker-text-field-styles.js
import '@vaadin/vaadin-text-field/theme/lumo/vaadin-text-field.js';
import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
registerStyles(
'vaadin-time-picker-text-field',
css`
:host([dir='rtl']) [part='value']:placeholder-shown,
:host([dir='rtl']) [part='input-field'] ::slotted(input:placeholder-shown) {
--_lumo-text-field-overflow-mask-image: none;
}
const $_documentContainer = html`<dom-module id="lumo-time-picker-text-field" theme-for="vaadin-time-picker-text-field">
<template>
<style>
:not(*):placeholder-shown, /* to prevent broken styles on IE */
:host([dir="rtl"]) [part="value"]:placeholder-shown,
:host([dir="rtl"]) [part="input-field"] ::slotted(input:placeholder-shown) {
--_lumo-text-field-overflow-mask-image: none;
}
:host([dir='rtl']) [part='value'],
:host([dir='rtl']) [part='input-field'] ::slotted(input) {
--_lumo-text-field-overflow-mask-image: linear-gradient(to left, transparent, #000 1.25em);
}
`,
{ moduleId: 'lumo-time-picker-text-field' }
);
:host([dir="rtl"]) [part="value"],
:host([dir="rtl"]) [part="input-field"] ::slotted(input) {
--_lumo-text-field-overflow-mask-image: linear-gradient(to left, transparent, #000 1.25em);
}
</style>
</template>
</dom-module>`;
document.head.appendChild($_documentContainer.content);

22

theme/material/vaadin-time-picker-styles.js

@@ -5,12 +5,14 @@ import '@vaadin/vaadin-combo-box/theme/material/vaadin-combo-box-light.js';

import '@vaadin/vaadin-material-styles/font-icons.js';
import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
registerStyles(
'vaadin-time-picker',
css`
[part~='toggle-button']::before {
content: var(--material-icons-clock);
}
`,
{ include: ['material-field-button'], moduleId: 'material-time-picker' }
);
const $_documentContainer = html`<dom-module id="material-time-picker" theme-for="vaadin-time-picker">
<template>
<style include="material-field-button">
[part~="toggle-button"]::before {
content: var(--material-icons-clock);
}
</style>
</template>
</dom-module>`;
document.head.appendChild($_documentContainer.content);

15

vaadin-time-picker.d.ts

@@ -0,2 +1,15 @@

/**
* DO NOT EDIT
*
* This file was automatically generated by
* https://github.com/Polymer/tools/tree/master/packages/gen-typescript-declarations
*
* To modify these typings, edit the source file(s):
* vaadin-time-picker.js
*/
// tslint:disable:variable-name Describing an API that's defined elsewhere.
export * from './src/vaadin-time-picker.js';
export * from './src/interfaces';
export * from './@types/interfaces';
src/interfaces.d.ts
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc