@dropi/ui 0.1.20 → 0.1.22

package/dist/collection/components/dropi-phone-input/dropi-phone-input.css

@@ -1,6 +1,22 @@
-:host { display: block; width: 100%; position: relative; }
+:host { display: block; width: 100%; position: relative; font-family: 'Inter', sans-serif; }
 *, *::before, *::after { box-sizing: border-box; }
 
+/* Ocultar spin buttons en inputs numéricos */
+input::-webkit-inner-spin-button,
+input::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  appearance: none;
+  margin: 0;
+}
+input[type='number'] {
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+
+.phone-wrap {
+  width: 100%;
+}
+
 .phone-label {
   display: block;
   font-size: var(--font-size-xs, 10px);
@@ -8,145 +24,186 @@
   margin-bottom: 4px;
 }
 
-.phone-row {
+.phone-input-container {
   display: flex;
   align-items: center;
+  gap: 8px;
+}
+
+.custom-select {
+  position: relative;
+  width: 50%;
+}
+
+.form-control {
+  flex: 1;
+  width: 100%;
   border: 1px solid var(--Gray-Gray-200, #c3c9d9);
-  border-radius: var(--Border-2, 8px);
-  background: var(--Neutral-White, #fff);
+  border-radius: 5px;
+  font-size: 14px;
+  font-family: inherit;
+  transition: border-color 0.3s ease-in-out;
   height: 40px;
-  overflow: hidden;
-  transition: border-color 0.2s;
+  padding: 0 12px;
+  outline: none;
+  color: var(--Gray-Gray-700, #32394d);
+  background-color: var(--Neutral-White, #ffffff);
 }
-.phone-row:focus-within { border-color: var(--Info-Info-500, #50a5f1); }
-.phone-row--error { border-color: var(--Error-Error-500, #f46a6b); }
-.phone-row--disabled { background: var(--Gray-Gray-50, #f7f8fa); opacity: 0.6; pointer-events: none; }
 
-.phone-selector {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 0 var(--Size-2, 8px);
-  background: none;
-  border: none;
-  cursor: pointer;
-  height: 100%;
-  flex-shrink: 0;
+.form-control::placeholder {
+  color: var(--Gray-Gray-500, #69738c);
 }
-.phone-selector:disabled { cursor: default; }
 
-.phone-selector__flag {
-  font-size: var(--font-size-xs, 10px);
-  font-weight: var(--font-weight-bold, 700);
-  color: var(--Gray-Gray-800, #1a2033);
-  letter-spacing: 0.5px;
+.form-control:focus::placeholder {
+  color: var(--Gray-Gray-500, #69738c);
 }
 
-.phone-selector__dial {
+.form-control:focus {
+  border-color: var(--Info-Info-500, #50a5f1);
+  outline: none;
+}
+
+.form-control:disabled {
+  border: 1px solid var(--Gray-Gray-200, #c3c9d9) !important;
+  color: var(--Gray-Gray-400, #858ea6);
+  background-color: var(--Gray-Gray-50, #f7f8fa);
+  outline: none;
+}
+
+.form-control.is-invalid {
+  background: #fffbfb;
+  border-color: var(--Error-Error-500, #f46a6b) !important;
+}
+
+.select-button {
+  width: 100%;
+  height: 40px;
+  padding: 0.47rem 0.75rem;
+  padding-right: 7px;
+  border: 1px solid var(--Gray-Gray-200, #c3c9d9);
+  border-radius: var(--Border-2, 8px);
+  background: var(--Neutral-White, #ffffff);
+  color: var(--Gray-Gray-500, #69738c);
   font-size: var(--font-size-s, 12px);
-  color: var(--Gray-Gray-600, #475066);
+  font-family: inherit;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  text-align: left;
+  cursor: pointer;
 }
 
-.phone-divider {
-  width: 1px;
+.select-button img {
+  width: 20px;
   height: 20px;
-  background: var(--Gray-Gray-200, #c3c9d9);
-  flex-shrink: 0;
 }
 
-.phone-input {
-  flex: 1;
-  height: 100%;
-  padding: 0 var(--Size-2, 8px);
-  border: none;
+.select-button:focus {
+  border-color: var(--Info-Info-500, #50a5f1) !important;
   outline: none;
-  font-size: var(--font-size-s, 12px);
-  font-family: inherit;
-  color: var(--Gray-Gray-700, #32394d);
-  background: transparent;
 }
-.phone-input::placeholder { color: var(--Gray-Gray-400, #858ea6); }
 
-.phone-error {
-  margin: 4px 0 0;
-  font-size: var(--font-size-xs, 10px);
-  color: var(--Error-Error-500, #f46a6b);
+.select-button:disabled {
+  border-color: var(--Gray-Gray-200, #c3c9d9);
+  color: var(--Gray-Gray-400, #858ea6);
+  background-color: var(--Gray-Gray-50, #f7f8fa);
+  cursor: unset;
+}
+
+.select-button.select-completed {
+  border-color: var(--Gray-Gray-400, #858ea6);
+  color: var(--Gray-Gray-600, #475066);
+  background: var(--Neutral-White, #ffffff);
+}
+
+.select-button.select-invalid {
+  border-color: var(--Error-Error-500, #f46a6b) !important;
 }
 
-/* Dropdown */
-.phone-dropdown {
+.select-dropdown {
   position: absolute;
-  top: calc(100% + 4px);
-  left: 0;
-  right: 0;
-  background: var(--Neutral-White, #fff);
-  border: 1px solid var(--Gray-Gray-200, #c3c9d9);
+  width: 100%;
+  overflow: hidden;
+  list-style: none;
+  padding: 0;
+  margin: 4px 0 0 0;
+  border: 1px solid transparent;
   border-radius: var(--Border-2, 8px);
-  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
-  z-index: 200;
-  max-height: 240px;
-  overflow-y: auto;
+  overflow-y: scroll;
+  z-index: 100;
 }
 
-.phone-dropdown__search-wrap {
-  padding: var(--Size-2, 8px);
-  border-bottom: 1px solid var(--Gray-Gray-100, #eceef4);
-  position: sticky;
-  top: 0;
-  background: var(--Neutral-White, #fff);
+/* Scrollbar */
+.select-dropdown::-webkit-scrollbar {
+  width: 6px;
+}
+.select-dropdown::-webkit-scrollbar-thumb {
+  background-color: var(--Gray-Gray-300, #d1d6e1);
+  border-radius: 4px;
 }
 
-.phone-dropdown__search {
-  width: 100%;
-  height: 32px;
-  padding: 0 var(--Size-2, 8px);
+.expanded-select {
+  max-height: 250px;
+  background: var(--Neutral-White, #ffffff);
+  box-shadow: var(--Shadow-medium, 0 4px 16px rgba(0, 0, 0, 0.08));
   border: 1px solid var(--Gray-Gray-200, #c3c9d9);
-  border-radius: var(--Border-1, 4px);
-  font-size: var(--font-size-s, 12px);
-  font-family: inherit;
-  color: var(--Gray-Gray-700, #32394d);
-  outline: none;
+  transition: max-height 0.2s ease-in;
 }
-.phone-dropdown__search:focus { border-color: var(--Info-Info-500, #50a5f1); }
 
-.phone-dropdown__item {
+.collapsed-select {
+  max-height: 0;
+  background: transparent;
+  box-shadow: none;
+  border: 1px solid transparent;
+  transition: max-height 0.2s ease-out, background 0.6s ease-out, box-shadow 0.6s ease-out;
+}
+
+.select-dropdown li {
+  margin: 0;
+  padding: 0;
+}
+
+.option {
+  width: 100%;
+  height: 45px;
+  border-radius: var(--Border-2, 8px);
+  padding-top: var(--Size-3, 12px);
+  padding-right: var(--Size-4, 16px);
+  padding-bottom: var(--Size-3, 12px);
+  padding-left: var(--Size-4, 16px);
+  border: none;
+  background: transparent;
+  text-align: left;
+  color: var(--Gray-Gray-600, #475066);
+  font-size: var(--font-size-s, 12px);
+  font-family: inherit;
+  cursor: pointer;
   display: flex;
   align-items: center;
-  gap: var(--Size-2, 8px);
-  padding: var(--Size-2, 8px) var(--Size-3, 12px);
-  cursor: pointer;
-  transition: background 0.15s;
-  user-select: none;
+  gap: 8px;
 }
-.phone-dropdown__item:hover { background: var(--Gray-Gray-50, #f7f8fa); }
-.phone-dropdown__item--active { background: var(--Primary-Primary-50, #fff5eb); }
 
-.phone-dropdown__code {
-  font-size: var(--font-size-xs, 10px);
-  font-weight: var(--font-weight-bold, 700);
-  color: var(--Gray-Gray-800, #1a2033);
-  width: 28px;
-  flex-shrink: 0;
+.option img {
+  width: 20px;
+  height: 20px;
 }
 
-.phone-dropdown__name {
-  flex: 1;
-  font-size: var(--font-size-s, 12px);
-  color: var(--Gray-Gray-700, #32394d);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.option:hover {
+  background: var(--Gray-Gray-50, #f7f8fa);
 }
 
-.phone-dropdown__dial {
-  font-size: var(--font-size-xs, 10px);
+.option:disabled {
   color: var(--Gray-Gray-400, #858ea6);
-  flex-shrink: 0;
+  background-color: var(--Gray-Gray-50, #f7f8fa);
+  cursor: unset;
 }
 
-.phone-dropdown__empty {
-  padding: var(--Size-3, 12px);
-  font-size: var(--font-size-s, 12px);
-  color: var(--Gray-Gray-400, #858ea6);
-  text-align: center;
+.invalid-color {
+  color: var(--Error-Error-500, #f46a6b) !important;
+}
+
+.phone-error {
+  margin: 4px 0 0;
+  font-size: var(--font-size-xs, 10px);
+  color: var(--Error-Error-500, #f46a6b);
 }