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

tangy-form

Package Overview
Dependencies
Maintainers
1
Versions
239
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

tangy-form - npm Package Compare versions

Comparing version 2.0.1 to 2.1.0

2

package.json
{
"name": "tangy-form",
"description": "A form element for lazy loaded multipage forms",
"version": "2.0.1",
"version": "2.1.0",
"main": "tangy-form.js",

@@ -6,0 +6,0 @@ "scripts": {

12

README.md

@@ -11,3 +11,15 @@ # \<tangy-form\>

<!--
```
<custom-element-demo>
<template>
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<script src="./tangy-form.js"></script>
<next-code-block></next-code-block>
</template>
</custom-element-demo>
```
-->
```html
<tangy-form id="my-form">

@@ -14,0 +26,0 @@ <tangy-form-item id="item1">

9

tangy-acasi.js

@@ -14,3 +14,10 @@ import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';

constructor() {
super()
this.t = {
'replay': 'replay'
}
}
static get template() {

@@ -45,3 +52,3 @@ return html`

<label for="group">[[label]]</label>
<paper-button id="replay" raised class="indigo" on-click="replay">replay</paper-button>
<paper-button id="replay" raised class="indigo" on-click="replay">[[t.replay]]</paper-button>
<paper-radio-group name="group" id="paper-radio-group">

@@ -48,0 +55,0 @@ </paper-radio-group>

60

tangy-checkboxes.js

@@ -15,34 +15,42 @@ import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';

class TangyCheckboxes extends PolymerElement {
static get is() { return 'tangy-checkboxes'; }
constructor() {
super()
this.t = {
'selectOneOrMore': t('Select one or more')
}
}
static get template() {
return html`
<style include="tangy-common-styles"></style>
<style include="tangy-element-styles"></style>
<style>
<style include="tangy-common-styles"></style>
<style include="tangy-element-styles"></style>
<style>
:host {
@apply --tangy-font-common-base;
}
tangy-checkbox {
margin-top: 15px;
margin-right: 25px;
}
span {
font-size: .75em;
display: block;
}
</style>
<div class="container">
<label for="group">[[label]]</label>
<span class="secondary_color">Select one or more</span>
<div id="checkboxes">
:host {
@apply --tangy-font-common-base;
}
tangy-checkbox {
margin-top: 15px;
margin-right: 25px;
}
span {
font-size: .75em;
display: block;
}
</style>
<div class="container">
<label for="group">[[label]]</label>
<span class="secondary_color">[[t.selectOneOrMore]]</span>
<div id="checkboxes">
</div>
</div>
</div>
`;
`;
}
static get is() { return 'tangy-checkboxes'; }
static get properties() {

@@ -49,0 +57,0 @@ return {

299

tangy-form-item.js

@@ -17,161 +17,162 @@ import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';

static get template() {
return html`
<style include="tangy-common-styles"></style>
<style>
:host {
margin: 15px;
}
/*
* Card
*/
paper-card {
-webkit-transition: .4s;
-moz-transition: .4s;
-ms-transition: .4s;
-o-transition: .4s;
display: block;
max-width: 325px;
margin: /*30px*/ auto;
}
:host([open]) paper-card {
-webkit-transition: .4s;
-moz-transition: .4s;
-ms-transition: .4s;
-o-transition: .4s;
display: block;
max-width: 920px;
}
:host([disabled]) paper-card {
--paper-card-background-color: gray !important;
--paper-card-header-color: #CCC;
}
:host([hidden]) {
display: none;
}
static get is() { return 'tangy-form-item'; }
/*
* Action Buttons
*/
.card-actions {
height: 45px;
margin-bottom: 100px;
}
:host([open]) #open {
display: none;
}
:host([locked]) #complete {
display: none;
}
:host(:not([open])) #close {
display: none;
}
:host([disabled]) #open {
display: none;
}
label.heading {
font-size: 21px !important;
margin-bottom: 20px;
display: block;
color: var(--primary-color);
font-weight: 700;
}
constructor() {
super()
if (this.querySelector('template')) {
this.template = this.querySelector('template').innerHTML
}
this.t = {
open: t('open'),
close: t('close'),
save: t('save'),
submit: t('submit')
}
#next {
float: right;
width: 84px;
}
#next iron-icon {
margin: 0px 0px 0px 21px;
}
}
#back {
float: left;
width: 84px;
}
#back iron-icon {
margin: 0px 0px 0px 21px;
}
static get template() {
return html`
<style include="tangy-common-styles"></style>
<style>
:host {
margin: 15px;
}
/*
* Card
*/
paper-card {
-webkit-transition: .4s;
-moz-transition: .4s;
-ms-transition: .4s;
-o-transition: .4s;
display: block;
max-width: 325px;
margin: /*30px*/ auto;
}
:host([open]) paper-card {
-webkit-transition: .4s;
-moz-transition: .4s;
-ms-transition: .4s;
-o-transition: .4s;
display: block;
max-width: 920px;
}
:host([disabled]) paper-card {
--paper-card-background-color: gray !important;
--paper-card-header-color: #CCC;
}
:host([hidden]) {
display: none;
}
.card-actions paper-button {
font-size: .8em;
line-height: 1em;
}
/*
* Action Buttons
*/
.card-actions {
height: 45px;
margin-bottom: 100px;
}
:host([open]) #open {
display: none;
}
:host([locked]) #complete {
display: none;
}
:host(:not([open])) #close {
display: none;
}
:host([disabled]) #open {
display: none;
}
label.heading {
font-size: 21px !important;
margin-bottom: 20px;
display: block;
color: var(--primary-color);
font-weight: 700;
}
</style>
#next {
float: right;
width: 84px;
}
#next iron-icon {
margin: 0px 0px 0px 21px;
}
<paper-card id="card" class="shrunk">
#back {
float: left;
width: 84px;
}
#back iron-icon {
margin: 0px 0px 0px 21px;
}
<div class="card-content">
<label class="heading">[[title]]</label>
<div id="content"></div>
<slot></slot>
</div>
<div class="card-actions">
<template is="dom-if" if="{{!hideButtons}}">
<paper-button id="open" on-click="onOpenButtonPress">Open</paper-button>
<template is="dom-if" if="{{!locked}}">
<paper-button id="close" on-click="onCloseButtonPress">Save</paper-button>
</template>
<template is="dom-if" if="{{locked}}">
<paper-button id="close" on-click="onCloseButtonPress">Close</paper-button>
</template>
</template>
<template is="dom-if" if="{{open}}">
<template is="dom-if" if="{{rightToLeft}}">
<template is="dom-if" if="{{showCompleteButton}}">
<paper-button id="complete" on-click="clickedComplete" style="float:left">
submit
<paper-button>
</template>
<template is="dom-if" if="{{!hideNextButton}}">
<paper-button id="back" on-click="next" >
<iron-icon icon="arrow-back"></iron-icon>
<paper-button>
</template>
<template is="dom-if" if="{{!hideBackButton}}">
<paper-button id="next" on-click="back" >
<iron-icon icon="arrow-forward"></iron-icon>
<paper-button>
</template>
</template>
<template is="dom-if" if="{{!rightToLeft}}">
<template is="dom-if" if="{{!hideBackButton}}">
<paper-button id="back" on-click="back" >
<iron-icon icon="arrow-back"></iron-icon>
<paper-button>
</template>
<template is="dom-if" if="{{!hideNextButton}}">
<paper-button id="next" on-click="next" >
<iron-icon icon="arrow-forward"></iron-icon>
<paper-button>
</template>
<template is="dom-if" if="{{showCompleteButton}}">
<paper-button id="complete" on-click="clickedComplete" style="float:right" >
submit
<paper-button>
</template>
</template>
</template>
<template is="dom-if" if="{{!incomplete}}">
<iron-icon style="color: var(--primary-color); float: right; margin-top: 10px" icon="icons:check-circle"></iron-icon>
</template>
</div>
</paper-card>`
.card-actions paper-button {
font-size: .8em;
line-height: 1em;
}
</style>
<paper-card id="card" class="shrunk">
<div class="card-content">
<label class="heading">[[title]]</label>
<div id="content"></div>
<slot></slot>
</div>
<div class="card-actions">
<template is="dom-if" if="{{!hideButtons}}">
<paper-button id="open" on-click="onOpenButtonPress">[[t.open]]</paper-button>
<template is="dom-if" if="{{!locked}}">
<paper-button id="close" on-click="onCloseButtonPress">[[t.save]]</paper-button>
</template>
<template is="dom-if" if="{{locked}}">
<paper-button id="close" on-click="onCloseButtonPress">[[t.close]]</paper-button>
</template>
</template>
<template is="dom-if" if="{{open}}">
<template is="dom-if" if="{{rightToLeft}}">
<template is="dom-if" if="{{showCompleteButton}}">
<paper-button id="complete" on-click="clickedComplete" style="float:left">
[[t.submit]]
<paper-button>
</template>
<template is="dom-if" if="{{!hideNextButton}}">
<paper-button id="back" on-click="next" >
<iron-icon icon="arrow-back"></iron-icon>
<paper-button>
</template>
<template is="dom-if" if="{{!hideBackButton}}">
<paper-button id="next" on-click="back" >
<iron-icon icon="arrow-forward"></iron-icon>
<paper-button>
</template>
</template>
<template is="dom-if" if="{{!rightToLeft}}">
<template is="dom-if" if="{{!hideBackButton}}">
<paper-button id="back" on-click="back" >
<iron-icon icon="arrow-back"></iron-icon>
<paper-button>
</template>
<template is="dom-if" if="{{!hideNextButton}}">
<paper-button id="next" on-click="next" >
<iron-icon icon="arrow-forward"></iron-icon>
<paper-button>
</template>
<template is="dom-if" if="{{showCompleteButton}}">
<paper-button id="complete" on-click="clickedComplete" style="float:right" >
[[t.submit]]
<paper-button>
</template>
</template>
</template>
<template is="dom-if" if="{{!incomplete}}">
<iron-icon style="color: var(--primary-color); float: right; margin-top: 10px" icon="icons:check-circle"></iron-icon>
</template>
</div>
</paper-card>
`
}
static get is() { return 'tangy-form-item'; }
constructor() {
super()
if (this.querySelector('template')) {
this.template = this.querySelector('template').innerHTML
}
}
static get properties() {

@@ -178,0 +179,0 @@ return {

45

tangy-form.js
import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
import {afterNextRender} from '@polymer/polymer/lib/utils/render-status.js';
import './cat.js'

@@ -8,5 +9,2 @@ import './tangy-form-item.js'

import { tangyFormReducer } from './tangy-form-reducer.js'
// Redux not currently importing correctly. Make it a global.
//window.process = { env: {NODE_ENV: 'production'}}
//import { createStore, compose as origCompose, applyMiddleware, combineReducers } from 'redux';

@@ -32,2 +30,3 @@ // <!-- Tangy Custom Inputs Elements -->

import { TangyFormResponseModel } from './tangy-form-response-model.js';
import { TangyFormItemHelpers } from './tangy-form-item-callback-helpers.js'

@@ -64,2 +63,3 @@

this.store.dispatch({ type: 'FORM_OPEN', response: value })
this.fireHook('on-open')
}

@@ -351,9 +351,6 @@

let form = this
eval(this.onSubmit)
this.fireHook('on-submit')
})
}
// Flag for first render.
this.hasNotYetFocused = true
afterNextRender(this, function() {

@@ -394,2 +391,3 @@ if (this._responseHasBeenSet === false) {

this.focusOnNextItem()
this.fireHook('on-change')
}

@@ -403,2 +401,3 @@

this.focusOnPreviousItem()
this.fireHook('on-change')
}

@@ -457,4 +456,3 @@

// Find item to scroll to.
if (state.focusIndex !== this.previousState.focusIndex || (this.linearMode && this.hasNotYetFocused && (state.form && !state.form.complete))) {
this.hasNotYetFocused = false
if (state.focusIndex !== this.previousState.focusIndex) {
setTimeout(() => {

@@ -496,2 +494,31 @@ if (items[state.focusIndex]) items[state.focusIndex].scrollIntoView({ behavior: 'smooth', block: 'start' })

fireHook(hook, event) {
// If locked, don't run any logic.
if (this.locked) return
// Prepare some helper variables.
let state = this.store.getState()
// Inputs.
let inputsArray = []
state.items.forEach(item => inputsArray = [...inputsArray, ...item.inputs])
let inputsKeyedByName = {}
inputsArray.forEach(input => inputsKeyedByName[input.name] = input)
let inputs = inputsKeyedByName
// Items.
let items = {}
state.items.forEach(item => items[item.name] = item)
let inputEls = this.shadowRoot.querySelectorAll('[name]')
let tangyFormStore = this.store
// Declare namespaces for helper functions for the eval context in form.on-change.
// We have to do this because bundlers modify the names of things that are imported
// but do not update the evaled code because it knows not of it.
let helpers = new TangyFormItemHelpers(this)
let getValue = (name) => helpers.getValue(name)
let inputHide = (name) => helpers.inputHide(name)
let inputShow = (name) => helpers.inputShow(name)
let inputDisable = (name) => helpers.inputDisable(name)
let inputEnable = (name) => helpers.inputEnable(name)
let itemsPerMinute = (input) => helpers.itemsPerMinute(input)
eval(this.getAttribute(hook))
}
focusOnPreviousItem(event) {

@@ -498,0 +525,0 @@ // Dispatch action.

168

tangy-gps.js

@@ -16,84 +16,96 @@ import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';

class TangyGps extends PolymerElement {
static get is() { return 'tangy-gps'; }
constructor() {
super()
this.t = {
'searching': t('Searching'),
'latitude': t('Latitude'),
'longitude': t('Longitude'),
'accuracy': t('Accuracy'),
'accuracyLevel': t('Accuracy Level'),
'distanceFromReference': t('Distance from reference')
}
}
static get template() {
return html`
<style include="tangy-common-styles"></style>
<style include="tangy-element-styles"></style>
<style>
:host {
display: block;
}
:host([required]:not([disabled])) label::before {
content: "*";
color: red;
position: absolute;
top: 4px;
right: 5px;
}
:host([hide-coordinates]) #lat-long {
display:none;
}
:host([in-geofence]) .geofence-message {
display: inline;
animation: fadein 2s;
}
:host([invalid]) .geofence-message {
display: inline;
animation: fadein 2s;
background-color: red;
}
.geofence-message-container {
text-align: center;
margin-top: 15px;
}
.geofence-message {
display: none;
margin: 5px; 0px 0px;
background: #28a745;
color: white;
padding: 5px;
border-radius: 5px;
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
.label {
font-weight: bold;
}
.coordinates {
margin: 5px 15px;
}
</style>
<div class="coordinates">
<div id="lat-long">
<span class="label">Latitude:</span> [[currentLatitude]] <br>
<span class="label">Longitude:</span> [[currentLongitude]] <br>
<div>
<template is="dom-if" if="[[currentLatitude]]">
<span class="label">Accuracy:</span> [[currentAccuracy]] meters<br>
<span class="label">Accuracy Level:</span> [[accuracyLevel]]
</template>
<template is="dom-if" if="{{hasDelta}}">
<br> <span class="label">Distance from reference:</span> [[currentDelta]] meters
</template>
</div>
<div>
<template is="dom-if" if="[[!currentLatitude]]">
Searching...
</template>
<div class="geofence-message-container">
<div class="geofence-message"> [[geofenceMessage]]</div>
</div>
</div>
</div>
<slot></slot>
</div>
`;
<style include="tangy-common-styles"></style>
<style include="tangy-element-styles"></style>
<style>
:host {
display: block;
}
:host([required]:not([disabled])) label::before {
content: "*";
color: red;
position: absolute;
top: 4px;
right: 5px;
}
:host([hide-coordinates]) #lat-long {
display:none;
}
:host([in-geofence]) .geofence-message {
display: inline;
animation: fadein 2s;
}
:host([invalid]) .geofence-message {
display: inline;
animation: fadein 2s;
background-color: red;
}
.geofence-message-container {
text-align: center;
margin-top: 15px;
}
.geofence-message {
display: none;
margin: 5px; 0px 0px;
background: #28a745;
color: white;
padding: 5px;
border-radius: 5px;
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
.label {
font-weight: bold;
}
.coordinates {
margin: 5px 15px;
}
</style>
<div class="coordinates">
<div id="lat-long">
<span class="label">[[t.latitude]]:</span> [[currentLatitude]] <br>
<span class="label">[[t.longitude]]:</span> [[currentLongitude]] <br>
<div>
<template is="dom-if" if="[[currentLatitude]]">
<span class="label">[[t.accuracy]]:</span> [[currentAccuracy]] meters<br>
<span class="label">[[t.accuracyLevel]]:</span> [[accuracyLevel]]
</template>
<template is="dom-if" if="{{hasDelta}}">
<br> <span class="label">[[t.disanceFromReference]]:</span> [[currentDelta]] meters
</template>
</div>
<div>
<template is="dom-if" if="[[!currentLatitude]]">
[[t.searching]]...
</template>
<div class="geofence-message-container">
<div class="geofence-message"> [[geofenceMessage]]</div>
</div>
</div>
</div>
<slot></slot>
</div>
`;
}
static get is() { return 'tangy-gps'; }
static get properties() {

@@ -100,0 +112,0 @@ return {

7

tangy-input.js

@@ -18,2 +18,5 @@ import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';

super()
this.t = {
helpText: 'Enter your response to above question here'
}
this.useThis = (this.getAttribute('type') === 'email' ||

@@ -45,3 +48,3 @@ this.getAttribute('type') === 'number' ||

id="input"
label="Enter your response to above question here"
label="[[t.helpText]]"
type="[[type]]"

@@ -57,3 +60,3 @@ error-message="[[errorMessage]]"

id="input"
label="Enter your response to above question here"
label="[[t.helpText]]"
type="[[type]]"

@@ -60,0 +63,0 @@ error-message="[[errorMessage]]"

16

tangy-location.js

@@ -15,2 +15,10 @@ import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';

class TangyLocation extends PolymerElement {
static get is() { return 'tangy-location'; }
constructor() {
super()
this.localList = undefined
}
static get template() {

@@ -441,3 +449,2 @@ return html`

static get is() { return 'tangy-location'; }
static get properties() {

@@ -489,7 +496,2 @@ return {

constructor() {
super()
this.localList = undefined
}
async connectedCallback() {

@@ -546,3 +548,3 @@ super.connectedCallback();

>
<option value="" default selected ${(options[selection.level].length === 0) ? 'hidden' : ''} disabled='disabled'>Pick a ${selection.level} </option>
<option value="" default selected ${(options[selection.level].length === 0) ? 'hidden' : ''} disabled='disabled'>${t('Pick a')} ${selection.level} </option>

@@ -549,0 +551,0 @@ ${options[selection.level].map((option, i) => `

46

tangy-radio-buttons.js

@@ -14,25 +14,34 @@ import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';

class TangyRadioButtons extends PolymerElement {
static get is() { return 'tangy-radio-buttons'; }
constructor() {
super()
this.value = []
this.t = {
'selectOnlyOne': t('Select only one')
}
}
static get template() {
return html`
<style include="tangy-element-styles"></style>
<style include="tangy-common-styles"></style>
<style include="tangy-element-styles"></style>
<style include="tangy-common-styles"></style>
<style>
span {
font-size: .75em;
display: block;
}
</style>
<style>
span {
font-size: .75em;
display: block;
}
</style>
<div class="container">
<label for="group">[[label]]</label>
<span class="secondary_color">Select only One</span>
<div id="container"></div>
</div>
`;
<div class="container">
<label for="group">[[label]]</label>
<span class="secondary_color">[[t.selectOnlyOne]]</span>
<div id="container"></div>
</div>
`;
}
static get is() { return 'tangy-radio-buttons'; }
static get properties() {

@@ -91,7 +100,2 @@ return {

constructor() {
super()
this.value = []
}
connectedCallback() {

@@ -98,0 +102,0 @@ super.connectedCallback()

25

tangy-timed.js

@@ -28,2 +28,12 @@ import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';

class TangyTimed extends PolymerElement {
constructor() {
super()
this.t = {
mark: t('MARK'),
lastAttempted: t('LAST ATTEMPTED'),
start: t('START'),
stop: t('STOP'),
reset: t('RESET')
}
}
static get template() {

@@ -150,3 +160,3 @@ return html`

<template is="dom-if" if="{{showLabels}}">
[[markLabel]]
[[t.mark]]
</template>

@@ -157,3 +167,3 @@ </paper-button>

<template is="dom-if" if="{{showLabels}}">
[[lastAttemptedLabel]]
[[t.lastAttempted]]
</template>

@@ -167,3 +177,3 @@ </paper-button>

<template is="dom-if" if="{{showLabels}}">
[[startLabel]]
[[t.start]]
</template>

@@ -174,3 +184,3 @@ </paper-button>

<template is="dom-if" if="{{showLabels}}">
[[stopLabel]]
[[t.stop]]
</template>

@@ -181,3 +191,3 @@ </paper-button>

<template is="dom-if" if="{{showLabels}}">
[[resetLabel]]
[[t.reset]]
</template>

@@ -281,7 +291,2 @@ </paper-button>

}, 400)
this.markLabel = t('MARK')
this.lastAttemptedLabel = t('LAST ATTEMPTED')
this.startLabel = t('START')
this.stopLabel = t('STOP')
this.resetLabel = t('RESET')
}

@@ -288,0 +293,0 @@ 

demo/index.html

Sorry, the diff of this file is not supported yet

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