Skip to content

Commit ab8c9ce

Browse files
bmarkovbmarkov
committed
update to 2.0
1 parent 91b7d57 commit ab8c9ce

File tree

11 files changed

+54
-8670
lines changed

11 files changed

+54
-8670
lines changed

‎README.md‎

Lines changed: 12 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -14,27 +14,15 @@ In your web page, include
1414
1515
```
1616

17-
For IE11, use the ES5 version:
18-
19-
```
20-
<script src="source-minified/native-shim.js"></script>
21-
<script src="source-minified/smart.element-polyfills.js"></script>
22-
<script src="source-minified/smart.element.js"></script>
23-
24-
```
25-
26-
2717
Optional polyfill for browsers without custom elements support: `webcomponents-lite.js`
2818

29-
## Working with Transpiled ES5 Files
30-
When using ES5/minified files, you would also need to include a reference to the file **native-shim.js** (it can be found alongside **smart.element.js** and **smart.element-polyfills.js**).
3119

3220
## Version and Deployment
3321
- This package is version according to [semantic versioning](http://semver.org).
3422

3523
## Browser Support and Compatibility
3624

37-
**[Requires ES2015 classes](https://caniuse.com/es6-class). IE11 and below not supported.**
25+
**[Requires ES2015 classes](https://caniuse.com/es6-class). Edge, Chrome, Safari and Firefox. Requires Webcomponents polyfill for Edge and Safari**
3826

3927
- **If targeting browsers that natively support ES2015, but not native Web Components:**
4028

@@ -203,6 +191,7 @@ Use for one-time set-up before property values are set.
203191
* attached - Called after the element is attached to the document. Can be called multiple times during the lifetime of an element.
204192
* ready - Called when the element is ready. Use for one-time configuration of your element.
205193
* detached - Called after the element is detached from the document. Can be called multiple times during the lifetime of an element.
194+
* completed - Called after the element and any custom elements in its template are ready, rendered and attached to the DOM. Completed is called once.
206195

207196
## Properties
208197

@@ -234,15 +223,8 @@ Example:
234223
<head>
235224
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
236225
<meta name="viewport" content="width=device-width, initial-scale=1" />
237-
<link rel="stylesheet" href="styles/smart.base.css" type="text/css" />
238-
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.1.0/webcomponents-lite.js"></script>
239-
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.1.0/webcomponents-loader.js"></script>
240-
<script type="text/javascript" src="smart.element.js"></script>
241-
<script type="text/javascript" src="smart.button.js"></script>
242-
<script type="text/javascript" src="smart.scrollbar.js"></script>
243-
<script type="text/javascript" src="smart.listbox.js"></script>
244-
<script type="text/javascript" src="smart.checkbox.js"></script>
245-
<script type="text/javascript" src="smart.radiobutton.js"></script>
226+
<link rel="stylesheet" href="styles/smart.default.css" type="text/css" />
227+
<script type="text/javascript" src="smart.elements.js"></script>
246228
<script>
247229
window.onload = function () {
248230
var list = document.getElementById('list');
@@ -370,9 +352,7 @@ Smart('my-element', class MyElement extends Smart.BaseElement {
370352
<!DOCTYPE html>
371353
<html lang="en">
372354
<head>
373-
<link rel="stylesheet" href="styles/smart.base.css" type="text/css" />
374-
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.1.0/webcomponents-lite.js"></script>
375-
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.1.0/webcomponents-loader.js"></script>
355+
<link rel="stylesheet" href="styles/smart.default.css" type="text/css" />
376356
<script type="text/javascript" src="../../source/smart.element.js"></script>
377357
<script type="text/javascript" src="../../source/myelement.js"></script>
378358
<script>
@@ -476,17 +456,17 @@ By invoking `Smart.Utilities.Extend(element)` you can extend any element with th
476456
In order to add a custom utility class, you can use `Smart.Utilities.Assign(classDefinition)`.
477457

478458
```javascript
479-
Smart.Utilities.Assign('BaseNumericProcessor', class BaseNumericProcessor {
459+
Smart.Utilities.Assign('defaultNumericProcessor', class defaultNumericProcessor {
480460
}
481461
```
482462
483-
To access that class, you can use `Smart.Utilities.BaseNumericProcessor`.
463+
To access that class, you can use `Smart.Utilities.defaultNumericProcessor`.
484464
485465
```*if and *items template directives.```
486466
487467
If in the Template's definition, we have a HTMLTemplateElement, we can use these directives to insert HTML.
488468
489-
* *if - Conditionally includes a template based on the value of a property.
469+
* *if - Conditionally includes a template defaultd on the value of a property.
490470
* *items - Repeating a template by using each item of an iterable as that template's context.
491471
* templateAttached - function called when the HTMLTemplateElement is attahed to the DOM.
492472
* templateDetached - function called when the HTMLTemplateElement is detached from the DOM.
@@ -697,17 +677,8 @@ The following example demonstrates how to use the ```DataContext``` feature.
697677
<head>
698678
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
699679
<meta name="viewport" content="width=device-width, initial-scale=1" />
700-
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.22/webcomponents-lite.js"></script>
701-
<link rel="stylesheet" href="styles/smart.base.css" type="text/css" />
702-
<script type="text/javascript" src="smart.element.js"></script>
703-
<script type="text/javascript" src="smart.button.js"></script>
704-
<script type="text/javascript" src="smart.scrollbar.js"></script>
705-
<script type="text/javascript" src="smart.listbox.js"></script>
706-
<script type="text/javascript" src="smart.checkbox.js"></script>
707-
<script type="text/javascript" src="smart.radiobutton.js"></script>
708-
<script type="text/javascript" src="smart.dropdownlist.js"></script>
709-
<script type="text/javascript" src="smart.combobox.js"></script>
710-
<script type="text/javascript" src="smart.textbox.js"></script>
680+
<link rel="stylesheet" href="styles/smart.default.css" type="text/css" />
681+
<script type="text/javascript" src="smart.elements.js"></script>
711682
<script>
712683
window.onload = function () {
713684
const data = [
@@ -821,12 +792,9 @@ Custom Module which adds a new `color` property to the `smart-button` custom ele
821792
<!DOCTYPE html>
822793
<html lang="en">
823794
<head>
824-
<link rel="stylesheet" href="../../source/styles/smart.base.css" type="text/css" />
795+
<link rel="stylesheet" href="../../source/styles/smart.default.css" type="text/css" />
825796
<link rel="stylesheet" href="../styles/demos.css" type="text/css" />
826-
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.1.0/webcomponents-lite.js"></script>
827-
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.1.0/webcomponents-loader.js"></script>
828-
<script type="text/javascript" src="../../source/smart.element.js"></script>
829-
<script type="text/javascript" src="../../source/smart.button.js"></script>
797+
<script type="text/javascript" src="../../source/smart.elements.js"></script>
830798
<script>
831799
class ColorModule {
832800
static get properties() {

‎index.htm‎

Lines changed: 27 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,27 @@
1414
};
1515
}
1616

17+
static get listeners() {
18+
return {
19+
'click': '_clickHandler'
20+
};
21+
}
22+
23+
24+
/** Changes the check state wneh widget container is clicked. */
25+
_clickHandler(event) {
26+
const that = this;
27+
28+
this.content = "Thanks for clicking me!";
29+
}
30+
1731
/** Element's template. */
1832
template() {
1933
return '<div inner-h-t-m-l=\'[[content]]\'></div>';
2034
}
2135

22-
ready() {
36+
/** Called when the element is ready. Used for one-time configuration of the Checkbox. */
37+
ready() {
2338
super.ready();
2439
}
2540

@@ -45,17 +60,23 @@
4560
box-sizing: border-box;
4661
}
4762
smart-test {
48-
background: #ddd;
49-
color: #333;
63+
background: #6200EE;
64+
color: #fff;
5065
display: inline-block;
5166
border-radius: 5px;
52-
border: 1px solid #aaa;
53-
width: 100px;
67+
border: 1px solid #6200EE;
5468
text-align: center;
69+
cursor: pointer;
70+
padding: 5px 10px;
71+
transition: all 0.3s;
72+
}
73+
smart-test:hover {
74+
background: #FF0095;
75+
border-color: #FF0095;
5576
}
5677
</style>
5778
</head>
5879
<body>
59-
<smart-test content="Test Element"></smart-test>
80+
<smart-test content="Hello! I am Smart Element. You can click me."></smart-test>
6081
</body>
6182
</html>

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@smarthtmlelements/smart-custom-element",
3-
"version": "1.0.1",
3+
"version": "2.0.0",
44
"description": "Smart Custom Element",
55
"scripts": {
66
},

0 commit comments

Comments
 (0)