custom-elements-ts 0.0.16 → 0.0.17
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +191 -168
- package/bundles/custom-elements-ts.umd.js +314 -270
- package/bundles/custom-elements-ts.umd.js.map +1 -1
- package/esm2015/custom-elements-ts.js +270 -247
- package/esm2015/custom-elements-ts.js.map +1 -1
- package/{custom-element.d.ts → esm5/custom-element.d.ts} +12 -12
- package/esm5/custom-elements-ts.js +308 -262
- package/esm5/custom-elements-ts.js.map +1 -1
- package/{index.d.ts → esm5/index.d.ts} +5 -5
- package/{listen.d.ts → esm5/listen.d.ts} +17 -17
- package/{prop.d.ts → esm5/prop.d.ts} +2 -2
- package/{toggle.d.ts → esm5/toggle.d.ts} +1 -1
- package/esm5/util.d.ts +4 -0
- package/{watch.d.ts → esm5/watch.d.ts} +1 -1
- package/package.json +9 -14
- package/util.d.ts +0 -4
|
@@ -1,17 +1,35 @@
|
|
|
1
1
|
(function (global, factory) {
|
|
2
2
|
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
|
|
3
3
|
typeof define === 'function' && define.amd ? define(['exports'], factory) :
|
|
4
|
-
(factory(
|
|
5
|
-
}(this, (function (exports) { 'use strict';
|
|
4
|
+
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["custom-elements-ts"] = {}));
|
|
5
|
+
})(this, (function (exports) { 'use strict';
|
|
6
6
|
|
|
7
|
+
/******************************************************************************
|
|
8
|
+
Copyright (c) Microsoft Corporation.
|
|
9
|
+
|
|
10
|
+
Permission to use, copy, modify, and/or distribute this software for any
|
|
11
|
+
purpose with or without fee is hereby granted.
|
|
12
|
+
|
|
13
|
+
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
|
14
|
+
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
|
15
|
+
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
|
16
|
+
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
|
17
|
+
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
18
|
+
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
19
|
+
PERFORMANCE OF THIS SOFTWARE.
|
|
20
|
+
***************************************************************************** */
|
|
21
|
+
/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
|
|
22
|
+
|
|
7
23
|
var extendStatics = function(d, b) {
|
|
8
24
|
extendStatics = Object.setPrototypeOf ||
|
|
9
25
|
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
|
10
|
-
function (d, b) { for (var p in b) if (
|
|
26
|
+
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
|
|
11
27
|
return extendStatics(d, b);
|
|
12
28
|
};
|
|
13
29
|
|
|
14
30
|
function __extends(d, b) {
|
|
31
|
+
if (typeof b !== "function" && b !== null)
|
|
32
|
+
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
|
|
15
33
|
extendStatics(d, b);
|
|
16
34
|
function __() { this.constructor = d; }
|
|
17
35
|
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
@@ -26,290 +44,316 @@
|
|
|
26
44
|
return t;
|
|
27
45
|
};
|
|
28
46
|
return __assign.apply(this, arguments);
|
|
47
|
+
};
|
|
48
|
+
|
|
49
|
+
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
|
|
50
|
+
var e = new Error(message);
|
|
51
|
+
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
29
52
|
};
|
|
30
53
|
|
|
31
|
-
var toKebabCase = function (str) {
|
|
32
|
-
return str
|
|
33
|
-
.replace(/([a-z])([A-Z])/g, '$1-$2')
|
|
34
|
-
.replace(/[\s_]+/g, '-')
|
|
35
|
-
.toLowerCase();
|
|
36
|
-
};
|
|
37
|
-
var toCamelCase = function (str) {
|
|
38
|
-
return str
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
.
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
54
|
+
var toKebabCase = function (str) {
|
|
55
|
+
return str
|
|
56
|
+
.replace(/([a-z])([A-Z])/g, '$1-$2')
|
|
57
|
+
.replace(/[\s_]+/g, '-')
|
|
58
|
+
.toLowerCase();
|
|
59
|
+
};
|
|
60
|
+
var toCamelCase = function (str) {
|
|
61
|
+
return str.toLowerCase().replace(/(-\w)/g, function (m) { return m[1].toUpperCase(); });
|
|
62
|
+
};
|
|
63
|
+
var toDotCase = function (str) {
|
|
64
|
+
return str
|
|
65
|
+
.replace(/(?!^)([A-Z])/g, ' $1')
|
|
66
|
+
.replace(/[_\s]+(?=[a-zA-Z])/g, '.')
|
|
67
|
+
.toLowerCase();
|
|
68
|
+
};
|
|
69
|
+
var tryParseInt = function (value) {
|
|
70
|
+
if (typeof value === 'number' && Number.isInteger(value)) {
|
|
71
|
+
return value;
|
|
72
|
+
}
|
|
73
|
+
if (typeof value === 'string') {
|
|
74
|
+
var trimmed = value.trim();
|
|
75
|
+
if (trimmed !== '') {
|
|
76
|
+
var parsed = Number(trimmed);
|
|
77
|
+
if (Number.isInteger(parsed) && String(parsed) === trimmed) {
|
|
78
|
+
return parsed;
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
return value;
|
|
49
83
|
};
|
|
50
84
|
|
|
51
|
-
var Listen = function (eventName, selector) {
|
|
52
|
-
return function (target, methodName) {
|
|
53
|
-
if (!target.constructor.listeners) {
|
|
54
|
-
target.constructor.listeners = [];
|
|
55
|
-
}
|
|
56
|
-
target.constructor.listeners.push({
|
|
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
|
-
|
|
85
|
+
var Listen = function (eventName, selector) {
|
|
86
|
+
return function (target, methodName) {
|
|
87
|
+
if (!target.constructor.listeners) {
|
|
88
|
+
target.constructor.listeners = [];
|
|
89
|
+
}
|
|
90
|
+
target.constructor.listeners.push({
|
|
91
|
+
selector: selector,
|
|
92
|
+
eventName: eventName,
|
|
93
|
+
handler: target[methodName],
|
|
94
|
+
});
|
|
95
|
+
};
|
|
96
|
+
};
|
|
97
|
+
var addEventListeners = function (target) {
|
|
98
|
+
if (target.constructor.listeners) {
|
|
99
|
+
var targetRoot = target.shadowRoot || target;
|
|
100
|
+
var _loop_1 = function (listener) {
|
|
101
|
+
var eventTarget = target;
|
|
102
|
+
if (listener.selector) {
|
|
103
|
+
eventTarget = targetRoot.querySelector(listener.selector);
|
|
104
|
+
}
|
|
105
|
+
if (eventTarget) {
|
|
106
|
+
eventTarget.addEventListener(listener.eventName, function (e) {
|
|
107
|
+
listener.handler.call(target, e);
|
|
108
|
+
});
|
|
109
|
+
}
|
|
110
|
+
};
|
|
111
|
+
for (var _i = 0, _a = target.constructor.listeners; _i < _a.length; _i++) {
|
|
112
|
+
var listener = _a[_i];
|
|
113
|
+
_loop_1(listener);
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
};
|
|
117
|
+
var Dispatch = function (eventName) {
|
|
118
|
+
return function (target, propertyName) {
|
|
119
|
+
function get() {
|
|
120
|
+
var self = this;
|
|
121
|
+
return {
|
|
122
|
+
emit: function (options) {
|
|
123
|
+
var evtName = eventName ? eventName : toDotCase(propertyName);
|
|
124
|
+
self.dispatchEvent(new CustomEvent(evtName, options));
|
|
125
|
+
},
|
|
126
|
+
};
|
|
127
|
+
}
|
|
128
|
+
Object.defineProperty(target, propertyName, { get: get });
|
|
129
|
+
};
|
|
92
130
|
};
|
|
93
131
|
|
|
94
|
-
var Prop = function () {
|
|
95
|
-
return function (target, propName) {
|
|
96
|
-
var attrName = toKebabCase(propName);
|
|
97
|
-
function get() {
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
this.props[propName]
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
this.
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
}
|
|
123
|
-
target.constructor.propsInit
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
var
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
}
|
|
153
|
-
}
|
|
154
|
-
|
|
132
|
+
var Prop = function () {
|
|
133
|
+
return function (target, propName) {
|
|
134
|
+
var attrName = toKebabCase(propName);
|
|
135
|
+
function get() {
|
|
136
|
+
var hasOwn = Object.prototype.hasOwnProperty.call(this.props, propName);
|
|
137
|
+
if (hasOwn) {
|
|
138
|
+
return this.props[propName];
|
|
139
|
+
}
|
|
140
|
+
return this.getAttribute(attrName);
|
|
141
|
+
}
|
|
142
|
+
function set(value) {
|
|
143
|
+
if (this.__connected) {
|
|
144
|
+
var oldValue = this.props[propName];
|
|
145
|
+
this.props[propName] = tryParseInt(value);
|
|
146
|
+
var valueType = typeof value;
|
|
147
|
+
var shouldReflect = valueType === 'string' || valueType === 'number' || valueType === 'boolean';
|
|
148
|
+
if (shouldReflect) {
|
|
149
|
+
this.setAttribute(attrName, value);
|
|
150
|
+
}
|
|
151
|
+
else {
|
|
152
|
+
this.onAttributeChange(attrName, oldValue, value, false);
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
else {
|
|
156
|
+
if (!this.hasAttribute(toKebabCase(propName))) {
|
|
157
|
+
this.constructor.propsInit[propName] = value;
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
if (!target.constructor.propsInit) {
|
|
162
|
+
target.constructor.propsInit = {};
|
|
163
|
+
}
|
|
164
|
+
target.constructor.propsInit[propName] = null;
|
|
165
|
+
Object.defineProperty(target, propName, { get: get, set: set });
|
|
166
|
+
};
|
|
167
|
+
};
|
|
168
|
+
var getProps = function (target) {
|
|
169
|
+
var watchAttributes = target.constructor.watchAttributes;
|
|
170
|
+
var plainAttributes = __assign({}, watchAttributes);
|
|
171
|
+
Object.keys(plainAttributes).forEach(function (v) { return (plainAttributes[v] = ''); });
|
|
172
|
+
var cycleProps = __assign(__assign({}, plainAttributes), target.constructor.propsInit);
|
|
173
|
+
return Object.keys(cycleProps);
|
|
174
|
+
};
|
|
175
|
+
var initializeProps = function (target) {
|
|
176
|
+
var watchAttributes = target.constructor.watchAttributes;
|
|
177
|
+
for (var _i = 0, _a = getProps(target); _i < _a.length; _i++) {
|
|
178
|
+
var prop = _a[_i];
|
|
179
|
+
if (watchAttributes) {
|
|
180
|
+
if (watchAttributes[toKebabCase(prop)] === null ||
|
|
181
|
+
watchAttributes[toKebabCase(prop)] === undefined) {
|
|
182
|
+
watchAttributes[toKebabCase(prop)] = '';
|
|
183
|
+
}
|
|
184
|
+
else {
|
|
185
|
+
var hasOwn = Object.prototype.hasOwnProperty.call(target.props, prop);
|
|
186
|
+
var attribValue = hasOwn ? target.props[prop] : target.getAttribute(toKebabCase(prop));
|
|
187
|
+
if (typeof target[watchAttributes[prop]] === 'function') {
|
|
188
|
+
target[watchAttributes[prop]]({ new: attribValue });
|
|
189
|
+
}
|
|
190
|
+
}
|
|
191
|
+
}
|
|
192
|
+
if (target.constructor.propsInit[prop]) {
|
|
193
|
+
if (!target.hasAttribute(toKebabCase(prop))) {
|
|
194
|
+
target[prop] = target.constructor.propsInit[prop];
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
}
|
|
155
198
|
};
|
|
156
199
|
|
|
157
|
-
var CustomElement = function (args) {
|
|
158
|
-
return function (target) {
|
|
159
|
-
var
|
|
160
|
-
var
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
}
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
}
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
}
|
|
221
|
-
|
|
222
|
-
|
|
200
|
+
var CustomElement = function (args) {
|
|
201
|
+
return function (target) {
|
|
202
|
+
var tag = args.tag || toKebabCase(target.prototype.constructor.name);
|
|
203
|
+
var customElement = (function (_super) {
|
|
204
|
+
__extends(class_1, _super);
|
|
205
|
+
function class_1() {
|
|
206
|
+
var _this = _super.call(this) || this;
|
|
207
|
+
_this.__connected = false;
|
|
208
|
+
_this.props = {};
|
|
209
|
+
_this.showShadowRoot =
|
|
210
|
+
args.shadow === undefined || args.shadow === null ? true : args.shadow;
|
|
211
|
+
if (!_this.shadowRoot && _this.showShadowRoot) {
|
|
212
|
+
_this.attachShadow({ mode: 'open' });
|
|
213
|
+
}
|
|
214
|
+
return _this;
|
|
215
|
+
}
|
|
216
|
+
Object.defineProperty(class_1, "observedAttributes", {
|
|
217
|
+
get: function () {
|
|
218
|
+
return Object.keys(this.propsInit || {}).map(function (x) { return toKebabCase(x); });
|
|
219
|
+
},
|
|
220
|
+
enumerable: false,
|
|
221
|
+
configurable: true
|
|
222
|
+
});
|
|
223
|
+
class_1.prototype.attributeChangedCallback = function (name, oldValue, newValue) {
|
|
224
|
+
this.onAttributeChange(name, oldValue, newValue);
|
|
225
|
+
};
|
|
226
|
+
class_1.prototype.onAttributeChange = function (name, oldValue, newValue, set) {
|
|
227
|
+
if (set === void 0) { set = true; }
|
|
228
|
+
if (oldValue !== newValue) {
|
|
229
|
+
if (set) {
|
|
230
|
+
var propName = toCamelCase(name);
|
|
231
|
+
this[propName] = newValue;
|
|
232
|
+
}
|
|
233
|
+
var watchAttributes = this.constructor.watchAttributes;
|
|
234
|
+
if (watchAttributes && watchAttributes[name]) {
|
|
235
|
+
var methodToCall = watchAttributes[name];
|
|
236
|
+
if (this.__connected) {
|
|
237
|
+
if (typeof this[methodToCall] === 'function') {
|
|
238
|
+
this[methodToCall]({ old: oldValue, new: newValue });
|
|
239
|
+
}
|
|
240
|
+
}
|
|
241
|
+
}
|
|
242
|
+
}
|
|
243
|
+
};
|
|
244
|
+
class_1.prototype.connectedCallback = function () {
|
|
245
|
+
this.__render();
|
|
246
|
+
var parentProto = Object.getPrototypeOf(Object.getPrototypeOf(this)) || null;
|
|
247
|
+
if (parentProto && typeof parentProto.connectedCallback === 'function') {
|
|
248
|
+
parentProto.connectedCallback.call(this);
|
|
249
|
+
}
|
|
250
|
+
this.__connected = true;
|
|
251
|
+
addEventListeners(this);
|
|
252
|
+
initializeProps(this);
|
|
253
|
+
};
|
|
254
|
+
class_1.prototype.__render = function () {
|
|
255
|
+
if (this.__connected)
|
|
256
|
+
return;
|
|
257
|
+
var template = document.createElement('template');
|
|
258
|
+
var style = "".concat(args.style ? "<style>".concat(args.style, "</style>") : '');
|
|
259
|
+
template.innerHTML = "".concat(style).concat(args.template ? args.template : '');
|
|
260
|
+
(this.showShadowRoot ? this.shadowRoot : this).appendChild(document.importNode(template.content, true));
|
|
261
|
+
};
|
|
262
|
+
return class_1;
|
|
263
|
+
}(target));
|
|
264
|
+
if (!customElements.get(tag)) {
|
|
265
|
+
customElements.define(tag, customElement);
|
|
266
|
+
}
|
|
267
|
+
return customElement;
|
|
268
|
+
};
|
|
223
269
|
};
|
|
224
270
|
|
|
225
|
-
var Watch = function (attrName) {
|
|
226
|
-
return function (target, propertyName) {
|
|
227
|
-
if (!target.constructor.watchAttributes) {
|
|
228
|
-
target.constructor.watchAttributes = {};
|
|
229
|
-
}
|
|
230
|
-
target.constructor.watchAttributes[toKebabCase(attrName)] = propertyName;
|
|
231
|
-
if (!target.constructor.propsInit) {
|
|
232
|
-
target.constructor.propsInit = {};
|
|
233
|
-
}
|
|
234
|
-
target.constructor.propsInit[attrName] = null;
|
|
235
|
-
};
|
|
271
|
+
var Watch = function (attrName) {
|
|
272
|
+
return function (target, propertyName) {
|
|
273
|
+
if (!target.constructor.watchAttributes) {
|
|
274
|
+
target.constructor.watchAttributes = {};
|
|
275
|
+
}
|
|
276
|
+
target.constructor.watchAttributes[toKebabCase(attrName)] = propertyName;
|
|
277
|
+
if (!target.constructor.propsInit) {
|
|
278
|
+
target.constructor.propsInit = {};
|
|
279
|
+
}
|
|
280
|
+
target.constructor.propsInit[attrName] = null;
|
|
281
|
+
};
|
|
236
282
|
};
|
|
237
283
|
|
|
238
|
-
var Toggle = function () {
|
|
239
|
-
return function (target, propName) {
|
|
240
|
-
function get() {
|
|
241
|
-
var _this = this;
|
|
242
|
-
var getAttribute = function (
|
|
243
|
-
if (_this.hasAttribute(
|
|
244
|
-
var attrValue = _this.getAttribute(
|
|
245
|
-
if (/^(true|false|^$)$/.test(attrValue)) {
|
|
246
|
-
return attrValue
|
|
247
|
-
}
|
|
248
|
-
else {
|
|
249
|
-
return false;
|
|
250
|
-
}
|
|
251
|
-
}
|
|
252
|
-
return false;
|
|
253
|
-
};
|
|
254
|
-
return getAttribute(propName);
|
|
255
|
-
}
|
|
256
|
-
function set(value) {
|
|
257
|
-
var oldValue = value;
|
|
258
|
-
if (value
|
|
259
|
-
switch (typeof value) {
|
|
260
|
-
case 'boolean':
|
|
261
|
-
break;
|
|
262
|
-
case 'string':
|
|
263
|
-
if (/^(true|false|^$)$/.test(value)) {
|
|
264
|
-
value = oldValue
|
|
265
|
-
}
|
|
266
|
-
else {
|
|
267
|
-
console.warn("TypeError: Cannot set boolean toggle property '"
|
|
268
|
-
value = false;
|
|
269
|
-
}
|
|
270
|
-
break;
|
|
271
|
-
default:
|
|
272
|
-
throw ("
|
|
273
|
-
}
|
|
274
|
-
}
|
|
275
|
-
if (this.__connected) {
|
|
276
|
-
this.props[propName] = value || false;
|
|
277
|
-
if (oldValue !== '' && oldValue !== null) {
|
|
278
|
-
this.setAttribute(propName, value);
|
|
279
|
-
}
|
|
280
|
-
else {
|
|
281
|
-
if (value) {
|
|
282
|
-
this.setAttribute(propName, '');
|
|
283
|
-
}
|
|
284
|
-
else {
|
|
285
|
-
this.removeAttribute(propName);
|
|
286
|
-
}
|
|
287
|
-
}
|
|
288
|
-
}
|
|
289
|
-
else {
|
|
290
|
-
if (!this.hasAttribute(toKebabCase(propName))) {
|
|
291
|
-
this.constructor.propsInit[propName] = value;
|
|
292
|
-
}
|
|
293
|
-
}
|
|
294
|
-
}
|
|
295
|
-
if (!target.constructor.propsInit) {
|
|
296
|
-
target.constructor.propsInit = {};
|
|
297
|
-
}
|
|
298
|
-
target.constructor.propsInit[propName] = null;
|
|
299
|
-
Object.defineProperty(target, propName, { get: get, set: set });
|
|
300
|
-
};
|
|
284
|
+
var Toggle = function () {
|
|
285
|
+
return function (target, propName) {
|
|
286
|
+
function get() {
|
|
287
|
+
var _this = this;
|
|
288
|
+
var getAttribute = function (attrName) {
|
|
289
|
+
if (_this.hasAttribute(attrName)) {
|
|
290
|
+
var attrValue = _this.getAttribute(attrName);
|
|
291
|
+
if (/^(true|false|^$)$/.test(attrValue)) {
|
|
292
|
+
return attrValue === 'true' || attrValue === '';
|
|
293
|
+
}
|
|
294
|
+
else {
|
|
295
|
+
return false;
|
|
296
|
+
}
|
|
297
|
+
}
|
|
298
|
+
return false;
|
|
299
|
+
};
|
|
300
|
+
return getAttribute(propName);
|
|
301
|
+
}
|
|
302
|
+
function set(value) {
|
|
303
|
+
var oldValue = value;
|
|
304
|
+
if (value !== null && value !== undefined) {
|
|
305
|
+
switch (typeof value) {
|
|
306
|
+
case 'boolean':
|
|
307
|
+
break;
|
|
308
|
+
case 'string':
|
|
309
|
+
if (/^(true|false|^$)$/.test(value)) {
|
|
310
|
+
value = oldValue === 'true' || oldValue === '';
|
|
311
|
+
}
|
|
312
|
+
else {
|
|
313
|
+
console.warn("TypeError: Cannot set boolean toggle property '".concat(propName, "' to '").concat(value, "'"));
|
|
314
|
+
value = false;
|
|
315
|
+
}
|
|
316
|
+
break;
|
|
317
|
+
default:
|
|
318
|
+
throw new TypeError("Cannot set boolean toggle property '".concat(propName, "' to '").concat(value, "'"));
|
|
319
|
+
}
|
|
320
|
+
}
|
|
321
|
+
if (this.__connected) {
|
|
322
|
+
this.props[propName] = value || false;
|
|
323
|
+
if (oldValue !== '' && oldValue !== null) {
|
|
324
|
+
this.setAttribute(propName, value);
|
|
325
|
+
}
|
|
326
|
+
else {
|
|
327
|
+
if (value) {
|
|
328
|
+
this.setAttribute(propName, '');
|
|
329
|
+
}
|
|
330
|
+
else {
|
|
331
|
+
this.removeAttribute(propName);
|
|
332
|
+
}
|
|
333
|
+
}
|
|
334
|
+
}
|
|
335
|
+
else {
|
|
336
|
+
if (!this.hasAttribute(toKebabCase(propName))) {
|
|
337
|
+
this.constructor.propsInit[propName] = value;
|
|
338
|
+
}
|
|
339
|
+
}
|
|
340
|
+
}
|
|
341
|
+
if (!target.constructor.propsInit) {
|
|
342
|
+
target.constructor.propsInit = {};
|
|
343
|
+
}
|
|
344
|
+
target.constructor.propsInit[propName] = null;
|
|
345
|
+
Object.defineProperty(target, propName, { get: get, set: set });
|
|
346
|
+
};
|
|
301
347
|
};
|
|
302
348
|
|
|
303
349
|
exports.CustomElement = CustomElement;
|
|
304
|
-
exports.
|
|
350
|
+
exports.Dispatch = Dispatch;
|
|
351
|
+
exports.Listen = Listen;
|
|
305
352
|
exports.Prop = Prop;
|
|
306
|
-
exports.initializeProps = initializeProps;
|
|
307
353
|
exports.Toggle = Toggle;
|
|
308
|
-
exports.
|
|
354
|
+
exports.Watch = Watch;
|
|
309
355
|
exports.addEventListeners = addEventListeners;
|
|
310
|
-
exports.
|
|
311
|
-
|
|
312
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
356
|
+
exports.initializeProps = initializeProps;
|
|
313
357
|
|
|
314
|
-
}))
|
|
358
|
+
}));
|
|
315
359
|
//# sourceMappingURL=custom-elements-ts.umd.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"custom-elements-ts.umd.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"custom-elements-ts.umd.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|