Improvements

@@ -38,6 +38,7 @@ import { FlexLayoutModule } from '@angular/flex-layout';
 import { TranslateDefaultCompiler } from '@core/translate/translate-default-compiler';
 import { AlertDialogComponent } from '@core/services/dialog/alert-dialog.component';
 import { WINDOW_PROVIDERS } from '@core/services/window.service';
+import {TodoDialogComponent} from "@core/services/dialog/todo-dialog.component";
 
 export function HttpLoaderFactory(http: HttpClient) {
   return new TranslateHttpLoader(http, './assets/locale/locale.constant-', '.json');
@@ -46,11 +47,13 @@ export function HttpLoaderFactory(http: HttpClient) {
 @NgModule({
   entryComponents: [
     ConfirmDialogComponent,
-    AlertDialogComponent
+    AlertDialogComponent,
+    TodoDialogComponent
   ],
   declarations: [
     ConfirmDialogComponent,
-    AlertDialogComponent
+    AlertDialogComponent,
+    TodoDialogComponent
   ],
   imports: [
     CommonModule,

@@ -20,6 +20,7 @@ import { MatDialog, MatDialogConfig } from '@angular/material';
 import { ConfirmDialogComponent } from '@core/services/dialog/confirm-dialog.component';
 import { TranslateService } from '@ngx-translate/core';
 import { AlertDialogComponent } from '@core/services/dialog/alert-dialog.component';
+import {TodoDialogComponent} from "@core/services/dialog/todo-dialog.component";
 
 @Injectable(
   {
@@ -67,4 +68,13 @@ export class DialogService {
     return dialogRef.afterClosed();
   }
 
+  todo(): Observable<any> {
+    const dialogConfig: MatDialogConfig = {
+      disableClose: true,
+      panelClass: ['tb-fullscreen-dialog']
+    };
+    const dialogRef = this.dialog.open(TodoDialogComponent, dialogConfig);
+    return dialogRef.afterClosed();
+  }
+
 }

+<!--
+
+    Copyright © 2016-2019 The Thingsboard Authors
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+        http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+-->
+<h2 mat-dialog-title>Coming soon!</h2>
+<div mat-dialog-content>
+  <img [src]="comingSoon"/>
+</div>
+<div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
+  <button mat-button color="primary" [mat-dialog-close]="true" cdkFocusInitial>Ok</button>
+</div>

+/**
+ * Copyright © 2016-2019 The Thingsboard Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+:host {
+  .mat-dialog-content {
+    padding: 0 24px 24px;
+    img {
+      max-width: 500px;
+    }
+  }
+}

+///
+/// Copyright © 2016-2019 The Thingsboard Authors
+///
+/// Licensed under the Apache License, Version 2.0 (the "License");
+/// you may not use this file except in compliance with the License.
+/// You may obtain a copy of the License at
+///
+///     http://www.apache.org/licenses/LICENSE-2.0
+///
+/// Unless required by applicable law or agreed to in writing, software
+/// distributed under the License is distributed on an "AS IS" BASIS,
+/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+/// See the License for the specific language governing permissions and
+/// limitations under the License.
+///
+
+import {Component} from '@angular/core';
+import {MatDialogRef} from '@angular/material';
+
+@Component({
+  selector: 'tb-todo-dialog',
+  templateUrl: './todo-dialog.component.html',
+  styleUrls: ['./todo-dialog.component.scss']
+})
+export class TodoDialogComponent {
+
+  comingSoon = require('../../../../assets/coming-soon.jpg');
+
+  constructor(public dialogRef: MatDialogRef<TodoDialogComponent>) {
+  }
+}

@@ -279,6 +279,7 @@ export class AssetsTableConfigResolver implements Resolve<EntityTableConfig<Asse
       $event.stopPropagation();
     }
     // TODO:
+    this.dialogService.todo();
   }
 
   addAssetsToCustomer($event: Event) {

@@ -21,15 +21,18 @@ import {HomeDialogsModule} from '../../dialogs/home-dialogs.module';
 import {DashboardFormComponent} from '@modules/home/pages/dashboard/dashboard-form.component';
 import {ManageDashboardCustomersDialogComponent} from '@modules/home/pages/dashboard/manage-dashboard-customers-dialog.component';
 import {DashboardRoutingModule} from './dashboard-routing.module';
+import {MakeDashboardPublicDialogComponent} from '@modules/home/pages/dashboard/make-dashboard-public-dialog.component';
 
 @NgModule({
   entryComponents: [
     DashboardFormComponent,
-    ManageDashboardCustomersDialogComponent
+    ManageDashboardCustomersDialogComponent,
+    MakeDashboardPublicDialogComponent
   ],
   declarations: [
     DashboardFormComponent,
-    ManageDashboardCustomersDialogComponent
+    ManageDashboardCustomersDialogComponent,
+    MakeDashboardPublicDialogComponent
   ],
   imports: [
     CommonModule,

@@ -58,6 +58,10 @@ import {
   ManageDashboardCustomersDialogComponent,
   ManageDashboardCustomersDialogData
 } from './manage-dashboard-customers-dialog.component';
+import {
+  MakeDashboardPublicDialogComponent,
+  MakeDashboardPublicDialogData
+} from '@modules/home/pages/dashboard/make-dashboard-public-dialog.component';
 
 @Injectable()
 export class DashboardsTableConfigResolver implements Resolve<EntityTableConfig<DashboardInfo | Dashboard>> {
@@ -299,6 +303,7 @@ export class DashboardsTableConfigResolver implements Resolve<EntityTableConfig<
     }
     // TODO:
     // this.router.navigateByUrl(`customers/${customer.id.id}/users`);
+    this.dialogService.todo();
   }
 
   importDashboard($event: Event) {
@@ -306,6 +311,7 @@ export class DashboardsTableConfigResolver implements Resolve<EntityTableConfig<
       $event.stopPropagation();
     }
     // TODO:
+    this.dialogService.todo();
   }
 
   exportDashboard($event: Event, dashboard: DashboardInfo) {
@@ -313,6 +319,7 @@ export class DashboardsTableConfigResolver implements Resolve<EntityTableConfig<
       $event.stopPropagation();
     }
     // TODO:
+    this.dialogService.todo();
   }
 
   addDashboardsToCustomer($event: Event) {
@@ -341,9 +348,17 @@ export class DashboardsTableConfigResolver implements Resolve<EntityTableConfig<
     }
     this.dashboardService.makeDashboardPublic(dashboard.id.id).subscribe(
       (publicDashboard) => {
-        // TODO:
-
-        this.config.table.updateData();
+        this.dialog.open<MakeDashboardPublicDialogComponent, MakeDashboardPublicDialogData>
+        (MakeDashboardPublicDialogComponent, {
+          disableClose: true,
+          panelClass: ['tb-dialog', 'tb-fullscreen-dialog'],
+          data: {
+            dashboard: publicDashboard
+          }
+        }).afterClosed()
+          .subscribe(() => {
+              this.config.table.updateData();
+          });
       }
     );
   }

+<!--
+
+    Copyright © 2016-2019 The Thingsboard Authors
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+        http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+-->
+<div style="min-width: 400px;">
+  <mat-toolbar fxLayout="row" color="primary">
+    <h2>{{ 'dashboard.public-dashboard-title' | translate }}</h2>
+    <span fxFlex></span>
+    <button mat-button mat-icon-button
+            (click)="close()"
+            type="button">
+      <mat-icon class="material-icons">close</mat-icon>
+    </button>
+  </mat-toolbar>
+  <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
+  </mat-progress-bar>
+  <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
+  <div mat-dialog-content tb-toast toastTarget="makeDashboardPublicDialogContent">
+    <span
+       innerHTML="{{ translate.get('dashboard.public-dashboard-text', {dashboardTitle: dashboard.title, publicLink: publicLink}) | async }}">
+    </span>
+    <div fxLayout="row" fxLayoutAlign="start center">
+      <pre class="tb-highlight" fxFlex><code>{{ publicLink }}</code></pre>
+      <button mat-button mat-icon-button
+              ngxClipboard
+              (cbOnSuccess)="onPublicLinkCopied($event)"
+              cbContent="{{publicLink}}"
+              matTooltipPosition="above"
+              matTooltip="{{ 'dashboard.copy-public-link' | translate }}">
+        <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
+      </button>
+    </div>
+    <div class="tb-notice" innerHTML="{{'dashboard.public-dashboard-notice' | translate}}"></div>
+    <tb-social-share-panel style="padding-top: 15px;"
+                           shareTitle="{{ 'dashboard.socialshare-title' | translate:{dashboardTitle: dashboard.title} }}"
+                           shareText="{{ 'dashboard.socialshare-text' | translate:{dashboardTitle: dashboard.title} }}"
+                           shareLink="{{ publicLink }}"
+                           shareHashTags="thingsboard, iot">
+    </tb-social-share-panel>
+  </div>
+  <div mat-dialog-actions fxLayout="row">
+    <span fxFlex></span>
+    <button mat-button color="primary"
+            style="margin-right: 20px;"
+            type="button"
+            [disabled]="(isLoading$ | async)"
+            (click)="close()" cdkFocusInitial>
+      {{ 'action.ok' | translate }}
+    </button>
+  </div>
+</div>

+///
+/// Copyright © 2016-2019 The Thingsboard Authors
+///
+/// Licensed under the Apache License, Version 2.0 (the "License");
+/// you may not use this file except in compliance with the License.
+/// You may obtain a copy of the License at
+///
+///     http://www.apache.org/licenses/LICENSE-2.0
+///
+/// Unless required by applicable law or agreed to in writing, software
+/// distributed under the License is distributed on an "AS IS" BASIS,
+/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+/// See the License for the specific language governing permissions and
+/// limitations under the License.
+///
+
+import {Component, Inject, OnInit, SkipSelf} from '@angular/core';
+import {ErrorStateMatcher, MAT_DIALOG_DATA, MatDialogRef} from '@angular/material';
+import {PageComponent} from '@shared/components/page.component';
+import {Store} from '@ngrx/store';
+import {AppState} from '@core/core.state';
+import {FormBuilder, FormControl, FormGroup, FormGroupDirective, NgForm} from '@angular/forms';
+import {EntityType} from '@shared/models/entity-type.models';
+import {DashboardService} from '@core/http/dashboard.service';
+import {forkJoin, Observable} from 'rxjs';
+import {DashboardInfo} from '@app/shared/models/dashboard.models';
+import {ActionNotificationShow} from '@core/notification/notification.actions';
+import {TranslateService} from '@ngx-translate/core';
+
+export interface MakeDashboardPublicDialogData {
+  dashboard: DashboardInfo;
+}
+
+@Component({
+  selector: 'tb-make-dashboard-public-dialog',
+  templateUrl: './make-dashboard-public-dialog.component.html',
+  styleUrls: []
+})
+export class MakeDashboardPublicDialogComponent extends PageComponent implements OnInit {
+
+  dashboard: DashboardInfo;
+
+  publicLink: string;
+
+  constructor(protected store: Store<AppState>,
+              @Inject(MAT_DIALOG_DATA) public data: MakeDashboardPublicDialogData,
+              public translate: TranslateService,
+              private dashboardService: DashboardService,
+              public dialogRef: MatDialogRef<MakeDashboardPublicDialogComponent>,
+              public fb: FormBuilder) {
+    super(store);
+
+    this.dashboard = data.dashboard;
+    this.publicLink = dashboardService.getPublicDashboardLink(this.dashboard);
+  }
+
+  ngOnInit(): void {
+  }
+
+  close(): void {
+    this.dialogRef.close();
+  }
+
+
+  onPublicLinkCopied($event) {
+    this.store.dispatch(new ActionNotificationShow(
+      {
+        message: this.translate.instant('dashboard.public-link-copied-message'),
+        type: 'success',
+        target: 'makeDashboardPublicDialogContent',
+        duration: 750,
+        verticalPosition: 'bottom',
+        horizontalPosition: 'left'
+      }));
+  }
+
+}

@@ -311,6 +311,7 @@ export class DevicesTableConfigResolver implements Resolve<EntityTableConfig<Dev
       $event.stopPropagation();
     }
     // TODO:
+    this.dialogService.todo();
   }
 
   addDevicesToCustomer($event: Event) {

@@ -93,18 +93,21 @@
             </mat-panel-title>
           </mat-expansion-panel-header>
           <div translate class="tb-hint">entity-view.attributes-propagation-hint</div>
+          <label translate class="tb-title no-padding">entity-view.client-attributes</label>
           <tb-entity-keys-list
             [entityId]="selectedEntityId | async"
             formControlName="cs"
             keysText="entity-view.client-attributes-placeholder"
             [dataKeyType]="dataKeyType.attribute">
           </tb-entity-keys-list>
+          <label translate class="tb-title no-padding">entity-view.shared-attributes</label>
           <tb-entity-keys-list
             [entityId]="selectedEntityId | async"
             formControlName="sh"
             keysText="entity-view.shared-attributes-placeholder"
             [dataKeyType]="dataKeyType.attribute">
           </tb-entity-keys-list>
+          <label translate class="tb-title no-padding">entity-view.server-attributes</label>
           <tb-entity-keys-list
             [entityId]="selectedEntityId | async"
             formControlName="ss"
@@ -119,6 +122,7 @@
             </mat-panel-title>
           </mat-expansion-panel-header>
           <div translate class="tb-hint">entity-view.timeseries-data-hint</div>
+          <label translate class="tb-title no-padding">entity-view.timeseries</label>
           <tb-entity-keys-list
             [entityId]="selectedEntityId | async"
             formControlName="timeseries"

@@ -119,6 +119,7 @@ export class RuleChainsTableConfigResolver implements Resolve<EntityTableConfig<
       $event.stopPropagation();
     }
     // TODO:
+    this.dialogService.todo();
   }
 
   openRuleChain($event: Event, ruleChain: RuleChain) {
@@ -127,6 +128,7 @@ export class RuleChainsTableConfigResolver implements Resolve<EntityTableConfig<
     }
     // TODO:
     // this.router.navigateByUrl(`customers/${customer.id.id}/users`);
+    this.dialogService.todo();
   }
 
   exportRuleChain($event: Event, ruleChain: RuleChain) {
@@ -134,6 +136,7 @@ export class RuleChainsTableConfigResolver implements Resolve<EntityTableConfig<
       $event.stopPropagation();
     }
     // TODO:
+    this.dialogService.todo();
   }
 
   setRootRuleChain($event: Event, ruleChain: RuleChain) {

@@ -18,6 +18,12 @@
 <div class="tb-details-buttons">
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
+          (click)="onEntityAction($event, 'open')"
+          [fxShow]="!isEdit">
+    {{'widgets-bundle.open-widgets-bundle' | translate }}
+  </button>
+  <button mat-raised-button color="primary"
+          [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'export')"
           [fxShow]="!isEdit">
     {{'widgets-bundle.export' | translate }}

@@ -35,6 +35,7 @@ import {Store} from '@ngrx/store';
 import {AppState} from '@core/core.state';
 import {getCurrentAuthUser} from '@app/core/auth/auth.selectors';
 import {Authority} from '@shared/models/authority.enum';
+import {DialogService} from '@core/services/dialog.service';
 
 @Injectable()
 export class WidgetsBundlesTableConfigResolver implements Resolve<EntityTableConfig<WidgetsBundle>> {
@@ -42,6 +43,7 @@ export class WidgetsBundlesTableConfigResolver implements Resolve<EntityTableCon
   private readonly config: EntityTableConfig<WidgetsBundle> = new EntityTableConfig<WidgetsBundle>();
 
   constructor(private store: Store<AppState>,
+              private dialogService: DialogService,
               private widgetsService: WidgetService,
               private translate: TranslateService,
               private datePipe: DatePipe,
@@ -126,6 +128,7 @@ export class WidgetsBundlesTableConfigResolver implements Resolve<EntityTableCon
       $event.stopPropagation();
     }
     // TODO:
+    this.dialogService.todo();
   }
 
   openWidgetsBundle($event: Event, widgetsBundle: WidgetsBundle) {
@@ -134,6 +137,7 @@ export class WidgetsBundlesTableConfigResolver implements Resolve<EntityTableCon
     }
     // TODO:
     // this.router.navigateByUrl(`customers/${customer.id.id}/users`);
+    this.dialogService.todo();
   }
 
   exportWidgetsBundle($event: Event, widgetsBundle: WidgetsBundle) {
@@ -141,6 +145,7 @@ export class WidgetsBundlesTableConfigResolver implements Resolve<EntityTableCon
       $event.stopPropagation();
     }
     // TODO:
+    this.dialogService.todo();
   }
 
   onWidgetsBundleAction(action: EntityAction<WidgetsBundle>): boolean {

@@ -27,7 +27,10 @@
           (click)="clear()">
     <mat-icon class="material-icons">close</mat-icon>
   </button>
-  <mat-autocomplete #dashboardAutocomplete="matAutocomplete" [displayWith]="displayDashboardFn">
+  <mat-autocomplete
+    class="tb-autocomplete"
+    #dashboardAutocomplete="matAutocomplete"
+    [displayWith]="displayDashboardFn">
     <mat-option *ngFor="let dashboard of filteredDashboards | async" [value]="dashboard">
       <span [innerHTML]="dashboard.title | highlight:searchText"></span>
     </mat-option>

@@ -28,7 +28,9 @@
           (click)="clear()">
     <mat-icon class="material-icons">close</mat-icon>
   </button>
-  <mat-autocomplete #entityAutocomplete="matAutocomplete" [displayWith]="displayEntityFn">
+  <mat-autocomplete class="tb-autocomplete"
+                    #entityAutocomplete="matAutocomplete"
+                    [displayWith]="displayEntityFn">
     <mat-option *ngFor="let entity of filteredEntities | async" [value]="entity">
       <span [innerHTML]="entity.name | highlight:searchText"></span>
     </mat-option>

@@ -15,27 +15,32 @@
     limitations under the License.
 
 -->
-<mat-form-field [formGroup]="keysListFormGroup" class="mat-block">
-  <mat-chip-list #chipList [disabled]="disabled">
+<mat-form-field appearance="standard" [formGroup]="keysListFormGroup" class="mat-block">
+  <mat-chip-list #chipList>
     <mat-chip
       *ngFor="let key of modelValue"
-      [disabled]="disabled"
       [selectable]="!disabled"
       [removable]="!disabled"
       (removed)="remove(key)">
       {{key}}
       <mat-icon matChipRemove *ngIf="!disabled">close</mat-icon>
     </mat-chip>
-    <input matInput type="text" placeholder="{{ keysText | translate }}"
+    <input matInput type="text" placeholder="{{ !disabled ? (keysText | translate) : '' }}"
+           style="max-width: 200px;"
            #keyInput
            formControlName="key"
+           matAutocompleteOrigin
+           #origin="matAutocompleteOrigin"
+           [matAutocompleteConnectedTo]="origin"
            (focusin)="onFocus()"
            [matAutocomplete]="keyAutocomplete"
            [matChipInputFor]="chipList"
            [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
            (matChipInputTokenEnd)="add($event)">
   </mat-chip-list>
-  <mat-autocomplete #keyAutocomplete="matAutocomplete" (optionSelected)="selected($event)"
+  <mat-autocomplete #keyAutocomplete="matAutocomplete"
+                    class="tb-autocomplete"
+                    (optionSelected)="selected($event)"
                     [displayWith]="displayKeyFn">
     <mat-option *ngFor="let key of filteredKeys | async" [value]="key">
       <span [innerHTML]="key | highlight:searchText"></span>

+/**
+ * Copyright © 2016-2019 The Thingsboard Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+:host {
+
+}
+
+:host ::ng-deep {
+  .mat-form-field-flex {
+    padding-top: 0;
+    .mat-form-field-infix {
+      border-top: 0;
+    }
+  }
+}

@@ -41,7 +41,7 @@ import * as equal from 'deep-equal';
 @Component({
   selector: 'tb-entity-keys-list',
   templateUrl: './entity-keys-list.component.html',
-  styleUrls: [],
+  styleUrls: ['./entity-keys-list.component.scss'],
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,

@@ -25,7 +25,7 @@
       {{entity.name}}
       <mat-icon matChipRemove *ngIf="!disabled">close</mat-icon>
     </mat-chip>
-    <input matInput type="text" placeholder="{{ 'entity.entity-list' | translate }}"
+    <input matInput type="text" placeholder="{{ !disabled ? ('entity.entity-list' | translate) : '' }}"
            style="max-width: 200px;"
            #entityInput
            formControlName="entity"
@@ -36,6 +36,7 @@
            [matChipInputFor]="chipList">
   </mat-chip-list>
   <mat-autocomplete #entityAutocomplete="matAutocomplete"
+                    class="tb-autocomplete"
                     [displayWith]="displayEntityFn">
     <mat-option *ngFor="let entity of filteredEntities | async" [value]="entity">
       <span [innerHTML]="entity.name | highlight:searchText"></span>

@@ -29,7 +29,10 @@
           (click)="clear()">
     <mat-icon class="material-icons">close</mat-icon>
   </button>
-  <mat-autocomplete #subTypeAutocomplete="matAutocomplete" [displayWith]="displaySubTypeFn">
+  <mat-autocomplete
+    class="tb-autocomplete"
+    #subTypeAutocomplete="matAutocomplete"
+    [displayWith]="displaySubTypeFn">
     <mat-option *ngFor="let subType of filteredSubTypes | async" [value]="subType">
       <span [innerHTML]="subType | highlight:searchText"></span>
     </mat-option>

+/**
+ * Copyright © 2016-2019 The Thingsboard Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+:host {
+  display: block;
+}

@@ -28,7 +28,7 @@ import {isLocalUrl} from '@core/utils';
 @Component({
   selector: 'tb-social-share-panel',
   templateUrl: './socialshare-panel.component.html',
-  styleUrls: []
+  styleUrls: ['./socialshare-panel.component.scss']
 })
 export class SocialSharePanelComponent implements OnInit {
 

@@ -242,6 +242,13 @@ pre.tb-highlight {
   }
 }
 
+.tb-notice {
+  padding: 15px;
+  font-size: 16px;
+  background-color: #f7f7f7;
+  border: 1px solid #ccc;
+}
+
 .ace_editor {
   font-size: 16px !important;
 }
@@ -326,3 +333,19 @@ mat-label {
   line-height: 14px;
   color: rgb(221, 44, 0);
 }
+
+.tb-autocomplete {
+  .mat-option {
+    display: block;
+    line-height: 24px;
+    height: auto !important;
+    padding-top: 8px;
+    border-bottom: 1px solid #eee;
+    font-size: 14px;
+    .mat-option-text {
+      line-height: 24px;
+      height: auto !important;
+      white-space: normal !important;
+    }
+  }
+}