@subiz/widget-v4 4.1.19 → 4.1.21

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@subiz/widget-v4",
-	"version": "4.1.19",
+	"version": "4.1.21",
 	"main": "./compiled_src/lib.js",
 	"scripts": {
 		"dev": "npx webpack serve --config webpack.dev.js",
@@ -12,27 +12,27 @@
 		"@subiz/ajax": "^3.0.12",
 		"@subiz/flow": "^1.0.9",
 		"@subiz/storage": "0.0.8",
-		"@subiz/wsclient": "^4.0.9",
+		"@subiz/wsclient": "^4.0.10",
 		"cookie_js": "1.4.2",
-		"core-js": "^3.28.0",
+		"core-js": "^3.29.0",
 		"css-loader": "5.2.7",
 		"file-loader": "^6.2.0",
 		"less": "^4.1.3",
 		"less-loader": "^11.1.0",
 		"marked": "^4.2.12",
-		"preact": "^10.12.1"
+		"preact": "^10.13.0"
 	},
 	"devDependencies": {
-		"@babel/cli": "^7.20.7",
-		"@babel/core": "^7.20.12",
+		"@babel/cli": "^7.21.0",
+		"@babel/core": "^7.21.0",
 		"@babel/plugin-proposal-class-properties": "^7.18.6",
-		"@babel/plugin-transform-react-jsx": "^7.20.13",
+		"@babel/plugin-transform-react-jsx": "^7.21.0",
 		"@babel/preset-env": "^7.20.2",
 		"babel-loader": "^9.1.2",
 		"babel-plugin-syntax-jsx": "^6.18.0",
 		"html-webpack-plugin": "^5.5.0",
 		"prettier": "^2.8.4",
-		"puppeteer": "^19.7.0",
+		"puppeteer": "^19.7.2",
 		"webpack": "^5.75.0",
 		"webpack-bundle-analyzer": "^4.8.0",
 		"webpack-cli": "^5.0.1",

package/src/chatbox/Events.js

@@ -72,7 +72,7 @@ export default class Events extends Com {
 		let $loading = null
 		let style = 'opacity: 1 !important'
 		if (this.state.loading || this.props.creating) {
-			$loading = <Spinner static mode='blue' size='120' center />
+			$loading = <Spinner static mode={sb.get(this.props.chatbox, 'primary_color', 'dark')} size='120' center />
 			style = 'opacity: 0 !important'
 		}
 

package/src/chatbox/spinner.js

@@ -1,33 +1,22 @@
 const loadingimg = require('../../assets/img/loading_static.svg')
-import { Com } from '../common.js'
-import { h } from 'preact'
+import {Com} from '../common.js'
+import {h} from 'preact'
 
 //  ['size', 'mode', 'static', 'center'],
 export default class Spinner extends Com {
-	render () {
+	render() {
 		let mode = (this.props.mode + '').toLowerCase()
-		let mainColor = mode === 'dark' ? '#000000dd' : mode === 'blue' ? 'rgba(52, 152, 220, .8)' : '#ffffffdd'
-
-		let borderColor = mode === 'dark' ? '#00000055' : mode === 'blue' ? 'rgba(52, 152, 220, .15)' : '#ffffff55'
-
+		let mainColor = mode === 'dark' ? '#000000dd' : mode === 'blue' ? 'rgba(52, 152, 220, .8)' : mode
 		let size = this.props.size || 14
 		let borderWidth = Math.ceil(size / 14)
-
-		let style = `width: ${size}px !important;height: ${size}px!important;color: ${borderColor} !important;border-width: ${borderWidth}px !important;
-    border-left-color: ${borderColor} !important;border-top-color: ${borderColor} !important;
-    border-bottom-color: ${borderColor} !important;border-right-color: ${mainColor} !important;`
-		if (this.props.static) {
-			let style = `width: ${size}px !important;height: ${size}px !important;`
-			if (size < 40) return <LoaderIcon size={size + ''} style={`stroke:${mainColor}`} />
-			if (this.props.center) {
-				return (
-					<div class="loading">
-						<img alt="loading" style={style} src={loadingimg} />
-					</div>
-				)
-			}
-			return <img alt="loading" style={style} src={loadingimg} />
+		let style = `width: ${size}px !important;height: ${size}px !important;`
+		if (this.props.center) {
+			return (
+				<div class='loading'>
+					<img alt='loading' style={style} src={loadingimg} />
+				</div>
+			)
 		}
-		return <div class="spinner1" style={style}></div>
+		return <img alt='loading' style={style} src={loadingimg} />
 	}
 }

package/assets/less/spinner.less

@@ -1,28 +0,0 @@
-.spinner1 {
-  position: relative;
-  display: inline-block;
-  vertical-align: middle;
-  border-style: solid;
-  background: transparent;
-  border-radius: 50%;
-  animation: animate .4s linear infinite;
-  -webkit-backface-visibility: hidden;
-}
-
-@keyframes animate {
-  0% {
-    transform: rotate(0deg) rotateZ(360deg);
-  }
-  100% {
-    transform: rotate(360deg) rotateZ(360deg);
-  }
-}
-
-.loading {
-	flex: 1;
-	align-items: center;
-	justify-content: center;
-	display: flex;
-	flex-direction: column;
-	background: white
-}