ng-prime-tools 1.0.74 → 1.0.75

package/fesm2022/ng-prime-tools.mjs

@@ -1398,7 +1398,6 @@ class PTButtonComponent {
         this.el = el;
     }
     ngOnInit() {
-        // Fallback to default config if undefined
         if (!this.buttonConfig) {
             this.buttonConfig = {
                 label: 'Click Me',
@@ -1419,87 +1418,123 @@ class PTButtonComponent {
     }
     ngOnChanges(changes) {
         const configChange = changes['buttonConfig'];
-        if (configChange) {
-            const prev = configChange.previousValue;
-            const curr = configChange.currentValue;
-            if (prev && curr) {
-                const onlyDisabledChanged = prev.disabled !== curr.disabled &&
-                    JSON.stringify({ ...prev, disabled: undefined }) ===
-                        JSON.stringify({ ...curr, disabled: undefined });
-                if (onlyDisabledChanged) {
-                    this.updateDisabledStyles(curr.disabled ?? false);
-                }
-                else {
-                    this.applyButtonStyles();
-                }
+        if (!configChange) {
+            return;
+        }
+        const prev = configChange.previousValue;
+        const curr = configChange.currentValue;
+        if (prev && curr) {
+            const onlyDisabledChanged = prev.disabled !== curr.disabled &&
+                JSON.stringify({ ...prev, disabled: undefined }) ===
+                    JSON.stringify({ ...curr, disabled: undefined });
+            if (onlyDisabledChanged) {
+                setTimeout(() => this.updateDisabledStyles(curr.disabled ?? false));
             }
             else {
-                // If no previous value (first load), apply full styles
-                this.applyButtonStyles();
+                setTimeout(() => this.applyButtonStyles());
             }
+            return;
         }
+        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);
+    }
+    getSeverity() {
+        /**
+         * If custom colors are provided, do not pass PrimeNG severity.
+         * PrimeNG severity classes can override custom background/border colors.
+         */
+        if (this.hasCustomColors()) {
+            return undefined;
+        }
+        return 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(' ');
     }
     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()) {
+            this.renderer.setStyle(buttonElement, 'color', isDisabled ? '#999' : this.buttonConfig.fontColor || '#ffffff');
+            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');
+            return;
+        }
+        this.renderer.removeStyle(buttonElement, 'color');
+        this.renderer.removeStyle(buttonElement, 'background-color');
+        this.renderer.removeStyle(buttonElement, 'border-color');
     }
     /**
-     * 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;
         }
         const isDisabled = !!this.buttonConfig.disabled;
         const useThemeColors = this.shouldUseThemeColors();
-        // 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
         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);
-        }
-        else {
-            // If we delegate to theme, clear any inline overrides
-            this.renderer.removeStyle(buttonElement, 'color');
-            this.renderer.removeStyle(buttonElement, 'background-color');
-            this.renderer.removeStyle(buttonElement, 'border-color');
+            this.renderer.setStyle(buttonElement, 'color', isDisabled ? '#999' : this.buttonConfig.fontColor || '#ffffff');
+            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');
+            return;
         }
+        this.renderer.removeStyle(buttonElement, 'color');
+        this.renderer.removeStyle(buttonElement, 'background-color');
+        this.renderer.removeStyle(buttonElement, 'border-color');
+    }
+    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'));
     }
     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  [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  [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
             }] } });