diff --git a/src/bundle/Resources/public/js/scripts/admin.input.text.js b/src/bundle/Resources/public/js/scripts/admin.input.text.js
index 58a24381c8..663f93f783 100644
--- a/src/bundle/Resources/public/js/scripts/admin.input.text.js
+++ b/src/bundle/Resources/public/js/scripts/admin.input.text.js
@@ -38,9 +38,42 @@
inputClearBtns.forEach((clearBtn) => clearBtn.addEventListener('click', clearText, false));
passwordTogglerBtns.forEach((passwordTogglerBtn) => passwordTogglerBtn.addEventListener('click', togglePasswordVisibility, false));
+ recalculateStyling();
+ };
+ const handleInputChange = ({ target: { value } }, btn) => {
+ btn.disabled = value === '';
+ };
+ const recalculateStyling = () => {
+ const extraBtns = doc.querySelectorAll('.ibexa-input-text-wrapper__action-btn--extra-btn');
+
+ extraBtns.forEach((btn) => {
+ const input = btn.closest('.ibexa-input-text-wrapper').querySelector('input');
+ const clearButton = btn.previousElementSibling?.classList.contains('ibexa-input-text-wrapper__action-btn--clear')
+ ? btn.previousElementSibling
+ : null;
+
+ if (!input) {
+ return;
+ }
+
+ btn.disabled = !input.value;
+ input.addEventListener('input', (inputEvent) => handleInputChange(inputEvent, btn), false);
+
+ if (!clearButton) {
+ return;
+ }
+
+ const clearButtonStyles = global.getComputedStyle(clearButton);
+ const clearButtonMarginRight = parseInt(clearButtonStyles.getPropertyValue('margin-right'), 10);
+ const clearButtonWidth = parseInt(clearButtonStyles.getPropertyValue('width'), 10);
+ const paddingRight = `${btn.offsetWidth + clearButtonMarginRight + clearButtonWidth}px`;
+
+ input.style.paddingRight = paddingRight;
+ });
};
doc.body.addEventListener('ibexa-inputs:added', attachListenersToAllInputs, false);
+ doc.body.addEventListener('ibexa-inputs:recalculate-styling', recalculateStyling, false);
attachListenersToAllInputs();
})(window, window.document);
diff --git a/src/bundle/Resources/public/scss/_buttons.scss b/src/bundle/Resources/public/scss/_buttons.scss
index 73c49176d7..8b7f293f6a 100644
--- a/src/bundle/Resources/public/scss/_buttons.scss
+++ b/src/bundle/Resources/public/scss/_buttons.scss
@@ -153,6 +153,36 @@
}
}
+ &--ghost-info.ibexa-btn {
+ color: $ibexa-color-dark;
+ fill: $ibexa-color-dark;
+
+ &:hover {
+ color: $ibexa-color-info;
+
+ .ibexa-icon {
+ fill: $ibexa-color-info;
+ }
+ }
+
+ &:focus {
+ color: $ibexa-color-info;
+ border-color: $ibexa-color-info;
+
+ .ibexa-icon {
+ fill: $ibexa-color-info;
+ }
+ }
+
+ &.disabled,
+ &[disabled],
+ &:disabled {
+ color: $ibexa-color-dark-300;
+ fill: $ibexa-color-dark-300;
+ border-color: transparent;
+ }
+ }
+
&--dark.ibexa-btn {
color: $ibexa-color-white;
fill: $ibexa-color-white;
diff --git a/src/bundle/Resources/public/scss/_inputs.scss b/src/bundle/Resources/public/scss/_inputs.scss
index b0f6d7dc34..f26f1af1a8 100644
--- a/src/bundle/Resources/public/scss/_inputs.scss
+++ b/src/bundle/Resources/public/scss/_inputs.scss
@@ -389,6 +389,16 @@
}
}
+ &--extra-btn {
+ .ibexa-input-text-wrapper__actions {
+ right: 0;
+ }
+
+ .ibexa-input-text-wrapper__action-btn--clear {
+ margin-right: calculateRem(5px);
+ }
+ }
+
&:hover {
.ibexa-input {
border-color: $ibexa-color-primary;
diff --git a/src/bundle/Resources/views/themes/admin/ui/component/input_text.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/input_text.html.twig
index 1aa38698b8..a6bb7ec7cf 100644
--- a/src/bundle/Resources/views/themes/admin/ui/component/input_text.html.twig
+++ b/src/bundle/Resources/views/themes/admin/ui/component/input_text.html.twig
@@ -3,6 +3,15 @@
{% set is_password_type = type|default('') == 'password' %}
{% set is_password_input = is_password_input|default(is_password_type) %}
{% set has_search = has_search|default(false) %}
+{% set extra_btn = extra_btn|default({})|merge({
+ label: extra_btn.label|default(''),
+ attr: extra_btn.attr|default({})|merge({
+ type: extra_btn.type|default('button'),
+ class: (extra_btn.attr.class|default('')
+ ~ ' btn ibexa-btn ibexa-btn--info ibexa-input-text-wrapper__action-btn--extra-btn'
+ )|trim
+ })
+}) %}
{% set should_clear_button_send_form = should_clear_button_send_form|default(false) %}
{% set wrapper_attr = wrapper_attr|default({})|merge({
class: (wrapper_attr.class|default('')
@@ -10,6 +19,7 @@
~ (has_search ? ' ibexa-input-text-wrapper--search')
~ (is_password_input ? ' ibexa-input-text-wrapper--password')
~ (type is defined ? " ibexa-input-text-wrapper--type-#{type}")
+ ~ (extra_btn.label ? ' ibexa-input-text-wrapper--extra-btn')
)|trim
}) %}
@@ -46,6 +56,10 @@
+ {% elseif extra_btn.label is not empty %}
+
{% endif %}
{% endblock %}