sn-checkbox-x 0.0.1 → 0.0.2

package/fesm2022/sn-checkbox-x.mjs

@@ -0,0 +1,85 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, forwardRef, booleanAttribute, Output, Input, Component } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+class SnCheckboxXComponent {
+    constructor() {
+        this.id = '';
+        this.label = '';
+        this.name = '';
+        this.disabled = false;
+        this.indeterminate = false;
+        this.changed = new EventEmitter();
+        this.checked = false;
+        this.onChange = () => { };
+        this.onTouched = () => { };
+    }
+    onCheckboxChange(event) {
+        const target = event.target;
+        this.checked = target.checked;
+        this.indeterminate = false;
+        this.onChange(this.checked);
+        this.changed.emit(this.checked);
+    }
+    onBlur() {
+        this.onTouched();
+    }
+    // ControlValueAccessor implementation
+    writeValue(value) {
+        this.checked = value ?? false;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SnCheckboxXComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.0", type: SnCheckboxXComponent, isStandalone: true, selector: "sn-checkbox-x", inputs: { id: "id", label: "label", name: "name", disabled: ["disabled", "disabled", booleanAttribute], indeterminate: ["indeterminate", "indeterminate", booleanAttribute] }, outputs: { changed: "changed" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => SnCheckboxXComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<div class=\"sn-checkbox-wrapper\">\n  <input\n    type=\"checkbox\"\n    class=\"sn-checkbox-input\"\n    [id]=\"id\"\n    [name]=\"name\"\n    [checked]=\"checked\"\n    [disabled]=\"disabled\"\n    [indeterminate]=\"indeterminate\"\n    (change)=\"onCheckboxChange($event)\"\n    (blur)=\"onBlur()\"\n    aria-role=\"checkbox\"\n    [attr.aria-checked]=\"indeterminate ? 'mixed' : checked\"\n    [attr.aria-label]=\"label\"\n  />\n  <label class=\"sn-checkbox-label\" [attr.for]=\"id\" *ngIf=\"label\">\n    {{ label }}\n  </label>\n</div>\n\n", styles: ["@charset \"UTF-8\";.sn-checkbox-wrapper{display:flex;align-items:center;gap:.5rem;-webkit-user-select:none;user-select:none}.sn-checkbox-input{width:1.25rem;height:1.25rem;cursor:pointer;appearance:none;border:2px solid #d1d5db;border-radius:.375rem;background-color:#fff;transition:all .2s ease-in-out}.sn-checkbox-input:hover:not(:disabled):not(:checked){border-color:#3b82f6;background-color:#f0f9ff}.sn-checkbox-input:checked{background-color:#3b82f6;border-color:#3b82f6;position:relative}.sn-checkbox-input:checked:hover:not(:disabled){background-color:#2563eb}.sn-checkbox-input:checked:after{content:\"\\2713\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:.875rem;font-weight:700}.sn-checkbox-input:indeterminate{background-color:#3b82f6;border-color:#3b82f6;position:relative}.sn-checkbox-input:indeterminate:after{content:\"\\2212\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:1rem;font-weight:700}.sn-checkbox-input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.sn-checkbox-input:disabled{cursor:not-allowed;opacity:.5;background-color:#f3f4f6;border-color:#e5e7eb}.sn-checkbox-input:disabled:checked{background-color:#9ca3af;border-color:#9ca3af}.sn-checkbox-label{cursor:pointer;font-size:.875rem;line-height:1.25rem;color:#374151;transition:color .2s ease-in-out}.sn-checkbox-input:disabled~.sn-checkbox-label{opacity:.5;cursor:not-allowed}.sn-checkbox-label:hover{color:#1f2937}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SnCheckboxXComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sn-checkbox-x', standalone: true, imports: [CommonModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SnCheckboxXComponent),
+                            multi: true,
+                        },
+                    ], template: "<div class=\"sn-checkbox-wrapper\">\n  <input\n    type=\"checkbox\"\n    class=\"sn-checkbox-input\"\n    [id]=\"id\"\n    [name]=\"name\"\n    [checked]=\"checked\"\n    [disabled]=\"disabled\"\n    [indeterminate]=\"indeterminate\"\n    (change)=\"onCheckboxChange($event)\"\n    (blur)=\"onBlur()\"\n    aria-role=\"checkbox\"\n    [attr.aria-checked]=\"indeterminate ? 'mixed' : checked\"\n    [attr.aria-label]=\"label\"\n  />\n  <label class=\"sn-checkbox-label\" [attr.for]=\"id\" *ngIf=\"label\">\n    {{ label }}\n  </label>\n</div>\n\n", styles: ["@charset \"UTF-8\";.sn-checkbox-wrapper{display:flex;align-items:center;gap:.5rem;-webkit-user-select:none;user-select:none}.sn-checkbox-input{width:1.25rem;height:1.25rem;cursor:pointer;appearance:none;border:2px solid #d1d5db;border-radius:.375rem;background-color:#fff;transition:all .2s ease-in-out}.sn-checkbox-input:hover:not(:disabled):not(:checked){border-color:#3b82f6;background-color:#f0f9ff}.sn-checkbox-input:checked{background-color:#3b82f6;border-color:#3b82f6;position:relative}.sn-checkbox-input:checked:hover:not(:disabled){background-color:#2563eb}.sn-checkbox-input:checked:after{content:\"\\2713\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:.875rem;font-weight:700}.sn-checkbox-input:indeterminate{background-color:#3b82f6;border-color:#3b82f6;position:relative}.sn-checkbox-input:indeterminate:after{content:\"\\2212\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:1rem;font-weight:700}.sn-checkbox-input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.sn-checkbox-input:disabled{cursor:not-allowed;opacity:.5;background-color:#f3f4f6;border-color:#e5e7eb}.sn-checkbox-input:disabled:checked{background-color:#9ca3af;border-color:#9ca3af}.sn-checkbox-label{cursor:pointer;font-size:.875rem;line-height:1.25rem;color:#374151;transition:color .2s ease-in-out}.sn-checkbox-input:disabled~.sn-checkbox-label{opacity:.5;cursor:not-allowed}.sn-checkbox-label:hover{color:#1f2937}\n"] }]
+        }], propDecorators: { id: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], disabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], indeterminate: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], changed: [{
+                type: Output
+            }] } });
+
+/*
+ * Public API Surface of sn-checkbox-x
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SnCheckboxXComponent };
+//# sourceMappingURL=sn-checkbox-x.mjs.map

package/fesm2022/sn-checkbox-x.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"sn-checkbox-x.mjs","sources":["../../../projects/sn-checkbox-x/src/lib/sn-checkbox-x.ts","../../../projects/sn-checkbox-x/src/lib/sn-checkbox-x.html","../../../projects/sn-checkbox-x/src/public-api.ts","../../../projects/sn-checkbox-x/src/sn-checkbox-x.ts"],"sourcesContent":["import { Component, Input, Output, EventEmitter, forwardRef, booleanAttribute } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\n@Component({\n  selector: 'sn-checkbox-x',\n  standalone: true,\n  imports: [CommonModule],\n  templateUrl: './sn-checkbox-x.html',\n  styleUrl: './sn-checkbox-x.scss',\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => SnCheckboxXComponent),\n      multi: true,\n    },\n  ],\n})\nexport class SnCheckboxXComponent implements ControlValueAccessor {\n  @Input() id: string = '';\n  @Input() label: string = '';\n  @Input() name: string = '';\n  @Input({ transform: booleanAttribute }) disabled: boolean = false;\n  @Input({ transform: booleanAttribute }) indeterminate: boolean = false;\n  @Output() changed = new EventEmitter<boolean>();\n\n  checked: boolean = false;\n  private onChange: (value: boolean) => void = () => {};\n  private onTouched: () => void = () => {};\n\n  onCheckboxChange(event: Event): void {\n    const target = event.target as HTMLInputElement;\n    this.checked = target.checked;\n    this.indeterminate = false;\n    this.onChange(this.checked);\n    this.changed.emit(this.checked);\n  }\n\n  onBlur(): void {\n    this.onTouched();\n  }\n\n  // ControlValueAccessor implementation\n  writeValue(value: boolean): void {\n    this.checked = value ?? false;\n  }\n\n  registerOnChange(fn: (value: boolean) => void): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.disabled = isDisabled;\n  }\n}\n","<div class=\"sn-checkbox-wrapper\">\n  <input\n    type=\"checkbox\"\n    class=\"sn-checkbox-input\"\n    [id]=\"id\"\n    [name]=\"name\"\n    [checked]=\"checked\"\n    [disabled]=\"disabled\"\n    [indeterminate]=\"indeterminate\"\n    (change)=\"onCheckboxChange($event)\"\n    (blur)=\"onBlur()\"\n    aria-role=\"checkbox\"\n    [attr.aria-checked]=\"indeterminate ? 'mixed' : checked\"\n    [attr.aria-label]=\"label\"\n  />\n  <label class=\"sn-checkbox-label\" [attr.for]=\"id\" *ngIf=\"label\">\n    {{ label }}\n  </label>\n</div>\n\n","/*\n * Public API Surface of sn-checkbox-x\n */\n\nexport * from './lib/sn-checkbox-x';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sn-checkbox-x",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Angular checkbox component with indeterminate state support - SnUI Library",
   "author": {
     "name": "Swapnil Nakate",
@@ -34,5 +34,16 @@
     "type": "git",
     "directory": "projects/sn-checkbox"
   },
-  "license": "MIT"
-}
+  "license": "MIT",
+  "module": "fesm2022/sn-checkbox-x.mjs",
+  "typings": "types/sn-checkbox-x.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/sn-checkbox-x.d.ts",
+      "default": "./fesm2022/sn-checkbox-x.mjs"
+    }
+  }
+}

package/types/sn-checkbox-x.d.ts

@@ -0,0 +1,27 @@
+import * as i0 from '@angular/core';
+import { EventEmitter } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+
+declare class SnCheckboxXComponent implements ControlValueAccessor {
+    id: string;
+    label: string;
+    name: string;
+    disabled: boolean;
+    indeterminate: boolean;
+    changed: EventEmitter<boolean>;
+    checked: boolean;
+    private onChange;
+    private onTouched;
+    onCheckboxChange(event: Event): void;
+    onBlur(): void;
+    writeValue(value: boolean): void;
+    registerOnChange(fn: (value: boolean) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SnCheckboxXComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SnCheckboxXComponent, "sn-checkbox-x", never, { "id": { "alias": "id"; "required": false; }; "label": { "alias": "label"; "required": false; }; "name": { "alias": "name"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; }, { "changed": "changed"; }, never, never, true, never>;
+    static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_indeterminate: unknown;
+}
+
+export { SnCheckboxXComponent };

package/ng-package.json

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

package/src/lib/sn-checkbox-x.html

@@ -1,20 +0,0 @@
-<div class="sn-checkbox-wrapper">
-  <input
-    type="checkbox"
-    class="sn-checkbox-input"
-    [id]="id"
-    [name]="name"
-    [checked]="checked"
-    [disabled]="disabled"
-    [indeterminate]="indeterminate"
-    (change)="onCheckboxChange($event)"
-    (blur)="onBlur()"
-    aria-role="checkbox"
-    [attr.aria-checked]="indeterminate ? 'mixed' : checked"
-    [attr.aria-label]="label"
-  />
-  <label class="sn-checkbox-label" [attr.for]="id" *ngIf="label">
-    {{ label }}
-  </label>
-</div>
-

package/src/lib/sn-checkbox-x.scss

@@ -1,96 +0,0 @@
-.sn-checkbox-wrapper {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  user-select: none;
-}
-
-.sn-checkbox-input {
-  width: 1.25rem;
-  height: 1.25rem;
-  cursor: pointer;
-  appearance: none;
-  border: 2px solid #d1d5db;
-  border-radius: 0.375rem;
-  background-color: #ffffff;
-  transition: all 0.2s ease-in-out;
-
-  &:hover:not(:disabled):not(:checked) {
-    border-color: #3b82f6;
-    background-color: #f0f9ff;
-  }
-
-  &:checked {
-    background-color: #3b82f6;
-    border-color: #3b82f6;
-    position: relative;
-
-    &:hover:not(:disabled) {
-      background-color: #2563eb;
-    }
-
-    &::after {
-      content: '✓';
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      color: white;
-      font-size: 0.875rem;
-      font-weight: bold;
-    }
-  }
-
-  &:indeterminate {
-    background-color: #3b82f6;
-    border-color: #3b82f6;
-    position: relative;
-
-    &::after {
-      content: '−';
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      color: white;
-      font-size: 1rem;
-      font-weight: bold;
-    }
-  }
-
-  &:focus {
-    outline: none;
-    border-color: #3b82f6;
-    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-    background-color: #f3f4f6;
-    border-color: #e5e7eb;
-  }
-
-  &:disabled:checked {
-    background-color: #9ca3af;
-    border-color: #9ca3af;
-  }
-}
-
-.sn-checkbox-label {
-  cursor: pointer;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  color: #374151;
-  transition: color 0.2s ease-in-out;
-
-  .sn-checkbox-input:disabled ~ & {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  &:hover {
-    color: #1f2937;
-  }
-}
-

package/src/lib/sn-checkbox-x.spec.ts

@@ -1,96 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { SnCheckboxXComponent } from './sn-checkbox-x';
-import { DebugElement } from '@angular/core';
-import { By } from '@angular/platform-browser';
-
-describe('SnCheckboxXComponent', () => {
-  let component: SnCheckboxXComponent;
-  let fixture: ComponentFixture<SnCheckboxXComponent>;
-  let inputElement: DebugElement;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [SnCheckboxXComponent],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(SnCheckboxXComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-    inputElement = fixture.debugElement.query(By.css('input[type="checkbox"]'));
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should toggle checkbox value on change', () => {
-    const spy = jasmine.createSpy('onChange');
-    component.registerOnChange(spy);
-
-    inputElement.nativeElement.click();
-    fixture.detectChanges();
-
-    expect(component.checked).toBe(true);
-    expect(spy).toHaveBeenCalledWith(true);
-  });
-
-  it('should emit changed event on checkbox change', () => {
-    const spy = spyOn(component.changed, 'emit');
-
-    inputElement.nativeElement.click();
-    fixture.detectChanges();
-
-    expect(spy).toHaveBeenCalledWith(true);
-  });
-
-  it('should update checked value from writeValue', () => {
-    component.writeValue(true);
-    fixture.detectChanges();
-
-    expect(component.checked).toBe(true);
-  });
-
-  it('should handle disabled state', () => {
-    component.setDisabledState(true);
-    fixture.detectChanges();
-
-    expect(component.disabled).toBe(true);
-    expect(inputElement.nativeElement.disabled).toBe(true);
-  });
-
-  it('should set indeterminate state', () => {
-    component.indeterminate = true;
-    fixture.detectChanges();
-
-    expect(inputElement.nativeElement.indeterminate).toBe(true);
-  });
-
-  it('should clear indeterminate state on checkbox change', () => {
-    component.indeterminate = true;
-    inputElement.nativeElement.click();
-    fixture.detectChanges();
-
-    expect(component.indeterminate).toBe(false);
-  });
-
-  it('should display label when provided', () => {
-    component.label = 'Accept Terms';
-    component.id = 'accept-terms';
-    fixture.detectChanges();
-
-    const labelElement = fixture.debugElement.query(By.css('label'));
-    expect(labelElement).toBeTruthy();
-    expect(labelElement.nativeElement.textContent).toContain('Accept Terms');
-    expect(labelElement.nativeElement.getAttribute('for')).toBe('accept-terms');
-  });
-
-  it('should call onTouched on blur', () => {
-    const spy = jasmine.createSpy('onTouched');
-    component.registerOnTouched(spy);
-
-    inputElement.nativeElement.dispatchEvent(new Event('blur'));
-    fixture.detectChanges();
-
-    expect(spy).toHaveBeenCalled();
-  });
-});

package/src/lib/sn-checkbox-x.ts

@@ -1,59 +0,0 @@
-import { Component, Input, Output, EventEmitter, forwardRef, booleanAttribute } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-
-@Component({
-  selector: 'sn-checkbox-x',
-  standalone: true,
-  imports: [CommonModule],
-  templateUrl: './sn-checkbox-x.html',
-  styleUrl: './sn-checkbox-x.scss',
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => SnCheckboxXComponent),
-      multi: true,
-    },
-  ],
-})
-export class SnCheckboxXComponent implements ControlValueAccessor {
-  @Input() id: string = '';
-  @Input() label: string = '';
-  @Input() name: string = '';
-  @Input({ transform: booleanAttribute }) disabled: boolean = false;
-  @Input({ transform: booleanAttribute }) indeterminate: boolean = false;
-  @Output() changed = new EventEmitter<boolean>();
-
-  checked: boolean = false;
-  private onChange: (value: boolean) => void = () => {};
-  private onTouched: () => void = () => {};
-
-  onCheckboxChange(event: Event): void {
-    const target = event.target as HTMLInputElement;
-    this.checked = target.checked;
-    this.indeterminate = false;
-    this.onChange(this.checked);
-    this.changed.emit(this.checked);
-  }
-
-  onBlur(): void {
-    this.onTouched();
-  }
-
-  // ControlValueAccessor implementation
-  writeValue(value: boolean): void {
-    this.checked = value ?? false;
-  }
-
-  registerOnChange(fn: (value: boolean) => void): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: () => void): void {
-    this.onTouched = fn;
-  }
-
-  setDisabledState(isDisabled: boolean): void {
-    this.disabled = isDisabled;
-  }
-}

package/src/public-api.ts

@@ -1,5 +0,0 @@
-/*
- * Public API Surface of sn-checkbox-x
- */
-
-export * from './lib/sn-checkbox-x';

package/tsconfig.lib.json

@@ -1,18 +0,0 @@
-/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
-/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../out-tsc/lib",
-    "declaration": true,
-    "declarationMap": true,
-    "inlineSources": true,
-    "types": []
-  },
-  "include": [
-    "src/**/*.ts"
-  ],
-  "exclude": [
-    "**/*.spec.ts"
-  ]
-}

package/tsconfig.lib.prod.json

@@ -1,11 +0,0 @@
-/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
-/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
-{
-  "extends": "./tsconfig.lib.json",
-  "compilerOptions": {
-    "declarationMap": false
-  },
-  "angularCompilerOptions": {
-    "compilationMode": "partial"
-  }
-}

package/tsconfig.spec.json

@@ -1,14 +0,0 @@
-/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
-/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../out-tsc/spec",
-    "types": [
-      "jasmine"
-    ]
-  },
-  "include": [
-    "src/**/*.ts"
-  ]
-}