@fuentis/phoenix-ui 0.0.9-alpha.547 → 0.0.9-alpha.548

package/fesm2022/fuentis-phoenix-ui.mjs

@@ -8531,10 +8531,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             }] } });
 
 class MetaCheckboxColorPickerV2Component {
-    /** 2D grid boja, npr. [['#ff0000','#00ff00'],['#0000ff','#ffff00']] */
     options = [];
-    /** optional hard-disable from parent */
     disable = false;
+    cdr = inject(ChangeDetectorRef);
     value = null;
     focusedColor = null;
     isDisabled = false;
@@ -8544,6 +8543,7 @@ class MetaCheckboxColorPickerV2Component {
     writeValue(v) {
         this.value = v ?? null;
         this.focusedColor = this.value;
+        this.cdr.markForCheck();
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -8553,6 +8553,7 @@ class MetaCheckboxColorPickerV2Component {
     }
     setDisabledState(isDisabled) {
         this.isDisabled = isDisabled;
+        this.cdr.markForCheck();
     }
     get disabled() {
         return this.disable || this.isDisabled;
@@ -8571,6 +8572,7 @@ class MetaCheckboxColorPickerV2Component {
         this.value = color;
         this.onChange(color);
         this.onTouched();
+        this.cdr.markForCheck();
         popover.hide();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaCheckboxColorPickerV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -8610,17 +8612,23 @@ class MetaCheckboxColorPickerV2Component {
       (click)="toggle(popover, $event)"
       aria-label="Select color"
     ></button>
-  `, isInline: true, styles: [":host ::ng-deep .p-popover-content{padding:0!important}.color-picker{display:flex;flex-direction:column;padding:10px}.color-row{display:flex;justify-content:center;gap:8px}.mb-2{margin-bottom:8px}.color-box{margin:2px;width:30px;height:30px;cursor:pointer;border-radius:4px;border:0;padding:0;background:transparent}.color-box:hover:not(:disabled){transform:scale(1.1);opacity:.9;box-shadow:0 0 5px #0003}.color-box:disabled{cursor:not-allowed;opacity:.6}.selected-color{width:35px;height:35px;border:2px solid #ccc;cursor:pointer;border-radius:6px;padding:0;background:transparent}.selected-color:disabled{cursor:not-allowed;opacity:.6}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i2$1.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i2$1.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MetaCheckboxColorPickerV2Component, decorators: [{
             type: Component,
-            args: [{ selector: 'phoenix-meta-checkbox-color-picker-v2', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, PopoverModule], providers: [
+            args: [{
+                    selector: 'phoenix-meta-checkbox-color-picker-v2',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [CommonModule, FormsModule, PopoverModule],
+                    providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => MetaCheckboxColorPickerV2Component),
                             multi: true,
                         },
-                    ], template: `
+                    ],
+                    template: `
     <p-popover #popover>
       <div class="color-picker">
         @for (row of options; track $index; let last = $last) {
@@ -8650,7 +8658,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
       (click)="toggle(popover, $event)"
       aria-label="Select color"
     ></button>
-  `, styles: [":host ::ng-deep .p-popover-content{padding:0!important}.color-picker{display:flex;flex-direction:column;padding:10px}.color-row{display:flex;justify-content:center;gap:8px}.mb-2{margin-bottom:8px}.color-box{margin:2px;width:30px;height:30px;cursor:pointer;border-radius:4px;border:0;padding:0;background:transparent}.color-box:hover:not(:disabled){transform:scale(1.1);opacity:.9;box-shadow:0 0 5px #0003}.color-box:disabled{cursor:not-allowed;opacity:.6}.selected-color{width:35px;height:35px;border:2px solid #ccc;cursor:pointer;border-radius:6px;padding:0;background:transparent}.selected-color:disabled{cursor:not-allowed;opacity:.6}\n"] }]
+  `,
+                }]
         }], propDecorators: { options: [{
                 type: Input
             }], disable: [{