update api

angular.json

@@ -24,7 +24,7 @@
               },
               {
                 "glob": "**/*",
-                "input": "src/api",
+                "input": "docs/@alyle/ui",
                 "output": "/api"
               },
               {

package.json

@@ -65,7 +65,7 @@
     "@angular/compiler-cli": "^7.0.0-rc.1",
     "@angular/http": "^7.0.0-rc.1",
     "@angularclass/hmr": "^2.1.3",
-    "@compodoc/compodoc": "^1.1.3",
+    "@compodoc/compodoc": "^1.1.5",
     "@types/chroma-js": "^1.3.3",
     "@types/google.analytics": "^0.0.38",
     "@types/jasmine": "~2.8.3",

src/app/api/api.component.html

@@ -1,13 +1,13 @@
 <ng-container *ngIf="doc | async as api; else loading">
   <h2 [lyTyp]="'headline'" gutter>Module</h2>
-  <div prism language="typescript" [code]="ref(api.modules[0].name)"></div>
+  <prism language="typescript" [code]="ref(api.modules[0].name)"></prism>
   <ng-container *ngFor="let item of api.c_d">
     <h2 [lyTyp]="'headline'" gutter>{{item.title}}</h2>
     <ng-template ngFor let-directive [ngForOf]="item.data" let-x="index">
       <h3 [lyTyp]="'title'" gutter>{{ directive.name }}</h3>
       <p>Selector: <span prism language="typescript" code="'{{directive.selector}}'"></span></p>
       <h4 [lyTyp]="'subheading'" gutter>Properties</h4>
-      <ly-card>
+      <ly-card *ngIf="directive.inputsClass || directive.propertiesClass">
         <ly-card-content>
           <table>
             <thead>
@@ -31,6 +31,19 @@ <h4 [lyTyp]="'subheading'" gutter>Properties</h4>
       </ly-card>
     </ng-template>
   </ng-container>
+  <ng-container *ngIf="api.miscellaneous.typealiases.length">
+    <h2 [lyTyp]="'headline'" gutter>Type Aliases</h2>
+    <ng-container *ngFor="let variable of api.miscellaneous.typealiases">
+      <h3 [lyTyp]="'title'" gutter>{{ variable.name }}</h3>
+      <p>Type: <span prism language="typescript" code="{{variable.rawtype}}"></span></p>
+    </ng-container>
+  </ng-container>
+  <ng-container *ngIf="api.miscellaneous.variables.length">
+    <h2 [lyTyp]="'headline'" gutter>Default variables</h2>
+    <ng-container *ngFor="let variable of api.miscellaneous.variables">
+      <p><span prism language="typescript" code="const {{variable.name}} = {{variable.defaultValue}};"></span></p>
+    </ng-container>
+  </ng-container>
 </ng-container>
 <ng-template #loading>Loading...</ng-template>
 

src/app/api/api.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, ChangeDetectionStrategy, OnDestroy } from '@angular/core';
+import { Component, OnInit, ChangeDetectionStrategy, OnDestroy, isDevMode } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Observable, Subscription } from 'rxjs';
 import { ActivatedRoute } from '@angular/router';
@@ -22,15 +22,15 @@ export class ApiComponent implements OnInit, OnDestroy {
     this.routeParamsSubscription = this.route.params.subscribe(params => {
       this.pkgName = params.package;
       this.doc = this.http
-      .get(`${host}/${this.pkgName}/documentation.json`, {responseType: 'json'});
+      .get(isDevMode() ? `${location.origin}/api/${this.pkgName}/documentation.json` : `${host}/${this.pkgName}/documentation.json`, {responseType: 'json'});
     });
   }
 
   ngOnInit() {
   }
 
   ref(moduleName: string) {
-    return `import { ${moduleName} } from '@alyle/ui/${this.pkgName}'`;
+    return `import { ${moduleName} } from '@alyle/ui/${this.pkgName}';`;
   }
 
   inputTemplate(input: {name: string, type: string}) {

src/app/app.module.ts

@@ -71,6 +71,10 @@ export class GlobalVariables {
   testVal = '#00bcd4';
   Quepal = Quepal;
   SublimeLight = SublimeLight;
+  Amber = {
+    default: '#ffc107',
+    contrast: 'rgba(0, 0, 0, 0.87)'
+  };
 }
 
 @NgModule({

src/app/package-status/package-status.component.html

@@ -1,16 +1,18 @@
 <ly-card
-[bg]="status === 'beta' ? '#ffc107' : 'warn'"
-[color]="status === 'beta' ? 'currentColor' : 'auto'"
+[bg]="status === 'beta' ? 'Amber' : 'warn'"
+[color]="'auto'"
 [elevation]="6"
 [withClass]="classes.card">
   <ly-card-content [withClass]="classes.icon">
     <ly-icon *ngIf="status === 'beta'" icon="Experiment"></ly-icon>
     <ly-icon *ngIf="status === 'deprecated'">error</ly-icon>
   </ly-card-content>
   <ly-card-content [withClass]="classes.cardContent">
-    Status: {{ status }}
-    <br />
-    <ng-template [ngIf]="status === 'deprecated'">This component is obsolete and will be removed in the next release.</ng-template>
-    <ng-content></ng-content>
+    <div>
+      Status: {{ status }}
+      <br />
+      <ng-template [ngIf]="status === 'deprecated'">This component is obsolete and will be removed in the next release.</ng-template>
+      <ng-content></ng-content>
+    </div>
   </ly-card-content>
 </ly-card>

src/app/package-status/package-status.component.ts

@@ -15,7 +15,9 @@ const STYLES = ({
   },
   cardContent: {
     paddingLeft: 0,
-    paddingRight: 0
+    paddingRight: 0,
+    alignItems: 'center',
+    display: 'flex'
   }
 });
 

src/lib/button/button.ts

@@ -24,13 +24,10 @@ const DEFAULT_SIZE = 'medium';
 const DEFAULT_DISABLE_RIPPLE = false;
 const STYLE_PRIORITY = -2;
 
-interface Size {
-  small: any;
-  medium: any;
-  large: any;
-}
+type LyButtonSize = 'small' | 'medium' | 'large';
 
-const Size = {
+/** @ignore */
+const Size: Record<LyButtonSize, any> = {
   small: theme => ({
     padding: '0 8px',
     fontSize: theme.pxToRem(theme.typography.button.fontSize - 1),
@@ -69,7 +66,7 @@ export class LyButton implements OnInit, AfterViewInit, OnDestroy {
   classes = this._theme.addStyleSheet(styles, 'lyButton', STYLE_PRIORITY);
   private _rippleSensitive = false;
   private _ripple: Ripple;
-  private _size: keyof Size;
+  private _size: LyButtonSize;
   private _sizeClass: string;
   private _disableRipple: boolean = null;
   /** @ignore */
@@ -102,12 +99,12 @@ export class LyButton implements OnInit, AfterViewInit, OnDestroy {
   get disableRipple() {
     return this._disableRipple;
   }
-
+  /** Button size */
   @Input()
-  get size(): keyof Size {
+  get size(): LyButtonSize {
     return this._size;
   }
-  set size(val: keyof Size) {
+  set size(val: LyButtonSize) {
     if (val !== this.size) {
       this._size = val;
       this._sizeClass = this._theme.addStyle(
@@ -125,7 +122,6 @@ export class LyButton implements OnInit, AfterViewInit, OnDestroy {
     private _renderer: Renderer2,
     private _theme: LyTheme2,
     private _ngZone: NgZone,
-    /** @ignore */
     public _rippleService: LyRippleService,
     @Optional() bgAndColor: LyCommon
   ) {

tools/src/compodoc.ts

@@ -47,10 +47,27 @@ for (const key in components) {
         data: fileObject.directives
       });
     }
+    c_d.forEach(_ => {
+      _.data.forEach(__ => {
+        __.propertiesClass = __.propertiesClass.filter(___ => !(___.name as string).startsWith('_'));
+      });
+    });
     delete fileObject.components;
     delete fileObject.directives;
-    removeKeys(fileObject, ['sourceCode']);
-    removeKeys(fileObject, ['constructorObj']);
+    removeKeys(fileObject, [
+      'sourceCode',
+      'groupedVariables',
+      'groupedTypeAliases',
+      'groupedEnumerations',
+      'groupedFunctions',
+      'constructorObj'
+    ]);
+    const arrayVariables = fileObject.miscellaneous.variables;
+    if (arrayVariables) {
+      fileObject.miscellaneous.variables = arrayVariables.filter(function(item) {
+        return (item.name as string).toLowerCase() !== 'styles';
+      });
+    }
     writeFileSync(docPathFile, JSON.stringify(fileObject), 'utf8');
 
   }