From 9c0a3945fde2442e37757730e0bc250ea675e101 Mon Sep 17 00:00:00 2001
From: Bhushan Palsapure <122287459+bhushan-ebi@users.noreply.github.com>
Date: Tue, 25 Apr 2023 14:41:59 +0100
Subject: [PATCH] feat: Added Angular compatibility support for vf-button
component as package (#1929) (#1940)
---
components/vf-button/CHANGELOG.md | 6 +-
components/vf-button/README.md | 15 +--
.../vf-button.angular.component.spec.ts | 27 +++---
.../vf-button/vf-button.angular.component.ts | 67 +++++++++-----
.../vf-button/vf-button.angular/README.md | 24 +++++
.../lib/vf-button.angular.component.mjs | 63 +++++++++++++
.../esm2020/lib/vf-button.angular.module.mjs | 21 +++++
.../vf-button.angular/esm2020/public-api.mjs | 6 ++
.../esm2020/vf-button.angular.mjs | 5 +
.../fesm2015/vf-button.angular.mjs | 92 +++++++++++++++++++
.../fesm2015/vf-button.angular.mjs.map | 1 +
.../fesm2020/vf-button.angular.mjs | 92 +++++++++++++++++++
.../fesm2020/vf-button.angular.mjs.map | 1 +
.../vf-button/vf-button.angular/index.d.ts | 5 +
.../lib/vf-button.angular.component.d.ts | 18 ++++
.../lib/vf-button.angular.module.d.ts | 7 ++
.../vf-button/vf-button.angular/package.json | 31 +++++++
.../vf-button.angular/public-api.d.ts | 2 +
18 files changed, 434 insertions(+), 49 deletions(-)
create mode 100644 components/vf-button/vf-button.angular/README.md
create mode 100644 components/vf-button/vf-button.angular/esm2020/lib/vf-button.angular.component.mjs
create mode 100644 components/vf-button/vf-button.angular/esm2020/lib/vf-button.angular.module.mjs
create mode 100644 components/vf-button/vf-button.angular/esm2020/public-api.mjs
create mode 100644 components/vf-button/vf-button.angular/esm2020/vf-button.angular.mjs
create mode 100644 components/vf-button/vf-button.angular/fesm2015/vf-button.angular.mjs
create mode 100644 components/vf-button/vf-button.angular/fesm2015/vf-button.angular.mjs.map
create mode 100644 components/vf-button/vf-button.angular/fesm2020/vf-button.angular.mjs
create mode 100644 components/vf-button/vf-button.angular/fesm2020/vf-button.angular.mjs.map
create mode 100644 components/vf-button/vf-button.angular/index.d.ts
create mode 100644 components/vf-button/vf-button.angular/lib/vf-button.angular.component.d.ts
create mode 100644 components/vf-button/vf-button.angular/lib/vf-button.angular.module.d.ts
create mode 100644 components/vf-button/vf-button.angular/package.json
create mode 100644 components/vf-button/vf-button.angular/public-api.d.ts
diff --git a/components/vf-button/CHANGELOG.md b/components/vf-button/CHANGELOG.md
index 59abba1506..b1b8681708 100644
--- a/components/vf-button/CHANGELOG.md
+++ b/components/vf-button/CHANGELOG.md
@@ -1,7 +1,11 @@
+### 3.0.0-alpha.0
+
+* Changed : Angular support for Button component as a standalone package. See README.md for more.
+
### 2.0.0-alpha.6
* Changes the link variant to be a button element
-
+
### 2.0.0-alpha.5
* Readme formatting fixes.
diff --git a/components/vf-button/README.md b/components/vf-button/README.md
index 9dba580240..5425c3b211 100644
--- a/components/vf-button/README.md
+++ b/components/vf-button/README.md
@@ -50,25 +50,26 @@ The guidelines on buttons in [the GOV.UK Design System](https://design-system.se
### Angular
-As of vf-button v2.0.0-alpha.2 vf-button has experimental Angular support.
+Latest Angular package (3.0.0-alpha.0) was generated with Angular version 15.2.0 and has been tested on application with Angular version 15.2.0.
1. install `yarn add @visual-framework/vf-button`
2. import in your app.module
```
- import { VfButton } from "@visual-framework/vf-button/vf-button.angular.component.ts";
+ import { VfButtonAngularModule } from '@visual-framework/vf-button/vf-button.angular';
@NgModule({
- declarations: [VfButton, YourOtherComponents],
+ imports: [VfButtonAngularModule, YourOtherModules],
...
})
```
-3. use
+3. can be used as
```
-
+
```
4. add to your styles.scss
```
- @import '~@visual-framework/vf-button/vf-button.scss';
+ @import '../node_modules/@visual-framework/vf-sass-config/index.scss';
+ @import "../node_modules/@visual-framework/vf-button/vf-button.scss";
```
(you should also make use of [vf-sass-starter](https://stable.visual-framework.dev/components/vf-sass-starter))
@@ -77,7 +78,7 @@ Depending on the success of this method, we plan to add standardized guidance to
Usage:
```
-
+
```
## Install
diff --git a/components/vf-button/vf-button.angular.component.spec.ts b/components/vf-button/vf-button.angular.component.spec.ts
index f788fd5d3e..ffe4dad4bf 100644
--- a/components/vf-button/vf-button.angular.component.spec.ts
+++ b/components/vf-button/vf-button.angular.component.spec.ts
@@ -1,28 +1,23 @@
-// vf-button for Angular
-// ---
-import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing";
+import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { VfButton } from "./vf-button.angular.component.ts";
+import { VfButtonAngularComponent } from './vf-button.angular.component';
-describe("ButtonComponent", () => {
- let component: VfButton;
- let fixture: ComponentFixture;
+describe('VfButtonAngularComponent', () => {
+ let component: VfButtonAngularComponent;
+ let fixture: ComponentFixture;
- beforeEach(
- waitForAsync(() => {
- TestBed.configureTestingModule({
- declarations: [VfButton]
- }).compileComponents();
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ VfButtonAngularComponent ]
})
- );
+ .compileComponents();
- beforeEach(() => {
- fixture = TestBed.createComponent(VfButton);
+ fixture = TestBed.createComponent(VfButtonAngularComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
- it("should create", () => {
+ it('should create', () => {
expect(component).toBeTruthy();
});
});
diff --git a/components/vf-button/vf-button.angular.component.ts b/components/vf-button/vf-button.angular.component.ts
index 1534dcea22..9af9e824f0 100644
--- a/components/vf-button/vf-button.angular.component.ts
+++ b/components/vf-button/vf-button.angular.component.ts
@@ -1,33 +1,50 @@
-// vf-button for Angular
-// ---
-import { Component, Input, OnInit } from "@angular/core";
+import { Component, Input, OnInit } from '@angular/core';
@Component({
- selector: "a[vf-button], button[vf-button]",
+ selector: 'vf-button',
template: `
-
+
`,
- styleUrls: []
+ styles: []
})
-// note: we don't pass style urls here, instead we include them in the overall project sass build process
-export class VfButton implements OnInit {
- @Input() primary = false;
- @Input() secondary = true;
- @Input() small = false;
- @Input() disabled = false;
+export class VfButtonAngularComponent implements OnInit {
+ /* Initialize values based on input values for button*/
+ @Input() theme = '';
+ @Input() id: string | undefined;
+ @Input() text = '';
+ @Input() style: Array<'primary' | 'secondary' | 'tertiary'> = [];
+ @Input() size: string | undefined;
+ @Input() override_class = '';
+ @Input() html = '';
- constructor() {}
+ content = '';
+ class = 'vf-button ';
- ngOnInit(): void {}
+ ngOnInit(): void {
+ //Initialize something
+ }
+
+ ngOnChanges(): void {
+ this.setValues();
+ }
+
+ /* Set values as per input and updated changes */
+ setValues(): void {
+
+ /* Set values ass per the input */
+ this.content = this.html !== '' ? this.html : this.text;
+ this.class += this.theme !== '' ? 'vf-button--' + this.theme + ' ' : '';
+ /* Update class value if styles are received in input */
+ if(this.style.length > 0) {
+ this.style.forEach(style => {
+ this.class += 'vf-button--' + style + ' ';
+ });
+ }
+ /* Update class value if size is received in input */
+ if(this.size !== undefined) {
+ this.class += 'vf-button--' + this.size + ' ';
+ }
+ /* Update class value if override style received in input */
+ this.class += this.override_class !== '' ? '| ' + this.override_class : '';
+ }
}
diff --git a/components/vf-button/vf-button.angular/README.md b/components/vf-button/vf-button.angular/README.md
new file mode 100644
index 0000000000..dc263d0c01
--- /dev/null
+++ b/components/vf-button/vf-button.angular/README.md
@@ -0,0 +1,24 @@
+# VfButtonAngular
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 15.2.0.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project vf-button.angular` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project vf-button.angular`.
+> Note: Don't forget to add `--project vf-button.angular` or else it will be added to the default project in your `angular.json` file.
+
+## Build
+
+Run `ng build vf-button.angular` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build vf-button.angular`, go to the dist folder `cd dist/vf-button.angular` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test vf-button.angular` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
diff --git a/components/vf-button/vf-button.angular/esm2020/lib/vf-button.angular.component.mjs b/components/vf-button/vf-button.angular/esm2020/lib/vf-button.angular.component.mjs
new file mode 100644
index 0000000000..66dd2110d4
--- /dev/null
+++ b/components/vf-button/vf-button.angular/esm2020/lib/vf-button.angular.component.mjs
@@ -0,0 +1,63 @@
+import { Component, Input } from '@angular/core';
+import * as i0 from "@angular/core";
+export class VfButtonAngularComponent {
+ constructor() {
+ /* Initialize values based on input values for button*/
+ this.theme = '';
+ this.text = '';
+ this.style = [];
+ this.override_class = '';
+ this.html = '';
+ this.content = '';
+ this.class = 'vf-button ';
+ }
+ ngOnInit() {
+ //Initialize something
+ }
+ ngOnChanges() {
+ this.setValues();
+ }
+ /* Set values as per input and updated changes */
+ setValues() {
+ /* Set values ass per the input */
+ this.content = this.html !== '' ? this.html : this.text;
+ this.class += this.theme !== '' ? 'vf-button--' + this.theme + ' ' : '';
+ /* Update class value if styles are received in input */
+ if (this.style.length > 0) {
+ this.style.forEach(style => {
+ this.class += 'vf-button--' + style + ' ';
+ });
+ }
+ /* Update class value if size is received in input */
+ if (this.size !== undefined) {
+ this.class += 'vf-button--' + this.size + ' ';
+ }
+ /* Update class value if override style received in input */
+ this.class += this.override_class !== '' ? '| ' + this.override_class : '';
+ }
+}
+VfButtonAngularComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: VfButtonAngularComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+VfButtonAngularComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: VfButtonAngularComponent, selector: "vf-button", inputs: { theme: "theme", id: "id", text: "text", style: "style", size: "size", override_class: "override_class", html: "html" }, usesOnChanges: true, ngImport: i0, template: `
+
+ `, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: VfButtonAngularComponent, decorators: [{
+ type: Component,
+ args: [{ selector: 'vf-button', template: `
+
+ ` }]
+ }], propDecorators: { theme: [{
+ type: Input
+ }], id: [{
+ type: Input
+ }], text: [{
+ type: Input
+ }], style: [{
+ type: Input
+ }], size: [{
+ type: Input
+ }], override_class: [{
+ type: Input
+ }], html: [{
+ type: Input
+ }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmYtYnV0dG9uLmFuZ3VsYXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvdmYtYnV0dG9uLmFuZ3VsYXIvc3JjL2xpYi92Zi1idXR0b24uYW5ndWxhci5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQVUsTUFBTSxlQUFlLENBQUM7O0FBU3pELE1BQU0sT0FBTyx3QkFBd0I7SUFQckM7UUFRRSx3REFBd0Q7UUFDL0MsVUFBSyxHQUFJLEVBQUUsQ0FBQztRQUVaLFNBQUksR0FBRyxFQUFFLENBQUM7UUFDVixVQUFLLEdBQWdELEVBQUUsQ0FBQztRQUV4RCxtQkFBYyxHQUFHLEVBQUUsQ0FBQztRQUNwQixTQUFJLEdBQUcsRUFBRSxDQUFDO1FBRW5CLFlBQU8sR0FBSSxFQUFFLENBQUM7UUFDZCxVQUFLLEdBQUcsWUFBWSxDQUFDO0tBNkJ0QjtJQTNCQyxRQUFRO1FBQ04sc0JBQXNCO0lBQ3hCLENBQUM7SUFFRCxXQUFXO1FBQ1QsSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDO0lBQ25CLENBQUM7SUFFRCxpREFBaUQ7SUFDakQsU0FBUztRQUVQLGtDQUFrQztRQUNsQyxJQUFJLENBQUMsT0FBTyxHQUFHLElBQUksQ0FBQyxJQUFJLEtBQUssRUFBRSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDO1FBQ3hELElBQUksQ0FBQyxLQUFLLElBQUksSUFBSSxDQUFDLEtBQUssS0FBSyxFQUFFLENBQUMsQ0FBQyxDQUFDLGFBQWEsR0FBRyxJQUFJLENBQUMsS0FBSyxHQUFJLEdBQUcsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDO1FBQ3pFLHdEQUF3RDtRQUN4RCxJQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsTUFBTSxHQUFHLENBQUMsRUFBRTtZQUN4QixJQUFJLENBQUMsS0FBSyxDQUFDLE9BQU8sQ0FBQyxLQUFLLENBQUMsRUFBRTtnQkFDekIsSUFBSSxDQUFDLEtBQUssSUFBSSxhQUFhLEdBQUcsS0FBSyxHQUFJLEdBQUcsQ0FBQztZQUM3QyxDQUFDLENBQUMsQ0FBQztTQUNKO1FBQ0QscURBQXFEO1FBQ3JELElBQUcsSUFBSSxDQUFDLElBQUksS0FBSyxTQUFTLEVBQUU7WUFDMUIsSUFBSSxDQUFDLEtBQUssSUFBSSxhQUFhLEdBQUcsSUFBSSxDQUFDLElBQUksR0FBSSxHQUFHLENBQUM7U0FDaEQ7UUFDRCw0REFBNEQ7UUFDNUQsSUFBSSxDQUFDLEtBQUssSUFBSSxJQUFJLENBQUMsY0FBYyxLQUFLLEVBQUUsQ0FBQyxDQUFDLENBQUMsSUFBSSxHQUFHLElBQUksQ0FBQyxjQUFjLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQztJQUM3RSxDQUFDOztxSEF2Q1Usd0JBQXdCO3lHQUF4Qix3QkFBd0Isd01BTHpCOztHQUVUOzJGQUdVLHdCQUF3QjtrQkFQcEMsU0FBUzsrQkFDRSxXQUFXLFlBQ1g7O0dBRVQ7OEJBS1EsS0FBSztzQkFBYixLQUFLO2dCQUNHLEVBQUU7c0JBQVYsS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUNHLElBQUk7c0JBQVosS0FBSztnQkFDRyxjQUFjO3NCQUF0QixLQUFLO2dCQUNHLElBQUk7c0JBQVosS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIE9uSW5pdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICd2Zi1idXR0b24nLFxuICB0ZW1wbGF0ZTogYFxuICAgIDxidXR0b24gW2F0dHIuaWRdID0gXCJpZCAhPT0gdW5kZWZpbmVkID8gaWQgOiBudWxsXCIgW2NsYXNzXT1cImNsYXNzXCIgW2lubmVySFRNTF09XCJjb250ZW50XCI+PC9idXR0b24+XG4gIGAsXG4gIHN0eWxlczogW11cbn0pXG5leHBvcnQgY2xhc3MgVmZCdXR0b25Bbmd1bGFyQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcbiAgLyogIEluaXRpYWxpemUgdmFsdWVzIGJhc2VkIG9uIGlucHV0IHZhbHVlcyBmb3IgYnV0dG9uKi9cbiAgQElucHV0KCkgdGhlbWUgID0gJyc7XG4gIEBJbnB1dCgpIGlkOiAgc3RyaW5nIHwgdW5kZWZpbmVkO1xuICBASW5wdXQoKSB0ZXh0ID0gJyc7XG4gIEBJbnB1dCgpIHN0eWxlOiBBcnJheTwncHJpbWFyeScgfCAnc2Vjb25kYXJ5JyB8ICd0ZXJ0aWFyeSc+ID0gW107XG4gIEBJbnB1dCgpIHNpemU6IHN0cmluZyB8IHVuZGVmaW5lZDtcbiAgQElucHV0KCkgb3ZlcnJpZGVfY2xhc3MgPSAnJztcbiAgQElucHV0KCkgaHRtbCA9ICcnO1xuXG4gIGNvbnRlbnQgPSAgJyc7XG4gIGNsYXNzID0gJ3ZmLWJ1dHRvbiAnO1xuXG4gIG5nT25Jbml0KCk6IHZvaWQge1xuICAgIC8vSW5pdGlhbGl6ZSBzb21ldGhpbmdcbiAgfVxuXG4gIG5nT25DaGFuZ2VzKCk6IHZvaWQge1xuICAgIHRoaXMuc2V0VmFsdWVzKCk7XG4gIH1cblxuICAvKiBTZXQgdmFsdWVzIGFzIHBlciBpbnB1dCBhbmQgdXBkYXRlZCBjaGFuZ2VzICovXG4gIHNldFZhbHVlcygpOiB2b2lkIHtcblxuICAgIC8qIFNldCB2YWx1ZXMgYXNzIHBlciB0aGUgaW5wdXQgKi9cbiAgICB0aGlzLmNvbnRlbnQgPSB0aGlzLmh0bWwgIT09ICcnID8gdGhpcy5odG1sIDogdGhpcy50ZXh0O1xuICAgIHRoaXMuY2xhc3MgKz0gdGhpcy50aGVtZSAhPT0gJycgPyAndmYtYnV0dG9uLS0nICsgdGhpcy50aGVtZSArICAnICcgOiAnJztcbiAgICAvKiBVcGRhdGUgY2xhc3MgdmFsdWUgaWYgc3R5bGVzIGFyZSByZWNlaXZlZCBpbiBpbnB1dCAqL1xuICAgIGlmKHRoaXMuc3R5bGUubGVuZ3RoID4gMCkge1xuICAgICAgdGhpcy5zdHlsZS5mb3JFYWNoKHN0eWxlID0+IHtcbiAgICAgICAgdGhpcy5jbGFzcyArPSAndmYtYnV0dG9uLS0nICsgc3R5bGUgKyAgJyAnO1xuICAgICAgfSk7XG4gICAgfVxuICAgIC8qIFVwZGF0ZSBjbGFzcyB2YWx1ZSBpZiBzaXplIGlzIHJlY2VpdmVkIGluIGlucHV0ICovXG4gICAgaWYodGhpcy5zaXplICE9PSB1bmRlZmluZWQpIHtcbiAgICAgIHRoaXMuY2xhc3MgKz0gJ3ZmLWJ1dHRvbi0tJyArIHRoaXMuc2l6ZSArICAnICc7XG4gICAgfVxuICAgIC8qIFVwZGF0ZSBjbGFzcyB2YWx1ZSBpZiBvdmVycmlkZSBzdHlsZSByZWNlaXZlZCBpbiBpbnB1dCAqL1xuICAgIHRoaXMuY2xhc3MgKz0gdGhpcy5vdmVycmlkZV9jbGFzcyAhPT0gJycgPyAnfCAnICsgdGhpcy5vdmVycmlkZV9jbGFzcyA6ICcnO1xuICB9XG59XG4iXX0=
\ No newline at end of file
diff --git a/components/vf-button/vf-button.angular/esm2020/lib/vf-button.angular.module.mjs b/components/vf-button/vf-button.angular/esm2020/lib/vf-button.angular.module.mjs
new file mode 100644
index 0000000000..7751ba3577
--- /dev/null
+++ b/components/vf-button/vf-button.angular/esm2020/lib/vf-button.angular.module.mjs
@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { VfButtonAngularComponent } from './vf-button.angular.component';
+import * as i0 from "@angular/core";
+export class VfButtonAngularModule {
+}
+VfButtonAngularModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: VfButtonAngularModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+VfButtonAngularModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.3", ngImport: i0, type: VfButtonAngularModule, declarations: [VfButtonAngularComponent], exports: [VfButtonAngularComponent] });
+VfButtonAngularModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: VfButtonAngularModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: VfButtonAngularModule, decorators: [{
+ type: NgModule,
+ args: [{
+ declarations: [
+ VfButtonAngularComponent
+ ],
+ imports: [],
+ exports: [
+ VfButtonAngularComponent
+ ]
+ }]
+ }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmYtYnV0dG9uLmFuZ3VsYXIubW9kdWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvdmYtYnV0dG9uLmFuZ3VsYXIvc3JjL2xpYi92Zi1idXR0b24uYW5ndWxhci5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN6QyxPQUFPLEVBQUUsd0JBQXdCLEVBQUUsTUFBTSwrQkFBK0IsQ0FBQzs7QUFjekUsTUFBTSxPQUFPLHFCQUFxQjs7a0hBQXJCLHFCQUFxQjttSEFBckIscUJBQXFCLGlCQVI5Qix3QkFBd0IsYUFLeEIsd0JBQXdCO21IQUdmLHFCQUFxQjsyRkFBckIscUJBQXFCO2tCQVZqQyxRQUFRO21CQUFDO29CQUNSLFlBQVksRUFBRTt3QkFDWix3QkFBd0I7cUJBQ3pCO29CQUNELE9BQU8sRUFBRSxFQUNSO29CQUNELE9BQU8sRUFBRTt3QkFDUCx3QkFBd0I7cUJBQ3pCO2lCQUNGIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgTmdNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFZmQnV0dG9uQW5ndWxhckNvbXBvbmVudCB9IGZyb20gJy4vdmYtYnV0dG9uLmFuZ3VsYXIuY29tcG9uZW50JztcblxuXG5cbkBOZ01vZHVsZSh7XG4gIGRlY2xhcmF0aW9uczogW1xuICAgIFZmQnV0dG9uQW5ndWxhckNvbXBvbmVudFxuICBdLFxuICBpbXBvcnRzOiBbXG4gIF0sXG4gIGV4cG9ydHM6IFtcbiAgICBWZkJ1dHRvbkFuZ3VsYXJDb21wb25lbnRcbiAgXVxufSlcbmV4cG9ydCBjbGFzcyBWZkJ1dHRvbkFuZ3VsYXJNb2R1bGUgeyB9XG4iXX0=
\ No newline at end of file
diff --git a/components/vf-button/vf-button.angular/esm2020/public-api.mjs b/components/vf-button/vf-button.angular/esm2020/public-api.mjs
new file mode 100644
index 0000000000..5e405ba8d0
--- /dev/null
+++ b/components/vf-button/vf-button.angular/esm2020/public-api.mjs
@@ -0,0 +1,6 @@
+/*
+ * Public API Surface of vf-button.angular
+ */
+export * from './lib/vf-button.angular.component';
+export * from './lib/vf-button.angular.module';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL3ZmLWJ1dHRvbi5hbmd1bGFyL3NyYy9wdWJsaWMtYXBpLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztHQUVHO0FBRUgsY0FBYyxtQ0FBbUMsQ0FBQztBQUNsRCxjQUFjLGdDQUFnQyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIFB1YmxpYyBBUEkgU3VyZmFjZSBvZiB2Zi1idXR0b24uYW5ndWxhclxuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vbGliL3ZmLWJ1dHRvbi5hbmd1bGFyLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi92Zi1idXR0b24uYW5ndWxhci5tb2R1bGUnO1xuIl19
\ No newline at end of file
diff --git a/components/vf-button/vf-button.angular/esm2020/vf-button.angular.mjs b/components/vf-button/vf-button.angular/esm2020/vf-button.angular.mjs
new file mode 100644
index 0000000000..32ccb51349
--- /dev/null
+++ b/components/vf-button/vf-button.angular/esm2020/vf-button.angular.mjs
@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './public-api';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmYtYnV0dG9uLmFuZ3VsYXIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9wcm9qZWN0cy92Zi1idXR0b24uYW5ndWxhci9zcmMvdmYtYnV0dG9uLmFuZ3VsYXIudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCxjQUFjLGNBQWMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogR2VuZXJhdGVkIGJ1bmRsZSBpbmRleC4gRG8gbm90IGVkaXQuXG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9wdWJsaWMtYXBpJztcbiJdfQ==
\ No newline at end of file
diff --git a/components/vf-button/vf-button.angular/fesm2015/vf-button.angular.mjs b/components/vf-button/vf-button.angular/fesm2015/vf-button.angular.mjs
new file mode 100644
index 0000000000..23942a9b32
--- /dev/null
+++ b/components/vf-button/vf-button.angular/fesm2015/vf-button.angular.mjs
@@ -0,0 +1,92 @@
+import * as i0 from '@angular/core';
+import { Component, Input, NgModule } from '@angular/core';
+
+class VfButtonAngularComponent {
+ constructor() {
+ /* Initialize values based on input values for button*/
+ this.theme = '';
+ this.text = '';
+ this.style = [];
+ this.override_class = '';
+ this.html = '';
+ this.content = '';
+ this.class = 'vf-button ';
+ }
+ ngOnInit() {
+ //Initialize something
+ }
+ ngOnChanges() {
+ this.setValues();
+ }
+ /* Set values as per input and updated changes */
+ setValues() {
+ /* Set values ass per the input */
+ this.content = this.html !== '' ? this.html : this.text;
+ this.class += this.theme !== '' ? 'vf-button--' + this.theme + ' ' : '';
+ /* Update class value if styles are received in input */
+ if (this.style.length > 0) {
+ this.style.forEach(style => {
+ this.class += 'vf-button--' + style + ' ';
+ });
+ }
+ /* Update class value if size is received in input */
+ if (this.size !== undefined) {
+ this.class += 'vf-button--' + this.size + ' ';
+ }
+ /* Update class value if override style received in input */
+ this.class += this.override_class !== '' ? '| ' + this.override_class : '';
+ }
+}
+VfButtonAngularComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: VfButtonAngularComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+VfButtonAngularComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: VfButtonAngularComponent, selector: "vf-button", inputs: { theme: "theme", id: "id", text: "text", style: "style", size: "size", override_class: "override_class", html: "html" }, usesOnChanges: true, ngImport: i0, template: `
+
+ `, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: VfButtonAngularComponent, decorators: [{
+ type: Component,
+ args: [{ selector: 'vf-button', template: `
+
+ ` }]
+ }], propDecorators: { theme: [{
+ type: Input
+ }], id: [{
+ type: Input
+ }], text: [{
+ type: Input
+ }], style: [{
+ type: Input
+ }], size: [{
+ type: Input
+ }], override_class: [{
+ type: Input
+ }], html: [{
+ type: Input
+ }] } });
+
+class VfButtonAngularModule {
+}
+VfButtonAngularModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: VfButtonAngularModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+VfButtonAngularModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.3", ngImport: i0, type: VfButtonAngularModule, declarations: [VfButtonAngularComponent], exports: [VfButtonAngularComponent] });
+VfButtonAngularModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: VfButtonAngularModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: VfButtonAngularModule, decorators: [{
+ type: NgModule,
+ args: [{
+ declarations: [
+ VfButtonAngularComponent
+ ],
+ imports: [],
+ exports: [
+ VfButtonAngularComponent
+ ]
+ }]
+ }] });
+
+/*
+ * Public API Surface of vf-button.angular
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { VfButtonAngularComponent, VfButtonAngularModule };
+//# sourceMappingURL=vf-button.angular.mjs.map
diff --git a/components/vf-button/vf-button.angular/fesm2015/vf-button.angular.mjs.map b/components/vf-button/vf-button.angular/fesm2015/vf-button.angular.mjs.map
new file mode 100644
index 0000000000..4f73fbbe09
--- /dev/null
+++ b/components/vf-button/vf-button.angular/fesm2015/vf-button.angular.mjs.map
@@ -0,0 +1 @@
+{"version":3,"file":"vf-button.angular.mjs","sources":["../../../projects/vf-button.angular/src/lib/vf-button.angular.component.ts","../../../projects/vf-button.angular/src/lib/vf-button.angular.module.ts","../../../projects/vf-button.angular/src/public-api.ts","../../../projects/vf-button.angular/src/vf-button.angular.ts"],"sourcesContent":["import { Component, Input, OnInit } from '@angular/core';\n\n@Component({\n selector: 'vf-button',\n template: `\n \n `,\n styles: []\n})\nexport class VfButtonAngularComponent implements OnInit {\n /* Initialize values based on input values for button*/\n @Input() theme = '';\n @Input() id: string | undefined;\n @Input() text = '';\n @Input() style: Array<'primary' | 'secondary' | 'tertiary'> = [];\n @Input() size: string | undefined;\n @Input() override_class = '';\n @Input() html = '';\n\n content = '';\n class = 'vf-button ';\n\n ngOnInit(): void {\n //Initialize something\n }\n\n ngOnChanges(): void {\n this.setValues();\n }\n\n /* Set values as per input and updated changes */\n setValues(): void {\n\n /* Set values ass per the input */\n this.content = this.html !== '' ? this.html : this.text;\n this.class += this.theme !== '' ? 'vf-button--' + this.theme + ' ' : '';\n /* Update class value if styles are received in input */\n if(this.style.length > 0) {\n this.style.forEach(style => {\n this.class += 'vf-button--' + style + ' ';\n });\n }\n /* Update class value if size is received in input */\n if(this.size !== undefined) {\n this.class += 'vf-button--' + this.size + ' ';\n }\n /* Update class value if override style received in input */\n this.class += this.override_class !== '' ? '| ' + this.override_class : '';\n }\n}\n","import { NgModule } from '@angular/core';\nimport { VfButtonAngularComponent } from './vf-button.angular.component';\n\n\n\n@NgModule({\n declarations: [\n VfButtonAngularComponent\n ],\n imports: [\n ],\n exports: [\n VfButtonAngularComponent\n ]\n})\nexport class VfButtonAngularModule { }\n","/*\n * Public API Surface of vf-button.angular\n */\n\nexport * from './lib/vf-button.angular.component';\nexport * from './lib/vf-button.angular.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
\ No newline at end of file
diff --git a/components/vf-button/vf-button.angular/fesm2020/vf-button.angular.mjs b/components/vf-button/vf-button.angular/fesm2020/vf-button.angular.mjs
new file mode 100644
index 0000000000..23942a9b32
--- /dev/null
+++ b/components/vf-button/vf-button.angular/fesm2020/vf-button.angular.mjs
@@ -0,0 +1,92 @@
+import * as i0 from '@angular/core';
+import { Component, Input, NgModule } from '@angular/core';
+
+class VfButtonAngularComponent {
+ constructor() {
+ /* Initialize values based on input values for button*/
+ this.theme = '';
+ this.text = '';
+ this.style = [];
+ this.override_class = '';
+ this.html = '';
+ this.content = '';
+ this.class = 'vf-button ';
+ }
+ ngOnInit() {
+ //Initialize something
+ }
+ ngOnChanges() {
+ this.setValues();
+ }
+ /* Set values as per input and updated changes */
+ setValues() {
+ /* Set values ass per the input */
+ this.content = this.html !== '' ? this.html : this.text;
+ this.class += this.theme !== '' ? 'vf-button--' + this.theme + ' ' : '';
+ /* Update class value if styles are received in input */
+ if (this.style.length > 0) {
+ this.style.forEach(style => {
+ this.class += 'vf-button--' + style + ' ';
+ });
+ }
+ /* Update class value if size is received in input */
+ if (this.size !== undefined) {
+ this.class += 'vf-button--' + this.size + ' ';
+ }
+ /* Update class value if override style received in input */
+ this.class += this.override_class !== '' ? '| ' + this.override_class : '';
+ }
+}
+VfButtonAngularComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: VfButtonAngularComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+VfButtonAngularComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: VfButtonAngularComponent, selector: "vf-button", inputs: { theme: "theme", id: "id", text: "text", style: "style", size: "size", override_class: "override_class", html: "html" }, usesOnChanges: true, ngImport: i0, template: `
+
+ `, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: VfButtonAngularComponent, decorators: [{
+ type: Component,
+ args: [{ selector: 'vf-button', template: `
+
+ ` }]
+ }], propDecorators: { theme: [{
+ type: Input
+ }], id: [{
+ type: Input
+ }], text: [{
+ type: Input
+ }], style: [{
+ type: Input
+ }], size: [{
+ type: Input
+ }], override_class: [{
+ type: Input
+ }], html: [{
+ type: Input
+ }] } });
+
+class VfButtonAngularModule {
+}
+VfButtonAngularModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: VfButtonAngularModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+VfButtonAngularModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.3", ngImport: i0, type: VfButtonAngularModule, declarations: [VfButtonAngularComponent], exports: [VfButtonAngularComponent] });
+VfButtonAngularModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: VfButtonAngularModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: VfButtonAngularModule, decorators: [{
+ type: NgModule,
+ args: [{
+ declarations: [
+ VfButtonAngularComponent
+ ],
+ imports: [],
+ exports: [
+ VfButtonAngularComponent
+ ]
+ }]
+ }] });
+
+/*
+ * Public API Surface of vf-button.angular
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { VfButtonAngularComponent, VfButtonAngularModule };
+//# sourceMappingURL=vf-button.angular.mjs.map
diff --git a/components/vf-button/vf-button.angular/fesm2020/vf-button.angular.mjs.map b/components/vf-button/vf-button.angular/fesm2020/vf-button.angular.mjs.map
new file mode 100644
index 0000000000..01a968dd72
--- /dev/null
+++ b/components/vf-button/vf-button.angular/fesm2020/vf-button.angular.mjs.map
@@ -0,0 +1 @@
+{"version":3,"file":"vf-button.angular.mjs","sources":["../../../projects/vf-button.angular/src/lib/vf-button.angular.component.ts","../../../projects/vf-button.angular/src/lib/vf-button.angular.module.ts","../../../projects/vf-button.angular/src/public-api.ts","../../../projects/vf-button.angular/src/vf-button.angular.ts"],"sourcesContent":["import { Component, Input, OnInit } from '@angular/core';\n\n@Component({\n selector: 'vf-button',\n template: `\n \n `,\n styles: []\n})\nexport class VfButtonAngularComponent implements OnInit {\n /* Initialize values based on input values for button*/\n @Input() theme = '';\n @Input() id: string | undefined;\n @Input() text = '';\n @Input() style: Array<'primary' | 'secondary' | 'tertiary'> = [];\n @Input() size: string | undefined;\n @Input() override_class = '';\n @Input() html = '';\n\n content = '';\n class = 'vf-button ';\n\n ngOnInit(): void {\n //Initialize something\n }\n\n ngOnChanges(): void {\n this.setValues();\n }\n\n /* Set values as per input and updated changes */\n setValues(): void {\n\n /* Set values ass per the input */\n this.content = this.html !== '' ? this.html : this.text;\n this.class += this.theme !== '' ? 'vf-button--' + this.theme + ' ' : '';\n /* Update class value if styles are received in input */\n if(this.style.length > 0) {\n this.style.forEach(style => {\n this.class += 'vf-button--' + style + ' ';\n });\n }\n /* Update class value if size is received in input */\n if(this.size !== undefined) {\n this.class += 'vf-button--' + this.size + ' ';\n }\n /* Update class value if override style received in input */\n this.class += this.override_class !== '' ? '| ' + this.override_class : '';\n }\n}\n","import { NgModule } from '@angular/core';\nimport { VfButtonAngularComponent } from './vf-button.angular.component';\n\n\n\n@NgModule({\n declarations: [\n VfButtonAngularComponent\n ],\n imports: [\n ],\n exports: [\n VfButtonAngularComponent\n ]\n})\nexport class VfButtonAngularModule { }\n","/*\n * Public API Surface of vf-button.angular\n */\n\nexport * from './lib/vf-button.angular.component';\nexport * from './lib/vf-button.angular.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
\ No newline at end of file
diff --git a/components/vf-button/vf-button.angular/index.d.ts b/components/vf-button/vf-button.angular/index.d.ts
new file mode 100644
index 0000000000..8faa2d924b
--- /dev/null
+++ b/components/vf-button/vf-button.angular/index.d.ts
@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+///
+export * from './public-api';
diff --git a/components/vf-button/vf-button.angular/lib/vf-button.angular.component.d.ts b/components/vf-button/vf-button.angular/lib/vf-button.angular.component.d.ts
new file mode 100644
index 0000000000..afa2813552
--- /dev/null
+++ b/components/vf-button/vf-button.angular/lib/vf-button.angular.component.d.ts
@@ -0,0 +1,18 @@
+import { OnInit } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class VfButtonAngularComponent implements OnInit {
+ theme: string;
+ id: string | undefined;
+ text: string;
+ style: Array<'primary' | 'secondary' | 'tertiary'>;
+ size: string | undefined;
+ override_class: string;
+ html: string;
+ content: string;
+ class: string;
+ ngOnInit(): void;
+ ngOnChanges(): void;
+ setValues(): void;
+ static ɵfac: i0.ɵɵFactoryDeclaration;
+ static ɵcmp: i0.ɵɵComponentDeclaration;
+}
diff --git a/components/vf-button/vf-button.angular/lib/vf-button.angular.module.d.ts b/components/vf-button/vf-button.angular/lib/vf-button.angular.module.d.ts
new file mode 100644
index 0000000000..ff64737933
--- /dev/null
+++ b/components/vf-button/vf-button.angular/lib/vf-button.angular.module.d.ts
@@ -0,0 +1,7 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./vf-button.angular.component";
+export declare class VfButtonAngularModule {
+ static ɵfac: i0.ɵɵFactoryDeclaration;
+ static ɵmod: i0.ɵɵNgModuleDeclaration;
+ static ɵinj: i0.ɵɵInjectorDeclaration;
+}
diff --git a/components/vf-button/vf-button.angular/package.json b/components/vf-button/vf-button.angular/package.json
new file mode 100644
index 0000000000..2a50caf821
--- /dev/null
+++ b/components/vf-button/vf-button.angular/package.json
@@ -0,0 +1,31 @@
+{
+ "name": "vf-button.angular",
+ "version": "0.0.1",
+ "peerDependencies": {
+ "@angular/common": "^15.2.0",
+ "@angular/core": "^15.2.0"
+ },
+ "dependencies": {
+ "tslib": "^2.3.0"
+ },
+ "sideEffects": false,
+ "module": "fesm2015/vf-button.angular.mjs",
+ "es2020": "fesm2020/vf-button.angular.mjs",
+ "esm2020": "esm2020/vf-button.angular.mjs",
+ "fesm2020": "fesm2020/vf-button.angular.mjs",
+ "fesm2015": "fesm2015/vf-button.angular.mjs",
+ "typings": "index.d.ts",
+ "exports": {
+ "./package.json": {
+ "default": "./package.json"
+ },
+ ".": {
+ "types": "./index.d.ts",
+ "esm2020": "./esm2020/vf-button.angular.mjs",
+ "es2020": "./fesm2020/vf-button.angular.mjs",
+ "es2015": "./fesm2015/vf-button.angular.mjs",
+ "node": "./fesm2015/vf-button.angular.mjs",
+ "default": "./fesm2020/vf-button.angular.mjs"
+ }
+ }
+}
\ No newline at end of file
diff --git a/components/vf-button/vf-button.angular/public-api.d.ts b/components/vf-button/vf-button.angular/public-api.d.ts
new file mode 100644
index 0000000000..e354a3c06d
--- /dev/null
+++ b/components/vf-button/vf-button.angular/public-api.d.ts
@@ -0,0 +1,2 @@
+export * from './lib/vf-button.angular.component';
+export * from './lib/vf-button.angular.module';