ect-button 1.19.2 → 1.19.3
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
CHANGED
|
@@ -38,6 +38,18 @@ In your HTML template, to add a primary button with an icon and an onClick event
|
|
|
38
38
|
- *BackgroundColour*: Optional. Overriding background colour.
|
|
39
39
|
- *BorderColour*: Optional. Overriding border colour.
|
|
40
40
|
- *IconColour*: Optional. Overriding icon colour.
|
|
41
|
+
- *DropDown*: Optional. If set to true, button has dropdown option.
|
|
42
|
+
- *DropDownOptions*: Optional. Array of type IBtnDropdownOption showing an ectlink link, that can include dividers.
|
|
43
|
+
|
|
44
|
+
## IBtnDropdownOption Properties
|
|
45
|
+
|
|
46
|
+
- *Text*: Mandatory. Link text.
|
|
47
|
+
- *CssClasses*: Optional. Default is blank.
|
|
48
|
+
- *Icon*: Optional. Name of icon e.g. far fa-clock.
|
|
49
|
+
- *Action*: Mandatory. Callback event.
|
|
50
|
+
- *Target*: Optional. A href target option i.e. _blank, _parent, _self or _top.
|
|
51
|
+
- *Divider*: Optional. If set to true, a divider is shown instead of the link.
|
|
52
|
+
|
|
41
53
|
|
|
42
54
|
## Events
|
|
43
55
|
|
|
@@ -45,7 +57,9 @@ In your HTML template, to add a primary button with an icon and an onClick event
|
|
|
45
57
|
|
|
46
58
|
## Dependencies
|
|
47
59
|
|
|
48
|
-
|
|
60
|
+
This library does use, and therefore depends on:
|
|
61
|
+
- ECT Link. More details can be found here: (https://www.npmjs.com/package/ect-link)
|
|
62
|
+
|
|
49
63
|
|
|
50
64
|
## Cost
|
|
51
65
|
|
package/fesm2022/ect-button.mjs
CHANGED
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { input, output, Component, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
|
3
3
|
import { BrowserModule } from '@angular/platform-browser';
|
|
4
|
+
import * as i1 from 'ect-link';
|
|
5
|
+
import { EctLinkModule } from 'ect-link';
|
|
4
6
|
|
|
5
7
|
class EctButtonComponent {
|
|
6
8
|
constructor() {
|
|
9
|
+
this.loaded = false;
|
|
7
10
|
this.Text = input('');
|
|
8
11
|
this.Type = input('primary');
|
|
9
12
|
this.Icon = input('');
|
|
@@ -16,19 +19,49 @@ class EctButtonComponent {
|
|
|
16
19
|
this.BackgroundColour = input('');
|
|
17
20
|
this.BorderColour = input('');
|
|
18
21
|
this.IconColour = input('');
|
|
19
|
-
this.
|
|
20
|
-
this.
|
|
22
|
+
this.DropDown = input(false);
|
|
23
|
+
this.DropDownOptions = input([]);
|
|
24
|
+
this.ActualType = '';
|
|
25
|
+
this.ActualHideText = false;
|
|
26
|
+
this.IsDropDown = false;
|
|
27
|
+
this.ActualDropDownOptions = [];
|
|
28
|
+
this.ExpectedCssClasses = '';
|
|
21
29
|
this.onClick = output();
|
|
22
30
|
this.hasIcon = true;
|
|
23
31
|
this.hasIconColour = this.IconColour() !== '';
|
|
24
32
|
this.buttonId = '';
|
|
25
33
|
}
|
|
26
|
-
|
|
27
|
-
let
|
|
28
|
-
|
|
29
|
-
|
|
34
|
+
ngOnInit() {
|
|
35
|
+
let text = this.Text();
|
|
36
|
+
let type = this.Type();
|
|
37
|
+
let icon = this.Icon();
|
|
38
|
+
let additionalCssClasses = this.AdditionalCssClasses();
|
|
39
|
+
let hideText = this.HideText();
|
|
40
|
+
let disabled = this.Disabled();
|
|
41
|
+
let textBeforeIcon = this.TextBeforeIcon();
|
|
42
|
+
let isSelected = this.IsSelected();
|
|
43
|
+
let textColour = this.TextColour();
|
|
44
|
+
let backgroundColour = this.BackgroundColour();
|
|
45
|
+
let borderColour = this.BorderColour();
|
|
46
|
+
let iconColour = this.IconColour();
|
|
47
|
+
let dropDown = this.DropDown();
|
|
48
|
+
this.ExpectedCssClasses = 'btn btn-' + type + ' ' + additionalCssClasses + ' standard-button';
|
|
49
|
+
if (isSelected === true) {
|
|
50
|
+
this.ExpectedCssClasses += ' selected-background-color';
|
|
51
|
+
}
|
|
52
|
+
if (dropDown === true) {
|
|
53
|
+
this.ExpectedCssClasses += ' dropdown-toggle';
|
|
30
54
|
}
|
|
31
|
-
|
|
55
|
+
this.ActualType = type !== '' ? type : 'primary';
|
|
56
|
+
this.ActualHideText = text === '' ? true : hideText;
|
|
57
|
+
this.IsDropDown = dropDown === true;
|
|
58
|
+
this.ActualDropDownOptions = this.DropDownOptions();
|
|
59
|
+
const randomNumber = Math.random() * (9999999 - 99) + 99;
|
|
60
|
+
this.buttonId = 'button' + Math.round(randomNumber);
|
|
61
|
+
this.loaded = true;
|
|
62
|
+
}
|
|
63
|
+
get CssClasses() {
|
|
64
|
+
return this.ExpectedCssClasses;
|
|
32
65
|
}
|
|
33
66
|
get ShowText() {
|
|
34
67
|
return !this.HideText();
|
|
@@ -42,25 +75,26 @@ class EctButtonComponent {
|
|
|
42
75
|
get IconBeforeText() {
|
|
43
76
|
return this.TextBeforeIcon() !== true;
|
|
44
77
|
}
|
|
45
|
-
|
|
46
|
-
if (this.buttonId === '') {
|
|
47
|
-
const randomNumber = Math.random() * (9999999 - 99) + 99;
|
|
48
|
-
this.buttonId = 'button' + Math.round(randomNumber);
|
|
49
|
-
}
|
|
78
|
+
get ButtonName() {
|
|
50
79
|
return this.buttonId;
|
|
51
80
|
}
|
|
81
|
+
writeToConsoleWithText(text) {
|
|
82
|
+
console.log(text);
|
|
83
|
+
}
|
|
52
84
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: EctButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
53
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: EctButtonComponent, isStandalone: false, 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 } }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<button [className]=\"CssClasses\"\r\n
|
|
85
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0", type: EctButtonComponent, isStandalone: false, 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 <ect-link Text=\"{{dropdownItem.Text}}\"\r\n CssClasses=\"{{dropdownItem.CssClasses}}\"\r\n Icon=\"{{dropdownItem.Icon}}\"\r\n (onClick)=\"dropdownItem.Action()\"\r\n Target=\"{{dropdownItem.Target}}\" />\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"], dependencies: [{ kind: "component", type: i1.EctLinkComponent, selector: "ect-link", inputs: ["Href", "Text", "CssClasses", "Icon", "Target"], outputs: ["onClick"] }] }); }
|
|
54
86
|
}
|
|
55
87
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: EctButtonComponent, decorators: [{
|
|
56
88
|
type: Component,
|
|
57
|
-
args: [{ selector: 'ect-button', standalone: false, template: "<button [className]=\"CssClasses\"\r\n
|
|
89
|
+
args: [{ selector: 'ect-button', standalone: false, 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 <ect-link Text=\"{{dropdownItem.Text}}\"\r\n CssClasses=\"{{dropdownItem.CssClasses}}\"\r\n Icon=\"{{dropdownItem.Icon}}\"\r\n (onClick)=\"dropdownItem.Action()\"\r\n Target=\"{{dropdownItem.Target}}\" />\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"] }]
|
|
58
90
|
}] });
|
|
59
91
|
|
|
60
92
|
class EctButtonModule {
|
|
61
93
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: EctButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
62
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.0", ngImport: i0, type: EctButtonModule, bootstrap: [EctButtonComponent], declarations: [EctButtonComponent], imports: [BrowserModule
|
|
63
|
-
|
|
94
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.0", ngImport: i0, type: EctButtonModule, bootstrap: [EctButtonComponent], declarations: [EctButtonComponent], imports: [BrowserModule,
|
|
95
|
+
EctLinkModule], exports: [EctButtonComponent] }); }
|
|
96
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: EctButtonModule, imports: [BrowserModule,
|
|
97
|
+
EctLinkModule] }); }
|
|
64
98
|
}
|
|
65
99
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: EctButtonModule, decorators: [{
|
|
66
100
|
type: NgModule,
|
|
@@ -69,7 +103,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
|
|
|
69
103
|
EctButtonComponent
|
|
70
104
|
],
|
|
71
105
|
imports: [
|
|
72
|
-
BrowserModule
|
|
106
|
+
BrowserModule,
|
|
107
|
+
EctLinkModule
|
|
73
108
|
],
|
|
74
109
|
exports: [
|
|
75
110
|
EctButtonComponent
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ect-button.mjs","sources":["../../../projects/ect-button/src/lib/ect-button.component.ts","../../../projects/ect-button/src/lib/ect-button.component.html","../../../projects/ect-button/src/lib/ect-button.module.ts","../../../projects/ect-button/src/public-api.ts","../../../projects/ect-button/src/ect-button.ts"],"sourcesContent":["import { Component, input, output } from '@angular/core';\r\n\r\nexport interface IEctButtonComponent {\r\n clickAction(): void;\r\n}\r\n\r\n@Component({\r\n selector: 'ect-button',\r\n templateUrl: './ect-button.component.html',\r\n styleUrls: ['./ect-button.component.css'],\r\n standalone: false\r\n})\r\nexport class EctButtonComponent implements IEctButtonComponent {\r\n\r\n public Text = input<string>('');\r\n public Type = input<string>('primary');\r\n public Icon = input<string>('');\r\n public AdditionalCssClasses = input<string>('');\r\n public HideText = input<boolean>(false);\r\n public Disabled = input<boolean>(false);\r\n public TextBeforeIcon = input<boolean>(false);\r\n public IsSelected = input<boolean>(false);\r\n public TextColour = input<string>('');\r\n public BackgroundColour = input<string>('');\r\n public BorderColour = input<string>('');\r\n public IconColour = input<string>('');\r\n\r\n public ActualType = this.Type() !== '' ? this.Type() : 'primary';\r\n public ActualHideText = this.Text() === '' ? true : this.HideText();\r\n \r\n public onClick = output<any>();\r\n\r\n public hasIcon = true;\r\n public hasIconColour = this.IconColour() !== '';\r\n private buttonId = '';\r\n\r\n public get CssClasses(): string {\r\n let expectedClasses = 'btn btn-' + this.Type() + ' ' + this.AdditionalCssClasses() + ' standard-button';\r\n if (this.IsSelected() === true) {\r\n expectedClasses += ' selected-background-color';\r\n }\r\n return expectedClasses;\r\n }\r\n\r\n public get ShowText(): boolean {\r\n return !this.HideText();\r\n }\r\n\r\n public clickAction(): void {\r\n this.onClick.emit(null);\r\n }\r\n\r\n public get Enabled(): boolean {\r\n return this.Disabled() !== true;\r\n }\r\n\r\n public get IconBeforeText(): boolean {\r\n return this.TextBeforeIcon() !== true;\r\n }\r\n\r\n getButtonName(): string {\r\n if (this.buttonId === '') {\r\n const randomNumber = Math.random() * (9999999 - 99) + 99;\r\n this.buttonId = 'button' + Math.round(randomNumber);\r\n }\r\n return this.buttonId;\r\n }\r\n\r\n}\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]=\"getButtonName()\"\r\n [id]=\"getButtonName()\">\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\r\n</button>\r\n","import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';\r\nimport { BrowserModule } from '@angular/platform-browser';\r\n\r\nimport { EctButtonComponent } from './ect-button.component';\r\n\r\n@NgModule({\r\n declarations: [\r\n EctButtonComponent\r\n ],\r\n imports: [\r\n BrowserModule\r\n ],\r\n exports: [\r\n EctButtonComponent\r\n ],\r\n bootstrap: [\r\n EctButtonComponent\r\n ],\r\n providers: [ ],\r\n schemas: [ CUSTOM_ELEMENTS_SCHEMA ]\r\n})\r\nexport class EctButtonModule { }\r\n","/*\n Copyright (c) 2024 Exodus Cloud Technology Solutions Ltd\n\n The licence agreement can be found at:\n https://angular-grid.net/assets/licence/licence_agreement.txt\n\n*/\n\nexport * from './lib/ect-button.module';\nexport * from './lib/ect-button.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ect-button.mjs","sources":["../../../projects/ect-button/src/lib/ect-button.component.ts","../../../projects/ect-button/src/lib/ect-button.component.html","../../../projects/ect-button/src/lib/ect-button.module.ts","../../../projects/ect-button/src/public-api.ts","../../../projects/ect-button/src/ect-button.ts"],"sourcesContent":["import { Component, input, OnInit, output } from '@angular/core';\r\nimport { IBtnDropdownOption } from './models/btn-dropdown-option.model';\r\n\r\nexport interface IEctButtonComponent {\r\n clickAction(): void;\r\n}\r\n\r\n@Component({\r\n selector: 'ect-button',\r\n templateUrl: './ect-button.component.html',\r\n styleUrls: ['./ect-button.component.css'],\r\n standalone: false\r\n})\r\nexport class EctButtonComponent implements IEctButtonComponent, OnInit {\r\n \r\n public loaded = false;\r\n public Text = input<string>('');\r\n public Type = input<string>('primary');\r\n public Icon = input<string>('');\r\n public AdditionalCssClasses = input<string>('');\r\n public HideText = input<boolean>(false);\r\n public Disabled = input<boolean>(false);\r\n public TextBeforeIcon = input<boolean>(false);\r\n public IsSelected = input<boolean>(false);\r\n public TextColour = input<string>('');\r\n public BackgroundColour = input<string>('');\r\n public BorderColour = input<string>('');\r\n public IconColour = input<string>('');\r\n public DropDown = input<boolean>(false);\r\n public DropDownOptions = input<IBtnDropdownOption[]>([]);\r\n\r\n public ActualType = '';\r\n public ActualHideText = false;\r\n public IsDropDown = false;\r\n public ActualDropDownOptions: IBtnDropdownOption[] = [];\r\n private ExpectedCssClasses = '';\r\n \r\n public onClick = output<any>();\r\n\r\n public hasIcon = true;\r\n public hasIconColour = this.IconColour() !== '';\r\n private buttonId = '';\r\n\r\n ngOnInit(): void {\r\n let text = this.Text();\r\n let type = this.Type();\r\n let icon = this.Icon();\r\n let additionalCssClasses = this.AdditionalCssClasses();\r\n let hideText = this.HideText();\r\n let disabled = this.Disabled();\r\n let textBeforeIcon = this.TextBeforeIcon();\r\n let isSelected = this.IsSelected();\r\n let textColour = this.TextColour();\r\n let backgroundColour = this.BackgroundColour();\r\n let borderColour = this.BorderColour();\r\n let iconColour = this.IconColour();\r\n let dropDown = this.DropDown();\r\n\r\n this.ExpectedCssClasses = 'btn btn-' + type + ' ' + additionalCssClasses + ' standard-button';\r\n if (isSelected === true) {\r\n this.ExpectedCssClasses += ' selected-background-color';\r\n }\r\n if (dropDown === true) {\r\n this.ExpectedCssClasses += ' dropdown-toggle';\r\n }\r\n\r\n this.ActualType = type !== '' ? type : 'primary';\r\n this.ActualHideText = text === '' ? true : hideText;\r\n this.IsDropDown = dropDown === true;\r\n this.ActualDropDownOptions = this.DropDownOptions();\r\n\r\n const randomNumber = Math.random() * (9999999 - 99) + 99;\r\n this.buttonId = 'button' + Math.round(randomNumber);\r\n\r\n this.loaded = true;\r\n }\r\n\r\n public get CssClasses(): string {\r\n return this.ExpectedCssClasses;\r\n }\r\n\r\n public get ShowText(): boolean {\r\n return !this.HideText();\r\n }\r\n\r\n public clickAction(): void {\r\n this.onClick.emit(null);\r\n }\r\n\r\n public get Enabled(): boolean {\r\n return this.Disabled() !== true;\r\n }\r\n\r\n public get IconBeforeText(): boolean {\r\n return this.TextBeforeIcon() !== true;\r\n }\r\n\r\n public get ButtonName(): string {\r\n return this.buttonId;\r\n }\r\n\r\n writeToConsoleWithText(text: string): void {\r\n console.log(text);\r\n }\r\n\r\n}\r\n","@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 <ect-link Text=\"{{dropdownItem.Text}}\"\r\n CssClasses=\"{{dropdownItem.CssClasses}}\"\r\n Icon=\"{{dropdownItem.Icon}}\"\r\n (onClick)=\"dropdownItem.Action()\"\r\n Target=\"{{dropdownItem.Target}}\" />\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}","import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';\r\nimport { BrowserModule } from '@angular/platform-browser';\r\n\r\nimport { EctLinkModule } from 'ect-link';\r\n\r\nimport { EctButtonComponent } from './ect-button.component';\r\n\r\n@NgModule({\r\n declarations: [\r\n EctButtonComponent\r\n ],\r\n imports: [\r\n BrowserModule,\r\n EctLinkModule\r\n ],\r\n exports: [\r\n EctButtonComponent\r\n ],\r\n bootstrap: [\r\n EctButtonComponent\r\n ],\r\n providers: [ ],\r\n schemas: [ CUSTOM_ELEMENTS_SCHEMA ]\r\n})\r\nexport class EctButtonModule { }\r\n","/*\n Copyright (c) 2024 Exodus Cloud Technology Solutions Ltd\n\n The licence agreement can be found at:\n https://angular-grid.net/assets/licence/licence_agreement.txt\n\n*/\n\nexport * from './lib/ect-button.module';\nexport * from './lib/ect-button.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;MAaa,kBAAkB,CAAA;AAN/B,IAAA,WAAA,GAAA;QAQS,IAAM,CAAA,MAAA,GAAG,KAAK;AACd,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK,CAAS,EAAE,CAAC;AACxB,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK,CAAS,SAAS,CAAC;AAC/B,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK,CAAS,EAAE,CAAC;AACxB,QAAA,IAAA,CAAA,oBAAoB,GAAG,KAAK,CAAS,EAAE,CAAC;AACxC,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAU,KAAK,CAAC;AAChC,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAU,KAAK,CAAC;AAChC,QAAA,IAAA,CAAA,cAAc,GAAG,KAAK,CAAU,KAAK,CAAC;AACtC,QAAA,IAAA,CAAA,UAAU,GAAG,KAAK,CAAU,KAAK,CAAC;AAClC,QAAA,IAAA,CAAA,UAAU,GAAG,KAAK,CAAS,EAAE,CAAC;AAC9B,QAAA,IAAA,CAAA,gBAAgB,GAAG,KAAK,CAAS,EAAE,CAAC;AACpC,QAAA,IAAA,CAAA,YAAY,GAAG,KAAK,CAAS,EAAE,CAAC;AAChC,QAAA,IAAA,CAAA,UAAU,GAAG,KAAK,CAAS,EAAE,CAAC;AAC9B,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAU,KAAK,CAAC;AAChC,QAAA,IAAA,CAAA,eAAe,GAAG,KAAK,CAAuB,EAAE,CAAC;QAEjD,IAAU,CAAA,UAAA,GAAG,EAAE;QACf,IAAc,CAAA,cAAA,GAAG,KAAK;QACtB,IAAU,CAAA,UAAA,GAAG,KAAK;QAClB,IAAqB,CAAA,qBAAA,GAAyB,EAAE;QAC/C,IAAkB,CAAA,kBAAA,GAAG,EAAE;QAExB,IAAO,CAAA,OAAA,GAAG,MAAM,EAAO;QAEvB,IAAO,CAAA,OAAA,GAAG,IAAI;AACd,QAAA,IAAA,CAAA,aAAa,GAAG,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE;QACvC,IAAQ,CAAA,QAAA,GAAG,EAAE;AAgEtB;IA9DC,QAAQ,GAAA;AACN,QAAA,IAAI,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE;AACtB,QAAA,IAAI,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE;AACtB,QAAA,IAAI,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE;AACtB,QAAA,IAAI,oBAAoB,GAAG,IAAI,CAAC,oBAAoB,EAAE;AACtD,QAAA,IAAI,QAAQ,GAAG,IAAI,CAAC,QAAQ,EAAE;AAC9B,QAAA,IAAI,QAAQ,GAAG,IAAI,CAAC,QAAQ,EAAE;AAC9B,QAAA,IAAI,cAAc,GAAG,IAAI,CAAC,cAAc,EAAE;AAC1C,QAAA,IAAI,UAAU,GAAG,IAAI,CAAC,UAAU,EAAE;AAClC,QAAA,IAAI,UAAU,GAAG,IAAI,CAAC,UAAU,EAAE;AAClC,QAAA,IAAI,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,EAAE;AAC9C,QAAA,IAAI,YAAY,GAAG,IAAI,CAAC,YAAY,EAAE;AACtC,QAAA,IAAI,UAAU,GAAG,IAAI,CAAC,UAAU,EAAE;AAClC,QAAA,IAAI,QAAQ,GAAG,IAAI,CAAC,QAAQ,EAAE;AAE9B,QAAA,IAAI,CAAC,kBAAkB,GAAG,UAAU,GAAG,IAAI,GAAG,GAAG,GAAG,oBAAoB,GAAG,kBAAkB;AAC7F,QAAA,IAAI,UAAU,KAAK,IAAI,EAAE;AACvB,YAAA,IAAI,CAAC,kBAAkB,IAAI,4BAA4B;;AAEzD,QAAA,IAAI,QAAQ,KAAK,IAAI,EAAE;AACrB,YAAA,IAAI,CAAC,kBAAkB,IAAI,kBAAkB;;AAG/C,QAAA,IAAI,CAAC,UAAU,GAAG,IAAI,KAAK,EAAE,GAAG,IAAI,GAAG,SAAS;AAChD,QAAA,IAAI,CAAC,cAAc,GAAG,IAAI,KAAK,EAAE,GAAG,IAAI,GAAG,QAAQ;AACnD,QAAA,IAAI,CAAC,UAAU,GAAG,QAAQ,KAAK,IAAI;AACnC,QAAA,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,eAAe,EAAE;AAEnD,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,MAAM,EAAE,IAAI,OAAO,GAAG,EAAE,CAAC,GAAG,EAAE;QACxD,IAAI,CAAC,QAAQ,GAAG,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC;AAEnD,QAAA,IAAI,CAAC,MAAM,GAAG,IAAI;;AAGpB,IAAA,IAAW,UAAU,GAAA;QACnB,OAAO,IAAI,CAAC,kBAAkB;;AAGhC,IAAA,IAAW,QAAQ,GAAA;AACjB,QAAA,OAAO,CAAC,IAAI,CAAC,QAAQ,EAAE;;IAGlB,WAAW,GAAA;AAChB,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;;AAGzB,IAAA,IAAW,OAAO,GAAA;AAChB,QAAA,OAAO,IAAI,CAAC,QAAQ,EAAE,KAAK,IAAI;;AAGjC,IAAA,IAAW,cAAc,GAAA;AACvB,QAAA,OAAO,IAAI,CAAC,cAAc,EAAE,KAAK,IAAI;;AAGvC,IAAA,IAAW,UAAU,GAAA;QACnB,OAAO,IAAI,CAAC,QAAQ;;AAGtB,IAAA,sBAAsB,CAAC,IAAY,EAAA;AACjC,QAAA,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC;;8GAzFR,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAlB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,kBAAkB,+9DCb/B,oyGA8FC,EAAA,MAAA,EAAA,CAAA,wOAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,MAAA,EAAA,YAAA,EAAA,MAAA,EAAA,QAAA,CAAA,EAAA,OAAA,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;2FDjFY,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAN9B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,YAAY,cAGV,KAAK,EAAA,QAAA,EAAA,oyGAAA,EAAA,MAAA,EAAA,CAAA,wOAAA,CAAA,EAAA;;;MEaN,eAAe,CAAA;8GAAf,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAAf,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,eAAe,EALxB,SAAA,EAAA,CAAA,kBAAkB,CAVlB,EAAA,YAAA,EAAA,CAAA,kBAAkB,aAGlB,aAAa;AACb,YAAA,aAAa,aAGb,kBAAkB,CAAA,EAAA,CAAA,CAAA;AAQT,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,eAAe,YAZxB,aAAa;YACb,aAAa,CAAA,EAAA,CAAA,CAAA;;2FAWJ,eAAe,EAAA,UAAA,EAAA,CAAA;kBAjB3B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,YAAY,EAAE;wBACZ;AACD,qBAAA;AACD,oBAAA,OAAO,EAAE;wBACP,aAAa;wBACb;AACD,qBAAA;AACD,oBAAA,OAAO,EAAE;wBACP;AACD,qBAAA;AACD,oBAAA,SAAS,EAAE;wBACT;AACD,qBAAA;AACD,oBAAA,SAAS,EAAE,EAAI;oBACf,OAAO,EAAE,CAAE,sBAAsB;AAClC,iBAAA;;;ACvBD;;;;;;AAME;;ACNF;;AAEG;;;;"}
|
|
@@ -1,8 +1,11 @@
|
|
|
1
|
+
import { OnInit } from '@angular/core';
|
|
2
|
+
import { IBtnDropdownOption } from './models/btn-dropdown-option.model';
|
|
1
3
|
import * as i0 from "@angular/core";
|
|
2
4
|
export interface IEctButtonComponent {
|
|
3
5
|
clickAction(): void;
|
|
4
6
|
}
|
|
5
|
-
export declare class EctButtonComponent implements IEctButtonComponent {
|
|
7
|
+
export declare class EctButtonComponent implements IEctButtonComponent, OnInit {
|
|
8
|
+
loaded: boolean;
|
|
6
9
|
Text: import("@angular/core").InputSignal<string>;
|
|
7
10
|
Type: import("@angular/core").InputSignal<string>;
|
|
8
11
|
Icon: import("@angular/core").InputSignal<string>;
|
|
@@ -15,18 +18,25 @@ export declare class EctButtonComponent implements IEctButtonComponent {
|
|
|
15
18
|
BackgroundColour: import("@angular/core").InputSignal<string>;
|
|
16
19
|
BorderColour: import("@angular/core").InputSignal<string>;
|
|
17
20
|
IconColour: import("@angular/core").InputSignal<string>;
|
|
21
|
+
DropDown: import("@angular/core").InputSignal<boolean>;
|
|
22
|
+
DropDownOptions: import("@angular/core").InputSignal<IBtnDropdownOption[]>;
|
|
18
23
|
ActualType: string;
|
|
19
24
|
ActualHideText: boolean;
|
|
25
|
+
IsDropDown: boolean;
|
|
26
|
+
ActualDropDownOptions: IBtnDropdownOption[];
|
|
27
|
+
private ExpectedCssClasses;
|
|
20
28
|
onClick: import("@angular/core").OutputEmitterRef<any>;
|
|
21
29
|
hasIcon: boolean;
|
|
22
30
|
hasIconColour: boolean;
|
|
23
31
|
private buttonId;
|
|
32
|
+
ngOnInit(): void;
|
|
24
33
|
get CssClasses(): string;
|
|
25
34
|
get ShowText(): boolean;
|
|
26
35
|
clickAction(): void;
|
|
27
36
|
get Enabled(): boolean;
|
|
28
37
|
get IconBeforeText(): boolean;
|
|
29
|
-
|
|
38
|
+
get ButtonName(): string;
|
|
39
|
+
writeToConsoleWithText(text: string): void;
|
|
30
40
|
static ɵfac: i0.ɵɵFactoryDeclaration<EctButtonComponent, never>;
|
|
31
|
-
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; }; }, { "onClick": "onClick"; }, never, never, false, never>;
|
|
41
|
+
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, false, never>;
|
|
32
42
|
}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import * as i0 from "@angular/core";
|
|
2
2
|
import * as i1 from "./ect-button.component";
|
|
3
3
|
import * as i2 from "@angular/platform-browser";
|
|
4
|
+
import * as i3 from "ect-link";
|
|
4
5
|
export declare class EctButtonModule {
|
|
5
6
|
static ɵfac: i0.ɵɵFactoryDeclaration<EctButtonModule, never>;
|
|
6
|
-
static ɵmod: i0.ɵɵNgModuleDeclaration<EctButtonModule, [typeof i1.EctButtonComponent], [typeof i2.BrowserModule], [typeof i1.EctButtonComponent]>;
|
|
7
|
+
static ɵmod: i0.ɵɵNgModuleDeclaration<EctButtonModule, [typeof i1.EctButtonComponent], [typeof i2.BrowserModule, typeof i3.EctLinkModule], [typeof i1.EctButtonComponent]>;
|
|
7
8
|
static ɵinj: i0.ɵɵInjectorDeclaration<EctButtonModule>;
|
|
8
9
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ect-button",
|
|
3
|
-
"version": "1.19.
|
|
3
|
+
"version": "1.19.3",
|
|
4
4
|
"description": "ECT Button with Bootstrap and full WCAG as standard.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"angular",
|
|
@@ -17,7 +17,8 @@
|
|
|
17
17
|
},
|
|
18
18
|
"peerDependencies": {
|
|
19
19
|
"@angular/common": "^19.0.0",
|
|
20
|
-
"@angular/core": "^19.0.0"
|
|
20
|
+
"@angular/core": "^19.0.0",
|
|
21
|
+
"ect-link": "^1.19.6"
|
|
21
22
|
},
|
|
22
23
|
"dependencies": {
|
|
23
24
|
"tslib": "^2.5.0"
|