IBX-7999: Checkbox and ThreeStateCheckbox (#13)

Author: GrabowskiM

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

@@ -0,0 +1,3 @@
+import BaseCheckbox from '../../shared/BaseCheckbox';
+
+export default class Checkbox extends BaseCheckbox {}

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

@@ -1,6 +1,6 @@
 import Base from '../../shared/Base';
 
-export default class InpuText extends Base {
+export default class InputText extends Base {
     private _inputElement: HTMLInputElement;
     private _actionsElement: HTMLDivElement;
     private _clearBtnElement: HTMLButtonElement;

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

@@ -0,0 +1,21 @@
+import BaseCheckbox from '../../shared/BaseCheckbox';
+
+export default class ThreeStateCheckbox extends BaseCheckbox {
+    constructor(container: HTMLDivElement) {
+        super(container);
+
+        this.setIndeterminate(this._inputElement.classList.contains('ids-input--indeterminate'));
+    }
+
+    setIndeterminate(value: boolean) {
+        this._inputElement.indeterminate = value;
+        this._inputElement.classList.toggle('ids-input--indeterminate', value);
+
+        if (value) {
+            this._inputElement.checked = false;
+
+            this._inputElement.dispatchEvent(new Event('input', { bubbles: true }));
+            this._inputElement.dispatchEvent(new Event('change', { bubbles: true }));
+        }
+    }
+}

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

@@ -1,5 +1,7 @@
 import Accordion from './components/accordion';
+import Checkbox from './components/inputs/Checkbox';
 import InputText from './components/inputs/InputText';
+import ThreeStateCheckbox from './components/inputs/ThreeStateCheckbox';
 
 const accordionContainers = document.querySelectorAll<HTMLDivElement>('.ids-accordion:not([custom-init])');
 
@@ -9,10 +11,26 @@ accordionContainers.forEach((accordionContainer: HTMLDivElement) => {
     accordionInstance.init();
 });
 
+const checkboxContainers = document.querySelectorAll<HTMLDivElement>('.ids-checkbox:not([custom-init])');
+
+checkboxContainers.forEach((checkboxContainer: HTMLDivElement) => {
+    const checkboxInstance = new Checkbox(checkboxContainer);
+
+    checkboxInstance.init();
+});
+
 const inputTextContainers = document.querySelectorAll<HTMLDivElement>('.ids-input-text:not([custom-init])');
 
 inputTextContainers.forEach((inputTextContainer: HTMLDivElement) => {
     const inputTextInstance = new InputText(inputTextContainer);
 
     inputTextInstance.init();
 });
+
+const threeStateCheckboxContainers = document.querySelectorAll<HTMLDivElement>('.ids-three-state-checkbox:not([custom-init])');
+
+threeStateCheckboxContainers.forEach((threeStateCheckboxContainer: HTMLDivElement) => {
+    const threeStateCheckboxInstance = new ThreeStateCheckbox(threeStateCheckboxContainer);
+
+    threeStateCheckboxInstance.init();
+});

src/bundle/Resources/public/ts/shared/BaseCheckbox.ts

@@ -0,0 +1,17 @@
+import Base from './Base';
+
+export default abstract class BaseCheckbox extends Base {
+    protected _inputElement: HTMLInputElement;
+
+    constructor(container: HTMLDivElement) {
+        super(container);
+
+        const inputElement = container.querySelector<HTMLInputElement>('.ids-input');
+
+        if (!inputElement) {
+            throw new Error('Checkbox: Required elements are missing in the container.');
+        }
+
+        this._inputElement = inputElement;
+    }
+}

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

@@ -0,0 +1,24 @@
+{% set input_classes =
+    html_classes(
+        'ids-input ids-input--checkbox ids-input--medium',
+        {
+            'ids-input--disabled': disabled,
+            'ids-input--error': error,
+            'ids-input--required': required
+        },
+        attributes.render('class') ?? ''
+    )
+%}
+
+<div class="ids-checkbox">
+    <input
+        class="{{ input_classes }}"
+        type="checkbox"
+        {{
+        attributes.defaults({
+            disabled,
+            required
+        })
+        }}
+    />
+</div>

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

@@ -0,0 +1,25 @@
+{% set input_classes =
+    html_classes(
+        'ids-input ids-input--checkbox ids-input--medium',
+        {
+            'ids-input--disabled': disabled,
+            'ids-input--error': error,
+            'ids-input--required': required,
+            'ids-input--indeterminate': indeterminate
+        },
+        attributes.render('class') ?? ''
+    )
+%}
+
+<div class="ids-three-state-checkbox">
+    <input
+        class="{{ input_classes }}"
+        type="checkbox"
+        {{
+        attributes.defaults({
+            disabled,
+            required
+        })
+        }}
+    />
+</div>

src/lib/Twig/Components/inputs/AbstractCheckbox.php

@@ -0,0 +1,51 @@
+<?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\inputs;
+
+use Symfony\Component\OptionsResolver\OptionsResolver;
+use Symfony\UX\TwigComponent\Attribute\PreMount;
+
+abstract class AbstractCheckbox
+{
+    public bool $disabled = false;
+
+    public bool $error = false;
+
+    public bool $required = false;
+
+    /**
+     * @param array<string, mixed> $props
+     *
+     * @return array<string, mixed>
+     */
+    #[PreMount]
+    public function validate(array $props): array
+    {
+        $resolver = new OptionsResolver();
+        $resolver->setIgnoreUndefined();
+        $resolver
+            ->define('disabled')
+            ->allowedTypes('bool')
+            ->default(false);
+        $resolver
+            ->define('error')
+            ->allowedTypes('bool')
+            ->default(false);
+        $resolver
+            ->define('required')
+            ->allowedTypes('bool')
+            ->default(false);
+
+        $this->configurePropsResolver($resolver);
+
+        return $resolver->resolve($props) + $props;
+    }
+
+    abstract protected function configurePropsResolver(OptionsResolver $resolver): void;
+}

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

@@ -0,0 +1,20 @@
+<?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\inputs;
+
+use Symfony\Component\OptionsResolver\OptionsResolver;
+use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
+
+#[AsTwigComponent]
+final class Checkbox extends AbstractCheckbox
+{
+    protected function configurePropsResolver(OptionsResolver $resolver): void
+    {
+    }
+}

src/lib/Twig/Components/inputs/ThreeStateCheckbox.php

@@ -0,0 +1,26 @@
+<?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\inputs;
+
+use Symfony\Component\OptionsResolver\OptionsResolver;
+use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
+
+#[AsTwigComponent]
+final class ThreeStateCheckbox extends AbstractCheckbox
+{
+    public bool $indeterminate = false;
+
+    protected function configurePropsResolver(OptionsResolver $resolver): void
+    {
+        $resolver
+            ->define('indeterminate')
+            ->allowedTypes('bool')
+            ->default(false);
+    }
+}