IBX-10621: Checkboxes List

eslint.config.mjs

@@ -1,3 +1,11 @@
 import getIbexaConfig from '@ibexa/eslint-config/eslint';
 
-export default getIbexaConfig({ react: false });
+export default [
+    ...getIbexaConfig({ react: false }),
+    {
+        files: ['**/*.ts'],
+        rules: {
+            '@typescript-eslint/unbound-method': 'off',
+        },
+    },
+];

src/bundle/Resources/public/ts/components/checkbox/checkboxes_list_field.ts

@@ -0,0 +1,100 @@
+import { BaseInputsList } from '../../partials';
+
+export enum CheckboxesListFieldAction {
+    Check = 'check',
+    Uncheck = 'uncheck',
+}
+
+export class CheckboxesListField extends BaseInputsList<string[]> {
+    private _itemsContainer: HTMLDivElement;
+
+    static EVENTS = {
+        ...BaseInputsList.EVENTS,
+        CHANGE: 'ids:checkboxes-list-field:change',
+    };
+
+    constructor(container: HTMLDivElement) {
+        super(container);
+
+        const itemsContainer = container.querySelector<HTMLDivElement>('.ids-choice-inputs-list__items');
+
+        if (!itemsContainer) {
+            throw new Error('CheckboxesListField: Required elements are missing in the container.');
+        }
+
+        this._itemsContainer = itemsContainer;
+
+        this.onItemChange = this.onItemChange.bind(this);
+    }
+
+    getItemsCheckboxes() {
+        const itemsCheckboxes = [
+            ...this._itemsContainer.querySelectorAll<HTMLInputElement>('.ids-choice-input-field .ids-input--checkbox'),
+        ];
+
+        return itemsCheckboxes;
+    }
+
+    getValue(): string[] {
+        const itemsCheckboxes = this.getItemsCheckboxes();
+        const checkedValues = itemsCheckboxes.reduce((acc: string[], checkbox) => {
+            if (checkbox.checked) {
+                acc.push(checkbox.value);
+            }
+
+            return acc;
+        }, []);
+
+        return checkedValues;
+    }
+
+    onItemChange(event: Event) {
+        if (!(event.target instanceof HTMLInputElement)) {
+            return;
+        }
+
+        const item = event.target;
+        const nextValue = this.getValue();
+        const actionPerformed = item.checked ? CheckboxesListFieldAction.Check : CheckboxesListFieldAction.Uncheck;
+
+        this.onChange(nextValue, item.value, actionPerformed);
+    }
+
+    onChange(nextValue: string[], itemValue: string, actionPerformed: CheckboxesListFieldAction) {
+        const changeEvent = new CustomEvent(CheckboxesListField.EVENTS.CHANGE, {
+            bubbles: true,
+            detail: [nextValue, itemValue, actionPerformed],
+        });
+
+        this._container.dispatchEvent(changeEvent);
+    }
+
+    initCheckboxes() {
+        const itemsCheckboxes = this.getItemsCheckboxes();
+
+        itemsCheckboxes.forEach((checkbox) => {
+            checkbox.addEventListener('change', this.onItemChange, false);
+        });
+    }
+
+    unbindCheckboxes() {
+        const itemsCheckboxes = this.getItemsCheckboxes();
+
+        itemsCheckboxes.forEach((checkbox) => {
+            checkbox.removeEventListener('change', this.onItemChange, false);
+        });
+    }
+
+    reinit() {
+        super.reinit();
+
+        this.unbindCheckboxes();
+        this.initCheckboxes();
+    }
+
+    init() {
+        super.init();
+
+        this.initCheckboxes();
+    }
+}

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

@@ -1 +1,2 @@
 export * from './checkbox_input';
+export * from './checkboxes_list_field';

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

@@ -1,7 +1,7 @@
+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 { CheckboxInput } from './components/checkbox';
 
 const accordionContainers = document.querySelectorAll<HTMLDivElement>('.ids-accordion:not([data-ids-custom-init])');
 
@@ -27,6 +27,14 @@ checkboxContainers.forEach((checkboxContainer: HTMLDivElement) => {
     checkboxInstance.init();
 });
 
+const checkboxesFieldContainers = document.querySelectorAll<HTMLDivElement>('.ids-field.ids-field--list:not([data-ids-custom-init])');
+
+checkboxesFieldContainers.forEach((checkboxesFieldContainer: HTMLDivElement) => {
+    const checkboxesFieldInstance = new CheckboxesListField(checkboxesFieldContainer);
+
+    checkboxesFieldInstance.init();
+});
+
 const fieldInputTextContainers = document.querySelectorAll<HTMLDivElement>('.ids-field--input-text:not([data-ids-custom-init])');
 
 fieldInputTextContainers.forEach((fieldInputTextContainer: HTMLDivElement) => {

src/bundle/Resources/public/ts/partials/base.ts

@@ -17,6 +17,10 @@ export abstract class Base {
         return this._container;
     }
 
+    reinit() {
+        // to be overridden in subclasses if needed
+    }
+
     init() {
         this._container.setAttribute('data-ids-initialized', 'true');
 

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

@@ -21,6 +21,7 @@
                 name,
                 required,
                 type,
+                value,
             })
         }}
     />

src/bundle/Resources/views/themes/standard/design_system/components/checkbox/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-checkboxes-list-field', attributes.render('class') ?? '') %}
+
+{% block item %}
+    <twig:ibexa:checkbox:field {{ ...item }}>
+        {{ item.label }}
+    </twig:ibexa:checkbox:field>
+{% endblock item %}

src/lib/Twig/Components/AbstractChoiceInput.php

@@ -29,7 +29,7 @@ abstract class AbstractChoiceInput
 
     public string $size = 'medium';
 
-    protected ?string $value = null;
+    public ?string $value = null;
 
     /**
      * @param array<string, mixed> $props
@@ -79,12 +79,6 @@ public function validate(array $props): array
         return $resolver->resolve($props) + $props;
     }
 
-    #[ExposeInTemplate('value')]
-    protected function getValue(): ?string
-    {
-        return null;
-    }
-
     abstract protected function configurePropsResolver(OptionsResolver $resolver): void;
 
     abstract public function getType(): string;

src/lib/Twig/Components/AbstractField.php

@@ -32,8 +32,6 @@ abstract class AbstractField
 
     public bool $required = false;
 
-    public string $value = '';
-
     /**
      * @param array<string, mixed> $props
      *
@@ -49,7 +47,6 @@ public function validate(array $props): array
             'labelExtra' => [],
             'helperTextExtra' => [],
             'required' => false,
-            'value' => '',
         ]);
 
         $resolver->setRequired(['name']);
@@ -58,7 +55,6 @@ public function validate(array $props): array
         $resolver->setAllowedTypes('labelExtra', 'array');
         $resolver->setAllowedTypes('helperTextExtra', 'array');
         $resolver->setAllowedTypes('required', 'bool');
-        $resolver->setAllowedTypes('value', 'string');
 
         $resolver->setNormalizer('labelExtra', static function (Options $options, array $attributes) {
             return self::assertForbidden($attributes, ['for', 'required'], 'labelExtra');

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

@@ -0,0 +1,53 @@
+<?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\Checkbox;
+
+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 CheckboxItem array{
+ *     value: string|int,
+ *     label: string,
+ *     disabled?: bool
+ * }
+ * @phpstan-type CheckboxItems list<CheckboxItem>
+ */
+#[AsTwigComponent('ibexa:checkbox:list_field')]
+final class ListField extends AbstractField
+{
+    use ListFieldTrait;
+
+    /** @var array<string|int> */
+    public array $value = [];
+
+    /**
+     * @param CheckboxItem $item
+     *
+     * @return CheckboxItem
+     */
+    protected function modifyListItem(array $item): array
+    {
+        $item['checked'] = in_array($item['value'], $this->value, true);
+
+        return $item;
+    }
+
+    protected function configurePropsResolver(OptionsResolver $resolver): void
+    {
+        $this->validateListFieldProps($resolver);
+
+        // TODO: check if items are valid according to Checkbox/Field component
+
+        $resolver->setDefaults(['value' => []]);
+        $resolver->setAllowedTypes('value', 'array');
+    }
+}

src/lib/Twig/Components/InputText/Field.php

@@ -29,6 +29,8 @@ final class Field extends AbstractField
 
     public string $type = 'input-text';
 
+    public string $value = '';
+
     /**
      * @return AttrMap
      */
@@ -63,5 +65,7 @@ protected function configurePropsResolver(OptionsResolver $resolver): void
         });
         $resolver->setRequired(['name']);
         $resolver->setAllowedTypes('id', ['null', 'string']);
+        $resolver->setDefaults(['value' => '']);
+        $resolver->setAllowedTypes('value', 'string');
     }
 }

src/lib/Twig/Components/LabelledChoiceInputTrait.php

@@ -57,9 +57,7 @@ public function getInput(): array
             'disabled' => $this->disabled,
             'error' => $this->error,
             'required' => $this->required,
-            'value' => $this->getValue(),
+            'value' => $this->value,
         ];
     }
-
-    abstract protected function getValue(): ?string;
 }

src/lib/Twig/Components/ListFieldTrait.php

@@ -0,0 +1,66 @@
+<?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;
+
+use Symfony\Component\OptionsResolver\OptionsResolver;
+use Symfony\UX\TwigComponent\Attribute\ExposeInTemplate;
+
+/**
+ * @phpstan-type ListItem array{
+ *     value: string|int,
+ *     label: string,
+ * }
+ * @phpstan-type ListItems list<ListItem>
+ */
+trait ListFieldTrait
+{
+    public const string VERTICAL = 'vertical';
+    public const string HORIZONTAL = 'horizontal';
+
+    public string $direction = 'vertical';
+
+    /** @var ListItems */
+    #[ExposeInTemplate(name: 'items', getter: 'getItems')]
+    public array $items = [];
+
+    /**
+     * @return ListItems
+     */
+    public function getItems(): array
+    {
+        return array_map(function (array $item) {
+            $listItem = $item + ['name' => $this->name, 'required' => $this->required];
+
+            return $this->modifyListItem($listItem);
+        }, $this->items);
+    }
+
+    /**
+     * @param ListItem $item
+     *
+     * @return ListItem
+     */
+    protected function modifyListItem(array $item): array
+    {
+        return $item;
+    }
+
+    protected function validateListFieldProps(OptionsResolver $resolver): void
+    {
+        $resolver->setDefaults([
+            'items' => [],
+        ]);
+        $resolver->setAllowedTypes('items', 'array');
+
+        $resolver
+            ->define('direction')
+            ->allowedValues(self::VERTICAL, self::HORIZONTAL)
+            ->default(self::VERTICAL);
+    }
+}