ect-button 1.19.2 → 1.19.4

package/README.md

@@ -38,20 +38,35 @@ In your HTML template, to add a primary button with an icon and an onClick event
 - *BackgroundColour*: Optional. Overriding background colour.
 - *BorderColour*: Optional. Overriding border colour.
 - *IconColour*: Optional. Overriding icon colour.
+- *DropDown*: Optional. If set to true, button has dropdown option.
+- *DropDownOptions*: Optional. Array of type IBtnDropdownOption showing an ectlink link, that can include dividers.
+
+## IBtnDropdownOption Properties
+
+- *Text*: Mandatory. Link text.
+- *CssClasses*: Optional. Default is blank.
+- *Icon*: Optional. Name of icon e.g. far fa-clock.
+- *Action*: Mandatory. Callback event.
+- *Target*: Optional. A href target option i.e. _blank, _parent, _self or _top.
+- *Divider*: Optional. If set to true, a divider is shown instead of the link.
+
 
 ## Events
 
 - *onClick*: Click action.
 
+
 ## Dependencies
 
 None
 
+
 ## Cost
 
 If you find some benefit from using this package, please consider the time it took to put this together, and why not buy me a coffee? Goodness only knows that most of us would not function without coffee. All donations very much welcomed: 
 (https://www.buymeacoffee.com/exoduscloudtech)
 
+
 ## Licence
 
 The licence agreement for this paid component can be found here: (https://angular-grid.net/assets/licence/licence_agreement.txt)

package/fesm2022/ect-button.mjs

@@ -1,9 +1,11 @@
 import * as i0 from '@angular/core';
 import { input, output, Component, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { EctLinkModule } from 'ect-link';
 
 class EctButtonComponent {
     constructor() {
+        this.loaded = false;
         this.Text = input('');
         this.Type = input('primary');
         this.Icon = input('');
@@ -16,19 +18,52 @@ class EctButtonComponent {
         this.BackgroundColour = input('');
         this.BorderColour = input('');
         this.IconColour = input('');
-        this.ActualType = this.Type() !== '' ? this.Type() : 'primary';
-        this.ActualHideText = this.Text() === '' ? true : this.HideText();
+        this.DropDown = input(false);
+        this.DropDownOptions = input([]);
+        this.ActualType = '';
+        this.ActualHideText = false;
+        this.IsDropDown = false;
+        this.ActualDropDownOptions = [];
+        this.ExpectedCssClasses = '';
         this.onClick = output();
         this.hasIcon = true;
         this.hasIconColour = this.IconColour() !== '';
         this.buttonId = '';
     }
-    get CssClasses() {
-        let expectedClasses = 'btn btn-' + this.Type() + ' ' + this.AdditionalCssClasses() + ' standard-button';
-        if (this.IsSelected() === true) {
-            expectedClasses += ' selected-background-color';
+    ngOnInit() {
+        let text = this.Text();
+        let type = this.Type();
+        let icon = this.Icon();
+        let additionalCssClasses = this.AdditionalCssClasses();
+        let hideText = this.HideText();
+        let disabled = this.Disabled();
+        let textBeforeIcon = this.TextBeforeIcon();
+        let isSelected = this.IsSelected();
+        let textColour = this.TextColour();
+        let backgroundColour = this.BackgroundColour();
+        let borderColour = this.BorderColour();
+        let iconColour = this.IconColour();
+        let dropDown = this.DropDown();
+        this.ExpectedCssClasses = 'btn btn-' + type + ' ' + additionalCssClasses + ' standard-button';
+        if (isSelected === true) {
+            this.ExpectedCssClasses += ' selected-background-color';
+        }
+        if (dropDown === true) {
+            this.ExpectedCssClasses += ' dropdown-toggle';
         }
-        return expectedClasses;
+        this.ActualType = type !== '' ? type : 'primary';
+        this.ActualHideText = text === '' ? true : hideText;
+        this.IsDropDown = dropDown === true;
+        this.ActualDropDownOptions = this.DropDownOptions();
+        this.ActualDropDownOptions.forEach((option) => {
+            option.Id = this.getActionLinkName(option.Text);
+        });
+        const randomNumber = Math.random() * (9999999 - 99) + 99;
+        this.buttonId = 'button' + Math.round(randomNumber);
+        this.loaded = true;
+    }
+    get CssClasses() {
+        return this.ExpectedCssClasses;
     }
     get ShowText() {
         return !this.HideText();
@@ -42,25 +77,32 @@ class EctButtonComponent {
     get IconBeforeText() {
         return this.TextBeforeIcon() !== true;
     }
-    getButtonName() {
-        if (this.buttonId === '') {
-            const randomNumber = Math.random() * (9999999 - 99) + 99;
-            this.buttonId = 'button' + Math.round(randomNumber);
-        }
+    get ButtonName() {
         return this.buttonId;
     }
+    writeToConsoleWithText(text) {
+        console.log(text);
+    }
+    getActionLinkName(text) {
+        var actualText = text.replace(' ', '').toLocaleLowerCase();
+        var name = 'action-' + (actualText !== '' ? actualText + '-' : '');
+        const randomNumber = Math.random() * (9999999 - 99) + 99;
+        return name + Math.round(randomNumber);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: EctButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    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        [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>&nbsp;</span>\r\n  }\r\n  @if (ShowText) {\r\n    <span>{{Text()}}</span>\r\n  }\r\n  @if (ShowText && !IconBeforeText) {\r\n    <span>&nbsp;</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", 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"] }); }
+    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>&nbsp;{{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>&nbsp;{{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>&nbsp;</span>\r\n      }\r\n      @if (ShowText) {\r\n        <span>{{Text()}}</span>\r\n      }\r\n      @if (ShowText && !IconBeforeText) {\r\n        <span>&nbsp;</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"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: EctButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ect-button', standalone: false, template: "<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>&nbsp;</span>\r\n  }\r\n  @if (ShowText) {\r\n    <span>{{Text()}}</span>\r\n  }\r\n  @if (ShowText && !IconBeforeText) {\r\n    <span>&nbsp;</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", 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"] }]
+            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>&nbsp;{{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>&nbsp;{{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>&nbsp;</span>\r\n      }\r\n      @if (ShowText) {\r\n        <span>{{Text()}}</span>\r\n      }\r\n      @if (ShowText && !IconBeforeText) {\r\n        <span>&nbsp;</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"] }]
         }] });
 
 class EctButtonModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: EctButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.0", ngImport: i0, type: EctButtonModule, bootstrap: [EctButtonComponent], declarations: [EctButtonComponent], imports: [BrowserModule], exports: [EctButtonComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: EctButtonModule, imports: [BrowserModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.0", ngImport: i0, type: EctButtonModule, bootstrap: [EctButtonComponent], declarations: [EctButtonComponent], imports: [BrowserModule,
+            EctLinkModule], exports: [EctButtonComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: EctButtonModule, imports: [BrowserModule,
+            EctLinkModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImport: i0, type: EctButtonModule, decorators: [{
             type: NgModule,
@@ -69,7 +111,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0", ngImpor
                         EctButtonComponent
                     ],
                     imports: [
-                        BrowserModule
+                        BrowserModule,
+                        EctLinkModule
                     ],
                     exports: [
                         EctButtonComponent

package/fesm2022/ect-button.mjs.map

@@ -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>&nbsp;</span>\r\n  }\r\n  @if (ShowText) {\r\n    <span>{{Text()}}</span>\r\n  }\r\n  @if (ShowText && !IconBeforeText) {\r\n    <span>&nbsp;</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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"}
+{"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    this.ActualDropDownOptions.forEach((option) => { \r\n      option.Id = this.getActionLinkName(option.Text);\r\n    });\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  private getActionLinkName(text: string): string {\r\n    var actualText = text.replace(' ', '').toLocaleLowerCase();\r\n    var name = 'action-' + (actualText !== '' ? actualText + '-' : '');\r\n    const randomNumber = Math.random() * (9999999 - 99) + 99;\r\n    return name + Math.round(randomNumber);\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>&nbsp;{{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>&nbsp;{{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>&nbsp;</span>\r\n      }\r\n      @if (ShowText) {\r\n        <span>{{Text()}}</span>\r\n      }\r\n      @if (ShowText && !IconBeforeText) {\r\n        <span>&nbsp;</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';\nexport * from './lib/models/btn-dropdown-option.model';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/lib/ect-button.component.d.ts

@@ -1,8 +1,11 @@
+import { OnInit } from '@angular/core';
+import { IBtnDropdownOption } from './models/btn-dropdown-option.model';
 import * as i0 from "@angular/core";
 export interface IEctButtonComponent {
     clickAction(): void;
 }
-export declare class EctButtonComponent implements IEctButtonComponent {
+export declare class EctButtonComponent implements IEctButtonComponent, OnInit {
+    loaded: boolean;
     Text: import("@angular/core").InputSignal<string>;
     Type: import("@angular/core").InputSignal<string>;
     Icon: import("@angular/core").InputSignal<string>;
@@ -15,18 +18,26 @@ export declare class EctButtonComponent implements IEctButtonComponent {
     BackgroundColour: import("@angular/core").InputSignal<string>;
     BorderColour: import("@angular/core").InputSignal<string>;
     IconColour: import("@angular/core").InputSignal<string>;
+    DropDown: import("@angular/core").InputSignal<boolean>;
+    DropDownOptions: import("@angular/core").InputSignal<IBtnDropdownOption[]>;
     ActualType: string;
     ActualHideText: boolean;
+    IsDropDown: boolean;
+    ActualDropDownOptions: IBtnDropdownOption[];
+    private ExpectedCssClasses;
     onClick: import("@angular/core").OutputEmitterRef<any>;
     hasIcon: boolean;
     hasIconColour: boolean;
     private buttonId;
+    ngOnInit(): void;
     get CssClasses(): string;
     get ShowText(): boolean;
     clickAction(): void;
     get Enabled(): boolean;
     get IconBeforeText(): boolean;
-    getButtonName(): string;
+    get ButtonName(): string;
+    writeToConsoleWithText(text: string): void;
+    private getActionLinkName;
     static ɵfac: i0.ɵɵFactoryDeclaration<EctButtonComponent, never>;
-    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>;
+    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>;
 }

package/lib/ect-button.module.d.ts

@@ -1,8 +1,9 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./ect-button.component";
 import * as i2 from "@angular/platform-browser";
+import * as i3 from "ect-link";
 export declare class EctButtonModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<EctButtonModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<EctButtonModule, [typeof i1.EctButtonComponent], [typeof i2.BrowserModule], [typeof i1.EctButtonComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<EctButtonModule, [typeof i1.EctButtonComponent], [typeof i2.BrowserModule, typeof i3.EctLinkModule], [typeof i1.EctButtonComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<EctButtonModule>;
 }

package/lib/models/btn-dropdown-option.model.d.ts

@@ -0,0 +1,10 @@
+export interface IBtnDropdownOption {
+    Id?: string;
+    Text: string;
+    CssClasses?: string;
+    Icon?: string;
+    IconColour?: string;
+    Action: () => void;
+    Target?: string;
+    Divider?: boolean;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ect-button",
-  "version": "1.19.2",
+  "version": "1.19.4",
   "description": "ECT Button with Bootstrap and full WCAG as standard.",
   "keywords": [
     "angular",

package/public-api.d.ts

@@ -1,2 +1,3 @@
 export * from './lib/ect-button.module';
 export * from './lib/ect-button.component';
+export * from './lib/models/btn-dropdown-option.model';