IBX-10258: Input Text - clear action (#6)

Author: GrabowskiM

src/bundle/Resources/public/ts/components/inputs/InputText.ts

@@ -0,0 +1,61 @@
+import Base from '../../shared/Base';
+
+export default class InpuText extends Base {
+    private _inputElement: HTMLInputElement;
+    private _actionsElement: HTMLDivElement;
+    private _clearBtnElement: HTMLButtonElement;
+
+    constructor(container: HTMLDivElement) {
+        super(container);
+
+        this._actionsElement = container.querySelector('.ids-input-text__actions') as HTMLDivElement;
+        this._inputElement = container.querySelector('.ids-input-text__source .ids-input') as HTMLInputElement;
+        this._clearBtnElement = this._actionsElement.querySelector('.ids-clear-btn') as HTMLButtonElement;
+    }
+
+    private _updateInputPadding() {
+        const actionsWidth = this._actionsElement.offsetWidth;
+
+        this._inputElement.style.paddingRight = `${actionsWidth.toString()}px`;
+    }
+
+    changeValue(value: string) {
+        const isNewValue = this._inputElement.value !== value;
+
+        if (isNewValue) {
+            this._inputElement.value = value;
+
+            this._inputElement.dispatchEvent(new Event('input', { bubbles: true }));
+        }
+    }
+
+    updateClearBtnVisibility() {
+        const isEmpty = this._inputElement.value === '';
+
+        this._clearBtnElement.parentElement?.classList.toggle('ids-input-text__action--hidden', isEmpty);
+    }
+
+    initInputListeners() {
+        this._inputElement.addEventListener('input', () => {
+            this.updateClearBtnVisibility();
+            this._updateInputPadding();
+        });
+    }
+
+    initClearBtn() {
+        this._clearBtnElement.addEventListener('click', (event: MouseEvent) => {
+            event.preventDefault();
+            event.stopPropagation();
+
+            this.changeValue('');
+        });
+    }
+
+    init() {
+        super.init();
+
+        this.initInputListeners();
+        this.initClearBtn();
+        this._updateInputPadding();
+    }
+}

src/bundle/Resources/public/ts/init_components.ts

@@ -0,0 +1,9 @@
+import InputText from './components/ui/InputText';
+
+const inputTextContainers = document.querySelectorAll<HTMLElement>('.ids-input-text:not([custom-init])');
+
+inputTextContainers.forEach((inputTextContainer: HTMLElement) => {
+    const inputTextInstance = new InputText(inputTextContainer);
+
+    inputTextInstance.init();
+});

src/bundle/Resources/views/themes/standard/design-system/partials/base_input.html.twig

@@ -77,7 +77,7 @@
         {% if has_label %}
             <div class="ids-btn__label">
                 {% block label %}
-                    {{ label|raw }}
+                    {{ label|default(null)|raw }}
                 {% endblock %}
             </div>
         {% endif %}

src/bundle/Resources/views/themes/standard/design_system/components/button.html.twig

@@ -0,0 +1,99 @@
+{% import ids_get('macros/html') as html %}
+
+{% set actions = actions|default([]) %}
+{% set disabled = disabled|default(false) %}
+{% set error = error|default(false) %}
+{% set placeholder = placeholder|default('') %}
+{% set readonly = readonly|default(false) %}
+{% set required = required|default(false) %}
+{% set size = size|default('medium') %}
+{% set title = title|default('') %}
+{% set type = type|default('text') %}
+{% set value = value|default('') %}
+{% set input_attr = input_attr|default({}) %}
+{% set input_default_classes = input_attr.class|default('') %}
+
+{% set input_classes =
+    html_cva(
+        base: html_classes(
+            'ids-input',
+            {
+                'ids-input--disabled': disabled,
+                'ids-input--error': error,
+                'ids-input--required': required
+            }
+        ),
+        variants: {
+            type: {
+                text: 'ids-input--text',
+                password: 'ids-input--password',
+                email: 'ids-input--email',
+                number: 'ids-input--number',
+                tel: 'ids-input--tel',
+                search: 'ids-input--search',
+                url: 'ids-input--url'
+            },
+            size: {
+                medium: 'ids-input--medium',
+                small: 'ids-input--small'
+            }
+        }
+    )
+%}
+
+{% set input_attr =
+    input_attr|merge({
+        class: input_classes.apply(
+            {
+                type,
+                size
+            },
+            input_default_classes
+        ),
+        disabled,
+        placeholder,
+        readonly,
+        title,
+        type,
+        value
+    })
+%}
+
+{% set clear_action %}
+    {% include ids_get('ui/clear_btn') with {
+        disabled
+    } %}
+{% endset %}
+
+{% set actions =
+    actions|merge(
+        [
+            {
+                id: 'clear',
+                component: clear_action
+            }
+        ]
+    )
+%}
+
+<div class="ids-input-text">
+    <div class="ids-input-text__source">
+        <input {{ html.attributes(input_attr) }} />
+    </div>
+    <div class="ids-input-text__actions">
+        {%- for action in actions -%}
+            {% set action_classes =
+                html_classes(
+                    'ids-input-text__action',
+                    {
+                        'ids-input-text__action--hidden': action.id == 'clear' and value is empty
+                    }
+                )
+            %}
+
+            <div class="{{ action_classes }}">
+                {{- action.component|raw -}}
+            </div>
+        {%- endfor -%}
+    </div>
+</div>

src/bundle/Resources/views/themes/standard/design_system/components/input_text.html.twig

@@ -19,7 +19,7 @@
     attr|merge({
         class: classes,
         for,
-        title,
+        title
     })
 %}
 

src/bundle/Resources/views/themes/standard/design_system/components/inputs/input_text.html.twig

@@ -0,0 +1,15 @@
+{% set disabled = disabled|default(false) %}
+
+{% set clear_msg = 'ibexa.clear-btn.label'|trans|desc('Clear') %}
+
+{% include ids_get('button') with {
+    type: 'tertiary-alt',
+    size: 'small',
+    icon: 'discard',
+    disabled,
+    title: clear_msg,
+    attr: {
+        class: 'ids-clear-btn',
+        'aria-label': clear_msg
+    }
+} %}