ng-prime-tools 1.0.27 → 1.0.29
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.
- package/README.md +4 -0
- package/esm2022/lib/pt-button/pt-button.component.mjs +30 -24
- package/fesm2022/ng-prime-tools.mjs +29 -23
- package/fesm2022/ng-prime-tools.mjs.map +1 -1
- package/lib/pt-button/pt-button.component.d.ts +3 -2
- package/lib/pt-button/pt-button.component.d.ts.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -636,6 +636,10 @@ export class FormBuilderTesterComponent implements OnInit {
|
|
|
636
636
|
|
|
637
637
|
## Changelog
|
|
638
638
|
|
|
639
|
+
### Version 1.0.28 - 1.O.29 - Release Date: 05/04/2025
|
|
640
|
+
|
|
641
|
+
- Changing style of pt-button when disabled
|
|
642
|
+
|
|
639
643
|
### Version 1.0.27 - Release Date: 27/03/2025
|
|
640
644
|
|
|
641
645
|
- adding pt-notifier
|
|
@@ -5,23 +5,30 @@ export class PTButtonComponent {
|
|
|
5
5
|
constructor(renderer, el) {
|
|
6
6
|
this.renderer = renderer;
|
|
7
7
|
this.el = el;
|
|
8
|
-
this.buttonConfig = {
|
|
9
|
-
label: 'Click Me',
|
|
10
|
-
icon: '',
|
|
11
|
-
iconPos: 'left',
|
|
12
|
-
disabled: false,
|
|
13
|
-
styleClass: '',
|
|
14
|
-
loading: false,
|
|
15
|
-
type: 'button',
|
|
16
|
-
width: '100%',
|
|
17
|
-
height: 'auto',
|
|
18
|
-
fontColor: '#000',
|
|
19
|
-
backgroundColor: '#fff',
|
|
20
|
-
borderColor: '#000',
|
|
21
|
-
};
|
|
22
8
|
}
|
|
23
9
|
ngOnInit() {
|
|
24
|
-
//
|
|
10
|
+
// Fallback to default config if undefined
|
|
11
|
+
if (!this.buttonConfig) {
|
|
12
|
+
this.buttonConfig = {
|
|
13
|
+
label: 'Click Me',
|
|
14
|
+
icon: '',
|
|
15
|
+
iconPos: 'left',
|
|
16
|
+
disabled: false,
|
|
17
|
+
styleClass: '',
|
|
18
|
+
loading: false,
|
|
19
|
+
type: 'button',
|
|
20
|
+
width: '100%',
|
|
21
|
+
height: 'auto',
|
|
22
|
+
fontColor: '#000',
|
|
23
|
+
backgroundColor: '#fff',
|
|
24
|
+
borderColor: '#000',
|
|
25
|
+
};
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
ngOnChanges(changes) {
|
|
29
|
+
if (changes['buttonConfig']) {
|
|
30
|
+
this.applyButtonStyles();
|
|
31
|
+
}
|
|
25
32
|
}
|
|
26
33
|
ngAfterViewInit() {
|
|
27
34
|
this.applyButtonStyles();
|
|
@@ -33,24 +40,23 @@ export class PTButtonComponent {
|
|
|
33
40
|
return this.buttonConfig.type || 'button';
|
|
34
41
|
}
|
|
35
42
|
applyButtonStyles() {
|
|
36
|
-
// Select the native button element inside the p-button
|
|
37
43
|
const buttonElement = this.el.nativeElement.querySelector('button.p-element');
|
|
38
|
-
if (buttonElement) {
|
|
39
|
-
|
|
40
|
-
this.renderer.setStyle(buttonElement, 'color', this.buttonConfig.fontColor);
|
|
41
|
-
this.renderer.setStyle(buttonElement, 'background-color', this.buttonConfig.backgroundColor);
|
|
42
|
-
this.renderer.setStyle(buttonElement, 'border-color', this.buttonConfig.borderColor);
|
|
44
|
+
if (buttonElement && this.buttonConfig) {
|
|
45
|
+
const isDisabled = this.buttonConfig.disabled;
|
|
46
|
+
this.renderer.setStyle(buttonElement, 'color', isDisabled ? '#999' : this.buttonConfig.fontColor);
|
|
47
|
+
this.renderer.setStyle(buttonElement, 'background-color', isDisabled ? '#e0e0e0' : this.buttonConfig.backgroundColor);
|
|
48
|
+
this.renderer.setStyle(buttonElement, 'border-color', isDisabled ? '#bdbdbd' : this.buttonConfig.borderColor);
|
|
43
49
|
this.renderer.setStyle(buttonElement, 'width', this.buttonConfig.width || 'auto');
|
|
44
50
|
this.renderer.setStyle(buttonElement, 'height', this.buttonConfig.height || 'auto');
|
|
45
51
|
}
|
|
46
52
|
}
|
|
47
53
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTButtonComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
48
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTButtonComponent, selector: "pt-button", inputs: { buttonConfig: "buttonConfig" }, 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></p-button>\n", styles: ["::ng-deep p-button{display:block}\n"], dependencies: [{ kind: "component", type: i1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }] }); }
|
|
54
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTButtonComponent, 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></p-button>\n", styles: ["::ng-deep p-button{display:block}\n"], dependencies: [{ kind: "component", type: i1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }] }); }
|
|
49
55
|
}
|
|
50
56
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTButtonComponent, decorators: [{
|
|
51
57
|
type: Component,
|
|
52
|
-
args: [{ selector: 'pt-button', 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></p-button>\n", styles: ["::ng-deep p-button{display:block}\n"] }]
|
|
58
|
+
args: [{ selector: 'pt-button', 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></p-button>\n", styles: ["::ng-deep p-button{display:block}\n"] }]
|
|
53
59
|
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { buttonConfig: [{
|
|
54
60
|
type: Input
|
|
55
61
|
}] } });
|
|
56
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
62
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHQtYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25nLXByaW1lLXRvb2xzL3NyYy9saWIvcHQtYnV0dG9uL3B0LWJ1dHRvbi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZy1wcmltZS10b29scy9zcmMvbGliL3B0LWJ1dHRvbi9wdC1idXR0b24uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLFNBQVMsRUFDVCxLQUFLLEdBT04sTUFBTSxlQUFlLENBQUM7OztBQVF2QixNQUFNLE9BQU8saUJBQWlCO0lBRzVCLFlBQW9CLFFBQW1CLEVBQVUsRUFBYztRQUEzQyxhQUFRLEdBQVIsUUFBUSxDQUFXO1FBQVUsT0FBRSxHQUFGLEVBQUUsQ0FBWTtJQUFHLENBQUM7SUFFbkUsUUFBUTtRQUNOLDBDQUEwQztRQUMxQyxJQUFJLENBQUMsSUFBSSxDQUFDLFlBQVksRUFBRSxDQUFDO1lBQ3ZCLElBQUksQ0FBQyxZQUFZLEdBQUc7Z0JBQ2xCLEtBQUssRUFBRSxVQUFVO2dCQUNqQixJQUFJLEVBQUUsRUFBRTtnQkFDUixPQUFPLEVBQUUsTUFBTTtnQkFDZixRQUFRLEVBQUUsS0FBSztnQkFDZixVQUFVLEVBQUUsRUFBRTtnQkFDZCxPQUFPLEVBQUUsS0FBSztnQkFDZCxJQUFJLEVBQUUsUUFBUTtnQkFDZCxLQUFLLEVBQUUsTUFBTTtnQkFDYixNQUFNLEVBQUUsTUFBTTtnQkFDZCxTQUFTLEVBQUUsTUFBTTtnQkFDakIsZUFBZSxFQUFFLE1BQU07Z0JBQ3ZCLFdBQVcsRUFBRSxNQUFNO2FBQ3BCLENBQUM7UUFDSixDQUFDO0lBQ0gsQ0FBQztJQUVELFdBQVcsQ0FBQyxPQUFzQjtRQUNoQyxJQUFJLE9BQU8sQ0FBQyxjQUFjLENBQUMsRUFBRSxDQUFDO1lBQzVCLElBQUksQ0FBQyxpQkFBaUIsRUFBRSxDQUFDO1FBQzNCLENBQUM7SUFDSCxDQUFDO0lBRUQsZUFBZTtRQUNiLElBQUksQ0FBQyxpQkFBaUIsRUFBRSxDQUFDO0lBQzNCLENBQUM7SUFFRCxVQUFVO1FBQ1IsT0FBTyxJQUFJLENBQUMsWUFBWSxDQUFDLE9BQU8sS0FBSyxPQUFPLENBQUMsQ0FBQyxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDO0lBQ2xFLENBQUM7SUFFRCxPQUFPO1FBQ0wsT0FBTyxJQUFJLENBQUMsWUFBWSxDQUFDLElBQUksSUFBSSxRQUFRLENBQUM7SUFDNUMsQ0FBQztJQUVELGlCQUFpQjtRQUNmLE1BQU0sYUFBYSxHQUNqQixJQUFJLENBQUMsRUFBRSxDQUFDLGFBQWEsQ0FBQyxhQUFhLENBQUMsa0JBQWtCLENBQUMsQ0FBQztRQUUxRCxJQUFJLGFBQWEsSUFBSSxJQUFJLENBQUMsWUFBWSxFQUFFLENBQUM7WUFDdkMsTUFBTSxVQUFVLEdBQUcsSUFBSSxDQUFDLFlBQVksQ0FBQyxRQUFRLENBQUM7WUFFOUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQ3BCLGFBQWEsRUFDYixPQUFPLEVBQ1AsVUFBVSxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxZQUFZLENBQUMsU0FBUyxDQUNsRCxDQUFDO1lBRUYsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQ3BCLGFBQWEsRUFDYixrQkFBa0IsRUFDbEIsVUFBVSxDQUFDLENBQUMsQ0FBQyxTQUFTLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxZQUFZLENBQUMsZUFBZSxDQUMzRCxDQUFDO1lBRUYsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQ3BCLGFBQWEsRUFDYixjQUFjLEVBQ2QsVUFBVSxDQUFDLENBQUMsQ0FBQyxTQUFTLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxZQUFZLENBQUMsV0FBVyxDQUN2RCxDQUFDO1lBRUYsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQ3BCLGFBQWEsRUFDYixPQUFPLEVBQ1AsSUFBSSxDQUFDLFlBQVksQ0FBQyxLQUFLLElBQUksTUFBTSxDQUNsQyxDQUFDO1lBRUYsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQ3BCLGFBQWEsRUFDYixRQUFRLEVBQ1IsSUFBSSxDQUFDLFlBQVksQ0FBQyxNQUFNLElBQUksTUFBTSxDQUNuQyxDQUFDO1FBQ0osQ0FBQztJQUNILENBQUM7K0dBaEZVLGlCQUFpQjttR0FBakIsaUJBQWlCLGdIQ2pCOUIsb1JBU0E7OzRGRFFhLGlCQUFpQjtrQkFMN0IsU0FBUzsrQkFDRSxXQUFXO3VHQUtaLFlBQVk7c0JBQXBCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDb21wb25lbnQsXG4gIElucHV0LFxuICBPbkluaXQsXG4gIEFmdGVyVmlld0luaXQsXG4gIFJlbmRlcmVyMixcbiAgRWxlbWVudFJlZixcbiAgU2ltcGxlQ2hhbmdlcyxcbiAgT25DaGFuZ2VzLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEJ1dHRvbk1vZGVsIH0gZnJvbSAnLi4vbW9kZWxzJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAncHQtYnV0dG9uJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3B0LWJ1dHRvbi5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL3B0LWJ1dHRvbi5jb21wb25lbnQuY3NzJ10sXG59KVxuZXhwb3J0IGNsYXNzIFBUQnV0dG9uQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBBZnRlclZpZXdJbml0LCBPbkNoYW5nZXMge1xuICBASW5wdXQoKSBidXR0b25Db25maWchOiBCdXR0b25Nb2RlbDtcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIHJlbmRlcmVyOiBSZW5kZXJlcjIsIHByaXZhdGUgZWw6IEVsZW1lbnRSZWYpIHt9XG5cbiAgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgLy8gRmFsbGJhY2sgdG8gZGVmYXVsdCBjb25maWcgaWYgdW5kZWZpbmVkXG4gICAgaWYgKCF0aGlzLmJ1dHRvbkNvbmZpZykge1xuICAgICAgdGhpcy5idXR0b25Db25maWcgPSB7XG4gICAgICAgIGxhYmVsOiAnQ2xpY2sgTWUnLFxuICAgICAgICBpY29uOiAnJyxcbiAgICAgICAgaWNvblBvczogJ2xlZnQnLFxuICAgICAgICBkaXNhYmxlZDogZmFsc2UsXG4gICAgICAgIHN0eWxlQ2xhc3M6ICcnLFxuICAgICAgICBsb2FkaW5nOiBmYWxzZSxcbiAgICAgICAgdHlwZTogJ2J1dHRvbicsXG4gICAgICAgIHdpZHRoOiAnMTAwJScsXG4gICAgICAgIGhlaWdodDogJ2F1dG8nLFxuICAgICAgICBmb250Q29sb3I6ICcjMDAwJyxcbiAgICAgICAgYmFja2dyb3VuZENvbG9yOiAnI2ZmZicsXG4gICAgICAgIGJvcmRlckNvbG9yOiAnIzAwMCcsXG4gICAgICB9O1xuICAgIH1cbiAgfVxuXG4gIG5nT25DaGFuZ2VzKGNoYW5nZXM6IFNpbXBsZUNoYW5nZXMpOiB2b2lkIHtcbiAgICBpZiAoY2hhbmdlc1snYnV0dG9uQ29uZmlnJ10pIHtcbiAgICAgIHRoaXMuYXBwbHlCdXR0b25TdHlsZXMoKTtcbiAgICB9XG4gIH1cblxuICBuZ0FmdGVyVmlld0luaXQoKTogdm9pZCB7XG4gICAgdGhpcy5hcHBseUJ1dHRvblN0eWxlcygpO1xuICB9XG5cbiAgZ2V0SWNvblBvcygpOiAnbGVmdCcgfCAncmlnaHQnIHtcbiAgICByZXR1cm4gdGhpcy5idXR0b25Db25maWcuaWNvblBvcyA9PT0gJ3JpZ2h0JyA/ICdyaWdodCcgOiAnbGVmdCc7XG4gIH1cblxuICBnZXRUeXBlKCk6IHN0cmluZyB7XG4gICAgcmV0dXJuIHRoaXMuYnV0dG9uQ29uZmlnLnR5cGUgfHwgJ2J1dHRvbic7XG4gIH1cblxuICBhcHBseUJ1dHRvblN0eWxlcygpOiB2b2lkIHtcbiAgICBjb25zdCBidXR0b25FbGVtZW50ID1cbiAgICAgIHRoaXMuZWwubmF0aXZlRWxlbWVudC5xdWVyeVNlbGVjdG9yKCdidXR0b24ucC1lbGVtZW50Jyk7XG5cbiAgICBpZiAoYnV0dG9uRWxlbWVudCAmJiB0aGlzLmJ1dHRvbkNvbmZpZykge1xuICAgICAgY29uc3QgaXNEaXNhYmxlZCA9IHRoaXMuYnV0dG9uQ29uZmlnLmRpc2FibGVkO1xuXG4gICAgICB0aGlzLnJlbmRlcmVyLnNldFN0eWxlKFxuICAgICAgICBidXR0b25FbGVtZW50LFxuICAgICAgICAnY29sb3InLFxuICAgICAgICBpc0Rpc2FibGVkID8gJyM5OTknIDogdGhpcy5idXR0b25Db25maWcuZm9udENvbG9yXG4gICAgICApO1xuXG4gICAgICB0aGlzLnJlbmRlcmVyLnNldFN0eWxlKFxuICAgICAgICBidXR0b25FbGVtZW50LFxuICAgICAgICAnYmFja2dyb3VuZC1jb2xvcicsXG4gICAgICAgIGlzRGlzYWJsZWQgPyAnI2UwZTBlMCcgOiB0aGlzLmJ1dHRvbkNvbmZpZy5iYWNrZ3JvdW5kQ29sb3JcbiAgICAgICk7XG5cbiAgICAgIHRoaXMucmVuZGVyZXIuc2V0U3R5bGUoXG4gICAgICAgIGJ1dHRvbkVsZW1lbnQsXG4gICAgICAgICdib3JkZXItY29sb3InLFxuICAgICAgICBpc0Rpc2FibGVkID8gJyNiZGJkYmQnIDogdGhpcy5idXR0b25Db25maWcuYm9yZGVyQ29sb3JcbiAgICAgICk7XG5cbiAgICAgIHRoaXMucmVuZGVyZXIuc2V0U3R5bGUoXG4gICAgICAgIGJ1dHRvbkVsZW1lbnQsXG4gICAgICAgICd3aWR0aCcsXG4gICAgICAgIHRoaXMuYnV0dG9uQ29uZmlnLndpZHRoIHx8ICdhdXRvJ1xuICAgICAgKTtcblxuICAgICAgdGhpcy5yZW5kZXJlci5zZXRTdHlsZShcbiAgICAgICAgYnV0dG9uRWxlbWVudCxcbiAgICAgICAgJ2hlaWdodCcsXG4gICAgICAgIHRoaXMuYnV0dG9uQ29uZmlnLmhlaWdodCB8fCAnYXV0bydcbiAgICAgICk7XG4gICAgfVxuICB9XG59XG4iLCI8cC1idXR0b25cbiAgW2xhYmVsXT1cImJ1dHRvbkNvbmZpZy5sYWJlbFwiXG4gIFtpY29uXT1cImJ1dHRvbkNvbmZpZy5pY29uIHx8ICcnXCJcbiAgW2ljb25Qb3NdPVwiZ2V0SWNvblBvcygpXCJcbiAgW2Rpc2FibGVkXT1cImJ1dHRvbkNvbmZpZy5kaXNhYmxlZFwiXG4gIFtsb2FkaW5nXT1cImJ1dHRvbkNvbmZpZy5sb2FkaW5nXCJcbiAgW2NsYXNzXT1cImJ1dHRvbkNvbmZpZy5zdHlsZUNsYXNzIHx8ICcnXCJcbiAgW3R5cGVdPVwiZ2V0VHlwZSgpXCJcbj48L3AtYnV0dG9uPlxuIl19
|
|
@@ -3224,23 +3224,30 @@ class PTButtonComponent {
|
|
|
3224
3224
|
constructor(renderer, el) {
|
|
3225
3225
|
this.renderer = renderer;
|
|
3226
3226
|
this.el = el;
|
|
3227
|
-
this.buttonConfig = {
|
|
3228
|
-
label: 'Click Me',
|
|
3229
|
-
icon: '',
|
|
3230
|
-
iconPos: 'left',
|
|
3231
|
-
disabled: false,
|
|
3232
|
-
styleClass: '',
|
|
3233
|
-
loading: false,
|
|
3234
|
-
type: 'button',
|
|
3235
|
-
width: '100%',
|
|
3236
|
-
height: 'auto',
|
|
3237
|
-
fontColor: '#000',
|
|
3238
|
-
backgroundColor: '#fff',
|
|
3239
|
-
borderColor: '#000',
|
|
3240
|
-
};
|
|
3241
3227
|
}
|
|
3242
3228
|
ngOnInit() {
|
|
3243
|
-
//
|
|
3229
|
+
// Fallback to default config if undefined
|
|
3230
|
+
if (!this.buttonConfig) {
|
|
3231
|
+
this.buttonConfig = {
|
|
3232
|
+
label: 'Click Me',
|
|
3233
|
+
icon: '',
|
|
3234
|
+
iconPos: 'left',
|
|
3235
|
+
disabled: false,
|
|
3236
|
+
styleClass: '',
|
|
3237
|
+
loading: false,
|
|
3238
|
+
type: 'button',
|
|
3239
|
+
width: '100%',
|
|
3240
|
+
height: 'auto',
|
|
3241
|
+
fontColor: '#000',
|
|
3242
|
+
backgroundColor: '#fff',
|
|
3243
|
+
borderColor: '#000',
|
|
3244
|
+
};
|
|
3245
|
+
}
|
|
3246
|
+
}
|
|
3247
|
+
ngOnChanges(changes) {
|
|
3248
|
+
if (changes['buttonConfig']) {
|
|
3249
|
+
this.applyButtonStyles();
|
|
3250
|
+
}
|
|
3244
3251
|
}
|
|
3245
3252
|
ngAfterViewInit() {
|
|
3246
3253
|
this.applyButtonStyles();
|
|
@@ -3252,23 +3259,22 @@ class PTButtonComponent {
|
|
|
3252
3259
|
return this.buttonConfig.type || 'button';
|
|
3253
3260
|
}
|
|
3254
3261
|
applyButtonStyles() {
|
|
3255
|
-
// Select the native button element inside the p-button
|
|
3256
3262
|
const buttonElement = this.el.nativeElement.querySelector('button.p-element');
|
|
3257
|
-
if (buttonElement) {
|
|
3258
|
-
|
|
3259
|
-
this.renderer.setStyle(buttonElement, 'color', this.buttonConfig.fontColor);
|
|
3260
|
-
this.renderer.setStyle(buttonElement, 'background-color', this.buttonConfig.backgroundColor);
|
|
3261
|
-
this.renderer.setStyle(buttonElement, 'border-color', this.buttonConfig.borderColor);
|
|
3263
|
+
if (buttonElement && this.buttonConfig) {
|
|
3264
|
+
const isDisabled = this.buttonConfig.disabled;
|
|
3265
|
+
this.renderer.setStyle(buttonElement, 'color', isDisabled ? '#999' : this.buttonConfig.fontColor);
|
|
3266
|
+
this.renderer.setStyle(buttonElement, 'background-color', isDisabled ? '#e0e0e0' : this.buttonConfig.backgroundColor);
|
|
3267
|
+
this.renderer.setStyle(buttonElement, 'border-color', isDisabled ? '#bdbdbd' : this.buttonConfig.borderColor);
|
|
3262
3268
|
this.renderer.setStyle(buttonElement, 'width', this.buttonConfig.width || 'auto');
|
|
3263
3269
|
this.renderer.setStyle(buttonElement, 'height', this.buttonConfig.height || 'auto');
|
|
3264
3270
|
}
|
|
3265
3271
|
}
|
|
3266
3272
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTButtonComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3267
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTButtonComponent, selector: "pt-button", inputs: { buttonConfig: "buttonConfig" }, 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></p-button>\n", styles: ["::ng-deep p-button{display:block}\n"], dependencies: [{ kind: "component", type: i3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }] }); }
|
|
3273
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTButtonComponent, 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></p-button>\n", styles: ["::ng-deep p-button{display:block}\n"], dependencies: [{ kind: "component", type: i3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }] }); }
|
|
3268
3274
|
}
|
|
3269
3275
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTButtonComponent, decorators: [{
|
|
3270
3276
|
type: Component,
|
|
3271
|
-
args: [{ selector: 'pt-button', 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></p-button>\n", styles: ["::ng-deep p-button{display:block}\n"] }]
|
|
3277
|
+
args: [{ selector: 'pt-button', 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></p-button>\n", styles: ["::ng-deep p-button{display:block}\n"] }]
|
|
3272
3278
|
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { buttonConfig: [{
|
|
3273
3279
|
type: Input
|
|
3274
3280
|
}] } });
|