@worktile/planet 12.1.1 → 14.0.0-next.0

package/examples/app1/src/app/dashboard/dashboard.component.ts

@@ -1,70 +0,0 @@
-import { Component, Inject, ViewChild, ElementRef, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
-import { CounterService } from '../counter.service';
-import { AppRootContext } from '@demo/common';
-import { PlanetComponentRef, PlanetComponentLoader, PlanetPortalApplication, GlobalEventDispatcher } from 'ngx-planet';
-import { ThyDialog, ThyDialogSizes } from 'ngx-tethys/dialog';
-import { App1DetailComponent } from '../detail/detail.component';
-import { ProjectsDialogComponent } from '../projects/dialog/projects-dialog.component';
-
-@Component({
-    selector: 'app-dashboard',
-    templateUrl: './dashboard.component.html'
-})
-export class DashboardComponent implements OnInit {
-    @ViewChild('container', { static: true }) containerElementRef: ElementRef<HTMLDivElement>;
-
-    public size: ThyDialogSizes = ThyDialogSizes.md;
-
-    private componentRef: PlanetComponentRef;
-
-    constructor(
-        private planetPortal: PlanetPortalApplication,
-        private router: Router,
-        public counter: CounterService,
-        private globalEventDispatcher: GlobalEventDispatcher,
-        public appRootContext: AppRootContext,
-        private dialog: ThyDialog,
-        private planetComponentLoader: PlanetComponentLoader
-    ) {}
-
-    ngOnInit() {}
-
-    openADetail() {
-        this.globalEventDispatcher.dispatch('openADetail');
-    }
-
-    openApp1Dialog() {
-        this.dialog.open(App1DetailComponent, {
-            size: this.size
-        });
-    }
-
-    openApp2Dialog() {
-        this.dialog.open(ProjectsDialogComponent, {
-            size: ThyDialogSizes.supperLg
-        });
-    }
-
-    openApp2Component() {
-        this.planetComponentLoader
-            .load('app2', 'project1', {
-                container: this.containerElementRef,
-                initialState: {}
-            })
-            .subscribe(componentRef => {
-                this.componentRef = componentRef;
-            });
-    }
-
-    disposeApp2Component() {
-        if (this.componentRef) {
-            this.componentRef.dispose();
-        }
-    }
-
-    changeName(newName: string) {
-        this.appRootContext.setName(newName);
-        this.planetPortal.tick();
-    }
-}

package/examples/app1/src/app/detail/detail.component.html

@@ -1,8 +0,0 @@
-<thy-dialog-header thyTitle="a Detail from App1"> </thy-dialog-header>
-<thy-dialog-body>
-  <span class="same-name">This is Micro Front-end application example.</span>
-  <div class="btn-pair mt-2">
-    <button thyButton="primary-square" (click)="ok()">Ok</button>
-    <button thyButton="link-secondary" (click)="close()">Cancel</button>
-  </div>
-</thy-dialog-body>

package/examples/app1/src/app/detail/detail.component.ts

@@ -1,18 +0,0 @@
-import { Component } from '@angular/core';
-import { ThyDialogRef } from 'ngx-tethys/dialog';
-
-@Component({
-    selector: 'app-detail',
-    templateUrl: './detail.component.html'
-})
-export class App1DetailComponent {
-    constructor(private dialogRef: ThyDialogRef<App1DetailComponent>) {}
-
-    ok() {
-        this.dialogRef.close();
-    }
-
-    close() {
-        this.dialogRef.close();
-    }
-}

package/examples/app1/src/app/overlay.ts

@@ -1,26 +0,0 @@
-import { Directionality } from '@angular/cdk/bidi';
-import {
-    Overlay,
-    OverlayConfig,
-    OverlayContainer,
-    OverlayKeyboardDispatcher,
-    OverlayPositionBuilder,
-    OverlayRef,
-    ScrollStrategyOptions
-} from '@angular/cdk/overlay';
-import { DOCUMENT, Location } from '@angular/common';
-import { ComponentFactoryResolver, Inject, Injectable, Injector, NgZone } from '@angular/core';
-import { isArray, concatArray } from 'ngx-tethys/util';
-
-@Injectable({ providedIn: 'root' })
-export class AppOverlay extends Overlay {
-    create(config?: OverlayConfig): OverlayRef {
-        const overlayConfig: OverlayConfig = {
-            ...config,
-            panelClass: concatArray(config.panelClass, 'app1')
-        };
-        const overlayRef = super.create(overlayConfig);
-        overlayRef.addPanelClass(overlayConfig.panelClass);
-        return overlayRef;
-    }
-}

package/examples/app1/src/app/projects/dialog/projects-dialog.component.html

@@ -1,10 +0,0 @@
-<thy-dialog-header thyTitle="a Detail from App1"> </thy-dialog-header>
-<thy-dialog-body>
-  <span class="same-name">this is a app2's component </span>
-  <thy-loading [thyDone]="loadingDone"></thy-loading>
-  <div #container></div>
-</thy-dialog-body>
-<thy-dialog-footer [thyDivided]="true">
-  <button thyButton="primary-square" (click)="ok()">Ok</button>
-  <button thyButton="link-secondary" (click)="close()">Cancel</button>
-</thy-dialog-footer>

package/examples/app1/src/app/projects/dialog/projects-dialog.component.ts

@@ -1,41 +0,0 @@
-import { Component, ElementRef, EventEmitter, HostBinding, OnInit, ViewChild } from '@angular/core';
-import { PlanetComponentLoader } from 'ngx-planet';
-import { ThyDialogRef } from 'ngx-tethys/dialog';
-
-@Component({
-    selector: 'app-projects-dialog',
-    templateUrl: `./projects-dialog.component.html`
-})
-export class ProjectsDialogComponent implements OnInit {
-    @HostBinding('class.thy-dialog-content') container = true;
-
-    @ViewChild('container', { static: true }) elementRef: ElementRef<HTMLDivElement>;
-
-    loadingDone = false;
-
-    constructor(
-        private planetComponentLoader: PlanetComponentLoader,
-        private dialogRef: ThyDialogRef<ProjectsDialogComponent>
-    ) {}
-
-    ngOnInit() {
-        this.planetComponentLoader
-            .load<{ click: EventEmitter<any> }>('app2', 'project1', {
-                container: this.elementRef
-            })
-            .subscribe(componentRef => {
-                this.loadingDone = true;
-                componentRef.componentInstance.click.subscribe(() => {
-                    console.log('project item clicked');
-                });
-            });
-    }
-
-    ok() {
-        this.dialogRef.close();
-    }
-
-    close() {
-        this.dialogRef.close();
-    }
-}

package/examples/app1/src/app/projects/projects.component.ts

@@ -1,33 +0,0 @@
-import { Observable } from 'rxjs';
-import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
-import { PlanetComponentLoader } from 'ngx-planet';
-
-@Component({
-    selector: 'app-projects',
-    template: `
-        <section-card class="mt-2" title="App2's projects component">
-            <thy-loading [thyDone]="loadingDone"></thy-loading>
-            <div #container></div>
-        </section-card>
-    `
-})
-export class ProjectsComponent implements OnInit {
-    @ViewChild('container', { static: true }) elementRef: ElementRef<HTMLDivElement>;
-
-    loadingDone = false;
-
-    constructor(private planetComponentLoader: PlanetComponentLoader) {}
-
-    ngOnInit() {
-        this.planetComponentLoader
-            .load<{ click: Observable<unknown> }>('app2', 'project1', {
-                container: this.elementRef
-            })
-            .subscribe(componentRef => {
-                this.loadingDone = true;
-                componentRef.componentInstance.click.subscribe(() => {
-                    console.log('project item clicked');
-                });
-            });
-    }
-}

package/examples/app1/src/app/root/root.component.css

@@ -1,3 +0,0 @@
-.header {
-    margin: 10px 20px;
-}

package/examples/app1/src/app/root/root.component.html

@@ -1,16 +0,0 @@
-<thy-layout>
-  <thy-sidebar>
-    <div class="sidebar-header">
-      <span class="title cursor-pointer">App1</span>
-      <!-- <button class="action" thyButtonIcon="wtf wtf-project-add-o" thyLight="true" thySize="lg"></button> -->
-    </div>
-    <div class="sidebar-content">
-      <thy-menu>
-        <a thyMenuItem [routerLink]="['/app1/dashboard']" routerLinkActive="active">App1 Dashboard</a>
-        <a thyMenuItem [routerLink]="['/app1/users']" routerLinkActive="active">App1 Users</a>
-        <a thyMenuItem [routerLink]="['/app1/projects']" routerLinkActive="active">App2 Projects</a>
-      </thy-menu>
-    </div>
-  </thy-sidebar>
-  <thy-content> <router-outlet></router-outlet> </thy-content>
-</thy-layout>

package/examples/app1/src/app/root/root.component.ts

@@ -1,35 +0,0 @@
-import { Component, HostBinding, NgZone } from '@angular/core';
-import { GlobalEventDispatcher } from 'ngx-planet';
-import { ThyDialog } from 'ngx-tethys/dialog';
-import { UserDetailComponent } from '../user/detail/user-detail.component';
-
-@Component({
-    selector: 'app1-root-actual',
-    templateUrl: './root.component.html',
-    styleUrls: ['./root.component.css']
-})
-export class AppActualRootComponent {
-    @HostBinding(`class.thy-layout`) isLayout = true;
-}
-
-@Component({
-    selector: 'app1-root',
-    template: '<router-outlet></router-outlet>'
-})
-export class AppRootComponent {
-    @HostBinding(`class.thy-layout`) isLayout = true;
-
-    constructor(
-        private globalEventDispatcher: GlobalEventDispatcher,
-        private thyDialog: ThyDialog,
-        private ngZone: NgZone
-    ) {
-        this.globalEventDispatcher.register('openUserDetail').subscribe((payload: number) => {
-            thyDialog.open(UserDetailComponent, {
-                initialState: {
-                    userId: payload
-                }
-            });
-        });
-    }
-}

package/examples/app1/src/app/services/initialized-data.resolver.ts

@@ -1,15 +0,0 @@
-import { delay } from 'rxjs/operators';
-import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
-import { of } from 'rxjs';
-
-@Injectable({
-    providedIn: 'root'
-})
-export class InitializedDataResolver implements Resolve<unknown> {
-    constructor() {}
-
-    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
-        return of(null).pipe(delay(200));
-    }
-}

package/examples/app1/src/app/shared.module.ts

@@ -1,57 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { RouterModule } from '@angular/router';
-import { ThyLayoutModule } from 'ngx-tethys/layout';
-import { ThyButtonModule } from 'ngx-tethys/button';
-import { ThyListModule } from 'ngx-tethys/list';
-import { ThyDialogModule } from 'ngx-tethys/dialog';
-import { ThyMenuModule } from 'ngx-tethys/menu';
-import { ThyCardModule } from 'ngx-tethys/card';
-import { ThyLoadingModule } from 'ngx-tethys/loading';
-import { ThyIconModule } from 'ngx-tethys/icon';
-import { ThyInputModule } from 'ngx-tethys/input';
-import { ThyFormModule } from 'ngx-tethys/form';
-import { ThySelectModule } from 'ngx-tethys/select';
-
-import { DemoCommonModule } from '@demo/common';
-import { NgxPlanetModule } from 'ngx-planet';
-
-@NgModule({
-    declarations: [],
-    imports: [
-        CommonModule,
-        RouterModule,
-        ThyLayoutModule,
-        ThyButtonModule,
-        ThyListModule,
-        ThyDialogModule,
-        ThyMenuModule,
-        ThyCardModule,
-        ThyLoadingModule,
-        ThyIconModule,
-        ThyInputModule,
-        ThyFormModule,
-        ThySelectModule,
-        DemoCommonModule,
-        NgxPlanetModule
-    ],
-    exports: [
-        CommonModule,
-        RouterModule,
-        ThyLayoutModule,
-        ThyButtonModule,
-        ThyListModule,
-        ThyDialogModule,
-        ThyMenuModule,
-        ThyCardModule,
-        ThyLoadingModule,
-        ThyIconModule,
-        ThyInputModule,
-        ThyFormModule,
-        ThySelectModule,
-        DemoCommonModule,
-        NgxPlanetModule
-    ],
-    providers: []
-})
-export class SharedModule {}

package/examples/app1/src/app/user/detail/user-detail.component.html

@@ -1,5 +0,0 @@
-<thy-dialog-header thyTitle="User Detail"></thy-dialog-header>
-<thy-dialog-body>
-    <h5>User Detail</h5>
-    <p>uid: {{ userId }}</p>
-</thy-dialog-body>

package/examples/app1/src/app/user/detail/user-detail.component.ts

@@ -1,20 +0,0 @@
-import { Component, inject, InjectionToken, OnInit } from '@angular/core';
-import { GlobalEventDispatcher } from 'ngx-planet';
-import { ActivatedRoute } from '@angular/router';
-
-@Component({
-    selector: 'app-user-detail',
-    templateUrl: './user-detail.component.html'
-})
-export class UserDetailComponent implements OnInit {
-    userId: string;
-
-    constructor(private route: ActivatedRoute, private globalEventDispatcher: GlobalEventDispatcher) {}
-
-    ngOnInit() {
-        // this.route.paramMap.subscribe(params => {
-        //     const userId = params.get(`id`);
-        //     this.userId = userId;
-        // });
-    }
-}

package/examples/app1/src/app/user/user-list.component.html

@@ -1,7 +0,0 @@
-<p>This is user list page, <code>and this module is loaded lazy.</code></p>
-<thy-list>
-  <thy-list-item class="thy-list-option" (click)="openUserDetail(1)"><span>Peter</span></thy-list-item>
-  <thy-list-item class="thy-list-option" (click)="openUserDetail(2)"><span>Lily</span></thy-list-item>
-</thy-list>
-
-<router-outlet></router-outlet>

package/examples/app1/src/app/user/user-list.component.ts

@@ -1,20 +0,0 @@
-import { Component, inject, InjectionToken } from '@angular/core';
-import { GlobalEventDispatcher } from 'ngx-planet';
-import { ThyDialog } from 'ngx-tethys/dialog';
-import { UserDetailComponent } from './detail/user-detail.component';
-
-@Component({
-    selector: 'app-user-list',
-    templateUrl: './user-list.component.html'
-})
-export class UserListComponent {
-    constructor(private globalEventDispatcher: GlobalEventDispatcher, private thyDialog: ThyDialog) {}
-
-    openUserDetail(id: number) {
-        this.thyDialog.open(UserDetailComponent, {
-            initialState: {
-                userId: id
-            }
-        });
-    }
-}

package/examples/app1/src/app/user/user.module.ts

@@ -1,31 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { UserListComponent } from './user-list.component';
-import { UserDetailComponent } from './detail/user-detail.component';
-import { DemoCommonModule } from '@demo/common';
-import { NgxPlanetModule } from 'ngx-planet';
-import { RouterModule } from '@angular/router';
-import { SharedModule } from '../shared.module';
-
-@NgModule({
-    declarations: [UserListComponent, UserDetailComponent],
-    imports: [
-        SharedModule,
-        RouterModule.forChild([
-            {
-                path: '',
-                component: UserListComponent,
-                children: [
-                    {
-                        path: ':id',
-                        component: UserDetailComponent
-                    }
-                ]
-            }
-        ])
-    ],
-    exports: [UserListComponent, UserDetailComponent],
-    entryComponents: [UserDetailComponent],
-    providers: []
-})
-export class UserModule {}

package/examples/app1/src/assets/main.css

@@ -1,3 +0,0 @@
-.red {
-    color: red;
-}

package/examples/app1/src/environments/environment.prod.ts

@@ -1,3 +0,0 @@
-export const environment = {
-  production: true
-};

package/examples/app1/src/environments/environment.ts

@@ -1,16 +0,0 @@
-// This file can be replaced during build by using the `fileReplacements` array.
-// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
-// The list of file replacements can be found in `angular.json`.
-
-export const environment = {
-    production: false
-};
-
-/*
- * For easier debugging in development mode, you can import the following file
- * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
- *
- * This import should be commented out in production mode because it will have a negative impact
- * on performance if an error is thrown.
- */
-// import 'zone.js/plugins/zone-error';  // Included with Angular CLI.

package/examples/app1/src/index.html

@@ -1,14 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>App1</title>
-  <base href="/">
-
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
-</head>
-<body>
-  <app1-root></app1-root>
-</body>
-</html>

package/examples/app1/src/main.ts

@@ -1,35 +0,0 @@
-import { enableProdMode, NgModuleRef, Type, NgZone } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
-import { AppModule } from './app/app.module';
-import { environment } from './environments/environment';
-import { PlanetPortalApplication, defineApplication } from 'ngx-planet';
-import { AppRootContext } from '@demo/common';
-
-if (environment.production) {
-    enableProdMode();
-}
-
-defineApplication('app1', {
-    template: `<app1-root class="app1-root"></app1-root>`,
-    bootstrap: (portalApp: PlanetPortalApplication) => {
-        return platformBrowserDynamic([
-            {
-                provide: PlanetPortalApplication,
-                useValue: portalApp
-            },
-            {
-                provide: AppRootContext,
-                useValue: portalApp.data.appRootContext
-            }
-        ])
-            .bootstrapModule(AppModule)
-            .then(appModule => {
-                return appModule;
-            })
-            .catch(error => {
-                console.error(error);
-                return null;
-            });
-    }
-});

package/examples/app1/src/polyfills.ts

@@ -1,84 +0,0 @@
-/**
- * This file includes polyfills needed by Angular and is loaded before the app.
- * You can add your own extra polyfills to this file.
- *
- * This file is divided into 2 sections:
- *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
- *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
- *      file.
- *
- * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
- * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
- * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
- *
- * Learn more in https://angular.io/guide/browser-support
- */
-
-/***************************************************************************************************
- * BROWSER POLYFILLS
- */
-
-/** IE9, IE10, IE11, and Chrome <55 requires all of the following polyfills.
- *  This also includes Android Emulators with older versions of Chrome and Google Search/Googlebot
- */
-
-// import 'core-js/es6/symbol';
-// import 'core-js/es6/object';
-// import 'core-js/es6/function';
-// import 'core-js/es6/parse-int';
-// import 'core-js/es6/parse-float';
-// import 'core-js/es6/number';
-// import 'core-js/es6/math';
-// import 'core-js/es6/string';
-// import 'core-js/es6/date';
-// import 'core-js/es6/array';
-// import 'core-js/es6/regexp';
-// import 'core-js/es6/map';
-// import 'core-js/es6/weak-map';
-// import 'core-js/es6/set';
-
-/** IE10 and IE11 requires the following for NgClass support on SVG elements */
-// import 'classlist.js';  // Run `npm install --save classlist.js`.
-
-/** IE10 and IE11 requires the following for the Reflect API. */
-// import 'core-js/es6/reflect';
-
-/**
- * Web Animations `@angular/platform-browser/animations`
- * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
- * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
- */
-// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
-
-/**
- * By default, zone.js will patch all possible macroTask and DomEvents
- * user can disable parts of macroTask/DomEvents patch by setting following flags
- * because those flags need to be set before `zone.js` being loaded, and webpack
- * will put import in the top of bundle, so user need to create a separate file
- * in this directory (for example: zone-flags.ts), and put the following flags
- * into that file, and then add the following code before importing zone.js.
- * import './zone-flags.ts';
- *
- * The flags allowed in zone-flags.ts are listed here.
- *
- * The following flags will work for all browsers.
- *
- * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
- * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
- * (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
- *
- *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
- *  with the following flag, it will bypass `zone.js` patch for IE/Edge
- *
- *  (window as any).__Zone_enable_cross_context_check = true;
- *
- */
-
-/***************************************************************************************************
- * Zone JS is required by default for Angular itself.
- */
-import 'zone.js'; // Included with Angular CLI.
-
-/***************************************************************************************************
- * APPLICATION IMPORTS
- */

package/examples/app1/src/styles.scss

@@ -1,35 +0,0 @@
-/* You can add global styles to this file, and also import other style files */
-$layout-content-background: #fff;
-$primary: #348fe4;
-
-$btn-border-radius: 4px;
-$btn-border-radius-lg: 4px;
-$btn-border-radius-sm: 4px;
-$btn-border-radius-xs: 4px;
-
-@import 'ngx-tethys/styles/variables.scss';
-@import 'ngx-tethys/styles/index.scss';
-
-.section-card {
-    display: block;
-    position: relative;
-    padding: 15px;
-    border: 2px $gray-300 dashed;
-
-    .section-card-header {
-        position: absolute;
-        padding: 0 10px;
-        background: $white;
-        top: -10px;
-        left: 5px;
-        color: $gray-600; // $gray-500;
-    }
-}
-
-.app1-dashboard {
-    display: inline;
-}
-
-.same-name {
-    color: red;
-}

package/examples/app1/src/test.ts

@@ -1,14 +0,0 @@
-// This file is required by karma.conf.js and loads recursively all the .spec and framework files
-
-import 'zone.js/testing';
-import { getTestBed } from '@angular/core/testing';
-import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
-
-declare const require: any;
-
-// First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().map(context);