@imposium-hub/components 2.11.6-0 → 2.12.0

package/less/components/form-field.less

@@ -1,157 +1,155 @@
-@labelWidth: 100px;
-@inputHeight: 20px;
-@labelHeight: 20px;
-@fieldMargin: 4px;
-@labelPadding: 4px;
-@inputPadding: 30px;
-
-.inputMixin {
+
+@labelWidth:100px;
+@inputHeight:20px;
+@labelHeight:20px;
+@fieldMargin:4px;
+@labelPadding:5px;
+@inputPadding:30px;
+
+.inputMixin{
 	display: inline-block;
-	background: @inputBackground;
-	border: none;
-	color: @textDefault;
-	font-size: @fontSizeSmall;
-	box-sizing: border-box;
+	background:@inputBackground;
+	border:none;
+	color:@textDefault;
+	font-size:@fontSizeSmall;
+	box-sizing:border-box;
 	vertical-align: top;
-	height: @inputHeight;
-	width: 100%;
+	height:@inputHeight;
+	width:100%;
 	font-family: 'Roboto Condensed', sans-serif;
 	border-radius: 0;
-	appearance: none;
-
-	&:hover {
-		background: darken(@inputBackground, 3%);
+	appearance:none;
+	
+	&:hover{
+		background:darken(@inputBackground, 3%);
 	}
 
-	&:focus {
-		background: darken(@inputBackground, 3%);
+	&:focus{
+		background:darken(@inputBackground, 3%);	
 	}
 
-	&:disabled {
-
-		color: fadeout(@textDefault, 60%);
-		background: @inputBackground;
+	&:disabled{
+		
+		color:fadeout(@textDefault, 60%);
+		background:@inputBackground;
 		pointer-events: none;
-
-		&:focus {
-			background: @inputBackground;
-		}
-
-		&:hover {
-			background: @inputBackground;
+		&:focus{
+			background:@inputBackground;
 		}
+		&:hover{
+			background:@inputBackground;
+		}	
 	}
 }
 
-.form-field {
-
-	width: 100%;
-	position: relative;
+.form-field{
+	
+	width:100%;
+	position:relative;
 	display: inline-block;
 	vertical-align: top;
-	margin-bottom: @fieldMargin;
-
-	input,
-	textarea {
+	margin-bottom:@fieldMargin;
+	
+	input, textarea{
 		.inputMixin;
-		padding: 4px;
+		padding:4px;
 	}
 
 	.caret {
-		top: -2px;
-	}
+        top: -2px;
+    }
 
 	select {
-		.inputMixin;
-		padding: 4px 15px 4px 4px;
-	}
+        .inputMixin;
+        padding: 4px 15px 4px 4px;
+    }
 
 	input[type=number] {
 		-moz-appearance: textfield;
 	}
-
-	textarea {
-		height: @inputHeight * 3;
-		resize: none;
-		padding-right: 25px;
+	
+	textarea{
+		height:@inputHeight * 3;
+		resize:none;
+		padding-right:25px;
 	}
 
-	&.invalid {
+	&.invalid{
 		color: @danger;
 	}
 
-	label {
-		font-size: @fontSizeSmall;
-		line-height: 21px;
+	label{
+		font-size:@fontSizeSmall;
+		line-height:21px;
 		display: inline-block;
 		vertical-align: top;
-		height: @labelHeight;
-		text-align: right;
-		padding-right: @labelPadding;
+		height:@labelHeight;
+		text-align:right;
+		padding-right:@labelPadding;
 		box-sizing: border-box;
 		width: @labelWidth;
-
-		&.label-top {
-			width: unset;
+		
+		&.label-top{
+			width:unset;
 			text-align: left;
-			padding-right: @labelPadding/2;
-			padding-left: @labelPadding/2;
+			padding-right:@labelPadding/2;
+			padding-left:@labelPadding/2;
 		}
 	}
 
-	.form-field-content {
-		width: calc(100% - @labelWidth);
+	.form-field-content{
+		width:calc(100% - @labelWidth);
 		display: inline-block;
 		vertical-align: top;
-		box-sizing: border-box;
+		box-sizing:border-box;
 
-		&.label-top {
-			padding-left: @labelPadding/2;
-			padding-right: @labelPadding/2;
-			width: 100%;
+		&.label-top{
+			padding-left:@labelPadding/2;
+			padding-right:@labelPadding/2;
+			width:100%;
 
-			.form-field-buttons {
-				top: @labelHeight;
+			.form-field-buttons{
+				top:@labelHeight;
 			}
 		}
 	}
 
-	.form-field-buttons {
-		position: absolute;
-		height: @inputHeight;
-		top: 0px;
-		right: 0px;
-		background: @inputBackground;
+	.form-field-buttons{
+		position:absolute;
+		height:@inputHeight;
+		top:0px;
+		right:0px;
+		background:@inputBackground;
 		z-index: 1000;
 	}
 
-	&.no-label {
-		.form-field-content {
-			width: calc(100% - @labelPadding);
-			margin-left: @labelPadding;
+	&.no-label{
+		.form-field-content{
+			width:calc(100% - @labelPadding);
+			margin-left:@labelPadding;
 		}
 	}
 }
 
-.filterable-cell-wrapper .form-field-buttons {
-	position: absolute;
+.filterable-cell-wrapper .form-field-buttons{
+	position:absolute;
 	height: 18px;
-	top: 4px;
-	right: 0px;
-	background: @inputBackground;
+	top:4px;
+	right:0px;
+	background:@inputBackground;
 	z-index: 1000;
 }
 
-.checkbox-field {
-
-	.checkbox {
+.checkbox-field{
+	
+	.checkbox{
 		.inputMixin;
-		display: flex;
+		display:flex;
 		border: 1px solid @backgroundLight;
 		border-radius: 2px;
-		width: 18px;
-		height: 18px;
-		padding: 2px;
+		width:18px;
+		height:18px;
+		padding:2px;
 		cursor: pointer;
 
 		.fa-check {
@@ -160,139 +158,100 @@
 	}
 }
 
-.button-group-field {
-	.override_variable {
-		cursor: not-allowed;
-
-		&:hover {
-			.item {
-				.buttons {
-					display: block;
-				}
-			}
-		}
-
-		.item {
-			top: 20px;
-			position: absolute;
-			background-color: transparent;
-			width: 100%;
-
-			.buttons {
-				display: none;
-				height: 20px;
-				float: right;
-				padding-right: 5px;
-			}
-		}
-	}
+.button-group-field{
 
-	.button-group {
+	.button-group{
 
 		.inputMixin;
 
-		&:hover {
-			background: @inputBackground;
+		&:hover{
+			background:@inputBackground;
 		}
-
-		.button-group-option {
-			height: 100%;
+		
+		.button-group-option{
+			height:100%;
 			user-select: none;
 			display: inline-block;
-			text-align: center;
+			text-align:center;
 			cursor: pointer;
 			padding-top: 1px;
 			box-sizing: border-box;
-			color: darken(@textDefault, 30%);
+			color:darken(@textDefault, 30%);
 			background: #373737;
-
-			&:hover {
-				background: darken(@inputBackground, 5%);
-			}
-
-			&.active {
-				cursor: auto;
-				background: unset;
-				color: unset;
+			&:hover{
+				background:darken(@inputBackground, 5%);
 			}
 
-			&.disabled {
-				cursor: not-allowed;
-				background: unset;
-				user-select: none;
+			&.active{
+				cursor:auto;
+				background:unset;
+				color:unset;
 			}
 
+			&.disabled svg {
+				color: gray;
+				}
 		}
 	}
 }
 
-.text-area-field {
+.text-area-field{
 
-	.form-field-buttons {
-		right: 10px;
-		background: none;
+	.form-field-buttons{
+		right:10px;
+		background:none;
 	}
 }
 
-.select-field {
-	&.override_variable {
-		.form-field-buttons {
-			display: none;
-		}
-
-		.item {
-			width: fit-content !important;
-		}
-	}
+.select-field{
 
-	select {
+	select{
 		line-height: 12px;
 	}
 }
 
-.text-field {
+.text-field{
 
-	.controlled-input {
-		padding-right: 25px;
+	.controlled-input{
+		padding-right:25px;
 	}
 }
 
-@sliderValWidth: 30px;
+@sliderValWidth:30px;
+.slider-field{
+	
+	input{
+		width:calc(100% - @sliderValWidth);
+		margin:0px;
 
-.slider-field {
-
-	input {
-		width: calc(100% - @sliderValWidth);
-		margin: 0px;
-
-		&.toggle {
-			width: calc(100% - @sliderValWidth - 18px);
+		&.toggle{
+			width:calc(100% - @sliderValWidth - 18px);
 		}
 	}
 
-	.val {
+	.val{
 		display: inline-block;
 		vertical-align: top;
-		width: @sliderValWidth;
-		text-align: right;
-		padding: 2px;
+		width:@sliderValWidth;
+		text-align:right;
+		padding:2px;
 		line-height: 14px;
-		border-top: 2px solid @inputBackground;
-		border-right: 2px solid @inputBackground;
-		border-bottom: 2px solid @inputBackground;
-		height: @inputHeight;
-		box-sizing: border-box;
-		background: lighten(@inputBackground, 4%);
+		border-top:2px solid @inputBackground;
+		border-right:2px solid @inputBackground;
+		border-bottom:2px solid @inputBackground;
+		height:@inputHeight;
+		box-sizing:border-box;
+		background:lighten(@inputBackground, 4%);
 	}
 
-	.checkbox {
+	.checkbox{
 		.inputMixin;
 		line-height: 10px;
 		border: 1px solid @backgroundLight;
 		border-radius: 2px;
-		width: 18px;
-		height: 18px;
-		padding: 2px;
+		width:18px;
+		height:18px;
+		padding:2px;
 		cursor: pointer;
 
 		.fa-check {
@@ -301,71 +260,70 @@
 	}
 }
 
-.color-field {
-
-	.form-field-content {
-
-		&.label-top {
-
-			.picker {
-				top: @inputHeight + @labelHeight;
+.color-field{
+	
+	.form-field-content{
 
-				&.picker-left {
-					left: 0px;
+		&.label-top{
+			
+			.picker{
+				top:@inputHeight + @labelHeight;
+				&.picker-left{
+					left:0px;
 					top: -200px;
 				}
 
-				&.picker-right {
-					right: 0px;
+				&.picker-right{
+					right:0px;
 					top: -200px;
 				}
 			}
 		}
 
-		.swatch {
+		.swatch{
 			display: inline-block;
-			height: @inputHeight;
-			width: 100%;
+			height:@inputHeight;
+			width:100%;
 		}
-
-		.picker {
-			position: absolute;
-			top: @inputHeight + 3px;
-			z-index: 15000;
-
-			&.picker-left {
-				left: @labelWidth
+		
+		.picker{
+			position:absolute;
+			top:@inputHeight + 3px;
+			z-index:15000;
+
+			&.picker-left{
+				left:@labelWidth
 			}
 
-			&.picker-right {
-				right: 0px;
+			&.picker-right{
+				right:0px;
 			}
 
-			.sketch-picker {
-
-				background: @backgroundLight !important;
+			.sketch-picker{
+			
+				background:@backgroundLight !important;
 
-				input {
-					box-shadow: none !important;
+				input{
+					box-shadow:none !important;
 				}
-
-				span {
-					color: @textDefault !important;
+				
+				span{
+					color:@textDefault !important;
 				}
 
-				label {
-					width: unset;
+				label{
+					width:unset;
 				}
 
-				.flexbox-fix {
-					border-top: none !important;
+				.flexbox-fix{
+					border-top:none !important;
 				}
 			}
 		}
 	}
 }
 
-.caret {
+.caret{
 	display: block;
 	width: 18px;
 	height: 100%;
@@ -374,7 +332,7 @@
 	box-sizing: border-box;
 	user-select: none;
 	pointer-events: none;
-	color: lighten(@inputBackground, 10%);
-	position: absolute;
-	left: -18px;
-}
+	color:lighten(@inputBackground, 10%);
+    position: absolute;
+    left: -18px;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@imposium-hub/components",
-    "version": "2.11.6-0",
+    "version": "2.12.0",
     "description": "React & Typescript component / asset library for Imposium front-ends",
     "main": "./dist/cjs/index.js",
     "module": "./dist/esm/index.js",
@@ -35,7 +35,7 @@
     "homepage": "https://github.com/NickelMedia/Imposium-Hub-Components#readme",
     "dependencies": {
         "@imposium-hub/react-color": "^2.19.4",
-        "@imposium-hub/react-textarea-autocomplete": "^4.9.13-6",
+        "@innovid/feature-flags-react": "^1.1.0-6",
         "ansi_up": "^5.1.0",
         "cogo-toast": "^4.2.3",
         "export-to-csv": "^0.2.1",
@@ -43,7 +43,6 @@
         "imposium-js-sdk": "^3.5.6",
         "js-cookie": "^2.2.1",
         "lodash": "^4.17.21",
-        "moize": "^6.1.0",
         "moment": "^2.29.1",
         "react-hotkeys-hook": "^4.4.1",
         "react-merge-refs": "^1.1.0",

package/src/components/advanced-number-field/AdvancedNumberField.tsx

@@ -18,15 +18,6 @@ interface IAdvancedNumberFieldProps {
     max?: number;
     toggleRef?: any;
     labelWidth?: string | number;
-
-    override?: any;
-    showCopyPropIds?: boolean;
-    propKey?: string;
-    setOverride?(e): void;
-    removeOverride?(): void;
-    inventory?: any;
-    onClose?(e: boolean): void;
-    activeOverride: string;
 }
 
 interface IAdvancedNumberFieldState {
@@ -130,6 +121,7 @@ class AdvancedNumberField extends React.PureComponent<
         let error: string = null;
 
         const {
+            label,
             placeholder,
             width,
             readOnly,
@@ -139,15 +131,7 @@ class AdvancedNumberField extends React.PureComponent<
             labelPosition,
             min,
             max,
-            labelWidth,
-            override,
-            showCopyPropIds,
-            propKey,
-            inventory,
-            setOverride,
-            removeOverride,
-            onClose,
-            activeOverride
+            labelWidth
         } = this.props;
 
         const { showDropDown } = this.state;
@@ -189,22 +173,13 @@ class AdvancedNumberField extends React.PureComponent<
         return (
             <FieldWrapper
                 customClass={`advanced-number-field ${this.state.error ? 'invalid' : ''}`}
-                label={this.props.label}
+                label={label}
                 tooltip={tooltip}
                 buttons={buttons}
                 info={error}
                 labelPosition={labelPosition}
                 labelWidth={labelWidth}
-                width={width}
-                propKey={propKey}
-                showCopyPropIds={showCopyPropIds}
-                inventory={inventory}
-                setOverride={setOverride}
-                onClose={onClose}
-                activeOverride={activeOverride}
-                removeOverride={removeOverride}
-                override={override}
-                type='number'>
+                width={width}>
                 <input
                     type='button'
                     className='minus-font-size'