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

@vaadin/vaadin-custom-field

Package Overview
Dependencies
Maintainers
19
Versions
259
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@vaadin/vaadin-custom-field - npm Package Compare versions

Comparing version 22.0.0-alpha1 to 22.0.0-alpha10

58

package.json
{
"name": "@vaadin/vaadin-custom-field",
"version": "22.0.0-alpha1",
"version": "22.0.0-alpha10",
"publishConfig": {
"access": "public"
},
"description": "vaadin-custom-field",
"license": "Apache-2.0",
"repository": {
"type": "git",
"url": "https://github.com/vaadin/web-components.git",
"directory": "packages/vaadin-custom-field"
},
"author": "Vaadin Ltd",
"homepage": "https://vaadin.com/components",
"bugs": {
"url": "https://github.com/vaadin/web-components/issues"
},
"main": "vaadin-custom-field.js",
"module": "vaadin-custom-field.js",
"repository": "vaadin/vaadin-custom-field",
"files": [
"src",
"theme",
"vaadin-*.d.ts",
"vaadin-*.js"
],
"keywords": [

@@ -15,37 +34,6 @@ "Vaadin",

],
"author": "Vaadin Ltd",
"license": "Apache-2.0",
"bugs": {
"url": "https://github.com/vaadin/vaadin-custom-field/issues"
},
"homepage": "https://vaadin.com/components",
"files": [
"vaadin-*.d.ts",
"vaadin-*.js",
"src",
"theme"
],
"dependencies": {
"@polymer/polymer": "^3.0.0",
"@vaadin/vaadin-element-mixin": "^22.0.0-alpha1",
"@vaadin/vaadin-lumo-styles": "^22.0.0-alpha1",
"@vaadin/vaadin-material-styles": "^22.0.0-alpha1",
"@vaadin/vaadin-themable-mixin": "^22.0.0-alpha1"
"@vaadin/custom-field": "22.0.0-alpha10"
},
"devDependencies": {
"@esm-bundle/chai": "^4.1.5",
"@vaadin/testing-helpers": "^0.2.1",
"@vaadin/vaadin-date-picker": "^22.0.0-alpha1",
"@vaadin/vaadin-form-layout": "^22.0.0-alpha1",
"@vaadin/vaadin-list-box": "^22.0.0-alpha1",
"@vaadin/vaadin-select": "^22.0.0-alpha1",
"@vaadin/vaadin-template-renderer": "^22.0.0-alpha1",
"@vaadin/vaadin-text-field": "^22.0.0-alpha1",
"@vaadin/vaadin-time-picker": "^22.0.0-alpha1",
"sinon": "^9.2.0"
},
"publishConfig": {
"access": "public"
},
"gitHead": "c9694d6549bff1f7fffb9ece26178e57fc228a51"
"gitHead": "6d3055383b9c3c8306ea34c6f2e2087e63c49348"
}

45

README.md

@@ -10,8 +10,4 @@ # <vaadin-custom-field>

[![npm version](https://badgen.net/npm/v/@vaadin/vaadin-custom-field)](https://www.npmjs.com/package/@vaadin/vaadin-custom-field)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/vaadin/vaadin-custom-field)
[![Build Status](https://travis-ci.org/vaadin/vaadin-custom-field.svg?branch=master)](https://travis-ci.org/vaadin/vaadin-custom-field)
[![Coverage Status](https://coveralls.io/repos/github/vaadin/vaadin-custom-field/badge.svg?branch=master)](https://coveralls.io/github/vaadin/vaadin-custom-field?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-custom-field)
[![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/star/vaadin-custom-field-directory-urlidentifier.svg)](https://vaadin.com/directory/component/vaadinvaadin-custom-field)
[![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)

@@ -27,3 +23,2 @@ ```html

## Installation

@@ -63,42 +58,6 @@

## Running API docs and tests in a browser
1. Fork the `vaadin-custom-field` 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/) installed.
1. When in the `vaadin-custom-field` 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`.
1. Run `npm start`, browser will automatically open the component API documentation.
1. You can also open visual tests, for example:
- http://127.0.0.1:3000/test/visual/default.html
## Running tests from the command line
1. When in the `vaadin-custom-field` directory, run `polymer test`
## Following the coding style
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.
## Big Thanks
Cross-browser Testing Platform and Open Source <3 Provided by [Sauce Labs](https://saucelabs.com).
## Contributing
To contribute to the component, please read [the guideline](https://github.com/vaadin/vaadin-core/blob/master/CONTRIBUTING.md) first.
Read the [contributing guide](https://vaadin.com/docs/latest/guide/contributing/overview) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
## License

@@ -105,0 +64,0 @@

129

src/vaadin-custom-field.d.ts

@@ -1,121 +0,18 @@

import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
/**
* @license
* Copyright (c) 2021 Vaadin Ltd.
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
*/
import { CustomField } from '@vaadin/custom-field/src/vaadin-custom-field.js';
import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
/**
* @deprecated Import `CustomField` from `@vaadin/custom-field` instead.
*/
export type CustomFieldElement = CustomField;
import { CustomFieldMixin } from './vaadin-custom-field-mixin.js';
import { CustomFieldEventMap } from './interfaces';
/**
* `<vaadin-custom-field>` is a Web Component providing field wrapper functionality.
*
* ```
* <vaadin-custom-field label="Appointment time">
* <vaadin-date-picker></vaadin-date-picker>
* <vaadin-time-picker></vaadin-time-picker>
* </vaadin-custom-field>
* ```
*
* ### Styling
*
* You may set the attribute `disabled` or `readonly` on this component to make the label styles behave the same
* way as they would on a `<vaadin-text-field>` which is disabled or readonly.
*
* The following shadow DOM parts are available for styling:
*
* Part name | Description
* ----------------|----------------
* `label` | The label element
* `error-message` | The error message element
*
* The following state attributes are available for styling:
*
* Attribute | Description | Part name
* -------------|-------------|------------
* `has-label` | Set when the field has a label | :host
* `has-helper` | Set when the element has helper text or slot | :host
* `has-error-message` | Set when the element has an error message, regardless if the field is valid or not | :host
* `invalid` | Set when the field is invalid | :host
* `focused` | Set when the field contains focus | :host
*
* See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
*
* @fires {Event} change - Fired when the user commits a value change for any of the internal inputs.
* @fires {Event} internal-tab - Fired on Tab keydown triggered from the internal inputs, meaning focus will not leave the inputs.
* @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
* @fires {CustomEvent} value-changed - Fired when the `value` property changes.
* @deprecated Import `CustomField` from `@vaadin/custom-field` instead.
*/
declare class CustomFieldElement extends ElementMixin(ThemableMixin(CustomFieldMixin(HTMLElement))) {
/**
* String used for the label element.
*/
label: string;
export const CustomFieldElement: typeof CustomField;
/**
* The name of the control, which is submitted with the form data.
*/
name: string | null | undefined;
/**
* Specifies that the user must fill in a value.
*/
required: boolean | null | undefined;
/**
* The value of the field. When wrapping several inputs, it will contain `\t`
* (Tab character) as a delimiter indicating parts intended to be used as the
* corresponding inputs values. Use the [`i18n`](#/elements/vaadin-custom-field#property-i18n)
* property to customize this behavior.
*/
value: string | null | undefined;
/**
* This property is set to true when the control value is invalid.
*/
invalid: boolean;
/**
* Error to show when the input value is invalid.
* @attr {string} error-message
*/
errorMessage: string;
/**
* String used for the helper text.
* @attr {string} helper-text
*/
helperText: string | null;
/**
* Returns true if `value` is valid.
* `<iron-form>` uses this to check the validity or all its elements.
*
* @returns True if the value is valid.
*/
validate(): boolean;
/**
* Returns true if the current inputs values satisfy all constraints (if any)
*/
checkValidity(): boolean;
addEventListener<K extends keyof CustomFieldEventMap>(
type: K,
listener: (this: CustomFieldElement, ev: CustomFieldEventMap[K]) => void,
options?: boolean | AddEventListenerOptions
): void;
removeEventListener<K extends keyof CustomFieldEventMap>(
type: K,
listener: (this: CustomFieldElement, ev: CustomFieldEventMap[K]) => void,
options?: boolean | EventListenerOptions
): void;
}
declare global {
interface HTMLElementTagNameMap {
'vaadin-custom-field': CustomFieldElement;
}
}
export { CustomFieldElement };
export * from '@vaadin/custom-field/src/vaadin-custom-field.js';

290

src/vaadin-custom-field.js

@@ -6,291 +6,9 @@ /**

*/
import { PolymerElement, html } 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 { CustomFieldMixin } from './vaadin-custom-field-mixin.js';
import { CustomField } from '@vaadin/custom-field/src/vaadin-custom-field.js';
/**
* `<vaadin-custom-field>` is a Web Component providing field wrapper functionality.
*
* ```
* <vaadin-custom-field label="Appointment time">
* <vaadin-date-picker></vaadin-date-picker>
* <vaadin-time-picker></vaadin-time-picker>
* </vaadin-custom-field>
* ```
*
* ### Styling
*
* You may set the attribute `disabled` or `readonly` on this component to make the label styles behave the same
* way as they would on a `<vaadin-text-field>` which is disabled or readonly.
*
* The following shadow DOM parts are available for styling:
*
* Part name | Description
* ----------------|----------------
* `label` | The label element
* `error-message` | The error message element
*
* The following state attributes are available for styling:
*
* Attribute | Description | Part name
* -------------|-------------|------------
* `has-label` | Set when the field has a label | :host
* `has-helper` | Set when the element has helper text or slot | :host
* `has-error-message` | Set when the element has an error message, regardless if the field is valid or not | :host
* `invalid` | Set when the field is invalid | :host
* `focused` | Set when the field contains focus | :host
*
* See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
*
* @fires {Event} change - Fired when the user commits a value change for any of the internal inputs.
* @fires {Event} internal-tab - Fired on Tab keydown triggered from the internal inputs, meaning focus will not leave the inputs.
* @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
* @fires {CustomEvent} value-changed - Fired when the `value` property changes.
*
* @extends HTMLElement
* @mixes ElementMixin
* @mixes ThemableMixin
* @mixes CustomFieldMixin
* @deprecated Import `CustomField` from `@vaadin/custom-field` instead.
*/
class CustomFieldElement extends ElementMixin(CustomFieldMixin(ThemableMixin(PolymerElement))) {
static get template() {
return html`
<style>
:host {
display: inline-flex;
}
export const CustomFieldElement = CustomField;
:host::before {
content: '\\2003';
width: 0;
display: inline-block;
/* Size and position this element on the same vertical position as the input-field element
to make vertical align for the host element work as expected */
}
:host([hidden]) {
display: none !important;
}
.container {
width: 100%;
display: flex;
flex-direction: column;
}
.inputs-wrapper {
flex: none;
}
</style>
<div class="container">
<label part="label" on-click="focus" id="[[__labelId]]">[[label]]</label>
<div class="inputs-wrapper" on-change="__updateValue">
<slot id="slot"></slot>
</div>
<div part="helper-text" id="[[__helperTextId]]">
<slot name="helper" id="helperSlot">[[helperText]]</slot>
</div>
<div
part="error-message"
id="[[__errorId]]"
aria-live="assertive"
aria-hidden$="[[__getErrorMessageAriaHidden(invalid, errorMessage, __errorId)]]"
>
[[errorMessage]]
</div>
</div>
`;
}
static get is() {
return 'vaadin-custom-field';
}
static get version() {
return '22.0.0-alpha1';
}
static get properties() {
return {
/**
* String used for the label element.
* @type {string}
*/
label: {
type: String,
value: '',
observer: '_labelChanged'
},
/**
* The name of the control, which is submitted with the form data.
*/
name: String,
/**
* Specifies that the user must fill in a value.
*/
required: {
type: Boolean,
reflectToAttribute: true
},
/**
* The value of the field. When wrapping several inputs, it will contain `\t`
* (Tab character) as a delimiter indicating parts intended to be used as the
* corresponding inputs values. Use the [`i18n`](#/elements/vaadin-custom-field#property-i18n)
* property to customize this behavior.
*/
value: {
type: String,
observer: '__valueChanged',
notify: true
},
/**
* This property is set to true when the control value is invalid.
* @type {boolean}
*/
invalid: {
type: Boolean,
reflectToAttribute: true,
notify: true,
value: false,
observer: '__invalidChanged'
},
/**
* Error to show when the input value is invalid.
* @attr {string} error-message
* @type {string}
*/
errorMessage: {
type: String,
value: '',
observer: '__errorMessageChanged'
},
/**
* String used for the helper text.
* @attr {string} helper-text
* @type {string | null}
*/
helperText: {
type: String,
value: '',
observer: '__helperTextChanged'
}
};
}
static get observers() {
return [
'__getActiveErrorId(invalid, errorMessage, __errorId, helperText, __helperTextId, __hasSlottedHelper)',
'__getActiveLabelId(label, __labelId)',
'__toggleHasValue(value)'
];
}
/** @private */
__invalidChanged(invalid) {
this.__setOrToggleAttribute('aria-invalid', invalid, this);
}
/** @private */
__errorMessageChanged(errorMessage) {
this.__setOrToggleAttribute('has-error-message', !!errorMessage, this);
}
/** @private */
__helperTextChanged(helperText) {
this.__setOrToggleAttribute('has-helper', !!helperText, this);
}
/** @private */
__toggleHasValue(value) {
if (value !== null && value.trim() !== '') {
this.setAttribute('has-value', '');
} else {
this.removeAttribute('has-value');
}
}
/** @private */
_labelChanged(label) {
if (label !== '' && label != null) {
this.setAttribute('has-label', '');
} else {
this.removeAttribute('has-label');
}
}
/**
* Returns true if `value` is valid.
* `<iron-form>` uses this to check the validity or all its elements.
*
* @return {boolean} True if the value is valid.
*/
validate() {
return !(this.invalid = !this.checkValidity());
}
/**
* Returns true if the current inputs values satisfy all constraints (if any)
* @return {boolean}
*/
checkValidity() {
const invalidFields = this.inputs.filter((input) => !(input.validate || input.checkValidity).call(input));
if (invalidFields.length || (this.required && !this.value.trim())) {
// Either 1. one of the input fields is invalid or
// 2. the custom field itself is required but doesn't have a value
return false;
}
return true;
}
/** @private */
__setOrToggleAttribute(name, value, node) {
if (!name || !node) {
return;
}
if (node.hasAttribute(name) === !value) {
if (value) {
node.setAttribute(name, typeof value === 'boolean' ? '' : value);
} else {
node.removeAttribute(name);
}
}
}
/** @private */
__getActiveErrorId(invalid, errorMessage, errorId, helperText, helperTextId, hasSlottedHelper) {
const ids = [];
if (helperText || hasSlottedHelper) {
ids.push(helperTextId);
}
if (errorMessage && invalid) {
ids.push(errorId);
}
if (ids.length > 0) {
this.setAttribute('aria-describedby', ids.join(' '));
} else {
this.removeAttribute('aria-describedby');
}
}
/** @private */
__getActiveLabelId(label, labelId) {
this.__setOrToggleAttribute('aria-labelledby', label ? labelId : undefined, this);
}
/** @private */
__getErrorMessageAriaHidden(invalid, errorMessage, errorId) {
return (!(errorMessage && invalid ? errorId : undefined)).toString();
}
}
customElements.define(CustomFieldElement.is, CustomFieldElement);
export { CustomFieldElement };
export * from '@vaadin/custom-field/src/vaadin-custom-field.js';

3

theme/lumo/vaadin-custom-field.js

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

import './vaadin-custom-field-styles.js';
import '../../src/vaadin-custom-field.js';
import '@vaadin/custom-field/theme/lumo/vaadin-custom-field.js';

3

theme/material/vaadin-custom-field.js

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

import './vaadin-custom-field-styles.js';
import '../../src/vaadin-custom-field.js';
import '@vaadin/custom-field/theme/material/vaadin-custom-field.js';

1

vaadin-custom-field.d.ts
export * from './src/vaadin-custom-field.js';
export * from './src/interfaces';
src/interfaces.d.ts
src/vaadin-custom-field-mixin.d.ts
src/vaadin-custom-field-mixin.js
theme/lumo/vaadin-custom-field-styles.js
theme/material/vaadin-custom-field-styles.js
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