diff --git a/src/bundle/Resources/public/ts/components/inputs/Checkbox.ts b/src/bundle/Resources/public/ts/components/inputs/Checkbox.ts new file mode 100644 index 0000000..9746168 --- /dev/null +++ b/src/bundle/Resources/public/ts/components/inputs/Checkbox.ts @@ -0,0 +1,3 @@ +import BaseCheckbox from '../../shared/BaseCheckbox'; + +export default class Checkbox extends BaseCheckbox {} diff --git a/src/bundle/Resources/public/ts/components/inputs/InputText.ts b/src/bundle/Resources/public/ts/components/inputs/InputText.ts index e7c66e4..3ae160f 100644 --- a/src/bundle/Resources/public/ts/components/inputs/InputText.ts +++ b/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; diff --git a/src/bundle/Resources/public/ts/components/inputs/ThreeStateCheckbox.ts b/src/bundle/Resources/public/ts/components/inputs/ThreeStateCheckbox.ts new file mode 100644 index 0000000..d7340cd --- /dev/null +++ b/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 })); + } + } +} diff --git a/src/bundle/Resources/public/ts/init_components.ts b/src/bundle/Resources/public/ts/init_components.ts index bbfa94d..3a05bcb 100644 --- a/src/bundle/Resources/public/ts/init_components.ts +++ b/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('.ids-accordion:not([custom-init])'); @@ -9,6 +11,14 @@ accordionContainers.forEach((accordionContainer: HTMLDivElement) => { accordionInstance.init(); }); +const checkboxContainers = document.querySelectorAll('.ids-checkbox:not([custom-init])'); + +checkboxContainers.forEach((checkboxContainer: HTMLDivElement) => { + const checkboxInstance = new Checkbox(checkboxContainer); + + checkboxInstance.init(); +}); + const inputTextContainers = document.querySelectorAll('.ids-input-text:not([custom-init])'); inputTextContainers.forEach((inputTextContainer: HTMLDivElement) => { @@ -16,3 +26,11 @@ inputTextContainers.forEach((inputTextContainer: HTMLDivElement) => { inputTextInstance.init(); }); + +const threeStateCheckboxContainers = document.querySelectorAll('.ids-three-state-checkbox:not([custom-init])'); + +threeStateCheckboxContainers.forEach((threeStateCheckboxContainer: HTMLDivElement) => { + const threeStateCheckboxInstance = new ThreeStateCheckbox(threeStateCheckboxContainer); + + threeStateCheckboxInstance.init(); +}); diff --git a/src/bundle/Resources/public/ts/shared/BaseCheckbox.ts b/src/bundle/Resources/public/ts/shared/BaseCheckbox.ts new file mode 100644 index 0000000..71250c7 --- /dev/null +++ b/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('.ids-input'); + + if (!inputElement) { + throw new Error('Checkbox: Required elements are missing in the container.'); + } + + this._inputElement = inputElement; + } +} diff --git a/src/bundle/Resources/views/themes/standard/design_system/components/inputs/Checkbox.html.twig b/src/bundle/Resources/views/themes/standard/design_system/components/inputs/Checkbox.html.twig new file mode 100644 index 0000000..e68d675 --- /dev/null +++ b/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') ?? '' + ) +%} + +
+ +
diff --git a/src/bundle/Resources/views/themes/standard/design_system/components/inputs/ThreeStateCheckbox.html.twig b/src/bundle/Resources/views/themes/standard/design_system/components/inputs/ThreeStateCheckbox.html.twig new file mode 100644 index 0000000..fa3a643 --- /dev/null +++ b/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') ?? '' + ) +%} + +
+ +
diff --git a/src/lib/Twig/Components/inputs/AbstractCheckbox.php b/src/lib/Twig/Components/inputs/AbstractCheckbox.php new file mode 100644 index 0000000..bd7aa64 --- /dev/null +++ b/src/lib/Twig/Components/inputs/AbstractCheckbox.php @@ -0,0 +1,51 @@ + $props + * + * @return array + */ + #[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; +} diff --git a/src/lib/Twig/Components/inputs/Checkbox.php b/src/lib/Twig/Components/inputs/Checkbox.php new file mode 100644 index 0000000..2974ad5 --- /dev/null +++ b/src/lib/Twig/Components/inputs/Checkbox.php @@ -0,0 +1,20 @@ +define('indeterminate') + ->allowedTypes('bool') + ->default(false); + } +}