From ca2378072dc1f55d7e314199ac6754fde97531b3 Mon Sep 17 00:00:00 2001
From: Bruno Oliveira Notario <bruno@exacti.com.br>
Date: Mon, 30 Nov 2020 03:37:15 -0300
Subject: [PATCH] Transitions aren't more dependent on placeholder visibility,
 Intl-tel-input more efective and option to put flags div in right position

---
 README.md           |   2 +-
 demo.html           | 120 ++++++++++++++++++++++++++++++++++++++------
 floating-labels.css |  65 +++++++++++++++---------
 3 files changed, 147 insertions(+), 40 deletions(-)

diff --git a/README.md b/README.md
index bd7bfbc..3ddd319 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 # floating-labels
 Floating Labels for Bootstrap
 
-![Sample without text input](https://i.imgur.com/JWEUrDi.png) ![Sample with text input](https://i.imgur.com/sro4kQC.png)
+![Sample text input](https://i.imgur.com/zGK4SkX.png) 
 
 ## How to use
 
diff --git a/demo.html b/demo.html
index 8a99ac6..e6c2d4f 100644
--- a/demo.html
+++ b/demo.html
@@ -4,9 +4,11 @@
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
-		<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
+		<script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
 		<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
 		<link rel="stylesheet" type="text/css" href="floating-labels.css" media="screen">
+		<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/intl-tel-input@17.0.0/build/css/intlTelInput.min.css" media="screen">
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.0/js/intlTelInput.min.js"></script>
 		<style>
 			
 		
@@ -21,10 +23,6 @@
 			<div class="row">
 				<div class="col-md">
 					<h3 class="mt-5 mb-3">Normal</h3>
-
-					<div class="mb-3">
-						<textarea id="tt" class="form-control shadow-none" placeholder="Floating Label area" rows="4"></textarea>
-					</div>
 		
 					<div class="mb-3">
 						<input type="text" id="tt2" class="form-control shadow-none" placeholder="Floating Label" />
@@ -34,6 +32,10 @@
 						<input type="text" id="tt3" class="form-control form-control-lg shadow-none" placeholder="Floating Label lg" />
 					</div>
 
+					<div class="mb-3">
+						<textarea id="tt" class="form-control shadow-none" placeholder="Floating Label area" rows="4"></textarea>
+					</div>
+
 					<div class="mb-3">
 						<select class="custom-select" id="">
 							<option selected>Choose...</option>
@@ -48,11 +50,6 @@
 				<div class="col-md">
 					<h3 class="mt-5 mb-3">Float</h3>
 
-					<div class="form-label-group">
-						<textarea id="tt4" class="form-control shadow-none" placeholder="Floating Label area" rows="4"></textarea>
-						<label for="tt4">Floating Label area</label>
-					</div>
-		
 					<div class="form-label-group">
 						<input type="text" id="tt5" class="form-control shadow-none" placeholder="Floating Label" />
 						<label for="tt5">Floating Label</label>
@@ -63,6 +60,11 @@
 						<label for="tt6" class="form-control-lg">Floating Label lg</label>
 					</div>
 
+					<div class="form-label-group">
+						<textarea id="tt4" class="form-control shadow-none" placeholder="Floating Label area" rows="4"></textarea>
+						<label for="tt4">Floating Label area</label>
+					</div>
+		
 					<div class="form-label-group">
 						<select class="custom-select shadow-none" id="ttsel1">
 							<option selected>Choose...</option>
@@ -77,11 +79,6 @@
 				<div class="col-md">
 					<h3 class="mt-5 mb-3">Float In-Border</h3>
 
-					<div class="form-label-group in-border">
-						<textarea id="tt7" class="form-control shadow-none" placeholder="Floating Label area" rows="4"></textarea>
-						<label for="tt7">Floating Label area</label>
-					</div>
-
 					<div class="form-label-group in-border">
 						<input type="text" id="tt8" class="form-control shadow-none" placeholder="Floating Label" />
 						<label for="tt8">Floating Label</label>
@@ -92,6 +89,12 @@
 						<label for="tt9" class="form-control-lg">Floating Label lg</label>
 					</div>
 
+					<div class="form-label-group in-border">
+						<textarea id="tt7" class="form-control shadow-none" placeholder="Floating Label area" rows="4"></textarea>
+						<label for="tt7">Floating Label area</label>
+					</div>
+
+
 					<div class="form-label-group in-border">
 						<select class="custom-select" id="ttsel2">
 							<option selected>Choose...</option>
@@ -104,7 +107,38 @@
 				</div>
 			</div>
 	
-
+			<h3 class="mt-5">Intl-tel-input</h3>
+			<div class="row">
+				
+				<div class="col-sm">
+					<h4 class=" mb-3">Float</h4>
+					<div class="form-label-group">
+						<input name="tel[main]" type="tel" class="form-control" data-parsley-phone-validate id="tel" placeholder="Telefone"  />
+						<label for="tel">Telefone</label>
+					</div>
+				</div>
+				<div class="col-sm">
+					<h4 class=" mb-3">Right Float</h4>
+					<div class="form-label-group iti-right">
+						<input name="tel[main]" type="tel" class="form-control" data-parsley-phone-validate id="tel" placeholder="Telefone"  />
+						<label for="tel">Telefone</label>
+					</div>
+				</div>
+				<div class="col-sm">
+					<h4 class="mb-3">Float In-Border</h4>
+					<div class="form-label-group in-border">
+						<input name="tel[main]" type="tel" class="form-control" data-parsley-phone-validate id="tel" placeholder="Telefone"  />
+						<label for="tel">Telefone</label>
+					</div>
+				</div>
+				<div class="col-sm">
+					<h4 class="mb-3">Right Float In-Border</h4>
+					<div class="form-label-group in-border iti-right">
+						<input name="tel[main]" type="tel" class="form-control" data-parsley-phone-validate id="tel" placeholder="Telefone"  />
+						<label for="tel">Telefone</label>
+					</div>
+				</div>
+			</div>
 			
 
 			
@@ -112,6 +146,60 @@
 		</div>
 		
 
+		<script>
+			const telInput = document.querySelectorAll('input[type="tel"]');
+
+			telInput.forEach(function(element, index, array){
+				var iti = [];
+				iti[index] = window.intlTelInput(element, {
+					initialCountry: "auto",
+					geoIpLookup: function(callback) {
+							$.get('https://ipinfo.io', function() {}, "jsonp").always(function(resp) {
+							var countryCode = (resp && resp.country) ? resp.country : "BR";
+								/* $("#pais").val(resp.country);
+								$("#estado").val(resp.region);
+								$("#cidade").val(resp.city);
+								//alert(resp.country); */
+							callback(countryCode);
+							});
+						},
+					utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@17.0.0/build/js/utils.min.js",
+					autoPlaceholder: "aggressive",
+					preferredCountries: ["br", "us", "ca", "uy"],
+					hiddenInput: "full",
+					customContainer: "d-flex intl-tel-input",
+					formatOnDisplay: true
+				});
+
+				element.addEventListener('keyup', function(){
+					formatIntlTelInput(iti[index]);
+				});
+				element.addEventListener('change', function(){
+					formatIntlTelInput(iti[index]);
+				});
+			});
+
+
+			
+
+			function formatIntlTelInput(e) {
+				//console.log(e);
+				if (typeof intlTelInputUtils !== 'undefined') { // utils are lazy loaded, so must check
+					var currentText = e.getNumber(intlTelInputUtils.numberFormat.E164);
+					if (typeof currentText === 'string') { // sometimes the currentText is an object :)
+						e.setNumber(currentText); // will autoformat because of formatOnDisplay=true
+					}
+				}
+			}
+
+			
+			$('.intl-tel-input, .iti').find('input.form-control').each(function(index, element) {
+				let label = $(element).parent().find('~ label');
+				$(element).after(label);
+				//console.log(label);
+			});
+
+		</script>
 
 	</body>
 </html>
\ No newline at end of file
diff --git a/floating-labels.css b/floating-labels.css
index 7811443..397ad7f 100644
--- a/floating-labels.css
+++ b/floating-labels.css
@@ -1,11 +1,11 @@
 :root {
-    --input-padding-x: .75rem;
-    --input-padding-y: .7rem;
+    --input-padding-x: 1rem;
+    --input-padding-y: .5rem;
     --placeholder-color: #6c757d;
-    --top-position: 2px;
+    --top-position: 14px;
     --label-z-index: 5;
     --input-background-color: #ffffff;
-    --top-position-in-border: -4px;
+    --top-position-in-border: 5px;
 }
 .form-label-group {
     position: relative;
@@ -19,7 +19,7 @@
 .form-label-group input,
 .form-label-group textarea,
 .form-label-group label,
-.form-label-group select {
+.form-label-group:not(.in-border) select {
     padding: var(--input-padding-y) var(--input-padding-x);
 }
 
@@ -33,10 +33,10 @@
     color: var(--placeholder-color);
     border-radius: .25rem;
     transition: all .2s ease-in-out;
-    transform-origin: 0 100%;
+    transform-origin: 0 0;
     transform: translateY(-50%);
-    text-align: left;
-    visibility: hidden;
+    text-align: left;/* 
+    visibility: hidden; */
     z-index: var(--label-z-index);
 }
 .form-label-group.form-control {
@@ -76,7 +76,7 @@
     padding-bottom: calc(var(--input-padding-y) / 3);
 }
 
-.form-label-group select {
+.form-label-group:not(.in-border) select {
     padding-bottom: 0;
 }
 
@@ -104,7 +104,8 @@
 
 .form-label-group input::placeholder, .form-label-group textarea::placeholder {
     transition-delay: .2s;
-    color: var(--placeholder-color);
+    color: rgba(255, 255, 255, 0);
+    opacity: 0;
 }
 
 .form-label-group .intl-tel-input label, .form-label-group .iti label {
@@ -114,6 +115,7 @@
 .form-label-group .intl-tel-input input:focus::placeholder, .form-label-group .iti input:focus::placeholder{
     visibility: visible;
     color: var(--placeholder-color);
+    opacity: 1;
 }
 
 
@@ -130,7 +132,7 @@
 }
 
 .form-label-group.in-border input:not(:placeholder-shown) ~ label, .form-label-group.in-border input:focus ~ label, .form-label-group.in-border textarea:not(:placeholder-shown) ~ label, .form-label-group.in-border textarea:focus ~ label, .form-label-group.in-border select ~ label {
-    left: .6em;
+    left: calc(var(--input-padding-x)/10);
     top: var(--top-position-in-border);
     height: auto;
 }
@@ -142,16 +144,15 @@
     background: var(--input-background-color);
     height: 4px;
     top: 50%;
-    left: .2em;
-    right: .2em;
+    left: .7em;
+    right: .7em;
     z-index: -1;
 }
 
 .form-label-group.in-border input,
-.form-label-group.in-border label,
-.form-label-group.in-border select {
+.form-label-group.in-border label {
     
-    padding: 0 var(--input-padding-x);
+    padding: var(--input-padding-y) var(--input-padding-x);
     
 }
 
@@ -161,13 +162,6 @@
     padding: var(--input-padding-y) var(--input-padding-x);
 }
 
-.form-label-group.in-border textarea:not(:placeholder-shown) ~ label,.form-label-group.in-border textarea:focus ~ label {
-   /*  padding: calc(-1 * var(--input-padding-y)) var(--input-padding-x); */
-    /* margin: var(--input-padding-y) var(--input-padding-x); */
-    top: calc(1.85 * var(--top-position-in-border));
-    
-}
-
 .form-label-group.in-border input,
 .form-label-group.in-border textarea, 
 .form-label-group.in-border label,
@@ -175,3 +169,28 @@
     transition: all .2s linear, border-color .5s ease-in-out,box-shadow .5s ease-in-out;
 }
 
+
+.form-label-group.in-border .intl-tel-input input:not(:placeholder-shown) ~ label, .form-label-group.in-border .intl-tel-input input:focus ~ label, .form-label-group.in-border .iti input:not(:placeholder-shown) ~ label, .form-label-group.in-border .iti input:focus ~ label {
+    margin-left: 0px;
+}
+
+.form-label-group.iti-right .iti__flag-container {
+    right: 0;
+    left: auto;
+}
+
+.form-label-group.iti-right .iti--allow-dropdown input, .form-label-group.in-border.iti-right .iti--allow-dropdown input[type="tel"], .iti--allow-dropdown input[type="text"], .form-label-group.iti-right .iti--separate-dial-code input, .form-label-group.iti-right .iti--separate-dial-code input[type="tel"], .form-label-group.iti-right .iti--separate-dial-code input[type="text"] {
+    padding-left: var(--input-padding-x);
+}
+
+.form-label-group.iti-right .intl-tel-input label, .form-label-group.iti-right .iti label {
+    margin-left: auto;
+}
+
+.form-label-group.iti-right .iti__country-list {
+    right: 0px;
+}
+
+.form-label-group .iti__country-list {
+    z-index: calc(var(--label-z-index) + 2) !important;
+}
\ No newline at end of file