@agorapulse/ui-components 18.0.34 → 18.0.36

package/fesm2022/agorapulse-ui-components-directives.mjs

@@ -1,6 +1,7 @@
 import * as i0 from '@angular/core';
-import { HostListener, Directive, inject, ElementRef, ChangeDetectorRef, Input, EventEmitter, Output, forwardRef, Attribute } from '@angular/core';
-import { NG_VALIDATORS } from '@angular/forms';
+import { HostListener, Directive, inject, ElementRef, ChangeDetectorRef, forwardRef, Renderer2, ViewContainerRef, EventEmitter, booleanAttribute, Output, Input, Attribute } from '@angular/core';
+import { SymbolRegistry, apCheck, SymbolComponent } from '@agorapulse/ui-symbol';
+import { NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
 import DOMPurify from 'dompurify';
 
 /**
@@ -91,6 +92,444 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                 }]
         }] });
 
+const AP_CHECKBOX_DIRECTIVE_CONTROL_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => CheckboxDirective),
+    multi: true,
+};
+/*
+    Host bindings is important here:
+    - This provides encapsulation and reactivity regardless of how the directive is used in templates.
+    - It guarantees that properties like checked, disabled, required, and ARIA attributes always reflect
+    only the directive's logic, not just consumer bindings.
+    - So we need to have host bindings for all the properties that we want to control.
+    - We could also use @HostListener.
+*/
+class CheckboxDirective {
+    symbolRegistry = inject(SymbolRegistry);
+    elementRef = inject((ElementRef));
+    renderer = inject(Renderer2);
+    viewContainer = inject(ViewContainerRef);
+    ariaLabel;
+    ariaLabelledby;
+    ariaDescribedby;
+    disabled = false;
+    set indeterminate(indeterminate) {
+        if (indeterminate) {
+            this._checked = false;
+        }
+        this._indeterminate = indeterminate;
+        const input = this.elementRef.nativeElement;
+        if (input) {
+            input.indeterminate = indeterminate;
+        }
+        // Only update visibility if containers are ready
+        if (this.checkmarkContainer && this.indeterminateContainer) {
+            this.updateCheckmarkVisibility();
+        }
+    }
+    get indeterminate() {
+        return this._indeterminate;
+    }
+    set checked(checked) {
+        this._checked = checked;
+        // Only update visibility if containers are ready
+        if (this.checkmarkContainer && this.indeterminateContainer) {
+            this.updateCheckmarkVisibility();
+        }
+    }
+    get checked() {
+        return this._checked;
+    }
+    required = false;
+    set name(name) {
+        this._name = name;
+    }
+    get name() {
+        return this._name;
+    }
+    // eslint-disable-next-line @angular-eslint/no-output-native
+    change = new EventEmitter();
+    _checked = false;
+    _indeterminate = false;
+    _name = '';
+    _controlValueAccessorChangeFn = () => { };
+    _onTouched = () => { };
+    listeners = [];
+    styleElement;
+    wrapper;
+    checkmarkContainer;
+    indeterminateContainer;
+    symbolComponent;
+    ngOnInit() {
+        this.symbolRegistry.registerSymbols([apCheck]);
+        this.createCheckboxStructure();
+        this.setupEventListeners();
+    }
+    ngOnDestroy() {
+        this.listeners.forEach(unlisten => unlisten());
+        if (this.styleElement && this.styleElement.parentNode) {
+            this.styleElement.parentNode.removeChild(this.styleElement);
+        }
+        if (this.symbolComponent) {
+            this.symbolComponent.destroy();
+        }
+        if (this.checkmarkContainer && this.checkmarkContainer.parentNode) {
+            this.checkmarkContainer.parentNode.removeChild(this.checkmarkContainer);
+        }
+        if (this.indeterminateContainer && this.indeterminateContainer.parentNode) {
+            this.indeterminateContainer.parentNode.removeChild(this.indeterminateContainer);
+        }
+        // Move input back out of wrapper and remove wrapper
+        if (this.wrapper && this.wrapper.parentNode) {
+            const input = this.elementRef.nativeElement;
+            this.renderer.insertBefore(this.wrapper.parentNode, input, this.wrapper);
+            this.wrapper.parentNode.removeChild(this.wrapper);
+        }
+    }
+    createCheckboxStructure() {
+        const input = this.elementRef.nativeElement;
+        const parent = input.parentElement;
+        // Hot take - Input doesn't need positioning since it will be wrapped
+        // Make input's parent use inline-flex for alignment
+        if (parent) {
+            this.renderer.setStyle(parent, 'display', 'inline-flex');
+            this.renderer.setStyle(parent, 'align-items', 'center');
+            this.renderer.setStyle(parent, 'gap', 'var(--ref-spacing-xxs)');
+        }
+        this.renderer.addClass(input, 'ap-checkbox-styled');
+        this.checkmarkContainer = this.createOverlayContainer('ap-checkbox-checkmark');
+        this.wrapper = this.renderer.createElement('span');
+        this.renderer.setStyle(this.wrapper, 'position', 'relative');
+        this.renderer.setStyle(this.wrapper, 'display', 'inline-flex');
+        this.renderer.setStyle(this.wrapper, 'align-items', 'center');
+        this.renderer.setStyle(this.wrapper, 'vertical-align', 'middle');
+        this.renderer.insertBefore(parent, this.wrapper, input);
+        this.renderer.appendChild(this.wrapper, input);
+        this.renderer.appendChild(this.wrapper, this.checkmarkContainer);
+        this.indeterminateContainer = this.createOverlayContainer('ap-checkbox-indeterminate');
+        this.renderer.appendChild(this.wrapper, this.indeterminateContainer);
+        this.createCheckmarkSymbol();
+        this.createIndeterminateBar();
+        this.applyCheckboxStyles();
+        this.updateCheckmarkVisibility();
+    }
+    createOverlayContainer(className) {
+        const container = this.renderer.createElement('span');
+        this.renderer.addClass(container, className);
+        this.renderer.setStyle(container, 'position', 'absolute');
+        this.renderer.setStyle(container, 'top', '50%');
+        this.renderer.setStyle(container, 'left', '50%');
+        this.renderer.setStyle(container, 'transform', 'translate(-50%, -50%)');
+        this.renderer.setStyle(container, 'width', 'auto');
+        this.renderer.setStyle(container, 'height', 'auto');
+        this.renderer.setStyle(container, 'display', 'flex');
+        this.renderer.setStyle(container, 'justify-content', 'center');
+        this.renderer.setStyle(container, 'align-items', 'center');
+        this.renderer.setStyle(container, 'pointer-events', 'none');
+        this.renderer.setStyle(container, 'opacity', '0');
+        this.renderer.setStyle(container, 'z-index', '1');
+        return container;
+    }
+    createCheckmarkSymbol() {
+        // Create the symbol component
+        this.symbolComponent = this.viewContainer.createComponent(SymbolComponent);
+        // Set inputs using setInput method for signal-based inputs
+        this.symbolComponent.setInput('symbolId', 'check');
+        this.symbolComponent.setInput('color', 'white');
+        this.symbolComponent.setInput('size', 10);
+        // Append the symbol to our checkmark container
+        this.renderer.appendChild(this.checkmarkContainer, this.symbolComponent.location.nativeElement);
+    }
+    createIndeterminateBar() {
+        // Create the indeterminate bar element exactly like the component
+        const bar = this.renderer.createElement('span');
+        this.renderer.setStyle(bar, 'height', '1.5px');
+        this.renderer.setStyle(bar, 'background', 'var(--ref-color-white)');
+        this.renderer.setStyle(bar, 'width', '8px');
+        // Append the bar to the indeterminate container
+        this.renderer.appendChild(this.indeterminateContainer, bar);
+    }
+    updateCheckmarkVisibility() {
+        if (this.checkmarkContainer) {
+            const opacity = this._checked && !this._indeterminate ? '1' : '0';
+            this.renderer.setStyle(this.checkmarkContainer, 'opacity', opacity);
+        }
+        if (this.indeterminateContainer) {
+            const opacity = this._indeterminate && !this._checked ? '1' : '0';
+            this.renderer.setStyle(this.indeterminateContainer, 'opacity', opacity);
+        }
+    }
+    setupEventListeners() {
+        const input = this.elementRef.nativeElement;
+        // Input change listener (native checkbox change)
+        const changeListener = this.renderer.listen(input, 'change', () => {
+            this.onValueChange();
+        });
+        this.listeners.push(changeListener);
+        // Listen for label clicks to ensure focus is maintained
+        const parent = input.parentElement;
+        if (parent) {
+            const labelClickListener = this.renderer.listen(parent, 'click', (event) => {
+                const target = event.target;
+                // If clicking on a label that targets our input, ensure focus
+                if (target.tagName === 'LABEL' && target.getAttribute('for') === this.name) {
+                    // Small delay to ensure the label click is processed first
+                    setTimeout(() => {
+                        input.focus();
+                    }, 0);
+                }
+            });
+            this.listeners.push(labelClickListener);
+        }
+    }
+    applyCheckboxStyles() {
+        // Style the input directly without moving DOM elements
+        const styles = `
+            /* Complete reset and custom styling for our checkbox */
+            input[type="checkbox"].ap-checkbox-styled {
+                /* Targeted reset of problematic properties */
+                appearance: none !important;
+                -webkit-appearance: none !important;
+                -moz-appearance: none !important;
+                
+                /* Our custom styling - use !important to override any global styles */
+                display: inline-block !important;
+                width: 16px !important;
+                height: 16px !important;
+                min-width: 16px !important;
+                min-height: 16px !important;
+                margin: 0 !important;
+                padding: 0 !important;
+                border: 1px solid var(--ref-color-grey-60);
+                border-radius: var(--sys-border-radius-sm);
+                background: var(--ref-color-white);
+                background-color: var(--ref-color-white);
+                box-sizing: border-box;
+                position: relative;
+                cursor: pointer;
+                vertical-align: middle;
+                
+                /* Ensure no other styles can interfere */
+                box-shadow: none;
+                text-decoration: none;
+                font: inherit;
+                color: inherit;
+                letter-spacing: normal;
+                word-spacing: normal;
+                text-transform: none;
+                text-indent: 0;
+                text-shadow: none;
+                text-align: start;
+            }
+            
+            /* Hover state */
+            input[type="checkbox"].ap-checkbox-styled:hover {
+                border-color: var(--ref-color-grey-80);
+            }
+            
+            /* Active/pressed state */
+            input[type="checkbox"].ap-checkbox-styled:active {
+                border-color: var(--ref-color-grey-100);
+            }
+            
+            /* Checked state */
+            input[type="checkbox"].ap-checkbox-styled:checked {
+                background: var(--ref-color-electric-blue-100);
+                border-color: var(--ref-color-electric-blue-100);
+            }
+            
+            /* Checked hover state */
+            input[type="checkbox"].ap-checkbox-styled:checked:hover {
+                background: var(--ref-color-electric-blue-80);
+                border-color: var(--ref-color-electric-blue-100);
+            }
+            
+            /* Checked active/pressed state */
+            input[type="checkbox"].ap-checkbox-styled:checked:active {
+                background: var(--ref-color-electric-blue-60);
+                border-color: var(--ref-color-electric-blue-100);
+            }
+            
+            /* Indeterminate state */
+            input[type="checkbox"].ap-checkbox-styled:indeterminate {
+                background: var(--ref-color-electric-blue-100);
+                border-color: var(--ref-color-electric-blue-100);
+            }
+            
+            /* Disabled state */
+            input[type="checkbox"].ap-checkbox-styled:disabled {
+                border-color: var(--ref-color-grey-20);
+                background: var(--ref-color-grey-10);
+                cursor: default;
+            }
+            
+            input[type="checkbox"].ap-checkbox-styled:disabled:checked {
+                background: var(--ref-color-grey-20);
+            }
+            
+            /* Focus state - only show on hover-capable devices like the component */
+            @media (hover: hover) {
+                input[type="checkbox"].ap-checkbox-styled:focus:not(.disabled) {
+                    outline: 3px solid var(--ref-color-electric-blue-100) !important;
+                    outline-offset: 1px !important;
+                }
+            }
+            
+            /* Label styling - targets labels that follow our wrapper containing styled checkboxes */
+            span:has(input[type="checkbox"].ap-checkbox-styled) + label {
+                display: flex;
+                align-items: center;
+                font-family: var(--comp-forms-label-font-family);
+                font-size: var(--comp-forms-label-size);
+                font-weight: var(--comp-forms-label-font-weight);
+                line-height: var(--comp-forms-label-line-height);
+                color: var(--comp-forms-label-text-color);
+            }
+            
+            /* Empty label styling */
+            span:has(input[type="checkbox"].ap-checkbox-styled) + label:empty {
+                display: none;
+            }
+            
+            /* Disabled label styling */
+            span:has(input[type="checkbox"].ap-checkbox-styled:disabled) + label {
+                color: var(--ref-color-grey-60);
+            }
+            
+            /* Label hover styling */
+            span:has(input[type="checkbox"].ap-checkbox-styled) + label:hover:not(.disabled) {
+                cursor: pointer;
+            }
+            
+            /* Disabled label hover */
+            span:has(input[type="checkbox"].ap-checkbox-styled:disabled) + label:hover {
+                cursor: default;
+            }
+        `;
+        // Create and append style element
+        this.styleElement = this.renderer.createElement('style');
+        this.renderer.appendChild(this.styleElement, this.renderer.createText(styles));
+        this.renderer.appendChild(document.head, this.styleElement);
+    }
+    onBlur() {
+        this._onTouched();
+    }
+    onValueChange() {
+        if (!this.disabled) {
+            const input = this.elementRef.nativeElement;
+            if (this._indeterminate) {
+                // When indeterminate, clicking should go to checked state
+                this._checked = true;
+                this._indeterminate = false;
+                input.checked = true;
+                input.indeterminate = false;
+            }
+            else {
+                // Normal toggle behavior
+                this._checked = input.checked;
+            }
+            this.updateCheckmarkVisibility();
+            this.change.emit(this._checked);
+            this._controlValueAccessorChangeFn(this._checked);
+        }
+    }
+    // ControlValueAccessor implementation
+    writeValue(value) {
+        this._checked = value;
+        const input = this.elementRef.nativeElement;
+        input.checked = value;
+        // Ensure indeterminate state is properly set
+        input.indeterminate = this._indeterminate;
+        this.updateCheckmarkVisibility();
+    }
+    registerOnChange(fn) {
+        this._controlValueAccessorChangeFn = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        const input = this.elementRef.nativeElement;
+        input.disabled = isDisabled;
+    }
+    validate() {
+        const isNotValid = !this._checked && this.required;
+        return (isNotValid && {
+            invalid: true,
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: CheckboxDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.9", type: CheckboxDirective, isStandalone: true, selector: "input[type=\"checkbox\"][apCheckbox]", inputs: { ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], ariaDescribedby: ["aria-describedby", "ariaDescribedby"], disabled: ["disabled", "disabled", booleanAttribute], indeterminate: ["indeterminate", "indeterminate", booleanAttribute], checked: "checked", required: ["required", "required", booleanAttribute], name: "name" }, outputs: { change: "change" }, host: { listeners: { "blur": "onBlur()" }, properties: { "disabled": "disabled", "required": "required", "checked": "checked", "attr.aria-label": "ariaLabel", "attr.aria-labelledby": "ariaLabelledby", "attr.aria-describedby": "ariaDescribedby", "attr.data-test": "name", "id": "name" } }, providers: [
+            AP_CHECKBOX_DIRECTIVE_CONTROL_VALUE_ACCESSOR,
+            {
+                provide: NG_VALIDATORS,
+                useExisting: CheckboxDirective,
+                multi: true,
+            },
+        ], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: CheckboxDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[type="checkbox"][apCheckbox]',
+                    standalone: true,
+                    providers: [
+                        AP_CHECKBOX_DIRECTIVE_CONTROL_VALUE_ACCESSOR,
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: CheckboxDirective,
+                            multi: true,
+                        },
+                    ],
+                    host: {
+                        '(blur)': 'onBlur()',
+                        '[disabled]': 'disabled',
+                        '[required]': 'required',
+                        '[checked]': 'checked',
+                        '[attr.aria-label]': 'ariaLabel',
+                        '[attr.aria-labelledby]': 'ariaLabelledby',
+                        '[attr.aria-describedby]': 'ariaDescribedby',
+                        '[attr.data-test]': 'name',
+                        '[id]': 'name',
+                    },
+                }]
+        }], propDecorators: { ariaLabel: [{
+                type: Input,
+                args: ['aria-label']
+            }], ariaLabelledby: [{
+                type: Input,
+                args: ['aria-labelledby']
+            }], ariaDescribedby: [{
+                type: Input,
+                args: ['aria-describedby']
+            }], disabled: [{
+                type: Input,
+                args: [{
+                        transform: booleanAttribute,
+                    }]
+            }], indeterminate: [{
+                type: Input,
+                args: [{
+                        transform: booleanAttribute,
+                    }]
+            }], checked: [{
+                type: Input
+            }], required: [{
+                type: Input,
+                args: [{
+                        transform: booleanAttribute,
+                    }]
+            }], name: [{
+                type: Input,
+                args: [{
+                        required: true,
+                    }]
+            }], change: [{
+                type: Output
+            }] } });
+
 class DefaultImageDirective {
     src = '';
     default = '';
@@ -469,5 +908,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AutosizeTextareaDirective, BaseButtonDirective, DefaultImageDirective, EllipsisDirective, EqualValidatorDirective, FrozenGifDirective, GifService, MultiStyleTextDirective };
+export { AP_CHECKBOX_DIRECTIVE_CONTROL_VALUE_ACCESSOR, AutosizeTextareaDirective, BaseButtonDirective, CheckboxDirective, DefaultImageDirective, EllipsisDirective, EqualValidatorDirective, FrozenGifDirective, GifService, MultiStyleTextDirective };
 //# sourceMappingURL=agorapulse-ui-components-directives.mjs.map