@imposium-hub/components 2.13.7 → 2.14.0

package/less/components/form-field.less

@@ -1,155 +1,157 @@
-
-@labelWidth:100px;
-@inputHeight:20px;
-@labelHeight:20px;
-@fieldMargin:4px;
-@labelPadding:5px;
-@inputPadding:30px;
-
-.inputMixin{
+@labelWidth: 100px;
+@inputHeight: 20px;
+@labelHeight: 20px;
+@fieldMargin: 4px;
+@labelPadding: 4px;
+@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;
+
+		&:focus {
+			background: @inputBackground;
+		}
+
+		&:hover {
+			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 {
@@ -158,100 +160,139 @@
 	}
 }
 
-.button-group-field{
+.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{
+	.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%);
+
+			&:hover {
+				background: darken(@inputBackground, 5%);
 			}
 
-			&.active{
-				cursor:auto;
-				background:unset;
-				color:unset;
+			&.active {
+				cursor: auto;
+				background: unset;
+				color: unset;
+			}
+
+			&.disabled {
+				cursor: not-allowed;
+				background: unset;
+				user-select: none;
 			}
 
-			&.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{
+.select-field {
+	&.override_variable {
+		.form-field-buttons {
+			display: none;
+		}
+
+		.item {
+			width: fit-content !important;
+		}
+	}
 
-	select{
+	select {
 		line-height: 12px;
 	}
 }
 
-.text-field{
+.text-field {
 
-	.controlled-input{
-		padding-right:25px;
+	.controlled-input {
+		padding-right: 25px;
 	}
 }
 
-@sliderValWidth:30px;
-.slider-field{
-	
-	input{
-		width:calc(100% - @sliderValWidth);
-		margin:0px;
+@sliderValWidth: 30px;
 
-		&.toggle{
-			width:calc(100% - @sliderValWidth - 18px);
+.slider-field {
+
+	input {
+		width: calc(100% - @sliderValWidth);
+		margin: 0px;
+
+		&.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 {
@@ -260,70 +301,71 @@
 	}
 }
 
-.color-field{
-	
-	.form-field-content{
+.color-field {
+
+	.form-field-content {
+
+		&.label-top {
+
+			.picker {
+				top: @inputHeight + @labelHeight;
 
-		&.label-top{
-			
-			.picker{
-				top:@inputHeight + @labelHeight;
-				&.picker-left{
-					left:0px;
+				&.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%;
@@ -332,7 +374,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.13.7",
+    "version": "2.14.0",
     "description": "React & Typescript component / asset library for Imposium front-ends",
     "main": "./dist/cjs/index.js",
     "module": "./dist/esm/index.js",
@@ -37,6 +37,7 @@
     "dependencies": {
         "@imposium-hub/react-color": "^2.19.4",
         "@innovid/feature-flags-react": "^1.1.0-6",
+        "@imposium-hub/react-textarea-autocomplete": "^4.9.13-6",
         "ansi_up": "^5.1.0",
         "cogo-toast": "^4.2.3",
         "export-to-csv": "^0.2.1",
@@ -44,6 +45,7 @@
         "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,6 +18,17 @@ 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;
+
+    previewMultiplier?: number;
 }
 
 interface IAdvancedNumberFieldState {
@@ -121,7 +132,6 @@ class AdvancedNumberField extends React.PureComponent<
         let error: string = null;
 
         const {
-            label,
             placeholder,
             width,
             readOnly,
@@ -131,7 +141,16 @@ class AdvancedNumberField extends React.PureComponent<
             labelPosition,
             min,
             max,
-            labelWidth
+            labelWidth,
+            override,
+            showCopyPropIds,
+            propKey,
+            inventory,
+            setOverride,
+            removeOverride,
+            onClose,
+            activeOverride,
+            previewMultiplier
         } = this.props;
 
         const { showDropDown } = this.state;
@@ -173,13 +192,23 @@ class AdvancedNumberField extends React.PureComponent<
         return (
             <FieldWrapper
                 customClass={`advanced-number-field ${this.state.error ? 'invalid' : ''}`}
-                label={label}
+                label={this.props.label}
                 tooltip={tooltip}
                 buttons={buttons}
                 info={error}
                 labelPosition={labelPosition}
                 labelWidth={labelWidth}
-                width={width}>
+                width={width}
+                propKey={propKey}
+                showCopyPropIds={showCopyPropIds}
+                inventory={inventory}
+                setOverride={setOverride}
+                onClose={onClose}
+                activeOverride={activeOverride}
+                removeOverride={removeOverride}
+                override={override}
+                type='number'
+                previewMultiplier={previewMultiplier}>
                 <input
                     type='button'
                     className='minus-font-size'