From f780370057ec737e72b353d7fbd55f0947abef3d Mon Sep 17 00:00:00 2001 From: carlos Date: Mon, 30 Mar 2026 16:45:04 +0200 Subject: [PATCH 1/8] - Change of inputs to be one input group, rather than two separate inputs --- src/Forms/Controls/PhoneNumberInput.php | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/Forms/Controls/PhoneNumberInput.php b/src/Forms/Controls/PhoneNumberInput.php index 10d5a10..10fa2a1 100644 --- a/src/Forms/Controls/PhoneNumberInput.php +++ b/src/Forms/Controls/PhoneNumberInput.php @@ -88,13 +88,14 @@ public static function validateType(PhoneNumberInput $control, $type) */ public function getControl() { - $html = ''; + $countryCode = $this->getControlPart(self::CONTROL_COUNTRY_CODE); + $nationalNumber = $this->getControlPart(self::CONTROL_NATIONAL_NUMBER); - foreach (self::CONTROLS as $key) { - $html .= $this->getControlPart($key); - } + $inputGroup = Html::el('div')->setAttribute('class', 'input-group'); + $inputGroup->addHtml($countryCode); + $inputGroup->addHtml($nationalNumber); - return $this->container->setHtml($html); + return $this->container->setHtml($inputGroup); } protected function getCountryCodes() From 5c5cf51c2a8904f1295431bf60e1b483a39fa65c Mon Sep 17 00:00:00 2001 From: carlos Date: Mon, 30 Mar 2026 16:59:39 +0200 Subject: [PATCH 2/8] - Changes of input styles. --- src/Forms/Controls/PhoneNumberInput.php | 29 ++++++++++++++++++------- 1 file changed, 21 insertions(+), 8 deletions(-) diff --git a/src/Forms/Controls/PhoneNumberInput.php b/src/Forms/Controls/PhoneNumberInput.php index 10fa2a1..2018712 100644 --- a/src/Forms/Controls/PhoneNumberInput.php +++ b/src/Forms/Controls/PhoneNumberInput.php @@ -88,14 +88,13 @@ public static function validateType(PhoneNumberInput $control, $type) */ public function getControl() { - $countryCode = $this->getControlPart(self::CONTROL_COUNTRY_CODE); - $nationalNumber = $this->getControlPart(self::CONTROL_NATIONAL_NUMBER); + $html = ''; - $inputGroup = Html::el('div')->setAttribute('class', 'input-group'); - $inputGroup->addHtml($countryCode); - $inputGroup->addHtml($nationalNumber); + foreach (self::CONTROLS as $key) { + $html .= $this->getControlPart($key); + } - return $this->container->setHtml($inputGroup); + return $this->container->setHtml($html); } protected function getCountryCodes() @@ -143,8 +142,21 @@ public function getControlPart($key = null): ?Html $items = array_merge($items, $this->getCountryCodes()); } - return Helpers::createSelectBox($items, null, $value) - ->addAttributes($attrs); + $select = Helpers::createSelectBox($items, null, $value) + ->addAttributes($attrs) + ->setAttribute('class', 'phone-number-country-code') + ->setAttribute('style', 'border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; padding-right: 0;'); + + $style = Html::el('style')->setHtml( + '.phone-number-country-code + .select2-container .select2-selection { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }' + . ' .phone-number-country-code + .select2-container { width: 100% !important; overflow: hidden; }' + . ' .phone-number-country-code + .select2-container .select2-selection__rendered { text-align: right; padding-right: 1.5em; }' + ); + + $wrapper = Html::el(); + $wrapper->addHtml($select); + $wrapper->addHtml($style); + return $wrapper; case self::CONTROL_NATIONAL_NUMBER: if ($this->value instanceof PhoneNumber) { @@ -157,6 +169,7 @@ public function getControlPart($key = null): ?Html 'type' => 'tel', 'value' => $value, 'id' => $this->getHtmlId(), + 'style' => 'border-top-left-radius: 0; border-bottom-left-radius: 0; padding-left: 0;', 'data-nette-rules' => \Nette\Forms\Helpers::exportRules($this->getRules()) ?: null, ], $attrs)); } From 5853c9ef839cce5977a403e8d500d3fd28cb0a01 Mon Sep 17 00:00:00 2001 From: carlos Date: Mon, 30 Mar 2026 17:03:29 +0200 Subject: [PATCH 3/8] - Changes of input styles. --- src/Forms/Controls/PhoneNumberInput.php | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/Forms/Controls/PhoneNumberInput.php b/src/Forms/Controls/PhoneNumberInput.php index 2018712..8120aee 100644 --- a/src/Forms/Controls/PhoneNumberInput.php +++ b/src/Forms/Controls/PhoneNumberInput.php @@ -151,6 +151,9 @@ public function getControlPart($key = null): ?Html '.phone-number-country-code + .select2-container .select2-selection { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }' . ' .phone-number-country-code + .select2-container { width: 100% !important; overflow: hidden; }' . ' .phone-number-country-code + .select2-container .select2-selection__rendered { text-align: right; padding-right: 1.5em; }' + . ' .phone-number-country-code { margin-right: 0 !important; }' + . ' .row.g-2 > .col-5:has(.phone-number-country-code) { padding-right: 0 !important; }' + . ' .row.g-2 > .col-7:has([name$="NationalNumber"]) { padding-left: 0 !important; }' ); $wrapper = Html::el(); From 2110e60b985a23c7ca1be9396e9f8ffad137fd49 Mon Sep 17 00:00:00 2001 From: carlos Date: Mon, 30 Mar 2026 17:05:16 +0200 Subject: [PATCH 4/8] - Changes of input styles - width of the inputs. --- src/Forms/Controls/PhoneNumberInput.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Forms/Controls/PhoneNumberInput.php b/src/Forms/Controls/PhoneNumberInput.php index 8120aee..f9a0301 100644 --- a/src/Forms/Controls/PhoneNumberInput.php +++ b/src/Forms/Controls/PhoneNumberInput.php @@ -152,8 +152,8 @@ public function getControlPart($key = null): ?Html . ' .phone-number-country-code + .select2-container { width: 100% !important; overflow: hidden; }' . ' .phone-number-country-code + .select2-container .select2-selection__rendered { text-align: right; padding-right: 1.5em; }' . ' .phone-number-country-code { margin-right: 0 !important; }' - . ' .row.g-2 > .col-5:has(.phone-number-country-code) { padding-right: 0 !important; }' - . ' .row.g-2 > .col-7:has([name$="NationalNumber"]) { padding-left: 0 !important; }' + . ' .row.g-2 > .col-5:has(.phone-number-country-code) { padding-right: 0 !important; flex: 0 0 20%; max-width: 20%; }' + . ' .row.g-2 > .col-7:has([name$="NationalNumber"]) { padding-left: 0 !important; flex: 0 0 80%; max-width: 80%; }' ); $wrapper = Html::el(); From fc1dd0aad83c3921f190a1857fa7effa1cbe917f Mon Sep 17 00:00:00 2001 From: carlos Date: Tue, 31 Mar 2026 08:19:09 +0200 Subject: [PATCH 5/8] - Changes to input group --- src/Forms/Controls/PhoneNumberInput.php | 29 +++++-------------------- 1 file changed, 6 insertions(+), 23 deletions(-) diff --git a/src/Forms/Controls/PhoneNumberInput.php b/src/Forms/Controls/PhoneNumberInput.php index f9a0301..9a37e4f 100644 --- a/src/Forms/Controls/PhoneNumberInput.php +++ b/src/Forms/Controls/PhoneNumberInput.php @@ -49,7 +49,7 @@ public static function addPhoneNumber(Container $container, $name, $label, $inva { $container->addComponent($control = new self($label), $name); - $control->container = Html::el(); + $control->container = Html::el('div')->setAttribute('class', 'input-group'); $control->controls[static::CONTROL_COUNTRY_CODE] = Html::el(); $control->controls[static::CONTROL_NATIONAL_NUMBER] = Html::el(); $control->setDefaultCountryCode(self::getDefaultCountryCodeByIP()); @@ -88,13 +88,13 @@ public static function validateType(PhoneNumberInput $control, $type) */ public function getControl() { - $html = ''; + $inputGroup = Html::el('div')->setAttribute('class', 'input-group'); foreach (self::CONTROLS as $key) { - $html .= $this->getControlPart($key); + $inputGroup->addHtml($this->getControlPart($key)); } - return $this->container->setHtml($html); + return $this->container->setHtml($inputGroup); } protected function getCountryCodes() @@ -142,24 +142,8 @@ public function getControlPart($key = null): ?Html $items = array_merge($items, $this->getCountryCodes()); } - $select = Helpers::createSelectBox($items, null, $value) - ->addAttributes($attrs) - ->setAttribute('class', 'phone-number-country-code') - ->setAttribute('style', 'border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; padding-right: 0;'); - - $style = Html::el('style')->setHtml( - '.phone-number-country-code + .select2-container .select2-selection { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }' - . ' .phone-number-country-code + .select2-container { width: 100% !important; overflow: hidden; }' - . ' .phone-number-country-code + .select2-container .select2-selection__rendered { text-align: right; padding-right: 1.5em; }' - . ' .phone-number-country-code { margin-right: 0 !important; }' - . ' .row.g-2 > .col-5:has(.phone-number-country-code) { padding-right: 0 !important; flex: 0 0 20%; max-width: 20%; }' - . ' .row.g-2 > .col-7:has([name$="NationalNumber"]) { padding-left: 0 !important; flex: 0 0 80%; max-width: 80%; }' - ); - - $wrapper = Html::el(); - $wrapper->addHtml($select); - $wrapper->addHtml($style); - return $wrapper; + return Helpers::createSelectBox($items, null, $value) + ->addAttributes($attrs); case self::CONTROL_NATIONAL_NUMBER: if ($this->value instanceof PhoneNumber) { @@ -172,7 +156,6 @@ public function getControlPart($key = null): ?Html 'type' => 'tel', 'value' => $value, 'id' => $this->getHtmlId(), - 'style' => 'border-top-left-radius: 0; border-bottom-left-radius: 0; padding-left: 0;', 'data-nette-rules' => \Nette\Forms\Helpers::exportRules($this->getRules()) ?: null, ], $attrs)); } From 5ba0335a622bc7f6fb076be4360b137005c15d10 Mon Sep 17 00:00:00 2001 From: carlos Date: Tue, 31 Mar 2026 08:40:06 +0200 Subject: [PATCH 6/8] - Changes to input group - rendering modification. --- src/Forms/Controls/PhoneNumberInput.php | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/src/Forms/Controls/PhoneNumberInput.php b/src/Forms/Controls/PhoneNumberInput.php index 9a37e4f..6d6532f 100644 --- a/src/Forms/Controls/PhoneNumberInput.php +++ b/src/Forms/Controls/PhoneNumberInput.php @@ -49,7 +49,7 @@ public static function addPhoneNumber(Container $container, $name, $label, $inva { $container->addComponent($control = new self($label), $name); - $control->container = Html::el('div')->setAttribute('class', 'input-group'); + $control->container = Html::el('div')->setAttribute('class', 'input-group phone-number-input-group'); $control->controls[static::CONTROL_COUNTRY_CODE] = Html::el(); $control->controls[static::CONTROL_NATIONAL_NUMBER] = Html::el(); $control->setDefaultCountryCode(self::getDefaultCountryCodeByIP()); @@ -88,13 +88,23 @@ public static function validateType(PhoneNumberInput $control, $type) */ public function getControl() { - $inputGroup = Html::el('div')->setAttribute('class', 'input-group'); + $html = ''; foreach (self::CONTROLS as $key) { - $inputGroup->addHtml($this->getControlPart($key)); + $html .= $this->getControlPart($key); } - return $this->container->setHtml($inputGroup); + $style = Html::el('style')->setHtml( + // Select (hidden by Select2, but keeps structure correct) + '.phone-number-input-group > select { flex: 0 0 auto; width: auto; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }' + // Select2 container + . ' .phone-number-input-group > .select2-container { flex: 0 0 auto; }' + . ' .phone-number-input-group > .select2-container .select2-selection { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }' + // Text input + . ' .phone-number-input-group > input[type="tel"] { flex: 1 1 auto; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }' + ); + + return $this->container->setHtml($html . $style); } protected function getCountryCodes() From 75d55e24249110429197b2b83c2617073b05198f Mon Sep 17 00:00:00 2001 From: carlos Date: Tue, 31 Mar 2026 08:59:03 +0200 Subject: [PATCH 7/8] - Changes to input group - rendering modification, same rendering in case of rendering with getControl and without. --- src/Forms/Controls/PhoneNumberInput.php | 31 +++++++++++++++++++++---- 1 file changed, 26 insertions(+), 5 deletions(-) diff --git a/src/Forms/Controls/PhoneNumberInput.php b/src/Forms/Controls/PhoneNumberInput.php index 6d6532f..f0ce0a8 100644 --- a/src/Forms/Controls/PhoneNumberInput.php +++ b/src/Forms/Controls/PhoneNumberInput.php @@ -96,12 +96,12 @@ public function getControl() $style = Html::el('style')->setHtml( // Select (hidden by Select2, but keeps structure correct) - '.phone-number-input-group > select { flex: 0 0 auto; width: auto; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }' + '.phone-number-input-group > select { flex: 0 0 25%; width: 25%; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }' // Select2 container - . ' .phone-number-input-group > .select2-container { flex: 0 0 auto; }' + . ' .phone-number-input-group > .select2-container { flex: 0 0 25%; width: 25% !important; }' . ' .phone-number-input-group > .select2-container .select2-selection { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }' // Text input - . ' .phone-number-input-group > input[type="tel"] { flex: 1 1 auto; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }' + . ' .phone-number-input-group > input[type="tel"] { flex: 0 0 75%; width: 75%; }' ); return $this->container->setHtml($html . $style); @@ -152,8 +152,28 @@ public function getControlPart($key = null): ?Html $items = array_merge($items, $this->getCountryCodes()); } - return Helpers::createSelectBox($items, null, $value) - ->addAttributes($attrs); + $select = Helpers::createSelectBox($items, null, $value) + ->addAttributes($attrs) + ->setAttribute('class', 'phone-number-country-code'); + + $style = Html::el('style')->setHtml( + // Make the row behave like input-group + '.row:has(.phone-number-country-code) { --bs-gutter-x: 0 !important; flex-wrap: nowrap !important; }' + // Select column: 25% width, no padding + . ' .row > [class^="col"]:has(.phone-number-country-code) { flex: 0 0 25% !important; max-width: 25% !important; padding: 0 !important; }' + // Input column: 75% width, no padding + . ' .row > [class^="col"]:has(input[type="tel"]) { flex: 0 0 75% !important; max-width: 75% !important; padding: 0 !important; }' + // Select2: right radius 0 + . ' .phone-number-country-code + .select2-container .select2-selection { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }' + . ' .phone-number-country-code + .select2-container { width: 100% !important; }' + // Native select: right radius 0 + . ' .phone-number-country-code { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }' + ); + + $wrapper = Html::el(); + $wrapper->addHtml($select); + $wrapper->addHtml($style); + return $wrapper; case self::CONTROL_NATIONAL_NUMBER: if ($this->value instanceof PhoneNumber) { @@ -166,6 +186,7 @@ public function getControlPart($key = null): ?Html 'type' => 'tel', 'value' => $value, 'id' => $this->getHtmlId(), + 'style' => 'border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important;', 'data-nette-rules' => \Nette\Forms\Helpers::exportRules($this->getRules()) ?: null, ], $attrs)); } From 83a6d856866f1af1e0bc32a8d59187eef3698ef4 Mon Sep 17 00:00:00 2001 From: carlos Date: Tue, 31 Mar 2026 09:31:33 +0200 Subject: [PATCH 8/8] - Changes to input group - rendering modification --- src/Forms/Controls/PhoneNumberInput.php | 37 +++++++++++++++---------- 1 file changed, 23 insertions(+), 14 deletions(-) diff --git a/src/Forms/Controls/PhoneNumberInput.php b/src/Forms/Controls/PhoneNumberInput.php index f0ce0a8..f5c3132 100644 --- a/src/Forms/Controls/PhoneNumberInput.php +++ b/src/Forms/Controls/PhoneNumberInput.php @@ -45,10 +45,13 @@ class PhoneNumberInput extends BaseControl protected $controls; - public static function addPhoneNumber(Container $container, $name, $label, $invalidPhoneNumberMessage) + protected bool $injectStyles = true; + + public static function addPhoneNumber(Container $container, $name, $label, $invalidPhoneNumberMessage, bool $injectStyles = true) { $container->addComponent($control = new self($label), $name); + $control->injectStyles = $injectStyles; $control->container = Html::el('div')->setAttribute('class', 'input-group phone-number-input-group'); $control->controls[static::CONTROL_COUNTRY_CODE] = Html::el(); $control->controls[static::CONTROL_NATIONAL_NUMBER] = Html::el(); @@ -96,15 +99,15 @@ public function getControl() $style = Html::el('style')->setHtml( // Select (hidden by Select2, but keeps structure correct) - '.phone-number-input-group > select { flex: 0 0 25%; width: 25%; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }' + '.phone-number-input-group > select { flex: 0 0 25% !important; width: 25% !important; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }' // Select2 container - . ' .phone-number-input-group > .select2-container { flex: 0 0 25%; width: 25% !important; }' + . ' .phone-number-input-group > .select2-container { flex: 0 0 25% !important; width: 25% !important; }' . ' .phone-number-input-group > .select2-container .select2-selection { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }' // Text input - . ' .phone-number-input-group > input[type="tel"] { flex: 0 0 75%; width: 75%; }' + . ' .phone-number-input-group > input[type="tel"] { flex: 0 0 75% !important; width: 75% !important; }' ); - return $this->container->setHtml($html . $style); + return $this->container->setHtml($html . ($this->injectStyles ? $style : '')); } protected function getCountryCodes() @@ -166,14 +169,17 @@ public function getControlPart($key = null): ?Html // Select2: right radius 0 . ' .phone-number-country-code + .select2-container .select2-selection { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }' . ' .phone-number-country-code + .select2-container { width: 100% !important; }' - // Native select: right radius 0 - . ' .phone-number-country-code { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }' + // Native select: right radius 0, fill column width + . ' .phone-number-country-code { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; width: 100% !important; }' ); - $wrapper = Html::el(); - $wrapper->addHtml($select); - $wrapper->addHtml($style); - return $wrapper; + if ($this->injectStyles) { + $wrapper = Html::el(); + $wrapper->addHtml($select); + $wrapper->addHtml($style); + return $wrapper; + } + return $select; case self::CONTROL_NATIONAL_NUMBER: if ($this->value instanceof PhoneNumber) { @@ -182,13 +188,16 @@ public function getControlPart($key = null): ?Html $value = $this->values[$key] ?? null; } - return Html::el('input', array_merge([ + $inputAttrs = [ 'type' => 'tel', 'value' => $value, 'id' => $this->getHtmlId(), - 'style' => 'border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important;', 'data-nette-rules' => \Nette\Forms\Helpers::exportRules($this->getRules()) ?: null, - ], $attrs)); + ]; + if ($this->injectStyles) { + $inputAttrs['style'] = 'border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important;'; + } + return Html::el('input', array_merge($inputAttrs, $attrs)); } }