IBX-10850: AltRadio List Field

Author: GrabowskiM

src/bundle/Resources/public/ts/components/alt_radio/alt_radio_input.ts

@@ -1,12 +1,18 @@
 import { Base } from '../../partials';
 
+export interface AltRadioInputOptions {
+    onTileClick?: (event: MouseEvent, inputId: string) => void;
+}
+
 export class AltRadioInput extends Base {
-    private _inputElement: HTMLInputElement;
-    private _tileElement: HTMLDivElement;
+    private inputElement: HTMLInputElement;
+    private tileElement: HTMLDivElement;
+    private onTileClick?: (event: MouseEvent, inputId: string) => void;
 
-    private _isFocused = false;
+    private isChecked = false;
+    private isFocused = false;
 
-    constructor(container: HTMLDivElement) {
+    constructor(container: HTMLDivElement, { onTileClick }: AltRadioInputOptions = {}) {
         super(container);
 
         const inputElement = this._container.querySelector<HTMLInputElement>('.ids-alt-radio__source .ids-input');
@@ -16,55 +22,67 @@ export class AltRadioInput extends Base {
             throw new Error('AltRadio: Required elements are missing in the container.');
         }
 
-        this._inputElement = inputElement;
-        this._tileElement = tileElement;
+        this.inputElement = inputElement;
+        this.tileElement = tileElement;
+
+        this.onTileClick = onTileClick;
     }
 
     setFocus(nextIsFocused: boolean) {
-        if (this._isFocused === nextIsFocused) {
+        if (this.isFocused === nextIsFocused) {
             return;
         }
 
-        this._isFocused = nextIsFocused;
+        this.isFocused = nextIsFocused;
 
-        this._tileElement.classList.toggle('ids-alt-radio__tile--focused', nextIsFocused);
+        this.tileElement.classList.toggle('ids-alt-radio__tile--focused', nextIsFocused);
 
         if (nextIsFocused) {
-            this._inputElement.focus();
+            this.inputElement.focus();
         } else {
-            this._inputElement.blur();
+            this.inputElement.blur();
         }
     }
 
     setError(value: boolean) {
-        this._tileElement.classList.toggle('ids-alt-radio__tile--error', value);
+        this.tileElement.classList.toggle('ids-alt-radio_tile--error', value);
     }
 
     getInputElement(): HTMLInputElement {
-        return this._inputElement;
+        return this.inputElement;
+    }
+
+    toggleChecked(value?: boolean) {
+        const isChecked = value ?? !this.isChecked;
+
+        this.isChecked = isChecked;
+        this.inputElement.checked = isChecked;
+        this.tileElement.classList.toggle('ids-alt-radio__tile--checked', isChecked);
     }
 
     initInputListeners() {
-        this._inputElement.addEventListener('focus', () => {
+        this.inputElement.addEventListener('focus', () => {
             this.setFocus(true);
         });
 
-        this._inputElement.addEventListener('blur', () => {
+        this.inputElement.addEventListener('blur', () => {
             this.setFocus(false);
         });
 
-        this._inputElement.addEventListener('input', () => {
-            this._tileElement.classList.toggle('ids-alt-radio__tile--checked', this._inputElement.checked);
+        this.inputElement.addEventListener('input', () => {
+            this.toggleChecked();
         });
     }
 
     initTileBtn() {
-        this._tileElement.addEventListener('click', (event) => {
+        this.tileElement.addEventListener('click', (event) => {
             event.preventDefault();
             event.stopPropagation();
 
-            this._inputElement.focus();
-            this._inputElement.click();
+            this.inputElement.focus();
+            this.inputElement.click();
+
+            this.onTileClick?.(event, this.inputElement.id);
         });
     }
 

src/bundle/Resources/public/ts/components/alt_radio/alt_radios_list_field.ts

@@ -0,0 +1,95 @@
+import { AltRadioInput } from './alt_radio_input';
+import { BaseInputsList } from '../../partials';
+
+export enum AltRadiosListFieldAction {
+    Check = 'check',
+    Uncheck = 'uncheck',
+}
+
+export class AltRadiosListField extends BaseInputsList<string> {
+    private itemsContainer: HTMLDivElement;
+    private itemsMap = new Map<string, AltRadioInput>();
+    protected value?: string;
+
+    static EVENTS = {
+        ...BaseInputsList.EVENTS,
+        CHANGE: 'ids:alt-radio-list-field:change',
+    };
+
+    constructor(container: HTMLDivElement) {
+        super(container);
+
+        const itemsContainer = container.querySelector<HTMLDivElement>('.ids-choice-inputs-list__items');
+
+        if (!itemsContainer) {
+            throw new Error('AltRadiosListField: Required elements are missing in the container.');
+        }
+
+        this.itemsContainer = itemsContainer;
+
+        this.onItemClick = this.onItemClick.bind(this);
+
+        this.saveItemsInstancesToMap();
+    }
+
+    protected saveItemsInstancesToMap() {
+        const itemsButtons = this.getItemsButtons();
+
+        this.itemsMap.clear();
+
+        itemsButtons.forEach((button) => {
+            const buttonInstance = new AltRadioInput(button, { onTileClick: this.onItemClick });
+            const buttonId = buttonInstance.getInputElement().id;
+
+            this.itemsMap.set(buttonId, buttonInstance);
+        });
+    }
+
+    getItemsButtons() {
+        const itemsButtons = [...this.itemsContainer.querySelectorAll<HTMLDivElement>('.ids-alt-radio')];
+
+        return itemsButtons;
+    }
+
+    protected onItemClick(event: MouseEvent, itemValue: string) {
+        if (!(event.target instanceof HTMLDivElement)) {
+            return;
+        }
+
+        this.onChange(itemValue);
+    }
+
+    protected onChange(itemValue: string) {
+        const changeEvent = new CustomEvent(AltRadiosListField.EVENTS.CHANGE, {
+            bubbles: true,
+            detail: itemValue,
+        });
+
+        const currentValueInstance = this.itemsMap.get(this.value ?? '');
+
+        if (currentValueInstance) {
+            currentValueInstance.toggleChecked(false);
+        }
+
+        const nextValueInstance = this.itemsMap.get(itemValue);
+
+        if (nextValueInstance) {
+            nextValueInstance.toggleChecked(true);
+        }
+
+        this.value = itemValue;
+        this._container.dispatchEvent(changeEvent);
+    }
+
+    protected initButtons() {
+        this.itemsMap.forEach((itemInstance) => {
+            itemInstance.init();
+        });
+    }
+
+    public init() {
+        super.init();
+
+        this.initButtons();
+    }
+}

src/bundle/Resources/public/ts/components/alt_radio/index.ts

@@ -1 +1,2 @@
 export * from './alt_radio_input';
+export * from './alt_radios_list_field';

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

@@ -1,7 +1,7 @@
+import { AltRadioInput, AltRadiosListField } from './components/alt_radio';
 import { CheckboxInput, CheckboxesListField } from './components/checkbox';
 import { InputTextField, InputTextInput } from './components/input_text';
 import { Accordion } from './components/accordion';
-import { AltRadioInput } from './components/alt_radio/alt_radio_input';
 import { DropdownSingleInput } from './components/dropdown/dropdown_single_input';
 import { OverflowList } from './components/overflow_list';
 
@@ -21,6 +21,14 @@ altRadioContainers.forEach((altRadioContainer: HTMLDivElement) => {
     altRadioInstance.init();
 });
 
+const altRadiosListContainers = document.querySelectorAll<HTMLDivElement>('.ids-alt-radio-list-field:not([data-ids-custom-init])');
+
+altRadiosListContainers.forEach((altRadiosListContainer: HTMLDivElement) => {
+    const altRadiosListInstance = new AltRadiosListField(altRadiosListContainer);
+
+    altRadiosListInstance.init();
+});
+
 const checkboxContainers = document.querySelectorAll<HTMLDivElement>('.ids-checkbox:not([data-ids-custom-init])');
 
 checkboxContainers.forEach((checkboxContainer: HTMLDivElement) => {
@@ -29,7 +37,7 @@ checkboxContainers.forEach((checkboxContainer: HTMLDivElement) => {
     checkboxInstance.init();
 });
 
-const checkboxesFieldContainers = document.querySelectorAll<HTMLDivElement>('.ids-field.ids-field--list:not([data-ids-custom-init])');
+const checkboxesFieldContainers = document.querySelectorAll<HTMLDivElement>('.ids-checkboxes-list-field:not([data-ids-custom-init])');
 
 checkboxesFieldContainers.forEach((checkboxesFieldContainer: HTMLDivElement) => {
     const checkboxesFieldInstance = new CheckboxesListField(checkboxesFieldContainer);

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

@@ -10,12 +10,14 @@
         tile_class,
     )
 %}
+{% set custom_init = attributes.render('data-ids-custom-init') is not null %}
 
-<div class="{{ component_classes }}">
+<div class="{{ component_classes }}"{{ custom_init ? ' data-ids-custom-init' : '' }}>
     <div class="ids-alt-radio__source">
         <input
             class="ids-input ids-input--radio"
             type="radio"
+            name="{{ name }}"
             {{ attributes.defaults({ checked, disabled, required }) }}
         />
     </div>

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

@@ -0,0 +1,9 @@
+{% extends '@IbexaDesignSystemTwig/themes/standard/design_system/partials/base_inputs_list.html.twig' %}
+
+{% set class = html_classes('ids-alt-radio-list-field', attributes.render('class') ?? '') %}
+
+{% block item %}
+    <twig:ibexa:alt_radio:input {{ ...item }} data-ids-custom-init="true">
+        {{ item.label }}
+    </twig:ibexa:alt_radio:input>
+{% endblock item %}

src/lib/Twig/Components/AltRadio/ListField.php

@@ -0,0 +1,41 @@
+<?php
+
+/**
+ * @copyright Copyright (C) Ibexa AS. All rights reserved.
+ * @license For full copyright and license information view LICENSE file distributed with this source code.
+ */
+declare(strict_types=1);
+
+namespace Ibexa\DesignSystemTwig\Twig\Components\AltRadio;
+
+use Ibexa\DesignSystemTwig\Twig\Components\AbstractField;
+use Ibexa\DesignSystemTwig\Twig\Components\ListFieldTrait;
+use Symfony\Component\OptionsResolver\OptionsResolver;
+use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
+
+/**
+ * @phpstan-type AltRadioItem array{
+ *     value: string|int,
+ *     label: string,
+ *     disabled?: bool
+ * }
+ * @phpstan-type AltRadioItems list<AltRadioItem>
+ */
+#[AsTwigComponent('ibexa:alt_radio:list_field')]
+final class ListField extends AbstractField
+{
+    use ListFieldTrait;
+
+    public string $value = '';
+
+    protected function configurePropsResolver(OptionsResolver $resolver): void
+    {
+        $this->validateListFieldProps($resolver);
+
+        // TODO: check if items have value and label component
+
+        $resolver->setDefaults(['direction' => 'horizontal']);
+        $resolver->setDefaults(['value' => '']);
+        $resolver->setAllowedTypes('value', 'string');
+    }
+}