ect-button 1.19.8 → 1.20.0
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 +1 -1
- package/fesm2022/ect-button.mjs +3 -3
- package/index.d.ts +57 -5
- package/package.json +3 -3
- package/lib/ect-button.component.d.ts +0 -43
- package/lib/models/btn-dropdown-option.model.d.ts +0 -10
- package/public-api.d.ts +0 -2
package/README.md
CHANGED
package/fesm2022/ect-button.mjs
CHANGED
|
@@ -85,10 +85,10 @@ class EctButtonComponent {
|
|
|
85
85
|
const randomNumber = Math.random() * (9999999 - 99) + 99;
|
|
86
86
|
return name + Math.round(randomNumber);
|
|
87
87
|
}
|
|
88
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
89
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
88
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: EctButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
89
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: EctButtonComponent, isStandalone: true, selector: "ect-button", inputs: { Text: { classPropertyName: "Text", publicName: "Text", isSignal: true, isRequired: false, transformFunction: null }, Type: { classPropertyName: "Type", publicName: "Type", isSignal: true, isRequired: false, transformFunction: null }, Icon: { classPropertyName: "Icon", publicName: "Icon", isSignal: true, isRequired: false, transformFunction: null }, AdditionalCssClasses: { classPropertyName: "AdditionalCssClasses", publicName: "AdditionalCssClasses", isSignal: true, isRequired: false, transformFunction: null }, HideText: { classPropertyName: "HideText", publicName: "HideText", isSignal: true, isRequired: false, transformFunction: null }, Disabled: { classPropertyName: "Disabled", publicName: "Disabled", isSignal: true, isRequired: false, transformFunction: null }, TextBeforeIcon: { classPropertyName: "TextBeforeIcon", publicName: "TextBeforeIcon", isSignal: true, isRequired: false, transformFunction: null }, IsSelected: { classPropertyName: "IsSelected", publicName: "IsSelected", isSignal: true, isRequired: false, transformFunction: null }, TextColour: { classPropertyName: "TextColour", publicName: "TextColour", isSignal: true, isRequired: false, transformFunction: null }, BackgroundColour: { classPropertyName: "BackgroundColour", publicName: "BackgroundColour", isSignal: true, isRequired: false, transformFunction: null }, BorderColour: { classPropertyName: "BorderColour", publicName: "BorderColour", isSignal: true, isRequired: false, transformFunction: null }, IconColour: { classPropertyName: "IconColour", publicName: "IconColour", isSignal: true, isRequired: false, transformFunction: null }, DropDown: { classPropertyName: "DropDown", publicName: "DropDown", isSignal: true, isRequired: false, transformFunction: null }, DropDownOptions: { classPropertyName: "DropDownOptions", publicName: "DropDownOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: "@if (loaded) {\r\n @if (IsDropDown) {\r\n <button [className]=\"CssClasses\"\r\n [title]=\"Text()\"\r\n [style.background-color]=\"BackgroundColour()\"\r\n [style.border-color]=\"BorderColour()\"\r\n [style.color]=\"TextColour()\"\r\n type=\"button\"\r\n [disabled]=\"!Enabled\"\r\n [name]=\"ButtonName\"\r\n [id]=\"ButtonName\"\r\n data-bs-toggle=\"dropdown\"\r\n aria-expanded=\"false\"\r\n [attr.aria-label]=\"Text()\">\r\n @if (hasIcon && ShowText) {\r\n @if(hasIconColour) {\r\n <i [className]=\"Icon()\" [style.color]=\"IconColour()\"></i>\r\n } @else {\r\n <i [className]=\"Icon()\"></i>\r\n }\r\n }\r\n @if (ShowText) {\r\n <span> {{Text()}}</span>\r\n } @else {\r\n <span class=\"center-text\">\r\n @if(hasIconColour) {\r\n <i [className]=\"Icon()\" [style.color]=\"IconColour()\"></i>\r\n } @else {\r\n <i [className]=\"Icon()\"></i>\r\n }\r\n </span>\r\n }\r\n </button>\r\n <ul class=\"dropdown-menu\" [attr.aria-labelledby]=\"ButtonName\">\r\n @for(dropdownItem of ActualDropDownOptions; track dropdownItem) {\r\n @if(dropdownItem.Divider === true) {\r\n <li class=\"dropdown-divider\"></li>\r\n } @else {\r\n <li>\r\n <a (click)=\"dropdownItem.Action()\"\r\n [target]=\"dropdownItem.Target\"\r\n [className]=\"dropdownItem.CssClasses\"\r\n [title]=\"dropdownItem.Text\"\r\n [attr.aria-label]=\"dropdownItem.Text\"\r\n [name]=\"dropdownItem.Id\"\r\n [id]=\"dropdownItem.Id\">\r\n <i [className]=\"dropdownItem.Icon\" [style.color]=\"dropdownItem.IconColour\"></i> {{dropdownItem.Text}}\r\n </a>\r\n </li>\r\n }\r\n }\r\n </ul>\r\n } @else {\r\n <button [className]=\"CssClasses\"\r\n [title]=\"Text()\"\r\n [attr.aria-label]=\"Text()\"\r\n [style.background-color]=\"BackgroundColour()\"\r\n [style.border-color]=\"BorderColour()\"\r\n [style.color]=\"TextColour()\"\r\n (click)=\"clickAction()\"\r\n type=\"button\"\r\n [disabled]=\"!Enabled\"\r\n [name]=\"ButtonName\"\r\n [id]=\"ButtonName\">\r\n @if (hasIcon && ShowText && IconBeforeText) {\r\n @if(hasIconColour) {\r\n <i [className]=\"Icon()\" [style.color]=\"IconColour()\"></i>\r\n } @else {\r\n <i [className]=\"Icon()\"></i>\r\n }\r\n }\r\n @if (ShowText && IconBeforeText) {\r\n <span> </span>\r\n }\r\n @if (ShowText) {\r\n <span>{{Text()}}</span>\r\n }\r\n @if (ShowText && !IconBeforeText) {\r\n <span> </span>\r\n }\r\n @if (hasIcon && ShowText && !IconBeforeText) {\r\n @if(hasIconColour) {\r\n <i [className]=\"Icon()\" [style.color]=\"IconColour()\"></i>\r\n } @else {\r\n <i [className]=\"Icon()\"></i>\r\n }\r\n }\r\n @if (!ShowText) {\r\n <span class=\"center-text\">\r\n @if(hasIconColour) {\r\n <i [className]=\"Icon()\" [style.color]=\"IconColour()\"></i>\r\n } @else {\r\n <i [className]=\"Icon()\"></i>\r\n }\r\n </span>\r\n }\r\n </button>\r\n }\r\n}", styles: [".default-margin{margin-right:5px}.default-font-size{font-size:14px}.center-text{text-align:center}.selected-background-color{background-color:#228b22}.standard-button:hover{box-shadow:0 12px 16px #0000003d,0 17px 50px #00000030}\n"] });
|
|
90
90
|
}
|
|
91
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
91
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: EctButtonComponent, decorators: [{
|
|
92
92
|
type: Component,
|
|
93
93
|
args: [{ selector: 'ect-button', template: "@if (loaded) {\r\n @if (IsDropDown) {\r\n <button [className]=\"CssClasses\"\r\n [title]=\"Text()\"\r\n [style.background-color]=\"BackgroundColour()\"\r\n [style.border-color]=\"BorderColour()\"\r\n [style.color]=\"TextColour()\"\r\n type=\"button\"\r\n [disabled]=\"!Enabled\"\r\n [name]=\"ButtonName\"\r\n [id]=\"ButtonName\"\r\n data-bs-toggle=\"dropdown\"\r\n aria-expanded=\"false\"\r\n [attr.aria-label]=\"Text()\">\r\n @if (hasIcon && ShowText) {\r\n @if(hasIconColour) {\r\n <i [className]=\"Icon()\" [style.color]=\"IconColour()\"></i>\r\n } @else {\r\n <i [className]=\"Icon()\"></i>\r\n }\r\n }\r\n @if (ShowText) {\r\n <span> {{Text()}}</span>\r\n } @else {\r\n <span class=\"center-text\">\r\n @if(hasIconColour) {\r\n <i [className]=\"Icon()\" [style.color]=\"IconColour()\"></i>\r\n } @else {\r\n <i [className]=\"Icon()\"></i>\r\n }\r\n </span>\r\n }\r\n </button>\r\n <ul class=\"dropdown-menu\" [attr.aria-labelledby]=\"ButtonName\">\r\n @for(dropdownItem of ActualDropDownOptions; track dropdownItem) {\r\n @if(dropdownItem.Divider === true) {\r\n <li class=\"dropdown-divider\"></li>\r\n } @else {\r\n <li>\r\n <a (click)=\"dropdownItem.Action()\"\r\n [target]=\"dropdownItem.Target\"\r\n [className]=\"dropdownItem.CssClasses\"\r\n [title]=\"dropdownItem.Text\"\r\n [attr.aria-label]=\"dropdownItem.Text\"\r\n [name]=\"dropdownItem.Id\"\r\n [id]=\"dropdownItem.Id\">\r\n <i [className]=\"dropdownItem.Icon\" [style.color]=\"dropdownItem.IconColour\"></i> {{dropdownItem.Text}}\r\n </a>\r\n </li>\r\n }\r\n }\r\n </ul>\r\n } @else {\r\n <button [className]=\"CssClasses\"\r\n [title]=\"Text()\"\r\n [attr.aria-label]=\"Text()\"\r\n [style.background-color]=\"BackgroundColour()\"\r\n [style.border-color]=\"BorderColour()\"\r\n [style.color]=\"TextColour()\"\r\n (click)=\"clickAction()\"\r\n type=\"button\"\r\n [disabled]=\"!Enabled\"\r\n [name]=\"ButtonName\"\r\n [id]=\"ButtonName\">\r\n @if (hasIcon && ShowText && IconBeforeText) {\r\n @if(hasIconColour) {\r\n <i [className]=\"Icon()\" [style.color]=\"IconColour()\"></i>\r\n } @else {\r\n <i [className]=\"Icon()\"></i>\r\n }\r\n }\r\n @if (ShowText && IconBeforeText) {\r\n <span> </span>\r\n }\r\n @if (ShowText) {\r\n <span>{{Text()}}</span>\r\n }\r\n @if (ShowText && !IconBeforeText) {\r\n <span> </span>\r\n }\r\n @if (hasIcon && ShowText && !IconBeforeText) {\r\n @if(hasIconColour) {\r\n <i [className]=\"Icon()\" [style.color]=\"IconColour()\"></i>\r\n } @else {\r\n <i [className]=\"Icon()\"></i>\r\n }\r\n }\r\n @if (!ShowText) {\r\n <span class=\"center-text\">\r\n @if(hasIconColour) {\r\n <i [className]=\"Icon()\" [style.color]=\"IconColour()\"></i>\r\n } @else {\r\n <i [className]=\"Icon()\"></i>\r\n }\r\n </span>\r\n }\r\n </button>\r\n }\r\n}", styles: [".default-margin{margin-right:5px}.default-font-size{font-size:14px}.center-text{text-align:center}.selected-background-color{background-color:#228b22}.standard-button:hover{box-shadow:0 12px 16px #0000003d,0 17px 50px #00000030}\n"] }]
|
|
94
94
|
}] });
|
package/index.d.ts
CHANGED
|
@@ -1,5 +1,57 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
import * as _angular_core from '@angular/core';
|
|
2
|
+
import { OnInit } from '@angular/core';
|
|
3
|
+
|
|
4
|
+
interface IBtnDropdownOption {
|
|
5
|
+
Id?: string;
|
|
6
|
+
Text: string;
|
|
7
|
+
CssClasses?: string;
|
|
8
|
+
Icon?: string;
|
|
9
|
+
IconColour?: string;
|
|
10
|
+
Action: () => void | undefined;
|
|
11
|
+
Target?: string;
|
|
12
|
+
Divider?: boolean;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
interface IEctButtonComponent {
|
|
16
|
+
clickAction(): void;
|
|
17
|
+
}
|
|
18
|
+
declare class EctButtonComponent implements IEctButtonComponent, OnInit {
|
|
19
|
+
loaded: boolean;
|
|
20
|
+
Text: _angular_core.InputSignal<string>;
|
|
21
|
+
Type: _angular_core.InputSignal<string>;
|
|
22
|
+
Icon: _angular_core.InputSignal<string>;
|
|
23
|
+
AdditionalCssClasses: _angular_core.InputSignal<string>;
|
|
24
|
+
HideText: _angular_core.InputSignal<boolean>;
|
|
25
|
+
Disabled: _angular_core.InputSignal<boolean>;
|
|
26
|
+
TextBeforeIcon: _angular_core.InputSignal<boolean>;
|
|
27
|
+
IsSelected: _angular_core.InputSignal<boolean>;
|
|
28
|
+
TextColour: _angular_core.InputSignal<string>;
|
|
29
|
+
BackgroundColour: _angular_core.InputSignal<string>;
|
|
30
|
+
BorderColour: _angular_core.InputSignal<string>;
|
|
31
|
+
IconColour: _angular_core.InputSignal<string>;
|
|
32
|
+
DropDown: _angular_core.InputSignal<boolean>;
|
|
33
|
+
DropDownOptions: _angular_core.InputSignal<IBtnDropdownOption[]>;
|
|
34
|
+
ActualType: string;
|
|
35
|
+
ActualHideText: boolean;
|
|
36
|
+
IsDropDown: boolean;
|
|
37
|
+
ActualDropDownOptions: IBtnDropdownOption[];
|
|
38
|
+
private ExpectedCssClasses;
|
|
39
|
+
onClick: _angular_core.OutputEmitterRef<any>;
|
|
40
|
+
hasIcon: boolean;
|
|
41
|
+
hasIconColour: boolean;
|
|
42
|
+
private buttonId;
|
|
43
|
+
ngOnInit(): void;
|
|
44
|
+
get CssClasses(): string;
|
|
45
|
+
get ShowText(): boolean;
|
|
46
|
+
clickAction(): void;
|
|
47
|
+
get Enabled(): boolean;
|
|
48
|
+
get IconBeforeText(): boolean;
|
|
49
|
+
get ButtonName(): string;
|
|
50
|
+
writeToConsoleWithText(text: string): void;
|
|
51
|
+
private getActionLinkName;
|
|
52
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<EctButtonComponent, never>;
|
|
53
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<EctButtonComponent, "ect-button", never, { "Text": { "alias": "Text"; "required": false; "isSignal": true; }; "Type": { "alias": "Type"; "required": false; "isSignal": true; }; "Icon": { "alias": "Icon"; "required": false; "isSignal": true; }; "AdditionalCssClasses": { "alias": "AdditionalCssClasses"; "required": false; "isSignal": true; }; "HideText": { "alias": "HideText"; "required": false; "isSignal": true; }; "Disabled": { "alias": "Disabled"; "required": false; "isSignal": true; }; "TextBeforeIcon": { "alias": "TextBeforeIcon"; "required": false; "isSignal": true; }; "IsSelected": { "alias": "IsSelected"; "required": false; "isSignal": true; }; "TextColour": { "alias": "TextColour"; "required": false; "isSignal": true; }; "BackgroundColour": { "alias": "BackgroundColour"; "required": false; "isSignal": true; }; "BorderColour": { "alias": "BorderColour"; "required": false; "isSignal": true; }; "IconColour": { "alias": "IconColour"; "required": false; "isSignal": true; }; "DropDown": { "alias": "DropDown"; "required": false; "isSignal": true; }; "DropDownOptions": { "alias": "DropDownOptions"; "required": false; "isSignal": true; }; }, { "onClick": "onClick"; }, never, never, true, never>;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
export { EctButtonComponent };
|
|
57
|
+
export type { IBtnDropdownOption, IEctButtonComponent };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ect-button",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.20.0",
|
|
4
4
|
"description": "ECT Button with Bootstrap and full WCAG as standard.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"angular",
|
|
@@ -16,8 +16,8 @@
|
|
|
16
16
|
"type": "git"
|
|
17
17
|
},
|
|
18
18
|
"peerDependencies": {
|
|
19
|
-
"@angular/common": "^
|
|
20
|
-
"@angular/core": "^
|
|
19
|
+
"@angular/common": "^20.0.4",
|
|
20
|
+
"@angular/core": "^20.0.4"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
23
|
"tslib": "^2.5.0"
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
import { OnInit } from '@angular/core';
|
|
2
|
-
import { IBtnDropdownOption } from './models/btn-dropdown-option.model';
|
|
3
|
-
import * as i0 from "@angular/core";
|
|
4
|
-
export interface IEctButtonComponent {
|
|
5
|
-
clickAction(): void;
|
|
6
|
-
}
|
|
7
|
-
export declare class EctButtonComponent implements IEctButtonComponent, OnInit {
|
|
8
|
-
loaded: boolean;
|
|
9
|
-
Text: import("@angular/core").InputSignal<string>;
|
|
10
|
-
Type: import("@angular/core").InputSignal<string>;
|
|
11
|
-
Icon: import("@angular/core").InputSignal<string>;
|
|
12
|
-
AdditionalCssClasses: import("@angular/core").InputSignal<string>;
|
|
13
|
-
HideText: import("@angular/core").InputSignal<boolean>;
|
|
14
|
-
Disabled: import("@angular/core").InputSignal<boolean>;
|
|
15
|
-
TextBeforeIcon: import("@angular/core").InputSignal<boolean>;
|
|
16
|
-
IsSelected: import("@angular/core").InputSignal<boolean>;
|
|
17
|
-
TextColour: import("@angular/core").InputSignal<string>;
|
|
18
|
-
BackgroundColour: import("@angular/core").InputSignal<string>;
|
|
19
|
-
BorderColour: import("@angular/core").InputSignal<string>;
|
|
20
|
-
IconColour: import("@angular/core").InputSignal<string>;
|
|
21
|
-
DropDown: import("@angular/core").InputSignal<boolean>;
|
|
22
|
-
DropDownOptions: import("@angular/core").InputSignal<IBtnDropdownOption[]>;
|
|
23
|
-
ActualType: string;
|
|
24
|
-
ActualHideText: boolean;
|
|
25
|
-
IsDropDown: boolean;
|
|
26
|
-
ActualDropDownOptions: IBtnDropdownOption[];
|
|
27
|
-
private ExpectedCssClasses;
|
|
28
|
-
onClick: import("@angular/core").OutputEmitterRef<any>;
|
|
29
|
-
hasIcon: boolean;
|
|
30
|
-
hasIconColour: boolean;
|
|
31
|
-
private buttonId;
|
|
32
|
-
ngOnInit(): void;
|
|
33
|
-
get CssClasses(): string;
|
|
34
|
-
get ShowText(): boolean;
|
|
35
|
-
clickAction(): void;
|
|
36
|
-
get Enabled(): boolean;
|
|
37
|
-
get IconBeforeText(): boolean;
|
|
38
|
-
get ButtonName(): string;
|
|
39
|
-
writeToConsoleWithText(text: string): void;
|
|
40
|
-
private getActionLinkName;
|
|
41
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<EctButtonComponent, never>;
|
|
42
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<EctButtonComponent, "ect-button", never, { "Text": { "alias": "Text"; "required": false; "isSignal": true; }; "Type": { "alias": "Type"; "required": false; "isSignal": true; }; "Icon": { "alias": "Icon"; "required": false; "isSignal": true; }; "AdditionalCssClasses": { "alias": "AdditionalCssClasses"; "required": false; "isSignal": true; }; "HideText": { "alias": "HideText"; "required": false; "isSignal": true; }; "Disabled": { "alias": "Disabled"; "required": false; "isSignal": true; }; "TextBeforeIcon": { "alias": "TextBeforeIcon"; "required": false; "isSignal": true; }; "IsSelected": { "alias": "IsSelected"; "required": false; "isSignal": true; }; "TextColour": { "alias": "TextColour"; "required": false; "isSignal": true; }; "BackgroundColour": { "alias": "BackgroundColour"; "required": false; "isSignal": true; }; "BorderColour": { "alias": "BorderColour"; "required": false; "isSignal": true; }; "IconColour": { "alias": "IconColour"; "required": false; "isSignal": true; }; "DropDown": { "alias": "DropDown"; "required": false; "isSignal": true; }; "DropDownOptions": { "alias": "DropDownOptions"; "required": false; "isSignal": true; }; }, { "onClick": "onClick"; }, never, never, true, never>;
|
|
43
|
-
}
|
package/public-api.d.ts
DELETED