@neovici/cosmoz-datetime-input
Advanced tools
@neovici/cosmoz-datetime-input - npm Package Compare versions
Comparing version 3.1.0 to 3.2.0
@@ -1,237 +0,140 @@ | ||
| import '@webcomponents/shadycss/entrypoints/apply-shim'; | ||
| import { html, component, useEffect, useMemo } from 'haunted'; | ||
| import { notifyProperty } from '@neovici/cosmoz-utils/hooks/use-notify-property'; | ||
| import '@neovici/cosmoz-input'; | ||
| import '@polymer/paper-input/paper-input-container'; | ||
| /** | ||
| * The possible separators between date and time input values | ||
| */ | ||
| const separators = ['T', ' ']; | ||
| import { PolymerElement } from '@polymer/polymer/polymer-element'; | ||
| import { html } from '@polymer/polymer/lib/utils/html-tag'; | ||
| /** | ||
| * Returns a [date, time] or [date] array via a dateTime string. | ||
| * @param {String} aDateTime - The datetime or date string. | ||
| * @return {undefined} | ||
| */ | ||
| const getDateTimeParts = (aDateTime) => { | ||
| if (!aDateTime) { | ||
| return; | ||
| } | ||
| let parts; | ||
| separators.some((split) => { | ||
| if (!aDateTime.match(split)) { | ||
| return false; | ||
| } | ||
| parts = aDateTime.split(split); | ||
| return true; | ||
| }); | ||
| return parts || [aDateTime]; | ||
| }; | ||
| /** | ||
| * `cosmoz-datetime-input` | ||
| * | ||
| * Mimics `<input type="cosmoz-datetime-input">` | ||
| * | ||
| * @customElement | ||
| * @polymer | ||
| * @demo demo/index.html | ||
| * Gets the min/max-date/time properties via min/max-dateTime strings. | ||
| * @param {String} min - The min Date/DateTime. | ||
| * @param {String} max - the max Date/DateTime. | ||
| * @return {undefined} | ||
| */ | ||
| class CosmozDatetimeInput extends PolymerElement { | ||
| static get template() { | ||
| return html` | ||
| <style> | ||
| :host { | ||
| display: block; | ||
| } | ||
| .container { | ||
| display: -ms-flexbox; | ||
| display: -webkit-flex; | ||
| display: flex; | ||
| -ms-flex-direction: row; | ||
| -webkit-flex-direction: row; | ||
| flex-direction: row; | ||
| @apply --cosmoz-datetime-input-container; | ||
| } | ||
| input { | ||
| @apply --cosmoz-datetime-input-input; | ||
| } | ||
| label { | ||
| pointer-events: none; | ||
| @apply --cosmoz-datetime-input-label; | ||
| } | ||
| </style> | ||
| const getMinMax = (min, max) => { | ||
| const minParts = getDateTimeParts(min), | ||
| maxParts = getDateTimeParts(max); | ||
| <div class="container"> | ||
| <paper-input-container always-float-label> | ||
| <label hidden$="[[ !dateLabel ]]" slot="label" aria-hidden="true" for="dateInput">[[ dateLabel ]]</label> | ||
| <input id="dateInput" type="date" slot="input" value="{{ date::input }}" min$="[[ _minDate ]]" max$="[[ _maxDate ]]"> | ||
| </paper-input-container> | ||
| <paper-input-container always-float-label> | ||
| <label hidden$="[[ !timeLabel ]]" slot="label" aria-hidden="true" for="timeInput">[[ timeLabel ]]</label> | ||
| <input id="timeInput" type="time" slot="input" value="{{ time::input }}" step="[[ step ]]" min$="[[ _minTime ]]" max$="[[ _maxTime ]]"> | ||
| </paper-input-container> | ||
| </div> | ||
| `; | ||
| } | ||
| return { | ||
| minDate: Array.isArray(minParts) ? minParts.shift() : null, | ||
| minTime: Array.isArray(minParts) ? minParts.shift() : null, | ||
| maxDate: Array.isArray(maxParts) ? maxParts.shift() : null, | ||
| maxTime: Array.isArray(maxParts) ? maxParts.shift() : null, | ||
| }; | ||
| }; | ||
| static get is() { | ||
| return 'cosmoz-datetime-input'; | ||
| export const toValue = (date, time) => { | ||
| if (!date && !time) { | ||
| return; | ||
| } | ||
| /* eslint-disable-next-line max-lines-per-function */ | ||
| static get properties() { | ||
| return { | ||
| /** | ||
| * The date part of the value | ||
| */ | ||
| date: { | ||
| type: String, | ||
| notify: true | ||
| }, | ||
| /** | ||
| * The date part of the value | ||
| */ | ||
| time: { | ||
| type: String, | ||
| notify: true | ||
| }, | ||
| /** | ||
| * The step of the time input | ||
| */ | ||
| step: { | ||
| type: String, | ||
| value: '1' | ||
| }, | ||
| /** | ||
| * The date or datetime input value | ||
| */ | ||
| value: { | ||
| type: String, | ||
| notify: true, | ||
| observer: '_valueChanged' | ||
| }, | ||
| /** | ||
| * The label of the time input | ||
| */ | ||
| timeLabel: { | ||
| type: String | ||
| }, | ||
| /** | ||
| * The label of the date input | ||
| */ | ||
| dateLabel: { | ||
| type: String | ||
| }, | ||
| /** | ||
| * The max date/datetime of the inputs | ||
| */ | ||
| max: { | ||
| type: String | ||
| }, | ||
| /** | ||
| * The min date/datetime of the inputs | ||
| */ | ||
| min: { | ||
| type: String | ||
| }, | ||
| _minDate: { | ||
| type: String | ||
| }, | ||
| _maxDate: { | ||
| type: String | ||
| }, | ||
| _minTime: { | ||
| type: String | ||
| }, | ||
| _maxTime: { | ||
| type: String | ||
| }, | ||
| /** | ||
| * The possible separators between date and time input values | ||
| */ | ||
| _separators: { | ||
| type: Array, | ||
| value() { | ||
| return ['T', ' ']; | ||
| } | ||
| } | ||
| }; | ||
| if (!date && time) { | ||
| return `T${time}`; | ||
| } | ||
| static get observers() { | ||
| return [ | ||
| '_setValue(date, time)', | ||
| '_setMinMax(min, max)' | ||
| ]; | ||
| if (date && !time) { | ||
| return date; | ||
| } | ||
| return `${date}T${time}`; | ||
| }; | ||
| /** | ||
| * Sets the value property via a date and time string. | ||
| * @param {String} date - The date string. | ||
| * @param {String} time - The time string. | ||
| * @return {undefined} | ||
| */ | ||
| _setValue(date, time) { | ||
| if (!date && !time) { | ||
| this.value = null; | ||
| return; | ||
| } | ||
| if (!date && time) { | ||
| this.value = `T${ time }`; | ||
| return; | ||
| } | ||
| if (date && !time) { | ||
| this.value = date; | ||
| return; | ||
| } | ||
| this.value = `${ date }T${ time }`; | ||
| export const fromValue = (value) => { | ||
| if (!value) { | ||
| return; | ||
| } | ||
| /** | ||
| * Sets the date and time property via a value string. | ||
| * @param {String} value - The input value. Either datetime or date string. | ||
| * @return {undefined} | ||
| */ | ||
| _valueChanged(value) { | ||
| if (!value) { | ||
| this.date = ''; | ||
| this.time = ''; | ||
| return; | ||
| for (const split of separators) { | ||
| if (value.match(split)) { | ||
| const parts = value.split(split); | ||
| return { | ||
| date: parts.shift(), | ||
| time: parts.shift(), | ||
| }; | ||
| } | ||
| const isDatetime = this._separators.some(split => { | ||
| if (!value.match(split)) { | ||
| return false; | ||
| } | ||
| const parts = this._getDateTimeParts(value); | ||
| this.date = parts.shift(); | ||
| this.time = parts.shift(); | ||
| return true; | ||
| }); | ||
| if (!isDatetime) { | ||
| this.date = value; | ||
| } | ||
| this.dispatchEvent(new CustomEvent('cosmoz-datetime-input-value-changed', { | ||
| bubbles: true, | ||
| composed: true | ||
| })); | ||
| } | ||
| return { date: value }; | ||
| }; | ||
| /** | ||
| * Returns a [date, time] or [date] array via a dateTime string. | ||
| * @param {String} aDateTime - The datetime or date string. | ||
| * @return {undefined} | ||
| */ | ||
| _getDateTimeParts(aDateTime) { | ||
| if (!aDateTime) { | ||
| return; | ||
| } | ||
| /** | ||
| * `cosmoz-datetime-input` | ||
| * | ||
| * Mimics `<input type="cosmoz-datetime-input">` | ||
| * | ||
| * @customElement | ||
| * @polymer | ||
| * @demo demo/index.html | ||
| */ | ||
| let parts; | ||
| const DateTimeInput = (host) => { | ||
| const { dateLabel, timeLabel, min, max, step = '1', value } = host; | ||
| const { minDate, maxDate, minTime, maxTime } = useMemo( | ||
| () => getMinMax(min, max), | ||
| [min, max], | ||
| ); | ||
| const { date, time } = useMemo(() => fromValue(value) ?? {}, [value]); | ||
| useEffect(() => { | ||
| host.dispatchEvent( | ||
| new CustomEvent('cosmoz-datetime-input-value-changed', { | ||
| bubbles: true, | ||
| composed: true, | ||
| }), | ||
| ); | ||
| }, [value]); | ||
| this._separators.some(split => { | ||
| if (!aDateTime.match(split)) { | ||
| return false; | ||
| return html` | ||
| <style> | ||
| :host { | ||
| display: flex; | ||
| flex-direction: row; | ||
| } | ||
| parts = aDateTime.split(split); | ||
| return true; | ||
| }); | ||
| return parts || [aDateTime]; | ||
| } | ||
| /** | ||
| * Sets the min/max-date/time properties via min/max-dateTime strings. | ||
| * @param {String} min - The min Date/DateTime. | ||
| * @param {String} max - the max Date/DateTime. | ||
| * @return {undefined} | ||
| */ | ||
| _setMinMax(min, max) { | ||
| const minParts = this._getDateTimeParts(min), | ||
| maxParts = this._getDateTimeParts(max); | ||
| this._minDate = Array.isArray(minParts) ? minParts.shift() : null; | ||
| this._minTime = Array.isArray(minParts) ? minParts.shift() : null; | ||
| this._maxDate = Array.isArray(maxParts) ? maxParts.shift() : null; | ||
| this._maxTime = Array.isArray(maxParts) ? maxParts.shift() : null; | ||
| } | ||
| } | ||
| customElements.define(CosmozDatetimeInput.is, CosmozDatetimeInput); | ||
| </style> | ||
| <cosmoz-input | ||
| label="${dateLabel}" | ||
| type="date" | ||
| .value="${date}" | ||
| @value-changed="${(e) => | ||
| notifyProperty(host, 'value', toValue(e.target.value, time))}" | ||
| .min="${minDate}" | ||
| .max="${maxDate}" | ||
| ></cosmoz-input> | ||
| <cosmoz-input | ||
| label="${timeLabel}" | ||
| type="time" | ||
| .value="${time}" | ||
| @value-changed="${(e) => | ||
| notifyProperty(host, 'value', toValue(date, e.target.value))}" | ||
| step="${step}" | ||
| .min="${minTime}" | ||
| .max="${maxTime}" | ||
| ></cosmoz-input> | ||
| `; | ||
| }; | ||
| customElements.define( | ||
| 'cosmoz-datetime-input', | ||
| component(DateTimeInput, { | ||
| observedAttributes: ['date-label', 'time-label', 'min', 'max', 'step'], | ||
| }), | ||
| ); |
158
package.json
| { | ||
| "name": "@neovici/cosmoz-datetime-input", | ||
| "version": "3.1.0", | ||
| "description": "Mimics date input with broad browser support.", | ||
| "keywords": [ | ||
| "datepicker", | ||
| "datetime local", | ||
| "polymer", | ||
| "web-components" | ||
| ], | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "git+https://github.com/Neovici/cosmoz-datetime-input.git" | ||
| }, | ||
| "license": "Apache-2.0", | ||
| "author": "", | ||
| "main": "cosmoz-datetime-input.js", | ||
| "directories": { | ||
| "test": "test" | ||
| }, | ||
| "files": [ | ||
| "lib/", | ||
| "cosmoz-*.js" | ||
| ], | ||
| "scripts": { | ||
| "lint": "eslint --cache --ext .js .", | ||
| "start": "es-dev-server", | ||
| "test": "karma start --coverage", | ||
| "test:watch": "karma start --auto-watch=true --single-run=false", | ||
| "test:update-snapshots": "karma start --update-snapshots", | ||
| "test:prune-snapshots": "karma start --prune-snapshots", | ||
| "test:compatibility": "karma start --compatibility all --auto-watch=true --single-run=false" | ||
| }, | ||
| "release": { | ||
| "plugins": [ | ||
| "@semantic-release/commit-analyzer", | ||
| "@semantic-release/release-notes-generator", | ||
| "@semantic-release/changelog", | ||
| "@semantic-release/github", | ||
| "@semantic-release/npm", | ||
| "@semantic-release/git" | ||
| ], | ||
| "branch": "master", | ||
| "preset": "conventionalcommits" | ||
| }, | ||
| "publishConfig": { | ||
| "access": "public" | ||
| }, | ||
| "commitlint": { | ||
| "extends": [ | ||
| "@commitlint/config-conventional" | ||
| ] | ||
| }, | ||
| "husky": { | ||
| "hooks": { | ||
| "commit-msg": "commitlint -E HUSKY_GIT_PARAMS" | ||
| } | ||
| }, | ||
| "dependencies": { | ||
| "@polymer/paper-input": "^3.0.0", | ||
| "@polymer/polymer": "^3.0.0", | ||
| "@webcomponents/shadycss": "^1.9.1" | ||
| }, | ||
| "devDependencies": { | ||
| "@commitlint/cli": "^18", | ||
| "@commitlint/config-conventional": "^18", | ||
| "@neovici/eslint-config": "^1.2.2", | ||
| "@open-wc/testing": "^2.5.16", | ||
| "@open-wc/testing-karma": "^3.3.28", | ||
| "@polymer/iron-component-page": "^4.0.0", | ||
| "@polymer/iron-demo-helpers": "^3.0.0", | ||
| "@semantic-release/changelog": "^6.0.0", | ||
| "@semantic-release/git": "^10.0.0", | ||
| "@webcomponents/webcomponentsjs": "^2.4.3", | ||
| "babel-eslint": "^10.1.0", | ||
| "chai": "^4.2.0", | ||
| "deepmerge": "^4.2.2", | ||
| "eslint": "^6.8.0", | ||
| "eslint-plugin-html": "^6.0.2", | ||
| "eslint-plugin-import": "^2.20.2", | ||
| "eslint-plugin-mocha": "^6.3.0", | ||
| "husky": "^8.0.3", | ||
| "karma": "^5.0.9", | ||
| "karma-firefox-launcher": "^1.3.0", | ||
| "karma-sauce-launcher": "^4.0.0", | ||
| "semantic-release": "^22", | ||
| "sinon": "^17" | ||
| } | ||
| "name": "@neovici/cosmoz-datetime-input", | ||
| "version": "3.2.0", | ||
| "description": "Mimics date input with broad browser support.", | ||
| "keywords": [ | ||
| "datepicker", | ||
| "datetime local", | ||
| "polymer", | ||
| "web-components" | ||
| ], | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "git+https://github.com/Neovici/cosmoz-datetime-input.git" | ||
| }, | ||
| "license": "Apache-2.0", | ||
| "author": "", | ||
| "main": "cosmoz-datetime-input.js", | ||
| "directories": { | ||
| "test": "test" | ||
| }, | ||
| "files": [ | ||
| "lib/", | ||
| "cosmoz-*.js" | ||
| ], | ||
| "scripts": { | ||
| "lint": "eslint --cache .", | ||
| "start": "wds", | ||
| "test": "wtr --coverage", | ||
| "test:watch": "wtr --watch", | ||
| "prepare": "husky install", | ||
| "storybook:build": "build-storybook", | ||
| "storybook:deploy": "storybook-to-ghpages" | ||
| }, | ||
| "release": { | ||
| "plugins": [ | ||
| "@semantic-release/commit-analyzer", | ||
| "@semantic-release/release-notes-generator", | ||
| "@semantic-release/changelog", | ||
| "@semantic-release/github", | ||
| "@semantic-release/npm", | ||
| "@semantic-release/git" | ||
| ], | ||
| "branch": "master", | ||
| "preset": "conventionalcommits" | ||
| }, | ||
| "publishConfig": { | ||
| "access": "public" | ||
| }, | ||
| "commitlint": { | ||
| "extends": [ | ||
| "@commitlint/config-conventional" | ||
| ] | ||
| }, | ||
| "dependencies": { | ||
| "@neovici/cosmoz-input": "^3.16.0", | ||
| "@neovici/cosmoz-utils": "^5.39.0", | ||
| "haunted": "^5.0.0" | ||
| }, | ||
| "devDependencies": { | ||
| "@commitlint/cli": "^18.0.0", | ||
| "@commitlint/config-conventional": "^18.0.0", | ||
| "@neovici/cfg": "^1.13.1", | ||
| "@open-wc/testing": "^3.0.0", | ||
| "@semantic-release/changelog": "^6.0.0", | ||
| "@semantic-release/git": "^10.0.0", | ||
| "@storybook/storybook-deployer": "^2.8.5", | ||
| "@types/mocha": "^10.0.3", | ||
| "@web/dev-server-storybook": "^1.0.0", | ||
| "husky": "^8.0.0", | ||
| "semantic-release": "^22.0.0", | ||
| "sinon": "^17.0.0" | ||
| } | ||
| } |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Improved metrics
- Dev dependency count
- decreased by-47.83%
12
Worsened metrics
- Total package byte prevSize
- decreased by-13.42%
16412
- Lines of code
- decreased by-42.53%
127
Dependency changes
+ Addedhaunted@^5.0.0
+ Added@lit-labs/ssr-dom-shim@1.2.1(transitive)
+ Added@lit/reactive-element@1.6.3(transitive)
+ Added@neovici/cosmoz-input@3.18.0(transitive)
+ Added@neovici/cosmoz-utils@5.39.0(transitive)
+ Added@types/trusted-types@2.0.7(transitive)
+ Addedhaunted@5.0.0(transitive)
+ Addedlit@2.8.0(transitive)
+ Addedlit-element@3.3.3(transitive)
+ Addedlit-html@2.8.03.2.0(transitive)
- Removed@polymer/paper-input@^3.0.0
- Removed@polymer/polymer@^3.0.0
- Removed@webcomponents/shadycss@^1.9.1
- Removed@polymer/font-roboto@3.0.2(transitive)
- Removed@polymer/iron-a11y-announcer@3.2.0(transitive)
- Removed@polymer/iron-a11y-keys-behavior@3.0.1(transitive)
- Removed@polymer/iron-autogrow-textarea@3.0.3(transitive)
- Removed@polymer/iron-behaviors@3.0.1(transitive)
- Removed@polymer/iron-flex-layout@3.0.1(transitive)
- Removed@polymer/iron-form-element-behavior@3.0.1(transitive)
- Removed@polymer/iron-input@3.0.1(transitive)
- Removed@polymer/iron-meta@3.0.1(transitive)
- Removed@polymer/iron-validatable-behavior@3.0.1(transitive)
- Removed@polymer/paper-input@3.2.1(transitive)
- Removed@polymer/paper-styles@3.0.1(transitive)
- Removed@polymer/polymer@3.5.1(transitive)
- Removed@webcomponents/shadycss@1.11.2(transitive)