action-buttons 15.0.6 → 15.0.7

package/README.md

@@ -1,21 +1,543 @@
-# ActionButtons
+# Action Buttons Component
 
-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 15.2.0.
+## Overview
+
+The `action-buttons` library provides a Material Design-based component for displaying action buttons with various configurations including icons, labels, badges, colors, and disabled states. It implements Angular's `ControlValueAccessor` interface for seamless form integration.
+
+### Core Capabilities
+
+#### 🎯 Material Design Button Actions
+
+- **Multiple Display Modes**: Icon-only, labeled buttons, or combination
+- **Badge Support**: Display notification counts with badge overlays
+- **Color Customization**: Apply custom colors to individual buttons
+- **State Management**: Built-in support for disabled states
+- **SVG Icons**: Support for both Material Icons and custom SVG icons
+- **Form Integration**: Implements ControlValueAccessor for reactive forms
+
+#### 🔧 Features
+
+✅ **ControlValueAccessor Implementation** - Works with Angular forms  
+✅ **Material Design Integration** - Uses Angular Material components  
+✅ **Badge Notifications** - Visual notification indicators  
+✅ **Color Customization** - Theme-aware button colors  
+✅ **SVG Icon Support** - Works with Material Icons and custom SVGs  
+✅ **Responsive Design** - Adapts to different screen sizes  
+✅ **Accessibility Ready** - ARIA labels and keyboard navigation  
+
+### Key Benefits
+
+| Feature | Description |
+|---------|-------------|
+| **Form Integration** | Native Angular form control support |
+| **Visual Feedback** | Badge system for notifications/counts |
+| **Flexible Styling** | Color customization and Material Design theming |
+| **Icon Support** | Works with Material Icons and SVG icons |
+| **State Management** | Disabled states and conditional rendering |
+
+---
+
+## Demo Component (`ActionButtonsDemoComponent`)
+
+The demo component showcases various button configurations and states, providing interactive examples of the action buttons functionality.
+
+### Usage
+
+To use the demo component in your application:
 
 ```html
-<div style="margin: 2rem;">
-  <!-- Display Card - Action Buttons -->
-  <app-action-buttons
-    [data]="buttonActions"
-  ></app-action-buttons>
-</div>
+<app-action-buttons-demo></app-action-buttons-demo>
 ```
 
+The demo includes:
+- Phone button (disabled state)
+- Messages button (with badge showing 6 notifications)
+- Alerts button (zero badge state)
+- Different color configurations
+- Disabled and enabled states
+
+---
+
+## Summary
+
+The `action-buttons` library provides a flexible, Material Design-compliant button component for Angular applications with badge support, color customization, and form integration.
+
+---
+
+## Quick Start Guide
+
+### Installation & Setup (2 minutes)
+
+#### 1. Import Module
+
+```typescript
+// app.module.ts
+import { ActionButtonsModule } from 'action-buttons';
+
+@NgModule({
+  imports: [
+    ActionButtonsModule
+  ]
+})
+export class AppModule { }
+```
+
+#### 2. No Module Configuration Required
+
+The `ActionButtonsModule` does not require global configuration. Components can be used immediately after module import.
+
+### Quick Examples
+
+#### Example 1: Basic Button Actions
+
+```typescript
+import { Component } from '@angular/core';
+import { ButtonAction } from 'action-buttons';
 
-```ts
- buttonActions: ButtonAction[] = [
-    { icon: 'dialpad', label: 'Phone', disabled: true},
+@Component({
+  selector: 'app-buttons',
+  template: `
+    <app-action-buttons
+      [data]="buttonActions"
+      [disabled]="isDisabled">
+    </app-action-buttons>
+  `
+})
+export class ButtonsComponent {
+  isDisabled = false;
+
+  buttonActions: ButtonAction[] = [
+    { icon: 'dialpad', label: 'Phone', disabled: true },
     { icon: 'voicemail', label: 'Messages', badge: 6, color: 'orange' },
-    { icon: 'notifications_off', label: 'Alerts', badge: 0 },
+    { icon: 'notifications_off', label: 'Alerts', badge: 0 }
+  ];
+}
+```
+
+#### Example 2: Form Control Integration
+
+```typescript
+import { Component } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { ButtonAction } from 'action-buttons';
+
+@Component({
+  selector: 'app-form-buttons',
+  template: `
+    <app-action-buttons
+      [formControl]="buttonControl"
+      [data]="buttonActions">
+    </app-action-buttons>
+    
+    <div>Selected: {{ buttonControl.value | json }}</div>
+  `
+})
+export class FormButtonsComponent {
+  buttonControl = new FormControl();
+  
+  buttonActions: ButtonAction[] = [
+    { icon: 'edit', label: 'Edit', color: 'primary' },
+    { icon: 'delete', label: 'Delete', color: 'warn' },
+    { icon: 'share', label: 'Share', color: 'accent' }
+  ];
+}
+```
+
+#### Example 3: Dynamic Button States
+
+```typescript
+import { Component } from '@angular/core';
+import { ButtonAction } from 'action-buttons';
+
+@Component({
+  selector: 'app-dynamic-buttons',
+  template: `
+    <div class="button-controls">
+      <button (click)="toggleDisabled()">
+        {{ isDisabled ? 'Enable' : 'Disable' }} Buttons
+      </button>
+      <button (click)="addNotification()">Add Notification</button>
+    </div>
+    
+    <app-action-buttons
+      [data]="buttonActions"
+      [disabled]="isDisabled">
+    </app-action-buttons>
+    
+    <div *ngFor="let action of buttonActions; let i = index">
+      {{ action.label }}: Badge = {{ action.badge || 0 }}
+    </div>
+  `
+})
+export class DynamicButtonsComponent {
+  isDisabled = false;
+  notificationCount = 3;
+
+  buttonActions: ButtonAction[] = [
+    { icon: 'home', label: 'Home' },
+    { icon: 'search', label: 'Search' },
+    { icon: 'notifications', label: 'Notifications', badge: this.notificationCount }
+  ];
+
+  toggleDisabled() {
+    this.isDisabled = !this.isDisabled;
+  }
+
+  addNotification() {
+    this.notificationCount++;
+    this.buttonActions[2].badge = this.notificationCount;
+  }
+}
+```
+
+#### Example 4: Custom Styled Buttons
+
+```typescript
+import { Component } from '@angular/core';
+import { ButtonAction } from 'action-buttons';
+
+@Component({
+  selector: 'app-styled-buttons',
+  template: `
+    <div class="button-groups">
+      <!-- Primary Actions -->
+      <h3>Primary Actions</h3>
+      <app-action-buttons [data]="primaryActions"></app-action-buttons>
+      
+      <!-- Status Actions -->
+      <h3>Status Actions</h3>
+      <app-action-buttons [data]="statusActions"></app-action-buttons>
+      
+      <!-- Icon Only -->
+      <h3>Icon Only</h3>
+      <app-action-buttons [data]="iconOnlyActions"></app-action-buttons>
+    </div>
+  `,
+  styles: [`
+    .button-groups { margin: 2rem; }
+    h3 { margin: 1rem 0 0.5rem; color: #666; }
+  `]
+})
+export class StyledButtonsComponent {
+  primaryActions: ButtonAction[] = [
+    { icon: 'add', label: 'Add', color: 'primary' },
+    { icon: 'edit', label: 'Edit', color: 'primary' },
+    { icon: 'save', label: 'Save', color: 'primary' }
+  ];
+
+  statusActions: ButtonAction[] = [
+    { icon: 'check_circle', label: 'Approved', color: 'green' },
+    { icon: 'warning', label: 'Warning', color: 'orange' },
+    { icon: 'error', label: 'Error', color: 'red' }
+  ];
+
+  iconOnlyActions: ButtonAction[] = [
+    { icon: 'star', label: 'Favorite' },
+    { icon: 'bookmark', label: 'Bookmark' },
+    { icon: 'share', label: 'Share' }
+  ];
+}
+```
+
+---
+
+## Component API
+
+### Inputs
+
+| Input | Type | Description | Default |
+| :--- | :--- | :--- | :--- |
+| `data` | `ButtonAction[]` | Array of button action configurations | `[]` |
+| `disabled` | `boolean` | Whether the entire component is disabled | `false` |
+
+### Outputs
+
+| Output | Type | Description |
+| :--- | :--- | :--- |
+| `selectionChange` | `EventEmitter<any>` | Emits when a button is selected/clicked |
+
+---
+
+## Model Structures
+
+### ButtonAction Interface
+
+```typescript
+export interface ButtonActionInterface {
+  label?: string;        // Button text label
+  icon?: string;         // Material icon name or custom icon
+  disabled?: boolean;    // Individual button disabled state
+  badge?: number;        // Notification badge count (0 or positive number)
+  color?: string;        // Custom color (CSS color value)
+  svg?: boolean;         // Whether icon is SVG format
+}
+```
+
+### ButtonAction Class
+
+```typescript
+export class ButtonAction implements ButtonActionInterface {
+  constructor(
+    public label?: string,
+    public icon?: string,
+    public disabled?: boolean = false,
+    public badge?: number = 0,
+    public color?: string,
+    public svg?: boolean = false
+  ) {}
+
+  static adapt(data?: any): ButtonAction {
+    return new ButtonAction(
+      data?.label,
+      data?.icon,
+      (data?.disabled) ? data.disabled : false,
+      (data?.badge) ? data.badge : 0,
+      data?.color,
+      (data?.svg) ? true : false
+    );
+  }
+}
+```
+
+### Usage Examples
+
+```typescript
+// Basic button configuration
+const basicButton: ButtonAction = new ButtonAction(
+  'Click Me',           // label
+  'touch_app',          // icon
+  false,                // disabled
+  0,                    // badge
+  undefined,            // color
+  false                 // svg
+);
+
+// Using the adapt method
+const adaptedButton = ButtonAction.adapt({
+  label: 'Save',
+  icon: 'save',
+  badge: 5,
+  color: 'accent'
+});
+
+// Configuration with all options
+const fullConfig: ButtonAction[] = [
+  { label: 'Home', icon: 'home', disabled: false, badge: 0 },
+  { label: 'Profile', icon: 'person', color: 'primary' },
+  { label: 'Settings', icon: 'settings', badge: 3, color: 'warn' },
+  { label: 'Custom SVG', icon: 'custom-icon', svg: true }
+];
+```
+
+---
+
+## Module Configuration
+
+### ActionButtonsModule
+
+**No Global Configuration Required**
+
+The `ActionButtonsModule` does not provide a `forRoot()` method or global configuration options. All configuration is done at the component level through input properties.
+
+#### Module Structure
+
+```typescript
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    MatIconModule,
+    MatButtonModule,
+    MatBadgeModule,
+  ],
+  declarations: [
+    ActionButtonsComponent,
+    ActionButtonsDemoComponent,
+  ],
+  exports:[
+    ActionButtonsComponent,
+    ActionButtonsDemoComponent,
   ]
+})
+export class ActionButtonsModule { }
+```
+
+#### Dependencies
+
+- **@angular/common**: Core Angular functionality
+- **@angular/forms**: Form control integration
+- **@angular/material**: Material Design components
+  - MatIconModule: Icon display
+  - MatButtonModule: Button base component
+  - MatBadgeModule: Badge notifications
+
+---
+
+## Styling and Customization
+
+### CSS Classes and Styling
+
+The component uses Material Design styling and can be customized using:
+
+1. **Global Material Theme**: Configure colors in your Angular Material theme
+2. **Component-specific Styles**: Add custom CSS classes
+3. **Color Input**: Use the `color` property for individual button styling
+
+### Example Customization
+
+```scss
+// Custom styles for action buttons
+:host ::ng-deep .action-buttons {
+  .mat-button-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  
+  .button-label {
+    font-size: 0.75rem;
+    margin-top: 4px;
+  }
+  
+  .mat-badge-content {
+    font-size: 0.6rem;
+    font-weight: bold;
+  }
+}
+```
+
+---
+
+## Accessibility
+
+### ARIA Support
+
+- Buttons include proper ARIA labels
+- Keyboard navigation is supported
+- Screen reader friendly with label and icon descriptions
+- Badge notifications include appropriate ARIA live regions
+
+### Best Practices
+
+1. **Provide meaningful labels** for all buttons
+2. **Use appropriate icons** that match the button purpose
+3. **Set badge counts appropriately** for notification indicators
+4. **Consider color contrast** when using custom colors
+5. **Test with screen readers** to ensure accessibility
+
+---
+
+## Integration Examples
+
+### With Other UI Components
+
+```typescript
+// Integration with display-card
+@Component({
+  template: `
+    <app-display-card [title]="'User Actions'">
+      <app-action-buttons [data]="userActions"></app-action-buttons>
+    </app-display-card>
+  `
+})
+export class CardWithActionsComponent {
+  userActions: ButtonAction[] = [
+    { icon: 'edit', label: 'Edit Profile', color: 'primary' },
+    { icon: 'security', label: 'Security', color: 'accent' },
+    { icon: 'notifications', label: 'Notifications', badge: 2 }
+  ];
+}
+```
+
+### With State Management
+
+```typescript
+// Integration with HTTP Request Manager
+@Component({
+  template: `
+    <app-action-buttons 
+      [data]="actionButtons$ | async"
+      (selectionChange)="handleAction($event)">
+    </app-action-buttons>
+  `
+})
+export class StateManagedButtonsComponent {
+  actionButtons$ = this.actionStore.buttons$;
+  
+  constructor(private actionStore: ActionStore) {}
+  
+  handleAction(action: ButtonAction) {
+    this.actionStore.executeAction(action);
+  }
+}
 ```
+
+---
+
+## Testing
+
+### Unit Testing Example
+
+```typescript
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ActionButtonsComponent } from './action-buttons.component';
+import { ButtonAction } from './models/button-action.model';
+
+describe('ActionButtonsComponent', () => {
+  let component: ActionButtonsComponent;
+  let fixture: ComponentFixture<ActionButtonsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ActionButtonsComponent ]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ActionButtonsComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should display buttons from data input', () => {
+    component.data = [
+      { label: 'Test', icon: 'home' }
+    ];
+    fixture.detectChanges();
+    
+    const compiled = fixture.nativeElement;
+    expect(compiled.textContent).toContain('Test');
+  });
+
+  it('should emit selection change when button is clicked', () => {
+    spyOn(component.selectionChange, 'emit');
+    component.data = [{ label: 'Test', icon: 'home' }];
+    fixture.detectChanges();
+    
+    const button = fixture.nativeElement.querySelector('button');
+    button.click();
+    
+    expect(component.selectionChange.emit).toHaveBeenCalled();
+  });
+});
+```
+
+---
+
+## Troubleshooting
+
+### Common Issues
+
+1. **Icons not displaying**: Ensure Material Icons are loaded in your index.html
+2. **Badge not showing**: Make sure MatBadgeModule is imported in your module
+3. **Form control not working**: Verify ReactiveFormsModule is imported
+4. **Colors not applying**: Check that custom colors are valid CSS color values
+
+### Performance Tips
+
+1. **Use OnPush change detection** for better performance with large button arrays
+2. **Implement trackBy** for dynamic button lists
+3. **Avoid frequent data object recreation** to prevent unnecessary re-renders
+4. **Use immutable data patterns** for button action updates

package/fesm2022/action-buttons.mjs

@@ -0,0 +1,133 @@
+import * as i0 from '@angular/core';
+import { forwardRef, Input, Component, NgModule } from '@angular/core';
+import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i2 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i3 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i4 from '@angular/material/badge';
+import { MatBadgeModule } from '@angular/material/badge';
+
+class ActionButtonsComponent {
+    constructor() {
+        this._data = [];
+        this.disabled = false;
+        this.onChange = () => { };
+        this.onTouch = () => { };
+        this.icon = (item) => (item?.icon) ? item?.icon : '';
+    }
+    set data(value) {
+        this._data = value || [];
+    }
+    get data() {
+        return this._data;
+    }
+    ngOnInit() {
+    }
+    writeValue(value) {
+        console.log('writeValue', value);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouch = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    onSelected(event) {
+        this.onChange(event);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ActionButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ActionButtonsComponent, selector: "app-action-buttons", inputs: { data: "data", disabled: "disabled" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => ActionButtonsComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<div style=\"display: flex; gap: .5rem; padding-top: .4rem;\">\n  <ng-container *ngFor=\"let item of data\">\n    <div style=\"align-content: space-evenly;\">\n      <button\n        class=\"btn\"\n        *ngIf=\"item?.label; else ICON\"\n        mat-stroked-button\n        [disabled]=\"item.disabled || disabled\"\n        [matBadge]=\"(item.badge && item.badge > 0) ? item.badge : ''\"\n        [color]=\"item.color\"\n        (click)=\"onSelected(item)\"\n        >\n        <mat-icon *ngIf=\"!item.svg; else SVG\">\n        {{ item.icon }}\n        </mat-icon>\n        <ng-template #SVG>\n          <mat-icon [svgIcon]=\"icon(item)\"></mat-icon>\n        </ng-template>\n        {{ item.label }}\n      </button>\n    </div>\n    <ng-template #ICON>\n      <button\n        mat-icon-button\n        [disabled]=\"item.disabled || disabled\"\n        [matBadge]=\"(item.badge && item.badge > 0) ? item.badge : ''\"\n        [color]=\"item.color\"\n        (click)=\"onSelected(item)\"\n      >\n        <mat-icon *ngIf=\"!item.svg; else SVG\">\n          {{ item.icon }}\n        </mat-icon>\n        <ng-template #SVG>\n          <mat-icon [svgIcon]=\"icon(item)\"></mat-icon>\n        </ng-template>\n\n      </button>\n    </ng-template>\n  </ng-container>\n</div>\n", styles: [".btn{min-width:120px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i4.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ActionButtonsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-action-buttons', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ActionButtonsComponent),
+                            multi: true,
+                        },
+                    ], standalone: false, template: "<div style=\"display: flex; gap: .5rem; padding-top: .4rem;\">\n  <ng-container *ngFor=\"let item of data\">\n    <div style=\"align-content: space-evenly;\">\n      <button\n        class=\"btn\"\n        *ngIf=\"item?.label; else ICON\"\n        mat-stroked-button\n        [disabled]=\"item.disabled || disabled\"\n        [matBadge]=\"(item.badge && item.badge > 0) ? item.badge : ''\"\n        [color]=\"item.color\"\n        (click)=\"onSelected(item)\"\n        >\n        <mat-icon *ngIf=\"!item.svg; else SVG\">\n        {{ item.icon }}\n        </mat-icon>\n        <ng-template #SVG>\n          <mat-icon [svgIcon]=\"icon(item)\"></mat-icon>\n        </ng-template>\n        {{ item.label }}\n      </button>\n    </div>\n    <ng-template #ICON>\n      <button\n        mat-icon-button\n        [disabled]=\"item.disabled || disabled\"\n        [matBadge]=\"(item.badge && item.badge > 0) ? item.badge : ''\"\n        [color]=\"item.color\"\n        (click)=\"onSelected(item)\"\n      >\n        <mat-icon *ngIf=\"!item.svg; else SVG\">\n          {{ item.icon }}\n        </mat-icon>\n        <ng-template #SVG>\n          <mat-icon [svgIcon]=\"icon(item)\"></mat-icon>\n        </ng-template>\n\n      </button>\n    </ng-template>\n  </ng-container>\n</div>\n", styles: [".btn{min-width:120px}\n"] }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }] } });
+
+class ActionButtonsDemoComponent {
+    constructor() {
+        this.buttonActions = [
+            { icon: 'dialpad', label: 'Phone', disabled: true },
+            { icon: 'voicemail', label: 'Messages', badge: 6, color: 'orange' },
+            { icon: 'notifications_off', label: 'Alerts', badge: 0 },
+        ];
+    }
+    ngOnInit() {
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ActionButtonsDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ActionButtonsDemoComponent, selector: "app-action-buttons-demo", ngImport: i0, template: "<h1>\n  Action Buttons\n</h1>\n\n  <!-- Display Card - Action Buttons -->\n  <app-action-buttons\n    [data]=\"buttonActions\"\n  ></app-action-buttons>\n", styles: [""], dependencies: [{ kind: "component", type: ActionButtonsComponent, selector: "app-action-buttons", inputs: ["data", "disabled"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ActionButtonsDemoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-action-buttons-demo', standalone: false, template: "<h1>\n  Action Buttons\n</h1>\n\n  <!-- Display Card - Action Buttons -->\n  <app-action-buttons\n    [data]=\"buttonActions\"\n  ></app-action-buttons>\n" }]
+        }], ctorParameters: () => [] });
+
+class ActionButtonsModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ActionButtonsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: ActionButtonsModule, declarations: [ActionButtonsComponent,
+            ActionButtonsDemoComponent], imports: [CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            MatIconModule,
+            MatButtonModule,
+            MatBadgeModule], exports: [ActionButtonsComponent,
+            ActionButtonsDemoComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ActionButtonsModule, imports: [CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            MatIconModule,
+            MatButtonModule,
+            MatBadgeModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ActionButtonsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        MatIconModule,
+                        MatButtonModule,
+                        MatBadgeModule,
+                    ],
+                    declarations: [
+                        ActionButtonsComponent,
+                        ActionButtonsDemoComponent,
+                    ], exports: [
+                        ActionButtonsComponent,
+                        ActionButtonsDemoComponent,
+                    ]
+                }]
+        }] });
+
+/*
+ * Public API Surface of action-buttons
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ActionButtonsComponent, ActionButtonsDemoComponent, ActionButtonsModule };
+//# sourceMappingURL=action-buttons.mjs.map

package/fesm2022/action-buttons.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-buttons.mjs","sources":["../../../projects/action-buttons/src/lib/action-buttons.component.ts","../../../projects/action-buttons/src/lib/action-buttons.component.html","../../../projects/action-buttons/src/lib/action-buttons-demo/action-buttons-demo.component.ts","../../../projects/action-buttons/src/lib/action-buttons-demo/action-buttons-demo.component.html","../../../projects/action-buttons/src/lib/action-buttons.module.ts","../../../projects/action-buttons/src/public-api.ts","../../../projects/action-buttons/src/action-buttons.ts"],"sourcesContent":["import { Component, Input, OnInit, forwardRef } from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { ButtonAction } from './models';\n\n@Component({\n    selector: 'app-action-buttons',\n    templateUrl: './action-buttons.component.html',\n    styleUrls: ['./action-buttons.component.scss'],\n    providers: [\n        {\n            provide: NG_VALUE_ACCESSOR,\n            useExisting: forwardRef(() => ActionButtonsComponent),\n            multi: true,\n        },\n    ],\n    standalone: false\n})\nexport class ActionButtonsComponent implements OnInit, ControlValueAccessor {\n\n  _data: ButtonAction[] = []\n  @Input() set data(value: ButtonAction[]) {\n    this._data = value || []\n  }\n\n  get data() {\n    return this._data\n  }\n\n  @Input() disabled = false\n\n  onChange: any = () => {};\n  onTouch: any = () => {};\n\n  icon = (item: ButtonAction) => (item?.icon) ? item?.icon : ''\n\n  ngOnInit() {\n  }\n\n  writeValue(value: string) {\n    console.log('writeValue', value)\n  }\n\n  registerOnChange(fn: any) {\n    this.onChange = fn\n  }\n\n  registerOnTouched(fn: any) {\n    this.onTouch = fn\n  }\n\n  setDisabledState?(isDisabled: boolean) {\n    this.disabled = isDisabled\n  }\n\n  onSelected(event: any) {\n    this.onChange(event)\n  }\n\n}\n","<div style=\"display: flex; gap: .5rem; padding-top: .4rem;\">\n  <ng-container *ngFor=\"let item of data\">\n    <div style=\"align-content: space-evenly;\">\n      <button\n        class=\"btn\"\n        *ngIf=\"item?.label; else ICON\"\n        mat-stroked-button\n        [disabled]=\"item.disabled || disabled\"\n        [matBadge]=\"(item.badge && item.badge > 0) ? item.badge : ''\"\n        [color]=\"item.color\"\n        (click)=\"onSelected(item)\"\n        >\n        <mat-icon *ngIf=\"!item.svg; else SVG\">\n        {{ item.icon }}\n        </mat-icon>\n        <ng-template #SVG>\n          <mat-icon [svgIcon]=\"icon(item)\"></mat-icon>\n        </ng-template>\n        {{ item.label }}\n      </button>\n    </div>\n    <ng-template #ICON>\n      <button\n        mat-icon-button\n        [disabled]=\"item.disabled || disabled\"\n        [matBadge]=\"(item.badge && item.badge > 0) ? item.badge : ''\"\n        [color]=\"item.color\"\n        (click)=\"onSelected(item)\"\n      >\n        <mat-icon *ngIf=\"!item.svg; else SVG\">\n          {{ item.icon }}\n        </mat-icon>\n        <ng-template #SVG>\n          <mat-icon [svgIcon]=\"icon(item)\"></mat-icon>\n        </ng-template>\n\n      </button>\n    </ng-template>\n  </ng-container>\n</div>\n","import { Component, OnInit } from '@angular/core';\nimport { ButtonAction } from '../models';\n\n@Component({\n    selector: 'app-action-buttons-demo',\n    templateUrl: './action-buttons-demo.component.html',\n    styleUrls: ['./action-buttons-demo.component.css'],\n    standalone: false\n})\nexport class ActionButtonsDemoComponent implements OnInit {\n\n  buttonActions: ButtonAction[] = [\n    { icon: 'dialpad', label: 'Phone', disabled: true},\n    { icon: 'voicemail', label: 'Messages', badge: 6, color: 'orange' },\n    { icon: 'notifications_off', label: 'Alerts', badge: 0 },\n  ]\n\n  constructor() { }\n\n  ngOnInit() {\n  }\n\n}\n","<h1>\n  Action Buttons\n</h1>\n\n  <!-- Display Card - Action Buttons -->\n  <app-action-buttons\n    [data]=\"buttonActions\"\n  ></app-action-buttons>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { ActionButtonsComponent } from './action-buttons.component';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatBadgeModule } from '@angular/material/badge';\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\n\nimport { ActionButtonsDemoComponent } from './action-buttons-demo/action-buttons-demo.component';\n\n@NgModule({\n  imports: [\n    CommonModule,\n    FormsModule,\n    ReactiveFormsModule,\n    MatIconModule,\n    MatButtonModule,\n    MatBadgeModule,\n  ],\n  declarations: [\n    ActionButtonsComponent,\n    ActionButtonsDemoComponent,\n  ], exports:[\n    ActionButtonsComponent,\n    ActionButtonsDemoComponent,\n  ]\n})\nexport class ActionButtonsModule { }\n","/*\n * Public API Surface of action-buttons\n */\n\nexport * from './lib/action-buttons.component';\nexport * from './lib/action-buttons.module';\n\nexport * from './lib/action-buttons-demo/action-buttons-demo.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i1.ActionButtonsComponent"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "action-buttons",
-  "version": "15.0.6",
+  "version": "15.0.7",
   "homepage": "https://wavecoders.ca",
   "author": "Mike Bonifacio <wavecoders@gmail.com> (http://wavecoders@gmail.com/)",
   "description": "This is an Angular Module containing Components/Services using Material",
@@ -22,5 +22,16 @@
   "dest": "../../dist/action-buttons",
   "lib": {
     "entryFile": "src/public-api.ts"
+  },
+  "module": "fesm2022/action-buttons.mjs",
+  "typings": "types/action-buttons.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/action-buttons.d.ts",
+      "default": "./fesm2022/action-buttons.mjs"
+    }
   }
 }

package/types/action-buttons.d.ts

@@ -0,0 +1,61 @@
+import * as i0 from '@angular/core';
+import { OnInit } from '@angular/core';
+import * as i4 from '@angular/forms';
+import { ControlValueAccessor } from '@angular/forms';
+import * as i3 from '@angular/common';
+import * as i5 from '@angular/material/icon';
+import * as i6 from '@angular/material/button';
+import * as i7 from '@angular/material/badge';
+
+interface ButtonActionInterface {
+    label?: string;
+    icon?: string;
+    disabled?: boolean;
+    badge?: number;
+    color?: string;
+    svg?: boolean;
+}
+declare class ButtonAction implements ButtonActionInterface {
+    label?: string | undefined;
+    icon?: string | undefined;
+    disabled?: boolean | undefined;
+    badge?: number | undefined;
+    color?: string | undefined;
+    svg?: boolean | undefined;
+    constructor(label?: string | undefined, icon?: string | undefined, disabled?: boolean | undefined, badge?: number | undefined, color?: string | undefined, svg?: boolean | undefined);
+    static adapt(data?: any): ButtonAction;
+}
+
+declare class ActionButtonsComponent implements OnInit, ControlValueAccessor {
+    _data: ButtonAction[];
+    set data(value: ButtonAction[]);
+    get data(): ButtonAction[];
+    disabled: boolean;
+    onChange: any;
+    onTouch: any;
+    icon: (item: ButtonAction) => string;
+    ngOnInit(): void;
+    writeValue(value: string): void;
+    registerOnChange(fn: any): void;
+    registerOnTouched(fn: any): void;
+    setDisabledState?(isDisabled: boolean): void;
+    onSelected(event: any): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ActionButtonsComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ActionButtonsComponent, "app-action-buttons", never, { "data": { "alias": "data"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, never, false, never>;
+}
+
+declare class ActionButtonsDemoComponent implements OnInit {
+    buttonActions: ButtonAction[];
+    constructor();
+    ngOnInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ActionButtonsDemoComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ActionButtonsDemoComponent, "app-action-buttons-demo", never, {}, {}, never, never, false, never>;
+}
+
+declare class ActionButtonsModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<ActionButtonsModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ActionButtonsModule, [typeof ActionButtonsComponent, typeof ActionButtonsDemoComponent], [typeof i3.CommonModule, typeof i4.FormsModule, typeof i4.ReactiveFormsModule, typeof i5.MatIconModule, typeof i6.MatButtonModule, typeof i7.MatBadgeModule], [typeof ActionButtonsComponent, typeof ActionButtonsDemoComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<ActionButtonsModule>;
+}
+
+export { ActionButtonsComponent, ActionButtonsDemoComponent, ActionButtonsModule };

package/ng-package.json

@@ -1,7 +0,0 @@
-{
-  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../dist/action-buttons",
-  "lib": {
-    "entryFile": "src/public-api.ts"
-  }
-}

package/src/lib/action-buttons-demo/action-buttons-demo.component.html

@@ -1,8 +0,0 @@
-<h1>
-  Action Buttons
-</h1>
-
-  <!-- Display Card - Action Buttons -->
-  <app-action-buttons
-    [data]="buttonActions"
-  ></app-action-buttons>

package/src/lib/action-buttons-demo/action-buttons-demo.component.ts

@@ -1,22 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { ButtonAction } from '../models';
-
-@Component({
-  selector: 'app-action-buttons-demo',
-  templateUrl: './action-buttons-demo.component.html',
-  styleUrls: ['./action-buttons-demo.component.css']
-})
-export class ActionButtonsDemoComponent implements OnInit {
-
-  buttonActions: ButtonAction[] = [
-    { icon: 'dialpad', label: 'Phone', disabled: true},
-    { icon: 'voicemail', label: 'Messages', badge: 6, color: 'orange' },
-    { icon: 'notifications_off', label: 'Alerts', badge: 0 },
-  ]
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-}

package/src/lib/action-buttons.component.html

@@ -1,40 +0,0 @@
-<div style="display: flex; gap: .5rem; padding-top: .4rem;">
-  <ng-container *ngFor="let item of data">
-    <div style="align-content: space-evenly;">
-      <button
-        class="btn"
-        *ngIf="item?.label; else ICON"
-        mat-stroked-button
-        [disabled]="item.disabled || disabled"
-        [matBadge]="(item.badge && item.badge > 0) ? item.badge : ''"
-        [color]="item.color"
-        (click)="onSelected(item)"
-        >
-        <mat-icon *ngIf="!item.svg; else SVG">
-        {{ item.icon }}
-        </mat-icon>
-        <ng-template #SVG>
-          <mat-icon [svgIcon]="icon(item)"></mat-icon>
-        </ng-template>
-        {{ item.label }}
-      </button>
-    </div>
-    <ng-template #ICON>
-      <button
-        mat-icon-button
-        [disabled]="item.disabled || disabled"
-        [matBadge]="(item.badge && item.badge > 0) ? item.badge : ''"
-        [color]="item.color"
-        (click)="onSelected(item)"
-      >
-        <mat-icon *ngIf="!item.svg; else SVG">
-          {{ item.icon }}
-        </mat-icon>
-        <ng-template #SVG>
-          <mat-icon [svgIcon]="icon(item)"></mat-icon>
-        </ng-template>
-
-      </button>
-    </ng-template>
-  </ng-container>
-</div>

package/src/lib/action-buttons.component.scss

@@ -1,3 +0,0 @@
-.btn {
-  min-width: 120px;
-}

package/src/lib/action-buttons.component.spec.ts

@@ -1,91 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { ActionButtonsComponent } from './action-buttons.component';
-import { ButtonAction } from './models';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { Component, Input, NgModule } from '@angular/core';
-import { MatBadgeModule } from '@angular/material/badge';
-import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
-import { CommonModule } from '@angular/common';
-
-// Create a dummy component to simulate the icon
-@Component({
-  selector: 'mat-icon',
-  template: '<span>{{ icon }}</span>'
-})
-class MockMatIconComponent {
-  @Input() icon: string | undefined;
-}
-
-// Create a dummy demo component
-@Component({
-  selector: 'app-action-buttons-demo',
-  template: '<app-action-buttons></app-action-buttons>'
-})
-class ActionButtonsDemoComponent {}
-
-@NgModule({
-  declarations: [ActionButtonsComponent, MockMatIconComponent, ActionButtonsDemoComponent],
-  exports: [ActionButtonsComponent, ActionButtonsDemoComponent],
-  imports: [
-    CommonModule,
-    FormsModule,
-    ReactiveFormsModule,
-    MatIconModule,
-    MatButtonModule,
-    MatBadgeModule,
-  ]
-})
-class TestModule {}
-
-describe('ActionButtonsComponent', () => {
-  let component: ActionButtonsComponent;
-  let fixture: ComponentFixture<ActionButtonsComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [TestModule]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(ActionButtonsComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should initialize with an empty data array', () => {
-    expect(component.data).toEqual([]);
-  });
-
-  it('should update the data array when the data input changes', () => {
-    const mockData: ButtonAction[] = [
-      { label: 'Action 1'},
-      { label: 'Action 2'}
-    ];
-    component.data = mockData;
-    expect(component.data).toEqual(mockData);
-  });
-
-  it('should emit the selected value when onSelected is called', () => {
-    const selectedValue = 'action1';
-    spyOn(component, 'onChange');
-    component.onSelected(selectedValue);
-    expect(component.onChange).toHaveBeenCalledWith(selectedValue);
-  });
-
-  it('should return an empty string when icon is not defined', () => {
-    const item: ButtonAction = { label: 'Action 1'};
-    expect(component.icon(item)).toBe('');
-  });
-
-  it('should return the icon string when icon is defined', () => {
-    const item: ButtonAction = { label: 'Action 1', icon: 'some-icon' };
-    expect(component.icon(item)).toBe('some-icon');
-  });
-});

package/src/lib/action-buttons.component.ts

@@ -1,60 +0,0 @@
-import { Component, Input, OnInit, forwardRef } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { ButtonAction } from './models';
-
-@Component({
-  selector: 'app-action-buttons',
-  templateUrl: './action-buttons.component.html',
-  styleUrls: ['./action-buttons.component.scss'],
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => ActionButtonsComponent),
-      multi: true,
-    },
-  ],
-})
-export class ActionButtonsComponent implements OnInit, ControlValueAccessor {
-
-  _data: ButtonAction[] = []
-  @Input() set data(value: ButtonAction[]) {
-    this._data = value || []
-  }
-
-  get data() {
-    return this._data
-  }
-
-  @Input() disabled = false
-
-  onChange: any = () => {};
-  onTouch: any = () => {};
-
-  icon = (item: ButtonAction) => (item?.icon) ? item?.icon : ''
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-  writeValue(value: string) {
-    // call patchValue on the form
-  }
-
-  registerOnChange(fn: any) {
-    this.onChange = fn
-  }
-
-  registerOnTouched(fn: any) {
-    this.onTouch = fn
-  }
-
-  setDisabledState?(isDisabled: boolean) {
-    this.disabled = isDisabled
-  }
-
-  onSelected(event: any) {
-    this.onChange(event)
-  }
-
-}

package/src/lib/action-buttons.module.ts

@@ -1,29 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-import { ActionButtonsComponent } from './action-buttons.component';
-import { MatIconModule } from '@angular/material/icon';
-import { MatButtonModule } from '@angular/material/button';
-import { MatBadgeModule } from '@angular/material/badge';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-
-import { ActionButtonsDemoComponent } from './action-buttons-demo/action-buttons-demo.component';
-
-@NgModule({
-  imports: [
-    CommonModule,
-    FormsModule,
-    ReactiveFormsModule,
-    MatIconModule,
-    MatButtonModule,
-    MatBadgeModule,
-  ],
-  declarations: [
-    ActionButtonsComponent,
-    ActionButtonsDemoComponent,
-  ], exports:[
-    ActionButtonsComponent,
-    ActionButtonsDemoComponent,
-  ]
-})
-export class ActionButtonsModule { }

package/src/lib/models/button-action.model.spec.ts

@@ -1,66 +0,0 @@
-import { ButtonAction } from './button-action.model';
-
-describe('ButtonAction', () => {
-  it('should create an instance', () => {
-    const buttonAction = new ButtonAction();
-    expect(buttonAction).toBeTruthy();
-  });
-
-  it('should set properties correctly', () => {
-    const label = 'Submit';
-    const icon = 'check';
-    const disabled = true;
-    const badge = 5;
-    const color = 'primary';
-    const svg = true;
-
-    const buttonAction = new ButtonAction(label, icon, disabled, badge, color, svg);
-
-    expect(buttonAction.label).toEqual(label);
-    expect(buttonAction.icon).toEqual(icon);
-    expect(buttonAction.disabled).toEqual(disabled);
-    expect(buttonAction.badge).toEqual(badge);
-    expect(buttonAction.color).toEqual(color);
-    expect(buttonAction.svg).toEqual(svg);
-  });
-
-  it('should adapt data correctly with truthy values', () => {
-    const data = {
-      label: 'Cancel',
-      icon: 'close',
-      disabled: true,
-      badge: 1,
-      color: 'secondary',
-      svg: true
-    };
-
-    const buttonAction = ButtonAction.adapt(data);
-
-    expect(buttonAction.label).toEqual(data.label);
-    expect(buttonAction.icon).toEqual(data.icon);
-    expect(buttonAction.disabled).toEqual(data.disabled);
-    expect(buttonAction.badge).toEqual(data.badge);
-    expect(buttonAction.color).toEqual(data.color);
-    expect(buttonAction.svg).toEqual(data.svg);
-  });
-
-  it('should adapt data correctly with falsey values', () => {
-    const data = {
-      label: 'Cancel',
-      icon: 'close',
-      disabled: false,
-      badge: 0,
-      color: 'secondary',
-      svg: false
-    };
-
-    const buttonAction = ButtonAction.adapt(data);
-
-    expect(buttonAction.label).toEqual(data.label);
-    expect(buttonAction.icon).toEqual(data.icon);
-    expect(buttonAction.disabled).toEqual(data.disabled);
-    expect(buttonAction.badge).toEqual(data.badge);
-    expect(buttonAction.color).toEqual(data.color);
-    expect(buttonAction.svg).toEqual(data.svg);
-  });
-});

package/src/lib/models/button-action.model.ts

@@ -1,30 +0,0 @@
-export interface ButtonActionInterface {
-  label?: string;
-  icon?: string;
-  disabled?: boolean;
-  badge?: number;
-  color?: string;
-  svg?: boolean
-}
-
-export class ButtonAction implements ButtonActionInterface {
-  constructor(
-    public label?: string,
-    public icon?: string,
-    public disabled?: boolean,
-    public badge?: number,
-    public color?: string,
-    public svg?: boolean
-  ) {}
-
-  static adapt(data?: any): ButtonAction {
-    return new ButtonAction(
-      data?.label,
-      data?.icon,
-      (data?.disabled) ? data.disabled : false,
-      (data?.badge) ? data.badge : 0,
-      data?.color,
-      (data?.svg) ? true : false
-    );
-  }
-}

package/src/lib/models/index.ts

@@ -1,6 +0,0 @@
-/*
- * Public API Surface of dynamic-dialog
- */
-
-export * from './button-action.model';
-

package/src/public-api.ts

@@ -1,8 +0,0 @@
-/*
- * Public API Surface of action-buttons
- */
-
-export * from './lib/action-buttons.component';
-export * from './lib/action-buttons.module';
-
-export * from './lib/action-buttons-demo/action-buttons-demo.component';

package/tsconfig.lib.json

@@ -1,32 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../dist/action-buttons",
-    "declaration": true,
-    "declarationMap": true,
-    "inlineSources": true,
-    "types": [],
-    "baseUrl": "./",
-    "paths": {
-      "@angular/*": ["node_modules/@angular/*"],
-      "action-buttons": ["node_modules/action-buttons"]
-    },
-    "target": "es2019",
-    "lib": [
-      "dom",
-      "es2019"
-    ]
-  },
-  "angularCompilerOptions": {
-    "skipTemplateCodegen": true,
-    "strictMetadataEmit": true,
-    "enableResourceInlining": true,
-    "strictInjectionParameters": true,
-    "strictTemplates": true
-  },
-  "exclude": [
-    "src/test.ts",
-    "**/*.spec.ts"
-  ]
-}

package/tsconfig.lib.prod.json

@@ -1,10 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "extends": "./tsconfig.lib.json",
-  "compilerOptions": {
-    "declarationMap": false
-  },
-  "angularCompilerOptions": {
-    "compilationMode": "partial"
-  }
-}

package/tsconfig.spec.json

@@ -1,14 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../out-tsc/spec",
-    "types": [
-      "jasmine"
-    ]
-  },
-  "include": [
-    "**/*.spec.ts",
-    "**/*.d.ts"
-  ]
-}