build(webpack): fixes type errors when importing interfaces

The root cause is in Typescript and transpilation. Once TypeScript code is transpiled,
interfaces/types are gone. They don't exist anymore in the emitted files.
https://stackoverflow.com/questions/40841641/cannot-import-exported-interface-export-not-found

projects/canopy/src/lib/accordion/accordion-panel-heading/accordion-panel-heading.component.ts

@@ -8,7 +8,7 @@ import {
   ViewEncapsulation,
 } from '@angular/core';
 
-import { HeadingLevel } from '../../heading';
+import type { HeadingLevel } from '../../heading';
 
 let nextUniqueId = 0;
 

projects/canopy/src/lib/accordion/accordion.component.ts

@@ -11,7 +11,7 @@ import {
   ViewEncapsulation,
 } from '@angular/core';
 
-import { HeadingLevel } from '../heading';
+import type { HeadingLevel } from '../heading';
 import { LgAccordionPanelHeadingComponent } from './accordion-panel-heading/accordion-panel-heading.component';
 
 export const LG_ACCORDION = new InjectionToken<LgAccordionComponent>('LG_ACCORDION');

projects/canopy/src/lib/alert/alert.component.spec.ts

@@ -5,7 +5,7 @@ import { MockComponents } from 'ng-mocks';
 
 import { LgAlertComponent } from './alert.component';
 import { LgIconComponent } from '../icon';
-import { Variant } from '../variant/variant.interface';
+import type { Variant } from '../variant/variant.interface';
 
 describe('LgAlertComponent', () => {
   let component: LgAlertComponent;

projects/canopy/src/lib/alert/alert.component.ts

@@ -7,7 +7,7 @@ import {
   ViewEncapsulation,
 } from '@angular/core';
 
-import { Variant } from '../variant/variant.interface';
+import type { Variant } from '../variant/variant.interface';
 
 @Component({
   selector: 'lg-alert',

projects/canopy/src/lib/button/button.component.ts

@@ -7,7 +7,7 @@ import {
   ViewEncapsulation,
 } from '@angular/core';
 
-import { ButtonVariant, ButtonIconPosition, ButtonSize } from './button.interface';
+import type { ButtonVariant, ButtonIconPosition, ButtonSize } from './button.interface';
 
 @Component({
   selector: '[lg-button]',

projects/canopy/src/lib/button/button.stories.ts

@@ -7,8 +7,8 @@ import { LgButtonModule } from './button.module';
 import { notes } from './button.notes';
 import { iconsArray } from '../icon/icons.stories';
 import { LgIconModule, LgIconRegistry } from '../icon';
-import { ButtonIconPosition } from '.';
-import { ButtonVariant, ButtonSize } from './button.interface';
+import type { ButtonIconPosition } from '.';
+import type { ButtonVariant, ButtonSize } from './button.interface';
 
 const buttonVariants = [
   'add-on',

projects/canopy/src/lib/card/card-title/card-title.component.ts

@@ -6,7 +6,7 @@ import {
   ViewEncapsulation,
 } from '@angular/core';
 
-import { HeadingLevel } from '../../heading';
+import type { HeadingLevel } from '../../heading';
 
 @Component({
   selector: 'lg-card-title',

projects/canopy/src/lib/carousel/carousel.component.ts

@@ -13,7 +13,7 @@ import {
 import { BehaviorSubject, defer, interval, Observable, Subject } from 'rxjs';
 import { filter, map, takeUntil, withLatestFrom } from 'rxjs/operators';
 
-import { HeadingLevel } from '../heading';
+import type { HeadingLevel } from '../heading';
 import { LgCarouselItemComponent } from './carousel-item/carousel-item.component';
 
 @Component({

projects/canopy/src/lib/data-point/data-point-label/data-point-label.component.ts

@@ -6,7 +6,7 @@ import {
   ViewEncapsulation,
 } from '@angular/core';
 
-import { HeadingLevel } from '../../heading';
+import type { HeadingLevel } from '../../heading';
 
 @Component({
   selector: 'lg-data-point-label',

projects/canopy/src/lib/details/details-panel-heading/details-panel-heading.component.ts

@@ -9,7 +9,7 @@ import {
 } from '@angular/core';
 
 import { lgIconChevronDown } from '../../icon';
-import { Variant } from '../../variant';
+import type { Variant } from '../../variant';
 
 let nextUniqueId = 0;
 @Component({

projects/canopy/src/lib/details/details.component.ts

@@ -16,7 +16,7 @@ import {
 
 import { Subscription } from 'rxjs';
 
-import { Variant } from '../variant';
+import type { Variant } from '../variant';
 import { LgDetailsPanelHeadingComponent } from './details-panel-heading/details-panel-heading.component';
 
 let nextUniqueId = 0;

projects/canopy/src/lib/feature-toggle/feature-toggle.directive.spec.ts

@@ -6,7 +6,7 @@ import { of } from 'rxjs';
 import { instance, mock, when } from 'ts-mockito';
 
 import { LgFeatureToggleDirective } from './feature-toggle.directive';
-import { LgFeatureToggleOptions } from './feature-toggle.interface';
+import type { LgFeatureToggleOptions } from './feature-toggle.interface';
 import { LgFeatureToggleService } from './feature-toggle.service';
 
 @Component({

projects/canopy/src/lib/feature-toggle/feature-toggle.directive.ts

@@ -12,11 +12,11 @@ import {
 import { filter, tap } from 'rxjs/operators';
 import { Subscription } from 'rxjs';
 
-import {
+import type {
   LgFeatureToggleConfig,
   LgFeatureToggleOptions,
-  togglesOptionsInjectable,
 } from './feature-toggle.interface';
+import { togglesOptionsInjectable } from './feature-toggle.interface';
 
 import { LgFeatureToggleService } from './feature-toggle.service';
 

projects/canopy/src/lib/feature-toggle/feature-toggle.module.ts

@@ -1,8 +1,8 @@
 import { ModuleWithProviders, NgModule } from '@angular/core';
 
 import { LgFeatureToggleDirective } from './feature-toggle.directive';
+import type { LgFeatureToggleOptions } from './feature-toggle.interface';
 import {
-  LgFeatureToggleOptions,
   LgToggles,
   togglesInjectable,
   togglesOptionsInjectable,

projects/canopy/src/lib/feature-toggle/feature-toggle.stories.ts

@@ -2,7 +2,7 @@ import { storiesOf } from '@storybook/angular';
 import { of } from 'rxjs';
 
 import { CanopyModule } from '../canopy.module';
-import { LgFeatureToggleOptions } from './feature-toggle.interface';
+import type { LgFeatureToggleOptions } from './feature-toggle.interface';
 import { LgFeatureToggleModule } from './feature-toggle.module';
 import { notes } from './feature-toggle.notes';
 

projects/canopy/src/lib/forms/input/input.stories.ts

@@ -12,7 +12,7 @@ import { LgLabelModule } from '../label/label.module';
 import { LgButtonModule } from '../../button/button.module';
 import { LgHintModule } from '../hint';
 import { iconsArray } from '../../icon/icons.stories';
-import { ButtonVariant } from '../../button';
+import type { ButtonVariant } from '../../button';
 import { LgSuffixModule } from '../../suffix';
 import { LgPrefixModule } from '../../prefix';
 

projects/canopy/src/lib/forms/radio/radio-button.component.ts

@@ -15,7 +15,7 @@ import { FormGroupDirective, NgControl } from '@angular/forms';
 
 import { LgErrorStateMatcher } from '../validation/error-state-matcher';
 import { LgRadioGroupComponent } from './radio-group.component';
-import { RadioStackBreakpoint, RadioVariant } from './radio.interface';
+import type { RadioStackBreakpoint, RadioVariant } from './radio.interface';
 
 let nextUniqueId = 0;
 

projects/canopy/src/lib/forms/radio/radio-group.component.ts

@@ -21,7 +21,7 @@ import { LgHintComponent } from '../hint/hint.component';
 import { LgErrorStateMatcher } from '../validation/error-state-matcher';
 import { LgValidationComponent } from '../validation/validation.component';
 import { LgRadioButtonComponent } from './radio-button.component';
-import { RadioStackBreakpoint, RadioVariant } from './radio.interface';
+import type { RadioStackBreakpoint, RadioVariant } from './radio.interface';
 
 let uniqueId = 0;
 

projects/canopy/src/lib/forms/radio/segment.stories.ts

@@ -7,7 +7,7 @@ import { action } from '@storybook/addon-actions';
 
 import { notes } from './radio.notes';
 import { LgRadioModule } from './radio.module';
-import { RadioStackBreakpoint } from './radio.interface';
+import type { RadioStackBreakpoint } from './radio.interface';
 
 @Component({
   selector: 'lg-reactive-form-segment',

projects/canopy/src/lib/forms/toggle/toggle.component.spec.ts

@@ -18,7 +18,7 @@ import { LgIconComponent } from '../../icon';
 import { LgErrorStateMatcher } from '../validation/error-state-matcher';
 import { LgValidationComponent } from '../validation/validation.component';
 import { LgToggleComponent } from './toggle.component';
-import { ToggleVariant } from './toggle.interface';
+import type { ToggleVariant } from './toggle.interface';
 
 const validationTestId = 'test-validation-id';
 
@@ -134,9 +134,8 @@ describe('LgToggleComponent', () => {
 
       toggleDebugElement = fixture.debugElement.query(By.directive(LgToggleComponent));
 
-      toggleInstance = toggleDebugElement.injector.get<LgToggleComponent>(
-        LgToggleComponent,
-      );
+      toggleInstance =
+        toggleDebugElement.injector.get<LgToggleComponent>(LgToggleComponent);
 
       inputDebugElement = fixture.debugElement.query(By.css('.lg-toggle__input'));
       inputLabelElement = fixture.debugElement.query(By.css('.lg-toggle__label'));
@@ -276,9 +275,8 @@ describe('LgToggleComponent selector variant', () => {
 
       toggleDebugElement = fixture.debugElement.query(By.directive(LgToggleComponent));
 
-      toggleInstance = toggleDebugElement.injector.get<LgToggleComponent>(
-        LgToggleComponent,
-      );
+      toggleInstance =
+        toggleDebugElement.injector.get<LgToggleComponent>(LgToggleComponent);
 
       inputLabelElement = fixture.debugElement.query(By.css('.lg-toggle__label'));
       fixture.detectChanges();

projects/canopy/src/lib/forms/toggle/toggle.component.ts

@@ -18,7 +18,7 @@ import { LgDomService } from '../../utils/dom.service';
 import { LgErrorStateMatcher } from '../validation/error-state-matcher';
 import { LgValidationComponent } from '../validation/validation.component';
 import { LgCheckboxGroupComponent } from '../checkbox-group';
-import { ToggleVariant } from './toggle.interface';
+import type { ToggleVariant } from './toggle.interface';
 
 let nextUniqueId = 0;
 

projects/canopy/src/lib/forms/toggle/toggle.stories.common.ts

@@ -11,7 +11,7 @@ import { FormBuilder, FormGroup } from '@angular/forms';
 import { action } from '@storybook/addon-actions';
 import { boolean, text } from '@storybook/addon-knobs';
 
-import { ToggleVariant } from './toggle.interface';
+import type { ToggleVariant } from './toggle.interface';
 
 @Component({
   selector: 'lg-reactive-form',

projects/canopy/src/lib/forms/validation/validation.component.spec.ts

@@ -5,7 +5,7 @@ import { CanopyModule } from '../../canopy.module';
 import { LgValidationComponent } from './validation.component';
 
 import { LgIconComponent } from '../../icon';
-import { Variant } from '../../variant';
+import type { Variant } from '../../variant';
 
 describe('LgValidationComponent', () => {
   let component: LgValidationComponent;

projects/canopy/src/lib/forms/validation/validation.component.ts

@@ -7,7 +7,7 @@ import {
   ViewEncapsulation,
 } from '@angular/core';
 
-import { Variant } from '../../variant';
+import type { Variant } from '../../variant';
 
 let nextUniqueId = 0;
 

projects/canopy/src/lib/heading/heading.component.ts

@@ -1,6 +1,6 @@
 import { Component, Input, ViewEncapsulation } from '@angular/core';
 
-import { HeadingLevel } from './heading.interface';
+import type { HeadingLevel } from './heading.interface';
 
 @Component({
   selector: 'lg-heading',

projects/canopy/src/lib/hero/hero-card-data-point-label/hero-card-data-point-label.component.ts

@@ -6,7 +6,7 @@ import {
   ViewEncapsulation,
 } from '@angular/core';
 
-import { HeadingLevel } from '../../heading';
+import type { HeadingLevel } from '../../heading';
 
 @Component({
   selector: 'lg-hero-card-data-point-label',

projects/canopy/src/lib/hero/hero-card-principle-data-point-label/hero-card-principle-data-point-label.component.ts

@@ -6,7 +6,7 @@ import {
   ViewEncapsulation,
 } from '@angular/core';
 
-import { HeadingLevel } from '../../heading';
+import type { HeadingLevel } from '../../heading';
 
 @Component({
   selector: 'lg-hero-card-principle-data-point-label',

projects/canopy/src/lib/hero/hero-card-title/hero-card-title.component.ts

@@ -1,6 +1,6 @@
 import { Component, HostBinding, Input, ViewEncapsulation } from '@angular/core';
 
-import { HeadingLevel } from '../../heading';
+import type { HeadingLevel } from '../../heading';
 
 @Component({
   selector: 'lg-hero-card-title',

projects/canopy/src/lib/hide-at/hide-at.directive.ts

@@ -1,6 +1,6 @@
 import { Directive, ElementRef, Input, Renderer2 } from '@angular/core';
 
-import { Breakpoints } from '../shared/breakpoints.interface';
+import type { Breakpoints } from '../shared/breakpoints.interface';
 
 @Directive({
   selector: '[lgHideAt]',

projects/canopy/src/lib/modal/modal-header/modal-header.component.ts

@@ -8,7 +8,7 @@ import {
   ViewEncapsulation,
 } from '@angular/core';
 
-import { HeadingLevel } from '../../heading';
+import type { HeadingLevel } from '../../heading';
 import { LgModalService } from '../modal.service';
 
 @Component({

projects/canopy/src/lib/promo-card/promo-card-list/promo-card-list-title/promo-card-list-title.component.ts

@@ -6,7 +6,7 @@ import {
   ViewEncapsulation,
 } from '@angular/core';
 
-import { HeadingLevel } from '../../../heading';
+import type { HeadingLevel } from '../../../heading';
 
 @Component({
   selector: 'lg-promo-card-list-title',

projects/canopy/src/lib/promo-card/promo-card/promo-card.component.ts

@@ -7,7 +7,7 @@ import {
   ViewEncapsulation,
 } from '@angular/core';
 
-import { PromoCardVariant } from '../promo-card.interface';
+import type { PromoCardVariant } from '../promo-card.interface';
 
 @Component({
   selector: 'lg-promo-card',

projects/canopy/src/lib/separator/separator.component.ts

@@ -7,7 +7,7 @@ import {
   ViewEncapsulation,
 } from '@angular/core';
 
-import { SeparatorVariant } from './separator.interface';
+import type { SeparatorVariant } from './separator.interface';
 
 @Component({
   selector: 'lg-separator',

projects/canopy/src/lib/show-at/show-at.directive.ts

@@ -1,6 +1,6 @@
 import { Directive, ElementRef, Input, Renderer2 } from '@angular/core';
 
-import { Breakpoints } from '../shared/breakpoints.interface';
+import type { Breakpoints } from '../shared/breakpoints.interface';
 
 @Directive({
   selector: '[lgShowAt]',

projects/canopy/src/lib/spacing/margin/margin.directive.ts

@@ -1,6 +1,6 @@
 import { Directive, ElementRef, Input, Renderer2 } from '@angular/core';
 
-import { SpacingVariant } from '../spacing.interface';
+import type { SpacingVariant } from '../spacing.interface';
 
 @Directive({
   selector: `

projects/canopy/src/lib/spacing/padding/padding.directive.ts

@@ -1,6 +1,6 @@
 import { Directive, ElementRef, Input, Renderer2 } from '@angular/core';
 
-import { SpacingVariant } from '../spacing.interface';
+import type { SpacingVariant } from '../spacing.interface';
 
 @Directive({
   selector: `

projects/canopy/src/lib/spinner/spinner.component.ts

@@ -1,6 +1,6 @@
 import { Component, HostBinding, Input, ViewEncapsulation } from '@angular/core';
 
-import { SpinnerVariant, SpinnerSize } from './spinner.interface';
+import type { SpinnerVariant, SpinnerSize } from './spinner.interface';
 
 @Component({
   selector: 'lg-spinner',

projects/canopy/src/lib/table/table.stories.ts

@@ -3,11 +3,8 @@ import { ChangeDetectorRef, Component, Input } from '@angular/core';
 import { boolean, object, select, withKnobs } from '@storybook/addon-knobs';
 import { moduleMetadata } from '@storybook/angular';
 
-import {
-  AlignmentOptions,
-  TableColumnLayoutBreakpoints,
-  TableVariant,
-} from './table.interface';
+import type { TableVariant } from './table.interface';
+import { AlignmentOptions, TableColumnLayoutBreakpoints } from './table.interface';
 import { LgInputModule } from '../forms';
 import { LgMarginModule } from '../spacing';
 import { LgSuffixModule } from '../suffix';

projects/canopy/src/lib/table/table/table.component.ts

@@ -12,11 +12,8 @@ import {
 
 import { LgTableBodyComponent } from '../table-body/table-body.component';
 import { LgTableHeadComponent } from '../table-head/table-head.component';
-import {
-  TableColumn,
-  TableColumnLayoutBreakpoints,
-  TableVariant,
-} from '../table.interface';
+import type { TableColumn, TableVariant } from '../table.interface';
+import { TableColumnLayoutBreakpoints } from '../table.interface';
 
 let nextUniqueId = 0;
 

projects/canopy/src/lib/tabs/tabs.component.ts

@@ -16,7 +16,7 @@ import {
 
 import { Subscription } from 'rxjs';
 
-import { HeadingLevel } from '../heading/heading.interface';
+import type { HeadingLevel } from '../heading/heading.interface';
 import { isKeyDown, isKeyLeft, isKeyRight, isKeyUp } from '../utils/keyboard-keys';
 import { LgTabItemComponent } from './tab-item/tab-item.component';