@agorapulse/ui-components 18.0.42 → 18.0.44

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

@@ -1,7 +1,6 @@
 import * as i0 from '@angular/core';
-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 { HostListener, Directive, inject, ElementRef, ChangeDetectorRef, Renderer2, signal, effect, booleanAttribute, Input, EventEmitter, Output, forwardRef, Attribute } from '@angular/core';
+import { NG_VALIDATORS } from '@angular/forms';
 import DOMPurify from 'dompurify';
 
 /**
@@ -92,77 +91,54 @@ 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) {
+    // State signals
+    _checked = signal(false);
+    _indeterminate = signal(false);
+    // Input signal accessors that work with host bindings
+    checked = this._checked.asReadonly();
+    indeterminate = this._indeterminate.asReadonly();
+    // Input setters with proper aliases for template binding
+    // Couldn't be migrated to yet
+    set checkedInput(checked) {
+        this._checked.set(checked);
+        this.updateNativeElementSync();
+    }
+    set indeterminateInput(indeterminate) {
         if (indeterminate) {
-            this._checked = false;
+            this._checked.set(false);
         }
-        this._indeterminate = indeterminate;
+        this._indeterminate.set(indeterminate);
+        this.updateNativeElementSync();
+    }
+    updateNativeElementSync() {
         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();
+            input.checked = this.checked();
+            input.indeterminate = this.indeterminate();
         }
     }
-    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 = () => { };
+    // Private properties
     listeners = [];
     styleElement;
-    wrapper;
-    checkmarkContainer;
-    indeterminateContainer;
-    symbolComponent;
+    checkmarkSvg;
+    indeterminateBar;
+    constructor() {
+        effect(() => {
+            if (this.checkmarkSvg && this.indeterminateBar) {
+                this.updateCheckmarkVisibility();
+            }
+        });
+    }
+    // Custom SVG content
+    checkSvgContent = `
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="10" height="10" fill="white">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M14.238 3.337a.92.92 0 0 1 .025 1.301l-7.7 8a.92.92 0 0 1-1.326 0l-3.5-3.636a.92.92 0 1 1 1.326-1.276L5.9 10.674l7.037-7.312a.92.92 0 0 1 1.301-.025Z" />
+        </svg>
+    `;
     ngOnInit() {
-        this.symbolRegistry.registerSymbols([apCheck]);
         this.createCheckboxStructure();
         this.setupEventListeners();
     }
@@ -171,93 +147,65 @@ class CheckboxDirective {
         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.checkmarkSvg && this.checkmarkSvg.parentNode) {
+            this.checkmarkSvg.parentNode.removeChild(this.checkmarkSvg);
         }
-        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);
+        if (this.indeterminateBar && this.indeterminateBar.parentNode) {
+            this.indeterminateBar.parentNode.removeChild(this.indeterminateBar);
         }
     }
     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
+        // Make input's parent use inline-flex for alignment and position relative
         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.setStyle(parent, 'position', 'relative');
         }
         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.createCheckmarkSvg();
         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);
+    createOverlayElement(element) {
+        const parent = this.elementRef.nativeElement.parentElement;
+        // Apply common positioning styles
+        this.renderer.setStyle(element, 'position', 'absolute');
+        this.renderer.setStyle(element, 'top', '50%');
+        this.renderer.setStyle(element, 'left', '8px'); // Center over 16px checkbox
+        this.renderer.setStyle(element, 'transform', 'translate(-50%, -50%)');
+        this.renderer.setStyle(element, 'pointer-events', 'none');
+        this.renderer.setStyle(element, 'opacity', '0');
+        this.renderer.setStyle(element, 'z-index', '1');
+        // Append to parent
+        this.renderer.appendChild(parent, element);
+    }
+    createCheckmarkSvg() {
+        // Create SVG element from string
+        const tempDiv = this.renderer.createElement('div');
+        this.renderer.setProperty(tempDiv, 'innerHTML', this.checkSvgContent);
+        this.checkmarkSvg = tempDiv.firstElementChild;
+        this.createOverlayElement(this.checkmarkSvg);
     }
     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);
+        // Create the indeterminate bar element
+        this.indeterminateBar = this.renderer.createElement('span');
+        this.renderer.setStyle(this.indeterminateBar, 'height', '1.5px');
+        this.renderer.setStyle(this.indeterminateBar, 'background', 'var(--ref-color-white)');
+        this.renderer.setStyle(this.indeterminateBar, 'width', '8px');
+        this.createOverlayElement(this.indeterminateBar);
     }
     updateCheckmarkVisibility() {
-        if (this.checkmarkContainer) {
-            const opacity = this._checked && !this._indeterminate ? '1' : '0';
-            this.renderer.setStyle(this.checkmarkContainer, 'opacity', opacity);
+        if (this.checkmarkSvg) {
+            const opacity = this.checked() && !this.indeterminate() ? '1' : '0';
+            this.renderer.setStyle(this.checkmarkSvg, 'opacity', opacity);
         }
-        if (this.indeterminateContainer) {
-            const opacity = this._indeterminate && !this._checked ? '1' : '0';
-            this.renderer.setStyle(this.indeterminateContainer, 'opacity', opacity);
+        if (this.indeterminateBar) {
+            const opacity = this.indeterminate() && !this.checked() ? '1' : '0';
+            this.renderer.setStyle(this.indeterminateBar, 'opacity', opacity);
         }
     }
     setupEventListeners() {
@@ -273,7 +221,7 @@ class CheckboxDirective {
             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) {
+                if (target.tagName === 'LABEL' && target.getAttribute('for') === input.id) {
                     // Small delay to ensure the label click is processed first
                     setTimeout(() => {
                         input.focus();
@@ -284,16 +232,13 @@ class CheckboxDirective {
         }
     }
     applyCheckboxStyles() {
-        // Style the input directly without moving DOM elements
         const styles = `
-            /* Complete reset and custom styling for our checkbox */
+            /* Minimal checkbox styling */
             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;
@@ -304,23 +249,9 @@ class CheckboxDirective {
                 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 */
@@ -368,7 +299,7 @@ class CheckboxDirective {
                 background: var(--ref-color-grey-20);
             }
             
-            /* Focus state - only show on hover-capable devices like the component */
+            /* Focus state */
             @media (hover: hover) {
                 input[type="checkbox"].ap-checkbox-styled:focus:not(.disabled) {
                     outline: 3px solid var(--ref-color-electric-blue-100) !important;
@@ -376,8 +307,8 @@ class CheckboxDirective {
                 }
             }
             
-            /* Label styling - targets labels that follow our wrapper containing styled checkboxes */
-            span:has(input[type="checkbox"].ap-checkbox-styled) + label {
+            /* Label styling */
+            input[type="checkbox"].ap-checkbox-styled + label {
                 display: flex;
                 align-items: center;
                 font-family: var(--comp-forms-label-font-family);
@@ -385,25 +316,17 @@ class CheckboxDirective {
                 font-weight: var(--comp-forms-label-font-weight);
                 line-height: var(--comp-forms-label-line-height);
                 color: var(--comp-forms-label-text-color);
+                cursor: pointer;
             }
             
             /* Empty label styling */
-            span:has(input[type="checkbox"].ap-checkbox-styled) + label:empty {
+            input[type="checkbox"].ap-checkbox-styled + label:empty {
                 display: none;
             }
             
             /* Disabled label styling */
-            span:has(input[type="checkbox"].ap-checkbox-styled:disabled) + label {
+            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;
             }
         `;
@@ -412,122 +335,41 @@ class CheckboxDirective {
         this.renderer.appendChild(this.styleElement, this.renderer.createText(styles));
         this.renderer.appendChild(document.head, this.styleElement);
     }
-    onBlur() {
-        this._onTouched();
-    }
     onValueChange() {
-        if (!this.disabled) {
+        if (!this.elementRef.nativeElement.disabled) {
             const input = this.elementRef.nativeElement;
-            if (this._indeterminate) {
+            if (this.indeterminate()) {
                 // When indeterminate, clicking should go to checked state
-                this._checked = true;
-                this._indeterminate = false;
+                this._checked.set(true);
+                this._indeterminate.set(false);
                 input.checked = true;
                 input.indeterminate = false;
             }
             else {
                 // Normal toggle behavior
-                this._checked = input.checked;
+                this._checked.set(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 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.9", type: CheckboxDirective, isStandalone: true, selector: "input[type=\"checkbox\"][apCheckbox]", inputs: { checkedInput: ["checked", "checkedInput"], indeterminateInput: ["indeterminate", "indeterminateInput", booleanAttribute] }, providers: [], 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',
-                    },
+                    providers: [],
                 }]
-        }], propDecorators: { ariaLabel: [{
-                type: Input,
-                args: ['aria-label']
-            }], ariaLabelledby: [{
+        }], ctorParameters: () => [], propDecorators: { checkedInput: [{
                 type: Input,
-                args: ['aria-labelledby']
-            }], ariaDescribedby: [{
-                type: Input,
-                args: ['aria-describedby']
-            }], disabled: [{
-                type: Input,
-                args: [{
-                        transform: booleanAttribute,
-                    }]
-            }], indeterminate: [{
+                args: ['checked']
+            }], indeterminateInput: [{
                 type: Input,
                 args: [{
                         transform: booleanAttribute,
+                        alias: 'indeterminate',
                     }]
-            }], checked: [{
-                type: Input
-            }], required: [{
-                type: Input,
-                args: [{
-                        transform: booleanAttribute,
-                    }]
-            }], name: [{
-                type: Input,
-                args: [{
-                        required: true,
-                    }]
-            }], change: [{
-                type: Output
             }] } });
 
 class DefaultImageDirective {
@@ -908,5 +750,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AP_CHECKBOX_DIRECTIVE_CONTROL_VALUE_ACCESSOR, AutosizeTextareaDirective, BaseButtonDirective, CheckboxDirective, DefaultImageDirective, EllipsisDirective, EqualValidatorDirective, FrozenGifDirective, GifService, MultiStyleTextDirective };
+export { AutosizeTextareaDirective, BaseButtonDirective, CheckboxDirective, DefaultImageDirective, EllipsisDirective, EqualValidatorDirective, FrozenGifDirective, GifService, MultiStyleTextDirective };
 //# sourceMappingURL=agorapulse-ui-components-directives.mjs.map