Skip to content

Commit

Permalink
added more properties for validation
Browse files Browse the repository at this point in the history
  • Loading branch information
Thomas Cybulski committed Oct 12, 2017
1 parent 86110ab commit f0142b0
Show file tree
Hide file tree
Showing 4 changed files with 230 additions and 147 deletions.
Binary file modified analysis.json
View file
Binary file not shown.
275 changes: 138 additions & 137 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,193 +2,194 @@
<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">

<title>paper-chip demo</title>

<script src="../../webcomponentsjs/webcomponents-loader.js"></script>

<link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
<link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
<link rel="import" href="../../iron-icons/iron-icons.html">
<link rel="import" href="../../paper-input/paper-input.html">
<link rel="import" href="../../paper-toast/paper-toast.html">
<link rel="import" href="../paper-chip.html">
<link rel="import" href="../paper-chip-input.html">
<link rel="import" href="../paper-chip-input-autocomplete.html">

<script src="states.js"></script>

<style is="custom-style" include="demo-pages-shared-styles">
#inputForValidation {
display: inline-block;
width: calc(100% - 75px);
}
</style>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">

<title>paper-chip demo</title>

<script src="../../webcomponentsjs/webcomponents-loader.js"></script>

<link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
<link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
<link rel="import" href="../../iron-icons/iron-icons.html">
<link rel="import" href="../../paper-input/paper-input.html">
<link rel="import" href="../../paper-toast/paper-toast.html">
<link rel="import" href="../paper-chip.html">
<link rel="import" href="../paper-chip-input.html">
<link rel="import" href="../paper-chip-input-autocomplete.html">

<script src="states.js"></script>

<style is="custom-style" include="demo-pages-shared-styles">
#inputForValidation {
display: inline-block;
width: calc(100% - 75px);
}
</style>
</head>

<body unresolved>

<paper-toast id="toast"></paper-toast>
<paper-toast id="toast"></paper-toast>

<div class="vertical-section-container centered">
<h3>Basic paper-chip's</h3>
<demo-snippet>
<template>
<paper-chip label="Basic"></paper-chip>
<div class="vertical-section-container centered">
<h3>Basic paper-chip's</h3>
<demo-snippet>
<template>
<paper-chip label="Basic"></paper-chip>

<paper-chip label="Basic with Avatar Text">
<span class="chip-background" slot="avatar">
<span>T</span>
</span>
</paper-chip>
<paper-chip label="Basic with Avatar Text">
<span class="chip-background" slot="avatar">
<span>T</span>
</span>
</paper-chip>

<paper-chip label="Closable" closable></paper-chip>
<paper-chip label="Closable" closable></paper-chip>

<paper-chip label="Closable and image" closable>
<img class="chip-image" slot="avatar" src="avatar.png" alt="Contact Person">
</paper-chip>
<paper-chip label="Closable and image" closable>
<img class="chip-image" slot="avatar" src="avatar.png" alt="Contact Person">
</paper-chip>

<paper-chip label="Closable and icon" closable>
<span class="chip-background" slot="avatar">
<iron-icon icon="icons:favorite"></iron-icon>
</span>
</paper-chip>
<paper-chip label="Closable and icon" closable>
<span class="chip-background" slot="avatar">
<iron-icon icon="icons:favorite"></iron-icon>
</span>
</paper-chip>

</template>
</demo-snippet>
</template>
</demo-snippet>

<h3>paper-chip's with custom styles</h3>
<demo-snippet>
<template>
<paper-chip label="Custom label color" class="custom-label-color"></paper-chip>
<h3>paper-chip's with custom styles</h3>
<demo-snippet>
<template>
<paper-chip label="Custom label color" class="custom-label-color"></paper-chip>

<paper-chip label="Custom background color" class="custom-background"></paper-chip>
<paper-chip label="Custom background color" class="custom-background"></paper-chip>

<paper-chip label="No hover effect" no-hover></paper-chip>
<paper-chip label="No hover effect" no-hover></paper-chip>

<paper-chip label="Custom avatar background color" class="custom-avatar-background">
<span class="chip-background" slot="avatar">
<span>T</span>
</span>
</paper-chip>
<paper-chip label="Custom avatar background color" class="custom-avatar-background">
<span class="chip-background" slot="avatar">
<span>T</span>
</span>
</paper-chip>

<paper-chip label="Custom avatar font-size and icon/font color" class="custom-avatar-font-color-and-size">
<span class="chip-background" slot="avatar">
<iron-icon icon="icons:favorite"></iron-icon>
</span>
</paper-chip>
<paper-chip label="Custom avatar font-size and icon/font color" class="custom-avatar-font-color-and-size">
<span class="chip-background" slot="avatar">
<iron-icon icon="icons:favorite"></iron-icon>
</span>
</paper-chip>

<style is="custom-style">
paper-chip.custom-label-color {
--paper-chip-label-color: #4db6ac;
}
<style is="custom-style">
paper-chip.custom-label-color {
--paper-chip-label-color: #4db6ac;
}

paper-chip.custom-background {
--paper-chip-background-color: #64b5f6;
}
paper-chip.custom-background {
--paper-chip-background-color: #64b5f6;
}

paper-chip.custom-avatar-background {
--paper-chip-avatar-background-color: #64b5f6;
}
paper-chip.custom-avatar-background {
--paper-chip-avatar-background-color: #64b5f6;
}

paper-chip.custom-avatar-font-color-and-size {
--paper-chip-avatar-font-color: red;
--paper-chip-font-size: 16px;
}
</style>
paper-chip.custom-avatar-font-color-and-size {
--paper-chip-avatar-font-color: red;
--paper-chip-font-size: 16px;
}
</style>

</template>
</demo-snippet>
</template>
</demo-snippet>

<h3>paper-chip's used as tags</h3>
<demo-snippet>
<template>
<h3>paper-chip's used as tags</h3>
<demo-snippet>
<template>

<paper-chip-input label="+Add (Enter) -Delete (Backspace)" items='["one", "two", "three"]' closable></paper-chip-input>
<paper-chip-input label="+Add (Enter) -Delete (Backspace)" items='["one", "two", "three"]' closable></paper-chip-input>

<paper-chip-input always-float-label label="+Add (Enter) -Delete (Backspace)">
<paper-chip label="Default Tag" slot="input"></paper-chip>
<paper-chip label="Default Tag Closable" closable slot="input"></paper-chip>
</paper-chip-input>
<paper-chip-input always-float-label label="+Add (Enter) -Delete (Backspace)">
<paper-chip label="Default Tag" slot="input"></paper-chip>
<paper-chip label="Default Tag Closable" closable slot="input"></paper-chip>
</paper-chip-input>

<paper-chip-input disabled label="+Add (Enter) -Delete (Backspace)" items='["one", "two", "three"]' closable></paper-chip-input>
<paper-chip-input disabled label="+Add (Enter) -Delete (Backspace)" items='["one", "two", "three"]' closable></paper-chip-input>

<paper-chip-input label="paper-chip-input cannot be empty" required auto-validate error-message="needs some text!" closable></paper-chip-input>
<paper-chip-input label="paper-chip-input cannot be empty" required auto-validate error-message="needs some text!" closable></paper-chip-input>

<paper-chip-input label="this input will only let you type letters" auto-validate allowed-pattern="[a-zA-Z]" closable></paper-chip-input>
<paper-chip-input label="this input will only let you type letters" auto-validate allowed-pattern="[a-zA-Z]" closable></paper-chip-input>

<paper-chip-input id="inputForValidation" required label="this input is manually validated" pattern="[a-zA-Z]*" error-message="letters only!"></paper-chip-input>
<paper-chip-input id="inputForValidation" required label="this input is manually validated" pattern="[a-zA-Z]*" error-message="letters only!"></paper-chip-input>
<button onclick="validate()">Validate</button>

</template>
</demo-snippet>
</template>
</demo-snippet>

<h3>paper-chip's from autocomplete</h3>
<demo-snippet>
<template>
<h3>paper-chip's from autocomplete</h3>
<demo-snippet>
<template>

<paper-chip-input-autocomplete id="basicAutocomplete" label="Search Item ... " closable></paper-chip-input-autocomplete>
<paper-chip-input-autocomplete id="basicAutocomplete" label="Search Item ... " closable></paper-chip-input-autocomplete>

<paper-chip-input-autocomplete id="autocompleteAdditionalItems" label="Search or add additional items (Enter)" additional-items closable></paper-chip-input-autocomplete>
<paper-chip-input-autocomplete id="autocompleteAdditionalItems" label="Search or add additional items (Enter) (Cannot be empty)"
additional-items required auto-validate error-message="needs some text!" closable></paper-chip-input-autocomplete>

</template>
</demo-snippet>
</template>
</demo-snippet>

</div>
</div>
</body>

</html>
<script>

function validate() {
document.getElementById('inputForValidation').validate();
function validate() {
document.getElementById('inputForValidation').validate();
}

window.addEventListener('WebComponentsReady', function () {
window.addEventListener('WebComponentsReady', function () {

let allPaperChips = document.querySelectorAll('paper-chip[closable]')
let allPaperChips = document.querySelectorAll('paper-chip[closable]')

allPaperChips.forEach(function (paperChip) {
paperChip.addEventListener("chip-removed", function () {
let toast = document.querySelector('paper-toast');
toast.text = 'Removed paper-chip with label "' + paperChip.label + '"';
toast.open();
});
});
allPaperChips.forEach(function (paperChip) {
paperChip.addEventListener("chip-removed", function () {
let toast = document.querySelector('paper-toast');
toast.text = 'Removed paper-chip with label "' + paperChip.label + '"';
toast.open();
});
});

let allPaperChipInputs = document.querySelectorAll('paper-chip-input')
let allPaperChipInputs = document.querySelectorAll('paper-chip-input')

allPaperChipInputs.forEach(function (paperChipInput) {
paperChipInput.addEventListener("chip-removed", function (event) {
let toast = document.querySelector('paper-toast');
toast.text = 'Removed paper-chip with label "' + event.detail.chipLabel + '"';
toast.open();
});
allPaperChipInputs.forEach(function (paperChipInput) {
paperChipInput.addEventListener("chip-removed", function (event) {
let toast = document.querySelector('paper-toast');
toast.text = 'Removed paper-chip with label "' + event.detail.chipLabel + '"';
toast.open();
});

paperChipInput.addEventListener("chip-created", function (event) {
let toast = document.querySelector('paper-toast');
toast.text = 'paper-chip created with label "' + event.detail.chipLabel + '"';
toast.open();
});
});
paperChipInput.addEventListener("chip-created", function (event) {
let toast = document.querySelector('paper-toast');
toast.text = 'paper-chip created with label "' + event.detail.chipLabel + '"';
toast.open();
});
});

let allPaperChipInputAutocomplete = document.querySelectorAll('paper-chip-input-autocomplete')
let allPaperChipInputAutocomplete = document.querySelectorAll('paper-chip-input-autocomplete')

allPaperChipInputAutocomplete.forEach(function (paperChipInputAutocomplete) {
paperChipInputAutocomplete.addEventListener("chip-removed", function (event) {
let toast = document.querySelector('paper-toast');
toast.text = 'Removed paper-chip with label "' + event.detail.chipLabel + '"';
toast.open();
});
});
allPaperChipInputAutocomplete.forEach(function (paperChipInputAutocomplete) {
paperChipInputAutocomplete.addEventListener("chip-removed", function (event) {
let toast = document.querySelector('paper-toast');
toast.text = 'Removed paper-chip with label "' + event.detail.chipLabel + '"';
toast.open();
});
});

let basicAutocompleteElement = document.getElementById('basicAutocomplete');
basicAutocompleteElement.source = states;
basicAutocompleteElement.source = states;

let autocompleteAdditionalItems = document.getElementById('autocompleteAdditionalItems');
autocompleteAdditionalItems.source = states;
});
let autocompleteAdditionalItems = document.getElementById('autocompleteAdditionalItems');
autocompleteAdditionalItems.source = states;
});

</script>
Loading

0 comments on commit f0142b0

Please sign in to comment.