custom-elements-ts 0.0.15 → 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 -54
- package/bundles/custom-elements-ts.umd.js +314 -269
- package/bundles/custom-elements-ts.umd.js.map +1 -1
- package/esm2015/custom-elements-ts.js +270 -246
- 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 -261
- 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,289 +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
|
-
|
|
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
|
+
};
|
|
91
130
|
};
|
|
92
131
|
|
|
93
|
-
var Prop = function () {
|
|
94
|
-
return function (target, propName) {
|
|
95
|
-
var attrName = toKebabCase(propName);
|
|
96
|
-
function get() {
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
this.props[propName]
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
this.
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
}
|
|
122
|
-
target.constructor.propsInit
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
var
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
}
|
|
152
|
-
}
|
|
153
|
-
|
|
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
|
+
}
|
|
154
198
|
};
|
|
155
199
|
|
|
156
|
-
var CustomElement = function (args) {
|
|
157
|
-
return function (target) {
|
|
158
|
-
var
|
|
159
|
-
var
|
|
160
|
-
|
|
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
|
-
|
|
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
|
+
};
|
|
222
269
|
};
|
|
223
270
|
|
|
224
|
-
var Watch = function (attrName) {
|
|
225
|
-
return function (target, propertyName) {
|
|
226
|
-
if (!target.constructor.watchAttributes) {
|
|
227
|
-
target.constructor.watchAttributes = {};
|
|
228
|
-
}
|
|
229
|
-
target.constructor.watchAttributes[toKebabCase(attrName)] = propertyName;
|
|
230
|
-
if (!target.constructor.propsInit) {
|
|
231
|
-
target.constructor.propsInit = {};
|
|
232
|
-
}
|
|
233
|
-
target.constructor.propsInit[attrName] = null;
|
|
234
|
-
};
|
|
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
|
+
};
|
|
235
282
|
};
|
|
236
283
|
|
|
237
|
-
var Toggle = function () {
|
|
238
|
-
return function (target, propName) {
|
|
239
|
-
function get() {
|
|
240
|
-
var _this = this;
|
|
241
|
-
var getAttribute = function (
|
|
242
|
-
if (_this.hasAttribute(
|
|
243
|
-
var attrValue = _this.getAttribute(
|
|
244
|
-
if (/^(true|false|^$)$/.test(attrValue)) {
|
|
245
|
-
return attrValue
|
|
246
|
-
}
|
|
247
|
-
else {
|
|
248
|
-
return false;
|
|
249
|
-
}
|
|
250
|
-
}
|
|
251
|
-
return false;
|
|
252
|
-
};
|
|
253
|
-
return getAttribute(propName);
|
|
254
|
-
}
|
|
255
|
-
function set(value) {
|
|
256
|
-
var oldValue = value;
|
|
257
|
-
if (value
|
|
258
|
-
switch (typeof value) {
|
|
259
|
-
case 'boolean':
|
|
260
|
-
break;
|
|
261
|
-
case 'string':
|
|
262
|
-
if (/^(true|false|^$)$/.test(value)) {
|
|
263
|
-
value = oldValue
|
|
264
|
-
}
|
|
265
|
-
else {
|
|
266
|
-
console.warn("TypeError: Cannot set boolean toggle property '"
|
|
267
|
-
value = false;
|
|
268
|
-
}
|
|
269
|
-
break;
|
|
270
|
-
default:
|
|
271
|
-
throw ("
|
|
272
|
-
}
|
|
273
|
-
}
|
|
274
|
-
if (this.__connected) {
|
|
275
|
-
this.props[propName] = value || false;
|
|
276
|
-
if (oldValue !== '' && oldValue !== null) {
|
|
277
|
-
this.setAttribute(propName, value);
|
|
278
|
-
}
|
|
279
|
-
else {
|
|
280
|
-
if (value) {
|
|
281
|
-
this.setAttribute(propName, '');
|
|
282
|
-
}
|
|
283
|
-
else {
|
|
284
|
-
this.removeAttribute(propName);
|
|
285
|
-
}
|
|
286
|
-
}
|
|
287
|
-
}
|
|
288
|
-
else {
|
|
289
|
-
if (!this.hasAttribute(toKebabCase(propName))) {
|
|
290
|
-
this.constructor.propsInit[propName] = value;
|
|
291
|
-
}
|
|
292
|
-
}
|
|
293
|
-
}
|
|
294
|
-
if (!target.constructor.propsInit) {
|
|
295
|
-
target.constructor.propsInit = {};
|
|
296
|
-
}
|
|
297
|
-
target.constructor.propsInit[propName] = null;
|
|
298
|
-
Object.defineProperty(target, propName, { get: get, set: set });
|
|
299
|
-
};
|
|
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
|
+
};
|
|
300
347
|
};
|
|
301
348
|
|
|
302
349
|
exports.CustomElement = CustomElement;
|
|
303
|
-
exports.
|
|
350
|
+
exports.Dispatch = Dispatch;
|
|
351
|
+
exports.Listen = Listen;
|
|
304
352
|
exports.Prop = Prop;
|
|
305
|
-
exports.initializeProps = initializeProps;
|
|
306
353
|
exports.Toggle = Toggle;
|
|
307
|
-
exports.
|
|
354
|
+
exports.Watch = Watch;
|
|
308
355
|
exports.addEventListeners = addEventListeners;
|
|
309
|
-
exports.
|
|
310
|
-
|
|
311
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
356
|
+
exports.initializeProps = initializeProps;
|
|
312
357
|
|
|
313
|
-
}))
|
|
358
|
+
}));
|
|
314
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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|