@smarthtmlelements/smart-core - npm Package Compare versions

Comparing version 4.3.1 to 4.4.0

package.json

@@ -1,1 +0,1 @@
-{"name":"@smarthtmlelements/smart-core","version":"4.3.1","description":"Smart Core Framework","scripts":{},"repository":{"type":"git","url":"git+https://github.com/HTMLElements/smart-core.git"},"author":"Smart HTML Elements","bugs":{"url":"https://github.com/HTMLElements/smart-core"},"homepage":"https://github.com/HTMLElements/smart-core#readme","devDependencies":{},"dependencies":{"@webcomponents/webcomponentsjs":"^1.0.22"},"main":"index.js","directories":{},"keywords":["custom","element","custom element","html elements","custom elements framework","ui components","calendar","button","datepicker","accordion","checkbox","radio button","user interface components","tabs","tabstrip","input","autocomplete","custom elements","frontend framework","front end","user interface","ui toolkit","web components","bootstrap","bootstrap table","bootstrap web components","calendar web component","list web component","bootstrap select","bootstrap calendar","material design","material datepicker","material calendar"],"license":"ISC"}
+{"name":"@smarthtmlelements/smart-core","version":"4.4.0","description":"Smart Core Framework","scripts":{},"repository":{"type":"git","url":"git+https://github.com/HTMLElements/smart-core.git"},"author":"Smart HTML Elements","bugs":{"url":"https://github.com/HTMLElements/smart-core"},"homepage":"https://github.com/HTMLElements/smart-core#readme","devDependencies":{},"dependencies":{"@webcomponents/webcomponentsjs":"^1.0.22"},"main":"index.js","directories":{},"keywords":["custom","element","custom element","html elements","custom elements framework","ui components","calendar","button","datepicker","accordion","checkbox","radio button","user interface components","tabs","tabstrip","input","autocomplete","custom elements","frontend framework","front end","user interface","ui toolkit","web components","bootstrap","bootstrap table","bootstrap web components","calendar web component","list web component","bootstrap select","bootstrap calendar","material design","material datepicker","material calendar"],"license":"ISC"}

source/smart.bootstrap.js

@@ -1,6 +0,6 @@
-/* Smart HTML Elements v4.3.0 (2019-Aug) 
+/* Smart HTML Elements v4.4.0 (2019-Sep) 
 Copyright (c) 2011-2019 jQWidgets. 
 License: https://htmlelements.com/license/ */
 
-Smart('bootstrap-button', class Button extends Smart.ContentElement {
+Smart('bootstrap-button', class BootstrapButton extends Smart.ContentElement {
 	// Button's properties.
@@ -48,2 +48,7 @@ static get properties() {
 
+		if (that.classList.contains('close')) {
+			that.$.button.classList.add('close');
+			return;
+		}
+		
 		that.$.button.className = 'btn';
@@ -70,3 +75,3 @@
 
-Smart('bootstrap-check-box', class CheckBox extends Smart.ContentElement {
+Smart('bootstrap-check-box', class BootstrapCheckBox extends Smart.ContentElement {
 	// Button's properties.
@@ -79,2 +84,6 @@ static get properties() {
 			},
+			'indeterminate': {
+				value: false,
+				type: 'boolean'
+			},
 			'name': {
@@ -86,2 +95,6 @@ type: 'string'
 				type: 'string'
+			},
+			'type': {
+				value: 'checkbox',
+				type: 'string'
 			}
@@ -104,6 +117,6 @@ };
 	template() {
-		return `<label id="button" class="btn">
-				 	<input id="input" type="checkbox" name=\'[[name]]\' autocomplete="off"/>
-				 	<content></content>
-			   </label>`;
+		return `<div><div id="button" class="btn">
+				 	<input indeterminate=[[indeterminate]] checked=[[checked]] id="input" type="checkbox" name=\'[[name]]\' autocomplete="off"/>
+				 	<label id="label"><span><content></content></span></label>
+			   </div></div>`;
 	}
@@ -114,8 +127,33 @@
 
-		if (!(that instanceof Smart.ToggleButton)) {
+		that.$.button.classList.add('component');
+		that.$.label.classList.add('component-label');
+		that.$.input.classList.add('component-input');	
+			
+		that.$.button.classList.remove('btn');
+		that.$.button.classList.remove('switch');
+		that.$.button.classList.remove('checkbox');
+		that.$.button.classList.remove('radio');
+				
+		if (that.type === 'switch') {
+			that.$.button.classList.add('switch');
+		}
+			
+		if (that.type === 'button') {
+			that.$.button.classList.add('btn');
+			that.$.button.classList.add('btn-' + that.styleMode);
+		}
+		
+		if (that.type === 'checkbox') {
+			that.$.button.classList.add('checkbox');
+		}
+		
+		if (that.type === 'radio') {
+			that.$.button.classList.add('radio');
+			that.$.input.type = "radio";
+		}
+		
+		if (!(that instanceof Smart.Bootstrap.ToggleButton)) {
 			that.classList.add('btn-group-toggle');
 		}
-
-		that.$.button.classList.add('btn-' + that.styleMode);
-
+			
 		if (that.checked) {
@@ -144,3 +182,3 @@ that.$.button.classList.add('active');
 		}
-
+		
 		if (that.disabled) {
@@ -150,2 +188,6 @@ return;
 
+		if (that.indeterminate) {
+			that.indeterminate = false;
+		}
+
 		if (that.checked) {
@@ -156,2 +198,13 @@ that.$.button.classList.remove('active');
 		else {
+			if (that instanceof Smart.Bootstrap.RadioButton) {
+				const buttons = document.querySelectorAll('bootstrap-radio');
+
+				for (let i = 0; i < buttons.length; i++) {
+					if (buttons[i].group === that.group) {
+						buttons[i].set('checked', false);
+						buttons[i].$.button.classList.remove('active');
+					}
+				}
+			}
+			
 			that.$.button.classList.add('active');
@@ -182,9 +235,25 @@ that.checked = true;
 
-Smart('bootstrap-toggle-button', class ToggleButton extends Smart.CheckBox {
+Smart('bootstrap-switch-button', class BootstrapSwitchButton extends Smart.Bootstrap.CheckBox {
 	// Button's properties.
 	static get properties() {
 		return {
+			'type': {
+				value: 'switch',
+				type: 'string'
+			}
+		};
+	}
+});
+
+Smart('bootstrap-toggle-button', class BootstrapToggleButton extends Smart.Bootstrap.CheckBox {
+	// Button's properties.
+	static get properties() {
+		return {
 			'styleMode': {
 				value: 'primary',
 				type: 'string'
+			},
+			'type': {
+				value: 'button',
+				type: 'string'
 			}
@@ -194,12 +263,2 @@ };
 
-	/** CheckBox's template. */
-	template() {
-		return `<button id="button" type="button" class="btn" autocomplete="off">
-					<content></content>
-		  		</button>`;
-	}
-
-	/**
-	* CheckBox's Event Listeners
-	*/
 	static get listeners() {
@@ -213,2 +272,9 @@ return {
 
+template() {
+		return `<div><div id="button" class="btn">
+				 	<input class="hide"  indeterminate=[[indeterminate]] checked=[[checked]] id="input" type="checkbox" name=\'[[name]]\' autocomplete="off"/>
+				 	<label id="label"><content></content></label>
+			   </div></div>`;
+	}
+	
 	toggle(event) {
@@ -227,3 +293,3 @@ const that = this;
 		if (that.checked) {
-			if (that instanceof Smart.RadioButton) {
+			if (that instanceof Smart.Bootstrap.RadioButton) {
 				that.$.button.focus();
@@ -237,13 +303,2 @@ return;
 		else {
-			if (that instanceof Smart.RadioButton) {
-				const buttons = document.querySelectorAll('bootstrap-radio-button');
-
-				for (let i = 0; i < buttons.length; i++) {
-					if (buttons[i].group === that.group) {
-						buttons[i].set('checked', false);
-						buttons[i].$.button.classList.remove('active');
-					}
-				}
-			}
-
 			that.$.button.classList.add('active');
@@ -259,3 +314,3 @@ that.set('checked', true);
 
-Smart('bootstrap-radio-button', class RadioButton extends Smart.ToggleButton {
+Smart('bootstrap-radio-button', class BootstrapRadioButton extends Smart.Bootstrap.CheckBox {
 	// Button's properties.
@@ -271,2 +326,6 @@ static get properties() {
 				type: 'string'
+			},
+			'type': {
+				value: 'radio',
+				type: 'string'
 			}
@@ -277,3 +336,3 @@ };
 
-Smart('bootstrap-drop-down', class DropDown extends Smart.ContentElement {
+Smart('bootstrap-drop-down', class BootstrapDropDown extends Smart.ContentElement {
 
@@ -344,23 +403,23 @@ // DropDown's properties.
 		if (propertyName === 'styleMode' || propertyName === 'sizeMode') {
-			that.$.button.classList.remove('btn-' + oldValue);
+			that.$.button.classList.remove('button-' + oldValue);
 
 			if (propertyName === 'styleMode') {
-				that.$.button.classList.remove('btn-outline-' + newValue);
+				that.$.button.classList.remove('button-outline-' + newValue);
 
 				if (that.$.actionButton) {
-					that.$.actionButton.classList.remove('btn-outline-' + oldValue);
+					that.$.actionButton.classList.remove('button-outline-' + oldValue);
 				}
 
 				if (propertyName === 'outlined') {
-					that.$.button.classList.add('btn-outline-' + newValue);
+					that.$.button.classList.add('button-outline-' + newValue);
 
 					if (that.$.actionButton) {
-						that.$.actionButton.classList.add('btn-outline-' + newValue);
+						that.$.actionButton.classList.add('button-outline-' + newValue);
 					}
 				}
 				else {
-					that.$.button.classList.add('btn-' + newValue);
+					that.$.button.classList.add('button-' + newValue);
 
 					if (that.$.actionButton) {
-						that.$.actionButton.classList.add('btn-' + newValue);
+						that.$.actionButton.classList.add('button-' + newValue);
 					}
@@ -370,7 +429,7 @@ }
 			else {
-				that.$.button.classList.add('btn-' + newValue);
+				that.$.button.classList.add('button-' + newValue);
 
 				if (that.$.actionButton) {
-					that.$.actionButton.classList.remove('btn-' + oldValue);
-					that.$.actionButton.classList.add('btn-' + newValue);
+					that.$.actionButton.classList.remove('button-' + oldValue);
+					that.$.actionButton.classList.add('button-' + newValue);
 				}
@@ -394,3 +453,3 @@ }
 			else {
-				that.$.button.classList.add('btn');
+				that.$.button.classList.add('button');
 				that.$.button.removeAttribute('href');
@@ -695,3 +754,3 @@ }
 		const that = this,
-			coordinates = that.$[that instanceof Smart.SplitButton ? 'button' : 'container'].getBoundingClientRect(),
+			coordinates = that.$[that instanceof Smart.Bootstrap.SplitButton ? 'button' : 'container'].getBoundingClientRect(),
 			dropDown = that.$.dropDownContainer;
@@ -722,3 +781,3 @@ let top = coordinates.top,
 
-Smart('bootstrap-split-button', class SplitButton extends Smart.DropDown {
+Smart('bootstrap-split-button', class BootstrapSplitButton extends Smart.Bootstrap.DropDown {
 
@@ -771,3 +830,3 @@ /** CheckBox's template. */
 
-Smart('bootstrap-input-group', class InputGroup extends Smart.ContentElement {
+Smart('bootstrap-input-group', class BootstrapInputGroup extends Smart.ContentElement {
 	// Element's properties.
@@ -812,3 +871,3 @@ static get properties() {
 
-	/** Button's template. */
+	
 	template() {
@@ -837,3 +896,3 @@ return `<div class="input-group" id="container">
 		else if (propertyName === 'placeholder' || propertyName === 'name' || propertyName === 'type') {
-			const inputs = that.$.inputContainer.querySelectorAll('.form-control');
+			const inputs = that.$.inputContainer.querySelectorAll('.form-component');
 
@@ -867,3 +926,3 @@ for (let i = 0; i < inputs.length; i++) {
 			appendContainer = that.$.appendContainer;
-		let formControl = container.querySelector('.form-control');
+		let formControl = container.querySelector('.form-component');
 
@@ -876,3 +935,3 @@ if (!formControl) {
 			input.name = that.name;
-			input.classList.add('form-control');
+			input.classList.add('form-component');
 
@@ -894,3 +953,3 @@ container.appendChild(input);
 
-			if (!pe.classList.contains('form-control')) {
+			if (!pe.classList.contains('form-component')) {
 				prependContainer.insertBefore(pe, prependContainer.firstElementChild);
@@ -900,2 +959,6 @@ }
 
+		for(let i = 0; i < prependContainer.children.length; i++) {
+			prependContainer.children[i].classList.add('input-group-item');
+		}
+			
 		let nextEl = formControl.nextElementSibling;
@@ -912,6 +975,11 @@
 
-			if (!nx.classList.contains('form-control')) {
+			if (!nx.classList.contains('form-component')) {
 				appendContainer.appendChild(nx);
 			}
 		}
+		
+		for(let i = 0; i < appendContainer.children.length; i++) {
+			appendContainer.children[i].classList.add('input-group-item');
+		}
+	
 
@@ -944,3 +1012,3 @@ while (container.firstElementChild) {
 
-Smart('bootstrap-modal', class Modal extends Smart.ContentElement {
+Smart('bootstrap-modal', class BootstrapModal extends Smart.ContentElement {
 	// Element's properties.
@@ -958,3 +1026,3 @@ static get properties() {
 			},
-			'focus': {
+			'focusable': {
 				value: true,
@@ -993,8 +1061,8 @@ type: 'boolean'
 
-	/** Button's template. */
+	
 	template() {
-		return `<div class="modal-dialog" id="dialog">
+		return `<div><div class="modal-dialog" id="dialog">
 					<div class="modal-content" inner-h-t-m-l="[[innerHTML]]">
 						<content></content>
-				</div>`;
+				</div></div>`;
 	}
@@ -1011,3 +1079,3 @@
 
-		if (propertyName === 'focus') {
+		if (propertyName === 'focusable') {
 			newValue ? that.setAttribute('tabindex', -1) : that.removeAttribute('tabindex');
@@ -1398,3 +1466,3 @@ }
 
-Smart('bootstrap-tabs', class Tabs extends Smart.ContentElement {
+Smart('bootstrap-tabs', class BootstrapTabs extends Smart.ContentElement {
 	// Element's properties.
@@ -1430,2 +1498,6 @@ static get properties() {
 				type: 'boolean'
+			},
+			'styleMode': {
+				value: '',
+				type: 'string'	
 			}
@@ -1444,3 +1516,3 @@ };
 
-	/** Button's template. */
+	
 	template() {
@@ -1474,2 +1546,6 @@ return '<div id="container"><content></content></div>';
 		}
+		
+		if (that.styleMode) {
+			that.classList.add(that.styleMode);	
+		}
 	}
@@ -1530,2 +1606,9 @@
 		}
+		
+		if (propertyName === 'styleMode') {
+			that.classList.remove(oldValue);
+			if (that.styleMode) {
+				that.classList.add(that.styleMode);
+			}
+		}
 
@@ -1564,3 +1647,3 @@ if (!that._list) {
 			if (navLink) {
-				if (navLink instanceof Smart.DropDown) {
+				if (navLink instanceof Smart.Bootstrap.DropDown) {
 					navLink.querySelector('.dropdown-toggle').classList.add('nav-link');
@@ -1615,2 +1698,3 @@ }
 		that.$.container.insertBefore(list, that.$.container.lastElementChild);
+		that._refreshBarPosition();	
 	}
@@ -1666,3 +1750,3 @@
 			complete()
-		}
+		}		
 	}
@@ -1679,7 +1763,42 @@
 	// Private
+  _refreshBarPosition() {
+		const that = this;
 
+		if (!that.bar) {
+			const bar = document.createElement('span');
+			that._list.appendChild(bar);
+			bar.classList.add('bar');
+			
+			that.bar = bar;	
+		}
+		
+	   setTimeout(function () {
+		   const items = Array.from(that.getElementsByClassName('nav-link')),
+			activeItem = items.find(item => item.classList.contains('active'));
+			
+			let width = 0;
+			let activeWidth = 0;
+			
+			for(let i = 0; i < items.length; i++){
+				width += items[i].getBoundingClientRect().width;
+				
+				if (items[i] === activeItem) {
+					activeWidth = width;
+				}
+			}
+			
+		  if (activeItem) {				
+				const rect = activeItem.getBoundingClientRect();
+				
+				that.bar.style.left = -width + activeWidth - activeItem.offsetWidth + 'px';
+				that.bar.style.top = rect.height + 'px';
+				that.bar.style.width = activeItem.offsetWidth + 'px';			
+			}
+		});
+	}
+		
 	_activate(item, container, callback) {
 		const active = container && container.querySelector('.active'),
 			complete = () => this._transitionComplete(item, active, callback);
-
+	
 		if (callback && active && active.classList.contains('fade')) {
@@ -1691,3 +1810,3 @@ active.classList.remove('show');
 			complete()
-		}
+		}	
 	}
@@ -1711,3 +1830,4 @@
 		element.classList.add('active');
-
+		this._refreshBarPosition();
+		
 		if (element.getAttribute('role') === 'tab') {
@@ -1756,1 +1876,291 @@ element.setAttribute('aria-selected', true)
 });
+
+Smart('bootstrap-range', class BootstrapRange extends Smart.BaseElement {
+	// Button's properties.
+	static get properties() {
+		return {
+			'min': {
+				value: 0,
+				type: 'number'
+			},
+			'max': {
+				value: 10,
+				type: 'number'	
+			},
+			'name': {
+				type: 'string'
+			},
+			'value': {
+				value: 5,
+				type: 'number'	
+			}
+		};
+	}
+
+	/**
+	* CheckBox's Event Listeners
+	*/
+	static get listeners() {
+		return {
+			'input.focus': 'focus',
+			'input.blur': 'blur'
+		};
+	}
+
+	/** CheckBox's template. */
+	template() {
+		return `<div><div id="range" class="slider">
+				 	<input value=[[value]] max=[[max]] min=[[min]] disabled=[[disabled]]  id="input" type="range" name=\'[[name]]\'/>
+			  </div></div>`;
+	}
+
+	ready() {
+		const that = this;
+
+		that.$.range.classList.add('component');
+		that.$.input.classList.add('component-input');
+		that.$.input.classList.add('range');
+	}
+
+	propertyChangedHandler(propertyName, oldValue, newValue) {
+		const that = this;	
+	}
+
+	blur() {
+		this.$.range.classList.remove('focus');
+	}
+
+	focus() {
+		this.$.range.classList.add('focus');
+	}
+});
+
+Smart('bootstrap-progress', class BootstrapProgress extends Smart.ContentElement {
+	// Button's properties.
+	static get properties() {
+		return {
+			'min': {
+				value: 0,
+				type: 'number'
+			},
+			'max': {
+				value: 10,
+				type: 'number'	
+			},
+			'name': {
+				type: 'string'
+			},
+			'type': {
+				value: '',
+				type: 'string'
+			},
+			'value': {
+				value: 5,
+				type: 'number'	
+			},
+			'striped': {
+				value: false,
+				type: 'boolean'	
+			},
+			'styleMode': {
+				value: 'primary',
+				type: 'string'	
+			}
+		};
+	}
+
+	template() {
+		return `<div><div id="progress" class="progress">
+				 	<div class="progress-bar" role="progressbar" aria-valuenow==[[value]] aria-valuemax==[[max]] aria-valuemin==[[min]] disabled=[[disabled]]  id="progressbar" name=\'[[name]]\'><content></content></div>
+			  </div>
+			 <progress id="circular" class="hide circular"/>
+			  </div>`;
+	}
+
+	refresh() {
+		const that = this;
+	
+		let value = Math.max(that.min, that.value);
+		value = Math.min(that.value, that.max);
+		
+		const width = (value * that.offsetWidth) / (that.max - that.min)
+		
+		that.$.progressbar.style.width = width + 'px';
+		that.$.progressbar.classList.add('bg-' + that.styleMode);
+		that.$.circular.classList.add('bg-' + that.styleMode);
+		
+		that.$.progressbar.classList.remove('progress-bar-striped');
+		
+		if (that.striped) {
+			that.$.progressbar.classList.add('progress-bar-striped');		
+		}
+			
+		if (that.type === 'circular') {
+			that.$.progress.classList.add('hide');
+			that.$.circular.classList.remove('hide');
+		}
+		else {
+			that.$.progress.classList.remove('hide');
+			that.$.circular.classList.add('hide');
+		}
+	}
+	
+	ready() {
+		const that = this;
+
+		that.$.progress.classList.add('component');
+		
+		that.refresh();
+	}
+
+	propertyChangedHandler(propertyName, oldValue, newValue) {
+		const that = this;	
+		
+		that.refresh();
+	}
+});
+
+Smart('bootstrap-circular', class BootstrapCircular extends Smart.Bootstrap.Progress {
+	static get properties() {
+			return {
+				'type': {
+					value: 'circular',
+					type: 'string'	
+				}
+			}
+	}
+});
+
+Smart('bootstrap-input', class BootstrapTextBox extends Smart.ContentElement {
+	static get properties() {
+		return {
+			'name': {
+				value: '',
+				type: 'string'	
+			},
+			'value': {
+				value: '',
+				type: 'string'	
+			},
+			'placeholder': {
+				value: '',
+				type: 'string'	
+			},
+			'required': {
+				value: false,
+				type: 'boolean'	
+			},	
+			'outlined': {
+				value: false,
+				type: 'boolean'	
+			},			
+			'filled': {
+				value: false,
+				type: 'boolean'	
+			},					
+			'styleMode': {
+				value: 'outlined',
+				type: 'string'	
+			}			
+		};
+	}
+
+	template() {
+		return `<div><label input id="label">
+            <input name=[[name]] type="text" class="form-component" id="input" placeholder="[[placeholder]]"
+									value="{{value::keydown}}" required="[[required]]"/>
+            <span id="span">[[placeholder]]</span>
+        </label></div>`;
+	}
+
+	refresh() {
+		const that = this;
+	
+		that.$.label.removeAttribute('outlined');
+		that.$.label.removeAttribute('filled');
+		that.$.label.removeAttribute('default');
+		
+		if (that.outlined) {
+			that.$.label.setAttribute('outlined', '');
+		}
+		else if (that.filled) {
+			that.$.label.setAttribute('filled', '');
+		}
+		else {
+			that.$.label.setAttribute('default', '');
+		}
+		
+		that.$.label.className = '';
+		
+		if (that.styleMode) {
+			that.$.label.classList.add(that.styleMode);	
+			that.$.label.setAttribute('highlight', '');
+		}
+	}
+	
+	ready() {
+		const that = this;
+	
+		that.refresh();
+	}
+
+	propertyChangedHandler(propertyName, oldValue, newValue) {
+		const that = this;	
+		
+		that.refresh();
+	}
+});
+
+Smart('bootstrap-textarea', class BootstrapTextArea extends Smart.Bootstrap.Input {
+	template() {
+		return `<div><label input id="label">
+            <textarea name=[[name]] type="text" class="form-component" id="input" placeholder="[[placeholder]]"
+									value="{{value::keydown}}" required="[[required]]"></textarea>
+            <span id="span">[[placeholder]]</span>
+        </label></div>`;
+	}
+});
+
+Smart('bootstrap-file-input', class BootstrapFileInput extends Smart.ContentElement {
+	static get properties() {
+		return {
+			'name': {
+				value: '',
+				type: 'string'	
+			},
+			'placeholder': {
+				value: '',
+				type: 'string'	
+			},	
+			'styleMode': {
+				value: '',
+				type: 'string'	
+			}			
+		};
+	}
+
+	template() {
+		return `<div><div class="file">
+					<input placeholder=[[placeholder]] name=[[name]] type="file" class="file-input" />
+					<label class="file-label" for="inputGroupFile01"><content></content></label>
+				</div></div>`;
+	}
+
+	refresh() {
+		const that = this;	
+	}
+	
+	ready() {
+		const that = this;
+	
+		that.refresh();
+	}
+
+	propertyChangedHandler(propertyName, oldValue, newValue) {
+		const that = this;	
+		
+		that.refresh();
+	}
+});
+
+

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

6746686

increased by46.96%

Number of package files

187

increased by10.65%

Lines of code

43720

increased by335.2%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes