puredat-string/puredat-string.html at master · puredat/puredat-string · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../paper-input/paper-textarea.html">
<!--
	`puredat-string` "STRING" type, "ONE" cardinality widget.

	@demo demo/index.html
-->
<dom-module id="puredat-string">
	<template>
		<style>
			paper-input {
				--paper-input-container: {
					padding-right: 10px;
				}
			}
		</style>

		<template is="dom-if" if="[[multiLine]]">
			<paper-textarea
					type="text"
					maxlength="[[maxLength]]"
					allowed-pattern="[[pattern]]"
					label="[[label]]"
					value="{{value}}"
					rows="[[rows]]"
					max-rows="[[maxRows]]"
					error-message="[[errorMessage]]"
					invalid="[[_isInvalid(errorMessage)]]"
					readonly$="[[readOnly]]"
					always-float-label>
			</paper-textarea>
		</template>
		<template is="dom-if" if="[[!multiLine]]">
			<paper-input
					type="text"
					maxlength="[[maxLength]]"
					allowed-pattern="[[pattern]]"
					label="[[label]]"
					value="{{value}}"
					error-message="[[errorMessage]]"
					invalid="[[_isInvalid(errorMessage)]]"
					readonly$="[[readOnly]]"
					always-float-label>
			</paper-input>
		</template>
	</template>

	<script>
		Polymer({
			is: 'puredat-string',

			properties: {

				/** Name */
				name: {
					type: String
				},

				/** Multi-line. */
				multiLine: {
					type: Boolean,
					value: false
				},

				rows: {
					type: Number,
					value: 5
				},

				maxRows: {
					type: Number,
					value: 10
				},

				/** Maximum length. */
				maxLength: {
					type: Number,
					value: 100
				},

				/** Allowed pattern. For example: [a-zA-Z]. */
				pattern: {
					type: String
				},

				/** Descriptive label. */
				label: {
					type: String
				},

				/** Value. */
				value: {
					type: String,
					notify: true
				},

				/** Error message. */
				errorMessage: {
					type: String
				},

				/** Number of columns in a row of 10 columns. */
				cols: {
					type: Number,
					value: 5,
					observer: '_colsChanged'
				},

				/** Read only. */
				readOnly: {
					type: Boolean,
					value: false
				}
			},

			_colsChanged: function(newValue, oldValue) {
				this.style.minWidth = (30 * newValue) + "px";
				this.style.flex = "0 0 " + (10 * newValue) + "%";
			},

			/**
			 * Returns if the field is valid.
			 * @param {String} errorMessage The error message.
			 * @return {Boolean} If the input field is valid.
			 */
			_isInvalid: function(errorMessage) {
				return errorMessage != null
						&& errorMessage != "";
			}
		});
	</script>
</dom-module>