ng-prime-tools 1.0.74 → 1.0.76

package/fesm2022/ng-prime-tools.mjs

@@ -1427,52 +1427,117 @@ class PTButtonComponent {
                     JSON.stringify({ ...prev, disabled: undefined }) ===
                         JSON.stringify({ ...curr, disabled: undefined });
                 if (onlyDisabledChanged) {
-                    this.updateDisabledStyles(curr.disabled ?? false);
+                    setTimeout(() => this.updateDisabledStyles(curr.disabled ?? false));
                 }
                 else {
-                    this.applyButtonStyles();
+                    setTimeout(() => this.applyButtonStyles());
                 }
             }
             else {
                 // If no previous value (first load), apply full styles
-                this.applyButtonStyles();
+                setTimeout(() => this.applyButtonStyles());
             }
         }
     }
     ngAfterViewInit() {
-        this.applyButtonStyles();
+        setTimeout(() => this.applyButtonStyles());
     }
     getIconPos() {
-        return this.buttonConfig.iconPos === 'right' ? 'right' : 'left';
+        return this.buttonConfig?.iconPos === 'right' ? 'right' : 'left';
     }
     getType() {
-        return this.buttonConfig.type || 'button';
+        return this.buttonConfig?.type || 'button';
+    }
+    hasCustomColors() {
+        return !!(this.buttonConfig?.backgroundColor ||
+            this.buttonConfig?.borderColor ||
+            this.buttonConfig?.fontColor);
+    }
+    /**
+     * When custom colors are provided, do not pass PrimeNG severity.
+     * Otherwise PrimeNG theme classes can override the custom colors.
+     */
+    getSeverity() {
+        return this.hasCustomColors() ? undefined : this.buttonConfig?.severity;
+    }
+    getStyleClass() {
+        const classes = [];
+        if (this.buttonConfig?.styleClass) {
+            classes.push(this.buttonConfig.styleClass);
+        }
+        if (this.hasCustomColors()) {
+            classes.push('pt-custom-colored-button');
+        }
+        return classes.join(' ');
+    }
+    /**
+     * Direct style binding for PrimeNG p-button.
+     * This is the reliable fallback for PrimeNG v21 themes.
+     */
+    getButtonStyle() {
+        const baseStyle = {
+            width: this.buttonConfig?.width || 'auto',
+            height: this.buttonConfig?.height || 'auto',
+        };
+        if (!this.hasCustomColors()) {
+            return baseStyle;
+        }
+        if (this.buttonConfig?.disabled) {
+            return {
+                ...baseStyle,
+                color: '#999999',
+                background: '#e0e0e0',
+                'background-color': '#e0e0e0',
+                'border-color': '#bdbdbd',
+            };
+        }
+        const backgroundColor = this.buttonConfig.backgroundColor || 'transparent';
+        const borderColor = this.buttonConfig.borderColor ||
+            this.buttonConfig.backgroundColor ||
+            'transparent';
+        return {
+            ...baseStyle,
+            color: this.buttonConfig.fontColor || '#ffffff',
+            background: backgroundColor,
+            'background-color': backgroundColor,
+            'border-color': borderColor,
+        };
+    }
+    getButtonElement() {
+        return (this.el.nativeElement.querySelector('button.p-button') ||
+            this.el.nativeElement.querySelector('button.p-element') ||
+            this.el.nativeElement.querySelector('.p-button') ||
+            this.el.nativeElement.querySelector('button'));
     }
     updateDisabledStyles(isDisabled) {
-        const buttonElement = this.el.nativeElement.querySelector('button.p-element');
-        if (buttonElement) {
-            this.renderer.setStyle(buttonElement, 'color', isDisabled ? '#999' : this.buttonConfig.fontColor);
-            this.renderer.setStyle(buttonElement, 'background-color', isDisabled ? '#e0e0e0' : this.buttonConfig.backgroundColor);
-            this.renderer.setStyle(buttonElement, 'border-color', isDisabled ? '#bdbdbd' : this.buttonConfig.borderColor);
+        const buttonElement = this.getButtonElement();
+        if (!buttonElement || !this.buttonConfig) {
+            return;
+        }
+        if (!this.hasCustomColors()) {
+            return;
         }
+        this.renderer.setStyle(buttonElement, 'color', isDisabled ? '#999' : this.buttonConfig.fontColor || '#ffffff');
+        this.renderer.setStyle(buttonElement, 'background', isDisabled
+            ? '#e0e0e0'
+            : this.buttonConfig.backgroundColor || 'transparent');
+        this.renderer.setStyle(buttonElement, 'background-color', isDisabled
+            ? '#e0e0e0'
+            : this.buttonConfig.backgroundColor || 'transparent');
+        this.renderer.setStyle(buttonElement, 'border-color', isDisabled
+            ? '#bdbdbd'
+            : this.buttonConfig.borderColor ||
+                this.buttonConfig.backgroundColor ||
+                'transparent');
     }
     /**
-     * We delegate colors to PrimeNG theme when:
-     * - outlined = true
-     * - and no manual color is provided (no backgroundColor, borderColor, fontColor)
+     * We delegate colors to PrimeNG theme when no manual color is provided.
      */
     shouldUseThemeColors() {
-        if (!this.buttonConfig) {
-            return false;
-        }
-        const outlined = !!this.buttonConfig.outlined; // ✅ coerce to boolean
-        return (outlined &&
-            !this.buttonConfig.backgroundColor &&
-            !this.buttonConfig.borderColor &&
-            !this.buttonConfig.fontColor);
+        return !this.hasCustomColors();
     }
     applyButtonStyles() {
-        const buttonElement = this.el.nativeElement.querySelector('button.p-element');
+        const buttonElement = this.getButtonElement();
         if (!buttonElement || !this.buttonConfig) {
             return;
         }
@@ -1481,25 +1546,35 @@ class PTButtonComponent {
         // Width / height always applied
         this.renderer.setStyle(buttonElement, 'width', this.buttonConfig.width || 'auto');
         this.renderer.setStyle(buttonElement, 'height', this.buttonConfig.height || 'auto');
-        // ✅ Only override colors when we are NOT delegating to PrimeNG theme
+        // Only override colors when custom colors are provided
         if (!useThemeColors) {
-            this.renderer.setStyle(buttonElement, 'color', isDisabled ? '#999' : this.buttonConfig.fontColor);
-            this.renderer.setStyle(buttonElement, 'background-color', isDisabled ? '#e0e0e0' : this.buttonConfig.backgroundColor);
-            this.renderer.setStyle(buttonElement, 'border-color', isDisabled ? '#bdbdbd' : this.buttonConfig.borderColor);
+            this.renderer.setStyle(buttonElement, 'color', isDisabled ? '#999' : this.buttonConfig.fontColor || '#ffffff');
+            this.renderer.setStyle(buttonElement, 'background', isDisabled
+                ? '#e0e0e0'
+                : this.buttonConfig.backgroundColor || 'transparent');
+            this.renderer.setStyle(buttonElement, 'background-color', isDisabled
+                ? '#e0e0e0'
+                : this.buttonConfig.backgroundColor || 'transparent');
+            this.renderer.setStyle(buttonElement, 'border-color', isDisabled
+                ? '#bdbdbd'
+                : this.buttonConfig.borderColor ||
+                    this.buttonConfig.backgroundColor ||
+                    'transparent');
         }
         else {
             // If we delegate to theme, clear any inline overrides
             this.renderer.removeStyle(buttonElement, 'color');
+            this.renderer.removeStyle(buttonElement, 'background');
             this.renderer.removeStyle(buttonElement, 'background-color');
             this.renderer.removeStyle(buttonElement, 'border-color');
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTButtonComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.14", type: PTButtonComponent, isStandalone: false, selector: "pt-button", inputs: { buttonConfig: "buttonConfig" }, usesOnChanges: true, ngImport: i0, template: "<p-button\n  [label]=\"buttonConfig.label\"\n  [icon]=\"buttonConfig.icon || ''\"\n  [iconPos]=\"getIconPos()\"\n  [disabled]=\"buttonConfig.disabled\"\n  [loading]=\"buttonConfig.loading\"\n  [class]=\"buttonConfig.styleClass || ''\"\n  [type]=\"getType()\"\n  [severity]=\"buttonConfig.severity\"\n  [outlined]=\"buttonConfig.outlined\"\n></p-button>\n", styles: ["::ng-deep p-button{display:block}\n"], dependencies: [{ kind: "component", type: i6.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.14", type: PTButtonComponent, isStandalone: false, selector: "pt-button", inputs: { buttonConfig: "buttonConfig" }, usesOnChanges: true, ngImport: i0, template: "<p-button\n  [label]=\"buttonConfig.label\"\n  [icon]=\"buttonConfig.icon || ''\"\n  [iconPos]=\"getIconPos()\"\n  [disabled]=\"buttonConfig.disabled\"\n  [loading]=\"buttonConfig.loading\"\n  [styleClass]=\"getStyleClass()\"\n  [style]=\"getButtonStyle()\"\n  [type]=\"getType()\"\n  [severity]=\"getSeverity()\"\n  [outlined]=\"buttonConfig.outlined\"\n></p-button>\n", styles: [":host{display:inline-block}:host ::ng-deep p-button{display:block}:host ::ng-deep .pt-custom-colored-button.p-button{box-shadow:none}:host ::ng-deep .pt-custom-colored-button.p-button:hover:not(:disabled){filter:brightness(.95)}:host ::ng-deep .pt-custom-colored-button.p-button:disabled{filter:none;cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: i6.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pt-button', standalone: false, template: "<p-button\n  [label]=\"buttonConfig.label\"\n  [icon]=\"buttonConfig.icon || ''\"\n  [iconPos]=\"getIconPos()\"\n  [disabled]=\"buttonConfig.disabled\"\n  [loading]=\"buttonConfig.loading\"\n  [class]=\"buttonConfig.styleClass || ''\"\n  [type]=\"getType()\"\n  [severity]=\"buttonConfig.severity\"\n  [outlined]=\"buttonConfig.outlined\"\n></p-button>\n", styles: ["::ng-deep p-button{display:block}\n"] }]
+            args: [{ selector: 'pt-button', standalone: false, template: "<p-button\n  [label]=\"buttonConfig.label\"\n  [icon]=\"buttonConfig.icon || ''\"\n  [iconPos]=\"getIconPos()\"\n  [disabled]=\"buttonConfig.disabled\"\n  [loading]=\"buttonConfig.loading\"\n  [styleClass]=\"getStyleClass()\"\n  [style]=\"getButtonStyle()\"\n  [type]=\"getType()\"\n  [severity]=\"getSeverity()\"\n  [outlined]=\"buttonConfig.outlined\"\n></p-button>\n", styles: [":host{display:inline-block}:host ::ng-deep p-button{display:block}:host ::ng-deep .pt-custom-colored-button.p-button{box-shadow:none}:host ::ng-deep .pt-custom-colored-button.p-button:hover:not(:disabled){filter:brightness(.95)}:host ::ng-deep .pt-custom-colored-button.p-button:disabled{filter:none;cursor:not-allowed}\n"] }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { buttonConfig: [{
                 type: Input
             }] } });