ng-prime-tools 1.0.75 → 1.0.76
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1398,6 +1398,7 @@ class PTButtonComponent {
|
|
|
1398
1398
|
this.el = el;
|
|
1399
1399
|
}
|
|
1400
1400
|
ngOnInit() {
|
|
1401
|
+
// Fallback to default config if undefined
|
|
1401
1402
|
if (!this.buttonConfig) {
|
|
1402
1403
|
this.buttonConfig = {
|
|
1403
1404
|
label: 'Click Me',
|
|
@@ -1418,24 +1419,25 @@ class PTButtonComponent {
|
|
|
1418
1419
|
}
|
|
1419
1420
|
ngOnChanges(changes) {
|
|
1420
1421
|
const configChange = changes['buttonConfig'];
|
|
1421
|
-
if (
|
|
1422
|
-
|
|
1423
|
-
|
|
1424
|
-
|
|
1425
|
-
|
|
1426
|
-
|
|
1427
|
-
|
|
1428
|
-
|
|
1429
|
-
|
|
1430
|
-
|
|
1431
|
-
|
|
1422
|
+
if (configChange) {
|
|
1423
|
+
const prev = configChange.previousValue;
|
|
1424
|
+
const curr = configChange.currentValue;
|
|
1425
|
+
if (prev && curr) {
|
|
1426
|
+
const onlyDisabledChanged = prev.disabled !== curr.disabled &&
|
|
1427
|
+
JSON.stringify({ ...prev, disabled: undefined }) ===
|
|
1428
|
+
JSON.stringify({ ...curr, disabled: undefined });
|
|
1429
|
+
if (onlyDisabledChanged) {
|
|
1430
|
+
setTimeout(() => this.updateDisabledStyles(curr.disabled ?? false));
|
|
1431
|
+
}
|
|
1432
|
+
else {
|
|
1433
|
+
setTimeout(() => this.applyButtonStyles());
|
|
1434
|
+
}
|
|
1432
1435
|
}
|
|
1433
1436
|
else {
|
|
1437
|
+
// If no previous value (first load), apply full styles
|
|
1434
1438
|
setTimeout(() => this.applyButtonStyles());
|
|
1435
1439
|
}
|
|
1436
|
-
return;
|
|
1437
1440
|
}
|
|
1438
|
-
setTimeout(() => this.applyButtonStyles());
|
|
1439
1441
|
}
|
|
1440
1442
|
ngAfterViewInit() {
|
|
1441
1443
|
setTimeout(() => this.applyButtonStyles());
|
|
@@ -1451,15 +1453,12 @@ class PTButtonComponent {
|
|
|
1451
1453
|
this.buttonConfig?.borderColor ||
|
|
1452
1454
|
this.buttonConfig?.fontColor);
|
|
1453
1455
|
}
|
|
1456
|
+
/**
|
|
1457
|
+
* When custom colors are provided, do not pass PrimeNG severity.
|
|
1458
|
+
* Otherwise PrimeNG theme classes can override the custom colors.
|
|
1459
|
+
*/
|
|
1454
1460
|
getSeverity() {
|
|
1455
|
-
|
|
1456
|
-
* If custom colors are provided, do not pass PrimeNG severity.
|
|
1457
|
-
* PrimeNG severity classes can override custom background/border colors.
|
|
1458
|
-
*/
|
|
1459
|
-
if (this.hasCustomColors()) {
|
|
1460
|
-
return undefined;
|
|
1461
|
-
}
|
|
1462
|
-
return this.buttonConfig?.severity;
|
|
1461
|
+
return this.hasCustomColors() ? undefined : this.buttonConfig?.severity;
|
|
1463
1462
|
}
|
|
1464
1463
|
getStyleClass() {
|
|
1465
1464
|
const classes = [];
|
|
@@ -1471,26 +1470,65 @@ class PTButtonComponent {
|
|
|
1471
1470
|
}
|
|
1472
1471
|
return classes.join(' ');
|
|
1473
1472
|
}
|
|
1473
|
+
/**
|
|
1474
|
+
* Direct style binding for PrimeNG p-button.
|
|
1475
|
+
* This is the reliable fallback for PrimeNG v21 themes.
|
|
1476
|
+
*/
|
|
1477
|
+
getButtonStyle() {
|
|
1478
|
+
const baseStyle = {
|
|
1479
|
+
width: this.buttonConfig?.width || 'auto',
|
|
1480
|
+
height: this.buttonConfig?.height || 'auto',
|
|
1481
|
+
};
|
|
1482
|
+
if (!this.hasCustomColors()) {
|
|
1483
|
+
return baseStyle;
|
|
1484
|
+
}
|
|
1485
|
+
if (this.buttonConfig?.disabled) {
|
|
1486
|
+
return {
|
|
1487
|
+
...baseStyle,
|
|
1488
|
+
color: '#999999',
|
|
1489
|
+
background: '#e0e0e0',
|
|
1490
|
+
'background-color': '#e0e0e0',
|
|
1491
|
+
'border-color': '#bdbdbd',
|
|
1492
|
+
};
|
|
1493
|
+
}
|
|
1494
|
+
const backgroundColor = this.buttonConfig.backgroundColor || 'transparent';
|
|
1495
|
+
const borderColor = this.buttonConfig.borderColor ||
|
|
1496
|
+
this.buttonConfig.backgroundColor ||
|
|
1497
|
+
'transparent';
|
|
1498
|
+
return {
|
|
1499
|
+
...baseStyle,
|
|
1500
|
+
color: this.buttonConfig.fontColor || '#ffffff',
|
|
1501
|
+
background: backgroundColor,
|
|
1502
|
+
'background-color': backgroundColor,
|
|
1503
|
+
'border-color': borderColor,
|
|
1504
|
+
};
|
|
1505
|
+
}
|
|
1506
|
+
getButtonElement() {
|
|
1507
|
+
return (this.el.nativeElement.querySelector('button.p-button') ||
|
|
1508
|
+
this.el.nativeElement.querySelector('button.p-element') ||
|
|
1509
|
+
this.el.nativeElement.querySelector('.p-button') ||
|
|
1510
|
+
this.el.nativeElement.querySelector('button'));
|
|
1511
|
+
}
|
|
1474
1512
|
updateDisabledStyles(isDisabled) {
|
|
1475
1513
|
const buttonElement = this.getButtonElement();
|
|
1476
1514
|
if (!buttonElement || !this.buttonConfig) {
|
|
1477
1515
|
return;
|
|
1478
1516
|
}
|
|
1479
|
-
if (this.hasCustomColors()) {
|
|
1480
|
-
this.renderer.setStyle(buttonElement, 'color', isDisabled ? '#999' : this.buttonConfig.fontColor || '#ffffff');
|
|
1481
|
-
this.renderer.setStyle(buttonElement, 'background-color', isDisabled
|
|
1482
|
-
? '#e0e0e0'
|
|
1483
|
-
: this.buttonConfig.backgroundColor || 'transparent');
|
|
1484
|
-
this.renderer.setStyle(buttonElement, 'border-color', isDisabled
|
|
1485
|
-
? '#bdbdbd'
|
|
1486
|
-
: this.buttonConfig.borderColor ||
|
|
1487
|
-
this.buttonConfig.backgroundColor ||
|
|
1488
|
-
'transparent');
|
|
1517
|
+
if (!this.hasCustomColors()) {
|
|
1489
1518
|
return;
|
|
1490
1519
|
}
|
|
1491
|
-
this.renderer.
|
|
1492
|
-
this.renderer.
|
|
1493
|
-
|
|
1520
|
+
this.renderer.setStyle(buttonElement, 'color', isDisabled ? '#999' : this.buttonConfig.fontColor || '#ffffff');
|
|
1521
|
+
this.renderer.setStyle(buttonElement, 'background', isDisabled
|
|
1522
|
+
? '#e0e0e0'
|
|
1523
|
+
: this.buttonConfig.backgroundColor || 'transparent');
|
|
1524
|
+
this.renderer.setStyle(buttonElement, 'background-color', isDisabled
|
|
1525
|
+
? '#e0e0e0'
|
|
1526
|
+
: this.buttonConfig.backgroundColor || 'transparent');
|
|
1527
|
+
this.renderer.setStyle(buttonElement, 'border-color', isDisabled
|
|
1528
|
+
? '#bdbdbd'
|
|
1529
|
+
: this.buttonConfig.borderColor ||
|
|
1530
|
+
this.buttonConfig.backgroundColor ||
|
|
1531
|
+
'transparent');
|
|
1494
1532
|
}
|
|
1495
1533
|
/**
|
|
1496
1534
|
* We delegate colors to PrimeNG theme when no manual color is provided.
|
|
@@ -1505,10 +1543,15 @@ class PTButtonComponent {
|
|
|
1505
1543
|
}
|
|
1506
1544
|
const isDisabled = !!this.buttonConfig.disabled;
|
|
1507
1545
|
const useThemeColors = this.shouldUseThemeColors();
|
|
1546
|
+
// Width / height always applied
|
|
1508
1547
|
this.renderer.setStyle(buttonElement, 'width', this.buttonConfig.width || 'auto');
|
|
1509
1548
|
this.renderer.setStyle(buttonElement, 'height', this.buttonConfig.height || 'auto');
|
|
1549
|
+
// Only override colors when custom colors are provided
|
|
1510
1550
|
if (!useThemeColors) {
|
|
1511
1551
|
this.renderer.setStyle(buttonElement, 'color', isDisabled ? '#999' : this.buttonConfig.fontColor || '#ffffff');
|
|
1552
|
+
this.renderer.setStyle(buttonElement, 'background', isDisabled
|
|
1553
|
+
? '#e0e0e0'
|
|
1554
|
+
: this.buttonConfig.backgroundColor || 'transparent');
|
|
1512
1555
|
this.renderer.setStyle(buttonElement, 'background-color', isDisabled
|
|
1513
1556
|
? '#e0e0e0'
|
|
1514
1557
|
: this.buttonConfig.backgroundColor || 'transparent');
|
|
@@ -1517,24 +1560,21 @@ class PTButtonComponent {
|
|
|
1517
1560
|
: this.buttonConfig.borderColor ||
|
|
1518
1561
|
this.buttonConfig.backgroundColor ||
|
|
1519
1562
|
'transparent');
|
|
1520
|
-
return;
|
|
1521
1563
|
}
|
|
1522
|
-
|
|
1523
|
-
|
|
1524
|
-
|
|
1525
|
-
|
|
1526
|
-
|
|
1527
|
-
|
|
1528
|
-
|
|
1529
|
-
this.el.nativeElement.querySelector('.p-button') ||
|
|
1530
|
-
this.el.nativeElement.querySelector('button'));
|
|
1564
|
+
else {
|
|
1565
|
+
// If we delegate to theme, clear any inline overrides
|
|
1566
|
+
this.renderer.removeStyle(buttonElement, 'color');
|
|
1567
|
+
this.renderer.removeStyle(buttonElement, 'background');
|
|
1568
|
+
this.renderer.removeStyle(buttonElement, 'background-color');
|
|
1569
|
+
this.renderer.removeStyle(buttonElement, 'border-color');
|
|
1570
|
+
}
|
|
1531
1571
|
}
|
|
1532
1572
|
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 }); }
|
|
1533
|
-
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"] }] }); }
|
|
1573
|
+
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"] }] }); }
|
|
1534
1574
|
}
|
|
1535
1575
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTButtonComponent, decorators: [{
|
|
1536
1576
|
type: Component,
|
|
1537
|
-
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"] }]
|
|
1577
|
+
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"] }]
|
|
1538
1578
|
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { buttonConfig: [{
|
|
1539
1579
|
type: Input
|
|
1540
1580
|
}] } });
|